plan to reach target

src/components/charts.ts

@@ -56,11 +56,15 @@ function getACWRColor(value: number | null): string {
 const acwrGradientPlugin = {
     id: 'acwrGradient',
     afterDatasetsDraw(chart: Chart) {
-        const meta = chart.getDatasetMeta(3); // ACWR is the 4th dataset (index 3)
+        // Find the ACWR dataset by label
+        const acwrDatasetIndex = chart.data.datasets.findIndex(ds => ds.label === 'ACWR');
+        if (acwrDatasetIndex === -1) return;
+        
+        const meta = chart.getDatasetMeta(acwrDatasetIndex);
         if (!meta || meta.hidden) return;
 
         const ctx = chart.ctx;
-        const data = chart.data.datasets[3].data as (number | null)[];
+        const data = chart.data.datasets[acwrDatasetIndex].data as (number | null)[];
         const chartArea = chart.chartArea;
 
         ctx.save();
@@ -350,10 +354,28 @@ function createDualAxisChart(
     const canvas = document.getElementById(canvasId) as HTMLCanvasElement;
     if (!canvas) throw new Error(`Canvas ${canvasId} not found`);
 
+    // Combine historical and future data for charts
+    const allDates = [...data.dates];
+    const allValues = [...data.values];
+    const allAverage7d = [...data.average7d];
+    const allAverage28d = [...data.average28d];
+    const allAcwr = [...data.acwr];
+
+    // Add future data if available
+    if (data.futureDates && data.futureValues) {
+        allDates.push(...data.futureDates);
+        allValues.push(...data.futureValues);
+        allAverage7d.push(...(data.futureAverage7d || []));
+        allAverage28d.push(...(data.futureAverage28d || []));
+        allAcwr.push(...(data.futureAcwr || []));
+    }
+
+    const historicalCount = data.dates.length;
+
     const config: ChartConfiguration = {
         type: 'line',
         data: {
-            labels: data.dates,
+            labels: allDates,
             datasets: [
                 {
                     type: 'scatter',
@@ -366,6 +388,20 @@ function createDualAxisChart(
                     pointHoverRadius: 7,
                     yAxisID: 'y',
                 },
+                // Future daily values (grey, larger points) - exclude zero values
+                ...(data.futureValues ? [{
+                    type: 'scatter' as const,
+                    label: `Predicted Daily ${metricLabel}`,
+                    data: Array(historicalCount).fill(null).concat(
+                        data.futureValues.map(v => v > 0 ? v : null)
+                    ),
+                    backgroundColor: 'rgba(148, 163, 184, 0.6)',
+                    borderColor: 'rgba(100, 116, 139, 0.8)',
+                    borderWidth: 2,
+                    pointRadius: 7,
+                    pointHoverRadius: 9,
+                    yAxisID: 'y',
+                }] : []),
                 {
                     type: 'line',
                     label: '7-Day Average',
@@ -409,6 +445,21 @@ function createDualAxisChart(
                     fill: false,
                     yAxisID: 'y1',
                 },
+                // Future ACWR (grey, thicker)
+                ...(data.futureAcwr ? [{
+                    type: 'line' as const,
+                    label: 'Predicted ACWR',
+                    data: Array(historicalCount).fill(null).concat(data.futureAcwr),
+                    borderColor: 'rgba(148, 163, 184, 0.8)',
+                    backgroundColor: 'rgba(148, 163, 184, 0.1)',
+                    borderWidth: 5,
+                    pointRadius: 0,
+                    pointHoverRadius: 6,
+                    tension: 0.4,
+                    fill: false,
+                    yAxisID: 'y1',
+                    borderDash: [5, 5],
+                }] : []),
             ],
         },
         options: {

src/types/index.ts

@@ -30,4 +30,10 @@ export interface MetricACWRData {
     restTomorrowACWR?: number | null; // What ACWR would be with a rest day tomorrow
     todayValue?: number | null; // Today's value for reference
     activitiesByDate?: Map<string, Activity[]>; // Activities grouped by date
+    // Future predictions (next 7 days)
+    futureDates?: string[]; // Dates for future predictions
+    futureValues?: (number | null)[]; // Optimal activity values for future days
+    futureAverage7d?: (number | null)[]; // Predicted 7-day rolling average
+    futureAverage28d?: (number | null)[]; // Predicted 28-day rolling average
+    futureAcwr?: (number | null)[]; // Predicted ACWR values
 }

src/utils/metricAcwr.ts

@@ -10,6 +10,119 @@ function formatDateLocal(date: Date): string {
     return `${year}-${month}-${day}`;
 }
 
+/**
+ * Calculate optimal activity values for the next 7 days to reach and maintain target ACWR
+ * Uses a greedy algorithm that optimizes each day to get closer to target ACWR
+ */
+function calculateOptimalFutureDays(
+    allDates: Date[],
+    dailyValues: Map<string, number>,
+    targetACWR: number,
+    numFutureDays: number = 7
+): {
+    futureDates: string[];
+    futureValues: number[];
+    futureAverage7d: number[];
+    futureAverage28d: number[];
+    futureAcwr: number[];
+} {
+    const futureDates: string[] = [];
+    const futureValues: number[] = [];
+    const futureAverage7d: number[] = [];
+    const futureAverage28d: number[] = [];
+    const futureAcwr: number[] = [];
+
+    // Create a mutable copy of daily values to simulate future
+    const simulatedDailyValues = new Map(dailyValues);
+    const simulatedAllDates = [...allDates];
+
+    // Get the last date in the data
+    const lastDate = new Date(allDates[allDates.length - 1]);
+
+    for (let dayOffset = 1; dayOffset <= numFutureDays; dayOffset++) {
+        const futureDate = new Date(lastDate);
+        futureDate.setDate(lastDate.getDate() + dayOffset);
+        const futureDateStr = formatDateLocal(futureDate);
+
+        futureDates.push(futureDateStr);
+        simulatedAllDates.push(futureDate);
+
+        const currentIndex = simulatedAllDates.length - 1;
+
+        // Calculate what the 7-day sum would be (last 6 days + today)
+        let acuteSum = 0;
+        for (let i = Math.max(0, currentIndex - 6); i < currentIndex; i++) {
+            const checkDateStr = formatDateLocal(simulatedAllDates[i]);
+            acuteSum += simulatedDailyValues.get(checkDateStr) || 0;
+        }
+
+        // Calculate what the 28-day sum would be (last 27 days + today)
+        let chronicSum = 0;
+        for (let i = Math.max(0, currentIndex - 27); i < currentIndex; i++) {
+            const checkDateStr = formatDateLocal(simulatedAllDates[i]);
+            chronicSum += simulatedDailyValues.get(checkDateStr) || 0;
+        }
+
+        // Calculate optimal value for today using the formula:
+        // targetACWR = [(acuteSum + X) / 7] / [(chronicSum + X) / 28]
+        // Solving for X:
+        // X = (4 * acuteSum - targetACWR * chronicSum) / (targetACWR - 4)
+
+        const numerator = 4 * acuteSum - targetACWR * chronicSum;
+        const denominator = targetACWR - 4;
+
+        let optimalValue = 0;
+
+        if (Math.abs(denominator) > 0.001) {
+            optimalValue = numerator / denominator;
+
+            // Ensure non-negative values (can't have negative activity)
+            if (optimalValue < 0) {
+                optimalValue = 0;
+            }
+        } else {
+            // Special case: when targetACWR ≈ 4, we need a different approach
+            // In this case, set to average of recent values to maintain stability
+            const recentSum = acuteSum;
+            optimalValue = recentSum / 7;
+        }
+
+        // Store the optimal value for this future day
+        futureValues.push(optimalValue);
+        simulatedDailyValues.set(futureDateStr, optimalValue);
+
+        // Calculate the resulting 7-day average (acute load)
+        let newAcuteSum = 0;
+        for (let i = Math.max(0, currentIndex - 6); i <= currentIndex; i++) {
+            const checkDateStr = formatDateLocal(simulatedAllDates[i]);
+            newAcuteSum += simulatedDailyValues.get(checkDateStr) || 0;
+        }
+        const newAcuteAvg = newAcuteSum / 7;
+        futureAverage7d.push(newAcuteAvg);
+
+        // Calculate the resulting 28-day average (chronic load)
+        let newChronicSum = 0;
+        for (let i = Math.max(0, currentIndex - 27); i <= currentIndex; i++) {
+            const checkDateStr = formatDateLocal(simulatedAllDates[i]);
+            newChronicSum += simulatedDailyValues.get(checkDateStr) || 0;
+        }
+        const newChronicAvg = newChronicSum / 28;
+        futureAverage28d.push(newChronicAvg);
+
+        // Calculate the resulting ACWR
+        const newACWR = newChronicAvg > 0 ? newAcuteAvg / newChronicAvg : 0;
+        futureAcwr.push(newACWR);
+    }
+
+    return {
+        futureDates,
+        futureValues,
+        futureAverage7d,
+        futureAverage28d,
+        futureAcwr,
+    };
+}
+
 /**
  * Calculate ACWR for a specific metric (distance, duration, or TSS)
  * @param activities - Array of activities
@@ -227,5 +340,7 @@ export function calculateMetricACWR(
         restTomorrowACWR: allDates.length >= 28 ? restTomorrowACWR : undefined,
         todayValue: undefined,
         activitiesByDate,
+        // Add future predictions if we have enough data
+        ...(allDates.length >= 28 ? calculateOptimalFutureDays(allDates, dailyValues, targetACWR, 7) : {}),
     };
 }