mirror of
https://git.ianrenton.com/ian/spothole.git
synced 2026-04-29 18:25:58 +00:00
Kp forecast axis swap on mobile
This commit is contained in:
@@ -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=1775236305"></script>
|
||||
<script src="/js/common.js?v=1775241656"></script>
|
||||
<script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script>
|
||||
|
||||
{% end %}
|
||||
@@ -69,8 +69,8 @@
|
||||
|
||||
</div>
|
||||
|
||||
<script src="/js/common.js?v=1775236305"></script>
|
||||
<script src="/js/add-spot.js?v=1775236305"></script>
|
||||
<script src="/js/common.js?v=1775241656"></script>
|
||||
<script src="/js/add-spot.js?v=1775241656"></script>
|
||||
<script>$(document).ready(function() { $("#nav-link-add-spot").addClass("active"); }); <!-- highlight active page in nav --></script>
|
||||
|
||||
{% end %}
|
||||
@@ -56,8 +56,8 @@
|
||||
|
||||
</div>
|
||||
|
||||
<script src="/js/common.js?v=1775236305"></script>
|
||||
<script src="/js/alerts.js?v=1775236305"></script>
|
||||
<script src="/js/common.js?v=1775241657"></script>
|
||||
<script src="/js/alerts.js?v=1775241657"></script>
|
||||
<script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script>
|
||||
|
||||
{% end %}
|
||||
@@ -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=1775236305"></script>
|
||||
<script src="/js/spotsbandsandmap.js?v=1775236305"></script>
|
||||
<script src="/js/bands.js?v=1775236305"></script>
|
||||
<script src="/js/common.js?v=1775241656"></script>
|
||||
<script src="/js/spotsbandsandmap.js?v=1775241656"></script>
|
||||
<script src="/js/bands.js?v=1775241656"></script>
|
||||
<script>$(document).ready(function() { $("#nav-link-bands").addClass("active"); }); <!-- highlight active page in nav --></script>
|
||||
|
||||
{% end %}
|
||||
@@ -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=1775236305"></script>
|
||||
<script src="https://misc.ianrenton.com/jsutils/storage.js?v=1775236305"></script>
|
||||
<script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775236305"></script>
|
||||
<script src="https://misc.ianrenton.com/jsutils/geo.js?v=1775236305"></script>
|
||||
<script src="https://misc.ianrenton.com/jsutils/utils.js?v=1775241656"></script>
|
||||
<script src="https://misc.ianrenton.com/jsutils/storage.js?v=1775241656"></script>
|
||||
<script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775241656"></script>
|
||||
<script src="https://misc.ianrenton.com/jsutils/geo.js?v=1775241656"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -223,8 +223,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/common.js?v=1775236305"></script>
|
||||
<script src="/js/conditions.js?v=1775236305"></script>
|
||||
<script src="/js/common.js?v=1775241656"></script>
|
||||
<script src="/js/conditions.js?v=1775241656"></script>
|
||||
<script>$(document).ready(function () {
|
||||
$("#nav-link-conditions").addClass("active");
|
||||
}); <!-- highlight active page in nav --></script>
|
||||
|
||||
@@ -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=1775236305"></script>
|
||||
<script src="/js/spotsbandsandmap.js?v=1775236305"></script>
|
||||
<script src="/js/map.js?v=1775236305"></script>
|
||||
<script src="/js/common.js?v=1775241657"></script>
|
||||
<script src="/js/spotsbandsandmap.js?v=1775241657"></script>
|
||||
<script src="/js/map.js?v=1775241657"></script>
|
||||
<script>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script>
|
||||
|
||||
{% end %}
|
||||
@@ -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=1775236305"></script>
|
||||
<script src="/js/spotsbandsandmap.js?v=1775236305"></script>
|
||||
<script src="/js/spots.js?v=1775236305"></script>
|
||||
<script src="/js/common.js?v=1775241656"></script>
|
||||
<script src="/js/spotsbandsandmap.js?v=1775241656"></script>
|
||||
<script src="/js/spots.js?v=1775241656"></script>
|
||||
<script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script>
|
||||
|
||||
{% end %}
|
||||
@@ -59,8 +59,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/common.js?v=1775236305"></script>
|
||||
<script src="/js/status.js?v=1775236305"></script>
|
||||
<script src="/js/common.js?v=1775241656"></script>
|
||||
<script src="/js/status.js?v=1775241656"></script>
|
||||
<script>
|
||||
$(document).ready(function() { $("#nav-link-status").addClass("active"); }); <!-- highlight active page in nav -->
|
||||
</script>
|
||||
|
||||
@@ -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,
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user