mirror of
https://git.ianrenton.com/ian/spothole.git
synced 2026-04-29 18:25:58 +00:00
319 lines
12 KiB
JavaScript
319 lines
12 KiB
JavaScript
// 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() {
|
|
$.getJSON('/api/v1/solar', function(jsonData) {
|
|
|
|
// HF
|
|
|
|
const hfConditionClass = { 'Good': 'bg-success-subtle', 'Fair': 'bg-warning-subtle', 'Poor': 'bg-danger-subtle' };
|
|
|
|
if (jsonData.hf_conditions) {
|
|
Object.entries(jsonData.hf_conditions).forEach(function([key, condition]) {
|
|
const cell = $('#hf-conditions-' + key);
|
|
cell.text(condition);
|
|
cell.addClass(hfConditionClass[condition]);
|
|
});
|
|
}
|
|
|
|
// VHF
|
|
|
|
if (jsonData.vhf_conditions) {
|
|
Object.entries(jsonData.vhf_conditions).forEach(function([key, condition]) {
|
|
const cell = $('#vhf-conditions-' + key);
|
|
cell.text(condition);
|
|
let vhfClass;
|
|
if (condition === 'Band Closed') {
|
|
vhfClass = 'bg-danger-subtle';
|
|
} else if (condition.includes('High')) {
|
|
vhfClass = 'bg-warning-subtle';
|
|
} else {
|
|
vhfClass = 'bg-success-subtle';
|
|
}
|
|
cell.addClass(vhfClass);
|
|
});
|
|
}
|
|
if (jsonData.aurora_latitude !== null && jsonData.aurora_latitude !== undefined) {
|
|
$('#vhf-conditions-aurora-lat').text(jsonData.aurora_latitude + '°');
|
|
}
|
|
|
|
// Solar Weather
|
|
|
|
const swFields = {
|
|
'sfi': 'sw-sfi',
|
|
'sunspots': 'sw-sunspots',
|
|
'band_conditions_desc': 'sw-solar-flux-desc',
|
|
'k_index': 'sw-k-index',
|
|
'a_index': 'sw-a-index',
|
|
'geomag_field': 'sw-geomag-field',
|
|
'geomag_storm_scale': 'sw-geomag-storm-scale',
|
|
'geomag_storm_desc': 'sw-geomag-storm-desc',
|
|
'geomag_noise': 'sw-geomag-noise',
|
|
'x_ray': 'sw-x-ray',
|
|
'blackout_desc': 'sw-xray-desc',
|
|
'proton_flux': 'sw-proton-flux',
|
|
'solar_storm_scale': 'sw-solar-storm-scale',
|
|
'proton_flux_desc': 'sw-proton-desc',
|
|
'electron_flux': 'sw-electron-flux',
|
|
'electron_flux_desc': 'sw-electron-desc',
|
|
};
|
|
Object.entries(swFields).forEach(function([field, id]) {
|
|
const val = jsonData[field];
|
|
if (val !== null && val !== undefined) {
|
|
$('#' + id).text(val);
|
|
}
|
|
});
|
|
|
|
// Solar Weather - colouring
|
|
|
|
function applySwClass(valsId, descId, cls) {
|
|
$('#' + valsId).addClass(cls);
|
|
$('#' + descId).addClass(cls);
|
|
}
|
|
|
|
const sfi = jsonData.sfi;
|
|
if (sfi !== null && sfi !== undefined) {
|
|
applySwClass('sw-solar-flux-vals', 'sw-solar-flux-desc',
|
|
sfi > 120 ? 'bg-success-subtle' : sfi > 90 ? 'bg-warning-subtle' : 'bg-danger-subtle');
|
|
}
|
|
|
|
const kIndex = jsonData.k_index;
|
|
if (kIndex !== null && kIndex !== undefined) {
|
|
applySwClass('sw-geomag-vals', 'sw-geomag-desc',
|
|
kIndex < 5 ? 'bg-success-subtle' : kIndex < 7 ? 'bg-warning-subtle' : 'bg-danger-subtle');
|
|
}
|
|
|
|
const xRay = jsonData.x_ray;
|
|
if (xRay) {
|
|
const letter = xRay[0].toUpperCase();
|
|
const xRayClass = (letter === 'X') ? 'bg-danger-subtle'
|
|
: (letter === 'M') ? 'bg-warning-subtle'
|
|
: 'bg-success-subtle';
|
|
applySwClass('sw-xray-vals', 'sw-xray-desc', xRayClass);
|
|
}
|
|
|
|
const protonFlux = jsonData.proton_flux;
|
|
if (protonFlux !== null && protonFlux !== undefined) {
|
|
applySwClass('sw-proton-vals', 'sw-proton-desc',
|
|
protonFlux <= 100 ? 'bg-success-subtle' : protonFlux <= 10000 ? 'bg-warning-subtle' : 'bg-danger-subtle');
|
|
}
|
|
|
|
const electronFlux = jsonData.electron_flux;
|
|
if (electronFlux !== null && electronFlux !== undefined) {
|
|
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 as a Chart.js bar chart, one bar per 3-hour UTC period
|
|
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;
|
|
|
|
// 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;
|
|
});
|
|
|
|
// 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(); }
|
|
|
|
const isMobile = window.innerWidth < 768;
|
|
const kpAxisTicks = {
|
|
stepSize: 1,
|
|
color: textColor,
|
|
// Include geomagnetic storm levels (Gx) alongside the Kp index
|
|
callback: v => v > 4 ? `(G${v - 4}) ${v}` : String(v),
|
|
};
|
|
const kpAxis = {
|
|
min: 0,
|
|
max: 9,
|
|
title: { display: true, text: 'Kp', color: textColor },
|
|
ticks: kpAxisTicks,
|
|
grid: { color: gridColor },
|
|
};
|
|
const timeAxis = {
|
|
ticks: { color: textColor, maxRotation: 45, minRotation: 0 },
|
|
grid: { color: gridColor },
|
|
};
|
|
|
|
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: isMobile ? 0.4 : 3,
|
|
indexAxis: isMobile ? 'y' : 'x',
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
tooltip: {
|
|
enabled: false
|
|
}
|
|
},
|
|
scales: {
|
|
x: isMobile ? kpAxis : timeAxis,
|
|
y: isMobile ? timeAxis : kpAxis,
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// 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; }
|
|
const deContinent = $('#dxstats-de-continent').val();
|
|
const deData = dxStatsData[deContinent];
|
|
if (!deData) { return; }
|
|
|
|
const cells = [];
|
|
Object.entries(deData).forEach(function([dxContinent, bands]) {
|
|
Object.entries(bands).forEach(function([band, count]) {
|
|
const cell = $('#dxstats-' + dxContinent + '-' + band);
|
|
cell.text(count);
|
|
cells.push({ cell, count });
|
|
});
|
|
});
|
|
|
|
const counts = cells.map(function(c) { return c.count; });
|
|
const min = Math.min(...counts);
|
|
const max = Math.max(...counts);
|
|
const range = max - min;
|
|
cells.forEach(function({ cell, count }) {
|
|
const t = range > 0 ? (count - min) / range : 0;
|
|
const cls = t === 0 ? 'bg-danger-subtle' : t < 0.05 ? 'bg-warning-subtle' : 'bg-success-subtle';
|
|
cell.removeClass('bg-danger-subtle bg-warning-subtle bg-success-subtle').addClass(cls);
|
|
});
|
|
}
|
|
|
|
// Called when the DE continent select changes
|
|
function dxStatsContientChanged() {
|
|
saveSettings();
|
|
renderDxStats();
|
|
}
|
|
|
|
// Fetch DX stats from the API and render
|
|
function loadDxStats() {
|
|
$.getJSON('/api/v1/dxstats', function(jsonData) {
|
|
dxStatsData = jsonData;
|
|
renderDxStats();
|
|
});
|
|
}
|
|
|
|
// Startup
|
|
$(document).ready(function() {
|
|
loadSettings();
|
|
loadSolarConditions();
|
|
loadDxStats();
|
|
});
|