Replace score bars with Google Gauge visualization

static/dashboard.html

@@ -11,6 +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>
 (function () {
   var t = localStorage.getItem("xau-theme");
@@ -141,6 +142,7 @@
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
+<script src="gauge.js"></script>
 <script src="dashboard.js"></script>
 </body>
 </html>

static/dashboard.js

@@ -174,13 +174,9 @@ function renderContext() {
 /* ── timeframe cards ──────────────────────────────────────────── */
 function scoreBar(label, score) {
   const v = Math.max(-100, Math.min(100, score ?? 0));
-  const pct = Math.abs(v) / 2;
-  const cls = v >= 0 ? "pos" : "neg";
   return `<div class="scorebar">
     <span class="lbl">${label}</span>
-    <div class="track" role="img" aria-label="${label} score ${v.toFixed(1)} of ±100">
-      <div class="fill ${cls}" style="width:${pct}%"></div>
-    </div>
+    <div class="gauge-container" style="height: 160px;" data-label="${label}" data-score="${v}"></div>
     <span class="val num">${v >= 0 ? "+" : ""}${v.toFixed(1)}</span>
   </div>`;
 }

static/gauge.js

@@ -0,0 +1,52 @@
+document.addEventListener('DOMContentLoaded', function() {
+  // Load Google Charts
+  google.charts.load('current', {'packages':['gauge']});
+  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);
+      
+      // Create data table
+      const data = google.visualization.arrayToDataTable([
+        ['Label', 'Value'],
+        [label, score]
+      ]);
+
+      // Configure gauge options
+      const options = {
+        width: 200,
+        height: 160,
+        redFrom: -100,
+        redTo: -50,
+        yellowFrom: -50,
+        yellowTo: 0,
+        greenFrom: 0,
+        greenTo: 50,
+        minorTicks: 5,
+        min: -100,
+        max: 100,
+        majorTicks: [-100, -50, 0, 50, 100],
+        animation: {
+          duration: 500,
+          easing: 'out'
+        }
+      };
+
+      // Create and draw the gauge
+      const chart = new google.visualization.Gauge(container);
+      chart.draw(data, options);
+    });
+  }
+
+  // Re-draw gauges when window is resized
+  window.addEventListener('resize', function() {
+    if (typeof google !== 'undefined' && google.visualization) {
+      drawGauges();
+    }
+  });
+});