feat(dashboard): courbes SVG sparklines

2026-05-22 12:40:55 +02:00
parent 4cfa628036
commit 5f7cf9f837
1 changed files with 46 additions and 0 deletions
@@ -0,0 +1,46 @@
+const Charts = (() => {
+    function makeCurve(pts, stroke, fill, w, h) {
+        if (!pts || pts.length < 2) return '';
+        const xs = pts.map((_, i) => (i / (pts.length - 1)) * w);
+        const ys = pts.map(v => h - (v / 100) * (h - 6) - 3);
+        const wy = h - (70 / 100) * (h - 6) - 3;
+        let d = `M${xs[0]} ${ys[0]}`;
+        for (let i = 1; i < pts.length; i++) {
+            const cx = (xs[i - 1] + xs[i]) / 2;
+            d += ` C${cx} ${ys[i - 1]},${cx} ${ys[i]},${xs[i]} ${ys[i]}`;
+        }
+        const uid = Math.random().toString(36).slice(2);
+        return `<defs>
+            <linearGradient id="g${uid}" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stop-color="${fill}" stop-opacity=".4"/>
+                <stop offset="100%" stop-color="${fill}" stop-opacity=".02"/>
+            </linearGradient>
+        </defs>
+        <line x1="0" y1="${wy}" x2="${w}" y2="${wy}"
+              stroke="var(--warn)" stroke-width=".8" stroke-dasharray="3,3" opacity=".5"/>
+        <path d="${d} L${xs.at(-1)} ${h} L${xs[0]} ${h}Z" fill="url(#g${uid})"/>
+        <path d="${d}" fill="none" stroke="${stroke}" stroke-width="1.6"
+              stroke-linecap="round" stroke-linejoin="round"/>
+        <circle cx="${xs.at(-1)}" cy="${ys.at(-1)}" r="2.5" fill="${stroke}"/>`;
+    }
+
+    function historyToCpuPts(history) {
+        return history.map(h => h.cpu_percent ?? 0);
+    }
+
+    function historyToMemPts(history) {
+        return history.map(h => {
+            if (!h.memory_total || h.memory_total === 0) return 0;
+            return (h.memory_used / h.memory_total) * 100;
+        });
+    }
+
+    function renderChart(svgEl, pts, color) {
+        if (!svgEl) return;
+        const cs = getComputedStyle(document.documentElement);
+        const c = cs.getPropertyValue(color).trim() || color;
+        svgEl.innerHTML = makeCurve(pts, c, c, 200, 52);
+    }
+
+    return { makeCurve, historyToCpuPts, historyToMemPts, renderChart };
+})();