Spaces:

glutamatt
/

training-load-dataviz

Running

App Files Files Community

glutamatt HF Staff commited on 5 days ago

Commit

58e063c

verified ·

1 Parent(s): 58c055f

show big current value

Browse files

Files changed (3) hide show

index.html +6 -6
src/components/charts.ts +53 -7
src/style.css +21 -0

index.html CHANGED Viewed

@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Training Load Data Visualization</title>
     <link rel="icon" type="image/webp" href="/icon.webp">
     <link rel="stylesheet" href="/src/style.css">
 </head>
@@ -14,7 +14,7 @@
         <header>
             <div class="header-title">
                 <img src="/icon.webp" alt="Training Load Icon" class="header-icon" />
-                <h1>Training Load Data Visualization</h1>
             </div>
             <div class="header-controls">
                 <div class="ftp-input-container">
@@ -67,25 +67,25 @@
             <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>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Training Load</title>
     <link rel="icon" type="image/webp" href="/icon.webp">
     <link rel="stylesheet" href="/src/style.css">
 </head>
         <header>
             <div class="header-title">
                 <img src="/icon.webp" alt="Training Load Icon" class="header-icon" />
+                <h1>Training Load</h1>
             </div>
             <div class="header-controls">
                 <div class="ftp-input-container">
             <section id="charts-section" class="hidden">
                 <div class="chart-container">
+                    <h2>🗺️ Distance-based ACWR <span id="distance-acwr-display" class="acwr-display"></span></h2>
                     <div id="distance-target" class="target-info"></div>
                     <canvas id="distance-chart"></canvas>
                 </div>
                 <div class="chart-container">
+                    <h2>⏱️ Duration-based ACWR <span id="duration-acwr-display" class="acwr-display"></span></h2>
                     <div id="duration-target" class="target-info"></div>
                     <canvas id="duration-chart"></canvas>
                 </div>
                 <div class="chart-container">
+                    <h2>🥵 TSS-based ACWR <span id="tss-acwr-display" class="acwr-display"></span></h2>
                     <div id="tss-target" class="target-info"></div>
                     <canvas id="tss-chart"></canvas>
                 </div>
                 <div class="chart-container">
+                    <h2>🔋 Calories-based ACWR <span id="calories-acwr-display" class="acwr-display"></span></h2>
                     <div id="calories-target" class="target-info"></div>
                     <canvas id="calories-chart"></canvas>
                 </div>

src/components/charts.ts CHANGED Viewed

@@ -10,7 +10,7 @@ let tssChart: Chart | null = null;
 let caloriesChart: Chart | null = null;
 // ACWR color zones - gradual HSV-based color
-function getACWRColor(value: number | null): string {
     if (value === null || value === undefined) return 'rgba(148, 163, 184, 0.3)';
     // ACWR thresholds for color zones
@@ -49,7 +49,37 @@ function getACWRColor(value: number | null): string {
         hue = HUE_RED;
     }
-    return `hsla(${hue}, 85%, 65%, 0.99)`;
 }
 // Plugin to draw gradient-colored ACWR line
@@ -207,13 +237,13 @@ const mondayGridPlugin = {
         const ctx = chart.ctx;
         const chartArea = chart.chartArea;
         const xScale = chart.scales['x'];
         if (!xScale || !chartArea) return;
         ctx.save();
         ctx.strokeStyle = 'rgba(148, 163, 184, 0.3)';
         ctx.lineWidth = 1;
         // Draw a line for each Monday in the data
         const labels = chart.data.labels || [];
         labels.forEach((label, index) => {
@@ -221,7 +251,7 @@ const mondayGridPlugin = {
                 const [year, month, day] = label.split('-').map(Number);
                 const date = new Date(year, month - 1, day);
                 const dayOfWeek = date.getDay();
                 // If it's Monday, draw a vertical line
                 if (dayOfWeek === 1) {
                     const x = xScale.getPixelForValue(index);
@@ -234,7 +264,7 @@ const mondayGridPlugin = {
                 }
             }
         });
         ctx.restore();
     },
 };
@@ -672,6 +702,10 @@ export function createDistanceChart(data: MetricACWRData): void {
         'rgba(234, 179, 8, 0.8)'
     );
     updateTargetInfo('distance-target', data.targetTomorrowValue, 'km', data.targetACWR, data.restTomorrowACWR);
 }
 export function createDurationChart(data: MetricACWRData): void {
@@ -686,6 +720,10 @@ export function createDurationChart(data: MetricACWRData): void {
         'rgba(234, 179, 8, 0.8)'
     );
     updateTargetInfo('duration-target', data.targetTomorrowValue, 'minutes', data.targetACWR, data.restTomorrowACWR);
 }
 export function createTSSChart(data: MetricACWRData): void {
@@ -700,6 +738,10 @@ export function createTSSChart(data: MetricACWRData): void {
         'rgba(234, 179, 8, 0.8)'
     );
     updateTargetInfo('tss-target', data.targetTomorrowValue, 'TSS', data.targetACWR, data.restTomorrowACWR);
 }
 export function createCaloriesChart(data: MetricACWRData): void {
@@ -714,6 +756,10 @@ export function createCaloriesChart(data: MetricACWRData): void {
         'rgba(234, 179, 8, 0.8)'
     );
     updateTargetInfo('calories-target', data.targetTomorrowValue, 'kcal', data.targetACWR, data.restTomorrowACWR);
 }
 function updateTargetInfo(elementId: string, targetValue: number | null | undefined, unit: string, targetACWR: number | undefined, restTomorrowACWR: number | null | undefined): void {

 let caloriesChart: Chart | null = null;
 // ACWR color zones - gradual HSV-based color
+function getACWRColor(value: number | null, alpha: number = .99): string {
     if (value === null || value === undefined) return 'rgba(148, 163, 184, 0.3)';
     // ACWR thresholds for color zones
         hue = HUE_RED;
     }
+    return `hsla(${hue}, 85%, 65%, ${alpha})`;
+}
+// Get ACWR range name
+function getACWRRangeName(value: number | null): string {
+    if (value === null || value === undefined) return '';
+    if (value < 0.8) return 'Detraining risk';
+    if (value <= 1.3) return 'Optimal';
+    if (value <= 1.5) return 'Warning';
+    return 'Injury risk';
+}
+// Update ACWR display in chart title
+function updateACWRDisplay(elementId: string, acwrValue: number | null): void {
+    const element = document.getElementById(elementId);
+    if (!element) return;
+    if (acwrValue === null || acwrValue === undefined) {
+        element.innerHTML = '';
+        return;
+    }
+    const color = getACWRColor(acwrValue);
+    const bgColor = getACWRColor(acwrValue, .12);
+    const rangeName = getACWRRangeName(acwrValue);
+    element.innerHTML = `
+        <span style="color: ${color}; font-weight: bold; background-color: ${bgColor}">${acwrValue.toFixed(2)}</span>
+        <span style="font-size: 0.7em; opacity: 0.8;">(${rangeName})</span>
+    `;
 }
 // Plugin to draw gradient-colored ACWR line
         const ctx = chart.ctx;
         const chartArea = chart.chartArea;
         const xScale = chart.scales['x'];
         if (!xScale || !chartArea) return;
         ctx.save();
         ctx.strokeStyle = 'rgba(148, 163, 184, 0.3)';
         ctx.lineWidth = 1;
         // Draw a line for each Monday in the data
         const labels = chart.data.labels || [];
         labels.forEach((label, index) => {
                 const [year, month, day] = label.split('-').map(Number);
                 const date = new Date(year, month - 1, day);
                 const dayOfWeek = date.getDay();
                 // If it's Monday, draw a vertical line
                 if (dayOfWeek === 1) {
                     const x = xScale.getPixelForValue(index);
                 }
             }
         });
         ctx.restore();
     },
 };
         'rgba(234, 179, 8, 0.8)'
     );
     updateTargetInfo('distance-target', data.targetTomorrowValue, 'km', data.targetACWR, data.restTomorrowACWR);
+    // Update ACWR display in title
+    const currentACWR = data.acwr.length > 0 ? data.acwr[data.acwr.length - 1] : null;
+    updateACWRDisplay('distance-acwr-display', currentACWR);
 }
 export function createDurationChart(data: MetricACWRData): void {
         'rgba(234, 179, 8, 0.8)'
     );
     updateTargetInfo('duration-target', data.targetTomorrowValue, 'minutes', data.targetACWR, data.restTomorrowACWR);
+    // Update ACWR display in title
+    const currentACWR = data.acwr.length > 0 ? data.acwr[data.acwr.length - 1] : null;
+    updateACWRDisplay('duration-acwr-display', currentACWR);
 }
 export function createTSSChart(data: MetricACWRData): void {
         'rgba(234, 179, 8, 0.8)'
     );
     updateTargetInfo('tss-target', data.targetTomorrowValue, 'TSS', data.targetACWR, data.restTomorrowACWR);
+    // Update ACWR display in title
+    const currentACWR = data.acwr.length > 0 ? data.acwr[data.acwr.length - 1] : null;
+    updateACWRDisplay('tss-acwr-display', currentACWR);
 }
 export function createCaloriesChart(data: MetricACWRData): void {
         'rgba(234, 179, 8, 0.8)'
     );
     updateTargetInfo('calories-target', data.targetTomorrowValue, 'kcal', data.targetACWR, data.restTomorrowACWR);
+    // Update ACWR display in title
+    const currentACWR = data.acwr.length > 0 ? data.acwr[data.acwr.length - 1] : null;
+    updateACWRDisplay('calories-acwr-display', currentACWR);
 }
 function updateTargetInfo(elementId: string, targetValue: number | null | undefined, unit: string, targetACWR: number | undefined, restTomorrowACWR: number | null | undefined): void {

src/style.css CHANGED Viewed

@@ -473,6 +473,27 @@ h2 {
 .chart-container h2 {
     color: #fbfefe;
     margin-bottom: 1rem;
 }
 .chart-container canvas {

 .chart-container h2 {
     color: #fbfefe;
     margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+.acwr-display {
+    font-size: 0.85em;
+    font-weight: normal;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+}
+.acwr-display span:first-child {
+    padding: 0.2rem 0.6rem;
+    border-radius: 6px;
+    border: 2px solid currentColor;
+    background: rgba(0, 0, 0, 0.2);
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 .chart-container canvas {