yeah

src/components/charts.ts

@@ -13,30 +13,40 @@ let caloriesChart: Chart | null = null;
 function getACWRColor(value: number | null): string {
     if (value === null || value === undefined) return 'rgba(148, 163, 184, 0.3)';
 
-    // 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;
+    // ACWR thresholds for color zones
+    const BLUE_THRESHOLD = 0.8;    // Below this: detraining risk (blue)
+    const GREEN_START = 0.8;       // Green zone start (optimal range)
+    const GREEN_END = 1.3;         // Green zone end
+    const ORANGE_END = 1.5;        // Orange zone end (warning)
+    // Above ORANGE_END: injury risk (red)
+
+    // Hue values for colors
+    const HUE_BLUE = 240;
+    const HUE_GREEN = 120;
+    const HUE_ORANGE = 40;
+    const HUE_RED = 0;
+
+    // Calculate transition centers
+    const greenCenter = GREEN_START + (GREEN_END - GREEN_START) / 2;
+    const orangeCenter = GREEN_END + (ORANGE_END - GREEN_END) / 2;
+
+    // Linear interpolation helper with automatic normalization
+    const lerp = (start: number, end: number, value: number, rangeStart: number, rangeEnd: number): number => {
+        const t = (value - rangeStart) / (rangeEnd - rangeStart);
+        return start * (1 - t) + end * t;
+    };
 
     let hue: number;
-    if (value < 0.8) {
-        hue = 240;
+    if (value < BLUE_THRESHOLD) {
+        hue = HUE_BLUE;
     } else if (value <= greenCenter) {
-        hue = lerp(240, 120, (value - 0.8) / (greenCenter - 0.8)); // to green
+        hue = lerp(HUE_BLUE, HUE_GREEN, value, GREEN_START, greenCenter);
     } 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
+        hue = lerp(HUE_GREEN, HUE_ORANGE, value, greenCenter, orangeCenter);
+    } else if (value <= ORANGE_END) {
+        hue = lerp(HUE_ORANGE, HUE_RED, value, orangeCenter, ORANGE_END);
     } else {
-        hue = 0;
+        hue = HUE_RED;
     }
 
     return `hsla(${hue}, 85%, 55%, 0.9)`;

src/style.css

@@ -517,8 +517,8 @@ h2 {
 }
 
 .legend-color.warning {
-    background-color: rgba(249, 115, 22, 0.3);
-    border: 2px solid rgba(249, 115, 22, 0.9);
+    background-color: hsl(40deg 95% 53% / 30%);
+    border: 2px solid hsl(40deg 95% 53% / 90%);
 }
 
 .legend-color.high {