2 Commits

Author SHA1 Message Date
Ian Renton
d51e5184a1 Radio blackout (R) scale 2026-04-04 10:45:42 +01:00
Ian Renton
429b278bca Improve K-index chart 2026-04-04 10:28:11 +01:00
13 changed files with 169 additions and 105 deletions

View File

@@ -5,7 +5,7 @@ from dataclasses import dataclass
# Each threshold-based table is a list of (min_value, description) pairs in descending order; # Each threshold-based table is a list of (min_value, description) pairs in descending order;
# the first entry whose threshold the value meets or exceeds is used. # the first entry whose threshold the value meets or exceeds is used.
BLACKOUT_DESCRIPTIONS = { XRAY_CLASS_DESCRIPTIONS = {
"X": "Wide area HF radio blackout across sunlit side", "X": "Wide area HF radio blackout across sunlit side",
"M": "Occasional loss of HF communications on sunlit side", "M": "Occasional loss of HF communications on sunlit side",
"C": "Low absorption of HF signals on sunlit side", "C": "Low absorption of HF signals on sunlit side",
@@ -71,6 +71,28 @@ ELECTRON_FLUX_DESCRIPTIONS = [
] ]
def _xray_blackout_scale(xray):
"""Return the NOAA Radio Blackout scale number (R0-R5) for the given X-ray flux class string
(e.g. "M4.5", "X12")."""
if not xray or len(xray) < 2:
return 0
letter = xray[0].upper()
try:
number = float(xray[1:])
except ValueError:
return 0
if letter == 'M':
return 1 if number < 5 else 2
if letter == 'X':
if number < 10:
return 3
if number < 20:
return 4
return 5
return 0
def _lookup_by_threshold(value, table, default=None): def _lookup_by_threshold(value, table, default=None):
"""Return the description from a threshold table for the given numeric value. """Return the description from a threshold table for the given numeric value.
The table is a list of (min_value, description) pairs in descending order.""" The table is a list of (min_value, description) pairs in descending order."""
@@ -108,7 +130,7 @@ class SolarConditions:
# K-index (3-hour geomagnetic activity) # K-index (3-hour geomagnetic activity)
k_index: int = None k_index: int = None
# X-ray flux class, e.g. "B2.3", "C1.0" # X-ray flux class, e.g. "B2.3", "C1.0"
x_ray: str = None xray: str = None
# Proton flux # Proton flux
proton_flux: int = None proton_flux: int = None
# Electron flux # Electron flux
@@ -141,8 +163,10 @@ class SolarConditions:
blackout_forecast_r3_or_greater: dict = None blackout_forecast_r3_or_greater: dict = None
# Derived values (populated by infer_descriptions()) # Derived values (populated by infer_descriptions())
# HF radio blackout risk description, derived from x_ray # HF radio blackout risk description, derived from xray
blackout_desc: str = None xray_desc: str = None
# HF radio blackout scale number (R0-R5), derived from xray
radio_blackout_scale: int = None
# Solar radiation storm level description, derived from proton_flux # Solar radiation storm level description, derived from proton_flux
proton_flux_desc: str = None proton_flux_desc: str = None
# Solar radiation storm scale number (S0-S5), derived from proton_flux # Solar radiation storm scale number (S0-S5), derived from proton_flux
@@ -159,10 +183,9 @@ class SolarConditions:
def infer_descriptions(self): def infer_descriptions(self):
"""Populate derived text description fields from the current numeric/raw field values.""" """Populate derived text description fields from the current numeric/raw field values."""
# blackout_desc: use the X-ray flux class letter (first character of x_ray) if self.xray and len(self.xray) > 0:
if self.x_ray and len(self.x_ray) > 0: self.xray_desc = XRAY_CLASS_DESCRIPTIONS.get(self.xray[0].upper())
self.blackout_desc = BLACKOUT_DESCRIPTIONS.get(self.x_ray[0].upper()) self.radio_blackout_scale = _xray_blackout_scale(self.xray)
self.proton_flux_desc = _lookup_by_threshold(self.proton_flux, PROTON_FLUX_DESCRIPTIONS) self.proton_flux_desc = _lookup_by_threshold(self.proton_flux, PROTON_FLUX_DESCRIPTIONS)
self.solar_storm_scale = _lookup_by_threshold(self.proton_flux, SOLAR_STORM_SCALES) self.solar_storm_scale = _lookup_by_threshold(self.proton_flux, SOLAR_STORM_SCALES)
self.geomag_storm_desc = _lookup_by_threshold(self.k_index, GEOMAG_STORM_DESCRIPTIONS) self.geomag_storm_desc = _lookup_by_threshold(self.k_index, GEOMAG_STORM_DESCRIPTIONS)

View File

@@ -86,7 +86,7 @@ class HamQSL(HTTPSolarConditionsProvider):
"sfi": int_val("solarflux"), "sfi": int_val("solarflux"),
"a_index": int_val("aindex"), "a_index": int_val("aindex"),
"k_index": int_val("kindex"), "k_index": int_val("kindex"),
"x_ray": text("xray"), "xray": text("xray"),
"sunspots": int_val("sunspots"), "sunspots": int_val("sunspots"),
"proton_flux": int_val("protonflux"), "proton_flux": int_val("protonflux"),
"electron_flux": int_val("electonflux"), "electron_flux": int_val("electonflux"),

View File

@@ -67,7 +67,7 @@
<p>This software is dedicated to the memory of Tom G1PJB, SK, a friend and colleague who sadly passed away around the time I started writing it in Autumn 2025. I was looking forward to showing it to you when it was done.</p> <p>This software is dedicated to the memory of Tom G1PJB, SK, a friend and colleague who sadly passed away around the time I started writing it in Autumn 2025. I was looking forward to showing it to you when it was done.</p>
</div> </div>
<script src="/js/common.js?v=1775249255"></script> <script src="/js/common.js?v=1775295943"></script>
<script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

View File

@@ -69,8 +69,8 @@
</div> </div>
<script src="/js/common.js?v=1775249255"></script> <script src="/js/common.js?v=1775295943"></script>
<script src="/js/add-spot.js?v=1775249255"></script> <script src="/js/add-spot.js?v=1775295943"></script>
<script>$(document).ready(function() { $("#nav-link-add-spot").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-add-spot").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

View File

@@ -56,8 +56,8 @@
</div> </div>
<script src="/js/common.js?v=1775249255"></script> <script src="/js/common.js?v=1775295943"></script>
<script src="/js/alerts.js?v=1775249255"></script> <script src="/js/alerts.js?v=1775295943"></script>
<script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

View File

@@ -62,9 +62,9 @@
<script> <script>
let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %}; let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
</script> </script>
<script src="/js/common.js?v=1775249255"></script> <script src="/js/common.js?v=1775295943"></script>
<script src="/js/spotsbandsandmap.js?v=1775249255"></script> <script src="/js/spotsbandsandmap.js?v=1775295943"></script>
<script src="/js/bands.js?v=1775249255"></script> <script src="/js/bands.js?v=1775295943"></script>
<script>$(document).ready(function() { $("#nav-link-bands").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-bands").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

View File

@@ -47,10 +47,10 @@
<script src="https://cdn.jsdelivr.net/npm/tinycolor2@1.6.0/cjs/tinycolor.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/tinycolor2@1.6.0/cjs/tinycolor.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.min.js"></script>
<script src="https://misc.ianrenton.com/jsutils/utils.js?v=1775249255"></script> <script src="https://misc.ianrenton.com/jsutils/utils.js?v=1775295943"></script>
<script src="https://misc.ianrenton.com/jsutils/storage.js?v=1775249255"></script> <script src="https://misc.ianrenton.com/jsutils/storage.js?v=1775295943"></script>
<script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775249255"></script> <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775295943"></script>
<script src="https://misc.ianrenton.com/jsutils/geo.js?v=1775249255"></script> <script src="https://misc.ianrenton.com/jsutils/geo.js?v=1775295943"></script>
</head> </head>
<body> <body>

View File

@@ -111,7 +111,9 @@
</div> </div>
<div class="row border-bottom align-items-start me-0"> <div class="row border-bottom align-items-start me-0">
<div class="col-12 col-md-2 py-2 fw-bold">X-ray Flux</div> <div class="col-12 col-md-2 py-2 fw-bold">X-ray Flux</div>
<div id="sw-xray-vals" class="col-12 col-md-3 py-2"><strong id="sw-x-ray"></strong></div> <div id="sw-xray-vals" class="col-12 col-md-3 py-2">
<span class="me-3"><strong id="sw-xray"></strong></span>
<span class="me-3"><strong>R</strong><strong id="sw-radio-blackout-scale"></strong></span></div>
<div id="sw-xray-desc" class="col-12 col-md-7 py-2"></div> <div id="sw-xray-desc" class="col-12 col-md-7 py-2"></div>
</div> </div>
<div class="row border-bottom align-items-start me-0"> <div class="row border-bottom align-items-start me-0">
@@ -155,7 +157,7 @@
</table> </table>
</div> </div>
<div class="col mt-3 px-3"> <div class="col mt-3 px-3">
<h5>Blackout Forecast</h5> <h5>Radio Blackout Forecast</h5>
<table id="forecast-blackout-table" class="table table-sm mt-2"> <table id="forecast-blackout-table" class="table table-sm mt-2">
<thead> <thead>
<tr id="forecast-blackout-head"></tr> <tr id="forecast-blackout-head"></tr>
@@ -227,8 +229,8 @@
</div> </div>
</div> </div>
<script src="/js/common.js?v=1775249255"></script> <script src="/js/common.js?v=1775295943"></script>
<script src="/js/conditions.js?v=1775249255"></script> <script src="/js/conditions.js?v=1775295943"></script>
<script>$(document).ready(function () { <script>$(document).ready(function () {
$("#nav-link-conditions").addClass("active"); $("#nav-link-conditions").addClass("active");
}); <!-- highlight active page in nav --></script> }); <!-- highlight active page in nav --></script>

View File

@@ -70,9 +70,9 @@
<script> <script>
let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %}; let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
</script> </script>
<script src="/js/common.js?v=1775249255"></script> <script src="/js/common.js?v=1775295942"></script>
<script src="/js/spotsbandsandmap.js?v=1775249255"></script> <script src="/js/spotsbandsandmap.js?v=1775295942"></script>
<script src="/js/map.js?v=1775249255"></script> <script src="/js/map.js?v=1775295942"></script>
<script>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

View File

@@ -87,9 +87,9 @@
<script> <script>
let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %}; let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
</script> </script>
<script src="/js/common.js?v=1775249255"></script> <script src="/js/common.js?v=1775295942"></script>
<script src="/js/spotsbandsandmap.js?v=1775249255"></script> <script src="/js/spotsbandsandmap.js?v=1775295942"></script>
<script src="/js/spots.js?v=1775249255"></script> <script src="/js/spots.js?v=1775295942"></script>
<script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script> <script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %} {% end %}

View File

@@ -59,8 +59,8 @@
</div> </div>
</div> </div>
<script src="/js/common.js?v=1775249255"></script> <script src="/js/common.js?v=1775295943"></script>
<script src="/js/status.js?v=1775249255"></script> <script src="/js/status.js?v=1775295943"></script>
<script> <script>
$(document).ready(function() { $("#nav-link-status").addClass("active"); }); <!-- highlight active page in nav --> $(document).ready(function() { $("#nav-link-status").addClass("active"); }); <!-- highlight active page in nav -->
</script> </script>

View File

@@ -1415,7 +1415,7 @@ components:
type: integer type: integer
description: 3-hour geomagnetic activity index, 09 description: 3-hour geomagnetic activity index, 09
example: 2 example: 2
x_ray: xray:
type: string type: string
description: Current X-ray flux class description: Current X-ray flux class
example: "B2.3" example: "B2.3"
@@ -1564,10 +1564,16 @@ components:
"1743638400.0": 25 "1743638400.0": 25
"1743724800.0": 25 "1743724800.0": 25
"1743811200.0": 25 "1743811200.0": 25
blackout_desc: xray_desc:
type: string type: string
description: HF radio blackout risk description, derived from the X-ray flux class. description: HF radio blackout risk description, derived from the X-ray flux class.
example: "No significant radio blackout" example: "No significant radio blackout"
radio_blackout_scale:
type: integer
description: HF radio blackout scale number (R0-R5), derived from the X-ray flux class.
minimum: 0
maximum: 5
example: 0
proton_flux_desc: proton_flux_desc:
type: string type: string
description: Solar radiation storm level description, derived from proton flux. description: Solar radiation storm level description, derived from proton flux.

View File

@@ -6,14 +6,14 @@ let kpChart = null;
// Load solar conditions // Load solar conditions
function loadSolarConditions() { function loadSolarConditions() {
$.getJSON('/api/v1/solar', function(jsonData) { $.getJSON('/api/v1/solar', function (jsonData) {
// HF // HF
const hfConditionClass = { 'Good': 'bg-success-subtle', 'Fair': 'bg-warning-subtle', 'Poor': 'bg-danger-subtle' }; const hfConditionClass = {'Good': 'bg-success-subtle', 'Fair': 'bg-warning-subtle', 'Poor': 'bg-danger-subtle'};
if (jsonData.hf_conditions) { if (jsonData.hf_conditions) {
Object.entries(jsonData.hf_conditions).forEach(function([key, condition]) { Object.entries(jsonData.hf_conditions).forEach(function ([key, condition]) {
const cell = $('#hf-conditions-' + key); const cell = $('#hf-conditions-' + key);
cell.text(condition); cell.text(condition);
cell.addClass(hfConditionClass[condition]); cell.addClass(hfConditionClass[condition]);
@@ -23,7 +23,7 @@ function loadSolarConditions() {
// VHF // VHF
if (jsonData.vhf_conditions) { if (jsonData.vhf_conditions) {
Object.entries(jsonData.vhf_conditions).forEach(function([key, condition]) { Object.entries(jsonData.vhf_conditions).forEach(function ([key, condition]) {
const cell = $('#vhf-conditions-' + key); const cell = $('#vhf-conditions-' + key);
cell.text(condition); cell.text(condition);
let vhfClass; let vhfClass;
@@ -53,15 +53,16 @@ function loadSolarConditions() {
'geomag_storm_scale': 'sw-geomag-storm-scale', 'geomag_storm_scale': 'sw-geomag-storm-scale',
'geomag_storm_desc': 'sw-geomag-storm-desc', 'geomag_storm_desc': 'sw-geomag-storm-desc',
'geomag_noise': 'sw-geomag-noise', 'geomag_noise': 'sw-geomag-noise',
'x_ray': 'sw-x-ray', 'xray': 'sw-xray',
'blackout_desc': 'sw-xray-desc', 'radio_blackout_scale': 'sw-radio-blackout-scale',
'xray_desc': 'sw-xray-desc',
'proton_flux': 'sw-proton-flux', 'proton_flux': 'sw-proton-flux',
'solar_storm_scale': 'sw-solar-storm-scale', 'solar_storm_scale': 'sw-solar-storm-scale',
'proton_flux_desc': 'sw-proton-desc', 'proton_flux_desc': 'sw-proton-desc',
'electron_flux': 'sw-electron-flux', 'electron_flux': 'sw-electron-flux',
'electron_flux_desc': 'sw-electron-desc', 'electron_flux_desc': 'sw-electron-desc',
}; };
Object.entries(swFields).forEach(function([field, id]) { Object.entries(swFields).forEach(function ([field, id]) {
const val = jsonData[field]; const val = jsonData[field];
if (val !== null && val !== undefined) { if (val !== null && val !== undefined) {
$('#' + id).text(val); $('#' + id).text(val);
@@ -87,7 +88,7 @@ function loadSolarConditions() {
kIndex < 5 ? 'bg-success-subtle' : kIndex < 6 ? 'bg-warning-subtle' : 'bg-danger-subtle'); kIndex < 5 ? 'bg-success-subtle' : kIndex < 6 ? 'bg-warning-subtle' : 'bg-danger-subtle');
} }
const xRay = jsonData.x_ray; const xRay = jsonData.xray;
if (xRay) { if (xRay) {
const letter = xRay[0].toUpperCase(); const letter = xRay[0].toUpperCase();
const xRayClass = (letter === 'X') ? 'bg-danger-subtle' const xRayClass = (letter === 'X') ? 'bg-danger-subtle'
@@ -121,19 +122,16 @@ function renderKIndexForecast(data) {
if (!data) return; if (!data) return;
const entries = Object.entries(data) const entries = Object.entries(data)
.map(([tsStr, kp]) => ({ ts: parseFloat(tsStr), kp })) .map(([tsStr, kp]) => ({ts: parseFloat(tsStr), kp}))
.sort((a, b) => a.ts - b.ts); .sort((a, b) => a.ts - b.ts);
if (entries.length === 0) return; if (entries.length === 0) return;
// x-axis labels. Show date only on the first bar of each day, time on all bars // Use a simple integer index axis: ticks at 0, 1, 2, ..., N (period boundaries) and bars
const labels = entries.map((e, i) => { // centred at 0.5, 1.5, ..., N-0.5 (midpoints). This guarantees tick marks fall exactly on
const dt = new Date(e.ts * 1000); // bar edges regardless of how Chart.js rounds large timestamp values.
const timeStr = String(dt.getUTCHours()).padStart(2, '0') + ':00'; // "axisMin = 0" is the left/top edge of bar 0; "axisMax = N" is the right/bottom edge of bar N-1.
const dateStr = dt.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', timeZone: 'UTC' }); const N = entries.length;
const prev = i > 0 ? new Date(entries[i - 1].ts * 1000) : null; const periodSecs = 3 * 3600;
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 // 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" // quite as saturated as the Bootstrap success/warning/danger colours but not as desaturated as the "subtle"
@@ -148,7 +146,9 @@ function renderKIndexForecast(data) {
const textColor = style.getPropertyValue('--bs-body-color').trim() || '#666'; const textColor = style.getPropertyValue('--bs-body-color').trim() || '#666';
const gridColor = style.getPropertyValue('--bs-border-color').trim() || 'rgba(128,128,128,0.3)'; const gridColor = style.getPropertyValue('--bs-border-color').trim() || 'rgba(128,128,128,0.3)';
if (kpChart) { kpChart.destroy(); } if (kpChart) {
kpChart.destroy();
}
const isMobile = window.innerWidth < 768; const isMobile = window.innerWidth < 768;
const kpAxisTicks = { const kpAxisTicks = {
@@ -160,14 +160,38 @@ function renderKIndexForecast(data) {
const kpAxis = { const kpAxis = {
min: 0, min: 0,
max: 9, max: 9,
title: { display: true, text: 'Kp', color: textColor }, title: {display: true, text: 'Kp', color: textColor},
ticks: kpAxisTicks, ticks: kpAxisTicks,
grid: { color: gridColor }, grid: {color: gridColor},
}; };
// Linear scale using integer indices. Ticks at 0..N (period boundary indices);
// the callback converts each integer index back to a UTC time string.
// On mobile the time axis is vertical, so reverse it to keep time running top-to-bottom.
const timeAxis = { const timeAxis = {
title: { display: true, text: 'Time (UTC)', color: textColor }, type: 'linear',
ticks: { color: textColor, maxRotation: 45, minRotation: 0 }, min: 0,
grid: { color: gridColor }, max: N,
offset: false,
reverse: isMobile,
title: {display: true, text: 'Time (UTC)', color: textColor},
ticks: {
stepSize: 1,
color: textColor,
maxRotation: 45,
minRotation: 0,
callback(value) {
if (!Number.isInteger(value) || value < 0 || value > N) return null;
const ts = value < N ? entries[value].ts : entries[N - 1].ts + periodSecs;
const dt = new Date(ts * 1000);
const h = dt.getUTCHours(), m = dt.getUTCMinutes();
const timeStr = String(h).padStart(2, '0') + ':' + String(m).padStart(2, '0');
if (h === 0 && m === 0) {
return [timeStr, dt.toLocaleDateString('en-GB', {day: '2-digit', month: 'short', timeZone: 'UTC'})];
}
return timeStr;
},
},
grid: {color: gridColor, offset: false},
}; };
// Draw a "now" line at the current time position // Draw a "now" line at the current time position
@@ -175,17 +199,13 @@ function renderKIndexForecast(data) {
id: 'nowLine', id: 'nowLine',
afterDraw(chart) { afterDraw(chart) {
const nowTs = Date.now() / 1000; const nowTs = Date.now() / 1000;
// Find the fractional bar index for the current time // Find which bar (if any) the current time falls in and compute a fractional index
let fracIndex = null; const firstTs = entries[0].ts;
for (let i = 0; i < entries.length - 1; i++) { const lastTs = entries[N - 1].ts + periodSecs;
if (nowTs >= entries[i].ts && nowTs < entries[i + 1].ts) { if (nowTs < firstTs || nowTs > lastTs) return;
fracIndex = i + (nowTs - entries[i].ts) / (entries[i + 1].ts - entries[i].ts); const fracIndex = (nowTs - firstTs) / periodSecs;
break;
}
}
if (fracIndex === null) return; // now is outside the chart range
const { ctx, chartArea } = chart; const {ctx, chartArea} = chart;
const scale = isMobile ? chart.scales.y : chart.scales.x; const scale = isMobile ? chart.scales.y : chart.scales.x;
const pos = scale.getPixelForValue(fracIndex); const pos = scale.getPixelForValue(fracIndex);
@@ -218,15 +238,22 @@ function renderKIndexForecast(data) {
} }
}; };
// Bars centred at i+0.5 (midpoint between tick i and tick i+1) so each bar spans
// exactly from tick i to tick i+1 with barPercentage/categoryPercentage = 1.0.
const chartData = isMobile
? entries.map((e, i) => ({x: e.kp, y: i + 0.5}))
: entries.map((e, i) => ({x: i + 0.5, y: e.kp}));
kpChart = new Chart(document.getElementById('forecast-kp-chart'), { kpChart = new Chart(document.getElementById('forecast-kp-chart'), {
type: 'bar', type: 'bar',
data: { data: {
labels,
datasets: [{ datasets: [{
data: entries.map(e => e.kp), data: chartData,
backgroundColor: colors, backgroundColor: colors,
hoverBackgroundColor: colors, hoverBackgroundColor: colors,
borderWidth: 0, borderWidth: 0,
barPercentage: 1.0,
categoryPercentage: 1.0,
}] }]
}, },
options: { options: {
@@ -256,20 +283,20 @@ function renderSolarStormForecast(data) {
if (!data) return; if (!data) return;
const entries = Object.entries(data) const entries = Object.entries(data)
.map(([tsStr, pct]) => ({ ts: parseFloat(tsStr), pct })) .map(([tsStr, pct]) => ({ts: parseFloat(tsStr), pct}))
.sort((a, b) => a.ts - b.ts); .sort((a, b) => a.ts - b.ts);
// Header // Header
const headRow = $('#forecast-solar-storm-head').empty().append('<th></th>'); const headRow = $('#forecast-solar-storm-head').empty().append('<th></th>');
entries.forEach(({ ts }) => { entries.forEach(({ts}) => {
const label = new Date(ts * 1000) const label = new Date(ts * 1000)
.toLocaleDateString('en-US', { day: '2-digit', month: 'short', timeZone: 'UTC' }); .toLocaleDateString('en-GB', {day: '2-digit', month: 'short', timeZone: 'UTC'});
headRow.append(`<th>${label}</th>`); headRow.append(`<th>${label}</th>`);
}); });
// Single data row: "S1 or greater" label + one cell per date // Single data row: "S1 or greater" label + one cell per date
const tr = $('<tr>').append('<td>S1 or greater</td>'); const tr = $('<tr>').append('<td>S1 or greater</td>');
entries.forEach(({ pct }) => { entries.forEach(({pct}) => {
const td = $('<td>').text(pct + '%'); const td = $('<td>').text(pct + '%');
td.addClass(pct < 50 ? 'bg-success-subtle' : pct < 75 ? 'bg-warning-subtle' : 'bg-danger-subtle'); td.addClass(pct < 50 ? 'bg-success-subtle' : pct < 75 ? 'bg-warning-subtle' : 'bg-danger-subtle');
tr.append(td); tr.append(td);
@@ -295,9 +322,9 @@ function renderBlackoutForecast(r1r2Data, r3Data) {
// Header // Header
const headRow = $('#forecast-blackout-head').empty().append('<th></th>'); const headRow = $('#forecast-blackout-head').empty().append('<th></th>');
entries.forEach(({ ts }) => { entries.forEach(({ts}) => {
const label = new Date(ts * 1000) const label = new Date(ts * 1000)
.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', timeZone: 'UTC' }); .toLocaleDateString('en-GB', {day: '2-digit', month: 'short', timeZone: 'UTC'});
headRow.append(`<th>${label}</th>`); headRow.append(`<th>${label}</th>`);
}); });
@@ -323,25 +350,31 @@ function renderBlackoutForecast(r1r2Data, r3Data) {
// Render the DX stats table for the currently selected DE continent // Render the DX stats table for the currently selected DE continent
function renderDxStats() { function renderDxStats() {
if (!dxStatsData) { return; } if (!dxStatsData) {
return;
}
const deContinent = $('#dxstats-de-continent').val(); const deContinent = $('#dxstats-de-continent').val();
const deData = dxStatsData[deContinent]; const deData = dxStatsData[deContinent];
if (!deData) { return; } if (!deData) {
return;
}
const cells = []; const cells = [];
Object.entries(deData).forEach(function([dxContinent, bands]) { Object.entries(deData).forEach(function ([dxContinent, bands]) {
Object.entries(bands).forEach(function([band, count]) { Object.entries(bands).forEach(function ([band, count]) {
const cell = $('#dxstats-' + dxContinent + '-' + band); const cell = $('#dxstats-' + dxContinent + '-' + band);
cell.text(count); cell.text(count);
cells.push({ cell, count }); cells.push({cell, count});
}); });
}); });
const counts = cells.map(function(c) { return c.count; }); const counts = cells.map(function (c) {
return c.count;
});
const min = Math.min(...counts); const min = Math.min(...counts);
const max = Math.max(...counts); const max = Math.max(...counts);
const range = max - min; const range = max - min;
cells.forEach(function({ cell, count }) { cells.forEach(function ({cell, count}) {
const t = range > 0 ? (count - min) / range : 0; const t = range > 0 ? (count - min) / range : 0;
const cls = t === 0 ? 'bg-danger-subtle' : t < 0.05 ? 'bg-warning-subtle' : 'bg-success-subtle'; 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); cell.removeClass('bg-danger-subtle bg-warning-subtle bg-success-subtle').addClass(cls);
@@ -356,14 +389,14 @@ function dxStatsContientChanged() {
// Fetch DX stats from the API and render // Fetch DX stats from the API and render
function loadDxStats() { function loadDxStats() {
$.getJSON('/api/v1/dxstats', function(jsonData) { $.getJSON('/api/v1/dxstats', function (jsonData) {
dxStatsData = jsonData; dxStatsData = jsonData;
renderDxStats(); renderDxStats();
}); });
} }
// Startup // Startup
$(document).ready(function() { $(document).ready(function () {
loadSettings(); loadSettings();
loadSolarConditions(); loadSolarConditions();
loadDxStats(); loadDxStats();