gradient

src/components/charts.ts

@@ -9,13 +9,37 @@ let durationChart: Chart | null = null;
 let tssChart: Chart | null = null;
 let caloriesChart: Chart | null = null;
 
-// ACWR color zones
+// 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)';
-    if (value < 0.8) return 'rgba(59, 130, 246, 0.9)'; // Blue - Detraining risk
-    if (value <= 1.3) return 'rgba(16, 185, 129, 0.9)'; // Green - Optimal
-    if (value <= 1.5) return 'rgba(249, 115, 22, 0.9)'; // Orange - Warning
-    return 'rgba(239, 68, 68, 0.9)'; // Red - Injury risk
+
+    // Map ACWR value to hue (0-360)
+    // 0.0 -> 240 (blue)
+    // 0.8 -> 240 (blue)
+    // 1.0 -> 120 (green)
+    // 1.3 -> 120 (green)
+    // 1.5 -> 30 (orange)
+    // 2.0+ -> 0 (red)
+
+    const greenCenter = 0.8 + (1.3 - 0.8) / 2;
+    const orangeCenter = 1.3 + (1.5 - 1.3) / 2;
+
+    const lerp = (x: number, y: number, a: number) => x * (1 - a) + y * a;
+
+    let hue: number;
+    if (value < 0.8) {
+        hue = 240;
+    } else if (value <= greenCenter) {
+        hue = lerp(240, 120, (value - 0.8) / (greenCenter - 0.8)); // to green
+    } else if (value <= orangeCenter) {
+        hue = lerp(120, 30, (value - greenCenter) / (orangeCenter - greenCenter)); // to orange
+    } else if (value <= 1.5) {
+        hue = lerp(30, 0, (value - orangeCenter) / (1.5 - orangeCenter)); // to red
+    } else {
+        hue = 0;
+    }
+
+    return `hsla(${hue}, 85%, 55%, 0.9)`;
 }
 
 // Plugin to draw gradient-colored ACWR line