dashboard: fix gauge charts (install gauge.js, render after polls), force dark theme with white text and red/green accents, add icons

static/gauge.js

@@ -1,44 +1,50 @@
-document.addEventListener('DOMContentLoaded', function() {
-  // Draw horizontal bar charts for each score using Chart.js
-  function drawCharts() {
-    const gaugeContainers = document.querySelectorAll('.gauge-container');
-    gaugeContainers.forEach(container => {
-      const label = container.dataset.label;
-      const score = parseFloat(container.dataset.score);
-      // Clear any previous content
-      container.innerHTML = '';
-      // Create canvas element
-      const canvas = document.createElement('canvas');
-      // Set a fixed height for thin bar
-      canvas.height = 30;
-      container.appendChild(canvas);
-      const ctx = canvas.getContext('2d');
-      // Determine bar colour based on sign
-      const bgColor = score >= 0 ? 'rgba(40,167,69,0.8)' : 'rgba(220,53,69,0.8)'; // success/red
-      new Chart(ctx, {
-        type: 'bar',
+/* Gold Desk — score gauges.
+ *
+ * Draws a horizontal diverging Chart.js bar (−100…+100, zero-centered)
+ * into every `.gauge-container` element. The containers are created
+ * dynamically by dashboard.js after each snapshot poll, so this module
+ * exposes window.renderGauges() which dashboard.js calls after every
+ * card render (and on resize). Re-running it destroys and redraws each
+ * chart, so it is safe to call repeatedly.
+ */
+(function () {
+  "use strict";
+
+  function renderGauges() {
+    if (typeof Chart === "undefined") return;
+    document.querySelectorAll(".gauge-container").forEach(function (container) {
+      var score = parseFloat(container.dataset.score);
+      if (!isFinite(score)) return;
+
+      var canvas = container.querySelector("canvas");
+      if (!canvas) {
+        container.innerHTML = "";
+        canvas = document.createElement("canvas");
+        container.appendChild(canvas);
+      } else {
+        var existing = Chart.getChart(canvas);
+        if (existing) existing.destroy();
+      }
+
+      var pos = score >= 0;
+      new Chart(canvas.getContext("2d"), {
+        type: "bar",
         data: {
-          labels: [label],
+          labels: [container.dataset.label || ""],
           datasets: [{
-            label: label,
             data: [score],
-            backgroundColor: bgColor,
-            borderColor: 'rgba(0,0,0,0.1)',
+            backgroundColor: pos ? "rgba(25,135,84,0.85)" : "rgba(220,53,69,0.85)",
+            borderColor: pos ? "#198754" : "#dc3545",
             borderWidth: 1,
-            barThickness: 12,
-            maxBarThickness: 12,
+            barThickness: 10,
+            maxBarThickness: 10,
+            borderRadius: 3
           }]
         },
         options: {
-          indexAxis: 'y',
+          indexAxis: "y",
           scales: {
-            x: {
-              min: -100,
-              max: 100,
-              display: false,
-              grid: { display: false },
-              ticks: { display: false }
-            },
+            x: { min: -100, max: 100, display: false, grid: { display: false }, ticks: { display: false } },
             y: { display: false, grid: { display: false } }
           },
           plugins: {
@@ -48,12 +54,17 @@ document.addEventListener('DOMContentLoaded', function() {
           },
           maintainAspectRatio: false,
           responsive: true,
-          animation: { duration: 500, easing: 'easeOutQuad' }
+          animation: { duration: 400, easing: "easeOutQuad" }
         }
       });
     });
   }
 
-  drawCharts();
-  window.addEventListener('resize', drawCharts);
-});
+  window.renderGauges = renderGauges;
+
+  var resizeTimer = null;
+  window.addEventListener("resize", function () {
+    clearTimeout(resizeTimer);
+    resizeTimer = setTimeout(renderGauges, 150);
+  });
+})();