yeah

index.html

@@ -12,6 +12,9 @@
     <div id="app">
         <header>
             <h1>Training Load Data Visualization</h1>
+            <button id="help-button" class="help-button" title="Help">
+                <span>?</span>
+            </button>
         </header>
 
         <main>
@@ -77,6 +80,40 @@
         </main>
     </div>
 
+    <div id="help-popover" class="help-popover hidden">
+        <div class="help-popover-content">
+            <button id="help-close" class="help-close">&times;</button>
+            <h2>📚 Glossary</h2>
+            <div class="help-section">
+                <h3>ACWR - Acute:Chronic Workload Ratio</h3>
+                <p>The ratio between your recent training load (acute: last 7 days) and your longer-term training load (chronic: last 28 days). Used to manage training progression and injury risk.</p>
+                <ul>
+                    <li><strong>&lt; 0.8 (Blue):</strong> Detraining risk - you may be losing fitness</li>
+                    <li><strong>0.8 - 1.3 (Green):</strong> Optimal zone - ideal training progression</li>
+                    <li><strong>1.3 - 1.5 (Orange):</strong> Warning - pushing the limits</li>
+                    <li><strong>&gt; 1.5 (Red):</strong> Injury risk - training load may be too high</li>
+                </ul>
+            </div>
+            <div class="help-section">
+                <h3>TSS - Training Stress Score</h3>
+                <p>A composite metric that quantifies the overall training stress of a workout, taking into account both intensity (Normalized Power) and duration.</p>
+                <p><strong>Formula:</strong> TSS = (Duration × NP × IF) / (FTP × 3600) × 100</p>
+            </div>
+            <div class="help-section">
+                <h3>FTP - Functional Threshold Power</h3>
+                <p>The highest average power you can sustain for approximately one hour, measured in watts. Used as a baseline for calculating training intensity and TSS.</p>
+            </div>
+            <div class="help-section">
+                <h3>NP - Normalized Power</h3>
+                <p>A power measurement that accounts for the variable nature of your effort during a workout, providing a more accurate representation of the physiological cost than average power.</p>
+            </div>
+            <div class="help-section">
+                <h3>IF - Intensity Factor</h3>
+                <p>The ratio of Normalized Power to FTP (IF = NP / FTP). Indicates how hard a workout was relative to your threshold.</p>
+            </div>
+        </div>
+    </div>
+
     <script type="module" src="/src/main.ts"></script>
 </body>
 

src/components/charts.ts

@@ -43,12 +43,10 @@ const acwrGradientPlugin = {
             // Skip if both values are null
             if (value1 === null && value2 === null) continue;
 
-            // Use the average color of the two points
-            const avgValue = value1 !== null && value2 !== null
-                ? (value1 + value2) / 2
-                : (value1 ?? value2);
+            // Use the second point value (most recent/rightward)
+            const segmentValue = value2 ?? value1;
 
-            const color = getACWRColor(avgValue);
+            const color = getACWRColor(segmentValue);
             // Make the fill more transparent
             const fillColor = color.replace(/[\d.]+\)$/, '0.15)');
 
@@ -80,12 +78,10 @@ const acwrGradientPlugin = {
             // Skip if both values are null
             if (value1 === null && value2 === null) continue;
 
-            // Use the average color of the two points
-            const avgValue = value1 !== null && value2 !== null
-                ? (value1 + value2) / 2
-                : (value1 ?? value2);
+            // Use the second point value (most recent/rightward)
+            const segmentValue = value2 ?? value1;
 
-            ctx.strokeStyle = getACWRColor(avgValue);
+            ctx.strokeStyle = getACWRColor(segmentValue);
             ctx.beginPath();
             ctx.moveTo(point1.x, point1.y);
             ctx.lineTo(point2.x, point2.y);

src/main.ts

@@ -16,6 +16,9 @@ const uploadStatus = document.getElementById('upload-status') as HTMLDivElement;
 const chartsSection = document.getElementById('charts-section') as HTMLElement;
 const filterSection = document.getElementById('filter-section') as HTMLElement;
 const filterContainer = document.getElementById('filter-container') as HTMLElement;
+const helpButton = document.getElementById('help-button') as HTMLButtonElement;
+const helpPopover = document.getElementById('help-popover') as HTMLElement;
+const helpClose = document.getElementById('help-close') as HTMLButtonElement;
 
 // Store all activities globally
 let allActivities: Activity[] = [];
@@ -23,6 +26,13 @@ let selectedActivityTypes: Set<string> = new Set(['Running']);
 
 // Event listeners
 csvUpload?.addEventListener('change', handleFileUpload);
+helpButton?.addEventListener('click', () => helpPopover?.classList.remove('hidden'));
+helpClose?.addEventListener('click', () => helpPopover?.classList.add('hidden'));
+helpPopover?.addEventListener('click', (e) => {
+    if (e.target === helpPopover) {
+        helpPopover.classList.add('hidden');
+    }
+});
 
 function createActivityTypeFilters(activities: Activity[]): void {
     // Get unique activity types

src/style.css

@@ -35,6 +35,9 @@ header {
     border-bottom: 1px solid var(--border-color);
     padding: 1.5rem 2rem;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
 header h1 {
@@ -43,6 +46,126 @@ header h1 {
     font-weight: 700;
 }
 
+.help-button {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    background-color: var(--primary-color);
+    color: white;
+    border: none;
+    font-size: 1.25rem;
+    font-weight: bold;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s, transform 0.2s;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.help-button:hover {
+    background-color: #1d4ed8;
+    transform: scale(1.05);
+}
+
+.help-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;
+}
+
+.help-popover.hidden {
+    display: none;
+}
+
+.help-popover-content {
+    background-color: var(--card-bg);
+    border-radius: 12px;
+    padding: 2rem;
+    max-width: 700px;
+    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);
+}
+
+.help-close {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background: none;
+    border: none;
+    font-size: 2rem;
+    color: var(--secondary-color);
+    cursor: pointer;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    transition: background-color 0.2s, color 0.2s;
+}
+
+.help-close:hover {
+    background-color: var(--bg-color);
+    color: var(--text-color);
+}
+
+.help-popover-content h2 {
+    margin-bottom: 1.5rem;
+    color: var(--primary-color);
+    font-size: 1.5rem;
+}
+
+.help-section {
+    margin-bottom: 1.5rem;
+    padding-bottom: 1.5rem;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.help-section:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+    padding-bottom: 0;
+}
+
+.help-section h3 {
+    color: var(--text-color);
+    font-size: 1.125rem;
+    margin-bottom: 0.5rem;
+    font-weight: 600;
+}
+
+.help-section p {
+    color: var(--secondary-color);
+    line-height: 1.6;
+    margin-bottom: 0.75rem;
+}
+
+.help-section ul {
+    margin-left: 1.5rem;
+    color: var(--secondary-color);
+}
+
+.help-section li {
+    margin-bottom: 0.5rem;
+    line-height: 1.5;
+}
+
+.help-section strong {
+    color: var(--text-color);
+    font-weight: 600;
+}
+
 main {
     flex: 1;
     padding: 2rem;