gradient opacity for acwr

src/components/charts.ts

@@ -67,6 +67,19 @@ const acwrGradientPlugin = {
         const data = chart.data.datasets[acwrDatasetIndex].data as (number | null)[];
         const chartArea = chart.chartArea;
 
+        // Find the range of non-null ACWR values for opacity gradient
+        let firstNonNullIndex = -1;
+        let lastNonNullIndex = -1;
+        for (let i = 0; i < data.length; i++) {
+            if (data[i] !== null) {
+                if (firstNonNullIndex === -1) firstNonNullIndex = i;
+                lastNonNullIndex = i;
+            }
+        }
+
+        // Calculate total span of ACWR data
+        const acwrSpan = lastNonNullIndex - firstNonNullIndex;
+
         ctx.save();
 
         // First, fill the area under the curve with gradient colors
@@ -82,12 +95,22 @@ const acwrGradientPlugin = {
             // Skip if both values are null
             if (value1 === null && value2 === null) continue;
 
+            // Skip if the first value is null (start of ACWR curve)
+            if (value1 === null) continue;
+
             // Use the second point value (most recent/rightward)
             const segmentValue = value2 ?? value1;
 
+            // Calculate opacity based on position: start at 0.05, end at 0.25
+            let opacity = 0.25;
+            if (acwrSpan > 0 && i >= firstNonNullIndex && i <= lastNonNullIndex) {
+                const progress = (i - firstNonNullIndex) / acwrSpan;
+                opacity = 0.05 + (progress * 0.20); // 0.05 to 0.25
+            }
+
             const color = getACWRColor(segmentValue);
-            // Make the fill more transparent
-            const fillColor = color.replace(/[\d.]+\)$/, '0.25)');
+            // Apply variable opacity to the fill
+            const fillColor = color.replace(/[\d.]+\)$/, `${opacity})`);
 
             ctx.fillStyle = fillColor;
             ctx.beginPath();
@@ -104,7 +127,7 @@ const acwrGradientPlugin = {
         ctx.lineCap = 'round';
         ctx.lineJoin = 'round';
 
-        // Draw line segments with colors based on values
+        // Draw line segments with colors based on values and variable opacity
         for (let i = 0; i < meta.data.length - 1; i++) {
             const point1 = meta.data[i];
             const point2 = meta.data[i + 1];
@@ -117,10 +140,23 @@ const acwrGradientPlugin = {
             // Skip if both values are null
             if (value1 === null && value2 === null) continue;
 
+            // Skip if the first value is null (start of ACWR curve)
+            if (value1 === null) continue;
+
             // Use the second point value (most recent/rightward)
             const segmentValue = value2 ?? value1;
 
-            ctx.strokeStyle = getACWRColor(segmentValue);
+            // Calculate opacity based on position: start at 0.20, end at 0.99
+            let opacity = 0.99;
+            if (acwrSpan > 0 && i >= firstNonNullIndex && i <= lastNonNullIndex) {
+                const progress = (i - firstNonNullIndex) / acwrSpan;
+                opacity = 0.20 + (progress * 0.79); // 0.20 to 0.99
+            }
+
+            const color = getACWRColor(segmentValue);
+            const strokeColor = color.replace(/[\d.]+\)$/, `${opacity})`);
+
+            ctx.strokeStyle = strokeColor;
             ctx.beginPath();
             ctx.moveTo(point1.x, point1.y);
             ctx.lineTo(point2.x, point2.y);