SPB Git
spboucher.ai

spb/resto-ka

Public

Resto·Ka — tous les restaurants du Québec, menus complets et prix réels (famille ·Ka)

Stats v2 : dashboard ultra complet + 5 rapports PDF (module commun Groupe KA v2)

- kit vendorisé mis au niveau canonique v2 (kacharts.tsx, kapdf.py, SPEC.md)
- backend stats.py : 10 KPI (deltas + sparklines), 6 jauges de complétude,
  4 séries quotidiennes, multi-courbes prix moyen par ville, ajouts par
  source empilés, 4 répartitions, 3 distributions (prix de plats, capacités
  RACJ, notes Yelp), heatmap horaire des relevés, 6 tableaux, 12 records
- /api/stats/report : 5 modes (complet|synthese|tendances|repartitions|
  donnees), inconnu -> complet, filename(mode)
- page /stats : jauges, StatSummary, MultiLine/Stacked/Histogram/HourHeatmap,
  PdfButton v2 (menu 5 rapports)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Simon-Pierre Boucher committed (Aug 19, 2026) parent a9e4fb2 Browse files

10 changed files +1,961 −317

10 changed files
Load all 10 files Unified Split
modified data/ueat-discovered.json +104 −0
@@ -159,6 +159,110 @@
159 { 159 {
160 "key": "d42e5dd2-815c-4803-930d-ae0ee95b1e4b", 160 "key": "d42e5dd2-815c-4803-930d-ae0ee95b1e4b",
161 "label": "Bol de Vie (découvert via boldevie.ca)" 161 "label": "Bol de Vie (découvert via boldevie.ca)"
162+ },
163+ {
164+ "key": "4ccf6bdd-0fae-42e9-8ae4-8f5670c905cf",
165+ "label": "Coba (découvert via restaurantcoba.com)"
166+ },
167+ {
168+ "key": "841868c1-02a9-4a1e-bb9d-c01d33587ee3",
169+ "label": "Piri Piri Rôtisserie Portugaise (découvert via piri-piri.ca)"
170+ },
171+ {
172+ "key": "5be5aa7d-f64c-4aaa-82a9-d6f764696de8",
173+ "label": "Sushi Time (découvert via sushitime-mtl.com)"
174+ },
175+ {
176+ "key": "1d25d02b-8346-4aee-8170-9bbe489e4aea",
177+ "label": "Atlas Pizza (découvert via atlaspizza.ca)"
178+ },
179+ {
180+ "key": "2331b263-c983-4482-9826-37c6ded2a447",
181+ "label": "Ubi Sushi (découvert via ubisushi.ca)"
182+ },
183+ {
184+ "key": "be6444ec-a9ac-4ecc-bd50-798d883b423a",
185+ "label": "O Fuzion (découvert via ofuzionmontreal.com)"
186+ },
187+ {
188+ "key": "65ade9ac-96d0-43e4-a95f-d43abef9b28c",
189+ "label": "Jacques Cartier Pizza (découvert via jacquescartierpizza.com)"
190+ },
191+ {
192+ "key": "691dd353-f1e7-4cb9-ab45-9a26395ada43",
193+ "label": "Le Jardin de Panos (découvert via lejardindepanos.com)"
194+ },
195+ {
196+ "key": "f8770d29-c21e-4a52-a563-927d11d8b555",
197+ "label": "Mama Khan (découvert via mamakhan.ca)"
198+ },
199+ {
200+ "key": "20490e01-9803-44a4-8f0b-afc79fb78957",
201+ "label": "F+F Pizza — Beaubien (découvert via ffpizza.com)"
202+ },
203+ {
204+ "key": "46f4245a-0868-490a-882e-cde290c69ef4",
205+ "label": "Souvlaki Bar — Verdun (découvert via souvlakibar.ca)"
206+ },
207+ {
208+ "key": "815ae848-a8ad-4a15-8f1a-7ad7998f8bf8",
209+ "label": "Les deux fours (découvert via lesdeuxfours.ca)"
210+ },
211+ {
212+ "key": "e22c23d8-e195-415b-a2ba-21bb7398d421",
213+ "label": "Poke Monster (découvert via pokemonster.com)"
214+ },
215+ {
216+ "key": "4268100d-6470-40b9-a755-e11342c91d6d",
217+ "label": "Poulet Rouge (découvert via poulet-rouge.ca)"
218+ },
219+ {
220+ "key": "3a2610a1-1549-48e5-a08d-74a46bab56e9",
221+ "label": "Edward Smoked Meat (découvert via edwardsmokedmeat.com)"
222+ },
223+ {
224+ "key": "ee4856e5-33db-441a-bdbe-60da473a9f8e",
225+ "label": "Samon Sushi (découvert via samonsushi.com)"
226+ },
227+ {
228+ "key": "41c9d5fc-eb0a-43b9-87eb-789211d9e64e",
229+ "label": "Blaxton Centre Vidéotron (découvert via blaxton.com)"
230+ },
231+ {
232+ "key": "365c4087-4be8-4c90-b6d3-f21fd02fd8f0",
233+ "label": "Becco Pizza (découvert via beccopizza.com)"
234+ },
235+ {
236+ "key": "e473d88d-b405-41ee-9ee8-2aa628eee604",
237+ "label": "ThaïZone (découvert via thaizone.ca)"
238+ },
239+ {
240+ "key": "25aeb2a7-9693-434f-8c60-3d390b13ec0d",
241+ "label": "Planète Poutine (découvert via planetepoutine.com)"
242+ },
243+ {
244+ "key": "1696ecd3-d4ea-4224-9f98-9299ebcb339c",
245+ "label": "Mandy’s Salades Gourmandes (découvert via mandys.ca)"
246+ },
247+ {
248+ "key": "f2ed2c82-8a8a-4335-ade5-2c667d4f5d6e",
249+ "label": "Ogari San Sushi (découvert via ogarisan.com)"
250+ },
251+ {
252+ "key": "48841e4f-9109-4c54-9c64-325f8546ad55",
253+ "label": "QDC Burger (découvert via qdcburger.com)"
254+ },
255+ {
256+ "key": "5d5542c1-e9d4-4d7d-91b4-73fe4c60081d",
257+ "label": "Mucho Burrito (découvert via muchoburrito.com)"
258+ },
259+ {
260+ "key": "e9f4d78d-feb0-42cc-85a3-8573b252c56d",
261+ "label": "Le Crêpe Chignon - Café Crêperie (découvert via crepechignon.com)"
262+ },
263+ {
264+ "key": "a2b6f390-ff59-4ba1-a3c4-de5b9c50ffe9",
265+ "label": "Café Dépôt (découvert via cafedepot.com)"
162 } 266 }
163 ] 267 ]
164 } 268 }
\ No newline at end of file
modified frontend/public/ka-agent.js +25 −7
@@ -17,18 +17,19 @@
17 17
18 /* ---------- styles ---------- */ 18 /* ---------- styles ---------- */
19 var css = ` 19 var css = `
20− .kaa-btn{position:fixed;right:18px;bottom:18px;z-index:2147483000;width:58px;height:58px; 20+ .kaa-btn{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:2147483000;width:58px;height:58px;
21 border-radius:50%;border:2px solid var(--ink,#141814);background:var(--accent,#d9f26b); 21 border-radius:50%;border:2px solid var(--ink,#141814);background:var(--accent,#d9f26b);
22 color:var(--on-accent,#141814);font:700 17px/1 "Space Grotesk",system-ui,sans-serif; 22 color:var(--on-accent,#141814);font:700 17px/1 "Space Grotesk",system-ui,sans-serif;
23 cursor:pointer;box-shadow:4px 4px 0 rgba(20,24,20,.85);display:flex;align-items:center; 23 cursor:pointer;box-shadow:4px 4px 0 rgba(20,24,20,.85);display:flex;align-items:center;
24− justify-content:center;transition:transform .15s;padding-bottom:env(safe-area-inset-bottom,0)} 24+ justify-content:center;transition:transform .15s}
25 .kaa-btn:hover{transform:translate(-2px,-2px)} 25 .kaa-btn:hover{transform:translate(-2px,-2px)}
26− .kaa-panel{position:fixed;right:16px;bottom:86px;z-index:2147483001;width:min(392px,calc(100vw - 24px)); 26+ .kaa-panel{position:fixed;right:16px;bottom:calc(86px + env(safe-area-inset-bottom,0px));z-index:2147483001;width:min(392px,calc(100vw - 24px));
27− height:min(580px,calc(100dvh - 110px));display:none;flex-direction:column;background:var(--paper,#f5f3ee); 27+ height:min(580px,calc(100vh - 110px));height:min(580px,calc(100dvh - 110px));display:none;flex-direction:column;background:var(--paper,#f5f3ee);
28 border:2px solid var(--ink,#141814);border-radius:14px;box-shadow:8px 8px 0 rgba(20,24,20,.85); 28 border:2px solid var(--ink,#141814);border-radius:14px;box-shadow:8px 8px 0 rgba(20,24,20,.85);
29 overflow:hidden;font-family:Inter,system-ui,sans-serif} 29 overflow:hidden;font-family:Inter,system-ui,sans-serif}
30 .kaa-panel.kaa-open{display:flex} 30 .kaa-panel.kaa-open{display:flex}
31− .kaa-panel.kaa-full{right:0;bottom:0;width:100vw;height:100dvh;border-radius:0;border:0;box-shadow:none} 31+ .kaa-panel.kaa-full{right:0;bottom:0;width:100vw;height:100vh;height:100dvh;border-radius:0;border:0;box-shadow:none}
32+ html.kaa-lock,html.kaa-lock body{overflow:hidden!important;overscroll-behavior:none}
32 .kaa-head{display:flex;align-items:center;gap:9px;padding:11px 14px;background:var(--ink,#141814); 33 .kaa-head{display:flex;align-items:center;gap:9px;padding:11px 14px;background:var(--ink,#141814);
33 color:var(--paper,#f5f3ee);flex:none} 34 color:var(--paper,#f5f3ee);flex:none}
34 .kaa-head b{font:700 15px "Space Grotesk",system-ui,sans-serif;letter-spacing:-.02em} 35 .kaa-head b{font:700 15px "Space Grotesk",system-ui,sans-serif;letter-spacing:-.02em}
@@ -53,7 +54,7 @@
53 border-radius:999px;background:var(--surface-2,#faf9f5)} 54 border-radius:999px;background:var(--surface-2,#faf9f5)}
54 .kaa-in{display:flex;gap:8px;padding:11px;border-top:2px solid var(--ink,#141814);background:#fff;flex:none; 55 .kaa-in{display:flex;gap:8px;padding:11px;border-top:2px solid var(--ink,#141814);background:#fff;flex:none;
55 padding-bottom:calc(11px + env(safe-area-inset-bottom,0))} 56 padding-bottom:calc(11px + env(safe-area-inset-bottom,0))}
56− .kaa-in textarea{flex:1;resize:none;min-height:44px;max-height:110px;padding:11px 12px;font:13.5px/1.4 Inter,system-ui,sans-serif; 57+ .kaa-in textarea{flex:1;resize:none;min-height:44px;max-height:110px;padding:10px 12px;font:16px/1.4 Inter,system-ui,sans-serif;
57 border:1.5px solid var(--ink,#141814);border-radius:9px;background:var(--paper,#f5f3ee);outline:none} 58 border:1.5px solid var(--ink,#141814);border-radius:9px;background:var(--paper,#f5f3ee);outline:none}
58 .kaa-in button{min-width:52px;min-height:44px;border:1.5px solid var(--ink,#141814);border-radius:9px; 59 .kaa-in button{min-width:52px;min-height:44px;border:1.5px solid var(--ink,#141814);border-radius:9px;
59 background:var(--ink,#141814);color:var(--accent,#d9f26b);font:700 16px "Space Grotesk",system-ui;cursor:pointer} 60 background:var(--ink,#141814);color:var(--accent,#d9f26b);font:700 16px "Space Grotesk",system-ui;cursor:pointer}
@@ -142,15 +143,32 @@
142 } 143 }
143 144
144 /* ---------- ouverture / plein écran ---------- */ 145 /* ---------- ouverture / plein écran ---------- */
146+ /* Sur téléphone : panneau plein écran d'office + scroll d'arrière-plan
147+ verrouillé tant qu'il est ouvert (html.kaa-lock). Pas de focus clavier
148+ forcé au tap (le clavier ne s'ouvre que si l'utilisateur touche le champ). */
149+ var mobileMq = window.matchMedia("(max-width: 640px)");
150+ var fineInput = window.matchMedia("(hover: hover) and (pointer: fine)");
151+ function syncLock() {
152+ var open = panel.classList.contains("kaa-open");
153+ if (open && mobileMq.matches) panel.classList.add("kaa-full");
154+ document.documentElement.classList.toggle(
155+ "kaa-lock", open && panel.classList.contains("kaa-full"));
156+ }
145 btn.addEventListener("click", function () { 157 btn.addEventListener("click", function () {
146 panel.classList.toggle("kaa-open"); 158 panel.classList.toggle("kaa-open");
147− if (panel.classList.contains("kaa-open")) { render(); ta.focus(); } 159+ if (panel.classList.contains("kaa-open")) {
160+ render();
161+ if (fineInput.matches) ta.focus();
162+ }
163+ syncLock();
148 }); 164 });
149 panel.querySelector(".kaa-x2").addEventListener("click", function () { 165 panel.querySelector(".kaa-x2").addEventListener("click", function () {
150 panel.classList.remove("kaa-open", "kaa-full"); 166 panel.classList.remove("kaa-open", "kaa-full");
167+ syncLock();
151 }); 168 });
152 panel.querySelector(".kaa-x1").addEventListener("click", function () { 169 panel.querySelector(".kaa-x1").addEventListener("click", function () {
153 panel.classList.toggle("kaa-full"); 170 panel.classList.toggle("kaa-full");
171+ syncLock();
154 scroll(); 172 scroll();
155 }); 173 });
156 174
modified frontend/src/ka/stats/SPEC.md +128 −66
@@ -1,53 +1,88 @@
1−# ka-stats — module Stats commun Groupe KA (spec v1) 1+# ka-stats — module Stats commun Groupe KA (spec v2)
2 2
3−Contrat partagé par les 12 plateformes pour leurs pages **/stats** (tableau de 3+Contrat partagé par les plateformes pour leurs pages **/stats** (tableau de
4−bord analytique) et l'**export PDF** estampillé Groupe-KA. Le visuel suit le 4+bord analytique) et les **exports PDF** estampillés Groupe-KA. Le visuel suit
5−design system ka-ui (tokens.css) avec l'accent de la marque. 5+le design system ka-ui (tokens.css) avec l'accent de la marque.
6+
7+**v2 (2026-08-19)** : sparklines dans les KPI, jauges, multi-courbes,
8+barres empilées, distributions (histogrammes), heatmap horaire 7×24, deltas
9+sur les répartitions, statistiques de séries (min/max/moy/méd/σ), et **5
10+rapports PDF** au lieu de 2. Tous les nouveaux champs sont **optionnels** :
11+un dashboard v1 reste valide et se rend tel quel.
6 12
7 ## 1. Page /stats — structure obligatoire (dans cet ordre) 13 ## 1. Page /stats — structure obligatoire (dans cet ordre)
8 14
9−1. **Bandeau KPI** : 4–6 grandes cartes (`KpiCard`) — valeur, libellé, 15+1. **Bandeau KPI** : 6–10 grandes cartes (`KpiCard`) — valeur, libellé,
10− variation vs période précédente (▲/▼ + %, vert `--green` / rouge `--danger`). 16+ variation vs période précédente (▲/▼ + %, vert `--green` / rouge
17+ `--danger`), **sparkline** de tendance quand une série existe.
11 2. **Sélecteur de période global** (`PeriodSelector`) : `aujourd'hui · 7 j · 18 2. **Sélecteur de période global** (`PeriodSelector`) : `aujourd'hui · 7 j ·
12 30 j · 3 m · 6 m · 12 m · année en cours · tout` + plage personnalisée 19 30 j · 3 m · 6 m · 12 m · année en cours · tout` + plage personnalisée
13 (2 champs date). Toute la page se recalcule (state → refetch dashboard). 20 (2 champs date). Toute la page se recalcule (state → refetch dashboard).
14−3. **Graphiques** : courbes d'évolution (`LineChart`, survol = infobulle, 21+3. **Jauges** (`GaugeCard`) quand pertinent : taux, couvertures, complétude.
15− légende cliquable pour masquer une série, comparaison N vs N-1 en 22+4. **Graphiques d'évolution** : courbes/aires (`LineChart`, survol =
16− pointillé), barres (`BarChart`), anneaux (`Donut`), calendrier de chaleur 23+ infobulle, légende cliquable, comparaison N vs N-1 en pointillé), barres
17− (`CalendarHeatmap`) quand pertinent. 24+ verticales (`VBarChart` — volumes quotidiens), **multi-courbes ≤ 4 séries**
18−4. **Répartition géographique** (par ville/région) quand pertinent — barres 25+ (`MultiLineChart` — motifs de trait distincts, jamais la couleur seule),
19− horizontales triées (pas besoin de vraie carte). 26+ **barres empilées** (`StackedBarChart` — composition dans le temps).
20−5. **Tableaux détaillés** (`DataTable`) : tri par colonne, recherche interne, 27+ Sous les courbes clés : `StatSummary` (min/max/moyenne/médiane/écart-type).
28+5. **Répartitions** : barres horizontales (`BarChart`, deltas optionnels),
29+ anneaux (`Donut`), **distributions/histogrammes** (`Histogram`).
30+6. **Répartition géographique** (par ville/région) — barres horizontales
31+ triées (pas besoin de vraie carte).
32+7. **Calendriers** : `CalendarHeatmap` (26 semaines) et, quand l'activité
33+ horaire est journalisée, `HourHeatmap` (7 jours × 24 h).
34+8. **Tableaux détaillés** (`DataTable`) : tri par colonne, recherche interne,
21 pagination (25/pg), débordement horizontal propre sur mobile (.tbl-wrap). 35 pagination (25/pg), débordement horizontal propre sur mobile (.tbl-wrap).
22−6. **Records & faits marquants** : générés depuis les données (jour record, 36+ Viser 3 à 5 tableaux par plateforme.
23− plus forte croissance, meilleure entrée…) — cartes compactes. 37+9. **Records & faits marquants** : générés depuis les données (jour record,
24−7. **Fraîcheur** : « Mis à jour le {date heure} » + bouton Rafraîchir. 38+ plus forte croissance, meilleure entrée…) — cartes compactes, 6–12.
25−8. **Bouton PDF** bien visible en haut : « Télécharger le rapport PDF » avec 39+10. **Fraîcheur** : « Mis à jour le {date heure} » + bouton Rafraîchir.
26− deux choix (Rapport complet / Synthèse 2 pages). Indicateur de progression 40+11. **Bouton PDF** bien visible en haut (`PdfButton`) : bouton principal
27− si > 2 s. 41+ « Rapport PDF complet » + menu « Autres rapports ▾ » listant les
42+ **5 rapports** (voir §3). Indicateur de progression si > 2 s.
28 43
29 Responsive : KPI empilés < 768 px, graphiques pleine largeur redimensionnés 44 Responsive : KPI empilés < 768 px, graphiques pleine largeur redimensionnés
30 (SVG viewBox), tableaux en défilement horizontal contenu, tactile ≥ 44 px. 45 (SVG viewBox), tableaux en défilement horizontal contenu, tactile ≥ 44 px.
31 AUCUNE donnée inventée : une stat indisponible = bloc « Pas encore mesuré » 46 AUCUNE donnée inventée : une stat indisponible = bloc « Pas encore mesuré »
32 (carte grise propre), jamais un faux chiffre. 47 (carte grise propre), jamais un faux chiffre.
33 48
49+Accessibilité (règles fermes) : un seul axe Y par graphique (jamais de
50+double échelle) ; ≥ 2 séries ⇒ légende obligatoire ; l'identité d'une série
51+multi-courbes passe par le **motif de trait** en plus de la couleur ; le
52+texte reste en encre (jamais coloré à la couleur de série) ; chaque
53+graphique a son infobulle de survol et un équivalent tableau existe.
54+
34 ## 2. API — contrat commun 55 ## 2. API — contrat commun
35 56
36 `GET /api/stats/dashboard?period=7j|30j|3m|6m|12m|annee|tout|auj&from=YYYY-MM-DD&to=YYYY-MM-DD` 57 `GET /api/stats/dashboard?period=7j|30j|3m|6m|12m|annee|tout|auj&from=YYYY-MM-DD&to=YYYY-MM-DD`
37 58
38 ```jsonc 59 ```jsonc
39 { 60 {
40− "updated": "2026-08-17T21:04:00-04:00", 61+ "updated": "2026-08-19T01:00:00-04:00",
41− "period": { "from": "2026-07-18", "to": "2026-08-17", "label": "30 jours" }, 62+ "period": { "from": "2026-07-20", "to": "2026-08-19", "label": "30 jours" },
42 "kpis": [ { "id": "total", "label": "Annonces actives", "value": 33744, 63 "kpis": [ { "id": "total", "label": "Annonces actives", "value": 33744,
43− "unit": "", "delta_pct": 4.2, "direction": "up" } ], 64+ "unit": "", "delta_pct": 4.2, "direction": "up",
65+ "spark": [{ "t": "2026-08-01", "v": 31200 }] } ], // spark optionnel
66+ "gauges": [ { "id": "geo", "label": "Fiches géolocalisées", "value": 92,
67+ "max": 100, "unit": "%" } ], // optionnel
44 "series": [ { "id": "vol", "title": "Annonces actives par jour", "unit": "annonces", 68 "series": [ { "id": "vol", "title": "Annonces actives par jour", "unit": "annonces",
45− "kind": "line", "points": [{ "t": "2026-07-18", "v": 31200 }], 69+ "kind": "line", // line | bar | area
46− "compare": [{ "t": "2025-07-18", "v": 24100 }] } ], 70+ "points": [{ "t": "2026-07-20", "v": 31200 }],
47− "breakdowns": [ { "id": "types", "title": "Par type", "kind": "donut", 71+ "compare": [{ "t": "2025-07-20", "v": 24100 }] } ],
48− "items": [{ "label": "4½", "value": 9120 }] } ], 72+ "multiseries": [ { "id": "seg", "title": "Prix médian par taille", "unit": "$",
73+ "series": [ { "label": "3½", "points": [/* … */] },
74+ { "label": "4½", "points": [/* … */] } ] } ], // ≤ 4
75+ "stacked": [ { "id": "src", "title": "Ajouts par source", "unit": "ajouts",
76+ "keys": ["Kijiji", "Centris", "Autres"],
77+ "points": [{ "t": "2026-08-01", "values": [120, 80, 30] }] } ],
78+ "breakdowns": [ { "id": "types", "title": "Par type", "kind": "donut", // donut | bars
79+ "items": [{ "label": "4½", "value": 9120, "delta_pct": 2.1 }] } ],
80+ "distributions": [ { "id": "prix", "title": "Distribution des loyers", "unit": "annonces",
81+ "bins": [{ "label": "800-1000$", "value": 3120 }] } ],
49 "geo": { "title": "Par région", "items": [{ "label": "Montréal", "value": 15680 }] }, 82 "geo": { "title": "Par région", "items": [{ "label": "Montréal", "value": 15680 }] },
50 "heatmap": { "title": "Activité", "cells": [{ "date": "2026-08-01", "value": 210 }] }, 83 "heatmap": { "title": "Activité", "cells": [{ "date": "2026-08-01", "value": 210 }] },
84+ "hourly": { "title": "Activité par heure",
85+ "cells": [{ "dow": 0, "hour": 9, "value": 40 }] }, // dow 0=lun … 6=dim
51 "tables": [ { "id": "top", "title": "Top villes", "columns": ["Ville", "Annonces", "Δ 30 j"], 86 "tables": [ { "id": "top", "title": "Top villes", "columns": ["Ville", "Annonces", "Δ 30 j"],
52 "rows": [["Montréal", 15680, "+3,1 %"]] } ], 87 "rows": [["Montréal", 15680, "+3,1 %"]] } ],
53 "records": [ { "label": "Jour record d'ajouts", "value": "412 annonces", "date": "2026-08-09" } ] 88 "records": [ { "label": "Jour record d'ajouts", "value": "412 annonces", "date": "2026-08-09" } ]
@@ -56,23 +91,40 @@ AUCUNE donnée inventée : une stat indisponible = bloc « Pas encore mesuré »
56 91
57 Champs absents = section masquée. Cache serveur recommandé (≥ 5 min par 92 Champs absents = section masquée. Cache serveur recommandé (≥ 5 min par
58 période). Les valeurs proviennent des données réelles (DB de la plateforme, 93 période). Les valeurs proviennent des données réelles (DB de la plateforme,
59−journaux de sync des connecteurs, /api/v1/runs d'API-KA…). 94+journaux de sync des connecteurs, /api/v1/runs d'API-KA…). Arrondir les
95+`delta_pct` à 1 décimale côté serveur.
60 96
61−`GET /api/stats/report?period=…&from=&to=&mode=complet|synthese` 97+## 3. Rapports PDF — 5 modes
98+
99+`GET /api/stats/report?period=…&from=&to=&mode=complet|synthese|tendances|repartitions|donnees`
62 → `application/pdf`, en-tête `Content-Disposition: attachment; filename= 100 → `application/pdf`, en-tête `Content-Disposition: attachment; filename=
63−groupe-ka_<plateforme>_stats_<periode>_<YYYY-MM-DD>.pdf`. 101+groupe-ka_<plateforme>_stats_<periode>[_<mode>]_<YYYY-MM-DD>.pdf`
102+(pas de suffixe pour `complet` — rétrocompatible v1 ; `kapdf.filename()`
103+accepte maintenant `mode` en 3e argument).
104+
105+| Mode | Contenu |
106+|---|---|
107+| `complet` | tout : sommaire, KPI, jauges, séries + stats de séries, multi-séries, empilées, répartitions, distributions, géo, heatmap horaire, tableaux (200 lignes), records |
108+| `synthese` | couverture + KPI + jauges + records (2–3 pages) |
109+| `tendances` | KPI + toutes les séries temporelles + min/max/moy/méd/σ + records |
110+| `repartitions` | breakdowns, distributions, géo, activité horaire |
111+| `donnees` | tous les tableaux en version longue (400 lignes) |
64 112
65−## 3. PDF — gabarit Groupe-KA (implémentations : `kapdf.py` fpdf2 pour les 113+Un `mode` inconnu retombe sur `complet`. Le gabarit (implémentations :
66−apps Python ; les apps Next portent le même gabarit en pdfkit) 114+`kapdf.py` fpdf2 pour les apps Python ; les apps Next portent le même
115+gabarit en pdfkit) :
67 116
68 - **Couverture** : cadre encre, kicker « GROUPE KA · RAPPORT STATISTIQUE », 117 - **Couverture** : cadre encre, kicker « GROUPE KA · RAPPORT STATISTIQUE »,
69− wordmark de la plateforme (boîte encre + accent), sous-titre, période 118+ wordmark de la plateforme (boîte encre + accent), **type de rapport**,
70− couverte, date/heure de génération, bande encre au pied avec 119+ période couverte, date/heure de génération, bande encre au pied avec
71 « par Groupe KA — groupe-ka.com ». 120 « par Groupe KA — groupe-ka.com ».
72−- **Sommaire** avec numéros de pages (mode complet). 121+- **Sommaire** avec numéros de pages (modes complet et donnees).
73−- **KPI** : grille de cartes (bordure encre, valeur en gros, delta coloré). 122+- **KPI** : grille de cartes (bordure encre, valeur en gros, delta coloré
123+ arrondi à 1 décimale). **Jauges** : demi-arcs accent.
74 - **Graphiques VECTORIELS** (dessinés en primitives, jamais de capture) : 124 - **Graphiques VECTORIELS** (dessinés en primitives, jamais de capture) :
75− courbes, barres, anneaux — accent de la plateforme, axes/graduations encre. 125+ courbes/aires, barres verticales, multi-courbes (motifs distincts),
126+ empilées (nuances d'accent), anneaux, heatmap horaire — accent de la
127+ plateforme, axes/graduations encre.
76 - **Tableaux** paginés proprement (lignes zébrées `--surface-2`, jamais 128 - **Tableaux** paginés proprement (lignes zébrées `--surface-2`, jamais
77 coupés en deux à cheval sur une ligne). 129 coupés en deux à cheval sur une ligne).
78 - **Records** puis **page de fin** : coordonnées Groupe KA (3 courriels + 130 - **Records** puis **page de fin** : coordonnées Groupe KA (3 courriels +
@@ -81,43 +133,53 @@ apps Python ; les apps Next portent le même gabarit en pdfkit)
81 - **Chaque page** : en-tête discret (« Groupe KA · {Plateforme} », filet 133 - **Chaque page** : en-tête discret (« Groupe KA · {Plateforme} », filet
82 encre) + pied (« © Groupe-KA — {année} — groupe-ka.com · {période} · p. X/Y »). 134 encre) + pied (« © Groupe-KA — {année} — groupe-ka.com · {période} · p. X/Y »).
83 - A4 portrait, marges 18 mm, typo : Helvetica (fallback sûr) ou fonts TTF du 135 - A4 portrait, marges 18 mm, typo : Helvetica (fallback sûr) ou fonts TTF du
84− DS si présentes. Mode « synthese » = couverture + 1 page KPI/records. 136+ DS si présentes.
85 137
86 ## 4. Spécifique par plateforme (sections métier attendues) 138 ## 4. Spécifique par plateforme (sections métier attendues)
87 139
88−- **groupe-ka** : tableau de bord maître — consolidation des 12 (volume total, 140+- **groupe-ka** : tableau de bord maître — consolidation des plateformes
89− croissance), classement des plateformes, bloc résumé par plateforme + lien 141+ (volume total, croissance), classement, bloc résumé par plateforme + lien
90 vers sa page /stats ; « Rapport écosystème complet » = PDF consolidé. 142 vers sa page /stats ; « Rapport écosystème complet » = PDF consolidé.
91 - **lou-ka** : annonces actives/nouvelles/retirées, loyers moyens/médians par 143 - **lou-ka** : annonces actives/nouvelles/retirées, loyers moyens/médians par
92− ville & taille, évolution, répartition par type, top villes. 144+ ville & taille (multiseries), distribution des loyers, évolution,
93−- **immo-ka** : annonces actives/nouvelles/vendues-retirées, prix moyen/médian 145+ répartition par type, top villes, sources (stacked).
94− par ville/région/type, délai de présence, top villes, tension du marché. 146+- **immo-ka** : annonces actives/nouvelles/vendues-retirées, prix
147+ moyen/médian par ville/région/type (multiseries), distribution des prix,
148+ délai de présence, top villes, tension du marché.
95 - **vrai-prix** : couverture du rôle (unités, valeur totale), estimations 149 - **vrai-prix** : couverture du rôle (unités, valeur totale), estimations
96− servies si journalisées, répartitions par municipalité/type, indices marché. 150+ servies si journalisées, répartitions par municipalité/type, distribution
97−- **auto-ka** : volume par marque/modèle/année/carburant/boîte, prix moyens et 151+ des valeurs, indices marché.
98− km moyens par segment, top marques/modèles. 152+- **auto-ka** : volume par marque/modèle/année/carburant/boîte, prix moyens
99−- **fabri-ka** : produits par catégorie/région/boutique, fourchettes de prix, 153+ et km moyens par segment (multiseries), distributions prix/km/année,
100− nouveautés par période, top catégories. 154+ top marques/modèles.
101−- **food-ka** : produits suivis, relevés de prix, soldes détectés (baisses/ 155+- **fabri-ka** : produits par catégorie/région/boutique, fourchettes de prix
102− hausses, amplitude), top produits en solde, prix moyens par catégorie. 156+ (distribution), nouveautés par période, top catégories.
103−- **resto-ka** : restos par cuisine/ville/gamme, menus & plats, nouveautés/ 157+- **food-ka** : produits suivis, relevés de prix, soldes détectés
104− fermetures détectées, top établissements. 158+ (baisses/hausses, amplitude — stacked), top produits en solde, prix moyens
159+ par catégorie, distribution des rabais.
160+- **resto-ka** : restos par cuisine/ville/gamme, menus & plats, distribution
161+ des prix de plats, nouveautés/fermetures détectées, top établissements.
105 - **sorti-ka** : événements à venir/passés par catégorie/ville, gratuits vs 162 - **sorti-ka** : événements à venir/passés par catégorie/ville, gratuits vs
106− payants, heatmap calendrier, top lieux. 163+ payants (stacked), heatmap calendrier + horaire, top lieux.
107−- **crea-ka** : créateurs par plateforme/niche/tier, comptes reliés, top 164+- **crea-ka** : créateurs par plateforme/niche/tier, comptes reliés
108− créateurs, croissance du répertoire. 165+ (stacked par plateforme), distribution des audiences, top créateurs,
109−- **trouve-ka** : pages indexées, domaines, rythme de crawl (indexées/h), 166+ croissance du répertoire.
110− erreurs, file frontier, tendances si les requêtes sont journalisées. 167+- **trouve-ka** : pages indexées, domaines, rythme de crawl (indexées/h —
111−- **api-ka** : appels par endpoint/jour/heure, latences moyennes + p95, taux 168+ hourly), erreurs, file frontier, tendances des requêtes journalisées.
112− d'erreur, top endpoints, uptime (données des middlewares de logging + runs). 169+- **api-ka** : appels par endpoint/jour/heure (hourly), latences moyennes +
113−- **Transverse (tous)** : volume total agrégé + croissance, connecteurs actifs 170+ p95 (multiseries), taux d'erreur, top endpoints/clés, uptime.
114− et éléments ajoutés/mis à jour par période (journaux de sync), complétude/ 171+- **job-ka** : offres actives/nouvelles/expirées par catégorie/ville/
115− fraîcheur moyenne des fiches quand mesurable. Trafic web : seulement si des 172+ entreprise, distribution des salaires affichés, top employeurs.
116− journaux d'accès existent — sinon état vide propre. 173+- **Transverse (tous)** : volume total agrégé + croissance, connecteurs
174+ actifs et éléments ajoutés/mis à jour par période (journaux de sync —
175+ stacked par source quand possible), complétude/fraîcheur moyenne des
176+ fiches quand mesurable (jauges). Trafic web : seulement si des journaux
177+ d'accès existent — sinon état vide propre.
117 178
118 ## 5. Ajouter une métrique / un graphique / une plateforme 179 ## 5. Ajouter une métrique / un graphique / une plateforme
119 180
120−1 métrique = 1 entrée `kpis[]` ou `series[]` côté API (requête SQL agrégée + 181+1 métrique = 1 entrée `kpis[]`, `series[]`, `multiseries[]`, `stacked[]`,
121−cache) — le front la rend automatiquement. 1 plateforme = implémenter les 2 182+`distributions[]` ou `gauges[]` côté API (requête SQL agrégée + cache) — le
122−endpoints du contrat + une page /stats montée sur les composants du kit + 183+front la rend automatiquement. 1 plateforme = implémenter les 2 endpoints du
123−`kapdf.py` (ou gabarit pdfkit) branché sur le même JSON de dashboard. 184+contrat + une page /stats montée sur les composants du kit + `kapdf.py` (ou
185+gabarit pdfkit) branché sur le même JSON de dashboard.
modified frontend/src/ka/stats/kacharts.tsx +393 −30
@@ -2,22 +2,39 @@
2 // ka-ui/stats/kacharts.tsx — kit de graphiques SVG du module Stats commun 2 // ka-ui/stats/kacharts.tsx — kit de graphiques SVG du module Stats commun
3 // Groupe KA (zéro dépendance, React 18+). Style : design system ka-ui 3 // Groupe KA (zéro dépendance, React 18+). Style : design system ka-ui
4 // (bordures encre, accent de la plateforme via var(--accent)). 4 // (bordures encre, accent de la plateforme via var(--accent)).
5−// Composants : KpiCard, PeriodSelector, LineChart (infobulle + légende 5+// v2 — composants : KpiCard (+sparkline), PeriodSelector, LineChart (ligne/
6−// cliquable + comparaison N-1), BarChart, Donut, CalendarHeatmap, DataTable 6+// aire, infobulle + légende cliquable + comparaison N-1), MultiLineChart
7−// (tri/recherche/pagination), RecordCard, PdfButton, EmptyBlock, Fraicheur. 7+// (≤4 séries, pointillés distincts = jamais la couleur seule), VBarChart
8−import { useMemo, useState } from "react"; 8+// (barres verticales / histogrammes), StackedBarChart, BarChart (horizontal,
9+// deltas), Donut, GaugeCard, CalendarHeatmap, HourHeatmap (7×24),
10+// StatSummary (min/max/moy/méd/σ), DataTable (tri/recherche/pagination),
11+// RecordCard, PdfButton (menu de rapports), EmptyBlock, Fraicheur.
12+import { useEffect, useMemo, useRef, useState } from "react";
9 13
10−/* ---------- types (contrat SPEC.md) ---------- */ 14+/* ---------- types (contrat SPEC.md v2) ---------- */
11 export type Kpi = { 15 export type Kpi = {
12 id: string; label: string; value: number | string; unit?: string; 16 id: string; label: string; value: number | string; unit?: string;
13 delta_pct?: number | null; direction?: "up" | "down"; 17 delta_pct?: number | null; direction?: "up" | "down";
18+ spark?: Point[]; help?: string;
14 }; 19 };
15 export type Point = { t: string; v: number }; 20 export type Point = { t: string; v: number };
16 export type Serie = { 21 export type Serie = {
17− id: string; title: string; unit?: string; kind?: "line" | "bar"; 22+ id: string; title: string; unit?: string;
23+ kind?: "line" | "bar" | "area";
18 points: Point[]; compare?: Point[]; 24 points: Point[]; compare?: Point[];
19 }; 25 };
20−export type BreakItem = { label: string; value: number }; 26+export type MultiSerie = {
27+ id: string; title: string; unit?: string;
28+ series: { label: string; points: Point[] }[]; // ≤ 4 séries
29+};
30+export type StackedSerie = {
31+ id: string; title: string; unit?: string;
32+ keys: string[]; points: { t: string; values: number[] }[];
33+};
34+export type BreakItem = { label: string; value: number; delta_pct?: number | null };
35+export type Distribution = { id: string; title: string; unit?: string; bins: { label: string; value: number }[] };
36+export type Gauge = { id: string; label: string; value: number; max: number; unit?: string; help?: string };
37+export type HourCell = { dow: number; hour: number; value: number }; // dow 0=lun … 6=dim
21 export type TableSpec = { id: string; title: string; columns: string[]; rows: (string | number)[][] }; 38 export type TableSpec = { id: string; title: string; columns: string[]; rows: (string | number)[][] };
22 export type RecordFact = { label: string; value: string; date?: string }; 39 export type RecordFact = { label: string; value: string; date?: string };
23 40
@@ -32,25 +49,63 @@ export const PERIODS: { id: string; label: string }[] = [
32 { id: "tout", label: "Tout" }, 49 { id: "tout", label: "Tout" },
33 ]; 50 ];
34 51
52+export const REPORT_MODES: { id: string; label: string; desc: string }[] = [
53+ { id: "complet", label: "Rapport complet", desc: "Toutes les sections — KPI, tendances, répartitions, tableaux, records" },
54+ { id: "synthese", label: "Synthèse exécutive", desc: "2 pages — indicateurs clés et faits marquants" },
55+ { id: "tendances", label: "Tendances & évolution", desc: "Courbes, comparaisons N-1 et statistiques de séries" },
56+ { id: "repartitions", label: "Répartitions & géographie", desc: "Catégories, distributions, régions et activité" },
57+ { id: "donnees", label: "Données détaillées", desc: "Tous les tableaux, en version longue" },
58+];
59+
35 export const fmtInt = (n: number) => n.toLocaleString("fr-CA"); 60 export const fmtInt = (n: number) => n.toLocaleString("fr-CA");
36 export const fmtNum = (n: number) => 61 export const fmtNum = (n: number) =>
37 Number.isInteger(n) ? fmtInt(n) : n.toLocaleString("fr-CA", { maximumFractionDigits: 2 }); 62 Number.isInteger(n) ? fmtInt(n) : n.toLocaleString("fr-CA", { maximumFractionDigits: 2 });
63+const fmtPct = (n: number) => `${n >= 0 ? "+" : ""}${fmtNum(n)} %`;
38 64
39−/* ---------- KPI ---------- */ 65+/* Styles des séries multiples : couleur + motif de trait (l'identité n'est
66+ jamais portée par la couleur seule — règle d'accessibilité). */
67+const MULTI_STYLES = [
68+ { stroke: "var(--accent)", dash: undefined, width: 2.4 },
69+ { stroke: "var(--ink)", dash: undefined, width: 1.6 },
70+ { stroke: "var(--accent-deep, var(--accent))", dash: "6 3", width: 2 },
71+ { stroke: "var(--ink-3)", dash: "2 3", width: 2 },
72+];
73+
74+/* ---------- KPI (+ sparkline) ---------- */
40 export function KpiCard({ k }: { k: Kpi }) { 75 export function KpiCard({ k }: { k: Kpi }) {
41 const up = (k.direction ?? ((k.delta_pct ?? 0) >= 0 ? "up" : "down")) === "up"; 76 const up = (k.direction ?? ((k.delta_pct ?? 0) >= 0 ? "up" : "down")) === "up";
77+ const sp = (k.spark ?? []).filter((p) => typeof p.v === "number");
78+ const spark = useMemo(() => {
79+ if (sp.length < 2) return null;
80+ const w = 120, h = 30;
81+ const vmax = Math.max(...sp.map((p) => p.v));
82+ const vmin = Math.min(...sp.map((p) => p.v));
83+ const rng = vmax - vmin || 1;
84+ const X = (i: number) => (w * i) / (sp.length - 1);
85+ const Y = (v: number) => 2 + (h - 4) * (1 - (v - vmin) / rng);
86+ const d = sp.map((p, i) => `${i ? "L" : "M"}${X(i).toFixed(1)},${Y(p.v).toFixed(1)}`).join("");
87+ return { w, h, d, area: `${d}L${w},${h}L0,${h}Z` };
88+ }, [k.spark]);
42 return ( 89 return (
43− <article className="card" style={{ padding: "14px 16px", minWidth: 0 }}> 90+ <article className="card" style={{ padding: "14px 16px", minWidth: 0 }} title={k.help}>
44 <p style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(22px,2.4vw,30px)", letterSpacing: "-0.02em" }}> 91 <p style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(22px,2.4vw,30px)", letterSpacing: "-0.02em" }}>
45 {typeof k.value === "number" ? fmtNum(k.value) : k.value} 92 {typeof k.value === "number" ? fmtNum(k.value) : k.value}
46 {k.unit ? <span style={{ fontSize: "0.6em", color: "var(--ink-2)" }}> {k.unit}</span> : null} 93 {k.unit ? <span style={{ fontSize: "0.6em", color: "var(--ink-2)" }}> {k.unit}</span> : null}
47 </p> 94 </p>
48 <p className="klabel" style={{ margin: "6px 0 0" }}>{k.label}</p> 95 <p className="klabel" style={{ margin: "6px 0 0" }}>{k.label}</p>
49− {k.delta_pct !== undefined && k.delta_pct !== null && ( 96+ <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 8 }}>
50− <p style={{ margin: "8px 0 0", fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 700, color: up ? "var(--green)" : "var(--danger)" }}> 97+ {k.delta_pct !== undefined && k.delta_pct !== null ? (
51− {up ? "▲" : "▼"} {k.delta_pct >= 0 ? "+" : ""}{fmtNum(k.delta_pct)} % <span style={{ color: "var(--ink-3)", fontWeight: 500 }}>vs période préc.</span> 98+ <p style={{ margin: "8px 0 0", fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 700, color: up ? "var(--green)" : "var(--danger)" }}>
52− </p> 99+ {up ? "▲" : "▼"} {fmtPct(k.delta_pct)} <span style={{ color: "var(--ink-3)", fontWeight: 500 }}>vs période préc.</span>
53− )} 100+ </p>
101+ ) : <span />}
102+ {spark && (
103+ <svg viewBox={`0 0 ${spark.w} ${spark.h}`} style={{ width: 96, height: 24, flex: "none" }} aria-hidden="true">
104+ <path d={spark.area} fill="var(--accent)" opacity={0.14} />
105+ <path d={spark.d} fill="none" stroke="var(--accent)" strokeWidth={1.8} />
106+ </svg>
107+ )}
108+ </div>
54 </article> 109 </article>
55 ); 110 );
56 } 111 }
@@ -84,12 +139,13 @@ export function PeriodSelector({
84 ); 139 );
85 } 140 }
86 141
87−/* ---------- Courbe ---------- */ 142+/* ---------- Courbe / aire ---------- */
88 export function LineChart({ serie, height = 240 }: { serie: Serie; height?: number }) { 143 export function LineChart({ serie, height = 240 }: { serie: Serie; height?: number }) {
89 const [hide, setHide] = useState<{ cur: boolean; cmp: boolean }>({ cur: false, cmp: false }); 144 const [hide, setHide] = useState<{ cur: boolean; cmp: boolean }>({ cur: false, cmp: false });
90 const [hover, setHover] = useState<number | null>(null); 145 const [hover, setHover] = useState<number | null>(null);
91 const W = 720, H = height, PL = 54, PR = 10, PT = 14, PB = 26; 146 const W = 720, H = height, PL = 54, PR = 10, PT = 14, PB = 26;
92 const pts = serie.points ?? []; 147 const pts = serie.points ?? [];
148+ if (serie.kind === "bar") return <VBarChart serie={serie} height={height} />;
93 if (pts.length < 2) return <EmptyBlock title={serie.title} />; 149 if (pts.length < 2) return <EmptyBlock title={serie.title} />;
94 const all = [...(hide.cur ? [] : pts), ...(!hide.cmp && serie.compare ? serie.compare : [])]; 150 const all = [...(hide.cur ? [] : pts), ...(!hide.cmp && serie.compare ? serie.compare : [])];
95 const vmax = Math.max(...all.map((p) => p.v), 1); 151 const vmax = Math.max(...all.map((p) => p.v), 1);
@@ -127,6 +183,9 @@ export function LineChart({ serie, height = 240 }: { serie: Serie; height?: numb
127 {[0, Math.floor(pts.length / 2), pts.length - 1].map((i) => ( 183 {[0, Math.floor(pts.length / 2), pts.length - 1].map((i) => (
128 <text key={i} x={X(i, pts.length)} y={H - 8} textAnchor="middle" fontSize={10} fill="var(--ink-3)" fontFamily="var(--font-mono)">{pts[i].t}</text> 184 <text key={i} x={X(i, pts.length)} y={H - 8} textAnchor="middle" fontSize={10} fill="var(--ink-3)" fontFamily="var(--font-mono)">{pts[i].t}</text>
129 ))} 185 ))}
186+ {serie.kind === "area" && !hide.cur && (
187+ <path d={`${path(pts)}L${X(pts.length - 1, pts.length)},${Y(0)}L${X(0, pts.length)},${Y(0)}Z`} fill="var(--accent)" opacity={0.13} />
188+ )}
130 {!hide.cmp && serie.compare && serie.compare.length > 1 && ( 189 {!hide.cmp && serie.compare && serie.compare.length > 1 && (
131 <path d={path(serie.compare)} fill="none" stroke="var(--ink-3)" strokeWidth={1.4} strokeDasharray="4 4" /> 190 <path d={path(serie.compare)} fill="none" stroke="var(--ink-3)" strokeWidth={1.4} strokeDasharray="4 4" />
132 )} 191 )}
@@ -148,17 +207,211 @@ export function LineChart({ serie, height = 240 }: { serie: Serie; height?: numb
148 ); 207 );
149 } 208 }
150 209
151−function LegendChip({ label, color, off, dashed, onClick }: { label: string; color: string; off: boolean; dashed?: boolean; onClick: () => void }) { 210+function LegendChip({ label, color, off, dashed, onClick }: { label: string; color: string; off?: boolean; dashed?: boolean; onClick?: () => void }) {
152 return ( 211 return (
153− <button type="button" onClick={onClick} aria-pressed={!off} 212+ <button type="button" onClick={onClick} aria-pressed={!off} disabled={!onClick}
154− style={{ display: "inline-flex", alignItems: "center", gap: 6, border: 0, background: "none", cursor: "pointer", opacity: off ? 0.4 : 1, fontFamily: "var(--font-mono)", fontSize: 10.5, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.06em", minHeight: 44 }}> 213+ style={{ display: "inline-flex", alignItems: "center", gap: 6, border: 0, background: "none", cursor: onClick ? "pointer" : "default", opacity: off ? 0.4 : 1, fontFamily: "var(--font-mono)", fontSize: 10.5, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.06em", minHeight: 44 }}>
155 <span style={{ width: 18, height: 0, borderTop: `3px ${dashed ? "dashed" : "solid"} ${color}` }} /> 214 <span style={{ width: 18, height: 0, borderTop: `3px ${dashed ? "dashed" : "solid"} ${color}` }} />
156 {label} 215 {label}
157 </button> 216 </button>
158 ); 217 );
159 } 218 }
160 219
161−/* ---------- Barres horizontales (répartitions, géo) ---------- */ 220+/* ---------- Multi-courbes (≤ 4 séries, motifs distincts) ---------- */
221+export function MultiLineChart({ ms, height = 260 }: { ms: MultiSerie; height?: number }) {
222+ const series = (ms.series ?? []).filter((s) => (s.points ?? []).length > 1).slice(0, 4);
223+ const [off, setOff] = useState<Record<string, boolean>>({});
224+ const [hover, setHover] = useState<number | null>(null);
225+ if (!series.length) return <EmptyBlock title={ms.title} />;
226+ const W = 720, H = height, PL = 54, PR = 10, PT = 14, PB = 26;
227+ const n = Math.max(...series.map((s) => s.points.length));
228+ const shown = series.filter((s) => !off[s.label]);
229+ const all = shown.flatMap((s) => s.points.map((p) => p.v));
230+ const vmax = Math.max(...(all.length ? all : [1]), 1);
231+ const vmin = Math.min(0, ...(all.length ? all : [0]));
232+ const X = (i: number, len: number) => PL + ((W - PL - PR) * i) / (len - 1);
233+ const Y = (v: number) => PT + (H - PT - PB) * (1 - (v - vmin) / (vmax - vmin || 1));
234+ const ref = series[0].points;
235+ const hi = hover !== null ? Math.min(n - 1, Math.max(0, hover)) : null;
236+ return (
237+ <figure className="card" style={{ margin: 0, padding: 16 }}>
238+ <figcaption style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 8 }}>
239+ <b style={{ fontFamily: "var(--font-display)", fontSize: 15 }}>{ms.title}</b>
240+ <span style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
241+ {series.map((s, i) => (
242+ <LegendChip key={s.label} label={s.label} color={MULTI_STYLES[i].stroke}
243+ dashed={!!MULTI_STYLES[i].dash} off={!!off[s.label]}
244+ onClick={() => setOff((o) => ({ ...o, [s.label]: !o[s.label] }))} />
245+ ))}
246+ </span>
247+ </figcaption>
248+ <svg viewBox={`0 0 ${W} ${H}`} style={{ width: "100%", height: "auto", marginTop: 10, touchAction: "pan-y" }} role="img" aria-label={ms.title}
249+ onMouseMove={(e) => {
250+ const r = (e.currentTarget as SVGSVGElement).getBoundingClientRect();
251+ const fx = ((e.clientX - r.left) / r.width) * W;
252+ setHover(Math.round(((fx - PL) / (W - PL - PR)) * (n - 1)));
253+ }}
254+ onMouseLeave={() => setHover(null)}>
255+ {[0, 1, 2, 3, 4].map((g) => {
256+ const y = PT + ((H - PT - PB) * g) / 4;
257+ const v = vmax - ((vmax - vmin) * g) / 4;
258+ return (
259+ <g key={g}>
260+ <line x1={PL} x2={W - PR} y1={y} y2={y} stroke="var(--line)" strokeWidth={1} />
261+ <text x={PL - 6} y={y + 3} textAnchor="end" fontSize={10} fill="var(--ink-3)" fontFamily="var(--font-mono)">{fmtInt(Math.round(v))}</text>
262+ </g>
263+ );
264+ })}
265+ {[0, Math.floor(ref.length / 2), ref.length - 1].map((i) => (
266+ <text key={i} x={X(i, ref.length)} y={H - 8} textAnchor="middle" fontSize={10} fill="var(--ink-3)" fontFamily="var(--font-mono)">{ref[i]?.t}</text>
267+ ))}
268+ {series.map((s, i) => off[s.label] ? null : (
269+ <path key={s.label}
270+ d={s.points.map((p, j) => `${j ? "L" : "M"}${X(j, s.points.length)},${Y(p.v)}`).join("")}
271+ fill="none" stroke={MULTI_STYLES[i].stroke} strokeWidth={MULTI_STYLES[i].width}
272+ strokeDasharray={MULTI_STYLES[i].dash} />
273+ ))}
274+ {hi !== null && (
275+ <line x1={X(hi, n)} x2={X(hi, n)} y1={PT} y2={H - PB} stroke="var(--ink)" strokeWidth={1} strokeDasharray="2 3" />
276+ )}
277+ </svg>
278+ {hi !== null && (
279+ <p className="chip" style={{ marginTop: 8, display: "inline-flex", gap: 12, flexWrap: "wrap" }}>
280+ <b>{ref[hi]?.t}</b>
281+ {shown.map((s, i) => (
282+ <span key={s.label}>{s.label} : <b>{s.points[hi] ? fmtNum(s.points[hi].v) : "—"}{ms.unit ? ` ${ms.unit}` : ""}</b></span>
283+ ))}
284+ </p>
285+ )}
286+ </figure>
287+ );
288+}
289+
290+/* ---------- Barres verticales (volumes quotidiens, histogrammes) ---------- */
291+export function VBarChart({ serie, height = 240 }: { serie: Serie; height?: number }) {
292+ const [hover, setHover] = useState<number | null>(null);
293+ const pts = serie.points ?? [];
294+ if (!pts.length) return <EmptyBlock title={serie.title} />;
295+ const W = 720, H = height, PL = 54, PR = 10, PT = 14, PB = 26;
296+ const vmax = Math.max(...pts.map((p) => p.v), 1);
297+ const bw = Math.max(2, (W - PL - PR) / pts.length - 2);
298+ return (
299+ <figure className="card" style={{ margin: 0, padding: 16 }}>
300+ <figcaption><b style={{ fontFamily: "var(--font-display)", fontSize: 15 }}>{serie.title}</b></figcaption>
301+ <svg viewBox={`0 0 ${W} ${H}`} style={{ width: "100%", height: "auto", marginTop: 10 }} role="img" aria-label={serie.title}
302+ onMouseLeave={() => setHover(null)}>
303+ {[0, 1, 2, 3, 4].map((g) => {
304+ const y = PT + ((H - PT - PB) * g) / 4;
305+ const v = vmax - (vmax * g) / 4;
306+ return (
307+ <g key={g}>
308+ <line x1={PL} x2={W - PR} y1={y} y2={y} stroke="var(--line)" strokeWidth={1} />
309+ <text x={PL - 6} y={y + 3} textAnchor="end" fontSize={10} fill="var(--ink-3)" fontFamily="var(--font-mono)">{fmtInt(Math.round(v))}</text>
310+ </g>
311+ );
312+ })}
313+ {pts.map((p, i) => {
314+ const x = PL + ((W - PL - PR) * i) / pts.length;
315+ const h = (H - PT - PB) * (p.v / vmax);
316+ return (
317+ <rect key={i} x={x + 1} y={H - PB - h} width={bw} height={Math.max(h, p.v > 0 ? 1.5 : 0)} rx={2}
318+ fill="var(--accent)" opacity={hover === null || hover === i ? 1 : 0.45}
319+ stroke="var(--ink)" strokeWidth={0.5}
320+ onMouseEnter={() => setHover(i)}>
321+ <title>{`${p.t} — ${fmtNum(p.v)}${serie.unit ? ` ${serie.unit}` : ""}`}</title>
322+ </rect>
323+ );
324+ })}
325+ {[0, Math.floor(pts.length / 2), pts.length - 1].filter((v, i, a) => a.indexOf(v) === i).map((i) => (
326+ <text key={i} x={PL + ((W - PL - PR) * (i + 0.5)) / pts.length} y={H - 8} textAnchor="middle" fontSize={10} fill="var(--ink-3)" fontFamily="var(--font-mono)">{pts[i].t}</text>
327+ ))}
328+ </svg>
329+ {hover !== null && (
330+ <p className="chip" style={{ marginTop: 8 }}>{pts[hover].t} — <b>{fmtNum(pts[hover].v)}{serie.unit ? ` ${serie.unit}` : ""}</b></p>
331+ )}
332+ </figure>
333+ );
334+}
335+
336+/* ---------- Histogramme (distribution) ---------- */
337+export function Histogram({ dist }: { dist: Distribution }) {
338+ const serie: Serie = {
339+ id: dist.id, title: dist.title, unit: dist.unit, kind: "bar",
340+ points: (dist.bins ?? []).map((b) => ({ t: b.label, v: b.value })),
341+ };
342+ return <VBarChart serie={serie} height={220} />;
343+}
344+
345+/* ---------- Barres empilées (composition dans le temps) ---------- */
346+export function StackedBarChart({ st, height = 260 }: { st: StackedSerie; height?: number }) {
347+ const [hover, setHover] = useState<number | null>(null);
348+ const keys = (st.keys ?? []).slice(0, 6);
349+ const pts = st.points ?? [];
350+ if (!keys.length || !pts.length) return <EmptyBlock title={st.title} />;
351+ const W = 720, H = height, PL = 54, PR = 10, PT = 14, PB = 26;
352+ const totals = pts.map((p) => p.values.slice(0, keys.length).reduce((s, v) => s + (v || 0), 0));
353+ const vmax = Math.max(...totals, 1);
354+ const bw = Math.max(2, (W - PL - PR) / pts.length - 2);
355+ const shades = [1, 0.72, 0.5, 0.34, 0.22, 0.13];
356+ return (
357+ <figure className="card" style={{ margin: 0, padding: 16 }}>
358+ <figcaption style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 8 }}>
359+ <b style={{ fontFamily: "var(--font-display)", fontSize: 15 }}>{st.title}</b>
360+ <span style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
361+ {keys.map((k, i) => (
362+ <span key={k} style={{ display: "inline-flex", alignItems: "center", gap: 5, fontFamily: "var(--font-mono)", fontSize: 10.5, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.06em" }}>
363+ <span style={{ width: 11, height: 11, borderRadius: 3, border: "1px solid var(--ink)", background: "var(--accent)", opacity: shades[i] }} />
364+ {k}
365+ </span>
366+ ))}
367+ </span>
368+ </figcaption>
369+ <svg viewBox={`0 0 ${W} ${H}`} style={{ width: "100%", height: "auto", marginTop: 10 }} role="img" aria-label={st.title}
370+ onMouseLeave={() => setHover(null)}>
371+ {[0, 1, 2, 3, 4].map((g) => {
372+ const y = PT + ((H - PT - PB) * g) / 4;
373+ return (
374+ <g key={g}>
375+ <line x1={PL} x2={W - PR} y1={y} y2={y} stroke="var(--line)" strokeWidth={1} />
376+ <text x={PL - 6} y={y + 3} textAnchor="end" fontSize={10} fill="var(--ink-3)" fontFamily="var(--font-mono)">{fmtInt(Math.round(vmax - (vmax * g) / 4))}</text>
377+ </g>
378+ );
379+ })}
380+ {pts.map((p, i) => {
381+ const x = PL + ((W - PL - PR) * i) / pts.length;
382+ let yAcc = H - PB;
383+ return (
384+ <g key={i} onMouseEnter={() => setHover(i)} opacity={hover === null || hover === i ? 1 : 0.5}>
385+ {keys.map((k, j) => {
386+ const v = p.values[j] || 0;
387+ const h = (H - PT - PB) * (v / vmax);
388+ yAcc -= h;
389+ return v > 0 ? (
390+ <rect key={k} x={x + 1} y={yAcc} width={bw} height={Math.max(h - 1, 0.8)} rx={1.5}
391+ fill="var(--accent)" opacity={shades[j]} stroke="var(--ink)" strokeWidth={0.4}>
392+ <title>{`${p.t} · ${k} — ${fmtNum(v)}${st.unit ? ` ${st.unit}` : ""}`}</title>
393+ </rect>
394+ ) : null;
395+ })}
396+ </g>
397+ );
398+ })}
399+ {[0, Math.floor(pts.length / 2), pts.length - 1].filter((v, i, a) => a.indexOf(v) === i).map((i) => (
400+ <text key={i} x={PL + ((W - PL - PR) * (i + 0.5)) / pts.length} y={H - 8} textAnchor="middle" fontSize={10} fill="var(--ink-3)" fontFamily="var(--font-mono)">{pts[i].t}</text>
401+ ))}
402+ </svg>
403+ {hover !== null && (
404+ <p className="chip" style={{ marginTop: 8, display: "inline-flex", gap: 12, flexWrap: "wrap" }}>
405+ <b>{pts[hover].t}</b>
406+ {keys.map((k, j) => <span key={k}>{k} : <b>{fmtNum(pts[hover].values[j] || 0)}</b></span>)}
407+ <span style={{ color: "var(--ink-3)" }}>total {fmtNum(totals[hover])}</span>
408+ </p>
409+ )}
410+ </figure>
411+ );
412+}
413+
414+/* ---------- Barres horizontales (répartitions, géo) — deltas optionnels ---------- */
162 export function BarChart({ title, items, unit }: { title: string; items: BreakItem[]; unit?: string }) { 415 export function BarChart({ title, items, unit }: { title: string; items: BreakItem[]; unit?: string }) {
163 const rows = (items ?? []).slice(0, 14); 416 const rows = (items ?? []).slice(0, 14);
164 if (!rows.length) return <EmptyBlock title={title} />; 417 if (!rows.length) return <EmptyBlock title={title} />;
@@ -169,9 +422,16 @@ export function BarChart({ title, items, unit }: { title: string; items: BreakIt
169 <div style={{ marginTop: 12, display: "grid", gap: 9 }}> 422 <div style={{ marginTop: 12, display: "grid", gap: 9 }}>
170 {rows.map((r) => ( 423 {rows.map((r) => (
171 <div key={r.label} title={`${r.label} — ${fmtNum(r.value)}${unit ? ` ${unit}` : ""}`}> 424 <div key={r.label} title={`${r.label} — ${fmtNum(r.value)}${unit ? ` ${unit}` : ""}`}>
172− <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12.5 }}> 425+ <div style={{ display: "flex", justifyContent: "space-between", gap: 8, fontSize: 12.5 }}>
173 <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.label}</span> 426 <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.label}</span>
174− <b style={{ fontFamily: "var(--font-mono)", fontSize: 11.5 }}>{fmtNum(r.value)}{unit ? ` ${unit}` : ""}</b> 427+ <span style={{ display: "inline-flex", gap: 8, alignItems: "baseline", flex: "none" }}>
428+ {r.delta_pct !== undefined && r.delta_pct !== null && (
429+ <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, fontWeight: 700, color: r.delta_pct >= 0 ? "var(--green)" : "var(--danger)" }}>
430+ {r.delta_pct >= 0 ? "▲" : "▼"} {fmtPct(r.delta_pct)}
431+ </span>
432+ )}
433+ <b style={{ fontFamily: "var(--font-mono)", fontSize: 11.5 }}>{fmtNum(r.value)}{unit ? ` ${unit}` : ""}</b>
434+ </span>
175 </div> 435 </div>
176 <div style={{ marginTop: 3, height: 12, background: "rgba(20,24,20,0.06)", borderRadius: "0 3px 3px 0" }}> 436 <div style={{ marginTop: 3, height: 12, background: "rgba(20,24,20,0.06)", borderRadius: "0 3px 3px 0" }}>
177 <div style={{ height: "100%", width: `${Math.max((r.value / max) * 100, 1)}%`, background: "var(--accent)", border: "1px solid var(--ink)", borderRadius: "0 3px 3px 0", boxSizing: "border-box" }} /> 437 <div style={{ height: "100%", width: `${Math.max((r.value / max) * 100, 1)}%`, background: "var(--accent)", border: "1px solid var(--ink)", borderRadius: "0 3px 3px 0", boxSizing: "border-box" }} />
@@ -224,6 +484,26 @@ export function Donut({ title, items }: { title: string; items: BreakItem[] }) {
224 ); 484 );
225 } 485 }
226 486
487+/* ---------- Jauge (taux, complétude, couverture) ---------- */
488+export function GaugeCard({ g }: { g: Gauge }) {
489+ const frac = Math.max(0, Math.min(1, g.max ? g.value / g.max : 0));
490+ const R = 60, C = Math.PI * R;
491+ return (
492+ <article className="card" style={{ padding: "14px 16px", minWidth: 0 }} title={g.help}>
493+ <svg viewBox="0 0 150 84" style={{ width: "100%", maxWidth: 190, display: "block", margin: "0 auto" }} role="img" aria-label={`${g.label} : ${fmtNum(g.value)}${g.unit ?? ""} sur ${fmtNum(g.max)}`}>
494+ <path d={`M15,75 A${R},${R} 0 0 1 135,75`} fill="none" stroke="rgba(20,24,20,0.08)" strokeWidth={13} strokeLinecap="round" />
495+ <path d={`M15,75 A${R},${R} 0 0 1 135,75`} fill="none" stroke="var(--accent)" strokeWidth={13} strokeLinecap="round"
496+ strokeDasharray={`${frac * C} ${C}`} />
497+ <text x={75} y={66} textAnchor="middle" fontFamily="var(--font-display)" fontWeight={700} fontSize={22} fill="var(--ink)">
498+ {fmtNum(g.value)}{g.unit ? <tspan fontSize={12} fill="var(--ink-2)"> {g.unit}</tspan> : null}
499+ </text>
500+ <text x={75} y={80} textAnchor="middle" fontSize={9} fill="var(--ink-3)" fontFamily="var(--font-mono)">{(frac * 100).toFixed(0)} % de {fmtNum(g.max)}{g.unit ? ` ${g.unit}` : ""}</text>
501+ </svg>
502+ <p className="klabel" style={{ margin: "8px 0 0", textAlign: "center" }}>{g.label}</p>
503+ </article>
504+ );
505+}
506+
227 /* ---------- Calendrier de chaleur ---------- */ 507 /* ---------- Calendrier de chaleur ---------- */
228 export function CalendarHeatmap({ title, cells }: { title: string; cells: { date: string; value: number }[] }) { 508 export function CalendarHeatmap({ title, cells }: { title: string; cells: { date: string; value: number }[] }) {
229 if (!cells?.length) return <EmptyBlock title={title} />; 509 if (!cells?.length) return <EmptyBlock title={title} />;
@@ -261,6 +541,64 @@ export function CalendarHeatmap({ title, cells }: { title: string; cells: { date
261 ); 541 );
262 } 542 }
263 543
544+/* ---------- Heatmap horaire 7 × 24 (activité par heure) ---------- */
545+const DOW = ["Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"];
546+export function HourHeatmap({ title, cells }: { title: string; cells: HourCell[] }) {
547+ if (!cells?.length) return <EmptyBlock title={title} />;
548+ const grid = new Map(cells.map((c) => [`${c.dow}-${c.hour}`, c.value]));
549+ const max = Math.max(...cells.map((c) => c.value), 1);
550+ const CW = 24, CH = 20, LX = 34, LY = 16;
551+ return (
552+ <figure className="card" style={{ margin: 0, padding: 16 }}>
553+ <figcaption><b style={{ fontFamily: "var(--font-display)", fontSize: 15 }}>{title}</b> <span className="klabel">jour × heure</span></figcaption>
554+ <div className="tbl-wrap" style={{ marginTop: 12 }}>
555+ <svg viewBox={`0 0 ${LX + 24 * CW} ${LY + 7 * CH}`} style={{ minWidth: 520, width: "100%", height: "auto" }} role="img" aria-label={title}>
556+ {[0, 6, 12, 18, 23].map((h) => (
557+ <text key={h} x={LX + h * CW + CW / 2} y={11} textAnchor="middle" fontSize={9} fill="var(--ink-3)" fontFamily="var(--font-mono)">{h} h</text>
558+ ))}
559+ {DOW.map((d, i) => (
560+ <text key={d} x={LX - 6} y={LY + i * CH + CH / 2 + 3} textAnchor="end" fontSize={9} fill="var(--ink-3)" fontFamily="var(--font-mono)">{d}</text>
561+ ))}
562+ {Array.from({ length: 7 }, (_, d) => Array.from({ length: 24 }, (_, h) => {
563+ const v = grid.get(`${d}-${h}`) ?? 0;
564+ return (
565+ <rect key={`${d}-${h}`} x={LX + h * CW} y={LY + d * CH} width={CW - 2} height={CH - 2} rx={2.5}
566+ fill={v ? "var(--accent)" : "rgba(20,24,20,0.07)"} fillOpacity={v ? 0.22 + 0.78 * (v / max) : 1}
567+ stroke="rgba(20,24,20,0.15)" strokeWidth={0.5}>
568+ <title>{`${DOW[d]} ${h} h — ${fmtNum(v)}`}</title>
569+ </rect>
570+ );
571+ }))}
572+ </svg>
573+ </div>
574+ </figure>
575+ );
576+}
577+
578+/* ---------- Statistiques de série (min/max/moy/méd/σ) ---------- */
579+export function StatSummary({ serie }: { serie: Serie }) {
580+ const vs = (serie.points ?? []).map((p) => p.v).filter((v) => typeof v === "number");
581+ if (vs.length < 2) return null;
582+ const sorted = [...vs].sort((a, b) => a - b);
583+ const mean = vs.reduce((s, v) => s + v, 0) / vs.length;
584+ const med = sorted[Math.floor(sorted.length / 2)];
585+ const sd = Math.sqrt(vs.reduce((s, v) => s + (v - mean) ** 2, 0) / vs.length);
586+ const items: [string, number][] = [
587+ ["Min", sorted[0]], ["Max", sorted[sorted.length - 1]],
588+ ["Moyenne", Math.round(mean * 100) / 100], ["Médiane", med],
589+ ["Écart-type", Math.round(sd * 100) / 100],
590+ ];
591+ return (
592+ <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 8 }}>
593+ {items.map(([l, v]) => (
594+ <span key={l} className="chip" style={{ fontSize: 11 }}>
595+ <span style={{ color: "var(--ink-3)" }}>{l}</span> <b style={{ fontFamily: "var(--font-mono)" }}>{fmtNum(v)}</b>
596+ </span>
597+ ))}
598+ </div>
599+ );
600+}
601+
264 /* ---------- Tableau : tri, recherche, pagination ---------- */ 602 /* ---------- Tableau : tri, recherche, pagination ---------- */
265 export function DataTable({ spec, pageSize = 25 }: { spec: TableSpec; pageSize?: number }) { 603 export function DataTable({ spec, pageSize = 25 }: { spec: TableSpec; pageSize?: number }) {
266 const [q, setQ] = useState(""); 604 const [q, setQ] = useState("");
@@ -338,9 +676,19 @@ export function RecordCard({ r }: { r: RecordFact }) {
338 ); 676 );
339 } 677 }
340 678
341−/* ---------- Bouton PDF ---------- */ 679+/* ---------- Menu de rapports PDF (5 rapports) ---------- */
342 export function PdfButton({ period, from, to, endpoint = "/api/stats/report" }: { period: string; from?: string; to?: string; endpoint?: string }) { 680 export function PdfButton({ period, from, to, endpoint = "/api/stats/report" }: { period: string; from?: string; to?: string; endpoint?: string }) {
343− const [busy, setBusy] = useState(false); 681+ const [open, setOpen] = useState(false);
682+ const [busy, setBusy] = useState<string | null>(null);
683+ const box = useRef<HTMLSpanElement>(null);
684+ useEffect(() => {
685+ if (!open) return;
686+ const close = (e: MouseEvent) => {
687+ if (box.current && !box.current.contains(e.target as Node)) setOpen(false);
688+ };
689+ document.addEventListener("mousedown", close);
690+ return () => document.removeEventListener("mousedown", close);
691+ }, [open]);
344 const url = (mode: string) => { 692 const url = (mode: string) => {
345 const p = new URLSearchParams({ period, mode }); 693 const p = new URLSearchParams({ period, mode });
346 if (from) p.set("from", from); 694 if (from) p.set("from", from);
@@ -348,23 +696,38 @@ export function PdfButton({ period, from, to, endpoint = "/api/stats/report" }:
348 return `${endpoint}?${p}`; 696 return `${endpoint}?${p}`;
349 }; 697 };
350 const dl = (mode: string) => { 698 const dl = (mode: string) => {
351− setBusy(true); 699+ setBusy(mode);
700+ setOpen(false);
352 const a = document.createElement("a"); 701 const a = document.createElement("a");
353 a.href = url(mode); 702 a.href = url(mode);
354 a.download = ""; 703 a.download = "";
355 document.body.appendChild(a); 704 document.body.appendChild(a);
356 a.click(); 705 a.click();
357 a.remove(); 706 a.remove();
358− setTimeout(() => setBusy(false), 2500); 707+ setTimeout(() => setBusy(null), 3000);
359 }; 708 };
360 return ( 709 return (
361− <span style={{ display: "inline-flex", gap: 8, flexWrap: "wrap" }}> 710+ <span ref={box} style={{ position: "relative", display: "inline-flex", gap: 8, flexWrap: "wrap" }}>
362− <button type="button" className="btn btn-primary" onClick={() => dl("complet")} disabled={busy}> 711+ <button type="button" className="btn btn-primary" onClick={() => dl("complet")} disabled={!!busy}>
363− {busy ? "Génération…" : "⬇ Télécharger le rapport PDF"} 712+ {busy ? "Génération…" : "⬇ Rapport PDF complet"}
364 </button> 713 </button>
365− <button type="button" className="btn btn-ghost" onClick={() => dl("synthese")} disabled={busy}> 714+ <button type="button" className="btn btn-ghost" onClick={() => setOpen((o) => !o)} disabled={!!busy}
366− Synthèse (2 p.) 715+ aria-haspopup="menu" aria-expanded={open}>
716+ Autres rapports ▾
367 </button> 717 </button>
718+ {open && (
719+ <div role="menu" className="card" style={{ position: "absolute", top: "calc(100% + 6px)", right: 0, zIndex: 50, minWidth: 300, padding: 6, background: "var(--surface)", boxShadow: "0 10px 28px rgba(20,24,20,0.18)" }}>
720+ {REPORT_MODES.map((m) => (
721+ <button key={m.id} type="button" role="menuitem" onClick={() => dl(m.id)}
722+ style={{ display: "block", width: "100%", textAlign: "left", border: 0, background: "none", cursor: "pointer", padding: "9px 10px", borderRadius: 6 }}
723+ onMouseEnter={(e) => (e.currentTarget.style.background = "var(--surface-2)")}
724+ onMouseLeave={(e) => (e.currentTarget.style.background = "none")}>
725+ <b style={{ display: "block", fontSize: 13, fontFamily: "var(--font-display)" }}>{m.label}</b>
726+ <span className="klabel" style={{ fontSize: 11 }}>{m.desc}</span>
727+ </button>
728+ ))}
729+ </div>
730+ )}
368 </span> 731 </span>
369 ); 732 );
370 } 733 }
modified frontend/src/ka/stats/kapdf.py +390 −76
@@ -1,10 +1,17 @@
1 # Auteur : Simon-Pierre Boucher — contact@spboucher.ai 1 # Auteur : Simon-Pierre Boucher — contact@spboucher.ai
2−# ka-ui/stats/kapdf.py — moteur PDF commun Groupe KA (fpdf2). 2+# ka-ui/stats/kapdf.py — moteur PDF commun Groupe KA (fpdf2). v2
3 # Consomme le JSON du contrat /api/stats/dashboard (voir SPEC.md) et produit 3 # Consomme le JSON du contrat /api/stats/dashboard (voir SPEC.md) et produit
4−# le rapport estampillé Groupe-KA : couverture, sommaire, KPI, graphiques 4+# les rapports estampillés Groupe-KA. 5 modes :
5−# VECTORIELS (courbes/barres/anneaux), tableaux paginés, records, page de fin. 5+# complet — toutes les sections (KPI, jauges, séries + stats, multi-
6+# séries, empilées, distributions, répartitions, géo,
7+# heatmap horaire, tableaux, records)
8+# synthese — couverture + KPI + records (2-3 pages)
9+# tendances — KPI + toutes les séries temporelles + stats de séries
10+# repartitions — breakdowns, distributions, géo, activité horaire
11+# donnees — tous les tableaux en version longue (400 lignes max)
12+# Graphiques VECTORIELS uniquement (primitives fpdf), accent de la marque.
6 # Usage : 13 # Usage :
7−# from kapdf import GroupeKAReport 14+# from kapdf import GroupeKAReport, REPORT_MODES, filename
8 # pdf_bytes = GroupeKAReport(site={"wordmark":"Lou·Ka","accent":"#ff6a00", 15 # pdf_bytes = GroupeKAReport(site={"wordmark":"Lou·Ka","accent":"#ff6a00",
9 # "domain":"www.lou-ka.com","tagline":"…"}, dashboard=dash_json, 16 # "domain":"www.lou-ka.com","tagline":"…"}, dashboard=dash_json,
10 # mode="complet").build() 17 # mode="complet").build()
@@ -26,6 +33,14 @@ GREEN = (28, 92, 65)
26 DANGER = (179, 66, 58) 33 DANGER = (179, 66, 58)
27 WHITE = (255, 255, 255) 34 WHITE = (255, 255, 255)
28 35
36+REPORT_MODES = {
37+ "complet": "Rapport complet",
38+ "synthese": "Synthèse exécutive",
39+ "tendances": "Tendances & évolution",
40+ "repartitions": "Répartitions & géographie",
41+ "donnees": "Données détaillées",
42+}
43+
29 EMAILS = [ 44 EMAILS = [
30 ("contact@groupe-ka.com", "Projets, partenariats & données"), 45 ("contact@groupe-ka.com", "Projets, partenariats & données"),
31 ("info@groupe-ka.com", "Médias & questions générales"), 46 ("info@groupe-ka.com", "Médias & questions générales"),
@@ -52,7 +67,8 @@ def _fr(n) -> str:
52 _SUBST = { 67 _SUBST = {
53 "—": "-", "–": "-", "→": "->", "▲": "+", "▼": "-", 68 "—": "-", "–": "-", "→": "->", "▲": "+", "▼": "-",
54 "…": "...", "’": "'", "‘": "'", "“": '"', "”": '"', 69 "…": "...", "’": "'", "‘": "'", "“": '"', "”": '"',
55− "œ": "oe", "Œ": "OE", "−": "-", " ": " ", " ": " ", 70+ "œ": "oe", "Œ": "OE", "−": "-", " ": " ", " ": " ",
71+ "×": "x", "·": ".", "σ": "sigma", "Δ": "delta",
56 } 72 }
57 73
58 74
@@ -75,12 +91,11 @@ class _PDF(FPDF):
75 self.accent = accent 91 self.accent = accent
76 self.period_label = period_label 92 self.period_label = period_label
77 self.cover_mode = False 93 self.cover_mode = False
78− self.has_cover = False
79 self.set_margins(18, 20, 18) 94 self.set_margins(18, 20, 18)
80 self.set_auto_page_break(True, margin=22) 95 self.set_auto_page_break(True, margin=22)
81 96
82 def header(self): 97 def header(self):
83− if self.cover_mode or (self.has_cover and self.page_no() == 1): 98+ if self.cover_mode or self.page_no() == 1:
84 return 99 return
85 self.set_font("helvetica", "B", 8.5) 100 self.set_font("helvetica", "B", 8.5)
86 self.set_text_color(*INK) 101 self.set_text_color(*INK)
@@ -96,10 +111,9 @@ class _PDF(FPDF):
96 self.set_y(20) 111 self.set_y(20)
97 112
98 def footer(self): 113 def footer(self):
99− # la couverture (page 1) ne porte jamais le pied de page standard : 114+ # page 1 = couverture (le flag cover_mode est déjà retombé quand
100− # son footer se déclenche au add_page suivant, quand cover_mode est 115+ # add_page() clôt la page 1 → tester aussi le numéro de page)
101− # déjà retombé — on la repère donc par son numéro de page. 116+ if self.cover_mode or self.page_no() == 1:
102− if self.cover_mode or (self.has_cover and self.page_no() == 1):
103 return 117 return
104 self.set_y(-15) 118 self.set_y(-15)
105 self.set_draw_color(*INK3) 119 self.set_draw_color(*INK3)
@@ -116,7 +130,7 @@ class GroupeKAReport:
116 def __init__(self, site: dict, dashboard: dict, mode: str = "complet"): 130 def __init__(self, site: dict, dashboard: dict, mode: str = "complet"):
117 self.site = site 131 self.site = site
118 self.d = dashboard 132 self.d = dashboard
119− self.mode = mode 133+ self.mode = mode if mode in REPORT_MODES else "complet"
120 self.accent = _hex(site.get("accent", "#d9f26b")) 134 self.accent = _hex(site.get("accent", "#d9f26b"))
121 period = dashboard.get("period", {}) or {} 135 period = dashboard.get("period", {}) or {}
122 self.period_label = period.get("label") or "toute la période" 136 self.period_label = period.get("label") or "toute la période"
@@ -131,6 +145,11 @@ class GroupeKAReport:
131 p.set_fill_color(*fill) 145 p.set_fill_color(*fill)
132 p.rect(x, y, w, h, style="DF", round_corners=True, corner_radius=2.2) 146 p.rect(x, y, w, h, style="DF", round_corners=True, corner_radius=2.2)
133 147
148+ def _shade(self, i, n=8):
149+ shades = [1.0, 0.78, 0.58, 0.42, 0.30, 0.22, 0.15, 0.10]
150+ f = shades[i % len(shades)]
151+ return tuple(int(PAPER[j] + (self.accent[j] - PAPER[j]) * f) for j in range(3))
152+
134 def _kicker(self, text): 153 def _kicker(self, text):
135 p = self.pdf 154 p = self.pdf
136 p.set_font("helvetica", "B", 8) 155 p.set_font("helvetica", "B", 8)
@@ -154,11 +173,18 @@ class GroupeKAReport:
154 self.toc.append((title, self.pdf.page_no())) 173 self.toc.append((title, self.pdf.page_no()))
155 self.pdf.ln(11) 174 self.pdf.ln(11)
156 175
176+ def _chart_title(self, title):
177+ p = self.pdf
178+ p.set_font("helvetica", "B", 10)
179+ p.set_text_color(*INK)
180+ p.set_x(p.l_margin)
181+ p.cell(0, 6, title)
182+ p.ln(7)
183+
157 # ---------- pages ---------- 184 # ---------- pages ----------
158 def _cover(self): 185 def _cover(self):
159 p = self.pdf 186 p = self.pdf
160 p.cover_mode = True 187 p.cover_mode = True
161− p.has_cover = True
162 p.set_auto_page_break(False) 188 p.set_auto_page_break(False)
163 p.add_page() 189 p.add_page()
164 p.set_fill_color(*PAPER) 190 p.set_fill_color(*PAPER)
@@ -166,12 +192,10 @@ class GroupeKAReport:
166 p.set_draw_color(*INK) 192 p.set_draw_color(*INK)
167 p.set_line_width(1.0) 193 p.set_line_width(1.0)
168 p.rect(10, 10, 190, 277) 194 p.rect(10, 10, 190, 277)
169− # kicker
170 p.set_font("helvetica", "B", 10) 195 p.set_font("helvetica", "B", 10)
171 p.set_text_color(*GREEN) 196 p.set_text_color(*GREEN)
172 p.set_xy(24, 34) 197 p.set_xy(24, 34)
173 p.cell(0, 6, "GROUPE KA · RAPPORT STATISTIQUE") 198 p.cell(0, 6, "GROUPE KA · RAPPORT STATISTIQUE")
174− # wordmark : partie gauche + boîte encre/accent
175 wm = self.site.get("wordmark", "") 199 wm = self.site.get("wordmark", "")
176 left, boxed = (wm.split("·") + [None])[:2] if "·" in wm else (wm, None) 200 left, boxed = (wm.split("·") + [None])[:2] if "·" in wm else (wm, None)
177 p.set_xy(24, 70) 201 p.set_xy(24, 70)
@@ -189,7 +213,7 @@ class GroupeKAReport:
189 p.set_xy(24, 100) 213 p.set_xy(24, 100)
190 p.set_font("helvetica", "", 13) 214 p.set_font("helvetica", "", 13)
191 p.set_text_color(*INK2) 215 p.set_text_color(*INK2)
192− p.multi_cell(150, 7, f"Rapport statistique — {wm}") 216+ p.multi_cell(150, 7, f"{REPORT_MODES[self.mode]} — {wm}")
193 now = datetime.now(ZoneInfo("America/Toronto")) 217 now = datetime.now(ZoneInfo("America/Toronto"))
194 per = self.d.get("period", {}) or {} 218 per = self.d.get("period", {}) or {}
195 p.set_xy(24, 125) 219 p.set_xy(24, 125)
@@ -198,7 +222,7 @@ class GroupeKAReport:
198 ("Période couverte", self.period_label + (f" ({per.get('from')} → {per.get('to')})" if per.get("from") else "")), 222 ("Période couverte", self.period_label + (f" ({per.get('from')} → {per.get('to')})" if per.get("from") else "")),
199 ("Généré le", now.strftime("%Y-%m-%d à %H:%M") + " (heure de l'Est)"), 223 ("Généré le", now.strftime("%Y-%m-%d à %H:%M") + " (heure de l'Est)"),
200 ("Plateforme", "https://" + self.site.get("domain", "")), 224 ("Plateforme", "https://" + self.site.get("domain", "")),
201− ("Mode", "Rapport complet" if self.mode == "complet" else "Synthèse"), 225+ ("Type de rapport", REPORT_MODES[self.mode]),
202 ] 226 ]
203 y = 128 227 y = 128
204 for k, v in rows: 228 for k, v in rows:
@@ -210,7 +234,6 @@ class GroupeKAReport:
210 p.cell(0, 6, str(v)) 234 p.cell(0, 6, str(v))
211 p.set_font("helvetica", "", 10.5) 235 p.set_font("helvetica", "", 10.5)
212 y += 8 236 y += 8
213− # bande encre au pied
214 p.set_fill_color(*INK) 237 p.set_fill_color(*INK)
215 p.rect(10, 262, 190, 25, style="F") 238 p.rect(10, 262, 190, 25, style="F")
216 p.set_xy(24, 270) 239 p.set_xy(24, 270)
@@ -235,7 +258,7 @@ class GroupeKAReport:
235 p = self.pdf 258 p = self.pdf
236 cols, gw, gh, gap = 3, 56, 26, 3 259 cols, gw, gh, gap = 3, 56, 26, 3
237 x0, y = p.l_margin, p.get_y() 260 x0, y = p.l_margin, p.get_y()
238− for i, k in enumerate(kpis[:9]): 261+ for i, k in enumerate(kpis[:12]):
239 x = x0 + (i % cols) * (gw + gap) 262 x = x0 + (i % cols) * (gw + gap)
240 if i and i % cols == 0: 263 if i and i % cols == 0:
241 y += gh + gap 264 y += gh + gap
@@ -257,20 +280,81 @@ class GroupeKAReport:
257 p.set_font("helvetica", "B", 8) 280 p.set_font("helvetica", "B", 8)
258 p.set_text_color(*(GREEN if up else DANGER)) 281 p.set_text_color(*(GREEN if up else DANGER))
259 arrow = "+" if k["delta_pct"] >= 0 else "" 282 arrow = "+" if k["delta_pct"] >= 0 else ""
260− p.cell(gw - 8, 4, f"{'▲' if up else '▼'} {arrow}{str(k['delta_pct']).replace('.', ',')} % vs période préc.") 283+ dv = round(float(k["delta_pct"]), 1)
284+ dv = int(dv) if float(dv).is_integer() else dv
285+ p.cell(gw - 8, 4, f"{'▲' if up else '▼'} {arrow}{str(dv).replace('.', ',')} % vs période préc.")
261 p.set_y(y + gh + 8) 286 p.set_y(y + gh + 8)
262 287
263− def _line_chart(self, s): 288+ def _gauges(self):
289+ gs = self.d.get("gauges") or []
290+ gs = [g for g in gs if isinstance(g.get("value"), (int, float)) and g.get("max")]
291+ if not gs:
292+ return
293+ self._section_title("Taux & couvertures")
294+ p = self.pdf
295+ cols, gw, gh, gap = 3, 56, 34, 3
296+ x0, y = p.l_margin, p.get_y()
297+ for i, g in enumerate(gs[:9]):
298+ x = x0 + (i % cols) * (gw + gap)
299+ if i and i % cols == 0:
300+ y += gh + gap
301+ if y > 240:
302+ p.add_page(); y = p.get_y()
303+ self._card(x, y, gw, gh)
304+ frac = max(0.0, min(1.0, g["value"] / g["max"]))
305+ cx, cy, r = x + gw / 2, y + 20, 14
306+ # arc de fond + arc de valeur (demi-cercle en petits segments)
307+ for pass_col, pass_frac, lw in (((225, 223, 217), 1.0, 2.6), (self.accent, frac, 2.6)):
308+ p.set_draw_color(*pass_col)
309+ p.set_line_width(lw)
310+ steps = max(2, int(60 * pass_frac))
311+ last = None
312+ for st in range(steps + 1):
313+ a = math.pi + math.pi * pass_frac * st / steps
314+ pt = (cx + r * math.cos(a), cy + r * math.sin(a))
315+ if last:
316+ p.line(last[0], last[1], pt[0], pt[1])
317+ last = pt
318+ p.set_font("helvetica", "B", 11)
319+ p.set_text_color(*INK)
320+ p.set_xy(x + 4, cy - 5)
321+ p.cell(gw - 8, 6, f"{_fr(g['value'])}{' ' + g['unit'] if g.get('unit') else ''}", align="C")
322+ p.set_font("helvetica", "", 6.6)
323+ p.set_text_color(*INK3)
324+ p.set_xy(x + 4, cy + 1.5)
325+ p.cell(gw - 8, 4, f"{frac * 100:.0f} % de {_fr(g['max'])}", align="C")
326+ p.set_xy(x + 3, y + gh - 7)
327+ p.set_font("helvetica", "", 7)
328+ p.set_text_color(*INK2)
329+ p.multi_cell(gw - 6, 3.3, str(g.get("label", ""))[:60], align="C")
330+ p.set_y(y + gh + 8)
331+
332+ def _serie_stats_row(self, s):
333+ """Ligne min/max/moyenne/médiane sous un graphique de série."""
334+ p = self.pdf
335+ vs = [pt["v"] for pt in (s.get("points") or []) if isinstance(pt.get("v"), (int, float))]
336+ if len(vs) < 2:
337+ return
338+ sv = sorted(vs)
339+ mean = sum(vs) / len(vs)
340+ med = sv[len(sv) // 2]
341+ sd = math.sqrt(sum((v - mean) ** 2 for v in vs) / len(vs))
342+ p.set_font("helvetica", "", 6.8)
343+ p.set_text_color(*INK3)
344+ p.cell(0, 4, f"min {_fr(sv[0])} · max {_fr(sv[-1])} · moyenne {_fr(round(mean, 2))} · médiane {_fr(med)} · écart-type {_fr(round(sd, 2))}")
345+ p.ln(5.5)
346+
347+ def _line_chart(self, s, with_stats=False):
264 p = self.pdf 348 p = self.pdf
265 pts = s.get("points") or [] 349 pts = s.get("points") or []
266 if len(pts) < 2: 350 if len(pts) < 2:
267 return 351 return
352+ if s.get("kind") == "bar":
353+ self._vbars(s)
354+ return
268 if p.get_y() > 200: 355 if p.get_y() > 200:
269 p.add_page() 356 p.add_page()
270− p.set_font("helvetica", "B", 10) 357+ self._chart_title(s.get("title", ""))
271− p.set_text_color(*INK)
272− p.cell(0, 6, s.get("title", ""))
273− p.ln(7)
274 x0, y0, w, h = p.l_margin, p.get_y(), 174, 52 358 x0, y0, w, h = p.l_margin, p.get_y(), 174, 52
275 self._card(x0, y0, w, h, fill=WHITE) 359 self._card(x0, y0, w, h, fill=WHITE)
276 cx, cy, cw, ch = x0 + 12, y0 + 6, w - 20, h - 16 360 cx, cy, cw, ch = x0 + 12, y0 + 6, w - 20, h - 16
@@ -278,7 +362,6 @@ class GroupeKAReport:
278 vmax = max(vals) or 1 362 vmax = max(vals) or 1
279 vmin = min(0, min(vals)) 363 vmin = min(0, min(vals))
280 rng = (vmax - vmin) or 1 364 rng = (vmax - vmin) or 1
281− # grille + graduations
282 p.set_font("helvetica", "", 6.3) 365 p.set_font("helvetica", "", 6.3)
283 p.set_text_color(*INK3) 366 p.set_text_color(*INK3)
284 p.set_draw_color(200, 200, 195) 367 p.set_draw_color(200, 200, 195)
@@ -289,6 +372,20 @@ class GroupeKAReport:
289 p.set_xy(x0 + 1, gy - 1.6) 372 p.set_xy(x0 + 1, gy - 1.6)
290 p.cell(10, 3, _fr(vmin + rng * g / 4), align="R") 373 p.cell(10, 3, _fr(vmin + rng * g / 4), align="R")
291 374
375+ def xy(i, n, v):
376+ return (cx + cw * (i / (n - 1)), cy + ch - ch * ((v - vmin) / rng))
377+
378+ # aire sous la courbe (kind=area) : petits trapèzes accent pâle
379+ if s.get("kind") == "area":
380+ fill = tuple(int(PAPER[j] + (self.accent[j] - PAPER[j]) * 0.18) for j in range(3))
381+ p.set_fill_color(*fill)
382+ p.set_draw_color(*fill)
383+ n = len(pts)
384+ for i in range(n - 1):
385+ x1, y1 = xy(i, n, pts[i]["v"])
386+ x2, y2 = xy(i + 1, n, pts[i + 1]["v"])
387+ p.polygon([(x1, y1), (x2, y2), (x2, cy + ch), (x1, cy + ch)], style="DF")
388+
292 def draw(series, color, width, dash=None): 389 def draw(series, color, width, dash=None):
293 n = len(series) 390 n = len(series)
294 p.set_draw_color(*color) 391 p.set_draw_color(*color)
@@ -297,8 +394,7 @@ class GroupeKAReport:
297 p.set_dash_pattern(dash=1.2, gap=1.2) 394 p.set_dash_pattern(dash=1.2, gap=1.2)
298 last = None 395 last = None
299 for i, pt in enumerate(series): 396 for i, pt in enumerate(series):
300− px = cx + cw * (i / (n - 1)) 397+ px, py = xy(i, n, pt["v"])
301− py = cy + ch - ch * ((pt["v"] - vmin) / rng)
302 if last: 398 if last:
303 p.line(last[0], last[1], px, py) 399 p.line(last[0], last[1], px, py)
304 last = (px, py) 400 last = (px, py)
@@ -307,7 +403,6 @@ class GroupeKAReport:
307 if s.get("compare"): 403 if s.get("compare"):
308 draw(s["compare"], INK3, 0.35, dash=True) 404 draw(s["compare"], INK3, 0.35, dash=True)
309 draw(pts, self.accent, 0.7) 405 draw(pts, self.accent, 0.7)
310− # libellés d'axe X (premier / milieu / dernier)
311 p.set_text_color(*INK3) 406 p.set_text_color(*INK3)
312 for frac, idx in ((0, 0), (0.5, len(pts) // 2), (1, -1)): 407 for frac, idx in ((0, 0), (0.5, len(pts) // 2), (1, -1)):
313 p.set_xy(cx + cw * frac - 9, cy + ch + 1.5) 408 p.set_xy(cx + cw * frac - 9, cy + ch + 1.5)
@@ -317,9 +412,166 @@ class GroupeKAReport:
317 p.set_font("helvetica", "", 6.8) 412 p.set_font("helvetica", "", 6.8)
318 p.set_text_color(*INK3) 413 p.set_text_color(*INK3)
319 p.cell(0, 4, "— période courante (accent) · ---- période comparée") 414 p.cell(0, 4, "— période courante (accent) · ---- période comparée")
320− p.ln(6) 415+ p.ln(5.5)
321− else: 416+ if with_stats:
322− p.ln(2) 417+ self._serie_stats_row(s)
418+ p.ln(1.5)
419+
420+ def _vbars(self, s):
421+ """Barres verticales : série kind=bar ou distribution (bins)."""
422+ p = self.pdf
423+ pts = s.get("points") or [{"t": b.get("label"), "v": b.get("value")} for b in (s.get("bins") or [])]
424+ pts = [pt for pt in pts if isinstance(pt.get("v"), (int, float))]
425+ if not pts:
426+ return
427+ if p.get_y() > 205:
428+ p.add_page()
429+ self._chart_title(s.get("title", ""))
430+ x0, y0, w, h = p.l_margin, p.get_y(), 174, 48
431+ self._card(x0, y0, w, h, fill=WHITE)
432+ cx, cy, cw, ch = x0 + 12, y0 + 5, w - 20, h - 14
433+ vmax = max(pt["v"] for pt in pts) or 1
434+ p.set_font("helvetica", "", 6.3)
435+ p.set_text_color(*INK3)
436+ p.set_draw_color(200, 200, 195)
437+ p.set_line_width(0.15)
438+ for g in range(5):
439+ gy = cy + ch - ch * g / 4
440+ p.line(cx, gy, cx + cw, gy)
441+ p.set_xy(x0 + 1, gy - 1.6)
442+ p.cell(10, 3, _fr(vmax * g / 4), align="R")
443+ n = len(pts)
444+ bw = max(0.8, cw / n - 0.6)
445+ p.set_fill_color(*self.accent)
446+ p.set_draw_color(*INK)
447+ p.set_line_width(0.15)
448+ for i, pt in enumerate(pts):
449+ bh = ch * (pt["v"] / vmax)
450+ p.rect(cx + cw * i / n + 0.3, cy + ch - bh, bw, max(bh, 0.4 if pt["v"] > 0 else 0), style="DF")
451+ p.set_text_color(*INK3)
452+ for frac, idx in ((0, 0), (0.5, n // 2), (1, -1)):
453+ p.set_xy(cx + cw * frac - 10, cy + ch + 1.5)
454+ p.cell(20, 3, str(pts[idx].get("t", ""))[:12], align="C")
455+ p.set_y(y0 + h + 5)
456+
457+ def _multiline(self, ms):
458+ """Multi-séries (≤4) : accent plein / encre fin / accent pointillé /
459+ gris pointillé — l'identité passe par le motif, pas la couleur seule."""
460+ p = self.pdf
461+ series = [s for s in (ms.get("series") or []) if len(s.get("points") or []) > 1][:4]
462+ if not series:
463+ return
464+ if p.get_y() > 195:
465+ p.add_page()
466+ self._chart_title(ms.get("title", ""))
467+ x0, y0, w, h = p.l_margin, p.get_y(), 174, 52
468+ self._card(x0, y0, w, h, fill=WHITE)
469+ cx, cy, cw, ch = x0 + 12, y0 + 6, w - 20, h - 16
470+ vals = [pt["v"] for s in series for pt in s["points"]]
471+ vmax = max(vals) or 1
472+ vmin = min(0, min(vals))
473+ rng = (vmax - vmin) or 1
474+ p.set_font("helvetica", "", 6.3)
475+ p.set_text_color(*INK3)
476+ p.set_draw_color(200, 200, 195)
477+ p.set_line_width(0.15)
478+ for g in range(5):
479+ gy = cy + ch - ch * g / 4
480+ p.line(cx, gy, cx + cw, gy)
481+ p.set_xy(x0 + 1, gy - 1.6)
482+ p.cell(10, 3, _fr(vmin + rng * g / 4), align="R")
483+ styles = [
484+ (self.accent, 0.7, None),
485+ (INK, 0.45, None),
486+ (self.accent, 0.55, True),
487+ (INK3, 0.5, True),
488+ ]
489+ for si, s in enumerate(series):
490+ col, lw, dash = styles[si]
491+ p.set_draw_color(*col)
492+ p.set_line_width(lw)
493+ if dash:
494+ p.set_dash_pattern(dash=1.4, gap=1.2)
495+ n = len(s["points"])
496+ last = None
497+ for i, pt in enumerate(s["points"]):
498+ px = cx + cw * (i / (n - 1))
499+ py = cy + ch - ch * ((pt["v"] - vmin) / rng)
500+ if last:
501+ p.line(last[0], last[1], px, py)
502+ last = (px, py)
503+ p.set_dash_pattern()
504+ ref = series[0]["points"]
505+ p.set_text_color(*INK3)
506+ for frac, idx in ((0, 0), (0.5, len(ref) // 2), (1, -1)):
507+ p.set_xy(cx + cw * frac - 9, cy + ch + 1.5)
508+ p.cell(18, 3, str(ref[idx].get("t", ""))[:10], align="C")
509+ p.set_y(y0 + h + 4)
510+ p.set_font("helvetica", "", 6.8)
511+ p.set_text_color(*INK3)
512+ marks = ["—", "—", "----", "----"]
513+ leg = " · ".join(f"{marks[i]} {s.get('label', '')}" for i, s in enumerate(series))
514+ p.cell(0, 4, leg[:120])
515+ p.ln(6)
516+
517+ def _stacked(self, st):
518+ p = self.pdf
519+ keys = (st.get("keys") or [])[:6]
520+ pts = st.get("points") or []
521+ if not keys or not pts:
522+ return
523+ if p.get_y() > 195:
524+ p.add_page()
525+ self._chart_title(st.get("title", ""))
526+ x0, y0, w, h = p.l_margin, p.get_y(), 174, 52
527+ self._card(x0, y0, w, h, fill=WHITE)
528+ cx, cy, cw, ch = x0 + 12, y0 + 6, w - 20, h - 16
529+ totals = [sum(v or 0 for v in pt.get("values", [])[: len(keys)]) for pt in pts]
530+ vmax = max(totals) or 1
531+ p.set_font("helvetica", "", 6.3)
532+ p.set_text_color(*INK3)
533+ p.set_draw_color(200, 200, 195)
534+ p.set_line_width(0.15)
535+ for g in range(5):
536+ gy = cy + ch - ch * g / 4
537+ p.line(cx, gy, cx + cw, gy)
538+ p.set_xy(x0 + 1, gy - 1.6)
539+ p.cell(10, 3, _fr(vmax * g / 4), align="R")
540+ n = len(pts)
541+ bw = max(0.8, cw / n - 0.6)
542+ p.set_draw_color(*WHITE)
543+ p.set_line_width(0.12)
544+ for i, pt in enumerate(pts):
545+ yacc = cy + ch
546+ for j, k in enumerate(keys):
547+ v = (pt.get("values") or [0] * len(keys))[j] if j < len(pt.get("values", [])) else 0
548+ if not v:
549+ continue
550+ bh = ch * (v / vmax)
551+ yacc -= bh
552+ p.set_fill_color(*self._shade(j))
553+ p.rect(cx + cw * i / n + 0.3, yacc, bw, max(bh - 0.15, 0.3), style="DF")
554+ p.set_text_color(*INK3)
555+ for frac, idx in ((0, 0), (0.5, n // 2), (1, -1)):
556+ p.set_xy(cx + cw * frac - 10, cy + ch + 1.5)
557+ p.cell(20, 3, str(pts[idx].get("t", ""))[:12], align="C")
558+ p.set_y(y0 + h + 4)
559+ # légende
560+ p.set_font("helvetica", "", 6.8)
561+ lx = p.l_margin
562+ for j, k in enumerate(keys):
563+ p.set_fill_color(*self._shade(j))
564+ p.set_draw_color(*INK)
565+ p.set_line_width(0.2)
566+ p.rect(lx, p.get_y() + 0.6, 3, 3, style="DF")
567+ p.set_xy(lx + 4, p.get_y())
568+ p.set_text_color(*INK2)
569+ txt = str(k)[:22]
570+ p.cell(p.get_string_width(txt) + 3, 4, txt)
571+ lx = p.get_x() + 3
572+ if lx > 165:
573+ break
574+ p.ln(7)
323 575
324 def _bars(self, title, items, unit=""): 576 def _bars(self, title, items, unit=""):
325 p = self.pdf 577 p = self.pdf
@@ -329,10 +581,8 @@ class GroupeKAReport:
329 need = 10 + len(items) * 7 581 need = 10 + len(items) * 7
330 if p.get_y() + need > 265: 582 if p.get_y() + need > 265:
331 p.add_page() 583 p.add_page()
332− p.set_font("helvetica", "B", 10) 584+ self._chart_title(title)
333− p.set_text_color(*INK) 585+ p.ln(1)
334− p.cell(0, 6, title)
335− p.ln(8)
336 vmax = max(it["value"] for it in items) or 1 586 vmax = max(it["value"] for it in items) or 1
337 for it in items: 587 for it in items:
338 y = p.get_y() 588 y = p.get_y()
@@ -340,19 +590,23 @@ class GroupeKAReport:
340 p.set_text_color(*INK) 590 p.set_text_color(*INK)
341 p.set_x(p.l_margin) 591 p.set_x(p.l_margin)
342 p.cell(46, 5, str(it["label"])[:34]) 592 p.cell(46, 5, str(it["label"])[:34])
343− bw = 96 * (it["value"] / vmax) 593+ bw = 86 * (it["value"] / vmax)
344 p.set_fill_color(*self.accent) 594 p.set_fill_color(*self.accent)
345 p.set_draw_color(*INK) 595 p.set_draw_color(*INK)
346 p.set_line_width(0.25) 596 p.set_line_width(0.25)
347 p.rect(p.l_margin + 48, y + 0.7, max(bw, 0.8), 3.6, style="DF") 597 p.rect(p.l_margin + 48, y + 0.7, max(bw, 0.8), 3.6, style="DF")
348− p.set_xy(p.l_margin + 148, y) 598+ p.set_xy(p.l_margin + 136, y)
349 p.set_font("helvetica", "B", 7.6) 599 p.set_font("helvetica", "B", 7.6)
350− p.cell(26, 5, _fr(it["value"]) + (" " + unit if unit else ""), align="R") 600+ p.cell(24, 5, _fr(it["value"]) + (" " + unit if unit else ""), align="R")
601+ if it.get("delta_pct") is not None:
602+ up = it["delta_pct"] >= 0
603+ p.set_font("helvetica", "B", 6.6)
604+ p.set_text_color(*(GREEN if up else DANGER))
605+ p.cell(14, 5, f"{'+' if up else ''}{str(round(it['delta_pct'], 1)).replace('.', ',')} %", align="R")
351 p.ln(6.4) 606 p.ln(6.4)
352 p.ln(3) 607 p.ln(3)
353 608
354 def _donut(self, b): 609 def _donut(self, b):
355− # anneau vectoriel simple (arcs) + légende
356 p = self.pdf 610 p = self.pdf
357 items = [it for it in (b.get("items") or []) if it.get("value")][:8] 611 items = [it for it in (b.get("items") or []) if it.get("value")][:8]
358 total = sum(it["value"] for it in items) 612 total = sum(it["value"] for it in items)
@@ -360,17 +614,13 @@ class GroupeKAReport:
360 return 614 return
361 if p.get_y() > 210: 615 if p.get_y() > 210:
362 p.add_page() 616 p.add_page()
363− p.set_font("helvetica", "B", 10) 617+ self._chart_title(b.get("title", ""))
364− p.set_text_color(*INK) 618+ p.ln(1)
365− p.cell(0, 6, b.get("title", ""))
366− p.ln(8)
367 cx, cy, r = p.l_margin + 26, p.get_y() + 24, 20 619 cx, cy, r = p.l_margin + 26, p.get_y() + 24, 20
368− shades = [1.0, 0.78, 0.58, 0.42, 0.30, 0.22, 0.15, 0.10]
369 start = -90.0 620 start = -90.0
370 for i, it in enumerate(items): 621 for i, it in enumerate(items):
371 frac = it["value"] / total 622 frac = it["value"] / total
372− f = shades[i % len(shades)] 623+ col = self._shade(i)
373− col = tuple(int(PAPER[j] + (self.accent[j] - PAPER[j]) * f) for j in range(3))
374 steps = max(2, int(72 * frac)) 624 steps = max(2, int(72 * frac))
375 p.set_fill_color(*col) 625 p.set_fill_color(*col)
376 p.set_draw_color(*col) 626 p.set_draw_color(*col)
@@ -389,11 +639,9 @@ class GroupeKAReport:
389 p.set_line_width(0.4) 639 p.set_line_width(0.4)
390 p.ellipse(cx - 11, cy - 11, 22, 22, style="DF") 640 p.ellipse(cx - 11, cy - 11, 22, 22, style="DF")
391 p.ellipse(cx - r, cy - r, 2 * r, 2 * r, style="D") 641 p.ellipse(cx - r, cy - r, 2 * r, 2 * r, style="D")
392− # légende
393 ly = cy - 22 642 ly = cy - 22
394 for i, it in enumerate(items): 643 for i, it in enumerate(items):
395− f = shades[i % len(shades)] 644+ col = self._shade(i)
396− col = tuple(int(PAPER[j] + (self.accent[j] - PAPER[j]) * f) for j in range(3))
397 p.set_fill_color(*col) 645 p.set_fill_color(*col)
398 p.set_draw_color(*INK) 646 p.set_draw_color(*INK)
399 p.rect(p.l_margin + 60, ly + 0.8, 4, 4, style="DF") 647 p.rect(p.l_margin + 60, ly + 0.8, 4, 4, style="DF")
@@ -405,7 +653,39 @@ class GroupeKAReport:
405 ly += 5.6 653 ly += 5.6
406 p.set_y(max(cy + r, ly) + 6) 654 p.set_y(max(cy + r, ly) + 6)
407 655
408− def _table(self, t): 656+ def _hourly(self):
657+ hh = self.d.get("hourly") or {}
658+ cells = hh.get("cells") or []
659+ if not cells:
660+ return
661+ p = self.pdf
662+ if p.get_y() > 190:
663+ p.add_page()
664+ self._chart_title(hh.get("title", "Activité par jour et heure"))
665+ x0, y0 = p.l_margin, p.get_y()
666+ cw, chh, lx, ly = 6.4, 6.4, 12, 5
667+ vmax = max((c.get("value") or 0) for c in cells) or 1
668+ grid = {(c.get("dow"), c.get("hour")): c.get("value") or 0 for c in cells}
669+ dows = ["Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"]
670+ p.set_font("helvetica", "", 5.8)
671+ p.set_text_color(*INK3)
672+ for h in (0, 6, 12, 18, 23):
673+ p.set_xy(x0 + lx + h * cw, y0)
674+ p.cell(cw, 3, f"{h}h", align="C")
675+ for d in range(7):
676+ p.set_xy(x0, y0 + ly + d * chh + 1.5)
677+ p.cell(lx - 1, 3, dows[d], align="R")
678+ for h in range(24):
679+ v = grid.get((d, h), 0)
680+ f = 0.1 + 0.9 * (v / vmax) if v else 0.0
681+ col = tuple(int(PAPER[j] + (self.accent[j] - PAPER[j]) * f) for j in range(3)) if v else (235, 233, 228)
682+ p.set_fill_color(*col)
683+ p.set_draw_color(215, 213, 207)
684+ p.set_line_width(0.1)
685+ p.rect(x0 + lx + h * cw, y0 + ly + d * chh, cw - 0.5, chh - 0.5, style="DF")
686+ p.set_y(y0 + ly + 7 * chh + 5)
687+
688+ def _table(self, t, max_rows=200):
409 p = self.pdf 689 p = self.pdf
410 cols = t.get("columns") or [] 690 cols = t.get("columns") or []
411 rows = t.get("rows") or [] 691 rows = t.get("rows") or []
@@ -422,7 +702,7 @@ class GroupeKAReport:
422 p.ln(6) 702 p.ln(6)
423 head() 703 head()
424 p.set_text_color(*INK) 704 p.set_text_color(*INK)
425− for i, row in enumerate(rows[:200]): 705+ for i, row in enumerate(rows[:max_rows]):
426 if p.get_y() > 262: 706 if p.get_y() > 262:
427 p.add_page() 707 p.add_page()
428 head() 708 head()
@@ -433,10 +713,10 @@ class GroupeKAReport:
433 txt = _fr(cell) if isinstance(cell, (int, float)) else str(cell) 713 txt = _fr(cell) if isinstance(cell, (int, float)) else str(cell)
434 p.cell(w, 5.4, " " + txt[:34], fill=True) 714 p.cell(w, 5.4, " " + txt[:34], fill=True)
435 p.ln(5.4) 715 p.ln(5.4)
436− if len(rows) > 200: 716+ if len(rows) > max_rows:
437 p.set_font("helvetica", "", 7) 717 p.set_font("helvetica", "", 7)
438 p.set_text_color(*INK3) 718 p.set_text_color(*INK3)
439− p.cell(0, 5, f"… {len(rows) - 200} lignes supplémentaires non imprimées") 719+ p.cell(0, 5, f"… {len(rows) - max_rows} lignes supplémentaires non imprimées")
440 p.ln(6) 720 p.ln(6)
441 721
442 def _records(self): 722 def _records(self):
@@ -445,7 +725,7 @@ class GroupeKAReport:
445 return 725 return
446 self._section_title("Records & faits marquants") 726 self._section_title("Records & faits marquants")
447 p = self.pdf 727 p = self.pdf
448− for r in recs[:10]: 728+ for r in recs[:14]:
449 if p.get_y() > 258: 729 if p.get_y() > 258:
450 p.add_page() 730 p.add_page()
451 y = p.get_y() 731 y = p.get_y()
@@ -503,43 +783,76 @@ class GroupeKAReport:
503 "groupe-ka.com/conditions · /confidentialite · /loi-25.", 783 "groupe-ka.com/conditions · /confidentialite · /loi-25.",
504 ) 784 )
505 785
506− def _toc_page(self): 786+ # ---------- groupes de sections ----------
507− # insérée après coup ? fpdf ne réordonne pas : on écrit le sommaire en 787+ def _all_series(self, with_stats=True):
508− # page 2 en réservant la page lors du build (voir build()). 788+ for s in self.d.get("series") or []:
509− pass 789+ self._line_chart(s, with_stats=with_stats)
790+ for ms in self.d.get("multiseries") or []:
791+ self._multiline(ms)
792+ for st in self.d.get("stacked") or []:
793+ self._stacked(st)
794+
795+ def _all_breakdowns(self):
796+ for b in self.d.get("breakdowns") or []:
797+ if b.get("kind") == "donut":
798+ self._donut(b)
799+ else:
800+ self._bars(b.get("title", ""), b.get("items"))
801+ for dist in self.d.get("distributions") or []:
802+ self._vbars(dist)
803+ geo = self.d.get("geo")
804+ if geo:
805+ self._bars(geo.get("title", "Répartition géographique"), geo.get("items"))
806+ self._hourly()
510 807
511 def build(self) -> bytes: 808 def build(self) -> bytes:
512 p = self.pdf 809 p = self.pdf
513 p.alias_nb_pages() 810 p.alias_nb_pages()
514 self._cover() 811 self._cover()
812+ with_toc = self.mode in ("complet", "donnees")
813+ toc_page_no = None
515 if self.mode == "synthese": 814 if self.mode == "synthese":
516 p.add_page() 815 p.add_page()
517 self._kpis() 816 self._kpis()
817+ self._gauges()
818+ self._records()
819+ self._final_page()
820+ elif self.mode == "tendances":
821+ p.add_page()
822+ self._kpis()
823+ self._section_title("Évolution & tendances")
824+ self._all_series(with_stats=True)
518 self._records() 825 self._records()
519 self._final_page() 826 self._final_page()
520− else: 827+ elif self.mode == "repartitions":
828+ p.add_page()
829+ self._section_title("Répartitions, distributions & géographie")
830+ self._all_breakdowns()
831+ self._final_page()
832+ elif self.mode == "donnees":
833+ p.add_page()
834+ toc_page_no = p.page_no()
835+ for t in self.d.get("tables") or []:
836+ self._table(t, max_rows=400)
837+ self._final_page()
838+ else: # complet
521 p.add_page() 839 p.add_page()
522 toc_page_no = p.page_no() 840 toc_page_no = p.page_no()
523 p.add_page() 841 p.add_page()
524 self._kpis() 842 self._kpis()
525− for s in self.d.get("series") or []: 843+ self._gauges()
526− if s.get("kind") == "bar": 844+ if (self.d.get("series") or self.d.get("multiseries") or self.d.get("stacked")):
527− self._bars(s.get("title", ""), [{"label": pt.get("t"), "value": pt.get("v")} for pt in (s.get("points") or [])], s.get("unit", "")) 845+ self._section_title("Évolution & tendances")
528− else: 846+ self._all_series(with_stats=True)
529− self._line_chart(s) 847+ if (self.d.get("breakdowns") or self.d.get("distributions") or self.d.get("geo") or self.d.get("hourly")):
530− for b in self.d.get("breakdowns") or []: 848+ self._section_title("Répartitions, distributions & géographie")
531− if b.get("kind") == "donut": 849+ self._all_breakdowns()
532− self._donut(b)
533− else:
534− self._bars(b.get("title", ""), b.get("items"))
535− geo = self.d.get("geo")
536− if geo:
537− self._bars(geo.get("title", "Répartition géographique"), geo.get("items"))
538 for t in self.d.get("tables") or []: 850 for t in self.d.get("tables") or []:
539 self._table(t) 851 self._table(t)
540 self._records() 852 self._records()
541 self._final_page() 853 self._final_page()
542− # sommaire écrit sur la page réservée (page 2) 854+ # sommaire écrit sur la page réservée
855+ if toc_page_no is not None:
543 last_page = p.page 856 last_page = p.page
544 p.page = toc_page_no 857 p.page = toc_page_no
545 p.set_y(22) 858 p.set_y(22)
@@ -558,6 +871,7 @@ class GroupeKAReport:
558 return bytes(p.output()) 871 return bytes(p.output())
559 872
560 873
561−def filename(platform_id: str, period: str) -> str: 874+def filename(platform_id: str, period: str, mode: str = "complet") -> str:
562 today = datetime.now(ZoneInfo("America/Toronto")).strftime("%Y-%m-%d") 875 today = datetime.now(ZoneInfo("America/Toronto")).strftime("%Y-%m-%d")
563− return f"groupe-ka_{platform_id}_stats_{period}_{today}.pdf" 876+ suffix = "" if mode in ("", "complet") else f"_{mode}"
877+ return f"groupe-ka_{platform_id}_stats_{period}{suffix}_{today}.pdf"
modified frontend/src/ka/tokens.css +87 −0
Large diff (97 lines) is not loaded by default to keep the page fast.Load diff
modified frontend/src/pages/Stats.tsx +56 −19
Large diff (136 lines) is not loaded by default to keep the page fast.Load diff
modified restoka/kapdf.py +390 −76
Large diff (693 lines) is not loaded by default to keep the page fast.Load diff
modified restoka/stats.py +382 −39
Large diff (543 lines) is not loaded by default to keep the page fast.Load diff
modified restoka/web.py +6 −4
Large diff (23 lines) is not loaded by default to keep the page fast.Load diff
Menu

Theme
↑↓ navigate ↵ open esc close / or ⌘K anywhere