w1cdn/spothole
1
0
Fork 0
mirror of https://git.ianrenton.com/ian/spothole.git synced 2026-04-29 18:25:58 +00:00
Code Issues 13 Packages Projects Releases Wiki Activity

Improve K-index chart

Browse Source
This commit is contained in:
Ian Renton
2026-04-04 10:28:11 +01:00
parent 76b0ec24b7
commit 429b278bca
10 changed files with 124 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
templates/about.html
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>
</div>
<script src="/js/common.js?v=1775249255"></script>
<script src="/js/common.js?v=1775294891"></script>
<script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script>
{% end %}

4
templates/add_spot.html
View File

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

4
templates/alerts.html
View File

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

6
templates/bands.html
View File

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

8
templates/base.html
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/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/storage.js?v=1775249255"></script>
<script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775249255"></script>
<script src="https://misc.ianrenton.com/jsutils/geo.js?v=1775249255"></script>
<script src="https://misc.ianrenton.com/jsutils/utils.js?v=1775294891"></script>
<script src="https://misc.ianrenton.com/jsutils/storage.js?v=1775294891"></script>
<script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775294891"></script>
<script src="https://misc.ianrenton.com/jsutils/geo.js?v=1775294891"></script>
</head>
<body>

6
templates/conditions.html
View File

@@ -155,7 +155,7 @@
</table>
</div>
<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">
<thead>
<tr id="forecast-blackout-head"></tr>
@@ -227,8 +227,8 @@
</div>
</div>
<script src="/js/common.js?v=1775249255"></script>
<script src="/js/conditions.js?v=1775249255"></script>
<script src="/js/common.js?v=1775294891"></script>
<script src="/js/conditions.js?v=1775294891"></script>
<script>$(document).ready(function () {
$("#nav-link-conditions").addClass("active");
}); <!-- highlight active page in nav --></script>

6
templates/map.html
View File

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

6
templates/spots.html
View File

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

4
templates/status.html
View File

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

170
webassets/js/conditions.js
View File

@@ -6,14 +6,14 @@ let kpChart = null;
// Load solar conditions
function loadSolarConditions() {
$.getJSON('/api/v1/solar', function(jsonData) {
$.getJSON('/api/v1/solar', function (jsonData) {
// 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) {
Object.entries(jsonData.hf_conditions).forEach(function([key, condition]) {
Object.entries(jsonData.hf_conditions).forEach(function ([key, condition]) {
const cell = $('#hf-conditions-' + key);
cell.text(condition);
cell.addClass(hfConditionClass[condition]);
@@ -23,7 +23,7 @@ function loadSolarConditions() {
// VHF
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);
cell.text(condition);
let vhfClass;
@@ -44,24 +44,24 @@ function loadSolarConditions() {
// Solar Weather
const swFields = {
'sfi': 'sw-sfi',
'sunspots': 'sw-sunspots',
'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',
'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]) {
Object.entries(swFields).forEach(function ([field, id]) {
const val = jsonData[field];
if (val !== null && val !== undefined) {
$('#' + id).text(val);
@@ -91,8 +91,8 @@ function loadSolarConditions() {
if (xRay) {
const letter = xRay[0].toUpperCase();
const xRayClass = (letter === 'X') ? 'bg-danger-subtle'
: (letter === 'M') ? 'bg-warning-subtle'
: 'bg-success-subtle';
: (letter === 'M') ? 'bg-warning-subtle'
: 'bg-success-subtle';
applySwClass('sw-xray-vals', 'sw-xray-desc', xRayClass);
}
@@ -121,19 +121,16 @@ function renderKIndexForecast(data) {
if (!data) return;
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);
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;
});
// Use a simple integer index axis: ticks at 0, 1, 2, ..., N (period boundaries) and bars
// centred at 0.5, 1.5, ..., N-0.5 (midpoints). This guarantees tick marks fall exactly on
// bar edges regardless of how Chart.js rounds large timestamp values.
// "axisMin = 0" is the left/top edge of bar 0; "axisMax = N" is the right/bottom edge of bar N-1.
const N = entries.length;
const periodSecs = 3 * 3600;
// 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"
@@ -142,13 +139,15 @@ function renderKIndexForecast(data) {
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 < 5.5 ? withAlpha(style.getPropertyValue('--bs-warning').trim())
: withAlpha(style.getPropertyValue('--bs-danger').trim())
: e.kp < 5.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(); }
if (kpChart) {
kpChart.destroy();
}
const isMobile = window.innerWidth < 768;
const kpAxisTicks = {
@@ -160,14 +159,38 @@ function renderKIndexForecast(data) {
const kpAxis = {
min: 0,
max: 9,
title: { display: true, text: 'Kp', color: textColor },
title: {display: true, text: 'Kp', color: textColor},
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 = {
title: { display: true, text: 'Time (UTC)', color: textColor },
ticks: { color: textColor, maxRotation: 45, minRotation: 0 },
grid: { color: gridColor },
type: 'linear',
min: 0,
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},
};
// Draw a "now" line at the current time position
@@ -175,17 +198,13 @@ function renderKIndexForecast(data) {
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
// Find which bar (if any) the current time falls in and compute a fractional index
const firstTs = entries[0].ts;
const lastTs = entries[N - 1].ts + periodSecs;
if (nowTs < firstTs || nowTs > lastTs) return;
const fracIndex = (nowTs - firstTs) / periodSecs;
const { ctx, chartArea } = chart;
const {ctx, chartArea} = chart;
const scale = isMobile ? chart.scales.y : chart.scales.x;
const pos = scale.getPixelForValue(fracIndex);
@@ -218,15 +237,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'), {
type: 'bar',
data: {
labels,
datasets: [{
data: entries.map(e => e.kp),
data: chartData,
backgroundColor: colors,
hoverBackgroundColor: colors,
borderWidth: 0,
barPercentage: 1.0,
categoryPercentage: 1.0,
}]
},
options: {
@@ -256,20 +282,20 @@ function renderSolarStormForecast(data) {
if (!data) return;
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);
// Header
const headRow = $('#forecast-solar-storm-head').empty().append('<th></th>');
entries.forEach(({ ts }) => {
entries.forEach(({ts}) => {
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>`);
});
// Single data row: "S1 or greater" label + one cell per date
const tr = $('<tr>').append('<td>S1 or greater</td>');
entries.forEach(({ pct }) => {
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);
@@ -289,15 +315,15 @@ function renderBlackoutForecast(r1r2Data, r3Data) {
.map(tsStr => ({
ts: parseFloat(tsStr),
r1r2: r1r2Data ? r1r2Data[tsStr] : undefined,
r3: r3Data ? r3Data[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 }) => {
entries.forEach(({ts}) => {
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>`);
});
@@ -317,31 +343,37 @@ function renderBlackoutForecast(r1r2Data, r3Data) {
}
$('#forecast-blackout-tbody').empty()
.append(makeRow('R1-R2', e => e.r1r2))
.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; }
if (!dxStatsData) {
return;
}
const deContinent = $('#dxstats-de-continent').val();
const deData = dxStatsData[deContinent];
if (!deData) { return; }
if (!deData) {
return;
}
const cells = [];
Object.entries(deData).forEach(function([dxContinent, bands]) {
Object.entries(bands).forEach(function([band, count]) {
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 });
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 max = Math.max(...counts);
const range = max - min;
cells.forEach(function({ cell, count }) {
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);
@@ -356,14 +388,14 @@ function dxStatsContientChanged() {
// Fetch DX stats from the API and render
function loadDxStats() {
$.getJSON('/api/v1/dxstats', function(jsonData) {
$.getJSON('/api/v1/dxstats', function (jsonData) {
dxStatsData = jsonData;
renderDxStats();
});
}
// Startup
$(document).ready(function() {
$(document).ready(function () {
loadSettings();
loadSolarConditions();
loadDxStats();