yeah

index.html

@@ -12,36 +12,28 @@
     <div id="app">
         <header>
             <h1>Training Load Data Visualization</h1>
-            <button id="help-button" class="help-button" title="Help">
-                <span>?</span>
-            </button>
+            <div class="header-controls">
+                <div class="ftp-input-container">
+                    <label for="ftp-input">FTP</label>
+                    <input type="number" id="ftp-input" value="343" min="0" step="1" placeholder="343" />
+                    <span class="ftp-unit">W</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" />
+                </div>
+                <input type="file" id="csv-upload" accept=".csv" />
+                <label for="csv-upload" class="upload-label">
+                    📁 Upload CSV
+                </label>
+                <button id="help-button" class="help-button" title="Help">
+                    <span>?</span>
+                </button>
+            </div>
         </header>
 
         <main>
-            <section id="upload-section">
-                <h2>Upload Garmin Activities CSV</h2>
-                <div class="upload-container">
-                    <div class="ftp-input-container">
-                        <label for="ftp-input">
-                            Functional Threshold Power (FTP)
-                        </label>
-                        <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
-                    </label>
-                    <div id="upload-status"></div>
-                </div>
-            </section>
+            <div id="upload-status"></div>
 
             <section id="filter-section" class="hidden">
                 <div class="filter-container" id="filter-container">

src/components/charts.ts

@@ -454,7 +454,7 @@ export function createDistanceChart(data: MetricACWRData): void {
         '(km)',
         'rgba(234, 179, 8, 0.8)'
     );
-    updateTargetInfo('distance-target', data.targetTomorrowValue, 'km', data.targetACWR);
+    updateTargetInfo('distance-target', data.targetTomorrowValue, 'km', data.targetACWR, data.restTomorrowACWR);
 }
 
 export function createDurationChart(data: MetricACWRData): void {
@@ -468,7 +468,7 @@ export function createDurationChart(data: MetricACWRData): void {
         '(min)',
         'rgba(234, 179, 8, 0.8)'
     );
-    updateTargetInfo('duration-target', data.targetTomorrowValue, 'minutes', data.targetACWR);
+    updateTargetInfo('duration-target', data.targetTomorrowValue, 'minutes', data.targetACWR, data.restTomorrowACWR);
 }
 
 export function createTSSChart(data: MetricACWRData): void {
@@ -482,7 +482,7 @@ export function createTSSChart(data: MetricACWRData): void {
         '',
         'rgba(234, 179, 8, 0.8)'
     );
-    updateTargetInfo('tss-target', data.targetTomorrowValue, 'TSS', data.targetACWR);
+    updateTargetInfo('tss-target', data.targetTomorrowValue, 'TSS', data.targetACWR, data.restTomorrowACWR);
 }
 
 export function createCaloriesChart(data: MetricACWRData): void {
@@ -496,16 +496,32 @@ export function createCaloriesChart(data: MetricACWRData): void {
         '(kcal)',
         'rgba(234, 179, 8, 0.8)'
     );
-    updateTargetInfo('calories-target', data.targetTomorrowValue, 'kcal', data.targetACWR);
+    updateTargetInfo('calories-target', data.targetTomorrowValue, 'kcal', data.targetACWR, data.restTomorrowACWR);
 }
 
-function updateTargetInfo(elementId: string, targetValue: number | null | undefined, unit: string, targetACWR: number | undefined): void {
+function updateTargetInfo(elementId: string, targetValue: number | null | undefined, unit: string, targetACWR: number | undefined, restTomorrowACWR: number | null | 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>`;
+    if (targetACWR !== undefined) {
+        let html: string;
+        
+        if (targetValue === null || targetValue === undefined) {
+            html = `<strong>💡 Target for tomorrow:</strong> <span style="color: var(--secondary-color);">Target ACWR of ${targetACWR} cannot be reached in one day</span>`;
+        } else if (targetValue === 0) {
+            html = `<strong>💡 Target for tomorrow:</strong> <span style="color: var(--secondary-color);">Rest day recommended to reach ACWR of ${targetACWR}</span>`;
+        } else {
+            const formattedValue = targetValue.toFixed(1);
+            html = `<strong>💡 Target for tomorrow:</strong> <span class="target-value">${formattedValue} ${unit}</span> <span style="color: var(--secondary-color);">to reach ACWR of ${targetACWR}</span>`;
+        }
+        
+        // Add rest tomorrow information
+        if (restTomorrowACWR !== null && restTomorrowACWR !== undefined) {
+            const color = getACWRColor(restTomorrowACWR);
+            html += `<br><strong>😴 Rest tomorrow:</strong> <span style="color: ${color};">ACWR ${restTomorrowACWR.toFixed(2)}</span>`;
+        }
+        
+        element.innerHTML = html;
         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>`;

src/style.css

@@ -33,17 +33,30 @@ body {
 header {
     background-color: var(--card-bg);
     border-bottom: 1px solid var(--border-color);
-    padding: 1.5rem 2rem;
+    padding: 1rem 2rem;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: 2rem;
+    flex-wrap: wrap;
+    position: sticky;
+    top: 0;
+    z-index: 200;
 }
 
 header h1 {
-    font-size: 1.75rem;
+    font-size: 1.5rem;
     color: var(--primary-color);
     font-weight: 700;
+    white-space: nowrap;
+}
+
+.header-controls {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex-wrap: wrap;
 }
 
 .help-button {
@@ -252,7 +265,7 @@ header h1 {
 main {
     flex: 1;
     padding: 2rem;
-    max-width: 1400px;
+    max-width: 100%;
     margin: 0 auto;
     width: 100%;
 }
@@ -290,38 +303,40 @@ h2 {
 .ftp-input-container {
     display: flex;
     align-items: center;
-    gap: 0.75rem;
-    padding: 1rem;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
     background-color: var(--bg-color);
     border-radius: 6px;
     border: 1px solid var(--border-color);
 }
 
 .ftp-input-container label {
-    font-size: 0.875rem;
+    font-size: 0.75rem;
     font-weight: 500;
     color: var(--text-color);
     white-space: nowrap;
 }
 
-#ftp-input {
-    width: 100px;
-    padding: 0.5rem;
+#ftp-input,
+#target-acwr-input {
+    width: 70px;
+    padding: 0.375rem 0.5rem;
     border: 1px solid var(--border-color);
     border-radius: 4px;
-    font-size: 1rem;
+    font-size: 0.875rem;
     text-align: center;
     background-color: var(--card-bg);
 }
 
-#ftp-input:focus {
+#ftp-input:focus,
+#target-acwr-input:focus {
     outline: none;
     border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
 }
 
 .ftp-unit {
-    font-size: 0.875rem;
+    font-size: 0.75rem;
     color: var(--secondary-color);
     font-weight: 500;
 }
@@ -332,13 +347,15 @@ h2 {
 
 .upload-label {
     display: inline-block;
-    padding: 0.75rem 2rem;
+    padding: 0.5rem 1rem;
     background-color: var(--primary-color);
     color: white;
     border-radius: 6px;
     cursor: pointer;
     font-weight: 500;
+    font-size: 0.875rem;
     transition: background-color 0.2s;
+    white-space: nowrap;
 }
 
 .upload-label:hover {
@@ -349,9 +366,10 @@ h2 {
     font-size: 0.875rem;
     color: var(--secondary-color);
     min-height: 1.5rem;
-    max-width: 800px;
+    max-width: 100%;
     white-space: pre-wrap;
     text-align: left;
+    margin-bottom: 1rem;
 }
 
 #upload-status.success {
@@ -376,6 +394,9 @@ h2 {
     padding: 1rem 2rem;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
     margin-bottom: 2rem;
+    position: sticky;
+    top: 80px;
+    z-index: 100;
 }
 
 #filter-container {
@@ -417,6 +438,14 @@ h2 {
 #charts-section {
     display: grid;
     gap: 2rem;
+    grid-template-columns: 1fr;
+}
+
+/* Two-column layout for desktop */
+@media (min-width: 1400px) {
+    #charts-section {
+        grid-template-columns: repeat(2, 1fr);
+    }
 }
 
 .chart-container {
@@ -463,6 +492,7 @@ h2 {
     display: flex;
     gap: 1.5rem;
     flex-wrap: wrap;
+    grid-column: 1 / -1;
 }
 
 .legend-item {

src/types/index.ts

@@ -24,5 +24,7 @@ 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
+    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
 }

src/utils/metricAcwr.ts

@@ -169,9 +169,14 @@ export function calculateMetricACWR(
         if (Math.abs(denominator) > 0.001) {
             targetTomorrowValue = numerator / denominator;
 
-            // Set to 0 if negative (meaning you should rest)
+            // If negative and target ACWR < 1.0, set to 0 (rest day recommended)
+            // If negative and target ACWR >= 1.0, set to null (target unreachable)
             if (targetTomorrowValue < 0) {
-                targetTomorrowValue = 0;
+                if (targetACWR < 1.0) {
+                    targetTomorrowValue = 0;
+                } else {
+                    targetTomorrowValue = null;
+                }
             }
         } else {
             // Special case: targetACWR ≈ 4, need different approach
@@ -180,6 +185,37 @@ export function calculateMetricACWR(
         }
     }
 
+    // Calculate what ACWR would be with a rest day tomorrow
+    let restTomorrowACWR: number | null = null;
+
+    if (allDates.length >= 28) {
+        // Calculate tomorrow's 7-day acute sum with rest (last 6 days + 0)
+        let tomorrowAcuteSum = 0;
+        for (let i = allDates.length - 6; i < allDates.length; i++) {
+            const checkDateStr = formatDateLocal(allDates[i]);
+            const val = dailyValues.get(checkDateStr) || 0;
+            tomorrowAcuteSum += val;
+        }
+        // Add 0 for rest day (no need to add)
+
+        // Calculate tomorrow's 28-day chronic sum with rest (last 27 days + 0)
+        let tomorrowChronicSum = 0;
+        for (let i = allDates.length - 27; i < allDates.length; i++) {
+            const checkDateStr = formatDateLocal(allDates[i]);
+            const val = dailyValues.get(checkDateStr) || 0;
+            tomorrowChronicSum += val;
+        }
+        // Add 0 for rest day (no need to add)
+
+        // Calculate ACWR with rest day
+        const tomorrowAcuteAvg = tomorrowAcuteSum / 7;
+        const tomorrowChronicAvg = tomorrowChronicSum / 28;
+
+        if (tomorrowChronicAvg > 0) {
+            restTomorrowACWR = tomorrowAcuteAvg / tomorrowChronicAvg;
+        }
+    }
+
     return {
         dates,
         values,
@@ -188,6 +224,8 @@ export function calculateMetricACWR(
         acwr,
         targetTomorrowValue,
         targetACWR: allDates.length >= 28 ? targetACWR : undefined,
+        restTomorrowACWR: allDates.length >= 28 ? restTomorrowACWR : undefined,
+        todayValue: undefined,
         activitiesByDate,
     };
 }