SPB Git
spboucher.ai

spb/lou-ka

Public

Lou·Ka — tous les logements à louer du Québec, un seul endroit.

www.lou-ka.com
webappreal-estatequebecrental

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

- louka/statsdash.py : jauges de couverture (geo/prix/photos/publiees/completude),
  sparklines KPI, serie des retraits + loyer moyen d entree (area), multi-courbes
  loyer median par taille, barres empilees par source, distribution des loyers,
  heatmap horaire 7x24, calendrier 26 semaines, tables loyers par taille et
  baisses de loyer, records enrichis (villes chere/abordable, hausse, heure de
  pointe) - donnees reelles seulement, cache 5 min conserve
- louka/kapdf.py + frontend/src/ka/stats/* : module canonique v2 (5 modes PDF)
- /api/stats/report : mode=complet|synthese|tendances|repartitions|donnees,
  filename(mode) ; inconnu -> complet (retrocompatible v1)
- pages/Stats.tsx : rendu des nouvelles sections dans l ordre du SPEC v2 +
  PdfButton menu 5 rapports

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

7 changed files +1,757 −306

7 changed files
Load all 7 files Unified Split
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 −71
@@ -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
@@ -79,7 +95,7 @@ class _PDF(FPDF):
79 self.set_auto_page_break(True, margin=22) 95 self.set_auto_page_break(True, margin=22)
80 96
81 def header(self): 97 def header(self):
82− if self.cover_mode: 98+ if self.cover_mode or self.page_no() == 1:
83 return 99 return
84 self.set_font("helvetica", "B", 8.5) 100 self.set_font("helvetica", "B", 8.5)
85 self.set_text_color(*INK) 101 self.set_text_color(*INK)
@@ -95,7 +111,9 @@ class _PDF(FPDF):
95 self.set_y(20) 111 self.set_y(20)
96 112
97 def footer(self): 113 def footer(self):
98− if self.cover_mode: 114+ # page 1 = couverture (le flag cover_mode est déjà retombé quand
115+ # add_page() clôt la page 1 → tester aussi le numéro de page)
116+ if self.cover_mode or self.page_no() == 1:
99 return 117 return
100 self.set_y(-15) 118 self.set_y(-15)
101 self.set_draw_color(*INK3) 119 self.set_draw_color(*INK3)
@@ -112,7 +130,7 @@ class GroupeKAReport:
112 def __init__(self, site: dict, dashboard: dict, mode: str = "complet"): 130 def __init__(self, site: dict, dashboard: dict, mode: str = "complet"):
113 self.site = site 131 self.site = site
114 self.d = dashboard 132 self.d = dashboard
115− self.mode = mode 133+ self.mode = mode if mode in REPORT_MODES else "complet"
116 self.accent = _hex(site.get("accent", "#d9f26b")) 134 self.accent = _hex(site.get("accent", "#d9f26b"))
117 period = dashboard.get("period", {}) or {} 135 period = dashboard.get("period", {}) or {}
118 self.period_label = period.get("label") or "toute la période" 136 self.period_label = period.get("label") or "toute la période"
@@ -127,6 +145,11 @@ class GroupeKAReport:
127 p.set_fill_color(*fill) 145 p.set_fill_color(*fill)
128 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)
129 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+
130 def _kicker(self, text): 153 def _kicker(self, text):
131 p = self.pdf 154 p = self.pdf
132 p.set_font("helvetica", "B", 8) 155 p.set_font("helvetica", "B", 8)
@@ -150,6 +173,14 @@ class GroupeKAReport:
150 self.toc.append((title, self.pdf.page_no())) 173 self.toc.append((title, self.pdf.page_no()))
151 self.pdf.ln(11) 174 self.pdf.ln(11)
152 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+
153 # ---------- pages ---------- 184 # ---------- pages ----------
154 def _cover(self): 185 def _cover(self):
155 p = self.pdf 186 p = self.pdf
@@ -161,12 +192,10 @@ class GroupeKAReport:
161 p.set_draw_color(*INK) 192 p.set_draw_color(*INK)
162 p.set_line_width(1.0) 193 p.set_line_width(1.0)
163 p.rect(10, 10, 190, 277) 194 p.rect(10, 10, 190, 277)
164− # kicker
165 p.set_font("helvetica", "B", 10) 195 p.set_font("helvetica", "B", 10)
166 p.set_text_color(*GREEN) 196 p.set_text_color(*GREEN)
167 p.set_xy(24, 34) 197 p.set_xy(24, 34)
168 p.cell(0, 6, "GROUPE KA · RAPPORT STATISTIQUE") 198 p.cell(0, 6, "GROUPE KA · RAPPORT STATISTIQUE")
169− # wordmark : partie gauche + boîte encre/accent
170 wm = self.site.get("wordmark", "") 199 wm = self.site.get("wordmark", "")
171 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)
172 p.set_xy(24, 70) 201 p.set_xy(24, 70)
@@ -184,7 +213,7 @@ class GroupeKAReport:
184 p.set_xy(24, 100) 213 p.set_xy(24, 100)
185 p.set_font("helvetica", "", 13) 214 p.set_font("helvetica", "", 13)
186 p.set_text_color(*INK2) 215 p.set_text_color(*INK2)
187− p.multi_cell(150, 7, f"Rapport statistique — {wm}") 216+ p.multi_cell(150, 7, f"{REPORT_MODES[self.mode]} — {wm}")
188 now = datetime.now(ZoneInfo("America/Toronto")) 217 now = datetime.now(ZoneInfo("America/Toronto"))
189 per = self.d.get("period", {}) or {} 218 per = self.d.get("period", {}) or {}
190 p.set_xy(24, 125) 219 p.set_xy(24, 125)
@@ -193,7 +222,7 @@ class GroupeKAReport:
193 ("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 "")),
194 ("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)"),
195 ("Plateforme", "https://" + self.site.get("domain", "")), 224 ("Plateforme", "https://" + self.site.get("domain", "")),
196− ("Mode", "Rapport complet" if self.mode == "complet" else "Synthèse"), 225+ ("Type de rapport", REPORT_MODES[self.mode]),
197 ] 226 ]
198 y = 128 227 y = 128
199 for k, v in rows: 228 for k, v in rows:
@@ -205,7 +234,6 @@ class GroupeKAReport:
205 p.cell(0, 6, str(v)) 234 p.cell(0, 6, str(v))
206 p.set_font("helvetica", "", 10.5) 235 p.set_font("helvetica", "", 10.5)
207 y += 8 236 y += 8
208− # bande encre au pied
209 p.set_fill_color(*INK) 237 p.set_fill_color(*INK)
210 p.rect(10, 262, 190, 25, style="F") 238 p.rect(10, 262, 190, 25, style="F")
211 p.set_xy(24, 270) 239 p.set_xy(24, 270)
@@ -230,7 +258,7 @@ class GroupeKAReport:
230 p = self.pdf 258 p = self.pdf
231 cols, gw, gh, gap = 3, 56, 26, 3 259 cols, gw, gh, gap = 3, 56, 26, 3
232 x0, y = p.l_margin, p.get_y() 260 x0, y = p.l_margin, p.get_y()
233− for i, k in enumerate(kpis[:9]): 261+ for i, k in enumerate(kpis[:12]):
234 x = x0 + (i % cols) * (gw + gap) 262 x = x0 + (i % cols) * (gw + gap)
235 if i and i % cols == 0: 263 if i and i % cols == 0:
236 y += gh + gap 264 y += gh + gap
@@ -252,20 +280,81 @@ class GroupeKAReport:
252 p.set_font("helvetica", "B", 8) 280 p.set_font("helvetica", "B", 8)
253 p.set_text_color(*(GREEN if up else DANGER)) 281 p.set_text_color(*(GREEN if up else DANGER))
254 arrow = "+" if k["delta_pct"] >= 0 else "" 282 arrow = "+" if k["delta_pct"] >= 0 else ""
255− 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.")
256 p.set_y(y + gh + 8) 286 p.set_y(y + gh + 8)
257 287
258− 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):
259 p = self.pdf 348 p = self.pdf
260 pts = s.get("points") or [] 349 pts = s.get("points") or []
261 if len(pts) < 2: 350 if len(pts) < 2:
262 return 351 return
352+ if s.get("kind") == "bar":
353+ self._vbars(s)
354+ return
263 if p.get_y() > 200: 355 if p.get_y() > 200:
264 p.add_page() 356 p.add_page()
265− p.set_font("helvetica", "B", 10) 357+ self._chart_title(s.get("title", ""))
266− p.set_text_color(*INK)
267− p.cell(0, 6, s.get("title", ""))
268− p.ln(7)
269 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
270 self._card(x0, y0, w, h, fill=WHITE) 359 self._card(x0, y0, w, h, fill=WHITE)
271 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
@@ -273,7 +362,6 @@ class GroupeKAReport:
273 vmax = max(vals) or 1 362 vmax = max(vals) or 1
274 vmin = min(0, min(vals)) 363 vmin = min(0, min(vals))
275 rng = (vmax - vmin) or 1 364 rng = (vmax - vmin) or 1
276− # grille + graduations
277 p.set_font("helvetica", "", 6.3) 365 p.set_font("helvetica", "", 6.3)
278 p.set_text_color(*INK3) 366 p.set_text_color(*INK3)
279 p.set_draw_color(200, 200, 195) 367 p.set_draw_color(200, 200, 195)
@@ -284,6 +372,20 @@ class GroupeKAReport:
284 p.set_xy(x0 + 1, gy - 1.6) 372 p.set_xy(x0 + 1, gy - 1.6)
285 p.cell(10, 3, _fr(vmin + rng * g / 4), align="R") 373 p.cell(10, 3, _fr(vmin + rng * g / 4), align="R")
286 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+
287 def draw(series, color, width, dash=None): 389 def draw(series, color, width, dash=None):
288 n = len(series) 390 n = len(series)
289 p.set_draw_color(*color) 391 p.set_draw_color(*color)
@@ -292,8 +394,7 @@ class GroupeKAReport:
292 p.set_dash_pattern(dash=1.2, gap=1.2) 394 p.set_dash_pattern(dash=1.2, gap=1.2)
293 last = None 395 last = None
294 for i, pt in enumerate(series): 396 for i, pt in enumerate(series):
295− px = cx + cw * (i / (n - 1)) 397+ px, py = xy(i, n, pt["v"])
296− py = cy + ch - ch * ((pt["v"] - vmin) / rng)
297 if last: 398 if last:
298 p.line(last[0], last[1], px, py) 399 p.line(last[0], last[1], px, py)
299 last = (px, py) 400 last = (px, py)
@@ -302,7 +403,6 @@ class GroupeKAReport:
302 if s.get("compare"): 403 if s.get("compare"):
303 draw(s["compare"], INK3, 0.35, dash=True) 404 draw(s["compare"], INK3, 0.35, dash=True)
304 draw(pts, self.accent, 0.7) 405 draw(pts, self.accent, 0.7)
305− # libellés d'axe X (premier / milieu / dernier)
306 p.set_text_color(*INK3) 406 p.set_text_color(*INK3)
307 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)):
308 p.set_xy(cx + cw * frac - 9, cy + ch + 1.5) 408 p.set_xy(cx + cw * frac - 9, cy + ch + 1.5)
@@ -312,9 +412,166 @@ class GroupeKAReport:
312 p.set_font("helvetica", "", 6.8) 412 p.set_font("helvetica", "", 6.8)
313 p.set_text_color(*INK3) 413 p.set_text_color(*INK3)
314 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")
315− p.ln(6) 415+ p.ln(5.5)
316− else: 416+ if with_stats:
317− 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)
318 575
319 def _bars(self, title, items, unit=""): 576 def _bars(self, title, items, unit=""):
320 p = self.pdf 577 p = self.pdf
@@ -324,10 +581,8 @@ class GroupeKAReport:
324 need = 10 + len(items) * 7 581 need = 10 + len(items) * 7
325 if p.get_y() + need > 265: 582 if p.get_y() + need > 265:
326 p.add_page() 583 p.add_page()
327− p.set_font("helvetica", "B", 10) 584+ self._chart_title(title)
328− p.set_text_color(*INK) 585+ p.ln(1)
329− p.cell(0, 6, title)
330− p.ln(8)
331 vmax = max(it["value"] for it in items) or 1 586 vmax = max(it["value"] for it in items) or 1
332 for it in items: 587 for it in items:
333 y = p.get_y() 588 y = p.get_y()
@@ -335,19 +590,23 @@ class GroupeKAReport:
335 p.set_text_color(*INK) 590 p.set_text_color(*INK)
336 p.set_x(p.l_margin) 591 p.set_x(p.l_margin)
337 p.cell(46, 5, str(it["label"])[:34]) 592 p.cell(46, 5, str(it["label"])[:34])
338− bw = 96 * (it["value"] / vmax) 593+ bw = 86 * (it["value"] / vmax)
339 p.set_fill_color(*self.accent) 594 p.set_fill_color(*self.accent)
340 p.set_draw_color(*INK) 595 p.set_draw_color(*INK)
341 p.set_line_width(0.25) 596 p.set_line_width(0.25)
342 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")
343− p.set_xy(p.l_margin + 148, y) 598+ p.set_xy(p.l_margin + 136, y)
344 p.set_font("helvetica", "B", 7.6) 599 p.set_font("helvetica", "B", 7.6)
345− 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")
346 p.ln(6.4) 606 p.ln(6.4)
347 p.ln(3) 607 p.ln(3)
348 608
349 def _donut(self, b): 609 def _donut(self, b):
350− # anneau vectoriel simple (arcs) + légende
351 p = self.pdf 610 p = self.pdf
352 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]
353 total = sum(it["value"] for it in items) 612 total = sum(it["value"] for it in items)
@@ -355,17 +614,13 @@ class GroupeKAReport:
355 return 614 return
356 if p.get_y() > 210: 615 if p.get_y() > 210:
357 p.add_page() 616 p.add_page()
358− p.set_font("helvetica", "B", 10) 617+ self._chart_title(b.get("title", ""))
359− p.set_text_color(*INK) 618+ p.ln(1)
360− p.cell(0, 6, b.get("title", ""))
361− p.ln(8)
362 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
363− shades = [1.0, 0.78, 0.58, 0.42, 0.30, 0.22, 0.15, 0.10]
364 start = -90.0 620 start = -90.0
365 for i, it in enumerate(items): 621 for i, it in enumerate(items):
366 frac = it["value"] / total 622 frac = it["value"] / total
367− f = shades[i % len(shades)] 623+ col = self._shade(i)
368− col = tuple(int(PAPER[j] + (self.accent[j] - PAPER[j]) * f) for j in range(3))
369 steps = max(2, int(72 * frac)) 624 steps = max(2, int(72 * frac))
370 p.set_fill_color(*col) 625 p.set_fill_color(*col)
371 p.set_draw_color(*col) 626 p.set_draw_color(*col)
@@ -384,11 +639,9 @@ class GroupeKAReport:
384 p.set_line_width(0.4) 639 p.set_line_width(0.4)
385 p.ellipse(cx - 11, cy - 11, 22, 22, style="DF") 640 p.ellipse(cx - 11, cy - 11, 22, 22, style="DF")
386 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")
387− # légende
388 ly = cy - 22 642 ly = cy - 22
389 for i, it in enumerate(items): 643 for i, it in enumerate(items):
390− f = shades[i % len(shades)] 644+ col = self._shade(i)
391− col = tuple(int(PAPER[j] + (self.accent[j] - PAPER[j]) * f) for j in range(3))
392 p.set_fill_color(*col) 645 p.set_fill_color(*col)
393 p.set_draw_color(*INK) 646 p.set_draw_color(*INK)
394 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")
@@ -400,7 +653,39 @@ class GroupeKAReport:
400 ly += 5.6 653 ly += 5.6
401 p.set_y(max(cy + r, ly) + 6) 654 p.set_y(max(cy + r, ly) + 6)
402 655
403− 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):
404 p = self.pdf 689 p = self.pdf
405 cols = t.get("columns") or [] 690 cols = t.get("columns") or []
406 rows = t.get("rows") or [] 691 rows = t.get("rows") or []
@@ -417,7 +702,7 @@ class GroupeKAReport:
417 p.ln(6) 702 p.ln(6)
418 head() 703 head()
419 p.set_text_color(*INK) 704 p.set_text_color(*INK)
420− for i, row in enumerate(rows[:200]): 705+ for i, row in enumerate(rows[:max_rows]):
421 if p.get_y() > 262: 706 if p.get_y() > 262:
422 p.add_page() 707 p.add_page()
423 head() 708 head()
@@ -428,10 +713,10 @@ class GroupeKAReport:
428 txt = _fr(cell) if isinstance(cell, (int, float)) else str(cell) 713 txt = _fr(cell) if isinstance(cell, (int, float)) else str(cell)
429 p.cell(w, 5.4, " " + txt[:34], fill=True) 714 p.cell(w, 5.4, " " + txt[:34], fill=True)
430 p.ln(5.4) 715 p.ln(5.4)
431− if len(rows) > 200: 716+ if len(rows) > max_rows:
432 p.set_font("helvetica", "", 7) 717 p.set_font("helvetica", "", 7)
433 p.set_text_color(*INK3) 718 p.set_text_color(*INK3)
434− 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")
435 p.ln(6) 720 p.ln(6)
436 721
437 def _records(self): 722 def _records(self):
@@ -440,7 +725,7 @@ class GroupeKAReport:
440 return 725 return
441 self._section_title("Records & faits marquants") 726 self._section_title("Records & faits marquants")
442 p = self.pdf 727 p = self.pdf
443− for r in recs[:10]: 728+ for r in recs[:14]:
444 if p.get_y() > 258: 729 if p.get_y() > 258:
445 p.add_page() 730 p.add_page()
446 y = p.get_y() 731 y = p.get_y()
@@ -498,43 +783,76 @@ class GroupeKAReport:
498 "groupe-ka.com/conditions · /confidentialite · /loi-25.", 783 "groupe-ka.com/conditions · /confidentialite · /loi-25.",
499 ) 784 )
500 785
501− def _toc_page(self): 786+ # ---------- groupes de sections ----------
502− # insérée après coup ? fpdf ne réordonne pas : on écrit le sommaire en 787+ def _all_series(self, with_stats=True):
503− # page 2 en réservant la page lors du build (voir build()). 788+ for s in self.d.get("series") or []:
504− 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()
505 807
506 def build(self) -> bytes: 808 def build(self) -> bytes:
507 p = self.pdf 809 p = self.pdf
508 p.alias_nb_pages() 810 p.alias_nb_pages()
509 self._cover() 811 self._cover()
812+ with_toc = self.mode in ("complet", "donnees")
813+ toc_page_no = None
510 if self.mode == "synthese": 814 if self.mode == "synthese":
511 p.add_page() 815 p.add_page()
512 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)
513 self._records() 825 self._records()
514 self._final_page() 826 self._final_page()
515− 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
516 p.add_page() 839 p.add_page()
517 toc_page_no = p.page_no() 840 toc_page_no = p.page_no()
518 p.add_page() 841 p.add_page()
519 self._kpis() 842 self._kpis()
520− for s in self.d.get("series") or []: 843+ self._gauges()
521− if s.get("kind") == "bar": 844+ if (self.d.get("series") or self.d.get("multiseries") or self.d.get("stacked")):
522− 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")
523− else: 846+ self._all_series(with_stats=True)
524− 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")):
525− for b in self.d.get("breakdowns") or []: 848+ self._section_title("Répartitions, distributions & géographie")
526− if b.get("kind") == "donut": 849+ self._all_breakdowns()
527− self._donut(b)
528− else:
529− self._bars(b.get("title", ""), b.get("items"))
530− geo = self.d.get("geo")
531− if geo:
532− self._bars(geo.get("title", "Répartition géographique"), geo.get("items"))
533 for t in self.d.get("tables") or []: 850 for t in self.d.get("tables") or []:
534 self._table(t) 851 self._table(t)
535 self._records() 852 self._records()
536 self._final_page() 853 self._final_page()
537− # 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:
538 last_page = p.page 856 last_page = p.page
539 p.page = toc_page_no 857 p.page = toc_page_no
540 p.set_y(22) 858 p.set_y(22)
@@ -553,6 +871,7 @@ class GroupeKAReport:
553 return bytes(p.output()) 871 return bytes(p.output())
554 872
555 873
556−def filename(platform_id: str, period: str) -> str: 874+def filename(platform_id: str, period: str, mode: str = "complet") -> str:
557 today = datetime.now(ZoneInfo("America/Toronto")).strftime("%Y-%m-%d") 875 today = datetime.now(ZoneInfo("America/Toronto")).strftime("%Y-%m-%d")
558− 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/pages/Stats.tsx +43 −12
@@ -2,25 +2,34 @@
2 // Lou-Ka — Agrégateur de logements à louer (province de Québec) 2 // Lou-Ka — Agrégateur de logements à louer (province de Québec)
3 // Auteur : Simon-Pierre Boucher — contact@spboucher.ai 3 // Auteur : Simon-Pierre Boucher — contact@spboucher.ai
4 // pages/Stats.tsx : tableau de bord analytique — module Stats commun Groupe KA 4 // pages/Stats.tsx : tableau de bord analytique — module Stats commun Groupe KA
5−// (contrat ../ka/stats/SPEC.md, composants ../ka/stats/kacharts.tsx). 5+// v2 (contrat ../ka/stats/SPEC.md, composants ../ka/stats/kacharts.tsx).
6−// KPI + sélecteur de période + courbes (comparaison N-1) + répartitions + 6+// KPI + sparklines + jauges + sélecteur de période + courbes (compare N-1,
7−// géographie + calendrier de chaleur + tableaux + records + export PDF. 7+// stats de séries) + multi-courbes + barres empilées + répartitions +
8+// distributions + géographie + calendrier & heatmap horaire + tableaux +
9+// records + export PDF (5 rapports).
8 // ----------------------------------------------------------------------------- 10 // -----------------------------------------------------------------------------
9 import { useCallback, useEffect, useState } from "react"; 11 import { useCallback, useEffect, useState } from "react";
10 import { 12 import {
11− BarChart, BreakItem, CalendarHeatmap, DataTable, Donut, EmptyBlock, 13+ BarChart, BreakItem, CalendarHeatmap, DataTable, Distribution, Donut,
12− Fraicheur, Kpi, KpiCard, LineChart, PdfButton, PeriodSelector, RecordCard, 14+ EmptyBlock, Fraicheur, Gauge, GaugeCard, Histogram, HourCell, HourHeatmap,
13− RecordFact, Serie, TableSpec, 15+ Kpi, KpiCard, LineChart, MultiLineChart, MultiSerie, PdfButton,
16+ PeriodSelector, RecordCard, RecordFact, Serie, StackedBarChart,
17+ StackedSerie, StatSummary, TableSpec,
14 } from "../ka/stats/kacharts"; 18 } from "../ka/stats/kacharts";
15 19
16 interface Dashboard { 20 interface Dashboard {
17 updated: string; 21 updated: string;
18 period: { from: string | null; to: string | null; label: string }; 22 period: { from: string | null; to: string | null; label: string };
19 kpis: Kpi[]; 23 kpis: Kpi[];
24+ gauges?: Gauge[];
20 series: Serie[]; 25 series: Serie[];
26+ multiseries?: MultiSerie[];
27+ stacked?: StackedSerie[];
21 breakdowns: { id: string; title: string; kind?: string; items: BreakItem[] }[]; 28 breakdowns: { id: string; title: string; kind?: string; items: BreakItem[] }[];
29+ distributions?: Distribution[];
22 geo?: { title: string; items: BreakItem[] }; 30 geo?: { title: string; items: BreakItem[] };
23 heatmap?: { title: string; cells: { date: string; value: number }[] }; 31 heatmap?: { title: string; cells: { date: string; value: number }[] };
32+ hourly?: { title: string; cells: HourCell[] };
24 tables: TableSpec[]; 33 tables: TableSpec[];
25 records: RecordFact[]; 34 records: RecordFact[];
26 } 35 }
@@ -62,7 +71,7 @@ export default function StatsPage() {
62 71
63 return ( 72 return (
64 <div className="container" style={{ display: "grid", gap: 18, paddingBottom: 40 }}> 73 <div className="container" style={{ display: "grid", gap: 18, paddingBottom: 40 }}>
65− {/* --- en-tête : titre + PDF + fraîcheur ------------------------------ */} 74+ {/* --- en-tête : titre + PDF (5 rapports) + fraîcheur ------------------ */}
66 <header style={{ display: "flex", flexWrap: "wrap", gap: 14, alignItems: "flex-end", justifyContent: "space-between", marginTop: 8 }}> 75 <header style={{ display: "flex", flexWrap: "wrap", gap: 14, alignItems: "flex-end", justifyContent: "space-between", marginTop: 8 }}>
67 <div style={{ minWidth: 0 }}> 76 <div style={{ minWidth: 0 }}>
68 <p className="klabel" style={{ margin: 0 }}>Groupe KA · Lou·Ka</p> 77 <p className="klabel" style={{ margin: 0 }}>Groupe KA · Lou·Ka</p>
@@ -90,7 +99,7 @@ export default function StatsPage() {
90 </div> 99 </div>
91 )} 100 )}
92 101
93− {/* --- bandeau KPI ----------------------------------------------------- */} 102+ {/* --- bandeau KPI (sparklines) ---------------------------------------- */}
94 {dash && dash.kpis.length > 0 && ( 103 {dash && dash.kpis.length > 0 && (
95 <section aria-label="Indicateurs clés" style={{ display: "grid", gap: 12, gridTemplateColumns: "repeat(auto-fit, minmax(170px, 1fr))", opacity: loading ? 0.55 : 1, transition: "opacity .2s" }}> 104 <section aria-label="Indicateurs clés" style={{ display: "grid", gap: 12, gridTemplateColumns: "repeat(auto-fit, minmax(170px, 1fr))", opacity: loading ? 0.55 : 1, transition: "opacity .2s" }}>
96 {dash.kpis.map((k) => <KpiCard key={k.id} k={k} />)} 105 {dash.kpis.map((k) => <KpiCard key={k.id} k={k} />)}
@@ -114,14 +123,32 @@ export default function StatsPage() {
114 123
115 {dash && ( 124 {dash && (
116 <div style={{ display: "grid", gap: 18, opacity: loading ? 0.55 : 1, transition: "opacity .2s" }}> 125 <div style={{ display: "grid", gap: 18, opacity: loading ? 0.55 : 1, transition: "opacity .2s" }}>
117− {/* --- courbes ----------------------------------------------------- */} 126+ {/* --- jauges : couverture & complétude ----------------------------- */}
127+ {dash.gauges && dash.gauges.length > 0 && (
128+ <section aria-label="Jauges" style={{ display: "grid", gap: 12, gridTemplateColumns: "repeat(auto-fit, minmax(min(190px, 100%), 1fr))" }}>
129+ {dash.gauges.map((g) => <GaugeCard key={g.id} g={g} />)}
130+ </section>
131+ )}
132+
133+ {/* --- évolution : courbes / barres + stats de séries --------------- */}
118 {dash.series?.length ? ( 134 {dash.series?.length ? (
119− dash.series.map((s) => <LineChart key={s.id} serie={s} />) 135+ dash.series.map((s) => (
136+ <div key={s.id} style={{ display: "grid", gap: 0 }}>
137+ <LineChart serie={s} />
138+ {s.kind !== "bar" && <StatSummary serie={s} />}
139+ </div>
140+ ))
120 ) : ( 141 ) : (
121 <EmptyBlock title="Évolution quotidienne" /> 142 <EmptyBlock title="Évolution quotidienne" />
122 )} 143 )}
123 144
124− {/* --- répartitions (anneau + barres) ------------------------------ */} 145+ {/* --- multi-courbes (loyer médian par taille…) ---------------------- */}
146+ {dash.multiseries?.map((ms) => <MultiLineChart key={ms.id} ms={ms} />)}
147+
148+ {/* --- barres empilées (composition par source) ---------------------- */}
149+ {dash.stacked?.map((st) => <StackedBarChart key={st.id} st={st} />)}
150+
151+ {/* --- répartitions (anneaux + barres) ------------------------------ */}
125 {(donuts.length > 0 || barBreaks.length > 0) && ( 152 {(donuts.length > 0 || barBreaks.length > 0) && (
126 <div style={{ display: "grid", gap: 18, gridTemplateColumns: "repeat(auto-fit, minmax(min(340px, 100%), 1fr))" }}> 153 <div style={{ display: "grid", gap: 18, gridTemplateColumns: "repeat(auto-fit, minmax(min(340px, 100%), 1fr))" }}>
127 {donuts.map((b) => <Donut key={b.id} title={b.title} items={b.items} />)} 154 {donuts.map((b) => <Donut key={b.id} title={b.title} items={b.items} />)}
@@ -129,11 +156,15 @@ export default function StatsPage() {
129 </div> 156 </div>
130 )} 157 )}
131 158
159+ {/* --- distributions (histogrammes) ---------------------------------- */}
160+ {dash.distributions?.map((d) => <Histogram key={d.id} dist={d} />)}
161+
132 {/* --- géographie --------------------------------------------------- */} 162 {/* --- géographie --------------------------------------------------- */}
133 {dash.geo && <BarChart title={dash.geo.title} items={dash.geo.items} unit="annonces" />} 163 {dash.geo && <BarChart title={dash.geo.title} items={dash.geo.items} unit="annonces" />}
134 164
135− {/* --- calendrier de chaleur ---------------------------------------- */} 165+ {/* --- calendriers : 26 semaines + heatmap horaire 7×24 -------------- */}
136 {dash.heatmap && <CalendarHeatmap title={dash.heatmap.title} cells={dash.heatmap.cells} />} 166 {dash.heatmap && <CalendarHeatmap title={dash.heatmap.title} cells={dash.heatmap.cells} />}
167+ {dash.hourly && <HourHeatmap title={dash.hourly.title} cells={dash.hourly.cells} />}
137 168
138 {/* --- tableaux détaillés ------------------------------------------- */} 169 {/* --- tableaux détaillés ------------------------------------------- */}
139 {dash.tables?.map((t) => <DataTable key={t.id} spec={t} />)} 170 {dash.tables?.map((t) => <DataTable key={t.id} spec={t} />)}
modified louka/kapdf.py +389 −72
Large diff (680 lines) is not loaded by default to keep the page fast.Load diff
modified louka/statsdash.py +408 −50
Large diff (645 lines) is not loaded by default to keep the page fast.Load diff
modified louka/web.py +6 −5
Large diff (27 lines) is not loaded by default to keep the page fast.Load diff
Menu

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