Add fetching of NOAA 3-day forecast

webassets/js/conditions.js

@@ -1,6 +1,8 @@
 // Cache for the full dxstats API response, so we can reload on the fly if the user changes the value of their continent
 // in the select box
 let dxStatsData = null;
+// Forecast chart
+let kpChart = null;
 
 // Load solar conditions
 function loadSolarConditions() {
@@ -114,7 +116,7 @@ function loadSolarConditions() {
     });
 }
 
-// Render the K-index forecast table (rows = 3-hour UTC time slots, columns = forecast dates)
+// Render the K-index forecast as a Chart.js bar chart, one bar per 3-hour UTC period
 function renderKIndexForecast(data) {
     if (!data) return;
 
@@ -123,40 +125,71 @@ function renderKIndexForecast(data) {
         .sort((a, b) => a.ts - b.ts);
     if (entries.length === 0) return;
 
-    // Derive the unique UTC dates from sorted entries
-    const dateSet = new Set();
-    entries.forEach(e => dateSet.add(new Date(e.ts * 1000).toISOString().slice(0, 10)));
-    const dates = [...dateSet];
-
-    const kpByTs = {};
-    entries.forEach(e => { kpByTs[e.ts] = e.kp; });
-
-    // Header row
-    const headRow = $('#forecast-kp-table thead tr').empty().append('<th>Time (UTC)</th>');
-    dates.forEach(dateStr => {
-        const label = new Date(dateStr + 'T00:00:00Z')
-            .toLocaleDateString('en-GB', { day: '2-digit', month: 'short', timeZone: 'UTC' });
-        headRow.append(`<th>${label}</th>`);
+    // x-axis labels. Show date only on the first bar of each day, time on all bars
+    const labels = entries.map((e, i) => {
+        const dt = new Date(e.ts * 1000);
+        const timeStr = String(dt.getUTCHours()).padStart(2, '0') + ':00';
+        const dateStr = dt.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', timeZone: 'UTC' });
+        const prev = i > 0 ? new Date(entries[i - 1].ts * 1000) : null;
+        const newDay = !prev || prev.toISOString().slice(0, 10) !== dt.toISOString().slice(0, 10);
+        return newDay ? [timeStr, dateStr] : timeStr;
     });
 
-    // Data rows: one per 3-hour slot
-    const tbody = $('#forecast-kp-table tbody').empty();
-    [0, 3, 6, 9, 12, 15, 18, 21].forEach(startHour => {
-        const endHour = (startHour + 3) % 24;
-        const timeLabel = String(startHour).padStart(2, '0') + '-' + String(endHour).padStart(2, '0') + 'UT';
-        const tr = $('<tr>').append(`<td>${timeLabel}</td>`);
-        dates.forEach(dateStr => {
-            const [y, m, d] = dateStr.split('-').map(Number);
-            const slotTs = Date.UTC(y, m - 1, d, startHour, 0, 0) / 1000;
-            const td = $('<td>');
-            const kp = kpByTs[slotTs];
-            if (kp !== undefined) {
-                td.text(kp.toFixed(2));
-                td.addClass(kp < 5 ? 'bg-success-subtle' : kp < 7 ? 'bg-warning-subtle' : 'bg-danger-subtle');
+    // Inherit colours from Bootstrap CSS variables so that dark mode inherently works. We want bar colours that are not
+    // quite as saturated as the Bootstrap success/warning/danger colours but not as desaturated as the "subtle"
+    // versions, so use tinycolor to apply some transparency.
+    const style = getComputedStyle(document.documentElement);
+    const withAlpha = hex => tinycolor(hex).setAlpha(0.8).toRgbString();
+    const colors = entries.map(e =>
+        e.kp < 4.5 ? withAlpha(style.getPropertyValue('--bs-success').trim())
+        : e.kp < 6.5 ? withAlpha(style.getPropertyValue('--bs-warning').trim())
+        : withAlpha(style.getPropertyValue('--bs-danger').trim())
+    );
+    const textColor = style.getPropertyValue('--bs-body-color').trim() || '#666';
+    const gridColor = style.getPropertyValue('--bs-border-color').trim() || 'rgba(128,128,128,0.3)';
+
+    if (kpChart) { kpChart.destroy(); }
+
+    kpChart = new Chart(document.getElementById('forecast-kp-chart'), {
+        type: 'bar',
+        data: {
+            labels,
+            datasets: [{
+                data: entries.map(e => e.kp),
+                backgroundColor: colors,
+                borderWidth: 0,
+            }]
+        },
+        options: {
+            responsive: true,
+            aspectRatio: 3,
+            plugins: {
+                legend: {
+                    display: false
+                },
+                tooltip: {
+                    enabled: false
+                }
+            },
+            scales: {
+                x: {
+                    ticks: { color: textColor, maxRotation: 45, minRotation: 0 },
+                    grid:  { color: gridColor },
+                },
+                y: {
+                    min: 0,
+                    max: 9,
+                    title: { display: true, text: 'Kp', color: textColor },
+                    // Include geomagnetic storm levels (Gx) on the y-axis as well as the Kp index
+                    ticks: {
+                        stepSize: 1,
+                        color: textColor,
+                        callback: v => v > 4 ? `(G${v - 4}) ${v}` : String(v),
+                    },
+                    grid:  { color: gridColor },
+                }
             }
-            tr.append(td);
-        });
-        tbody.append(tr);
+        }
     });
 }