new stack

static/stats.js

@@ -0,0 +1,117 @@
+// stats.js — Chart.js logic for Essence QC stats page.
+// Reads window.__statsData injected by the server into the stats-content fragment.
+
+(function () {
+  'use strict';
+
+  let statsChart = null;
+
+  function darkMode() {
+    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+  }
+
+  function cssVar(name) {
+    return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+  }
+
+  function initChart() {
+    const snaps  = window.__statsData;
+    const canvas = document.getElementById('stats-chart-canvas');
+    if (!snaps || !snaps.length || !canvas) return;
+
+    // Destroy previous instance if the fragment was re-swapped.
+    if (statsChart) {
+      statsChart.destroy();
+      statsChart = null;
+    }
+
+    const textColor   = cssVar('--foreground')      || (darkMode() ? '#e4e4e7' : '#18181b');
+    const gridColor   = cssVar('--border')          || (darkMode() ? '#3f3f46' : '#e4e4e7');
+    const tooltipBg   = cssVar('--card')            || (darkMode() ? '#18181b' : '#ffffff');
+    const tooltipText = cssVar('--card-foreground') || textColor;
+
+    const labels = snaps.map(s => {
+      const d = new Date(s.generatedAt);
+      return d.toLocaleString('fr-CA', {
+        month: 'short', day: 'numeric',
+        hour: '2-digit', minute: '2-digit',
+      });
+    });
+
+    const pt = snaps.length > 60 ? 0 : 3;
+    const datasets = [
+      {
+        label: 'Régulier',
+        data: snaps.map(s => s.regularAvg > 0 ? +s.regularAvg.toFixed(2) : null),
+        borderColor: '#3b82f6', backgroundColor: 'rgba(59,130,246,0.1)',
+        tension: 0.3, fill: false, pointRadius: pt,
+      },
+      {
+        label: 'Super',
+        data: snaps.map(s => s.superAvg > 0 ? +s.superAvg.toFixed(2) : null),
+        borderColor: '#f59e0b', backgroundColor: 'rgba(245,158,11,0.1)',
+        tension: 0.3, fill: false, pointRadius: pt,
+      },
+      {
+        label: 'Diesel',
+        data: snaps.map(s => s.dieselAvg > 0 ? +s.dieselAvg.toFixed(2) : null),
+        borderColor: '#22c55e', backgroundColor: 'rgba(34,197,94,0.1)',
+        tension: 0.3, fill: false, pointRadius: pt,
+      },
+    ];
+
+    const chartOpts = {
+      responsive: true,
+      maintainAspectRatio: true,
+      interaction: { mode: 'index', intersect: false },
+      plugins: {
+        legend: {
+          position: 'top',
+          labels: { color: textColor },
+        },
+        tooltip: {
+          backgroundColor: tooltipBg,
+          titleColor: tooltipText,
+          bodyColor: tooltipText,
+          borderColor: gridColor,
+          borderWidth: 1,
+          callbacks: {
+            label: ctx => ctx.dataset.label + ': ' +
+              (ctx.parsed.y != null ? ctx.parsed.y.toFixed(1) + '¢/L' : '—'),
+          },
+        },
+      },
+      scales: {
+        x: {
+          ticks: { maxTicksLimit: 10, maxRotation: 30, color: textColor },
+          grid:  { color: gridColor },
+        },
+        y: {
+          title: { display: true, text: '¢/L', color: textColor },
+          ticks: { callback: v => v + '¢', color: textColor },
+          grid:  { color: gridColor },
+        },
+      },
+    };
+
+    statsChart = new Chart(canvas, { type: 'line', data: { labels, datasets }, options: chartOpts });
+  }
+
+  // Called inline from stats-content.html after __statsData is set.
+  window.__initStatsChart = initChart;
+
+  // Re-render on dark-mode change.
+  if (window.matchMedia) {
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+      if (statsChart) initChart();
+    });
+  }
+
+  // Re-init after any htmx swap of #stats-content.
+  document.body.addEventListener('htmx:afterSwap', function (evt) {
+    if (evt.detail && evt.detail.target && evt.detail.target.id === 'stats-content') {
+      // __statsData was updated inline by the swapped fragment; just init the chart.
+      if (window.__statsData) initChart();
+    }
+  });
+})();