From d729e943a38b5160b77e6d08e6ae1efd4f4d2344 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9drix?= <cedric@abonnel.fr>
Date: Tue, 19 May 2026 19:33:46 +0200
Subject: [PATCH] feat : graphique trafic global 14j (v1.6.27)

---
 public/assets/js/admin-stats.js | 51 ++++++++++++++++++++++++++++++++-
 templates/admin_stats.php       |  1 +
 2 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/public/assets/js/admin-stats.js b/public/assets/js/admin-stats.js
index 82421af..91d383e 100644
--- a/public/assets/js/admin-stats.js
+++ b/public/assets/js/admin-stats.js
@@ -50,6 +50,47 @@
             + '</svg>';
     }
 
+    function trendChart(totals) {
+        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;
+
+        // Dates des jours (index 0 = il y a 13 jours)
+        var now   = new Date();
+        var labels = totals.map(function (_, i) {
+            var d = new Date(now);
+            d.setDate(d.getDate() - (days - 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>'
+                    : '');
+        }).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>';
+    }
+
     fetch('/trending?period=14d')
         .then(function (r) { return r.ok ? r.text() : Promise.reject(); })
         .then(function (xml) {
@@ -70,7 +111,15 @@
                 var daily = pm ? (pagesByDay[pm[0]] || null) : null;
                 return { title: title, link: link, slug: slug, vis: vis, daily: daily };
             });
-            var maxV = Math.max.apply(null, rows.map(function (r) { return r.vis; })) || 1;
+
+            // Graphique global : somme de tous les articles par jour
+            var nDays  = 14;
+            var totals = new Array(nDays).fill(0);
+            Object.values(pagesByDay).forEach(function (arr) {
+                arr.forEach(function (v, i) { if (i < nDays) { totals[i] += v; } });
+            });
+            trendChart(totals);
+
             var html = '<div class="table-responsive"><table class="table table-sm table-hover mb-0 small w-100"><tbody>';
             rows.forEach(function (row, i) {
                 var vis  = row.vis.toLocaleString('fr-FR');
diff --git a/templates/admin_stats.php b/templates/admin_stats.php
index f63effd..9945d50 100644
--- a/templates/admin_stats.php
+++ b/templates/admin_stats.php
@@ -35,6 +35,7 @@ $_activeGroup = trim($_GET['group'] ?? '');
     <div class="card-body p-0" id="stats-pages-container">
         <p class="text-muted p-3 mb-0">Chargement…</p>
     </div>
+    <div class="card-footer bg-transparent border-top px-3 pt-3 pb-2" id="stats-trend-container"></div>
 </div>
 
 <div class="row g-4">