Radio blackout (R) scale

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
+    # 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
     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.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.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)

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"),

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=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>
 
 {% end %}

templates/add_spot.html

@@ -69,8 +69,8 @@
 
 </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>
 
 {% end %}

templates/alerts.html

@@ -56,8 +56,8 @@
 
 </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>
 
 {% end %}

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=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>
 
 {% end %}

templates/base.html

@@ -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/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>
 <body>

templates/conditions.html

@@ -111,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">
@@ -155,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>
@@ -227,8 +229,8 @@
     </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 () {
     $("#nav-link-conditions").addClass("active");
 }); <!-- highlight active page in nav --></script>

templates/map.html

@@ -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/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>
 
 {% end %}

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=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>
 
 {% end %}

templates/status.html

@@ -59,8 +59,8 @@
     </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>
     $(document).ready(function() { $("#nav-link-status").addClass("active"); }); <!-- highlight active page in nav -->
 </script>

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.

webassets/js/conditions.js

@@ -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,25 @@ function loadSolarConditions() {
         // Solar Weather
 
         const swFields = {
-            'sfi':                  'sw-sfi',
+            'sfi': 'sw-sfi',
-            'sunspots':             'sw-sunspots',
+            'sunspots': 'sw-sunspots',
             'band_conditions_desc': 'sw-solar-flux-desc',
-            'k_index':              'sw-k-index',
+            'k_index': 'sw-k-index',
-            'a_index':              'sw-a-index',
+            'a_index': 'sw-a-index',
-            'geomag_field':         'sw-geomag-field',
+            'geomag_field': 'sw-geomag-field',
-            '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',
-            'proton_flux':          'sw-proton-flux',
+            'xray_desc': 'sw-xray-desc',
-            'solar_storm_scale':    'sw-solar-storm-scale',
+            'proton_flux': 'sw-proton-flux',
-            'proton_flux_desc':     'sw-proton-desc',
+            'solar_storm_scale': 'sw-solar-storm-scale',
-            'electron_flux':        'sw-electron-flux',
+            'proton_flux_desc': 'sw-proton-desc',
-            'electron_flux_desc':   'sw-electron-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);
@@ -87,12 +88,12 @@ function loadSolarConditions() {
                 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'
-                            : (letter === 'M') ? 'bg-warning-subtle'
+                : (letter === 'M') ? 'bg-warning-subtle'
-                            : 'bg-success-subtle';
+                    : 'bg-success-subtle';
             applySwClass('sw-xray-vals', 'sw-xray-desc', xRayClass);
         }
 
@@ -121,19 +122,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
+    // 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
     // 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 < 5.5 ? withAlpha(style.getPropertyValue('--bs-warning').trim())
+            : e.kp < 5.5 ? withAlpha(style.getPropertyValue('--bs-warning').trim())
-        : withAlpha(style.getPropertyValue('--bs-danger').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 +160,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 },
+        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
@@ -175,17 +199,13 @@ function renderKIndexForecast(data) {
         id: 'nowLine',
         afterDraw(chart) {
             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 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'), {
         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 +283,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 +316,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 +344,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(deData).forEach(function ([dxContinent, bands]) {
-        Object.entries(bands).forEach(function([band, count]) {
+        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 +389,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();