"Now" line on Kp forecast

webassets/js/conditions.js

@@ -165,10 +165,59 @@ function renderKIndexForecast(data) {
         grid:  { color: gridColor },
     };
     const timeAxis = {
+        title: { display: true, text: 'Time (UTC)', color: textColor },
         ticks: { color: textColor, maxRotation: 45, minRotation: 0 },
         grid:  { color: gridColor },
     };
 
+    // Draw a "now" line at the current time position
+    const nowLinePlugin = {
+        id: 'nowLine',
+        afterDraw(chart) {
+            const nowTs = Date.now() / 1000;
+            // Find the fractional bar index for the current time
+            let fracIndex = null;
+            for (let i = 0; i < entries.length - 1; i++) {
+                if (nowTs >= entries[i].ts && nowTs < entries[i + 1].ts) {
+                    fracIndex = i + (nowTs - entries[i].ts) / (entries[i + 1].ts - entries[i].ts);
+                    break;
+                }
+            }
+            if (fracIndex === null) return; // now is outside the chart range
+
+            const { ctx, chartArea } = chart;
+            const scale = isMobile ? chart.scales.y : chart.scales.x;
+            const pos = scale.getPixelForValue(fracIndex);
+
+            ctx.save();
+            ctx.strokeStyle = textColor;
+            ctx.lineWidth = 2;
+            ctx.setLineDash([5, 4]);
+            ctx.beginPath();
+            if (isMobile) {
+                ctx.moveTo(chartArea.left, pos);
+                ctx.lineTo(chartArea.right, pos);
+            } else {
+                ctx.moveTo(pos, chartArea.top);
+                ctx.lineTo(pos, chartArea.bottom);
+            }
+            ctx.stroke();
+            ctx.setLineDash([]);
+            ctx.fillStyle = textColor;
+            ctx.font = '11px sans-serif';
+            if (isMobile) {
+                ctx.textAlign = 'right';
+                ctx.textBaseline = 'bottom';
+                ctx.fillText('Now', chartArea.right, pos - 3);
+            } else {
+                ctx.textAlign = 'left';
+                ctx.textBaseline = 'top';
+                ctx.fillText('  Now', pos, chartArea.top + 3);
+            }
+            ctx.restore();
+        }
+    };
+
     kpChart = new Chart(document.getElementById('forecast-kp-chart'), {
         type: 'bar',
         data: {
@@ -181,6 +230,7 @@ function renderKIndexForecast(data) {
         },
         options: {
             responsive: true,
+            // Swap axes on mobile, and change the aspect ratio
             aspectRatio: isMobile ? 0.4 : 3,
             indexAxis: isMobile ? 'y' : 'x',
             plugins: {
@@ -195,7 +245,8 @@ function renderKIndexForecast(data) {
                 x: isMobile ? kpAxis : timeAxis,
                 y: isMobile ? timeAxis : kpAxis,
             }
-        }
+        },
+        plugins: [nowLinePlugin],
     });
 }