(null);
const keys = (st.keys ?? []).slice(0, 6);
const pts = st.points ?? [];
if (!keys.length || !pts.length) return ;
const W = 720, H = height, PL = 54, PR = 10, PT = 14, PB = 26;
const totals = pts.map((p) => p.values.slice(0, keys.length).reduce((s, v) => s + (v || 0), 0));
const vmax = Math.max(...totals, 1);
const bw = Math.max(2, (W - PL - PR) / pts.length - 2);
const shades = [1, 0.72, 0.5, 0.34, 0.22, 0.13];
return (
{st.title}
{keys.map((k, i) => (
{k}
))}
{hover !== null && (
{pts[hover].t}
{keys.map((k, j) => {k} : {fmtNum(pts[hover].values[j] || 0)})}
total {fmtNum(totals[hover])}
)}
);
}
/* ---------- Barres horizontales (répartitions, géo) — deltas optionnels ---------- */
export function BarChart({ title, items, unit }: { title: string; items: BreakItem[]; unit?: string }) {
const rows = (items ?? []).slice(0, 14);
if (!rows.length) return ;
const max = Math.max(...rows.map((r) => r.value), 1);
return (
{title}
{rows.map((r) => (
{r.label}
{r.delta_pct !== undefined && r.delta_pct !== null && (
= 0 ? "var(--green)" : "var(--danger)" }}>
{r.delta_pct >= 0 ? "▲" : "▼"} {fmtPct(r.delta_pct)}
)}
{fmtNum(r.value)}{unit ? ` ${unit}` : ""}
))}
{rows.map((r, i) => (
-
{r.label}
{((100 * r.value) / total).toFixed(1)} %
))}
);
}
/* ---------- Jauge (taux, complétude, couverture) ---------- */
export function GaugeCard({ g }: { g: Gauge }) {
const frac = Math.max(0, Math.min(1, g.max ? g.value / g.max : 0));
const R = 60, C = Math.PI * R;
return (
{g.label}
);
}
/* ---------- Calendrier de chaleur ---------- */
export function CalendarHeatmap({ title, cells }: { title: string; cells: { date: string; value: number }[] }) {
if (!cells?.length) return ;
const byDate = new Map(cells.map((c) => [c.date, c.value]));
const dates = cells.map((c) => c.date).sort();
const end = new Date(dates[dates.length - 1] + "T12:00:00");
const max = Math.max(...cells.map((c) => c.value), 1);
const weeks = 26, cols: { date: string; v: number }[][] = [];
const cur = new Date(end);
cur.setDate(cur.getDate() - (weeks * 7 - 1));
for (let w = 0; w < weeks; w++) {
const col: { date: string; v: number }[] = [];
for (let d = 0; d < 7; d++) {
const iso = cur.toISOString().slice(0, 10);
col.push({ date: iso, v: byDate.get(iso) ?? 0 });
cur.setDate(cur.getDate() + 1);
}
cols.push(col);
}
return (
{title} 26 dernières semaines
);
}
/* ---------- Heatmap horaire 7 × 24 (activité par heure) ---------- */
const DOW = ["Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"];
export function HourHeatmap({ title, cells }: { title: string; cells: HourCell[] }) {
if (!cells?.length) return ;
const grid = new Map(cells.map((c) => [`${c.dow}-${c.hour}`, c.value]));
const max = Math.max(...cells.map((c) => c.value), 1);
const CW = 24, CH = 20, LX = 34, LY = 16;
return (
{title} jour × heure
);
}
/* ---------- Statistiques de série (min/max/moy/méd/σ) ---------- */
export function StatSummary({ serie }: { serie: Serie }) {
const vs = (serie.points ?? []).map((p) => p.v).filter((v) => typeof v === "number");
if (vs.length < 2) return null;
const sorted = [...vs].sort((a, b) => a - b);
const mean = vs.reduce((s, v) => s + v, 0) / vs.length;
const med = sorted[Math.floor(sorted.length / 2)];
const sd = Math.sqrt(vs.reduce((s, v) => s + (v - mean) ** 2, 0) / vs.length);
const items: [string, number][] = [
["Min", sorted[0]], ["Max", sorted[sorted.length - 1]],
["Moyenne", Math.round(mean * 100) / 100], ["Médiane", med],
["Écart-type", Math.round(sd * 100) / 100],
];
return (
{items.map(([l, v]) => (
{l} {fmtNum(v)}
))}
);
}
/* ---------- Tableau : tri, recherche, pagination ---------- */
export function DataTable({ spec, pageSize = 25 }: { spec: TableSpec; pageSize?: number }) {
const [q, setQ] = useState("");
const [sort, setSort] = useState<{ col: number; dir: 1 | -1 } | null>(null);
const [page, setPage] = useState(0);
const rows = useMemo(() => {
let r = spec.rows ?? [];
if (q) r = r.filter((row) => row.some((c) => String(c).toLowerCase().includes(q.toLowerCase())));
if (sort) r = [...r].sort((a, b) => {
const x = a[sort.col], y = b[sort.col];
const nx = typeof x === "number" ? x : parseFloat(String(x).replace(/[^\d.,-]/g, "").replace(",", "."));
const ny = typeof y === "number" ? y : parseFloat(String(y).replace(/[^\d.,-]/g, "").replace(",", "."));
if (!Number.isNaN(nx) && !Number.isNaN(ny)) return (nx - ny) * sort.dir;
return String(x).localeCompare(String(y), "fr") * sort.dir;
});
return r;
}, [spec.rows, q, sort]);
const pages = Math.max(1, Math.ceil(rows.length / pageSize));
const cur = Math.min(page, pages - 1);
return (
{spec.title}
{ setQ(e.target.value); setPage(0); }} aria-label={`Rechercher dans ${spec.title}`} />
{spec.columns.map((c, i) => (
| setSort((s) => ({ col: i, dir: s?.col === i && s.dir === 1 ? -1 : 1 }))}
style={{ cursor: "pointer", textAlign: "left", padding: "8px 10px", background: "var(--ink)", color: "var(--paper)", fontFamily: "var(--font-mono)", fontSize: 10.5, textTransform: "uppercase", letterSpacing: "0.06em", whiteSpace: "nowrap", userSelect: "none" }}
aria-sort={sort?.col === i ? (sort.dir === 1 ? "ascending" : "descending") : "none"}>
{c} {sort?.col === i ? (sort.dir === 1 ? "▲" : "▼") : "↕"}
|
))}
{rows.slice(cur * pageSize, (cur + 1) * pageSize).map((row, ri) => (
{row.map((c, ci) => (
|
{typeof c === "number" ? fmtNum(c) : c}
|
))}
))}
{fmtInt(rows.length)} lignes
{cur + 1} / {pages}
);
}
/* ---------- Records / faits marquants ---------- */
export function RecordCard({ r }: { r: RecordFact }) {
return (
{r.label}
{r.value}
{r.date && {r.date}}
);
}
/* ---------- Menu de rapports PDF (5 rapports) ---------- */
export function PdfButton({ period, from, to, endpoint = "/api/stats/report" }: { period: string; from?: string; to?: string; endpoint?: string }) {
const [open, setOpen] = useState(false);
const [busy, setBusy] = useState(null);
const box = useRef(null);
useEffect(() => {
if (!open) return;
const close = (e: MouseEvent) => {
if (box.current && !box.current.contains(e.target as Node)) setOpen(false);
};
document.addEventListener("mousedown", close);
return () => document.removeEventListener("mousedown", close);
}, [open]);
const url = (mode: string) => {
const p = new URLSearchParams({ period, mode });
if (from) p.set("from", from);
if (to) p.set("to", to);
return `${endpoint}?${p}`;
};
const dl = (mode: string) => {
setBusy(mode);
setOpen(false);
const a = document.createElement("a");
a.href = url(mode);
a.download = "";
document.body.appendChild(a);
a.click();
a.remove();
setTimeout(() => setBusy(null), 3000);
};
return (
{open && (
{REPORT_MODES.map((m) => (
))}
)}
);
}
/* ---------- États ---------- */
export function EmptyBlock({ title }: { title: string }) {
return (
{title}
Pas encore mesuré — aucune donnée disponible pour cette période.
);
}
export function Fraicheur({ updated, onRefresh }: { updated: string; onRefresh: () => void }) {
return (
Mis à jour le {new Date(updated).toLocaleString("fr-CA", { dateStyle: "medium", timeStyle: "short" })}
);
}