Add fetching of NOAA 3-day forecast

webassets/js/conditions.js

@@ -105,9 +105,131 @@ function loadSolarConditions() {
             applySwClass('sw-electron-vals', 'sw-electron-desc',
                 electronFlux <= 100 ? 'bg-success-subtle' : electronFlux <= 1000 ? 'bg-warning-subtle' : 'bg-danger-subtle');
         }
+
+        // Forecast
+
+        renderKIndexForecast(jsonData.k_index_forecast);
+        renderSolarStormForecast(jsonData.solar_storm_forecast);
+        renderBlackoutForecast(jsonData.blackout_forecast_r1r2, jsonData.blackout_forecast_r3_or_greater);
     });
 }
 
+// Render the K-index forecast table (rows = 3-hour UTC time slots, columns = forecast dates)
+function renderKIndexForecast(data) {
+    if (!data) return;
+
+    const entries = Object.entries(data)
+        .map(([tsStr, kp]) => ({ ts: parseFloat(tsStr), kp }))
+        .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>`);
+    });
+
+    // 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');
+            }
+            tr.append(td);
+        });
+        tbody.append(tr);
+    });
+}
+
+// Render the solar storm forecast table
+function renderSolarStormForecast(data) {
+    if (!data) return;
+
+    const entries = Object.entries(data)
+        .map(([tsStr, pct]) => ({ ts: parseFloat(tsStr), pct }))
+        .sort((a, b) => a.ts - b.ts);
+
+    // Header
+    const headRow = $('#forecast-solar-storm-head').empty().append('<th></th>');
+    entries.forEach(({ ts }) => {
+        const label = new Date(ts * 1000)
+            .toLocaleDateString('en-US', { day: '2-digit', month: 'short', timeZone: 'UTC' });
+        headRow.append(`<th>${label}</th>`);
+    });
+
+    // Single data row: "S1 or greater" label + one cell per date
+    const tr = $('<tr>').append('<td>S1 or greater</td>');
+    entries.forEach(({ pct }) => {
+        const td = $('<td>').text(pct + '%');
+        td.addClass(pct < 50 ? 'bg-success-subtle' : pct < 75 ? 'bg-warning-subtle' : 'bg-danger-subtle');
+        tr.append(td);
+    });
+    $('#forecast-solar-storm-tbody').empty().append(tr);
+}
+
+// Render the radio blackout forecast table
+function renderBlackoutForecast(r1r2Data, r3Data) {
+    if (!r1r2Data && !r3Data) return;
+
+    const tsSet = new Set([
+        ...Object.keys(r1r2Data || {}),
+        ...Object.keys(r3Data || {})
+    ]);
+    const entries = [...tsSet]
+        .map(tsStr => ({
+            ts: parseFloat(tsStr),
+            r1r2: r1r2Data ? r1r2Data[tsStr] : undefined,
+            r3:   r3Data   ? r3Data[tsStr]   : undefined
+        }))
+        .sort((a, b) => a.ts - b.ts);
+
+    // Header
+    const headRow = $('#forecast-blackout-head').empty().append('<th></th>');
+    entries.forEach(({ ts }) => {
+        const label = new Date(ts * 1000)
+            .toLocaleDateString('en-GB', { day: '2-digit', month: 'short', timeZone: 'UTC' });
+        headRow.append(`<th>${label}</th>`);
+    });
+
+    // Two data rows: R1-R2 and R3+
+    function makeRow(rowLabel, getValue) {
+        const tr = $('<tr>').append(`<td>${rowLabel}</td>`);
+        entries.forEach(entry => {
+            const pct = getValue(entry);
+            const td = $('<td>');
+            if (pct !== undefined) {
+                td.text(pct + '%');
+                td.addClass(pct < 50 ? 'bg-success-subtle' : pct < 75 ? 'bg-warning-subtle' : 'bg-danger-subtle');
+            }
+            tr.append(td);
+        });
+        return tr;
+    }
+
+    $('#forecast-blackout-tbody').empty()
+        .append(makeRow('R1-R2',        e => e.r1r2))
+        .append(makeRow('R3 or greater', e => e.r3));
+}
+
 // Render the DX stats table for the currently selected DE continent
 function renderDxStats() {
     if (!dxStatsData) { return; }