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

Kp forecast axis swap on mobile

Browse Source
This commit is contained in:
Ian Renton
2026-04-03 19:40:56 +01:00
parent c10b5e4947
commit d71908455a
10 changed files with 45 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
webassets/js/conditions.js
View File

@@ -150,6 +150,25 @@ function renderKIndexForecast(data) {
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: {
@@ -162,7 +181,8 @@ function renderKIndexForecast(data) {
},
options: {
responsive: true,
aspectRatio: 3,
aspectRatio: isMobile ? 0.4 : 3,
indexAxis: isMobile ? 'y' : 'x',
plugins: {
legend: {
display: false
@@ -172,22 +192,8 @@ function renderKIndexForecast(data) {
}
},
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 },
}
x: isMobile ? kpAxis : timeAxis,
y: isMobile ? timeAxis : kpAxis,
}
}
});