folio/public/assets/js/admin-stats.js

/* Admin stats : groupes AS + chargement pages via flux RSS XML /trending?period=14d */

// ── Groupes de réseaux ────────────────────────────────────────────────────────
(function () {
    var addBtn = document.getElementById('as-group-add');
    if (!addBtn) { return; }

    addBtn.addEventListener('click', function () {
        var tpl = document.getElementById('as-group-tpl').content.cloneNode(true);
        document.getElementById('as-groups-list').appendChild(tpl);
    });

    document.getElementById('as-groups-list').addEventListener('click', function (e) {
        if (e.target.classList.contains('as-group-delete')) {
            e.target.closest('.as-group-row').remove();
        }
    });
}());

// ── Pages les plus visitées (RSS XML + sparklines) ───────────────────────────
(function () {
    var container  = document.getElementById('stats-pages-container');
    var badge      = document.getElementById('stats-pages-count');
    var pagesByDay = (typeof FOLIO_PAGES_BY_DAY !== 'undefined') ? FOLIO_PAGES_BY_DAY : {};
    if (!container) { return; }

    function esc(s) {
        return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
    }

    function sparkline(data) {
        var W = 120, H = 28, padX = 2, padY = 3;
        var max = Math.max.apply(null, data) || 1;
        var n   = data.length;
        var pts = data.map(function (v, i) {
            var x = padX + i * (W - 2 * padX) / (n - 1);
            var y = H - padY - (v / max) * (H - 2 * padY);
            return x.toFixed(1) + ',' + y.toFixed(1);
        }).join(' ');
        // Zone remplie sous la courbe
        var first = padX.toFixed(1) + ',' + (H - padY).toFixed(1);
        var last  = (W - padX).toFixed(1) + ',' + (H - padY).toFixed(1);
        return '<svg xmlns="http://www.w3.org/2000/svg" width="' + W + '" height="' + H + '" style="display:block;overflow:visible">'
            + '<defs><linearGradient id="spk-grad" x1="0" y1="0" x2="0" y2="1">'
            + '<stop offset="0%" stop-color="var(--bs-primary,#0d6efd)" stop-opacity="0.18"/>'
            + '<stop offset="100%" stop-color="var(--bs-primary,#0d6efd)" stop-opacity="0"/>'
            + '</linearGradient></defs>'
            + '<polygon points="' + first + ' ' + pts + ' ' + last + '" fill="url(#spk-grad)"/>'
            + '<polyline points="' + pts + '" fill="none" stroke="var(--bs-primary,#0d6efd)" stroke-width="1.5" stroke-linejoin="round" stroke-linecap="round"/>'
            + '</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) {
            var doc   = new DOMParser().parseFromString(xml, 'application/xml');
            var items = Array.from(doc.querySelectorAll('item'));
            if (!items.length) {
                container.innerHTML = '<p class="text-muted p-3 mb-0">Aucune donnée.</p>';
                return;
            }
            var rows = items.map(function (item) {
                var raw   = (item.querySelector('title') || { textContent: '' }).textContent;
                var link  = ((item.querySelector('link') || {}).textContent || '').trim();
                var m     = raw.match(/\((\d+)\s+visiteurs?\)$/);
                var vis   = m ? parseInt(m[1], 10) : 0;
                var title = raw.replace(/\s*\(\d+\s+visiteurs?\)$/, '');
                var slug  = decodeURIComponent(link.replace(/.*\/post\//, ''));
                var pm    = link.match(/\/post\/[^?#]*/);
                var daily = pm ? (pagesByDay[pm[0]] || null) : null;
                return { title: title, link: link, slug: slug, vis: vis, daily: daily };
            });
            // 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');
                var spk  = row.daily ? sparkline(row.daily) : '';
                html += '<tr>'
                    + '<td class="text-muted ps-3" style="width:2rem;vertical-align:middle">' + (i + 1) + '</td>'
                    + '<td style="vertical-align:middle"><a href="' + esc(row.link) + '" target="_blank"'
                    + ' class="text-decoration-none" title="' + esc(row.slug) + '">'
                    + esc(row.title || row.slug) + '</a></td>'
                    + '<td style="width:130px;vertical-align:middle;padding:4px 8px">' + spk + '</td>'
                    + '<td class="text-end fw-semibold pe-3" style="width:5rem;vertical-align:middle">'
                    + vis + ' <span class="text-muted fw-normal">vis.</span></td>'
                    + '</tr>';
            });
            html += '</tbody></table></div>';
            if (badge) { badge.textContent = rows.length + ' URLs'; }
            container.innerHTML = html;
        })
        .catch(function () {
            container.innerHTML = '<p class="text-muted p-3 mb-0">Impossible de charger le flux.</p>';
        });
}());