212 lines
10 KiB
JavaScript
212 lines
10 KiB
JavaScript
/* 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, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
|
}
|
|
|
|
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 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;
|
|
|
|
// É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() - (n - 1 - i));
|
|
return d.toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' });
|
|
});
|
|
|
|
// 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 ' + 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')
|
|
.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>';
|
|
});
|
|
}());
|