tomorrow

index.html

@@ -45,16 +45,19 @@
             <section id="charts-section" class="hidden">
                 <div class="chart-container">
                     <h2>🗺️ Distance-based ACWR</h2>
+                    <div id="distance-target" class="target-info"></div>
                     <canvas id="distance-chart"></canvas>
                 </div>
 
                 <div class="chart-container">
                     <h2>⏱️ Duration-based ACWR</h2>
+                    <div id="duration-target" class="target-info"></div>
                     <canvas id="duration-chart"></canvas>
                 </div>
 
                 <div class="chart-container">
                     <h2>🔋 TSS-based ACWR</h2>
+                    <div id="tss-target" class="target-info"></div>
                     <canvas id="tss-chart"></canvas>
                 </div>
 

src/components/charts.ts

@@ -296,6 +296,7 @@ export function createDistanceChart(data: MetricACWRData): void {
         '(km)',
         'rgba(234, 179, 8, 0.8)'
     );
+    updateTargetInfo('distance-target', data.targetTomorrowValue, 'km', data.targetACWR);
 }
 
 export function createDurationChart(data: MetricACWRData): void {
@@ -309,6 +310,7 @@ export function createDurationChart(data: MetricACWRData): void {
         '(min)',
         'rgba(234, 179, 8, 0.8)'
     );
+    updateTargetInfo('duration-target', data.targetTomorrowValue, 'minutes', data.targetACWR);
 }
 
 export function createTSSChart(data: MetricACWRData): void {
@@ -322,6 +324,21 @@ export function createTSSChart(data: MetricACWRData): void {
         '',
         'rgba(234, 179, 8, 0.8)'
     );
+    updateTargetInfo('tss-target', data.targetTomorrowValue, 'TSS', data.targetACWR);
+}
+
+function updateTargetInfo(elementId: string, targetValue: number | null | undefined, unit: string, targetACWR: number | undefined): void {
+    const element = document.getElementById(elementId);
+    if (!element) return;
+
+    if (targetValue !== null && targetValue !== undefined && targetACWR !== undefined) {
+        const formattedValue = targetValue.toFixed(1);
+        element.innerHTML = `<strong>💡 Target for tomorrow:</strong> <span class="target-value">${formattedValue} ${unit}</span> <span style="color: var(--secondary-color);">to reach ACWR of ${targetACWR}</span>`;
+        element.classList.add('visible');
+    } else {
+        element.innerHTML = `<strong>ℹ️ Target for tomorrow:</strong> <span style="color: var(--secondary-color);">Need at least 28 days of data to calculate</span>`;
+        element.classList.add('visible');
+    }
 }
 
 export function destroyAllCharts(): void {

src/style.css

@@ -348,6 +348,32 @@ h2 {
     width: 100%;
 }
 
+.target-info {
+    background-color: var(--bg-color);
+    border-left: 4px solid var(--primary-color);
+    padding: 0.75rem 1rem;
+    margin-bottom: 1rem;
+    border-radius: 4px;
+    font-size: 0.875rem;
+    color: var(--text-color);
+    display: none;
+}
+
+.target-info.visible {
+    display: block;
+}
+
+.target-info strong {
+    color: var(--primary-color);
+    font-weight: 600;
+}
+
+.target-info .target-value {
+    font-size: 1.125rem;
+    font-weight: 700;
+    color: var(--primary-color);
+}
+
 /* Legend */
 .legend {
     margin-top: 1rem;

src/types/index.ts

@@ -20,4 +20,6 @@ export interface MetricACWRData {
     average7d: (number | null)[]; // 7-day rolling average
     average28d: (number | null)[]; // 28-day rolling average
     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
 }

src/utils/metricAcwr.ts

@@ -122,11 +122,62 @@ export function calculateMetricACWR(
         }
     });
 
+    // Calculate tomorrow's required value to reach ACWR
+    let targetTomorrowValue: number | null = null;
+    const targetACWR = 1.3;
+
+    if (allDates.length >= 28) {
+
+        // Calculate tomorrow's 7-day acute sum (last 6 days including zeros)
+        let tomorrowAcuteSum = 0;
+        for (let i = allDates.length - 6; i < allDates.length; i++) {
+            const checkDateStr = formatDateLocal(allDates[i]);
+            const val = dailyValues.get(checkDateStr) || 0; // Include 0 for rest days
+            tomorrowAcuteSum += val;
+        }
+
+        // Calculate tomorrow's 28-day chronic sum (last 27 days including zeros)
+        let tomorrowChronicSum = 0;
+        for (let i = allDates.length - 27; i < allDates.length; i++) {
+            const checkDateStr = formatDateLocal(allDates[i]);
+            const val = dailyValues.get(checkDateStr) || 0; // Include 0 for rest days
+            tomorrowChronicSum += val;
+        }
+
+        // Solve for tomorrow's value (X):
+        // Tomorrow's ACWR = [(tomorrowAcuteSum + X) / 7] / [(tomorrowChronicSum + X) / 28]
+        // Simplifies to: targetACWR = (tomorrowAcuteSum + X) / (tomorrowChronicSum + X) * 28 / 7
+        // targetACWR = (tomorrowAcuteSum + X) / (tomorrowChronicSum + X) * 4
+        // targetACWR * (tomorrowChronicSum + X) = 4 * (tomorrowAcuteSum + X)
+        // targetACWR * tomorrowChronicSum + targetACWR * X = 4 * tomorrowAcuteSum + 4 * X
+        // targetACWR * X - 4 * X = 4 * tomorrowAcuteSum - targetACWR * tomorrowChronicSum
+        // X * (targetACWR - 4) = 4 * tomorrowAcuteSum - targetACWR * tomorrowChronicSum
+        // X = (4 * tomorrowAcuteSum - targetACWR * tomorrowChronicSum) / (targetACWR - 4)
+
+        const numerator = 4 * tomorrowAcuteSum - targetACWR * tomorrowChronicSum;
+        const denominator = targetACWR - 4;
+
+        if (Math.abs(denominator) > 0.001) {
+            targetTomorrowValue = numerator / denominator;
+
+            // Set to 0 if negative (meaning you should rest)
+            if (targetTomorrowValue < 0) {
+                targetTomorrowValue = 0;
+            }
+        } else {
+            // Special case: targetACWR ≈ 4, need different approach
+            // If ACWR = 4, then acute = 4 * chronic, which means you need massive increase
+            targetTomorrowValue = null;
+        }
+    }
+
     return {
         dates,
         values,
         average7d,
         average28d,
         acwr,
+        targetTomorrowValue,
+        targetACWR: allDates.length >= 28 ? targetACWR : undefined,
     };
 }