target, details

index.html

@@ -28,6 +28,13 @@
                         <input type="number" id="ftp-input" value="343" min="0" step="1" placeholder="343" />
                         <span class="ftp-unit">Watts</span>
                     </div>
+                    <div class="ftp-input-container">
+                        <label for="target-acwr-input">
+                            Target ACWR
+                        </label>
+                        <input type="number" id="target-acwr-input" value="1.3" min="0.5" max="3" step="0.1" placeholder="1.3" />
+                        <span class="ftp-unit"></span>
+                    </div>
                     <input type="file" id="csv-upload" accept=".csv" />
                     <label for="csv-upload" class="upload-label">
                         Choose CSV File
@@ -128,6 +135,14 @@
         </div>
     </div>
 
+    <div id="activity-popover" class="activity-popover hidden">
+        <div class="activity-popover-content">
+            <button id="activity-close" class="help-close">&times;</button>
+            <h2 id="activity-date-title"></h2>
+            <div id="activity-list"></div>
+        </div>
+    </div>
+
     <script type="module" src="/src/main.ts"></script>
 </body>
 

src/components/charts.ts

@@ -1,5 +1,5 @@
 import { Chart, ChartConfiguration, registerables } from 'chart.js';
-import type { MetricACWRData } from '@/types';
+import type { MetricACWRData, Activity } from '@/types';
 
 // Register all Chart.js components
 Chart.register(...registerables);
@@ -96,6 +96,143 @@ const acwrGradientPlugin = {
 // Register the custom plugin
 Chart.register(acwrGradientPlugin);
 
+// Function to get activity emoji based on type
+function getActivityEmoji(activityType: string): string {
+    const type = activityType.toLowerCase();
+    if (type.includes('run')) return '🏃';
+    if (type.includes('cycling') || type.includes('bike') || type.includes('ride')) return '🚴';
+    if (type.includes('swim')) return '🏊';
+    if (type.includes('walk') || type.includes('hiking')) return '🚶';
+    if (type.includes('strength') || type.includes('gym')) return '💪';
+    if (type.includes('yoga')) return '🧘';
+    if (type.includes('row')) return '🚣';
+    if (type.includes('ski')) return '⛷️';
+    return '⚡'; // Default for other activities
+}
+
+// Function to show activity details popover
+function showActivityDetails(dateStr: string, activities: Activity[]): void {
+    const popover = document.getElementById('activity-popover');
+    const dateTitle = document.getElementById('activity-date-title');
+    const activityList = document.getElementById('activity-list');
+    
+    if (!popover || !dateTitle || !activityList) return;
+    
+    // Format date
+    const date = new Date(dateStr);
+    const formattedDate = date.toLocaleDateString('en-US', { 
+        weekday: 'long', 
+        year: 'numeric', 
+        month: 'long', 
+        day: 'numeric' 
+    });
+    
+    dateTitle.textContent = formattedDate;
+    
+    // Clear previous activities
+    activityList.innerHTML = '';
+    
+    // Add each activity
+    activities.forEach(activity => {
+        const activityItem = document.createElement('div');
+        activityItem.className = 'activity-item';
+        
+        const displayName = activity.title || activity.activityType || 'Activity';
+        const emoji = getActivityEmoji(activity.activityType || 'Activity');
+        
+        const header = document.createElement('div');
+        header.className = 'activity-item-header';
+        header.innerHTML = `<span>${emoji}</span><span>${displayName}</span>`;
+        
+        const details = document.createElement('div');
+        details.className = 'activity-item-details';
+        
+        // Distance
+        if (activity.distance !== undefined && activity.distance > 0) {
+            const distanceDetail = document.createElement('div');
+            distanceDetail.className = 'activity-detail';
+            distanceDetail.innerHTML = `
+                <span class="activity-detail-label">Distance</span>
+                <span class="activity-detail-value">${activity.distance.toFixed(2)} km</span>
+            `;
+            details.appendChild(distanceDetail);
+        }
+        
+        // Duration
+        if (activity.duration !== undefined && activity.duration > 0) {
+            const durationDetail = document.createElement('div');
+            durationDetail.className = 'activity-detail';
+            const durationMin = Math.round(activity.duration);
+            durationDetail.innerHTML = `
+                <span class="activity-detail-label">Duration</span>
+                <span class="activity-detail-value">${durationMin} min</span>
+            `;
+            details.appendChild(durationDetail);
+        }
+        
+        // TSS
+        if (activity.trainingStressScore !== undefined && activity.trainingStressScore > 0) {
+            const tssDetail = document.createElement('div');
+            tssDetail.className = 'activity-detail';
+            tssDetail.innerHTML = `
+                <span class="activity-detail-label">TSS</span>
+                <span class="activity-detail-value">${activity.trainingStressScore.toFixed(0)}</span>
+            `;
+            details.appendChild(tssDetail);
+        }
+        
+        // Calories
+        if (activity.calories !== undefined && activity.calories > 0) {
+            const caloriesDetail = document.createElement('div');
+            caloriesDetail.className = 'activity-detail';
+            caloriesDetail.innerHTML = `
+                <span class="activity-detail-label">Calories</span>
+                <span class="activity-detail-value">${activity.calories.toFixed(0)} kcal</span>
+            `;
+            details.appendChild(caloriesDetail);
+        }
+        
+        activityItem.appendChild(header);
+        activityItem.appendChild(details);
+        activityList.appendChild(activityItem);
+    });
+    
+    // Show popover
+    popover.classList.remove('hidden');
+}
+
+// Setup activity popover close handlers
+function setupActivityPopoverHandlers(): void {
+    const popover = document.getElementById('activity-popover');
+    const closeButton = document.getElementById('activity-close');
+    
+    if (!popover || !closeButton) return;
+    
+    // Close button click
+    closeButton.addEventListener('click', () => {
+        popover.classList.add('hidden');
+    });
+    
+    // Click outside to close
+    popover.addEventListener('click', (e) => {
+        if (e.target === popover) {
+            popover.classList.add('hidden');
+        }
+    });
+    
+    // Escape key to close
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && !popover.classList.contains('hidden')) {
+            popover.classList.add('hidden');
+        }
+    });
+}
+
+// Initialize handlers on load
+if (typeof window !== 'undefined') {
+    setupActivityPopoverHandlers();
+}
+
 // Common chart styling inspired by Garmin
 const commonOptions = {
     responsive: true,
@@ -220,6 +357,26 @@ function createDualAxisChart(
         },
         options: {
             ...commonOptions,
+            onClick: (_event: any, elements: any[]) => {
+                if (elements.length > 0) {
+                    const element = elements[0];
+                    const datasetIndex = element.datasetIndex;
+                    
+                    // Only handle clicks on the scatter (daily values) dataset
+                    if (datasetIndex === 0) {
+                        const index = element.index;
+                        const dateStr = data.dates[index];
+                        
+                        // Get activities for this date
+                        if (data.activitiesByDate) {
+                            const activities = data.activitiesByDate.get(dateStr);
+                            if (activities && activities.length > 0) {
+                                showActivityDetails(dateStr, activities);
+                            }
+                        }
+                    }
+                }
+            },
             scales: {
                 ...commonOptions.scales,
                 y: {

src/main.ts

@@ -13,6 +13,7 @@ import {
 // DOM elements
 const csvUpload = document.getElementById('csv-upload') as HTMLInputElement;
 const ftpInput = document.getElementById('ftp-input') as HTMLInputElement;
+const targetAcwrInput = document.getElementById('target-acwr-input') as HTMLInputElement;
 const uploadStatus = document.getElementById('upload-status') as HTMLDivElement;
 const chartsSection = document.getElementById('charts-section') as HTMLElement;
 const filterSection = document.getElementById('filter-section') as HTMLElement;
@@ -110,8 +111,9 @@ function handleFilterChange(): void {
     const filteredActivities = selectedActivityTypes.size > 0
         ? allActivities.filter(activity => selectedActivityTypes.has(activity.activityType || ''))
         : allActivities;
-
-    renderCharts(filteredActivities);
+    
+    const targetAcwr = parseFloat(targetAcwrInput.value) || 1.3;
+    renderCharts(filteredActivities, targetAcwr);
 }
 
 async function handleFileUpload(event: Event): Promise<void> {
@@ -143,7 +145,8 @@ async function handleFileUpload(event: Event): Promise<void> {
         const filteredActivities = selectedActivityTypes.size > 0
             ? allActivities.filter(activity => selectedActivityTypes.has(activity.activityType || ''))
             : allActivities;
-        renderCharts(filteredActivities);
+        const targetAcwr = parseFloat(targetAcwrInput.value) || 1.3;
+        renderCharts(filteredActivities, targetAcwr);
 
         // Show filter and charts sections
         filterSection.classList.remove('hidden');
@@ -161,7 +164,7 @@ async function handleFileUpload(event: Event): Promise<void> {
     }
 }
 
-function renderCharts(activities: Activity[]): void {
+function renderCharts(activities: Activity[], targetAcwr: number): void {
     // Calculate date range from all activities for consistency
     let dateRange: { start: Date; end: Date } | undefined;
     if (allActivities.length > 0) {
@@ -181,22 +184,26 @@ function renderCharts(activities: Activity[]): void {
     const distanceData = calculateMetricACWR(
         activities,
         (activity) => activity.distance,
-        dateRange
+        dateRange,
+        targetAcwr
     );
     const durationData = calculateMetricACWR(
         activities,
         (activity) => activity.duration,
-        dateRange
+        dateRange,
+        targetAcwr
     );
     const tssData = calculateMetricACWR(
         activities,
         (activity) => activity.trainingStressScore,
-        dateRange
+        dateRange,
+        targetAcwr
     );
     const caloriesData = calculateMetricACWR(
         activities,
         (activity) => activity.calories,
-        dateRange
+        dateRange,
+        targetAcwr
     );
 
     // Destroy existing charts

src/style.css

@@ -166,6 +166,89 @@ header h1 {
     font-weight: 600;
 }
 
+.activity-popover {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    padding: 1rem;
+}
+
+.activity-popover.hidden {
+    display: none;
+}
+
+.activity-popover-content {
+    background-color: var(--card-bg);
+    border-radius: 12px;
+    padding: 2rem;
+    max-width: 600px;
+    max-height: 90vh;
+    overflow-y: auto;
+    position: relative;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}
+
+#activity-date-title {
+    margin-bottom: 1.5rem;
+    color: var(--primary-color);
+    font-size: 1.5rem;
+}
+
+#activity-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.activity-item {
+    background-color: var(--bg-color);
+    border-radius: 8px;
+    padding: 1rem;
+    border-left: 4px solid var(--primary-color);
+}
+
+.activity-item-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--text-color);
+}
+
+.activity-item-details {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+    gap: 0.5rem;
+    font-size: 0.875rem;
+}
+
+.activity-detail {
+    display: flex;
+    flex-direction: column;
+}
+
+.activity-detail-label {
+    color: var(--secondary-color);
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.activity-detail-value {
+    color: var(--text-color);
+    font-weight: 600;
+    font-size: 1rem;
+}
+
 main {
     flex: 1;
     padding: 2rem;

src/types/index.ts

@@ -1,6 +1,7 @@
 export interface Activity {
     date: Date;
     activityType?: string;
+    title?: string;
     distance?: number; // in kilometers
     duration?: number; // in minutes
     trainingStressScore?: number;
@@ -23,4 +24,5 @@ export interface MetricACWRData {
     acwr: (number | null)[]; // ACWR based on this metric
     targetTomorrowValue?: number | null; // Value needed tomorrow to reach target ACWR of 1.3
     targetACWR?: number; // The target ACWR value used for calculation
+    activitiesByDate?: Map<string, Activity[]>; // Activities grouped by date
 }

src/utils/csvParser.ts

@@ -117,6 +117,9 @@ export function parseCSV(file: File, userFTP: number = 343): Promise<Activity[]>
                         // Get activity type
                         const activityType = row['Activity Type'] || row['Type'] || row['Sport'];
 
+                        // Get activity title
+                        const title = row['Title'] || row['Activity Name'] || row['Name'];
+
                         // Parse calories
                         const caloriesStr = row['Calories'];
                         let calories: number | undefined;
@@ -130,6 +133,7 @@ export function parseCSV(file: File, userFTP: number = 343): Promise<Activity[]>
                         const activity: Activity = {
                             date,
                             activityType,
+                            title,
                             distance,
                             duration,
                             trainingStressScore,

src/utils/metricAcwr.ts

@@ -19,7 +19,8 @@ function formatDateLocal(date: Date): string {
 export function calculateMetricACWR(
     activities: Activity[],
     metricExtractor: (activity: Activity) => number | undefined,
-    dateRange?: { start: Date; end: Date }
+    dateRange?: { start: Date; end: Date },
+    targetACWR: number = 1.3
 ): MetricACWRData {
     if (activities.length === 0 && !dateRange) {
         return {
@@ -40,12 +41,21 @@ export function calculateMetricACWR(
 
     // Create a map of date -> daily sum
     const dailyValues = new Map<string, number>();
+    // Create a map of date -> activities
+    const activitiesByDate = new Map<string, Activity[]>();
+    
     sortedActivities.forEach(activity => {
         const dateStr = formatDateLocal(activity.date);
         const value = metricExtractor(activity);
         if (value !== undefined) {
             dailyValues.set(dateStr, (dailyValues.get(dateStr) || 0) + value);
         }
+        
+        // Group activities by date
+        if (!activitiesByDate.has(dateStr)) {
+            activitiesByDate.set(dateStr, []);
+        }
+        activitiesByDate.get(dateStr)!.push(activity);
     });
 
     const dates: string[] = [];
@@ -124,7 +134,6 @@ export function calculateMetricACWR(
 
     // Calculate tomorrow's required value to reach ACWR
     let targetTomorrowValue: number | null = null;
-    const targetACWR = 1.3;
 
     if (allDates.length >= 28) {
 
@@ -179,5 +188,6 @@ export function calculateMetricACWR(
         acwr,
         targetTomorrowValue,
         targetACWR: allDates.length >= 28 ? targetACWR : undefined,
+        activitiesByDate,
     };
 }