SPB Git
spboucher.ai

Repository Public

spbka-stats

Commit

Import initial ka-stats + Nav mobile v2 (panneau plein écran fixed)

Le repo de prod M1M32 n'était pas versionné (déployé par rsync) — import
initial dans le bare spbgit ka-stats.git, avec le standard KA Nav v2 2026-08-25 :
hamburger 44px + panneau position:fixed inset:0 construit dans buildHeader,
verrou de scroll, fermeture lien/✕/Escape (la nav scrollable passait en pleine
largeur sous 768px).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
simon-pierre boucher committed · Aug 25, 2026
19 changed files +3,314 −0 Browse files
19 changed files
Load all 19 files Unified Split
added .gitignore +4 −0
@@ -0,0 +1,4 @@
1+data/cache.json
2+node_modules/
3+.DS_Store
4+*.log
added README.md +46 −0
@@ -0,0 +1,46 @@
1+# Ka·Stats — l'explorateur de statistiques du Québec
2+
3+**www.ka-stats.com** · Un service **Groupe KA**
4+
5+Observatoire de données de l'écosystème : agrège en direct les dashboards
6+`GET /api/stats/dashboard` (contrat **ka-stats v2**) des 12 plateformes
7+publiques (Lou·Ka, Immo·Ka, Vrai-Prix, Auto·Ka, Job·Ka, Food·Ka, Resto·Ka,
8+Fabri·Ka, Sorti·Ka, Créa·Ka, Trouve·Ka, API·Ka) et les rend explorables :
9+
10+- **Vue d'ensemble** — pouls de l'écosystème, grille des plateformes, prix du
11+ Québec en direct, records.
12+- **/site/:id** — rendu générique et complet du contrat v2 : KPI + sparklines,
13+ jauges, séries (crosshair + infobulles), multi-courbes (motifs de trait),
14+ empilées, anneaux, histogrammes, géo, heatmaps calendrier & horaire,
15+ tableaux triables/filtrables/paginés, records + liens vers les 5 rapports
16+ PDF de la plateforme.
17+- **/indicateurs** — les chiffres du Québec par thème (habitation, mobilité,
18+ emploi, consommation, culture, infrastructure).
19+- **/comparer** — jusqu'à 4 plateformes sur un seul axe, indice base 100.
20+- **/palmares** — records agrégés + classement de croissance.
21+
22+## Architecture
23+
24+- `server.mjs` — Node **zéro dépendance** : statique + `/api/sites`,
25+ `/api/overview`, `/api/dashboard/:id` (proxy agrégateur, cache mémoire +
26+ disque 10 min, *stale-while-error* : satellite down ⇒ dernière bonne copie).
27+ Enveloppe `{success,data}` d'API·Ka dépliée automatiquement.
28+- `public/charts.js` — **QCharts**, graphiques SVG vanilla conformes au
29+ design system ka-ui + règles dataviz (marques fines, gaps de surface,
30+ grilles hairline, légende dès 2 séries, vue tableau jumelle sur chaque
31+ graphique, palette catégorielle validée en ordre fixe, rampes mono-teinte).
32+- `public/app.js` — SPA vanilla, routeur History API, sélecteur de période
33+ global (auj/7j/30j/3m/6m/12m/année/tout + plage libre) relayé aux
34+ satellites.
35+- Design system : `tokens.css` de ka-ui vendorisé + accent Ka·Stats
36+ **#095797** (bleu Québec).
37+
38+## Exploitation
39+
40+```bash
41+node server.mjs 8140 # healthcheck : /healthz
42+```
43+
44+Déployé sur **M1M32** (`~/apps/ka-stats`) sous PM2 (`ka-stats` +
45+`ka-stats-ngrok` → https://www.ka-stats.com). Registre :
46+`~/Desktop/cluster-skill/cluster-deployments.json`.
added package.json +10 −0
@@ -0,0 +1,10 @@
1+{
2+ "name": "ka-stats",
3+ "version": "1.0.0",
4+ "description": "Ka·Stats — l'explorateur de statistiques du Québec (Groupe KA). Agrège les dashboards ka-stats v2 des 12 plateformes. Zéro dépendance.",
5+ "author": "Simon-Pierre Boucher <contact@spboucher.ai>",
6+ "type": "module",
7+ "scripts": {
8+ "start": "node server.mjs 8140"
9+ }
10+}
added public/app.js +1131 −0
@@ -0,0 +1,1131 @@
1+/* -----------------------------------------------------------------------------
2+ Auteur : Simon-Pierre Boucher — contact@spboucher.ai
3+ Fichier : ka-stats/public/app.js
4+ Desc. : Ka·Stats — l'explorateur de statistiques du Québec (Groupe KA).
5+ SPA vanilla : routeur (History API), sélecteur de période global
6+ (une seule rangée au-dessus du contenu, s'applique à tout),
7+ 5 vues : Vue d'ensemble · Plateforme (rendu générique du contrat
8+ ka-stats v2) · Indicateurs · Comparateur · Palmarès.
9+----------------------------------------------------------------------------- */
10+"use strict";
11+
12+const Q = QCharts;
13+const $app = document.getElementById("app");
14+const state = {
15+ period: localStorage.getItem("qcstats_period") || "30j",
16+ from: "", to: "",
17+ sites: [], siteById: {},
18+};
19+const PERIOD_LABELS = { auj: "Aujourd'hui", "7j": "7 jours", "30j": "30 jours", "3m": "3 mois", "6m": "6 mois", "12m": "12 mois", annee: "Année en cours", tout: "Tout" };
20+const THEMES = [
21+ { id: "habitation", label: "Habitation", desc: "Loyers, propriétés à vendre et valeur foncière — le marché de l'habitation au complet." },
22+ { id: "mobilite", label: "Mobilité", desc: "Le marché des voitures usagées du Québec." },
23+ { id: "emploi", label: "Emploi", desc: "Les offres des employeurs québécois et leurs salaires affichés." },
24+ { id: "consommation", label: "Consommation", desc: "Épicerie, restos et produits fabriqués au Québec." },
25+ { id: "culture", label: "Culture & découverte", desc: "Sorties, créateurs d'ici et web québécois." },
26+ { id: "infrastructure", label: "Infrastructure", desc: "La donnée de l'écosystème, servie par API." },
27+];
28+
29+/* ---------- réseau (cache client léger) ---------- */
30+const memo = new Map();
31+async function getJSON(url) {
32+ if (memo.has(url)) {
33+ const m = memo.get(url);
34+ if (Date.now() - m.at < 5 * 60 * 1000) return m.data;
35+ }
36+ const r = await fetch(url);
37+ if (!r.ok) throw new Error("HTTP " + r.status);
38+ const data = await r.json();
39+ memo.set(url, { at: Date.now(), data });
40+ return data;
41+}
42+function periodQS() {
43+ let qs = "period=" + encodeURIComponent(state.period);
44+ if (state.from && state.to) qs += `&from=${state.from}&to=${state.to}`;
45+ return qs;
46+}
47+const apiOverview = () => getJSON("/api/overview?" + periodQS());
48+const apiDash = (id) => getJSON("/api/dashboard/" + id + "?" + periodQS());
49+const apiCatalog = () => getJSON("/api/catalog?" + periodQS());
50+const apiMetric = (ref) => getJSON("/api/metric?ref=" + encodeURIComponent(ref) + "&" + periodQS());
51+
52+/* ---------- helpers dom ---------- */
53+const el = Q.el;
54+function link(href, cls, text) {
55+ const a = el("a", cls, text);
56+ a.href = href;
57+ a.dataset.link = "1";
58+ return a;
59+}
60+function section(title, kicker) {
61+ const s = el("section", "block");
62+ if (kicker) s.appendChild(el("div", "kicker", kicker));
63+ if (title) s.appendChild(el("h2", null, title));
64+ return s;
65+}
66+function siteChip(site) {
67+ const c = el("span", "site-chip");
68+ const dot = el("span", "site-dot");
69+ dot.style.background = site.accent;
70+ c.appendChild(dot);
71+ c.appendChild(el("span", null, site.wordmark));
72+ return c;
73+}
74+function setAccent(node, site) {
75+ node.style.setProperty("--accent", site.accent);
76+ node.style.setProperty("--accent-soft", site.accentSoft);
77+ node.style.setProperty("--accent-deep", site.accentDeep);
78+ node.style.setProperty("--on-accent", site.onAccent);
79+}
80+function updatedLine(iso, stale) {
81+ const d = iso ? new Date(iso) : null;
82+ const txt = d ? "Mis à jour le " + d.toLocaleString("fr-CA", { day: "numeric", month: "long", hour: "2-digit", minute: "2-digit" }) : "";
83+ return el("span", "klabel fresh" + (stale ? " stale" : ""), txt + (stale ? " · copie en cache" : ""));
84+}
85+
86+/* ---------- sélecteur de période (une rangée, au-dessus de tout) ---------- */
87+function periodBar() {
88+ const bar = el("div", "period-bar");
89+ const inner = el("div", "container period-inner");
90+ inner.appendChild(el("span", "klabel", "Période"));
91+ const row = el("div", "period-row");
92+ for (const [id, label] of Object.entries(PERIOD_LABELS)) {
93+ const b = el("button", "pill" + (state.period === id && !state.from ? " active" : ""), label);
94+ b.addEventListener("click", () => {
95+ state.period = id; state.from = ""; state.to = "";
96+ localStorage.setItem("qcstats_period", id);
97+ render();
98+ });
99+ row.appendChild(b);
100+ }
101+ // plage personnalisée
102+ const custom = el("span", "period-custom");
103+ const f = el("input", "input date-in"); f.type = "date"; f.value = state.from;
104+ const t = el("input", "input date-in"); t.type = "date"; t.value = state.to;
105+ const go = el("button", "pill", "Appliquer");
106+ go.addEventListener("click", () => {
107+ if (f.value && t.value) { state.from = f.value; state.to = t.value; render(); }
108+ });
109+ custom.appendChild(el("span", "klabel", "· personnalisé : du"));
110+ custom.appendChild(f);
111+ custom.appendChild(el("span", "klabel", "au"));
112+ custom.appendChild(t);
113+ custom.appendChild(go);
114+ row.appendChild(custom);
115+ inner.appendChild(row);
116+ bar.appendChild(inner);
117+ return bar;
118+}
119+
120+/* ---------- cartes de graphique commutables + outils (CSV/PNG/Studio) ---------- */
121+function studioHrefFor(refs) {
122+ return "/studio?c=" + encodeURIComponent(JSON.stringify({ refs, transform: "brut", combine: "aucune", kind: "line" }));
123+}
124+function timeSeriesCard(siteId, s, stroke) {
125+ const initial = s.kind === "bar" ? "bar" : s.kind === "area" ? "area" : "line";
126+ const rows = (s.points || []).map((p) => [Q.fmtDateFull(p.t), p.v]);
127+ return Q.switchableChart({
128+ kinds: [{ id: "line", label: "Ligne" }, { id: "area", label: "Aire" }, { id: "bar", label: "Barres" }],
129+ initial,
130+ csv: { name: `ka-stats_${siteId}_${s.id}`, columns: ["Date", s.title], rows },
131+ pngName: `ka-stats_${siteId}_${s.id}`,
132+ studioHref: studioHrefFor([`${siteId}|series|${s.id}`]),
133+ render(k) {
134+ if (k === "bar") return Q.vBarChart({ title: s.title, unit: s.unit, points: s.points, color: stroke });
135+ const series = [{ label: s.title, color: stroke, points: s.points }];
136+ if (s.compare && s.compare.length) series.push({ label: "Période précédente", color: stroke, dash: "7 4", faded: true, noArea: true, points: s.compare.map((p, i) => ({ t: (s.points[i] || {}).t || p.t, v: p.v })) });
137+ return Q.lineChart({ title: s.title, unit: s.unit, series, area: k === "area" });
138+ },
139+ });
140+}
141+function multiSeriesCard(siteId, m) {
142+ const subs = (m.series || []).slice(0, 4);
143+ const ts = [...new Set(subs.flatMap((s) => (s.points || []).map((p) => p.t)))].sort();
144+ const mapsL = subs.map((s) => new Map((s.points || []).map((p) => [p.t, p.v])));
145+ return Q.switchableChart({
146+ csv: { name: `ka-stats_${siteId}_${m.id}`, columns: ["Date", ...subs.map((s) => s.label)], rows: ts.map((t) => [Q.fmtDateFull(t), ...mapsL.map((mp) => mp.get(t) ?? "")]) },
147+ pngName: `ka-stats_${siteId}_${m.id}`,
148+ studioHref: studioHrefFor(subs.map((_, i) => `${siteId}|multi|${m.id}|${i}`)),
149+ render() {
150+ const series = subs.map((s, i) => ({ label: s.label, color: Q.CAT[i], dash: Q.DASHES[i], points: s.points || [] }));
151+ return Q.lineChart({ title: m.title, unit: m.unit, series, summary: false });
152+ },
153+ });
154+}
155+function breakdownCard(siteId, b, stroke) {
156+ return Q.switchableChart({
157+ kinds: [{ id: "bars", label: "Barres" }, { id: "donut", label: "Anneau" }],
158+ initial: b.kind === "donut" ? "donut" : "bars",
159+ csv: { name: `ka-stats_${siteId}_${b.id}`, columns: ["Catégorie", b.unit || "Valeur"], rows: (b.items || []).map((it) => [it.label, it.value]) },
160+ pngName: `ka-stats_${siteId}_${b.id}`,
161+ render(k) {
162+ return k === "donut" ? Q.donut({ title: b.title, unit: b.unit, items: b.items }) : Q.hBarChart({ title: b.title, unit: b.unit, items: b.items, color: stroke });
163+ },
164+ });
165+}
166+
167+/* ================================================================
168+ VUE D'ENSEMBLE
169+ ================================================================ */
170+async function pageHome(root) {
171+ document.title = "Ka·Stats — L'explorateur de statistiques du Québec";
172+ const ov = await apiOverview();
173+
174+ // — héros —
175+ const hero = el("header", "hero");
176+ const hc = el("div", "container");
177+ hc.appendChild(el("div", "kicker", "Groupe KA · Observatoire de données"));
178+ const h1 = el("h1");
179+ h1.appendChild(document.createTextNode("L'explorateur de "));
180+ h1.appendChild(el("span", "hl", "statistiques"));
181+ h1.appendChild(document.createTextNode(" du Québec"));
182+ hc.appendChild(h1);
183+ hc.appendChild(el("p", "lead", "Loyers, propriétés, autos, emplois, épicerie, restos, sorties, créateurs — les chiffres vivants des " + ov.totals.sites + " plateformes du Groupe KA, agrégés en un seul tableau de bord."));
184+ const heroFig = el("div", "hero-figure");
185+ heroFig.appendChild(el("div", "hero-num", Q.fmtNum(ov.totals.items)));
186+ heroFig.appendChild(el("div", "hero-sub", "éléments suivis en direct — " + PERIOD_LABELS[state.period].toLowerCase()));
187+ hc.appendChild(heroFig);
188+ const chips = el("div", "hero-chips");
189+ chips.appendChild(el("span", "chip chip-accent", ov.totals.sitesLive + "/" + ov.totals.sites + " plateformes en ligne"));
190+ chips.appendChild(el("span", "chip", Q.fmtNum(ov.totals.charts) + " indicateurs & graphiques"));
191+ chips.appendChild(el("span", "chip", "Données 100 % réelles"));
192+ hc.appendChild(chips);
193+ const cta = el("div", "hero-cta");
194+ cta.appendChild(link("/studio", "btn btn-primary", "✦ Construire un indicateur sur mesure"));
195+ hc.appendChild(cta);
196+ hero.appendChild(hc);
197+ root.appendChild(hero);
198+
199+ const main = el("div", "container");
200+
201+ // — pouls de l'écosystème —
202+ const pulse = section("Le pouls de l'écosystème", "Volume agrégé");
203+ pulse.appendChild(el("p", "sect-note", "Somme quotidienne des indicateurs principaux des " + ov.totals.sites + " plateformes (annonces, produits, offres, événements, créateurs, pages…)."));
204+ if (ov.totals.spark.length > 1) {
205+ const pts = ov.totals.spark;
206+ pulse.appendChild(Q.switchableChart({
207+ kinds: [{ id: "line", label: "Ligne" }, { id: "area", label: "Aire" }, { id: "bar", label: "Barres" }],
208+ initial: "area",
209+ csv: { name: "ka-stats_ecosysteme", columns: ["Date", "Éléments suivis"], rows: pts.map((p) => [Q.fmtDateFull(p.t), p.v]) },
210+ pngName: "ka-stats_ecosysteme",
211+ render(k) {
212+ if (k === "bar") return Q.vBarChart({ title: "Éléments suivis par jour, toutes plateformes", unit: "éléments", points: pts, color: ACCENT.stroke });
213+ return Q.lineChart({
214+ title: "Éléments suivis par jour, toutes plateformes", unit: "éléments",
215+ series: [{ label: "Écosystème Groupe KA", color: ACCENT.stroke, points: pts }],
216+ area: k === "area", baselineZero: true,
217+ });
218+ },
219+ }));
220+ }
221+ main.appendChild(pulse);
222+
223+ // — grille des plateformes —
224+ const grid = section("Les " + ov.totals.sites + " plateformes", "Explorer");
225+ const cards = el("div", "site-grid");
226+ for (const s of ov.sites) {
227+ const meta = state.siteById[s.id];
228+ const card = el("article", "site-card card card-hover");
229+ setAccent(card, meta);
230+ const band = el("div", "site-band");
231+ band.appendChild(el("span", "site-wordmark", meta.wordmark));
232+ band.appendChild(el("span", "site-tagline", meta.tagline));
233+ card.appendChild(band);
234+ const body = el("div", "site-body");
235+ if (s.ok && s.primary) {
236+ const prim = el("div", "site-primary");
237+ prim.appendChild(el("div", "klabel", s.primary.label));
238+ const v = el("div", "site-primary-val", Q.fmtNum(s.primary.value, s.primary.unit));
239+ prim.appendChild(v);
240+ if (typeof s.primary.delta_pct === "number") {
241+ prim.appendChild(el("span", "viz-delta " + (s.primary.delta_pct >= 0 ? "up" : "down"), (s.primary.delta_pct >= 0 ? "▲ " : "▼ ") + Math.abs(s.primary.delta_pct).toLocaleString("fr-CA") + " %"));
242+ }
243+ body.appendChild(prim);
244+ if (s.spark && s.spark.length > 2) {
245+ const sp = el("div", "site-spark");
246+ sp.appendChild(Q.sparkline(s.spark, Q.strokeFor(meta.accent, meta.accentDeep), 220, 44));
247+ body.appendChild(sp);
248+ }
249+ const minis = el("div", "site-minis");
250+ for (const k of s.kpis.slice(1, 4)) {
251+ const mi = el("div", "site-mini");
252+ mi.appendChild(el("b", null, Q.fmtNum(k.value, k.unit)));
253+ mi.appendChild(el("span", "klabel", k.label.length > 30 ? k.label.slice(0, 29) + "…" : k.label));
254+ minis.appendChild(mi);
255+ }
256+ body.appendChild(minis);
257+ } else {
258+ body.appendChild(el("div", "viz-empty", "Plateforme momentanément injoignable"));
259+ }
260+ const foot = el("div", "site-foot");
261+ foot.appendChild(link("/site/" + s.id, "btn btn-primary site-btn", "Explorer les stats"));
262+ const ext = el("a", "btn btn-ghost site-btn", "Visiter");
263+ ext.href = "https://" + meta.domain;
264+ ext.target = "_blank"; ext.rel = "noopener";
265+ foot.appendChild(ext);
266+ card.appendChild(body);
267+ card.appendChild(foot);
268+ cards.appendChild(card);
269+ }
270+ grid.appendChild(cards);
271+ main.appendChild(grid);
272+
273+ // — indicateurs en dollars —
274+ if (ov.indicators.length) {
275+ const ind = section("Les prix du Québec, en direct", "Indicateurs");
276+ const strip = el("div", "ind-grid");
277+ for (const it of ov.indicators.slice(0, 12)) {
278+ const meta = state.siteById[it.site];
279+ const c = el("div", "ind-card card");
280+ setAccent(c, meta);
281+ c.appendChild(siteChip(meta));
282+ c.appendChild(el("div", "klabel", it.label));
283+ c.appendChild(el("div", "ind-val", Q.fmtNum(it.value, it.unit)));
284+ if (typeof it.delta_pct === "number") c.appendChild(el("span", "viz-delta " + (it.delta_pct >= 0 ? "up" : "down"), (it.delta_pct >= 0 ? "▲ " : "▼ ") + Math.abs(it.delta_pct).toLocaleString("fr-CA") + " %"));
285+ if (it.spark && it.spark.length > 2) c.appendChild(Q.sparkline(it.spark, Q.strokeFor(meta.accent, meta.accentDeep), 150, 30));
286+ strip.appendChild(c);
287+ }
288+ ind.appendChild(strip);
289+ const more = el("div", "sect-more");
290+ more.appendChild(link("/indicateurs", "btn", "Tous les indicateurs →"));
291+ ind.appendChild(more);
292+ main.appendChild(ind);
293+ }
294+
295+ // — records —
296+ if (ov.records.length) {
297+ const rec = section("Records & faits marquants", "Palmarès");
298+ rec.appendChild(recordsGrid(ov.records.slice(0, 9)));
299+ const more = el("div", "sect-more");
300+ more.appendChild(link("/palmares", "btn", "Le palmarès complet →"));
301+ rec.appendChild(more);
302+ main.appendChild(rec);
303+ }
304+
305+ root.appendChild(main);
306+}
307+
308+function recordsGrid(records) {
309+ const g = el("div", "rec-grid");
310+ for (const r of records) {
311+ const meta = state.siteById[r.site];
312+ const c = el("div", "rec-card card");
313+ if (meta) { setAccent(c, meta); c.appendChild(siteChip(meta)); }
314+ c.appendChild(el("div", "rec-val", String(r.value ?? "—")));
315+ c.appendChild(el("div", "rec-label", r.label || ""));
316+ if (r.date) c.appendChild(el("div", "klabel", Q.fmtDateFull(r.date)));
317+ g.appendChild(c);
318+ }
319+ return g;
320+}
321+
322+/* ================================================================
323+ PAGE PLATEFORME — rendu générique du contrat ka-stats v2 (ordre SPEC §1)
324+ ================================================================ */
325+async function pageSite(root, id) {
326+ const meta = state.siteById[id];
327+ if (!meta) { root.appendChild(el("div", "container viz-empty", "Plateforme inconnue.")); return; }
328+ document.title = meta.wordmark + " — Ka·Stats";
329+ const res = await apiDash(id);
330+ const wrap = el("div", "site-page");
331+ setAccent(wrap, meta);
332+
333+ const head = el("header", "site-head");
334+ const hc = el("div", "container");
335+ const crumb = el("div", "crumb");
336+ crumb.appendChild(link("/", "crumb-link", "← Toutes les plateformes"));
337+ hc.appendChild(crumb);
338+ const row = el("div", "site-head-row");
339+ const idb = el("div");
340+ idb.appendChild(el("h1", "site-h1", meta.wordmark));
341+ idb.appendChild(el("p", "lead", meta.tagline));
342+ row.appendChild(idb);
343+ const act = el("div", "site-actions");
344+ const visit = el("a", "btn", "Visiter " + meta.wordmark + " ↗");
345+ visit.href = "https://" + meta.domain; visit.target = "_blank"; visit.rel = "noopener";
346+ act.appendChild(visit);
347+ act.appendChild(pdfMenu(meta));
348+ row.appendChild(act);
349+ hc.appendChild(row);
350+ head.appendChild(hc);
351+ wrap.appendChild(head);
352+
353+ const main = el("div", "container");
354+ if (!res.ok || !res.data) {
355+ main.appendChild(el("div", "viz-empty big", "Plateforme momentanément injoignable — " + (res.error || "")));
356+ wrap.appendChild(main);
357+ root.appendChild(wrap);
358+ return;
359+ }
360+ const d = res.data;
361+ const fresh = el("div", "fresh-row");
362+ fresh.appendChild(updatedLine(d.updated, res.stale));
363+ if (d.period && d.period.from) fresh.appendChild(el("span", "klabel", "· du " + Q.fmtDateFull(d.period.from) + " au " + Q.fmtDateFull(d.period.to)));
364+ main.appendChild(fresh);
365+
366+ const stroke = Q.strokeFor(meta.accent, meta.accentDeep);
367+
368+ // 1. bandeau KPI
369+ if (d.kpis && d.kpis.length) {
370+ const g = el("div", "kpi-grid");
371+ for (const k of d.kpis) g.appendChild(Q.kpiCard(k, meta.accent, meta.accentDeep));
372+ main.appendChild(g);
373+ }
374+ // 3. jauges
375+ if (d.gauges && d.gauges.length) {
376+ const g = el("div", "gauge-grid");
377+ for (const ga of d.gauges) g.appendChild(Q.gauge({ label: ga.label, value: ga.value, max: ga.max || 100, unit: ga.unit || "", color: stroke, track: Q.mix("#ffffff", stroke, 0.16) }));
378+ main.appendChild(g);
379+ }
380+ // 4. évolutions
381+ if (d.series && d.series.length) {
382+ const sec = section("Évolution", "Séries temporelles");
383+ for (const s of d.series) {
384+ if (!s.points || !s.points.length) continue;
385+ sec.appendChild(timeSeriesCard(id, s, stroke));
386+ }
387+ main.appendChild(sec);
388+ }
389+ // multi-courbes ≤ 4 : palette catégorielle + motifs de trait distincts
390+ if (d.multiseries && d.multiseries.length) {
391+ const sec = section("Comparaisons", "Multi-courbes");
392+ for (const m of d.multiseries) {
393+ if ((m.series || []).some((s) => s.points && s.points.length)) sec.appendChild(multiSeriesCard(id, m));
394+ }
395+ main.appendChild(sec);
396+ }
397+ if (d.stacked && d.stacked.length) {
398+ const sec = section("Composition dans le temps", "Empilées");
399+ for (const st of d.stacked) sec.appendChild(Q.stackedBar({ title: st.title, unit: st.unit, keys: st.keys, points: st.points }));
400+ main.appendChild(sec);
401+ }
402+ // 5-6. répartitions + distributions + géo
403+ const rep = [];
404+ for (const b of d.breakdowns || []) {
405+ if (!b.items || !b.items.length) continue;
406+ rep.push(breakdownCard(id, b, stroke));
407+ }
408+ for (const dist of d.distributions || []) {
409+ if (!dist.bins || !dist.bins.length) continue;
410+ rep.push(Q.vBarChart({ title: dist.title, unit: dist.unit, points: dist.bins.map((b) => ({ label: b.label, v: b.value })), color: stroke, isDate: false, rotateLabels: true }));
411+ }
412+ if (d.geo && d.geo.items && d.geo.items.length) rep.push(Q.hBarChart({ title: d.geo.title || "Répartition géographique", items: d.geo.items, color: stroke, max: 16 }));
413+ if (rep.length) {
414+ const sec = section("Répartitions", "Structure");
415+ const g = el("div", "two-col");
416+ rep.forEach((c) => g.appendChild(c));
417+ sec.appendChild(g);
418+ main.appendChild(sec);
419+ }
420+ // 7. calendriers
421+ if ((d.heatmap && d.heatmap.cells && d.heatmap.cells.length) || (d.hourly && d.hourly.cells && d.hourly.cells.length)) {
422+ const sec = section("Rythmes d'activité", "Calendriers");
423+ if (d.heatmap && d.heatmap.cells && d.heatmap.cells.length) sec.appendChild(Q.calendarHeatmap({ title: d.heatmap.title || "Activité (26 semaines)", cells: d.heatmap.cells, accent: stroke }));
424+ if (d.hourly && d.hourly.cells && d.hourly.cells.length) sec.appendChild(Q.hourHeatmap({ title: d.hourly.title || "Activité par heure (7 j × 24 h)", cells: d.hourly.cells, accent: stroke }));
425+ main.appendChild(sec);
426+ }
427+ // 8. tableaux
428+ if (d.tables && d.tables.length) {
429+ const sec = section("Tableaux détaillés", "Données");
430+ for (const t of d.tables) sec.appendChild(Q.dataTable({ title: t.title, columns: t.columns, rows: t.rows }));
431+ main.appendChild(sec);
432+ }
433+ // 9. records
434+ if (d.records && d.records.length) {
435+ const sec = section("Records & faits marquants", "Palmarès " + meta.wordmark);
436+ sec.appendChild(recordsGrid(d.records.map((r) => ({ ...r, site: id }))));
437+ main.appendChild(sec);
438+ }
439+ wrap.appendChild(main);
440+ root.appendChild(wrap);
441+}
442+
443+function pdfMenu(meta) {
444+ const det = el("details", "pdf-menu");
445+ det.appendChild(el("summary", "btn btn-accent", "Rapport PDF ▾"));
446+ const box = el("div", "ka-menu pdf-box");
447+ const modes = [["complet", "Rapport complet"], ["synthese", "Synthèse"], ["tendances", "Tendances"], ["repartitions", "Répartitions"], ["donnees", "Données (long)"]];
448+ for (const [m, label] of modes) {
449+ const a = el("a", null, label);
450+ a.href = `https://${meta.domain}/api/stats/report?${periodQS()}&mode=${m}`;
451+ a.target = "_blank"; a.rel = "noopener";
452+ box.appendChild(a);
453+ }
454+ det.appendChild(box);
455+ document.addEventListener("click", (e) => { if (!det.contains(e.target)) det.open = false; });
456+ return det;
457+}
458+
459+/* ================================================================
460+ INDICATEURS — les chiffres du Québec par thème
461+ ================================================================ */
462+async function pageIndicateurs(root) {
463+ document.title = "Indicateurs du Québec — Ka·Stats";
464+ const head = el("header", "page-head");
465+ const hc = el("div", "container");
466+ hc.appendChild(el("div", "kicker", "Indicateurs"));
467+ const h1 = el("h1");
468+ h1.appendChild(document.createTextNode("Les chiffres du "));
469+ h1.appendChild(el("span", "hl", "Québec"));
470+ hc.appendChild(h1);
471+ hc.appendChild(el("p", "lead", "Prix, salaires, loyers et volumes, extraits en direct des données des plateformes Groupe KA — regroupés par grand thème."));
472+ head.appendChild(hc);
473+ root.appendChild(head);
474+
475+ const dashes = await Promise.all(state.sites.map((s) => apiDash(s.id).catch(() => null)));
476+ const byId = {};
477+ state.sites.forEach((s, i) => (byId[s.id] = dashes[i]));
478+ const main = el("div", "container");
479+ const PRICE_RE = /prix|loyer|salaire|valeur|coût|cout|rabais|\$/i;
480+
481+ for (const theme of THEMES) {
482+ const members = state.sites.filter((s) => s.theme === theme.id);
483+ if (!members.length) continue;
484+ const sec = section(theme.label, theme.desc.split("—")[0]);
485+ sec.appendChild(el("p", "sect-note", theme.desc));
486+ const kpiRow = el("div", "ind-grid");
487+ let any = false;
488+ for (const m of members) {
489+ const r = byId[m.id];
490+ if (!r || !r.ok || !r.data) continue;
491+ const kpis = (r.data.kpis || []).filter((k) => PRICE_RE.test((k.unit || "") + " " + k.label)).slice(0, 4);
492+ const shown = kpis.length ? kpis : (r.data.kpis || []).slice(0, 2);
493+ for (const k of shown) {
494+ const c = el("div", "ind-card card");
495+ setAccent(c, m);
496+ c.appendChild(siteChip(m));
497+ c.appendChild(el("div", "klabel", k.label));
498+ c.appendChild(el("div", "ind-val", Q.fmtNum(k.value, k.unit)));
499+ if (typeof k.delta_pct === "number") c.appendChild(el("span", "viz-delta " + (k.delta_pct >= 0 ? "up" : "down"), (k.delta_pct >= 0 ? "▲ " : "▼ ") + Math.abs(k.delta_pct).toLocaleString("fr-CA") + " %"));
500+ if (k.spark && k.spark.length > 2) c.appendChild(Q.sparkline(k.spark, Q.strokeFor(m.accent, m.accentDeep), 150, 30));
501+ kpiRow.appendChild(c);
502+ any = true;
503+ }
504+ }
505+ if (any) sec.appendChild(kpiRow);
506+ // distributions & multiséries « prix » du thème
507+ const charts = el("div", "two-col");
508+ let anyCharts = false;
509+ for (const m of members) {
510+ const r = byId[m.id];
511+ if (!r || !r.ok || !r.data) continue;
512+ const stroke = Q.strokeFor(m.accent, m.accentDeep);
513+ const dist = (r.data.distributions || []).find((x) => PRICE_RE.test(x.title || "")) || (r.data.distributions || [])[0];
514+ if (dist && dist.bins && dist.bins.length) {
515+ charts.appendChild(Q.vBarChart({ title: m.wordmark + " — " + dist.title, unit: dist.unit, points: dist.bins.map((b) => ({ label: b.label, v: b.value })), color: stroke, isDate: false, rotateLabels: true }));
516+ anyCharts = true;
517+ }
518+ const ms = (r.data.multiseries || []).find((x) => PRICE_RE.test(x.title || ""));
519+ if (ms && ms.series && ms.series.length) {
520+ const series = ms.series.slice(0, 4).map((s, i) => ({ label: s.label, color: Q.CAT[i], dash: Q.DASHES[i], points: s.points || [] }));
521+ charts.appendChild(Q.lineChart({ title: m.wordmark + " — " + ms.title, unit: ms.unit, series, summary: false }));
522+ anyCharts = true;
523+ }
524+ }
525+ if (anyCharts) sec.appendChild(charts);
526+ if (any || anyCharts) main.appendChild(sec);
527+ }
528+ root.appendChild(main);
529+}
530+
531+/* ================================================================
532+ COMPARATEUR — jusqu'à 4 plateformes, indice base 100 (un seul axe)
533+ ================================================================ */
534+const cmpState = { sel: ["lou-ka", "trouve-ka", "food-ka", "crea-ka"], mode: "indice" };
535+async function pageComparer(root) {
536+ document.title = "Comparateur — Ka·Stats";
537+ const head = el("header", "page-head");
538+ const hc = el("div", "container");
539+ hc.appendChild(el("div", "kicker", "Comparateur"));
540+ const h1 = el("h1");
541+ h1.appendChild(el("span", "hl", "Comparer"));
542+ h1.appendChild(document.createTextNode(" les plateformes"));
543+ hc.appendChild(h1);
544+ hc.appendChild(el("p", "lead", "L'évolution de l'indicateur principal de chaque plateforme, sur un seul axe. En indice (base 100 = début de période), des univers différents deviennent comparables ; jamais de double échelle."));
545+ head.appendChild(hc);
546+ root.appendChild(head);
547+
548+ const ov = await apiOverview();
549+ const main = el("div", "container");
550+ const controls = el("div", "cmp-controls");
551+ const chipsRow = el("div", "cmp-chips");
552+ for (const s of state.sites) {
553+ const on = cmpState.sel.includes(s.id);
554+ const b = el("button", "pill site-pill" + (on ? " active" : ""), s.wordmark);
555+ if (on) { b.style.background = s.accent; b.style.color = s.onAccent; b.style.borderColor = s.accent; }
556+ b.addEventListener("click", () => {
557+ if (on) cmpState.sel = cmpState.sel.filter((x) => x !== s.id);
558+ else if (cmpState.sel.length < 4) cmpState.sel = [...cmpState.sel, s.id];
559+ render();
560+ });
561+ if (!on && cmpState.sel.length >= 4) { b.disabled = true; b.title = "Maximum 4 plateformes à la fois"; }
562+ chipsRow.appendChild(b);
563+ }
564+ controls.appendChild(chipsRow);
565+ const modeRow = el("div", "cmp-mode");
566+ for (const [m, label] of [["indice", "Indice (base 100)"], ["brut", "Valeurs brutes"]]) {
567+ const b = el("button", "pill" + (cmpState.mode === m ? " active" : ""), label);
568+ b.addEventListener("click", () => { cmpState.mode = m; render(); });
569+ modeRow.appendChild(b);
570+ }
571+ controls.appendChild(modeRow);
572+ main.appendChild(controls);
573+ if (cmpState.mode === "brut" && cmpState.sel.length > 1) {
574+ main.appendChild(el("p", "sect-note warn", "⚠ En valeurs brutes, les plateformes ont des unités différentes (annonces, produits, pages…) — l'indice base 100 est la lecture recommandée."));
575+ }
576+
577+ const chosen = ov.sites.filter((s) => cmpState.sel.includes(s.id) && s.ok && s.spark && s.spark.length > 1);
578+ if (!chosen.length) {
579+ main.appendChild(el("div", "viz-empty big", "Choisissez au moins une plateforme."));
580+ } else {
581+ const series = chosen.map((s, i) => {
582+ const meta = state.siteById[s.id];
583+ let pts = s.spark.filter((p) => typeof p.v === "number" && /^\d{4}-\d{2}-\d{2}/.test(String(p.t)));
584+ if (cmpState.mode === "indice") {
585+ const base = pts.find((p) => p.v > 0);
586+ if (base) pts = pts.map((p) => ({ t: p.t, v: Math.round((p.v / base.v) * 1000) / 10 }));
587+ }
588+ return { label: meta.wordmark + " — " + (s.primary ? s.primary.label : ""), color: Q.strokeFor(meta.accent, meta.accentDeep), dash: Q.DASHES[i], points: pts, noArea: true };
589+ });
590+ main.appendChild(Q.lineChart({
591+ title: cmpState.mode === "indice" ? "Croissance comparée (indice, base 100 = début de période)" : "Valeurs brutes (unités hétérogènes)",
592+ unit: cmpState.mode === "indice" ? "indice" : "",
593+ series, summary: false, height: 340,
594+ }));
595+ // cartes de croissance
596+ const growth = el("div", "ind-grid");
597+ for (const s of chosen) {
598+ const meta = state.siteById[s.id];
599+ const pts = s.spark.filter((p) => typeof p.v === "number" && p.v > 0 && /^\d{4}-\d{2}-\d{2}/.test(String(p.t)));
600+ if (pts.length < 2) continue;
601+ const pct = ((pts[pts.length - 1].v - pts[0].v) / pts[0].v) * 100;
602+ const c = el("div", "ind-card card");
603+ setAccent(c, meta);
604+ c.appendChild(siteChip(meta));
605+ c.appendChild(el("div", "klabel", "Croissance sur la période"));
606+ c.appendChild(el("div", "ind-val", (pct >= 0 ? "+" : "") + pct.toLocaleString("fr-CA", { maximumFractionDigits: 1 }) + " %"));
607+ c.appendChild(el("span", "klabel", Q.fmtNum(pts[0].v) + " → " + Q.fmtNum(pts[pts.length - 1].v)));
608+ growth.appendChild(c);
609+ }
610+ main.appendChild(growth);
611+ }
612+ root.appendChild(main);
613+}
614+
615+/* ================================================================
616+ PALMARÈS — records + croissances
617+ ================================================================ */
618+async function pagePalmares(root) {
619+ document.title = "Palmarès — Ka·Stats";
620+ const head = el("header", "page-head");
621+ const hc = el("div", "container");
622+ hc.appendChild(el("div", "kicker", "Palmarès"));
623+ const h1 = el("h1");
624+ h1.appendChild(document.createTextNode("Records & "));
625+ h1.appendChild(el("span", "hl", "faits marquants"));
626+ hc.appendChild(h1);
627+ hc.appendChild(el("p", "lead", "Les jours records, les plus fortes croissances et les faits saillants détectés dans les données de chaque plateforme."));
628+ head.appendChild(hc);
629+ root.appendChild(head);
630+
631+ const ov = await apiOverview();
632+ const main = el("div", "container");
633+
634+ // croissance par plateforme (une seule série ⇒ une seule couleur)
635+ const rows = [];
636+ for (const s of ov.sites) {
637+ if (!s.ok || !s.spark) continue;
638+ const pts = s.spark.filter((p) => typeof p.v === "number" && p.v > 0 && /^\d{4}-\d{2}-\d{2}/.test(String(p.t)));
639+ if (pts.length < 2) continue;
640+ rows.push({ label: state.siteById[s.id].wordmark, value: Math.round(((pts[pts.length - 1].v - pts[0].v) / pts[0].v) * 1000) / 10 });
641+ }
642+ rows.sort((a, b) => b.value - a.value);
643+ if (rows.length) {
644+ const sec = section("Croissance sur la période", "Classement");
645+ sec.appendChild(el("p", "sect-note", "Variation de l'indicateur principal de chaque plateforme entre le début et la fin de la période (%)."));
646+ sec.appendChild(Q.hBarChart({ title: "Croissance de l'indicateur principal", unit: "%", items: rows, color: ACCENT.stroke, max: 12 }));
647+ main.appendChild(sec);
648+ }
649+ if (ov.records.length) {
650+ const sec = section("Tous les records", "Faits marquants");
651+ sec.appendChild(recordsGrid(ov.records));
652+ main.appendChild(sec);
653+ }
654+ if (ov.indicators.length) {
655+ const sec = section("Tous les indicateurs en dollars", "Table");
656+ sec.appendChild(Q.dataTable({
657+ title: "Indicateurs de prix, toutes plateformes",
658+ columns: ["Plateforme", "Indicateur", "Valeur", "Δ %"],
659+ rows: ov.indicators.map((it) => [state.siteById[it.site].wordmark, it.label, Q.fmtNum(it.value, it.unit), typeof it.delta_pct === "number" ? it.delta_pct.toLocaleString("fr-CA") + " %" : "—"]),
660+ }));
661+ main.appendChild(sec);
662+ }
663+ root.appendChild(main);
664+}
665+
666+/* ================================================================
667+ STUDIO — constructeur d'indicateurs sur mesure
668+ ================================================================ */
669+const TRANSFORMS = [
670+ ["brut", "Valeurs brutes"], ["indice", "Indice 100"], ["variation", "Variation % (jour)"],
671+ ["mm7", "Moyenne mobile 7 j"], ["cumul", "Cumul"],
672+];
673+const COMBINES = [["aucune", "Séries séparées"], ["ratio", "A ÷ B"], ["diff", "A − B"], ["somme", "A + B"]];
674+const KINDS = [["line", "Ligne"], ["area", "Aire"], ["bar", "Barres"]];
675+const studio = { refs: [], transform: "brut", combine: "aucune", kind: "line", title: "", search: "", loadedC: null };
676+
677+function tfPoints(points, mode) {
678+ const pts = (points || []).filter((p) => typeof p.v === "number" && /^\d{4}-\d{2}-\d{2}/.test(String(p.t)));
679+ const r1 = (v) => Math.round(v * 10) / 10;
680+ if (mode === "indice") { const b = pts.find((p) => p.v); return b ? pts.map((p) => ({ t: p.t, v: r1((p.v / b.v) * 100) })) : pts; }
681+ if (mode === "variation") return pts.map((p, i) => (i && pts[i - 1].v ? { t: p.t, v: r1(((p.v - pts[i - 1].v) / Math.abs(pts[i - 1].v)) * 100) } : null)).filter(Boolean);
682+ if (mode === "mm7") return pts.map((p, i) => { const w = pts.slice(Math.max(0, i - 6), i + 1); return { t: p.t, v: Math.round((w.reduce((a, x) => a + x.v, 0) / w.length) * 100) / 100 }; });
683+ if (mode === "cumul") { let a = 0; return pts.map((p) => ({ t: p.t, v: (a += p.v) })); }
684+ return pts;
685+}
686+function combinePoints(A, B, op) {
687+ const mb = new Map(B.map((p) => [p.t, p.v]));
688+ const out = [];
689+ for (const p of A) {
690+ const b = mb.get(p.t);
691+ if (typeof b !== "number") continue;
692+ const v = op === "ratio" ? (b ? p.v / b : null) : op === "diff" ? p.v - b : p.v + b;
693+ if (v === null || !isFinite(v)) continue;
694+ out.push({ t: p.t, v: Math.round(v * 10000) / 10000 });
695+ }
696+ return out;
697+}
698+function studioSaved() { try { return JSON.parse(localStorage.getItem("kastats_studio") || "[]"); } catch { return []; } }
699+function studioStore(list) { localStorage.setItem("kastats_studio", JSON.stringify(list)); }
700+function studioCfg() { return { refs: studio.refs, transform: studio.transform, combine: studio.combine, kind: studio.kind, title: studio.title }; }
701+function studioShareUrl(cfg) { return location.origin + "/studio?c=" + encodeURIComponent(JSON.stringify(cfg)); }
702+
703+/* Construit les séries finales (fetch + combine + transform) d'une config. */
704+async function buildCustomSeries(cfg) {
705+ const metrics = (await Promise.all(cfg.refs.map((r) => apiMetric(r).catch(() => null)))).filter(Boolean);
706+ if (!metrics.length) return { series: [], unit: "" };
707+ let baseUnit = metrics[0].unit || "";
708+ let series;
709+ if (cfg.combine !== "aucune" && metrics.length === 2) {
710+ const pts = combinePoints(tfClean(metrics[0].points), tfClean(metrics[1].points), cfg.combine);
711+ const opLbl = cfg.combine === "ratio" ? "÷" : cfg.combine === "diff" ? "−" : "+";
712+ series = [{ label: cfg.title || `${metrics[0].label} ${opLbl} ${metrics[1].label}`, points: pts }];
713+ baseUnit = cfg.combine === "ratio" ? "ratio" : metrics[0].unit === metrics[1].unit ? baseUnit : "";
714+ } else {
715+ series = metrics.map((m) => ({ label: `${state.siteById[m.site] ? state.siteById[m.site].wordmark + " — " : ""}${m.label}`, points: m.points }));
716+ }
717+ series = series.map((s) => ({ ...s, points: tfPoints(s.points, cfg.transform) })).filter((s) => s.points.length > 1);
718+ const unit = cfg.transform === "indice" ? "indice" : cfg.transform === "variation" ? "%" : baseUnit;
719+ return { series, unit };
720+}
721+function tfClean(points) { return (points || []).filter((p) => typeof p.v === "number" && /^\d{4}-\d{2}-\d{2}/.test(String(p.t))); }
722+
723+/* Rend la carte finale d'un indicateur custom (avec commutateur + exports). */
724+function customChartCard(cfg, built, opts) {
725+ const { series, unit } = built;
726+ if (!series.length) return el("div", "viz-empty", "Aucune donnée pour cette configuration (métriques vides sur la période).");
727+ const colored = series.map((s, i) => ({ ...s, color: Q.CAT[i], dash: Q.DASHES[i], noArea: series.length > 1 }));
728+ const title = cfg.title || (opts && opts.fallbackTitle) || "Indicateur sur mesure";
729+ const ts = [...new Set(series.flatMap((s) => s.points.map((p) => p.t)))].sort();
730+ const mapsL = series.map((s) => new Map(s.points.map((p) => [p.t, p.v])));
731+ const kinds = series.length === 1 ? KINDS.map(([id, label]) => ({ id, label })) : KINDS.slice(0, 2).map(([id, label]) => ({ id, label }));
732+ return Q.switchableChart({
733+ kinds,
734+ initial: series.length > 1 && cfg.kind === "bar" ? "line" : cfg.kind,
735+ csv: { name: "ka-stats_studio", columns: ["Date", ...series.map((s) => s.label)], rows: ts.map((t) => [Q.fmtDateFull(t), ...mapsL.map((mp) => mp.get(t) ?? "")]) },
736+ pngName: "ka-stats_studio",
737+ render(k) {
738+ if (k === "bar" && series.length === 1) return Q.vBarChart({ title, unit, points: series[0].points, color: Q.CAT[0] });
739+ return Q.lineChart({ title, unit, series: colored, area: k === "area" && series.length === 1, summary: series.length === 1 });
740+ },
741+ });
742+}
743+
744+async function pageStudio(root) {
745+ document.title = "Studio d'indicateurs — Ka·Stats";
746+ // config passée par lien partagé (?c=…) — chargée une seule fois
747+ const cParam = new URLSearchParams(location.search).get("c");
748+ if (cParam && cParam !== studio.loadedC) {
749+ try {
750+ const cfg = JSON.parse(cParam);
751+ if (Array.isArray(cfg.refs)) {
752+ studio.refs = cfg.refs.slice(0, 4);
753+ studio.transform = TRANSFORMS.some(([id]) => id === cfg.transform) ? cfg.transform : "brut";
754+ studio.combine = COMBINES.some(([id]) => id === cfg.combine) ? cfg.combine : "aucune";
755+ studio.kind = KINDS.some(([id]) => id === cfg.kind) ? cfg.kind : "line";
756+ studio.title = typeof cfg.title === "string" ? cfg.title : "";
757+ }
758+ studio.loadedC = cParam;
759+ } catch { /* config invalide : ignorer */ }
760+ }
761+
762+ const head = el("header", "page-head");
763+ const hc = el("div", "container");
764+ hc.appendChild(el("div", "kicker", "Studio"));
765+ const h1 = el("h1");
766+ h1.appendChild(document.createTextNode("Construisez votre "));
767+ h1.appendChild(el("span", "hl", "indicateur"));
768+ hc.appendChild(h1);
769+ hc.appendChild(el("p", "lead", "Choisissez jusqu'à 4 métriques parmi toutes celles des 12 plateformes, appliquez une transformation (indice 100, variation, moyenne mobile, cumul) ou combinez-les (ratio, écart), choisissez le type de graphique — puis enregistrez ou partagez votre indicateur."));
770+ head.appendChild(hc);
771+ root.appendChild(head);
772+
773+ const main = el("div", "container");
774+ const cat = await apiCatalog();
775+
776+ /* ---- constructeur ---- */
777+ const builder = el("section", "studio card");
778+ const bIn = el("div", "studio-in");
779+
780+ // 1. sélection des métriques
781+ bIn.appendChild(el("div", "kicker", "1 · Métriques (max 4)"));
782+ const selRow = el("div", "studio-sel");
783+ studio.refs.forEach((ref, i) => {
784+ const meta = cat.metrics.find((m) => m.ref === ref);
785+ const chip = el("span", "studio-chip");
786+ const key = el("span", "viz-key-line");
787+ key.style.background = Q.CAT[i];
788+ if (Q.DASHES[i]) key.style.backgroundImage = `repeating-linear-gradient(90deg, ${Q.CAT[i]} 0 6px, #fff 6px 9px)`;
789+ chip.appendChild(key);
790+ chip.appendChild(el("span", null, meta ? `${meta.wordmark} — ${meta.label}` : ref));
791+ const x = el("button", "studio-x", "✕");
792+ x.type = "button";
793+ x.setAttribute("aria-label", "Retirer cette métrique");
794+ x.addEventListener("click", () => { studio.refs = studio.refs.filter((r) => r !== ref); render(); });
795+ chip.appendChild(x);
796+ selRow.appendChild(chip);
797+ });
798+ if (!studio.refs.length) selRow.appendChild(el("span", "klabel", "Aucune métrique choisie — cherchez ci-dessous."));
799+ bIn.appendChild(selRow);
800+
801+ const searchWrap = el("div", "studio-search");
802+ const input = el("input", "input");
803+ input.type = "search";
804+ input.placeholder = `Chercher parmi ${cat.count} métriques (ex. loyer, prix, salaire, Montréal…)`;
805+ input.value = studio.search;
806+ const results = el("div", "studio-results");
807+ function renderResults() {
808+ results.textContent = "";
809+ const q = input.value.trim().toLowerCase();
810+ studio.search = input.value;
811+ if (!q) { results.style.display = "none"; return; }
812+ const found = cat.metrics.filter((m) => (`${m.wordmark} ${m.label}`).toLowerCase().includes(q) && !studio.refs.includes(m.ref)).slice(0, 24);
813+ results.style.display = found.length ? "" : "none";
814+ for (const m of found) {
815+ const b = el("button", "studio-result");
816+ b.type = "button";
817+ const meta = state.siteById[m.site];
818+ const dot = el("span", "site-dot");
819+ if (meta) dot.style.background = meta.accent;
820+ b.appendChild(dot);
821+ b.appendChild(el("span", "studio-r-label", `${m.wordmark} — ${m.label}`));
822+ b.appendChild(el("span", "klabel", `${m.unit || ""} · ${m.n} pts`));
823+ b.disabled = studio.refs.length >= 4;
824+ b.addEventListener("click", () => {
825+ if (studio.refs.length < 4) { studio.refs = [...studio.refs, m.ref]; render(); }
826+ });
827+ results.appendChild(b);
828+ }
829+ }
830+ input.addEventListener("input", renderResults);
831+ searchWrap.appendChild(input);
832+ searchWrap.appendChild(results);
833+ bIn.appendChild(searchWrap);
834+
835+ // 2. transformation / combinaison / type
836+ const pillsRow = (kicker, entries, key, visible = true) => {
837+ if (!visible) return null;
838+ const box = el("div", "studio-opt");
839+ box.appendChild(el("div", "kicker", kicker));
840+ const row = el("div", "period-row");
841+ for (const [id, label] of entries) {
842+ const b = el("button", "pill" + (studio[key] === id ? " active" : ""), label);
843+ b.type = "button";
844+ b.addEventListener("click", () => { studio[key] = id; render(); });
845+ row.appendChild(b);
846+ }
847+ box.appendChild(row);
848+ return box;
849+ };
850+ const t = pillsRow("2 · Transformation", TRANSFORMS, "transform");
851+ if (t) bIn.appendChild(t);
852+ const c2 = pillsRow("3 · Combinaison (2 métriques)", COMBINES, "combine", studio.refs.length === 2);
853+ if (c2) bIn.appendChild(c2);
854+ const kindEntries = studio.refs.length > 1 && studio.combine === "aucune" ? KINDS.slice(0, 2) : KINDS;
855+ const k = pillsRow("Type de graphique", kindEntries, "kind");
856+ if (k) bIn.appendChild(k);
857+
858+ // titre + actions
859+ const titleRow = el("div", "studio-titlerow");
860+ const titleIn = el("input", "input");
861+ titleIn.placeholder = "Titre de l'indicateur (optionnel)";
862+ titleIn.value = studio.title;
863+ titleIn.addEventListener("change", () => { studio.title = titleIn.value.trim(); render(); });
864+ titleRow.appendChild(titleIn);
865+ const saveBtn = el("button", "btn btn-primary", "💾 Enregistrer");
866+ saveBtn.type = "button";
867+ saveBtn.disabled = !studio.refs.length;
868+ saveBtn.addEventListener("click", () => {
869+ studio.title = titleIn.value.trim();
870+ const list = studioSaved();
871+ list.unshift({ id: "ci" + Math.random().toString(36).slice(2, 8), created: new Date().toISOString(), cfg: studioCfg() });
872+ studioStore(list.slice(0, 30));
873+ render();
874+ });
875+ titleRow.appendChild(saveBtn);
876+ const shareBtn = el("button", "btn", "🔗 Copier le lien");
877+ shareBtn.type = "button";
878+ shareBtn.disabled = !studio.refs.length;
879+ shareBtn.addEventListener("click", async () => {
880+ studio.title = titleIn.value.trim();
881+ try { await navigator.clipboard.writeText(studioShareUrl(studioCfg())); shareBtn.textContent = "✓ Lien copié"; setTimeout(() => (shareBtn.textContent = "🔗 Copier le lien"), 1800); } catch { /* presse-papiers refusé */ }
882+ });
883+ titleRow.appendChild(shareBtn);
884+ bIn.appendChild(titleRow);
885+ builder.appendChild(bIn);
886+ main.appendChild(builder);
887+
888+ // aperçu live
889+ if (studio.refs.length) {
890+ const prev = section("Aperçu", "Live");
891+ const built = await buildCustomSeries(studioCfg());
892+ prev.appendChild(customChartCard(studioCfg(), built, { fallbackTitle: "Aperçu de l'indicateur" }));
893+ main.appendChild(prev);
894+ }
895+
896+ /* ---- mes indicateurs enregistrés ---- */
897+ const saved = studioSaved();
898+ if (saved.length) {
899+ const sec = section("Mes indicateurs", "Enregistrés");
900+ sec.appendChild(el("p", "sect-note", "Sauvegardés dans ce navigateur, recalculés en direct sur la période choisie."));
901+ for (const item of saved) {
902+ const box = el("div", "studio-saveditem");
903+ const bar = el("div", "studio-savedbar");
904+ bar.appendChild(el("b", null, item.cfg.title || "Indicateur sans titre"));
905+ const acts = el("span", "studio-savedacts");
906+ const open = el("button", "viz-toolbtn", "✎ Modifier");
907+ open.type = "button";
908+ open.addEventListener("click", () => {
909+ Object.assign(studio, { refs: item.cfg.refs.slice(0, 4), transform: item.cfg.transform, combine: item.cfg.combine, kind: item.cfg.kind, title: item.cfg.title || "" });
910+ window.scrollTo(0, 0);
911+ render();
912+ });
913+ acts.appendChild(open);
914+ const shr = el("button", "viz-toolbtn", "🔗 Lien");
915+ shr.type = "button";
916+ shr.addEventListener("click", async () => { try { await navigator.clipboard.writeText(studioShareUrl(item.cfg)); shr.textContent = "✓"; setTimeout(() => (shr.textContent = "🔗 Lien"), 1500); } catch {} });
917+ acts.appendChild(shr);
918+ const del = el("button", "viz-toolbtn danger", "🗑 Supprimer");
919+ del.type = "button";
920+ del.addEventListener("click", () => { studioStore(studioSaved().filter((x) => x.id !== item.id)); render(); });
921+ acts.appendChild(del);
922+ bar.appendChild(acts);
923+ box.appendChild(bar);
924+ try {
925+ const built = await buildCustomSeries(item.cfg);
926+ box.appendChild(customChartCard(item.cfg, built, { fallbackTitle: "Indicateur enregistré" }));
927+ } catch (e) {
928+ box.appendChild(el("div", "viz-empty", "Impossible de recalculer cet indicateur : " + (e && e.message ? e.message : e)));
929+ }
930+ sec.appendChild(box);
931+ }
932+ main.appendChild(sec);
933+ }
934+ root.appendChild(main);
935+ // refocus recherche après insertion dans le DOM (confort de frappe)
936+ if (studio.search) setTimeout(() => { renderResults(); input.focus(); const v = input.value; input.value = ""; input.value = v; }, 0);
937+}
938+
939+/* ================================================================
940+ COQUILLE : header / nav / footer / routeur
941+ ================================================================ */
942+const ACCENT = { stroke: "#095797" }; // bleu Québec — accent Ka·Stats (contraste 8,7:1 sur blanc)
943+
944+function buildHeader() {
945+ const h = document.getElementById("site-header");
946+ const inner = el("div", "container header-inner");
947+ const brand = link("/", "brand", "");
948+ brand.textContent = "";
949+ brand.appendChild(el("span", "brand-qc", "Ka"));
950+ const dot = el("span", "brand-dot", "·");
951+ brand.appendChild(dot);
952+ brand.appendChild(el("span", "brand-stats", "Stats"));
953+ inner.appendChild(brand);
954+ const nav = el("nav", "main-nav");
955+ nav.setAttribute("aria-label", "Navigation principale");
956+ const links = [["/", "Vue d'ensemble"], ["/indicateurs", "Indicateurs"], ["/comparer", "Comparer"], ["/studio", "Studio"], ["/palmares", "Palmarès"]];
957+ for (const [href, label] of links) nav.appendChild(link(href, "nav-link", label));
958+ inner.appendChild(nav);
959+ const badge = el("a", "gk-badge only-desktop");
960+ badge.href = "https://www.groupe-ka.com";
961+ badge.target = "_blank"; badge.rel = "noopener";
962+ badge.appendChild(document.createTextNode("Un service"));
963+ const b = el("b", null, "Groupe");
964+ b.appendChild(el("span", "ka", "KA"));
965+ badge.appendChild(b);
966+ inner.appendChild(badge);
967+
968+ // KA Nav v2 (2026-08-25) : hamburger + panneau plein écran (fixed inset:0,
969+ // z-modal) — le menu reste visible peu importe la position de scroll.
970+ const mbtn = el("button", "ka-mnav-btn");
971+ mbtn.id = "ka-mnav-btn";
972+ mbtn.type = "button";
973+ mbtn.setAttribute("aria-label", "Ouvrir le menu");
974+ mbtn.setAttribute("aria-expanded", "false");
975+ mbtn.setAttribute("aria-controls", "ka-mnav");
976+ for (let i = 0; i < 3; i++) mbtn.appendChild(el("span"));
977+ inner.appendChild(mbtn);
978+ h.appendChild(inner);
979+
980+ const panel = el("div", "ka-mnav");
981+ panel.id = "ka-mnav";
982+ panel.setAttribute("role", "dialog");
983+ panel.setAttribute("aria-modal", "true");
984+ panel.setAttribute("aria-label", "Menu");
985+ const ptop = el("div", "ka-mnav-top");
986+ const pbrand = link("/", "brand", "");
987+ pbrand.appendChild(el("span", "brand-qc", "Ka"));
988+ pbrand.appendChild(el("span", "brand-dot", "·"));
989+ pbrand.appendChild(el("span", "brand-stats", "Stats"));
990+ ptop.appendChild(pbrand);
991+ const pclose = el("button", "ka-mnav-close", "✕");
992+ pclose.type = "button";
993+ pclose.setAttribute("aria-label", "Fermer le menu");
994+ ptop.appendChild(pclose);
995+ panel.appendChild(ptop);
996+ const pnav = el("nav", "ka-mnav-links");
997+ pnav.setAttribute("aria-label", "Navigation principale");
998+ for (const [href, label] of links) {
999+ const a = link(href, null, "");
1000+ a.appendChild(el("b", null, label));
1001+ pnav.appendChild(a);
1002+ }
1003+ panel.appendChild(pnav);
1004+ const pfoot = el("div", "ka-mnav-foot");
1005+ const pbadge = el("a", "gk-badge");
1006+ pbadge.href = "https://www.groupe-ka.com";
1007+ pbadge.target = "_blank"; pbadge.rel = "noopener";
1008+ pbadge.appendChild(document.createTextNode("Un service"));
1009+ const pb = el("b", null, "Groupe");
1010+ pb.appendChild(el("span", "ka", "KA"));
1011+ pbadge.appendChild(pb);
1012+ pfoot.appendChild(pbadge);
1013+ panel.appendChild(pfoot);
1014+ h.after(panel); // frère du header — hors de tout stacking context
1015+
1016+ const setMenu = (open) => {
1017+ panel.classList.toggle("open", open);
1018+ mbtn.setAttribute("aria-expanded", open ? "true" : "false");
1019+ document.documentElement.classList.toggle("ka-menu-locked", open);
1020+ };
1021+ mbtn.addEventListener("click", () => setMenu(!panel.classList.contains("open")));
1022+ panel.addEventListener("click", (e) => {
1023+ if (e.target.closest("a") || e.target.closest(".ka-mnav-close")) setMenu(false);
1024+ });
1025+ document.addEventListener("keydown", (e) => { if (e.key === "Escape") setMenu(false); });
1026+}
1027+
1028+function buildFooter() {
1029+ const f = document.getElementById("site-footer");
1030+ f.className = "ka-footer";
1031+ const c = el("div", "container");
1032+ const wm = el("a", "wordmark");
1033+ wm.href = "/"; wm.dataset.link = "1";
1034+ wm.appendChild(document.createTextNode("Ka·"));
1035+ wm.appendChild(el("span", "ka", "Stats"));
1036+ c.appendChild(wm);
1037+ c.appendChild(el("p", "desc", "Ka·Stats est l'observatoire de données du Groupe KA : les statistiques, tendances et palmarès des 12 plateformes de l'écosystème — habitation, mobilité, emploi, consommation, culture — mis à jour en continu."));
1038+ const notice = el("p", "notice");
1039+ const nb = el("b", null, "Avis. ");
1040+ notice.appendChild(nb);
1041+ notice.appendChild(document.createTextNode("Groupe KA est un agrégateur de contenu : nous ne vendons rien, ne louons rien et ne sommes partie à aucune transaction. Les statistiques reflètent les données collectées par nos plateformes."));
1042+ c.appendChild(notice);
1043+ const sites = el("ul", "sites");
1044+ for (const s of state.sites) {
1045+ const li = el("li");
1046+ const a = el("a", null, s.wordmark);
1047+ a.href = "https://" + s.domain; a.target = "_blank"; a.rel = "noopener";
1048+ li.appendChild(a);
1049+ sites.appendChild(li);
1050+ }
1051+ const hubLi = el("li");
1052+ const hubA = el("a", null, "Groupe-KA.com");
1053+ hubA.href = "https://www.groupe-ka.com"; hubA.target = "_blank"; hubA.rel = "noopener";
1054+ hubLi.appendChild(hubA);
1055+ sites.appendChild(hubLi);
1056+ c.appendChild(sites);
1057+ const contacts = el("div", "contacts");
1058+ for (const [mail, role] of [["contact@groupe-ka.com", "Projets, partenariats & données"], ["info@groupe-ka.com", "Médias & questions générales"], ["admin@groupe-ka.com", "Légal, vie privée & Loi 25"]]) {
1059+ const d = el("div");
1060+ const a = el("a", null, mail);
1061+ a.href = "mailto:" + mail;
1062+ d.appendChild(a);
1063+ d.appendChild(el("span", null, role));
1064+ contacts.appendChild(d);
1065+ }
1066+ c.appendChild(contacts);
1067+ const legal = el("p", "legal");
1068+ legal.appendChild(document.createTextNode("© Groupe KA — Simon-Pierre Boucher · "));
1069+ for (const [label, href] of [["Conditions d'utilisation", "https://www.groupe-ka.com/conditions"], ["Confidentialité", "https://www.groupe-ka.com/confidentialite"], ["Loi 25", "https://www.groupe-ka.com/loi-25"]]) {
1070+ const a = el("a", null, label);
1071+ a.href = href; a.target = "_blank"; a.rel = "noopener";
1072+ legal.appendChild(a);
1073+ legal.appendChild(document.createTextNode(" · "));
1074+ }
1075+ c.appendChild(legal);
1076+ f.appendChild(c);
1077+}
1078+
1079+let rendering = false;
1080+async function render() {
1081+ if (rendering) return;
1082+ rendering = true;
1083+ $app.classList.add("is-loading");
1084+ try {
1085+ const path = location.pathname.replace(/\/+$/, "") || "/";
1086+ const fresh = el("div");
1087+ fresh.appendChild(periodBar());
1088+ const page = el("main");
1089+ fresh.appendChild(page);
1090+ if (path === "/") await pageHome(page);
1091+ else if (path.startsWith("/site/")) await pageSite(page, path.slice(6));
1092+ else if (path === "/indicateurs") await pageIndicateurs(page);
1093+ else if (path === "/comparer") await pageComparer(page);
1094+ else if (path === "/studio") await pageStudio(page);
1095+ else if (path === "/palmares") await pagePalmares(page);
1096+ else await pageHome(page);
1097+ $app.textContent = "";
1098+ $app.appendChild(fresh);
1099+ // met en évidence le lien de nav actif
1100+ document.querySelectorAll(".nav-link").forEach((a) => {
1101+ a.classList.toggle("active", a.getAttribute("href") === (path.startsWith("/site/") ? "/" : path));
1102+ });
1103+ } catch (e) {
1104+ $app.textContent = "";
1105+ $app.appendChild(el("div", "container viz-empty big", "Erreur de chargement : " + (e && e.message ? e.message : e)));
1106+ } finally {
1107+ $app.classList.remove("is-loading");
1108+ rendering = false;
1109+ }
1110+}
1111+
1112+document.addEventListener("click", (e) => {
1113+ const a = e.target.closest("a[data-link]");
1114+ if (!a) return;
1115+ e.preventDefault();
1116+ history.pushState(null, "", a.getAttribute("href"));
1117+ window.scrollTo(0, 0);
1118+ render();
1119+});
1120+window.addEventListener("popstate", render);
1121+
1122+(async function init() {
1123+ const meta = await getJSON("/api/sites");
1124+ state.sites = meta.sites;
1125+ state.siteById = Object.fromEntries(meta.sites.map((s) => [s.id, s]));
1126+ buildHeader();
1127+ buildFooter();
1128+ render();
1129+})();
1130+
1131+;/*KA_ANALYTICS*/(function(){try{if(window.__kaAn)return;window.__kaAn=1;var k="KA_VID",v=localStorage.getItem(k);if(!v){v=Date.now().toString(36)+Math.random().toString(36).slice(2,8);localStorage.setItem(k,v);}var b=function(){var i=new Image();i.src="https://www.administration-ka.com/collect?site=ka-stats&vid="+v+"&p="+encodeURIComponent(location.pathname)+"&t="+Date.now();};b();setInterval(b,60000);}catch(e){}})();
added public/apple-touch-icon.png +0 −0

Binary file not shown.

added public/charts.js +995 −0
@@ -0,0 +1,995 @@
1+/* -----------------------------------------------------------------------------
2+ Auteur : Simon-Pierre Boucher — contact@spboucher.ai
3+ Fichier : ka-stats/public/charts.js
4+ Desc. : QCharts — bibliothèque de graphiques SVG vanilla de Ka·Stats
5+ (contrat ka-stats v2). Règles dataviz appliquées : marques fines
6+ (lignes 2 px, barres ≤ 24 px à bout arrondi 4 px), écarts de surface
7+ 2 px, grilles hairline pleines, légende dès 2 séries, texte toujours
8+ en encre, infobulle crosshair (lignes) ou par-marque (barres/
9+ cellules), vue tableau jumelle sur CHAQUE graphique, rampe
10+ séquentielle mono-teinte, palette catégorielle validée en ordre fixe.
11+----------------------------------------------------------------------------- */
12+"use strict";
13+
14+const QCharts = (() => {
15+ /* Palette catégorielle validée (validate_palette.js — ordre fixe, jamais cyclée) */
16+ const CAT = ["#2a78d6", "#eb6834", "#1baf7a", "#eda100", "#e87ba4", "#008300", "#4a3aa7", "#e34948"];
17+ const DASHES = ["", "7 4", "2 3", "10 3 2 3"]; // identité multi-courbes ≤ 4 (jamais couleur seule)
18+ const INK = "#141814", INK2 = "#4d5551", INK3 = "#8b928c";
19+ const GRID = "rgba(20,24,20,0.10)", AXIS = "rgba(20,24,20,0.28)";
20+ const GREEN = "#1c5c41", DANGER = "#b3423a";
21+
22+ /* ---------- utilitaires ---------- */
23+ const NBSP = " ";
24+ const nfInt = new Intl.NumberFormat("fr-CA", { maximumFractionDigits: 0 });
25+ const nf1 = new Intl.NumberFormat("fr-CA", { maximumFractionDigits: 1, minimumFractionDigits: 0 });
26+ const nf2 = new Intl.NumberFormat("fr-CA", { maximumFractionDigits: 2 });
27+
28+ function fmtNum(v, unit) {
29+ if (v === null || v === undefined || Number.isNaN(v)) return "—";
30+ if (typeof v !== "number") return String(v);
31+ let s;
32+ const av = Math.abs(v);
33+ if (Number.isInteger(v)) s = nfInt.format(v);
34+ else s = (av < 10 ? nf2 : nf1).format(v);
35+ if (unit) {
36+ const u = String(unit).trim();
37+ if (u === "%") return s + NBSP + "%";
38+ if (u === "$") return s + NBSP + "$";
39+ return s + NBSP + u;
40+ }
41+ return s;
42+ }
43+ function fmtCompact(v) {
44+ const av = Math.abs(v);
45+ if (av >= 1e6) return nf1.format(v / 1e6) + NBSP + "M";
46+ if (av >= 10000) return nfInt.format(Math.round(v / 1000)) + NBSP + "k";
47+ if (av >= 1000) return nf1.format(v / 1000) + NBSP + "k";
48+ return Number.isInteger(v) ? nfInt.format(v) : nf1.format(v);
49+ }
50+ const MONTHS = ["janv.", "févr.", "mars", "avr.", "mai", "juin", "juil.", "août", "sept.", "oct.", "nov.", "déc."];
51+ const DOWS = ["lun", "mar", "mer", "jeu", "ven", "sam", "dim"];
52+ function fmtDate(t) {
53+ const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(String(t));
54+ if (!m) return String(t);
55+ return `${Number(m[3])} ${MONTHS[Number(m[2]) - 1]}`;
56+ }
57+ function fmtDateFull(t) {
58+ const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(String(t));
59+ if (!m) return String(t);
60+ return `${Number(m[3])} ${MONTHS[Number(m[2]) - 1]} ${m[1]}`;
61+ }
62+
63+ function el(tag, cls, text) {
64+ const n = document.createElement(tag);
65+ if (cls) n.className = cls;
66+ if (text !== undefined) n.textContent = text; // jamais innerHTML avec des libellés externes
67+ return n;
68+ }
69+ function svgEl(tag, attrs) {
70+ const n = document.createElementNS("http://www.w3.org/2000/svg", tag);
71+ for (const k in attrs || {}) n.setAttribute(k, attrs[k]);
72+ return n;
73+ }
74+
75+ /* couleur : garde de contraste + rampe mono-teinte */
76+ function hexRgb(h) {
77+ const s = h.replace("#", "");
78+ return [parseInt(s.slice(0, 2), 16), parseInt(s.slice(2, 4), 16), parseInt(s.slice(4, 6), 16)];
79+ }
80+ function rgbHex(r, g, b) {
81+ const c = (x) => Math.max(0, Math.min(255, Math.round(x))).toString(16).padStart(2, "0");
82+ return "#" + c(r) + c(g) + c(b);
83+ }
84+ function mix(h1, h2, t) {
85+ const a = hexRgb(h1), b = hexRgb(h2);
86+ return rgbHex(a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t, a[2] + (b[2] - a[2]) * t);
87+ }
88+ function relLum(h) {
89+ const [r, g, b] = hexRgb(h).map((v) => {
90+ const s = v / 255;
91+ return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
92+ });
93+ return 0.2126 * r + 0.7152 * g + 0.0722 * b;
94+ }
95+ function contrastWhite(h) {
96+ return 1.05 / (relLum(h) + 0.05);
97+ }
98+ /* trait de série : l'accent si assez contrasté sur blanc, sinon sa version deep */
99+ function strokeFor(accent, deep) {
100+ return contrastWhite(accent) >= 3 ? accent : deep || mix(accent, INK, 0.45);
101+ }
102+ /* rampe séquentielle mono-teinte (clair → foncé), monotone en luminosité */
103+ function seqRamp(accent) {
104+ const base = contrastWhite(accent) >= 2 ? accent : mix(accent, INK, 0.35);
105+ return (t) => (t <= 0 ? "#f1efe8" : mix(mix("#ffffff", base, 0.16 + 0.84 * t), INK, Math.max(0, t - 0.72) * 0.9));
106+ }
107+
108+ function niceTicks(min, max, n = 4) {
109+ if (!(max > min)) max = min + 1;
110+ const span = max - min;
111+ const step0 = Math.pow(10, Math.floor(Math.log10(span / n)));
112+ const err = span / n / step0;
113+ const step = step0 * (err >= 7.5 ? 10 : err >= 3.5 ? 5 : err >= 1.5 ? 2 : 1);
114+ const lo = Math.floor(min / step) * step;
115+ const hi = Math.ceil(max / step) * step;
116+ const ticks = [];
117+ for (let v = lo; v <= hi + step / 2; v += step) ticks.push(Math.round(v * 1e6) / 1e6);
118+ return { lo, hi, ticks };
119+ }
120+
121+ /* ---------- coquille de graphique : carte + infobulle + vue tableau ---------- */
122+ function shell(opts) {
123+ const card = el("figure", "viz-card");
124+ if (opts.title) {
125+ const head = el("figcaption", "viz-head");
126+ head.appendChild(el("div", "viz-title", opts.title));
127+ if (opts.unit) head.appendChild(el("span", "klabel viz-unit", opts.unit));
128+ card.appendChild(head);
129+ }
130+ const holder = el("div", "viz-plot");
131+ card.appendChild(holder);
132+ const tt = el("div", "viz-tt");
133+ tt.setAttribute("role", "status");
134+ holder.appendChild(tt);
135+ return { card, holder, tt };
136+ }
137+ function showTT(holder, tt, xPct, yPct) {
138+ tt.style.display = "block";
139+ const r = holder.getBoundingClientRect();
140+ const tw = tt.offsetWidth, th = tt.offsetHeight;
141+ let x = (xPct / 100) * r.width + 14;
142+ if (x + tw > r.width - 4) x = (xPct / 100) * r.width - tw - 14;
143+ let y = (yPct / 100) * r.height - th - 10;
144+ if (y < 0) y = 4;
145+ tt.style.left = Math.max(2, x) + "px";
146+ tt.style.top = y + "px";
147+ }
148+ function hideTT(tt) { tt.style.display = "none"; }
149+ function ttRows(tt, title, rows) {
150+ tt.textContent = "";
151+ const h = el("div", "viz-tt-title", title);
152+ tt.appendChild(h);
153+ for (const r of rows) {
154+ const row = el("div", "viz-tt-row");
155+ if (r.color) {
156+ const key = el("span", "viz-tt-key");
157+ key.style.background = r.color;
158+ if (r.dash) key.style.backgroundImage = `repeating-linear-gradient(90deg, ${r.color} 0 5px, #fff 5px 8px)`;
159+ row.appendChild(key);
160+ }
161+ row.appendChild(el("b", "viz-tt-val", r.value));
162+ row.appendChild(el("span", "viz-tt-lbl", r.label || ""));
163+ tt.appendChild(row);
164+ }
165+ }
166+ /* vue tableau jumelle (l'infobulle ne « garde » jamais une valeur) */
167+ function twinTable(card, columns, rows) {
168+ const det = el("details", "viz-data");
169+ det.appendChild(el("summary", null, "Données"));
170+ const wrap = el("div", "tbl-wrap");
171+ const tbl = el("table", "viz-table");
172+ const thead = el("thead");
173+ const trh = el("tr");
174+ for (const c of columns) trh.appendChild(el("th", null, c));
175+ thead.appendChild(trh);
176+ tbl.appendChild(thead);
177+ const tb = el("tbody");
178+ for (const r of rows.slice(0, 400)) {
179+ const tr = el("tr");
180+ r.forEach((c, i) => {
181+ const td = el("td", i > 0 ? "num" : null, typeof c === "number" ? fmtNum(c) : String(c ?? "—"));
182+ tr.appendChild(td);
183+ });
184+ tb.appendChild(tr);
185+ }
186+ tbl.appendChild(tb);
187+ wrap.appendChild(tbl);
188+ det.appendChild(wrap);
189+ card.appendChild(det);
190+ return det;
191+ }
192+ function legend(card, entries, kind) {
193+ const lg = el("div", "viz-legend");
194+ for (const e of entries) {
195+ const it = el("span", "viz-legend-item");
196+ const key = el("span", kind === "line" ? "viz-key-line" : "viz-key-rect");
197+ key.style.background = e.color;
198+ if (e.dash && kind === "line") key.style.backgroundImage = `repeating-linear-gradient(90deg, ${e.color} 0 6px, #fff 6px 9px)`;
199+ it.appendChild(key);
200+ it.appendChild(el("span", null, e.label));
201+ lg.appendChild(it);
202+ }
203+ card.insertBefore(lg, card.querySelector(".viz-plot"));
204+ return lg;
205+ }
206+
207+ /* ---------- sparkline (mini tendance de KPI) ---------- */
208+ function sparkline(points, color, w = 110, h = 30) {
209+ const vs = points.map((p) => p.v).filter((v) => typeof v === "number");
210+ if (!vs.length) return svgEl("svg", { width: w, height: h });
211+ const min = Math.min(...vs), max = Math.max(...vs);
212+ const span = max - min || 1;
213+ const svg = svgEl("svg", { viewBox: `0 0 ${w} ${h}`, class: "spark", "aria-hidden": "true" });
214+ const n = points.length;
215+ const px = (i) => 2 + (i / Math.max(1, n - 1)) * (w - 8);
216+ const py = (v) => h - 4 - ((v - min) / span) * (h - 9);
217+ let d = "";
218+ points.forEach((p, i) => { d += (i ? "L" : "M") + px(i).toFixed(1) + "," + py(p.v).toFixed(1); });
219+ svg.appendChild(svgEl("path", { d, fill: "none", stroke: color, "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round" }));
220+ const last = points[n - 1];
221+ svg.appendChild(svgEl("circle", { cx: px(n - 1), cy: py(last.v), r: 3.2, fill: color, stroke: "#fff", "stroke-width": 2 }));
222+ return svg;
223+ }
224+
225+ /* ---------- courbes / aires — INTERACTIF ----------
226+ · crosshair + infobulle toutes séries
227+ · zoom par sélection horizontale (glisser), double-clic = réinitialiser
228+ · légende cliquable (≥ 2 séries) pour masquer/afficher une série */
229+ function lineChart(opts) {
230+ const { card, holder, tt } = shell(opts);
231+ const W = 860, H = opts.height || 280;
232+ const padL = 56, padR = 18, padT = 14, padB = 34;
233+ const plotW = W - padL - padR, plotH = H - padT - padB;
234+ const all = opts.series.filter((s) => s.points && s.points.length);
235+ if (!all.length) { holder.appendChild(el("div", "viz-empty", "Pas encore mesuré")); return card; }
236+ const tsetAll = new Set();
237+ all.forEach((s) => s.points.forEach((p) => tsetAll.add(p.t)));
238+ const tsAll = [...tsetAll].sort();
239+ const maps = all.map((s) => new Map(s.points.map((p) => [p.t, p.v])));
240+ const hidden = new Set();
241+ let z0 = 0, z1 = tsAll.length - 1;
242+
243+ const svg = svgEl("svg", { viewBox: `0 0 ${W} ${H}`, class: "viz-svg", role: "img" });
244+ svg.setAttribute("aria-label", opts.title || "graphique en courbes");
245+ svg.style.touchAction = "pan-y";
246+ holder.appendChild(svg);
247+
248+ // légende interactive
249+ let legendItems = [];
250+ if (all.length >= 2) {
251+ const lg = el("div", "viz-legend");
252+ all.forEach((s, si) => {
253+ const it = el("button", "viz-legend-item viz-legend-btn");
254+ it.type = "button";
255+ it.title = "Afficher/masquer la série";
256+ const key = el("span", "viz-key-line");
257+ key.style.background = s.color;
258+ if (s.dash) key.style.backgroundImage = `repeating-linear-gradient(90deg, ${s.color} 0 6px, #fff 6px 9px)`;
259+ it.appendChild(key);
260+ it.appendChild(el("span", null, s.label));
261+ it.addEventListener("click", () => {
262+ if (hidden.has(si)) hidden.delete(si);
263+ else if (hidden.size < all.length - 1) hidden.add(si); // toujours ≥ 1 série visible
264+ it.classList.toggle("dim", hidden.has(si));
265+ draw();
266+ });
267+ lg.appendChild(it);
268+ legendItems.push(it);
269+ });
270+ card.insertBefore(lg, holder);
271+ }
272+ // bandeau zoom (visible quand zoomé)
273+ const zoomBar = el("div", "viz-zoombar");
274+ const zoomLbl = el("span", "klabel");
275+ const zoomReset = el("button", "pill viz-zreset", "Réinitialiser le zoom");
276+ zoomReset.type = "button";
277+ zoomReset.addEventListener("click", () => { z0 = 0; z1 = tsAll.length - 1; draw(); });
278+ zoomBar.appendChild(zoomLbl);
279+ zoomBar.appendChild(zoomReset);
280+ zoomBar.style.display = "none";
281+ card.insertBefore(zoomBar, holder);
282+
283+ function draw() {
284+ svg.textContent = "";
285+ const ts = tsAll.slice(z0, z1 + 1);
286+ const visIdx = all.map((_, i) => i).filter((i) => !hidden.has(i));
287+ let vmin = Infinity, vmax = -Infinity;
288+ for (const si of visIdx) for (const t of ts) {
289+ const v = maps[si].get(t);
290+ if (typeof v === "number") { vmin = Math.min(vmin, v); vmax = Math.max(vmax, v); }
291+ }
292+ if (!isFinite(vmin)) { vmin = 0; vmax = 1; }
293+ let lo0 = vmin, hi0 = vmax;
294+ if (opts.baselineZero || (vmin >= 0 && vmax > 0 && vmin / vmax < 0.35)) lo0 = 0;
295+ const { lo, hi, ticks } = niceTicks(lo0, hi0, 4);
296+ const X = (i) => padL + (ts.length === 1 ? plotW / 2 : (i / (ts.length - 1)) * plotW);
297+ const Y = (v) => padT + plotH - ((v - lo) / (hi - lo || 1)) * plotH;
298+ for (const tk of ticks) {
299+ svg.appendChild(svgEl("line", { x1: padL, x2: W - padR, y1: Y(tk), y2: Y(tk), stroke: GRID, "stroke-width": 1 }));
300+ const lbl = svgEl("text", { x: padL - 8, y: Y(tk) + 3.5, "text-anchor": "end", class: "viz-tick" });
301+ lbl.textContent = fmtCompact(tk);
302+ svg.appendChild(lbl);
303+ }
304+ svg.appendChild(svgEl("line", { x1: padL, x2: W - padR, y1: Y(lo), y2: Y(lo), stroke: AXIS, "stroke-width": 1 }));
305+ [0, Math.floor((ts.length - 1) / 2), ts.length - 1].forEach((i, k) => {
306+ if (i < 0 || (k > 0 && i === 0)) return;
307+ const lbl = svgEl("text", { x: X(i), y: H - 12, "text-anchor": k === 0 ? "start" : k === 2 ? "end" : "middle", class: "viz-tick" });
308+ lbl.textContent = fmtDate(ts[i]);
309+ svg.appendChild(lbl);
310+ });
311+ for (const si of visIdx) {
312+ const s = all[si];
313+ let d = "", started = false;
314+ ts.forEach((t, i) => {
315+ const v = maps[si].get(t);
316+ if (typeof v !== "number") { started = false; return; }
317+ d += (started ? "L" : "M") + X(i).toFixed(1) + "," + Y(v).toFixed(1);
318+ started = true;
319+ });
320+ if ((opts.area || visIdx.length === 1) && !s.noArea) {
321+ let ad = "", st = false, firstI = null, lastI = null;
322+ ts.forEach((t, i) => {
323+ const v = maps[si].get(t);
324+ if (typeof v !== "number") return;
325+ if (firstI === null) firstI = i;
326+ lastI = i;
327+ ad += (st ? "L" : "M") + X(i).toFixed(1) + "," + Y(v).toFixed(1);
328+ st = true;
329+ });
330+ if (firstI !== null) {
331+ ad += `L${X(lastI).toFixed(1)},${Y(lo).toFixed(1)}L${X(firstI).toFixed(1)},${Y(lo).toFixed(1)}Z`;
332+ svg.appendChild(svgEl("path", { d: ad, fill: s.color, opacity: 0.1 }));
333+ }
334+ }
335+ const attrs = { d, fill: "none", stroke: s.color, "stroke-width": 2, "stroke-linecap": "round", "stroke-linejoin": "round" };
336+ if (s.dash) attrs["stroke-dasharray"] = s.dash;
337+ if (s.faded) attrs.opacity = 0.55;
338+ svg.appendChild(svgEl("path", attrs));
339+ for (let i = ts.length - 1; i >= 0; i--) {
340+ const v = maps[si].get(ts[i]);
341+ if (typeof v === "number") {
342+ svg.appendChild(svgEl("circle", { cx: X(i), cy: Y(v), r: 4, fill: s.color, stroke: "#fff", "stroke-width": 2 }));
343+ if (visIdx.length <= 2 && !s.faded) {
344+ const lbl = svgEl("text", { x: Math.min(X(i), W - padR - 2), y: Math.max(12, Y(v) - 9), "text-anchor": "end", class: "viz-endlbl" });
345+ lbl.textContent = fmtNum(v, opts.unitShort || (opts.unit === "$" ? "$" : ""));
346+ svg.appendChild(lbl);
347+ }
348+ break;
349+ }
350+ }
351+ }
352+ // crosshair + sélection de zoom
353+ const cross = svgEl("line", { y1: padT, y2: padT + plotH, stroke: AXIS, "stroke-width": 1, style: "display:none" });
354+ svg.appendChild(cross);
355+ const selRect = svgEl("rect", { y: padT, height: plotH, fill: "rgba(9,87,151,0.12)", stroke: "rgba(9,87,151,0.5)", "stroke-width": 1, style: "display:none" });
356+ svg.appendChild(selRect);
357+ const hit = svgEl("rect", { x: padL, y: padT, width: plotW, height: plotH, fill: "transparent", style: "cursor: crosshair" });
358+ svg.appendChild(hit);
359+ const idxAt = (clientX) => {
360+ const r = svg.getBoundingClientRect();
361+ const mx = ((clientX - r.left) / r.width) * W;
362+ return Math.max(0, Math.min(ts.length - 1, Math.round(((mx - padL) / plotW) * (ts.length - 1))));
363+ };
364+ let dragStart = null;
365+ hit.addEventListener("pointerdown", (ev) => {
366+ if (ts.length < 3) return;
367+ dragStart = idxAt(ev.clientX);
368+ hit.setPointerCapture(ev.pointerId);
369+ });
370+ hit.addEventListener("pointermove", (ev) => {
371+ const i = idxAt(ev.clientX);
372+ if (dragStart !== null) {
373+ const a = Math.min(dragStart, i), b = Math.max(dragStart, i);
374+ selRect.setAttribute("x", X(a));
375+ selRect.setAttribute("width", Math.max(1, X(b) - X(a)));
376+ selRect.style.display = "";
377+ hideTT(tt);
378+ return;
379+ }
380+ cross.setAttribute("x1", X(i)); cross.setAttribute("x2", X(i));
381+ cross.style.display = "";
382+ const rows = visIdx.map((si) => {
383+ const s = all[si];
384+ const v = maps[si].get(ts[i]);
385+ return { color: s.color, dash: !!s.dash, value: typeof v === "number" ? fmtNum(v, opts.unit === "$" ? "$" : "") : "—", label: s.label };
386+ });
387+ ttRows(tt, fmtDateFull(ts[i]), rows);
388+ showTT(holder, tt, (X(i) / W) * 100, (padT / H) * 100 + 8);
389+ });
390+ hit.addEventListener("pointerup", (ev) => {
391+ if (dragStart === null) return;
392+ const i = idxAt(ev.clientX);
393+ const a = Math.min(dragStart, i), b = Math.max(dragStart, i);
394+ dragStart = null;
395+ selRect.style.display = "none";
396+ if (b - a >= 2) { z0 = z0 + a; z1 = z0 + (b - a); draw(); }
397+ });
398+ hit.addEventListener("pointerleave", () => { cross.style.display = "none"; hideTT(tt); if (dragStart !== null) { dragStart = null; selRect.style.display = "none"; } });
399+ hit.addEventListener("dblclick", () => { z0 = 0; z1 = tsAll.length - 1; draw(); });
400+ // bandeau zoom
401+ const zoomed = z0 > 0 || z1 < tsAll.length - 1;
402+ zoomBar.style.display = zoomed ? "" : "none";
403+ if (zoomed) zoomLbl.textContent = `Zoom : ${fmtDateFull(tsAll[z0])} → ${fmtDateFull(tsAll[z1])} (glisser pour zoomer · double-clic pour tout revoir)`;
404+ }
405+ draw();
406+ if (opts.summary !== false && all.length === 1) card.appendChild(statSummary(all[0].points, opts.unit));
407+ twinTable(card, ["Date", ...all.map((s) => s.label)], tsAll.map((t) => [fmtDateFull(t), ...all.map((_, si) => maps[si].get(t) ?? "—")]));
408+ return card;
409+ }
410+
411+ /* ---------- barres verticales (volumes quotidiens, histogrammes) ---------- */
412+ function vBarChart(opts) {
413+ // opts: {title, unit, points:[{t|label, v}], color, isDate}
414+ const { card, holder, tt } = shell(opts);
415+ const pts = (opts.points || []).filter((p) => typeof p.v === "number");
416+ if (!pts.length) { holder.appendChild(el("div", "viz-empty", "Pas encore mesuré")); return card; }
417+ const W = 860, H = opts.height || 250;
418+ const padL = 56, padR = 14, padT = 12, padB = opts.rotateLabels ? 66 : 34;
419+ const plotW = W - padL - padR, plotH = H - padT - padB;
420+ const vmax = Math.max(...pts.map((p) => p.v), 1);
421+ const { hi, ticks } = niceTicks(0, vmax, 4);
422+ const n = pts.length;
423+ const slot = plotW / n;
424+ const bw = Math.min(24, Math.max(2, slot - 2)); // écart de surface 2 px
425+ const X = (i) => padL + i * slot + (slot - bw) / 2;
426+ const Y = (v) => padT + plotH - (v / (hi || 1)) * plotH;
427+ const svg = svgEl("svg", { viewBox: `0 0 ${W} ${H}`, class: "viz-svg", role: "img" });
428+ svg.setAttribute("aria-label", opts.title || "graphique en barres");
429+ for (const tk of ticks) {
430+ svg.appendChild(svgEl("line", { x1: padL, x2: W - padR, y1: Y(tk), y2: Y(tk), stroke: GRID, "stroke-width": 1 }));
431+ const lbl = svgEl("text", { x: padL - 8, y: Y(tk) + 3.5, "text-anchor": "end", class: "viz-tick" });
432+ lbl.textContent = fmtCompact(tk);
433+ svg.appendChild(lbl);
434+ }
435+ svg.appendChild(svgEl("line", { x1: padL, x2: W - padR, y1: Y(0), y2: Y(0), stroke: AXIS, "stroke-width": 1 }));
436+ const color = opts.color;
437+ pts.forEach((p, i) => {
438+ const x = X(i), y = Y(p.v), h = Y(0) - y;
439+ const r = Math.min(4, bw / 2, h); // bout arrondi côté donnée, carré à la base
440+ const d = h <= 0.5
441+ ? `M${x},${Y(0)}h${bw}v-0.5h-${bw}Z`
442+ : `M${x},${Y(0)} L${x},${y + r} Q${x},${y} ${x + r},${y} L${x + bw - r},${y} Q${x + bw},${y} ${x + bw},${y + r} L${x + bw},${Y(0)} Z`;
443+ const bar = svgEl("path", { d, fill: color, class: "viz-bar" });
444+ const label = opts.isDate === false ? String(p.label ?? p.t) : fmtDateFull(p.t);
445+ bar.addEventListener("pointerenter", () => {
446+ bar.style.opacity = "0.75";
447+ ttRows(tt, label, [{ color, value: fmtNum(p.v, opts.unit === "$" ? "$" : ""), label: opts.unit && opts.unit !== "$" ? opts.unit : "" }]);
448+ showTT(holder, tt, ((x + bw / 2) / W) * 100, (y / H) * 100);
449+ });
450+ bar.addEventListener("pointerleave", () => { bar.style.opacity = ""; hideTT(tt); });
451+ svg.appendChild(bar);
452+ });
453+ // repères x
454+ if (opts.isDate === false) {
455+ const step = Math.ceil(n / (opts.rotateLabels ? 14 : 8));
456+ pts.forEach((p, i) => {
457+ if (i % step) return;
458+ const lbl = svgEl("text", {
459+ x: X(i) + bw / 2, y: H - (opts.rotateLabels ? 8 : 12), class: "viz-tick",
460+ "text-anchor": opts.rotateLabels ? "end" : "middle",
461+ transform: opts.rotateLabels ? `rotate(-35 ${X(i) + bw / 2} ${H - 8})` : "",
462+ });
463+ lbl.textContent = String(p.label ?? p.t).slice(0, 16);
464+ svg.appendChild(lbl);
465+ });
466+ } else {
467+ [0, Math.floor((n - 1) / 2), n - 1].forEach((i, k) => {
468+ const lbl = svgEl("text", { x: X(i) + bw / 2, y: H - 12, "text-anchor": k === 0 ? "start" : k === 2 ? "end" : "middle", class: "viz-tick" });
469+ lbl.textContent = fmtDate(pts[i].t);
470+ svg.appendChild(lbl);
471+ });
472+ }
473+ holder.appendChild(svg);
474+ twinTable(card, [opts.isDate === false ? "Catégorie" : "Date", opts.unit || "Valeur"], pts.map((p) => [opts.isDate === false ? String(p.label ?? p.t) : fmtDateFull(p.t), p.v]));
475+ return card;
476+ }
477+
478+ /* ---------- barres horizontales (répartitions, géo) ---------- */
479+ function hBarChart(opts) {
480+ // opts: {title, unit, items:[{label, value, delta_pct}], color, max}
481+ const { card, holder } = shell(opts);
482+ const items = (opts.items || []).filter((it) => typeof it.value === "number").slice(0, opts.max || 14);
483+ if (!items.length) { holder.appendChild(el("div", "viz-empty", "Pas encore mesuré")); return card; }
484+ const vmax = Math.max(...items.map((it) => it.value), 1);
485+ const list = el("div", "viz-hbars");
486+ for (const it of items) {
487+ const row = el("div", "viz-hbar-row");
488+ const top = el("div", "viz-hbar-top");
489+ top.appendChild(el("span", "viz-hbar-label", it.label));
490+ const right = el("span", "viz-hbar-val");
491+ right.appendChild(el("b", null, fmtNum(it.value, opts.unit === "$" ? "$" : "")));
492+ if (typeof it.delta_pct === "number") {
493+ const d = el("span", "viz-delta " + (it.delta_pct >= 0 ? "up" : "down"), (it.delta_pct >= 0 ? "▲ " : "▼ ") + nf1.format(Math.abs(it.delta_pct)) + NBSP + "%");
494+ right.appendChild(d);
495+ }
496+ top.appendChild(right);
497+ row.appendChild(top);
498+ const track = el("div", "viz-hbar-track");
499+ const bar = el("div", "viz-hbar-fill");
500+ bar.style.width = Math.max(0.8, (it.value / vmax) * 100) + "%";
501+ bar.style.background = opts.color;
502+ track.appendChild(bar);
503+ row.appendChild(track);
504+ list.appendChild(row);
505+ }
506+ holder.appendChild(list);
507+ twinTable(card, ["Catégorie", opts.unit || "Valeur", "Δ %"], items.map((it) => [it.label, it.value, typeof it.delta_pct === "number" ? nf1.format(it.delta_pct) + " %" : "—"]));
508+ return card;
509+ }
510+
511+ /* ---------- anneau (part-du-tout, ≤ 6 segments + Autres) ---------- */
512+ function donut(opts) {
513+ // opts: {title, unit, items:[{label, value}]}
514+ const { card, holder, tt } = shell(opts);
515+ let items = (opts.items || []).filter((it) => typeof it.value === "number" && it.value > 0);
516+ if (!items.length) { holder.appendChild(el("div", "viz-empty", "Pas encore mesuré")); return card; }
517+ items = [...items].sort((a, b) => b.value - a.value);
518+ if (items.length > 6) {
519+ const rest = items.slice(5).reduce((a, it) => a + it.value, 0);
520+ items = [...items.slice(0, 5), { label: "Autres", value: rest }];
521+ }
522+ const total = items.reduce((a, it) => a + it.value, 0);
523+ const W = 420, H = 230, cx = 115, cy = 115, R = 88, TH = 30;
524+ const svg = svgEl("svg", { viewBox: `0 0 ${W} ${H}`, class: "viz-svg viz-donut", role: "img" });
525+ svg.setAttribute("aria-label", opts.title || "anneau");
526+ const PAD = 0.024; // écart de surface entre arcs
527+ let a0 = -Math.PI / 2;
528+ const arcs = [];
529+ items.forEach((it, i) => {
530+ const frac = it.value / total;
531+ const a1 = a0 + frac * Math.PI * 2;
532+ const s = a0 + PAD / 2, e = Math.max(s + 0.005, a1 - PAD / 2);
533+ const large = e - s > Math.PI ? 1 : 0;
534+ const p = (a, r) => [cx + Math.cos(a) * r, cy + Math.sin(a) * r];
535+ const [x1, y1] = p(s, R), [x2, y2] = p(e, R), [x3, y3] = p(e, R - TH), [x4, y4] = p(s, R - TH);
536+ const d = `M${x1},${y1} A${R},${R} 0 ${large} 1 ${x2},${y2} L${x3},${y3} A${R - TH},${R - TH} 0 ${large} 0 ${x4},${y4} Z`;
537+ const color = i === 5 && it.label === "Autres" ? "#b9b6ac" : CAT[i];
538+ const path = svgEl("path", { d, fill: color, class: "viz-arc" });
539+ const pct = nf1.format(frac * 100) + NBSP + "%";
540+ path.addEventListener("pointerenter", () => {
541+ path.style.opacity = "0.78";
542+ ttRows(tt, it.label, [{ color, value: fmtNum(it.value, opts.unit === "$" ? "$" : ""), label: pct }]);
543+ showTT(holder, tt, ((cx + Math.cos((s + e) / 2) * R) / W) * 100, ((cy + Math.sin((s + e) / 2) * R) / H) * 100);
544+ });
545+ path.addEventListener("pointerleave", () => { path.style.opacity = ""; hideTT(tt); });
546+ svg.appendChild(path);
547+ arcs.push({ ...it, color, pct });
548+ a0 = a1;
549+ });
550+ const ctr = svgEl("text", { x: cx, y: cy - 2, "text-anchor": "middle", class: "viz-donut-total" });
551+ ctr.textContent = fmtCompact(total);
552+ svg.appendChild(ctr);
553+ const ctr2 = svgEl("text", { x: cx, y: cy + 16, "text-anchor": "middle", class: "viz-tick" });
554+ ctr2.textContent = "total";
555+ svg.appendChild(ctr2);
556+ // légende à droite (identité par pastille + libellé, jamais couleur seule)
557+ arcs.forEach((a, i) => {
558+ const y = 28 + i * 32;
559+ svg.appendChild(svgEl("rect", { x: 232, y: y - 10, width: 12, height: 12, rx: 3, fill: a.color }));
560+ const l1 = svgEl("text", { x: 252, y, class: "viz-legend-txt" });
561+ l1.textContent = a.label.length > 20 ? a.label.slice(0, 19) + "…" : a.label;
562+ svg.appendChild(l1);
563+ const l2 = svgEl("text", { x: W - 6, y, "text-anchor": "end", class: "viz-legend-num" });
564+ l2.textContent = a.pct;
565+ svg.appendChild(l2);
566+ });
567+ holder.appendChild(svg);
568+ twinTable(card, ["Catégorie", opts.unit || "Valeur", "Part"], arcs.map((a) => [a.label, a.value, a.pct]));
569+ return card;
570+ }
571+
572+ /* ---------- barres empilées (composition dans le temps) ---------- */
573+ function stackedBar(opts) {
574+ // opts: {title, unit, keys:[...], points:[{t, values:[...]}]}
575+ const { card, holder, tt } = shell(opts);
576+ let keys = opts.keys || [];
577+ let pts = (opts.points || []).filter((p) => Array.isArray(p.values));
578+ if (!keys.length || !pts.length) { holder.appendChild(el("div", "viz-empty", "Pas encore mesuré")); return card; }
579+ // repli > 8 clés dans « Autres » (jamais de 9e teinte)
580+ if (keys.length > 8) {
581+ const totals = keys.map((_, ki) => pts.reduce((a, p) => a + (p.values[ki] || 0), 0));
582+ const order = totals.map((v, i) => [v, i]).sort((a, b) => b[0] - a[0]).map((x) => x[1]);
583+ const kept = order.slice(0, 7), rest = order.slice(7);
584+ keys = [...kept.map((i) => keys[i]), "Autres"];
585+ pts = pts.map((p) => ({ t: p.t, values: [...kept.map((i) => p.values[i] || 0), rest.reduce((a, i) => a + (p.values[i] || 0), 0)] }));
586+ }
587+ const W = 860, H = opts.height || 280;
588+ const padL = 56, padR = 14, padT = 12, padB = 34;
589+ const plotW = W - padL - padR, plotH = H - padT - padB;
590+ const totals = pts.map((p) => p.values.reduce((a, v) => a + (v || 0), 0));
591+ const { hi, ticks } = niceTicks(0, Math.max(...totals, 1), 4);
592+ const n = pts.length, slot = plotW / n;
593+ const bw = Math.min(24, Math.max(2, slot - 2));
594+ const X = (i) => padL + i * slot + (slot - bw) / 2;
595+ const Y = (v) => padT + plotH - (v / (hi || 1)) * plotH;
596+ const svg = svgEl("svg", { viewBox: `0 0 ${W} ${H}`, class: "viz-svg", role: "img" });
597+ svg.setAttribute("aria-label", opts.title || "barres empilées");
598+ for (const tk of ticks) {
599+ svg.appendChild(svgEl("line", { x1: padL, x2: W - padR, y1: Y(tk), y2: Y(tk), stroke: GRID, "stroke-width": 1 }));
600+ const lbl = svgEl("text", { x: padL - 8, y: Y(tk) + 3.5, "text-anchor": "end", class: "viz-tick" });
601+ lbl.textContent = fmtCompact(tk);
602+ svg.appendChild(lbl);
603+ }
604+ svg.appendChild(svgEl("line", { x1: padL, x2: W - padR, y1: Y(0), y2: Y(0), stroke: AXIS, "stroke-width": 1 }));
605+ const colorOf = (ki) => (keys[ki] === "Autres" ? "#b9b6ac" : CAT[ki]);
606+ pts.forEach((p, i) => {
607+ let acc = 0;
608+ const segs = [];
609+ p.values.forEach((v, ki) => {
610+ if (!v || v <= 0) return;
611+ const y1 = Y(acc + v), y0 = Y(acc);
612+ // écart de surface 2 px entre segments (dans l'espace écran ≈ viewBox)
613+ const rect = svgEl("rect", { x: X(i), y: y1 + 1, width: bw, height: Math.max(0.6, y0 - y1 - 2), fill: colorOf(ki), class: "viz-bar" });
614+ svg.appendChild(rect);
615+ segs.push(rect);
616+ acc += v;
617+ });
618+ const label = fmtDateFull(p.t);
619+ const onEnter = () => {
620+ segs.forEach((s) => (s.style.opacity = "0.8"));
621+ ttRows(tt, label, keys.map((k, ki) => ({ color: colorOf(ki), value: fmtNum(p.values[ki] || 0), label: k })).filter((r) => r.value !== "0"));
622+ showTT(holder, tt, ((X(i) + bw / 2) / W) * 100, (Y(acc) / H) * 100);
623+ };
624+ const onLeave = () => { segs.forEach((s) => (s.style.opacity = "")); hideTT(tt); };
625+ segs.forEach((s) => { s.addEventListener("pointerenter", onEnter); s.addEventListener("pointerleave", onLeave); });
626+ });
627+ [0, Math.floor((n - 1) / 2), n - 1].forEach((i, k) => {
628+ const lbl = svgEl("text", { x: X(i) + bw / 2, y: H - 12, "text-anchor": k === 0 ? "start" : k === 2 ? "end" : "middle", class: "viz-tick" });
629+ lbl.textContent = fmtDate(pts[i].t);
630+ svg.appendChild(lbl);
631+ });
632+ holder.appendChild(svg);
633+ legend(card, keys.map((k, ki) => ({ label: k, color: colorOf(ki) })), "rect");
634+ twinTable(card, ["Date", ...keys], pts.map((p) => [fmtDateFull(p.t), ...keys.map((_, ki) => p.values[ki] || 0)]));
635+ return card;
636+ }
637+
638+ /* ---------- jauge demi-arc ---------- */
639+ function gauge(opts) {
640+ // opts: {label, value, max, unit, color, track}
641+ const wrap = el("div", "viz-gauge card");
642+ const W = 180, H = 108, cx = 90, cy = 96, R = 72, TH = 14;
643+ const frac = Math.max(0, Math.min(1, (opts.value || 0) / (opts.max || 100)));
644+ const svg = svgEl("svg", { viewBox: `0 0 ${W} ${H}`, role: "img", "aria-label": `${opts.label} : ${fmtNum(opts.value, opts.unit)}` });
645+ const arc = (a0, a1, color, width) => {
646+ const p = (a) => [cx + Math.cos(a) * R, cy + Math.sin(a) * R];
647+ const [x1, y1] = p(a0), [x2, y2] = p(a1);
648+ return svgEl("path", { d: `M${x1},${y1} A${R},${R} 0 ${a1 - a0 > Math.PI ? 1 : 0} 1 ${x2},${y2}`, fill: "none", stroke: color, "stroke-width": width, "stroke-linecap": "round" });
649+ };
650+ svg.appendChild(arc(Math.PI, Math.PI * 2, opts.track, TH)); // piste = pas clair de la même rampe
651+ if (frac > 0.005) svg.appendChild(arc(Math.PI, Math.PI + frac * Math.PI, opts.color, TH));
652+ const val = svgEl("text", { x: cx, y: cy - 6, "text-anchor": "middle", class: "viz-gauge-val" });
653+ val.textContent = fmtNum(opts.value, opts.unit);
654+ svg.appendChild(val);
655+ wrap.appendChild(svg);
656+ wrap.appendChild(el("div", "klabel viz-gauge-lbl", opts.label));
657+ return wrap;
658+ }
659+
660+ /* ---------- heatmap calendrier (26 semaines) ---------- */
661+ function calendarHeatmap(opts) {
662+ // opts: {title, cells:[{date, value}], accent}
663+ const { card, holder, tt } = shell(opts);
664+ const cells = (opts.cells || []).filter((c) => c && c.date);
665+ if (!cells.length) { holder.appendChild(el("div", "viz-empty", "Pas encore mesuré")); return card; }
666+ const byDate = new Map(cells.map((c) => [c.date.slice(0, 10), c.value]));
667+ const vmax = Math.max(...cells.map((c) => c.value || 0), 1);
668+ const ramp = seqRamp(opts.accent);
669+ const last = new Date(cells.map((c) => c.date.slice(0, 10)).sort().at(-1) + "T12:00:00");
670+ const CS = 13, GAP = 3, weeks = 26;
671+ const W = 40 + weeks * (CS + GAP) + 8, H = 26 + 7 * (CS + GAP) + 6;
672+ const svg = svgEl("svg", { viewBox: `0 0 ${W} ${H}`, class: "viz-svg", role: "img", "aria-label": opts.title || "calendrier d'activité" });
673+ // aligne la dernière colonne sur la semaine du dernier jour (lundi = rangée 0)
674+ const dow = (d) => (d.getDay() + 6) % 7;
675+ const end = new Date(last); end.setDate(end.getDate() + (6 - dow(last)));
676+ DOWS.forEach((d, i) => {
677+ if (i % 2) return;
678+ const lbl = svgEl("text", { x: 32, y: 26 + i * (CS + GAP) + CS - 3, "text-anchor": "end", class: "viz-tick" });
679+ lbl.textContent = d;
680+ svg.appendChild(lbl);
681+ });
682+ let lastMonth = -1;
683+ for (let w = 0; w < weeks; w++) {
684+ for (let r = 0; r < 7; r++) {
685+ const d = new Date(end);
686+ d.setDate(end.getDate() - (weeks - 1 - w) * 7 - (6 - r));
687+ const iso = d.toISOString().slice(0, 10);
688+ const v = byDate.get(iso);
689+ const x = 40 + w * (CS + GAP), y = 22 + r * (CS + GAP);
690+ if (r === 0 && d.getMonth() !== lastMonth) {
691+ lastMonth = d.getMonth();
692+ const ml = svgEl("text", { x, y: 12, class: "viz-tick" });
693+ ml.textContent = MONTHS[lastMonth];
694+ svg.appendChild(ml);
695+ }
696+ const rect = svgEl("rect", { x, y, width: CS, height: CS, rx: 3, fill: typeof v === "number" && v > 0 ? ramp(Math.sqrt(v / vmax)) : "#efede6", class: "viz-cell" });
697+ if (typeof v === "number") {
698+ rect.addEventListener("pointerenter", () => {
699+ rect.setAttribute("stroke", INK); rect.setAttribute("stroke-width", "1.4");
700+ ttRows(tt, fmtDateFull(iso), [{ color: opts.accent, value: fmtNum(v), label: opts.unit || "" }]);
701+ showTT(holder, tt, (x / W) * 100, (y / H) * 100);
702+ });
703+ rect.addEventListener("pointerleave", () => { rect.removeAttribute("stroke"); hideTT(tt); });
704+ }
705+ svg.appendChild(rect);
706+ }
707+ }
708+ holder.appendChild(svg);
709+ const sorted = [...byDate.entries()].sort();
710+ twinTable(card, ["Date", opts.unit || "Valeur"], sorted.map(([d, v]) => [fmtDateFull(d), v]));
711+ return card;
712+ }
713+
714+ /* ---------- heatmap horaire 7 × 24 (dow 0 = lundi) ---------- */
715+ function hourHeatmap(opts) {
716+ const { card, holder, tt } = shell(opts);
717+ const cells = (opts.cells || []).filter((c) => c && typeof c.dow === "number" && typeof c.hour === "number");
718+ if (!cells.length) { holder.appendChild(el("div", "viz-empty", "Pas encore mesuré")); return card; }
719+ const grid = new Map(cells.map((c) => [c.dow + ":" + c.hour, c.value]));
720+ const vmax = Math.max(...cells.map((c) => c.value || 0), 1);
721+ const ramp = seqRamp(opts.accent);
722+ const CS = 26, CH = 20, GAP = 3;
723+ const W = 46 + 24 * (CS + GAP), H = 24 + 7 * (CH + GAP) + 6;
724+ const svg = svgEl("svg", { viewBox: `0 0 ${W} ${H}`, class: "viz-svg", role: "img", "aria-label": opts.title || "activité horaire" });
725+ for (let h = 0; h < 24; h += 3) {
726+ const lbl = svgEl("text", { x: 46 + h * (CS + GAP) + CS / 2, y: 12, "text-anchor": "middle", class: "viz-tick" });
727+ lbl.textContent = h + " h";
728+ svg.appendChild(lbl);
729+ }
730+ for (let r = 0; r < 7; r++) {
731+ const lbl = svgEl("text", { x: 38, y: 22 + r * (CH + GAP) + CH - 5, "text-anchor": "end", class: "viz-tick" });
732+ lbl.textContent = DOWS[r];
733+ svg.appendChild(lbl);
734+ for (let h = 0; h < 24; h++) {
735+ const v = grid.get(r + ":" + h);
736+ const x = 46 + h * (CS + GAP), y = 18 + r * (CH + GAP);
737+ const rect = svgEl("rect", { x, y, width: CS, height: CH, rx: 3, fill: typeof v === "number" && v > 0 ? ramp(Math.sqrt(v / vmax)) : "#efede6", class: "viz-cell" });
738+ if (typeof v === "number") {
739+ rect.addEventListener("pointerenter", () => {
740+ rect.setAttribute("stroke", INK); rect.setAttribute("stroke-width", "1.4");
741+ ttRows(tt, `${DOWS[r]} ${h} h`, [{ color: opts.accent, value: fmtNum(v), label: opts.unit || "" }]);
742+ showTT(holder, tt, (x / W) * 100, (y / H) * 100);
743+ });
744+ rect.addEventListener("pointerleave", () => { rect.removeAttribute("stroke"); hideTT(tt); });
745+ }
746+ svg.appendChild(rect);
747+ }
748+ }
749+ holder.appendChild(svg);
750+ twinTable(card, ["Jour", "Heure", "Valeur"], cells.slice(0, 400).map((c) => [DOWS[c.dow] || c.dow, c.hour + " h", c.value]));
751+ return card;
752+ }
753+
754+ /* ---------- résumé statistique ---------- */
755+ function statSummary(points, unit) {
756+ const vs = (points || []).map((p) => p.v).filter((v) => typeof v === "number").sort((a, b) => a - b);
757+ const box = el("div", "viz-summary");
758+ if (vs.length < 2) return box;
759+ const mean = vs.reduce((a, v) => a + v, 0) / vs.length;
760+ const med = vs.length % 2 ? vs[(vs.length - 1) / 2] : (vs[vs.length / 2 - 1] + vs[vs.length / 2]) / 2;
761+ const sd = Math.sqrt(vs.reduce((a, v) => a + (v - mean) ** 2, 0) / vs.length);
762+ const u = unit === "$" ? "$" : "";
763+ const items = [["min", vs[0]], ["max", vs[vs.length - 1]], ["moy", mean], ["méd", med], ["σ", sd]];
764+ for (const [k, v] of items) {
765+ const chip = el("span", "viz-stat");
766+ chip.appendChild(el("span", "klabel", k));
767+ chip.appendChild(el("b", null, fmtNum(Math.round(v * 10) / 10, u)));
768+ box.appendChild(chip);
769+ }
770+ return box;
771+ }
772+
773+ /* ---------- carte KPI ---------- */
774+ function kpiCard(k, accent, deep) {
775+ const card = el("div", "kpi card");
776+ card.appendChild(el("div", "klabel kpi-label", k.label));
777+ const val = el("div", "kpi-value", fmtNum(k.value, k.unit));
778+ card.appendChild(val);
779+ const foot = el("div", "kpi-foot");
780+ if (typeof k.delta_pct === "number") {
781+ foot.appendChild(el("span", "viz-delta " + (k.delta_pct >= 0 ? "up" : "down"), (k.delta_pct >= 0 ? "▲ " : "▼ ") + nf1.format(Math.abs(k.delta_pct)) + NBSP + "% vs période préc."));
782+ }
783+ card.appendChild(foot);
784+ if (Array.isArray(k.spark) && k.spark.length > 2) {
785+ const sp = el("div", "kpi-spark");
786+ sp.appendChild(sparkline(k.spark, strokeFor(accent, deep)));
787+ card.appendChild(sp);
788+ }
789+ return card;
790+ }
791+
792+ /* ---------- tableau interactif (tri, recherche, pagination 25) ---------- */
793+ function dataTable(opts) {
794+ // opts: {title, columns, rows}
795+ const card = el("section", "viz-card viz-tablecard");
796+ const head = el("div", "viz-head");
797+ head.appendChild(el("div", "viz-title", opts.title || "Tableau"));
798+ const search = el("input", "input viz-search");
799+ search.type = "search";
800+ search.placeholder = "Filtrer…";
801+ search.setAttribute("aria-label", "Filtrer le tableau " + (opts.title || ""));
802+ head.appendChild(search);
803+ card.appendChild(head);
804+ const wrap = el("div", "tbl-wrap");
805+ const tbl = el("table", "viz-table viz-table-lg");
806+ wrap.appendChild(tbl);
807+ card.appendChild(wrap);
808+ const pager = el("div", "viz-pager");
809+ card.appendChild(pager);
810+ const cols = opts.columns || [];
811+ let rows = (opts.rows || []).map((r) => r.map((c) => c));
812+ let sortCol = -1, sortDir = 1, page = 0, query = "";
813+ const PAGE = 25;
814+ const numVal = (c) => {
815+ if (typeof c === "number") return c;
816+ const m = String(c).replace(/[\s  %$,]/g, "").replace(",", ".");
817+ const f = parseFloat(m);
818+ return Number.isNaN(f) ? null : f;
819+ };
820+ function render() {
821+ tbl.textContent = "";
822+ const thead = el("thead");
823+ const trh = el("tr");
824+ cols.forEach((c, i) => {
825+ const th = el("th");
826+ const btn = el("button", "viz-th", c + (sortCol === i ? (sortDir > 0 ? " ↑" : " ↓") : ""));
827+ btn.addEventListener("click", () => { if (sortCol === i) sortDir *= -1; else { sortCol = i; sortDir = -1; } page = 0; render(); });
828+ th.appendChild(btn);
829+ if (sortCol === i) th.setAttribute("aria-sort", sortDir > 0 ? "ascending" : "descending");
830+ trh.appendChild(th);
831+ });
832+ thead.appendChild(trh);
833+ tbl.appendChild(thead);
834+ let view = rows;
835+ if (query) {
836+ const q = query.toLowerCase();
837+ view = rows.filter((r) => r.some((c) => String(c).toLowerCase().includes(q)));
838+ }
839+ if (sortCol >= 0) {
840+ view = [...view].sort((a, b) => {
841+ const na = numVal(a[sortCol]), nb = numVal(b[sortCol]);
842+ if (na !== null && nb !== null) return (na - nb) * sortDir;
843+ return String(a[sortCol]).localeCompare(String(b[sortCol]), "fr") * sortDir;
844+ });
845+ }
846+ const pages = Math.max(1, Math.ceil(view.length / PAGE));
847+ page = Math.min(page, pages - 1);
848+ const tb = el("tbody");
849+ for (const r of view.slice(page * PAGE, page * PAGE + PAGE)) {
850+ const tr = el("tr");
851+ r.forEach((c, i) => {
852+ const isNum = numVal(c) !== null && i > 0;
853+ tr.appendChild(el("td", isNum ? "num" : null, typeof c === "number" ? fmtNum(c) : String(c ?? "—")));
854+ });
855+ tb.appendChild(tr);
856+ }
857+ tbl.appendChild(tb);
858+ pager.textContent = "";
859+ pager.appendChild(el("span", "klabel", `${nfInt.format(view.length)} lignes`));
860+ if (pages > 1) {
861+ const nav = el("span", "viz-pager-nav");
862+ const prev = el("button", "btn btn-ghost viz-pgbtn", "←");
863+ prev.disabled = page === 0;
864+ prev.addEventListener("click", () => { page--; render(); });
865+ const next = el("button", "btn btn-ghost viz-pgbtn", "→");
866+ next.disabled = page >= pages - 1;
867+ next.addEventListener("click", () => { page++; render(); });
868+ nav.appendChild(prev);
869+ nav.appendChild(el("span", "klabel", ` ${page + 1}/${pages} `));
870+ nav.appendChild(next);
871+ pager.appendChild(nav);
872+ }
873+ }
874+ search.addEventListener("input", () => { query = search.value.trim(); page = 0; render(); });
875+ render();
876+ return card;
877+ }
878+
879+ /* ---------- exports PNG / CSV ---------- */
880+ function downloadBlob(name, blob) {
881+ const a = document.createElement("a");
882+ a.href = URL.createObjectURL(blob);
883+ a.download = name;
884+ document.body.appendChild(a);
885+ a.click();
886+ setTimeout(() => { URL.revokeObjectURL(a.href); a.remove(); }, 800);
887+ }
888+ function exportCSV(name, columns, rows) {
889+ const esc = (c) => {
890+ const s = String(c ?? "");
891+ return /[",;\n]/.test(s) ? '"' + s.replace(/"/g, '""') + '"' : s;
892+ };
893+ const lines = [columns.map(esc).join(";"), ...rows.map((r) => r.map(esc).join(";"))];
894+ downloadBlob(name + ".csv", new Blob(["" + lines.join("\n")], { type: "text/csv;charset=utf-8" }));
895+ }
896+ const SVG_EXPORT_CSS = `
897+ text{font-family:system-ui,-apple-system,sans-serif;}
898+ .viz-tick{font-family:ui-monospace,monospace;font-size:10.5px;fill:#8b928c;}
899+ .viz-endlbl{font-family:ui-monospace,monospace;font-size:11px;font-weight:700;fill:#141814;paint-order:stroke;stroke:#fff;stroke-width:3px;}
900+ .viz-donut-total{font-weight:700;font-size:26px;fill:#141814;}
901+ .viz-legend-txt{font-size:12.5px;fill:#4d5551;}
902+ .viz-legend-num{font-family:ui-monospace,monospace;font-size:11.5px;font-weight:700;fill:#141814;}
903+ .viz-gauge-val{font-weight:700;font-size:24px;fill:#141814;}
904+ `;
905+ function exportPNG(container, name) {
906+ const src = container.querySelector("svg.viz-svg");
907+ if (!src) return;
908+ const clone = src.cloneNode(true);
909+ const style = document.createElementNS("http://www.w3.org/2000/svg", "style");
910+ style.textContent = SVG_EXPORT_CSS;
911+ clone.insertBefore(style, clone.firstChild);
912+ const vb = (src.getAttribute("viewBox") || "0 0 860 280").split(/\s+/).map(Number);
913+ const w = vb[2], h = vb[3];
914+ clone.setAttribute("width", w);
915+ clone.setAttribute("height", h);
916+ const xml = new XMLSerializer().serializeToString(clone);
917+ const url = URL.createObjectURL(new Blob([xml], { type: "image/svg+xml;charset=utf-8" }));
918+ const img = new Image();
919+ img.onload = () => {
920+ const canvas = document.createElement("canvas");
921+ canvas.width = w * 2; canvas.height = h * 2;
922+ const ctx = canvas.getContext("2d");
923+ ctx.fillStyle = "#ffffff";
924+ ctx.fillRect(0, 0, canvas.width, canvas.height);
925+ ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
926+ URL.revokeObjectURL(url);
927+ canvas.toBlob((b) => b && downloadBlob(name + ".png", b), "image/png");
928+ };
929+ img.src = url;
930+ }
931+
932+ /* ---------- carte à type commutable + outils (CSV/PNG/Studio) ---------- */
933+ function switchableChart(spec) {
934+ // spec: {kinds:[{id,label}], initial, render(kindId)=>node, csv:{name,columns,rows}, pngName, studioHref}
935+ const wrap = el("div", "viz-switch");
936+ const bar = el("div", "viz-toolbar");
937+ let current = spec.initial || (spec.kinds && spec.kinds[0] && spec.kinds[0].id);
938+ const slot = el("div", "viz-slot");
939+ const pillEls = [];
940+ if (spec.kinds && spec.kinds.length > 1) {
941+ const kinds = el("div", "viz-kindrow");
942+ kinds.setAttribute("role", "group");
943+ kinds.setAttribute("aria-label", "Type de graphique");
944+ for (const k of spec.kinds) {
945+ const b = el("button", "pill viz-kindpill" + (k.id === current ? " active" : ""), k.label);
946+ b.type = "button";
947+ b.addEventListener("click", () => {
948+ current = k.id;
949+ pillEls.forEach((p) => p.classList.toggle("active", p === b));
950+ show();
951+ });
952+ pillEls.push(b);
953+ kinds.appendChild(b);
954+ }
955+ bar.appendChild(kinds);
956+ }
957+ const tools = el("div", "viz-tools");
958+ if (spec.csv) {
959+ const b = el("button", "viz-toolbtn", "⭳ CSV");
960+ b.type = "button"; b.title = "Exporter les données (CSV)";
961+ b.addEventListener("click", () => exportCSV(spec.csv.name, spec.csv.columns, spec.csv.rows));
962+ tools.appendChild(b);
963+ }
964+ if (spec.pngName) {
965+ const b = el("button", "viz-toolbtn", "⭳ PNG");
966+ b.type = "button"; b.title = "Exporter l'image (PNG)";
967+ b.addEventListener("click", () => exportPNG(slot, spec.pngName));
968+ tools.appendChild(b);
969+ }
970+ if (spec.studioHref) {
971+ const a = el("a", "viz-toolbtn", "✦ Studio");
972+ a.href = spec.studioHref;
973+ a.dataset.link = "1";
974+ a.title = "Ouvrir cette métrique dans le Studio d'indicateurs";
975+ tools.appendChild(a);
976+ }
977+ if (tools.childNodes.length) bar.appendChild(tools);
978+ if (bar.childNodes.length) wrap.appendChild(bar);
979+ wrap.appendChild(slot);
980+ function show() {
981+ slot.textContent = "";
982+ slot.appendChild(spec.render(current));
983+ }
984+ show();
985+ return wrap;
986+ }
987+
988+ return {
989+ CAT, DASHES, GREEN, DANGER,
990+ fmtNum, fmtCompact, fmtDate, fmtDateFull, el, strokeFor, seqRamp, mix, contrastWhite,
991+ sparkline, lineChart, vBarChart, hBarChart, donut, stackedBar, gauge,
992+ calendarHeatmap, hourHeatmap, statSummary, kpiCard, dataTable,
993+ exportCSV, exportPNG, switchableChart,
994+ };
995+})();
added public/favicon.svg +5 −0
Large diff (5 lines) is not loaded by default to keep the page fast.Load diff
added public/fonts/JetBrainsMono-Bold.ttf +0 −0

Binary file not shown.

added public/fonts/JetBrainsMono-Regular.ttf +0 −0

Binary file not shown.

added public/fonts/SpaceGrotesk-Bold.ttf +0 −0

Binary file not shown.

added public/fonts/SpaceGrotesk-Medium.ttf +0 −0

Binary file not shown.

added public/fonts/SpaceGrotesk-Regular.ttf +0 −0

Binary file not shown.

added public/index.html +39 −0
Large diff (39 lines) is not loaded by default to keep the page fast.Load diff
added public/og.png +0 −0

Binary file not shown.

added public/robots.txt +4 −0
Large diff (4 lines) is not loaded by default to keep the page fast.Load diff
added public/sitemap.xml +20 −0
Large diff (20 lines) is not loaded by default to keep the page fast.Load diff
added public/styles.css +349 −0
Large diff (349 lines) is not loaded by default to keep the page fast.Load diff
added public/tokens.css +319 −0
Large diff (319 lines) is not loaded by default to keep the page fast.Load diff
added server.mjs +392 −0
Large diff (393 lines) is not loaded by default to keep the page fast.Load diff
Menu

Theme
↑↓navigate ↵open escclose /⌘Kanywhere