feat : graphique trafic area chart lisse avec axes (style analytics)
This commit is contained in:
@@ -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')
|
||||
|
||||
Reference in New Issue
Block a user