Replace Google Charts with Chart.js horizontal bars and set dark theme default

static/dashboard.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" data-bs-theme="light">
+<html lang="en" data-bs-theme="dark">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -11,7 +11,7 @@
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" crossorigin="anonymous">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap">
 <link rel="stylesheet" href="dashboard.css">
-  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
 <script>
 (function () {
   var t = localStorage.getItem("xau-theme");

static/gauge.js

@@ -1,54 +1,59 @@
 document.addEventListener('DOMContentLoaded', function() {
-  // Load Google Charts
+  // Draw horizontal bar charts for each score using Chart.js
-  google.charts.load('current', {'packages':['gauge']});
+  function drawCharts() {
-  google.charts.setOnLoadCallback(drawGauges);
-
-  // Draw all gauges on the page
-  function drawGauges() {
     const gaugeContainers = document.querySelectorAll('.gauge-container');
-    
     gaugeContainers.forEach(container => {
       const label = container.dataset.label;
       const score = parseFloat(container.dataset.score);
-      
+      // Clear any previous content
-      // Create data table
+      container.innerHTML = '';
-      const data = google.visualization.arrayToDataTable([
+      // Create canvas element
-        ['Label', 'Value'],
+      const canvas = document.createElement('canvas');
-        [label, score]
+      // Set a fixed height for thin bar
-      ]);
+      canvas.height = 30;
-
+      container.appendChild(canvas);
-      // Configure gauge options
+      const ctx = canvas.getContext('2d');
-      const options = {
+      // Determine bar colour based on sign
-        width: 200,
+      const bgColor = score >= 0 ? 'rgba(40,167,69,0.8)' : 'rgba(220,53,69,0.8)'; // success/red
-        height: 160,
+      new Chart(ctx, {
-        redFrom: -100,
+        type: 'bar',
-        redTo: 0,
+        data: {
-        greenFrom: 0,
+          labels: [label],
-        greenTo: 100,
+          datasets: [{
-        minorTicks: 5,
+            label: label,
+            data: [score],
+            backgroundColor: bgColor,
+            borderColor: 'rgba(0,0,0,0.1)',
+            borderWidth: 1,
+            barThickness: 12,
+            maxBarThickness: 12,
+          }]
+        },
+        options: {
+          indexAxis: 'y',
+          scales: {
+            x: {
               min: -100,
               max: 100,
-        majorTicks: [-100, -50, 0, 50, 100],
+              display: false,
-        animation: {
+              grid: { display: false },
-          duration: 500,
+              ticks: { display: false }
-          easing: 'out'
+            },
+            y: { display: false, grid: { display: false } }
+          },
+          plugins: {
+            legend: { display: false },
+            tooltip: { enabled: false },
+            title: { display: false }
+          },
+          maintainAspectRatio: false,
+          responsive: true,
+          animation: { duration: 500, easing: 'easeOutQuad' }
         }
-      };
+      });
-
-      // Remove yellow region
-      delete options.yellowFrom;
-      delete options.yellowTo;
-
-      // Create and draw the gauge
-      const chart = new google.visualization.Gauge(container);
-      chart.draw(data, options);
     });
   }
 
-  // Re-draw gauges when window is resized
+  drawCharts();
-  window.addEventListener('resize', function() {
+  window.addEventListener('resize', drawCharts);
-    if (typeof google !== 'undefined' && google.visualization) {
-      drawGauges();
-    }
-  });
 });