DX stats table. Closes #99

webassets/js/conditions.js

@@ -1,3 +1,7 @@
+// Cache for the full dxstats API response, so we can reload on the fly if the user changes the value of their continent
+// in the select box
+let dxStatsData = null;
+
 // Load solar conditions
 function loadSolarConditions() {
     $.getJSON('/api/v1/solar', function(jsonData) {
@@ -104,7 +108,61 @@ function loadSolarConditions() {
     });
 }
 
+// Take a normalised number 0-1 and generate a background colour for the DX stats cells
+function dxStatsColor(t) {
+    const yellow = [255, 243, 205];
+    const green = [209, 231, 221];
+    if (t == 0.0) {
+        return "rgb(248, 215, 218)";
+    } else {
+        const ch = (i) => Math.round(yellow[i] + (green[i] - yellow[i]) * t);
+        return `rgb(${ch(0)}, ${ch(1)}, ${ch(2)})`;
+    }
+}
+
+// Render the DX stats table for the currently selected DE continent
+function renderDxStats() {
+    if (!dxStatsData) { return; }
+    const deContinent = $('#dxstats-de-continent').val();
+    const deData = dxStatsData[deContinent];
+    if (!deData) { return; }
+
+    const cells = [];
+    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 });
+        });
+    });
+
+    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 }) {
+        const t = range > 0 ? (count - min) / range : 0;
+        cell.css('background-color', dxStatsColor(t));
+    });
+}
+
+// Called when the DE continent select changes
+function dxStatsContientChanged() {
+    saveSettings();
+    renderDxStats();
+}
+
+// Fetch DX stats from the API and render
+function loadDxStats() {
+    $.getJSON('/api/v1/dxstats', function(jsonData) {
+        dxStatsData = jsonData;
+        renderDxStats();
+    });
+}
+
 // Startup
 $(document).ready(function() {
+    loadSettings();
     loadSolarConditions();
+    loadDxStats();
 });