Spaces:
Running
Running
File size: 6,699 Bytes
35527e2 a586c52 35527e2 bccd229 35527e2 f63ce21 35527e2 f63ce21 b10734b 35527e2 f63ce21 b10734b 35527e2 0f92957 b10734b 35527e2 0f92957 35527e2 f63ce21 35527e2 a586c52 d3b483b a586c52 d3b483b a586c52 d3b483b a586c52 d3b483b a586c52 d3b483b a586c52 bccd229 35527e2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Training Load Data Visualization</title>
<link rel="stylesheet" href="/src/style.css">
</head>
<body>
<div id="app">
<header>
<h1>Training Load Data Visualization</h1>
<button id="help-button" class="help-button" title="Help">
<span>?</span>
</button>
</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>
<section id="filter-section" class="hidden">
<div class="filter-container" id="filter-container">
<!-- Activity type filters will be dynamically generated here -->
</div>
</section>
<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>
<div class="chart-container">
<h2>🔋 Calories-based ACWR</h2>
<div id="calories-target" class="target-info"></div>
<canvas id="calories-chart"></canvas>
</div>
<div class="legend">
<div class="legend-item">
<span class="legend-color low"></span>
<span>ACWR < 0.8 - Detraining risk</span>
</div>
<div class="legend-item">
<span class="legend-color optimal"></span>
<span>ACWR 0.8 - 1.3 - Optimal</span>
</div>
<div class="legend-item">
<span class="legend-color warning"></span>
<span>ACWR 1.3 - 1.5 - Warning</span>
</div>
<div class="legend-item">
<span class="legend-color high"></span>
<span>ACWR > 1.5 - Injury risk</span>
</div>
</div>
</section>
</main>
</div>
<div id="help-popover" class="help-popover hidden">
<div class="help-popover-content">
<button id="help-close" class="help-close">×</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>< 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>> 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>
<div id="activity-popover" class="activity-popover hidden">
<div class="activity-popover-content">
<button id="activity-close" class="help-close">×</button>
<h2 id="activity-date-title"></h2>
<div id="activity-list"></div>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html> |