From af169bccc90f389080180fd60927e125d8385ad8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9drix?= <cedric@abonnel.fr>
Date: Tue, 19 May 2026 19:37:52 +0200
Subject: [PATCH] feat : graphique trafic area chart lisse avec axes (style
 analytics)

---
 public/assets/js/admin-stats.js | 122 +++++++++++++++++++++++++-------
 1 file changed, 95 insertions(+), 27 deletions(-)

diff --git a/public/assets/js/admin-stats.js b/public/assets/js/admin-stats.js
index 99ed4db..a0c0214 100644
--- a/public/assets/js/admin-stats.js
+++ b/public/assets/js/admin-stats.js
@@ -54,41 +54,109 @@
         var trendEl = document.getElementById('stats-trend-container');
         if (!trendEl || !totals.length) { return; }
 
-        var days  = totals.length;
-        var maxV  = Math.max.apply(null, totals) || 1;
-        var W     = 1000; // viewBox, s'adapte en CSS
-        var H     = 80;
-        var padX  = 4;
-        var padY  = 8;
-        var barW  = Math.floor((W - 2 * padX) / days) - 2;
+        var n    = totals.length;
+        var VW   = 900, VH = 160;
+        var ml   = 44, mr = 12, mt = 12, mb = 28; // marges pour axes
+        var W    = VW - ml - mr;
+        var H    = VH - mt - mb;
 
-        // Dates des jours (index 0 = il y a 13 jours)
-        var now   = new Date();
+        // Échelle Y — plafond arrondi à un multiple "propre"
+        var rawMax = Math.max.apply(null, totals) || 1;
+        var mag    = Math.pow(10, Math.floor(Math.log(rawMax) / Math.LN10));
+        var maxV   = Math.ceil(rawMax / mag) * mag;
+        var nTicks = 4;
+
+        // Dates
+        var now    = new Date();
         var labels = totals.map(function (_, i) {
             var d = new Date(now);
-            d.setDate(d.getDate() - (days - 1 - i));
+            d.setDate(d.getDate() - (n - 1 - i));
             return d.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' });
         });
 
-        var bars = totals.map(function (v, i) {
-            var x  = padX + i * (W - 2 * padX) / days + 1;
-            var bh = Math.max(2, (v / maxV) * (H - padY - 16));
-            var y  = H - padY - bh;
-            var lx = x + barW / 2;
-            var label = labels[i];
-            var showLabel = (i === 0 || i === days - 1 || i === Math.floor(days / 2));
-            return '<rect x="' + x.toFixed(1) + '" y="' + y.toFixed(1) + '" width="' + barW + '" height="' + bh.toFixed(1) + '"'
-                + ' fill="var(--bs-primary,#0d6efd)" opacity="0.75" rx="2"/>'
-                + '<title>' + label + ' : ' + v + ' vis.</title>'
-                + (showLabel
-                    ? '<text x="' + lx.toFixed(1) + '" y="' + (H - 1) + '" text-anchor="middle"'
-                    + ' font-size="10" fill="var(--bs-secondary-color,#6c757d)">' + label + '</text>'
-                    : '');
+        // Coordonnées des points
+        var pts = totals.map(function (v, i) {
+            return {
+                x: ml + i * W / (n - 1),
+                y: mt + H - (v / maxV) * H,
+                v: v,
+                l: labels[i]
+            };
+        });
+
+        // Courbe bezier lisse (tension 0.35)
+        function smoothPath(points) {
+            var d = 'M ' + points[0].x.toFixed(1) + ' ' + points[0].y.toFixed(1);
+            for (var i = 0; i < points.length - 1; i++) {
+                var p0 = points[i > 0 ? i - 1 : i];
+                var p1 = points[i];
+                var p2 = points[i + 1];
+                var p3 = points[i + 2 < points.length ? i + 2 : i + 1];
+                var t  = 0.35;
+                var cp1x = p1.x + t * (p2.x - p0.x) / 2;
+                var cp1y = p1.y + t * (p2.y - p0.y) / 2;
+                var cp2x = p2.x - t * (p3.x - p1.x) / 2;
+                var cp2y = p2.y - t * (p3.y - p1.y) / 2;
+                d += ' C ' + cp1x.toFixed(1) + ' ' + cp1y.toFixed(1)
+                   + ', ' + cp2x.toFixed(1) + ' ' + cp2y.toFixed(1)
+                   + ', ' + p2.x.toFixed(1) + ' ' + p2.y.toFixed(1);
+            }
+            return d;
+        }
+
+        var linePath = smoothPath(pts);
+        var areaPath = linePath
+            + ' L ' + pts[n - 1].x.toFixed(1) + ' ' + (mt + H)
+            + ' L ' + pts[0].x.toFixed(1) + ' ' + (mt + H) + ' Z';
+
+        // Grille horizontale + labels Y
+        var grid = '', yLabels = '';
+        for (var t = 0; t <= nTicks; t++) {
+            var val = Math.round(maxV * t / nTicks);
+            var gy  = (mt + H - (val / maxV) * H).toFixed(1);
+            grid    += '<line x1="' + ml + '" y1="' + gy + '" x2="' + (VW - mr) + '" y2="' + gy
+                    + '" stroke="#e9ecef" stroke-width="1"/>';
+            yLabels += '<text x="' + (ml - 6) + '" y="' + gy + '" text-anchor="end" dominant-baseline="middle"'
+                    + ' font-size="11" fill="#adb5bd">' + val + '</text>';
+        }
+
+        // Labels X (toutes les 2 dates + dernière)
+        var xLabels = '';
+        pts.forEach(function (p, i) {
+            if (i % 2 === 0 || i === n - 1) {
+                xLabels += '<text x="' + p.x.toFixed(1) + '" y="' + (VH - 4) + '" text-anchor="middle"'
+                        + ' font-size="11" fill="#adb5bd">' + p.l + '</text>';
+            }
+        });
+
+        // Points interactifs (cercle invisible + tooltip natif)
+        var dots = pts.map(function (p) {
+            return '<circle cx="' + p.x.toFixed(1) + '" cy="' + p.y.toFixed(1) + '" r="14"'
+                + ' fill="transparent" cursor="default">'
+                + '<title>' + esc(p.l) + ' : ' + p.v + ' vis.</title>'
+                + '</circle>'
+                + '<circle cx="' + p.x.toFixed(1) + '" cy="' + p.y.toFixed(1) + '" r="3"'
+                + ' fill="var(--bs-primary,#0d6efd)" stroke="#fff" stroke-width="1.5" pointer-events="none"/>';
         }).join('');
 
-        trendEl.innerHTML = '<p class="small text-muted mb-2 fw-semibold">Trafic total — 14 derniers jours</p>'
-            + '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ' + W + ' ' + H + '"'
-            + ' style="width:100%;height:80px;display:block">' + bars + '</svg>';
+        trendEl.innerHTML =
+            '<p class="small text-muted mb-2 fw-semibold">Trafic total — 14 derniers jours</p>'
+            + '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ' + VW + ' ' + VH + '"'
+            + ' style="width:100%;height:160px;display:block;overflow:visible">'
+            + '<defs>'
+            + '<linearGradient id="area-grad" x1="0" y1="0" x2="0" y2="1">'
+            + '<stop offset="0%" stop-color="var(--bs-primary,#0d6efd)" stop-opacity="0.2"/>'
+            + '<stop offset="100%" stop-color="var(--bs-primary,#0d6efd)" stop-opacity="0"/>'
+            + '</linearGradient>'
+            + '</defs>'
+            + grid
+            + '<path d="' + areaPath + '" fill="url(#area-grad)"/>'
+            + '<path d="' + linePath + '" fill="none" stroke="var(--bs-primary,#0d6efd)"'
+            + ' stroke-width="2" stroke-linejoin="round" stroke-linecap="round"/>'
+            + dots
+            + yLabels
+            + xLabels
+            + '</svg>';
     }
 
     fetch('/trending?period=14d')