Merge remote-tracking branch 'origin/main'

# Conflicts: # templates/about.html # templates/add_spot.html # templates/alerts.html # templates/bands.html # templates/base.html # templates/conditions.html # templates/map.html # templates/spots.html # templates/status.html
2026-04-29 18:25:58 +00:00 · 2026-04-05 09:28:44 +01:00
parent 497b84f5dc d51e5184a1
commit e170f9c6c2
16 changed files with 201 additions and 124 deletions
--- a/data/solar_conditions.py
+++ b/data/solar_conditions.py
@@ -5,7 +5,7 @@ from dataclasses import dataclass
 # 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.

-BLACKOUT_DESCRIPTIONS = {
+XRAY_CLASS_DESCRIPTIONS = {
    "X": "Wide area HF radio blackout across sunlit side",
    "M": "Occasional loss of HF communications 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):
    """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."""
@@ -108,7 +130,7 @@ class SolarConditions:
    # K-index (3-hour geomagnetic activity)
    k_index: int = None
    # X-ray flux class, e.g. "B2.3", "C1.0"
-    x_ray: str = None
+    xray: str = None
    # Proton flux
    proton_flux: int = None
    # Electron flux
@@ -141,8 +163,10 @@ class SolarConditions:
    blackout_forecast_r3_or_greater: dict = None

    # Derived values (populated by infer_descriptions())
-    # HF radio blackout risk description, derived from x_ray
-    blackout_desc: str = None
+    # HF radio blackout risk description, derived from xray
+    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
    proton_flux_desc: str = None
    # Solar radiation storm scale number (S0-S5), derived from proton_flux
@@ -159,10 +183,9 @@ class SolarConditions:
    def infer_descriptions(self):
        """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.x_ray and len(self.x_ray) > 0:
-            self.blackout_desc = BLACKOUT_DESCRIPTIONS.get(self.x_ray[0].upper())
-
+        if self.xray and len(self.xray) > 0:
+            self.xray_desc = XRAY_CLASS_DESCRIPTIONS.get(self.xray[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.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)
--- a/server/handlers/pagetemplate.py
+++ b/server/handlers/pagetemplate.py
@@ -11,9 +11,11 @@ from core.prometheus_metrics_handler import page_requests_counter
 class PageTemplateHandler(tornado.web.RequestHandler):
    """Handler for all HTML pages generated from templates"""

-    def initialize(self, template_name, web_server_metrics):
+    def initialize(self, template_name, web_server_metrics, has_hamqsl=False, has_noaa_forecast=False):
        self._template_name = template_name
        self._web_server_metrics = web_server_metrics
+        self._has_hamqsl = has_hamqsl
+        self._has_noaa_forecast = has_noaa_forecast

    def get(self):
        # Metrics
@@ -24,4 +26,5 @@ class PageTemplateHandler(tornado.web.RequestHandler):

        # Load named template, and provide variables used in templates
        self.render(self._template_name + ".html", software_version=SOFTWARE_VERSION, allow_spotting=ALLOW_SPOTTING,
-                    web_ui_options=WEB_UI_OPTIONS, baseurl = BASE_URL, current_path=self.request.path)
+                    web_ui_options=WEB_UI_OPTIONS, baseurl=BASE_URL, current_path=self.request.path,
+                    has_hamqsl=self._has_hamqsl, has_noaa_forecast=self._has_noaa_forecast)
--- a/server/webserver.py
+++ b/server/webserver.py
@@ -21,7 +21,7 @@ from server.handlers.pagetemplate import PageTemplateHandler
 class WebServer:
    """Provides the public-facing web server."""

-    def __init__(self, spots, alerts, solar_conditions, status_data, port):
+    def __init__(self, spots, alerts, solar_conditions, status_data, solar_condition_providers, port):
        """Constructor"""

        self._spots = spots
@@ -30,6 +30,7 @@ class WebServer:
        self._sse_spot_queues = []
        self._sse_alert_queues = []
        self._status_data = status_data
+        self._solar_condition_providers = solar_condition_providers
        self._port = port
        self._shutdown_event = asyncio.Event()
        self.web_server_metrics = {
@@ -53,6 +54,12 @@ class WebServer:
    async def _start_inner(self):
        """Start method (async). Sets up the Tornado application."""

+        provider_classes = [type(p).__name__ for p in self._solar_condition_providers if p.enabled]
+        has_hamqsl = "HamQSL" in provider_classes
+        has_noaa_forecast = "NOAA3dayForecast" in provider_classes
+        page_opts = {"web_server_metrics": self.web_server_metrics, "has_hamqsl": has_hamqsl,
+                     "has_noaa_forecast": has_noaa_forecast}
+
        app = tornado.web.Application([
            # Routes for API calls
            (r"/api/v1/spots", APISpotsHandler, {"spots": self._spots, "web_server_metrics": self.web_server_metrics}),
@@ -74,20 +81,15 @@ class WebServer:
            (r"/api/v1/lookup/grid", APILookupGridHandler, {"web_server_metrics": self.web_server_metrics}),
            (r"/api/v1/spot", APISpotHandler, {"spots": self._spots, "web_server_metrics": self.web_server_metrics}),
            # Routes for templated pages
-            (r"/", PageTemplateHandler, {"template_name": "spots", "web_server_metrics": self.web_server_metrics}),
-            (r"/map", PageTemplateHandler, {"template_name": "map", "web_server_metrics": self.web_server_metrics}),
-            (r"/bands", PageTemplateHandler, {"template_name": "bands", "web_server_metrics": self.web_server_metrics}),
-            (r"/alerts", PageTemplateHandler,
-             {"template_name": "alerts", "web_server_metrics": self.web_server_metrics}),
-            (r"/add-spot", PageTemplateHandler,
-             {"template_name": "add_spot", "web_server_metrics": self.web_server_metrics}),
-            (r"/conditions", PageTemplateHandler,
-             {"template_name": "conditions", "web_server_metrics": self.web_server_metrics}),
-            (r"/status", PageTemplateHandler,
-             {"template_name": "status", "web_server_metrics": self.web_server_metrics}),
-            (r"/about", PageTemplateHandler, {"template_name": "about", "web_server_metrics": self.web_server_metrics}),
-            (r"/apidocs", PageTemplateHandler,
-             {"template_name": "apidocs", "web_server_metrics": self.web_server_metrics}),
+            (r"/", PageTemplateHandler, {"template_name": "spots", **page_opts}),
+            (r"/map", PageTemplateHandler, {"template_name": "map", **page_opts}),
+            (r"/bands", PageTemplateHandler, {"template_name": "bands", **page_opts}),
+            (r"/alerts", PageTemplateHandler, {"template_name": "alerts", **page_opts}),
+            (r"/add-spot", PageTemplateHandler, {"template_name": "add_spot", **page_opts}),
+            (r"/conditions", PageTemplateHandler, {"template_name": "conditions", **page_opts}),
+            (r"/status", PageTemplateHandler, {"template_name": "status", **page_opts}),
+            (r"/about", PageTemplateHandler, {"template_name": "about", **page_opts}),
+            (r"/apidocs", PageTemplateHandler, {"template_name": "apidocs", **page_opts}),
            # Route for Prometheus metrics
            (r"/metrics", PrometheusMetricsHandler),
            # Default route to serve from "webassets"
--- a/solarconditionsproviders/hamqsl.py
+++ b/solarconditionsproviders/hamqsl.py
@@ -86,7 +86,7 @@ class HamQSL(HTTPSolarConditionsProvider):
            "sfi": int_val("solarflux"),
            "a_index": int_val("aindex"),
            "k_index": int_val("kindex"),
-            "x_ray": text("xray"),
+            "xray": text("xray"),
            "sunspots": int_val("sunspots"),
            "proton_flux": int_val("protonflux"),
            "electron_flux": int_val("electonflux"),
--- a/spothole.py
+++ b/spothole.py
@@ -97,7 +97,8 @@ if __name__ == '__main__':
    lookup_helper.start()

    # Set up web server
-    web_server = WebServer(spots=spots, alerts=alerts, solar_conditions=solar_conditions, status_data=status_data, port=WEB_SERVER_PORT)
+    web_server = WebServer(spots=spots, alerts=alerts, solar_conditions=solar_conditions, status_data=status_data,
+                           solar_condition_providers=solar_condition_providers, port=WEB_SERVER_PORT)

    # Fetch, set up and start spot providers
    for entry in config["spot-providers"]:
--- a/templates/about.html
+++ b/templates/about.html
@@ -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=1775377643"></script>
+<script src="/js/common.js?v=1775377724"></script>
 <script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script>

 {% end %}
--- a/templates/add_spot.html
+++ b/templates/add_spot.html
@@ -69,8 +69,8 @@

 </div>

-<script src="/js/common.js?v=1775377643"></script>
-<script src="/js/add-spot.js?v=1775377643"></script>
+<script src="/js/common.js?v=1775377724"></script>
+<script src="/js/add-spot.js?v=1775377724"></script>
 <script>$(document).ready(function() { $("#nav-link-add-spot").addClass("active"); }); <!-- highlight active page in nav --></script>

 {% end %}
--- a/templates/alerts.html
+++ b/templates/alerts.html
@@ -56,8 +56,8 @@

 </div>

-<script src="/js/common.js?v=1775377643"></script>
-<script src="/js/alerts.js?v=1775377643"></script>
+<script src="/js/common.js?v=1775377724"></script>
+<script src="/js/alerts.js?v=1775377724"></script>
 <script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script>

 {% end %}
--- a/templates/bands.html
+++ b/templates/bands.html
@@ -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=1775377643"></script>
-<script src="/js/spotsbandsandmap.js?v=1775377643"></script>
-<script src="/js/bands.js?v=1775377643"></script>
+<script src="/js/common.js?v=1775377724"></script>
+<script src="/js/spotsbandsandmap.js?v=1775377724"></script>
+<script src="/js/bands.js?v=1775377724"></script>
 <script>$(document).ready(function() { $("#nav-link-bands").addClass("active"); }); <!-- highlight active page in nav --></script>

 {% end %}
--- a/templates/base.html
+++ b/templates/base.html
@@ -46,10 +46,10 @@
            crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/tinycolor2@1.6.0/cjs/tinycolor.min.js"></script>

-    <script src="https://misc.ianrenton.com/jsutils/utils.js?v=1775377643"></script>
-    <script src="https://misc.ianrenton.com/jsutils/storage.js?v=1775377643"></script>
-    <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775377643"></script>
-    <script src="https://misc.ianrenton.com/jsutils/geo.js?v=1775377643"></script>
+    <script src="https://misc.ianrenton.com/jsutils/utils.js?v=1775377724"></script>
+    <script src="https://misc.ianrenton.com/jsutils/storage.js?v=1775377724"></script>
+    <script src="https://misc.ianrenton.com/jsutils/ui-ham.js?v=1775377724"></script>
+    <script src="https://misc.ianrenton.com/jsutils/geo.js?v=1775377724"></script>

 </head>
 <body>
@@ -71,7 +71,9 @@
                  {% if allow_spotting %}
                    <li class="nav-item ms-4"><a href="/add-spot" class="nav-link" id="nav-link-add-spot"><i class="fa-solid fa-comment"></i> Add&nbsp;Spot</a></li>
                  {% end %}
+                  {% if has_hamqsl or has_noaa_forecast %}
                    <li class="nav-item ms-4"><a href="/conditions" class="nav-link" id="nav-link-conditions"><i class="fa-solid fa-sun"></i> Conditions</a></li>
+                  {% end %}
                    <li class="nav-item ms-4"><a href="/status" class="nav-link" id="nav-link-status"><i class="fa-solid fa-chart-simple"></i> Status</a></li>
                    <li class="nav-item ms-4"><a href="/about" class="nav-link" id="nav-link-about"><i class="fa-solid fa-circle-info"></i> About</a></li>
                    <li class="nav-item ms-4"><a href="/apidocs" class="nav-link" id="nav-link-api"><i class="fa-solid fa-gear"></i> API</a></li>
--- a/templates/conditions.html
+++ b/templates/conditions.html
@@ -1,6 +1,7 @@
 {% extends "base.html" %}
 {% block content %}

+{% if has_hamqsl %}
 <div class="card mt-5">
    <div class="card-header">
        Propagation Conditions
@@ -110,7 +111,9 @@
        </div>
        <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 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>
        <div class="row border-bottom align-items-start me-0">
@@ -129,7 +132,9 @@
        <div class="form-text mt-3">Data from <a href="https://hamqsl.com">HamQSL.com</a>.</div>
    </div>
 </div>
+{% end %}

+{% if has_noaa_forecast %}
 <div class="card mt-5">
    <div class="card-header">
        Forecast
@@ -152,7 +157,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>
@@ -166,6 +171,7 @@
        </div>
    </div>
 </div>
+{% end %}

 <div class="card mt-5">
    <div class="card-header">
@@ -224,8 +230,8 @@
 </div>

 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.min.js"></script>
-<script src="/js/common.js?v=1775377643"></script>
-<script src="/js/conditions.js?v=1775377643"></script>
+<script src="/js/common.js?v=1775377724"></script>
+<script src="/js/conditions.js?v=1775377724"></script>
 <script>$(document).ready(function () {
    $("#nav-link-conditions").addClass("active");
 }); <!-- highlight active page in nav --></script>
--- a/templates/map.html
+++ b/templates/map.html
@@ -79,9 +79,9 @@
 <script>
    let spotProvidersEnabledByDefault = {% raw json_encode(web_ui_options["spot-providers-enabled-by-default"]) %};
 </script>
-<script src="/js/common.js?v=1775377643"></script>
-<script src="/js/spotsbandsandmap.js?v=1775377643"></script>
-<script src="/js/map.js?v=1775377643"></script>
+<script src="/js/common.js?v=1775377724"></script>
+<script src="/js/spotsbandsandmap.js?v=1775377724"></script>
+<script src="/js/map.js?v=1775377724"></script>
 <script>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script>

 {% end %}
--- a/templates/spots.html
+++ b/templates/spots.html
@@ -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=1775377643"></script>
-<script src="/js/spotsbandsandmap.js?v=1775377643"></script>
-<script src="/js/spots.js?v=1775377643"></script>
+<script src="/js/common.js?v=1775377724"></script>
+<script src="/js/spotsbandsandmap.js?v=1775377724"></script>
+<script src="/js/spots.js?v=1775377724"></script>
 <script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script>

 {% end %}
--- a/templates/status.html
+++ b/templates/status.html
@@ -59,8 +59,8 @@
    </div>
 </div>

-<script src="/js/common.js?v=1775377643"></script>
-<script src="/js/status.js?v=1775377643"></script>
+<script src="/js/common.js?v=1775377724"></script>
+<script src="/js/status.js?v=1775377724"></script>
 <script>
    $(document).ready(function() { $("#nav-link-status").addClass("active"); }); <!-- highlight active page in nav -->
 </script>
--- a/webassets/apidocs/openapi.yml
+++ b/webassets/apidocs/openapi.yml
@@ -1415,7 +1415,7 @@ components:
          type: integer
          description: 3-hour geomagnetic activity index, 0–9
          example: 2
-        x_ray:
+        xray:
          type: string
          description: Current X-ray flux class
          example: "B2.3"
@@ -1564,10 +1564,16 @@ components:
            "1743638400.0": 25
            "1743724800.0": 25
            "1743811200.0": 25
-        blackout_desc:
+        xray_desc:
          type: string
          description: HF radio blackout risk description, derived from the X-ray flux class.
          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:
          type: string
          description: Solar radiation storm level description, derived from proton flux.
--- a/webassets/js/conditions.js
+++ b/webassets/js/conditions.js
@@ -53,8 +53,9 @@ function loadSolarConditions() {
            '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',
+            'xray': 'sw-xray',
+            'radio_blackout_scale': 'sw-radio-blackout-scale',
+            'xray_desc': 'sw-xray-desc',
            'proton_flux': 'sw-proton-flux',
            'solar_storm_scale': 'sw-solar-storm-scale',
            'proton_flux_desc': 'sw-proton-desc',
@@ -84,10 +85,10 @@ function loadSolarConditions() {
        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');
+                kIndex < 5 ? 'bg-success-subtle' : kIndex < 6 ? 'bg-warning-subtle' : 'bg-danger-subtle');
        }

-        const xRay = jsonData.x_ray;
+        const xRay = jsonData.xray;
        if (xRay) {
            const letter = xRay[0].toUpperCase();
            const xRayClass = (letter === 'X') ? 'bg-danger-subtle'
@@ -125,15 +126,12 @@ function renderKIndexForecast(data) {
        .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 +140,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 < 6.5 ? withAlpha(style.getPropertyValue('--bs-warning').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 = {
@@ -164,10 +164,34 @@ function renderKIndexForecast(data) {
        ticks: kpAxisTicks,
        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 = {
+        type: 'linear',
+        min: 0,
+        max: N,
+        offset: false,
+        reverse: isMobile,
        title: {display: true, text: 'Time (UTC)', color: textColor},
-        ticks: { color: textColor, maxRotation: 45, minRotation: 0 },
-        grid:  { color: gridColor },
+        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
@@ -175,15 +199,11 @@ 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 scale = isMobile ? chart.scales.y : chart.scales.x;
@@ -218,14 +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'), {
        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: {
@@ -262,7 +290,7 @@ function renderSolarStormForecast(data) {
    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' });
+            .toLocaleDateString('en-GB', {day: '2-digit', month: 'short', timeZone: 'UTC'});
        headRow.append(`<th>${label}</th>`);
    });

@@ -322,10 +350,14 @@ function renderBlackoutForecast(r1r2Data, r3Data) {

 // 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]) {
@@ -336,7 +368,9 @@ function renderDxStats() {
        });
    });

-    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;