SPB Git forge
spboucher.ai ↗

spb/fabri-ka

Public

Agrégateur de produits québécois — www.fabri-ka.com

217commits 1branches 0releases
66.1 MBsize
maindefault branch
5 h agolast push
Python 38.4% HTML 30.3% TypeScript 17.2% CSS 11% JavaScript 3.2%

Stats v2 : dashboard ultra complet (9 KPI+sparklines, 5 jauges, multi-courbes, empilees, distributions, heatmap horaire, 5 tableaux, 10 records) + 5 rapports PDF (kapdf v2) + page /stats v2

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Simon-Pierre Boucher committed 1 mo ago (Aug 19, 2026) parent c6f995a

6 changed files +1,336 −240

modified fabrika/kapdf.py +388 −69
@@ -1,10 +1,17 @@
1 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 3 # Consomme le JSON du contrat /api/stats/dashboard (voir SPEC.md) et produit
4 −# le rapport estampillé Groupe-KA : couverture, sommaire, KPI, graphiques
5 −# VECTORIELS (courbes/barres/anneaux), tableaux paginés, records, page de fin.
4 +# les rapports estampillés Groupe-KA. 5 modes :
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 13 # Usage :
7 −# from kapdf import GroupeKAReport
14 +# from kapdf import GroupeKAReport, REPORT_MODES, filename
8 15 # pdf_bytes = GroupeKAReport(site={"wordmark":"Lou·Ka","accent":"#ff6a00",
9 16 # "domain":"www.lou-ka.com","tagline":"…"}, dashboard=dash_json,
10 17 # mode="complet").build()
@@ -26,6 +33,14 @@ GREEN = (28, 92, 65)
26 33 DANGER = (179, 66, 58)
27 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 44 EMAILS = [
30 45 ("contact@groupe-ka.com", "Projets, partenariats & données"),
31 46 ("info@groupe-ka.com", "Médias & questions générales"),
@@ -52,7 +67,8 @@ def _fr(n) -> str:
52 67 _SUBST = {
53 68 "—": "-", "–": "-", "→": "->", "▲": "+", "▼": "-",
54 69 "…": "...", "’": "'", "‘": "'", "“": '"', "”": '"',
55 − "œ": "oe", "Œ": "OE", "−": "-", " ": " ", " ": " ",
70 + "œ": "oe", "Œ": "OE", "−": "-", " ": " ", " ": " ",
71 + "×": "x", "·": ".", "σ": "sigma", "Δ": "delta",
56 72 }
57 73
58 74
@@ -95,6 +111,8 @@ class _PDF(FPDF):
95 111 self.set_y(20)
96 112
97 113 def footer(self):
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)
98 116 if self.cover_mode or self.page_no() == 1:
99 117 return
100 118 self.set_y(-15)
@@ -112,7 +130,7 @@ class GroupeKAReport:
112 130 def __init__(self, site: dict, dashboard: dict, mode: str = "complet"):
113 131 self.site = site
114 132 self.d = dashboard
115 − self.mode = mode
133 + self.mode = mode if mode in REPORT_MODES else "complet"
116 134 self.accent = _hex(site.get("accent", "#d9f26b"))
117 135 period = dashboard.get("period", {}) or {}
118 136 self.period_label = period.get("label") or "toute la période"
@@ -127,6 +145,11 @@ class GroupeKAReport:
127 145 p.set_fill_color(*fill)
128 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 153 def _kicker(self, text):
131 154 p = self.pdf
132 155 p.set_font("helvetica", "B", 8)
@@ -150,6 +173,14 @@ class GroupeKAReport:
150 173 self.toc.append((title, self.pdf.page_no()))
151 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 184 # ---------- pages ----------
154 185 def _cover(self):
155 186 p = self.pdf
@@ -161,12 +192,10 @@ class GroupeKAReport:
161 192 p.set_draw_color(*INK)
162 193 p.set_line_width(1.0)
163 194 p.rect(10, 10, 190, 277)
164 − # kicker
165 195 p.set_font("helvetica", "B", 10)
166 196 p.set_text_color(*GREEN)
167 197 p.set_xy(24, 34)
168 198 p.cell(0, 6, "GROUPE KA · RAPPORT STATISTIQUE")
169 − # wordmark : partie gauche + boîte encre/accent
170 199 wm = self.site.get("wordmark", "")
171 200 left, boxed = (wm.split("·") + [None])[:2] if "·" in wm else (wm, None)
172 201 p.set_xy(24, 70)
@@ -184,7 +213,7 @@ class GroupeKAReport:
184 213 p.set_xy(24, 100)
185 214 p.set_font("helvetica", "", 13)
186 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 217 now = datetime.now(ZoneInfo("America/Toronto"))
189 218 per = self.d.get("period", {}) or {}
190 219 p.set_xy(24, 125)
@@ -193,7 +222,7 @@ class GroupeKAReport:
193 222 ("Période couverte", self.period_label + (f" ({per.get('from')} → {per.get('to')})" if per.get("from") else "")),
194 223 ("Généré le", now.strftime("%Y-%m-%d à %H:%M") + " (heure de l'Est)"),
195 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 227 y = 128
199 228 for k, v in rows:
@@ -205,7 +234,6 @@ class GroupeKAReport:
205 234 p.cell(0, 6, str(v))
206 235 p.set_font("helvetica", "", 10.5)
207 236 y += 8
208 − # bande encre au pied
209 237 p.set_fill_color(*INK)
210 238 p.rect(10, 262, 190, 25, style="F")
211 239 p.set_xy(24, 270)
@@ -230,7 +258,7 @@ class GroupeKAReport:
230 258 p = self.pdf
231 259 cols, gw, gh, gap = 3, 56, 26, 3
232 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 262 x = x0 + (i % cols) * (gw + gap)
235 263 if i and i % cols == 0:
236 264 y += gh + gap
@@ -252,20 +280,81 @@ class GroupeKAReport:
252 280 p.set_font("helvetica", "B", 8)
253 281 p.set_text_color(*(GREEN if up else DANGER))
254 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 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 348 p = self.pdf
260 349 pts = s.get("points") or []
261 350 if len(pts) < 2:
262 351 return
352 + if s.get("kind") == "bar":
353 + self._vbars(s)
354 + return
263 355 if p.get_y() > 200:
264 356 p.add_page()
265 − p.set_font("helvetica", "B", 10)
266 − p.set_text_color(*INK)
267 − p.cell(0, 6, s.get("title", ""))
268 − p.ln(7)
357 + self._chart_title(s.get("title", ""))
269 358 x0, y0, w, h = p.l_margin, p.get_y(), 174, 52
270 359 self._card(x0, y0, w, h, fill=WHITE)
271 360 cx, cy, cw, ch = x0 + 12, y0 + 6, w - 20, h - 16
@@ -273,7 +362,6 @@ class GroupeKAReport:
273 362 vmax = max(vals) or 1
274 363 vmin = min(0, min(vals))
275 364 rng = (vmax - vmin) or 1
276 − # grille + graduations
277 365 p.set_font("helvetica", "", 6.3)
278 366 p.set_text_color(*INK3)
279 367 p.set_draw_color(200, 200, 195)
@@ -284,6 +372,20 @@ class GroupeKAReport:
284 372 p.set_xy(x0 + 1, gy - 1.6)
285 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 389 def draw(series, color, width, dash=None):
288 390 n = len(series)
289 391 p.set_draw_color(*color)
@@ -292,8 +394,7 @@ class GroupeKAReport:
292 394 p.set_dash_pattern(dash=1.2, gap=1.2)
293 395 last = None
294 396 for i, pt in enumerate(series):
295 − px = cx + cw * (i / (n - 1))
296 − py = cy + ch - ch * ((pt["v"] - vmin) / rng)
397 + px, py = xy(i, n, pt["v"])
297 398 if last:
298 399 p.line(last[0], last[1], px, py)
299 400 last = (px, py)
@@ -302,7 +403,6 @@ class GroupeKAReport:
302 403 if s.get("compare"):
303 404 draw(s["compare"], INK3, 0.35, dash=True)
304 405 draw(pts, self.accent, 0.7)
305 − # libellés d'axe X (premier / milieu / dernier)
306 406 p.set_text_color(*INK3)
307 407 for frac, idx in ((0, 0), (0.5, len(pts) // 2), (1, -1)):
308 408 p.set_xy(cx + cw * frac - 9, cy + ch + 1.5)
@@ -312,9 +412,166 @@ class GroupeKAReport:
312 412 p.set_font("helvetica", "", 6.8)
313 413 p.set_text_color(*INK3)
314 414 p.cell(0, 4, "— période courante (accent) · ---- période comparée")
315 − p.ln(6)
316 − else:
317 − p.ln(2)
415 + p.ln(5.5)
416 + if with_stats:
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 576 def _bars(self, title, items, unit=""):
320 577 p = self.pdf
@@ -324,10 +581,8 @@ class GroupeKAReport:
324 581 need = 10 + len(items) * 7
325 582 if p.get_y() + need > 265:
326 583 p.add_page()
327 − p.set_font("helvetica", "B", 10)
328 − p.set_text_color(*INK)
329 − p.cell(0, 6, title)
330 − p.ln(8)
584 + self._chart_title(title)
585 + p.ln(1)
331 586 vmax = max(it["value"] for it in items) or 1
332 587 for it in items:
333 588 y = p.get_y()
@@ -335,19 +590,23 @@ class GroupeKAReport:
335 590 p.set_text_color(*INK)
336 591 p.set_x(p.l_margin)
337 592 p.cell(46, 5, str(it["label"])[:34])
338 − bw = 96 * (it["value"] / vmax)
593 + bw = 86 * (it["value"] / vmax)
339 594 p.set_fill_color(*self.accent)
340 595 p.set_draw_color(*INK)
341 596 p.set_line_width(0.25)
342 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 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 606 p.ln(6.4)
347 607 p.ln(3)
348 608
349 609 def _donut(self, b):
350 − # anneau vectoriel simple (arcs) + légende
351 610 p = self.pdf
352 611 items = [it for it in (b.get("items") or []) if it.get("value")][:8]
353 612 total = sum(it["value"] for it in items)
@@ -355,17 +614,13 @@ class GroupeKAReport:
355 614 return
356 615 if p.get_y() > 210:
357 616 p.add_page()
358 − p.set_font("helvetica", "B", 10)
359 − p.set_text_color(*INK)
360 − p.cell(0, 6, b.get("title", ""))
361 − p.ln(8)
617 + self._chart_title(b.get("title", ""))
618 + p.ln(1)
362 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 620 start = -90.0
365 621 for i, it in enumerate(items):
366 622 frac = it["value"] / total
367 − f = shades[i % len(shades)]
368 − col = tuple(int(PAPER[j] + (self.accent[j] - PAPER[j]) * f) for j in range(3))
623 + col = self._shade(i)
369 624 steps = max(2, int(72 * frac))
370 625 p.set_fill_color(*col)
371 626 p.set_draw_color(*col)
@@ -384,11 +639,9 @@ class GroupeKAReport:
384 639 p.set_line_width(0.4)
385 640 p.ellipse(cx - 11, cy - 11, 22, 22, style="DF")
386 641 p.ellipse(cx - r, cy - r, 2 * r, 2 * r, style="D")
387 − # légende
388 642 ly = cy - 22
389 643 for i, it in enumerate(items):
390 − f = shades[i % len(shades)]
391 − col = tuple(int(PAPER[j] + (self.accent[j] - PAPER[j]) * f) for j in range(3))
644 + col = self._shade(i)
392 645 p.set_fill_color(*col)
393 646 p.set_draw_color(*INK)
394 647 p.rect(p.l_margin + 60, ly + 0.8, 4, 4, style="DF")
@@ -400,7 +653,39 @@ class GroupeKAReport:
400 653 ly += 5.6
401 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 689 p = self.pdf
405 690 cols = t.get("columns") or []
406 691 rows = t.get("rows") or []
@@ -417,7 +702,7 @@ class GroupeKAReport:
417 702 p.ln(6)
418 703 head()
419 704 p.set_text_color(*INK)
420 − for i, row in enumerate(rows[:200]):
705 + for i, row in enumerate(rows[:max_rows]):
421 706 if p.get_y() > 262:
422 707 p.add_page()
423 708 head()
@@ -428,10 +713,10 @@ class GroupeKAReport:
428 713 txt = _fr(cell) if isinstance(cell, (int, float)) else str(cell)
429 714 p.cell(w, 5.4, " " + txt[:34], fill=True)
430 715 p.ln(5.4)
431 − if len(rows) > 200:
716 + if len(rows) > max_rows:
432 717 p.set_font("helvetica", "", 7)
433 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 720 p.ln(6)
436 721
437 722 def _records(self):
@@ -440,7 +725,7 @@ class GroupeKAReport:
440 725 return
441 726 self._section_title("Records & faits marquants")
442 727 p = self.pdf
443 − for r in recs[:10]:
728 + for r in recs[:14]:
444 729 if p.get_y() > 258:
445 730 p.add_page()
446 731 y = p.get_y()
@@ -498,43 +783,76 @@ class GroupeKAReport:
498 783 "groupe-ka.com/conditions · /confidentialite · /loi-25.",
499 784 )
500 785
501 − def _toc_page(self):
502 − # insérée après coup ? fpdf ne réordonne pas : on écrit le sommaire en
503 − # page 2 en réservant la page lors du build (voir build()).
504 − pass
786 + # ---------- groupes de sections ----------
787 + def _all_series(self, with_stats=True):
788 + for s in self.d.get("series") or []:
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 808 def build(self) -> bytes:
507 809 p = self.pdf
508 810 p.alias_nb_pages()
509 811 self._cover()
812 + with_toc = self.mode in ("complet", "donnees")
813 + toc_page_no = None
510 814 if self.mode == "synthese":
511 815 p.add_page()
512 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 825 self._records()
514 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 839 p.add_page()
517 840 toc_page_no = p.page_no()
518 841 p.add_page()
519 842 self._kpis()
520 − for s in self.d.get("series") or []:
521 − if s.get("kind") == "bar":
522 − self._bars(s.get("title", ""), [{"label": pt.get("t"), "value": pt.get("v")} for pt in (s.get("points") or [])], s.get("unit", ""))
523 − else:
524 − self._line_chart(s)
525 − for b in self.d.get("breakdowns") or []:
526 − if b.get("kind") == "donut":
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"))
843 + self._gauges()
844 + if (self.d.get("series") or self.d.get("multiseries") or self.d.get("stacked")):
845 + self._section_title("Évolution & tendances")
846 + self._all_series(with_stats=True)
847 + if (self.d.get("breakdowns") or self.d.get("distributions") or self.d.get("geo") or self.d.get("hourly")):
848 + self._section_title("Répartitions, distributions & géographie")
849 + self._all_breakdowns()
533 850 for t in self.d.get("tables") or []:
534 851 self._table(t)
535 852 self._records()
536 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 856 last_page = p.page
539 857 p.page = toc_page_no
540 858 p.set_y(22)
@@ -553,6 +871,7 @@ class GroupeKAReport:
553 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 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 fabrika/statsdash.py +347 −54
@@ -1,16 +1,20 @@
1 1 # -----------------------------------------------------------------------------
2 2 # Fabri-Ka — Agrégateur de produits québécois
3 3 # Auteur : Simon-Pierre Boucher — contact@spboucher.ai
4 −# statsdash.py : tableau de bord /api/stats/dashboard (contrat ka-stats SPEC.md)
4 +# statsdash.py : tableau de bord /api/stats/dashboard (contrat ka-stats SPEC v2)
5 5 # -----------------------------------------------------------------------------
6 −"""Toutes les valeurs viennent de la base réelle (products / stores) :
6 +"""Toutes les valeurs viennent de la base réelle (products / stores / sync_log) :
7 7 - volumes et nouveautés par jour via `first_seen` (epoch) ;
8 8 - prix moyen/médian sur les produits actifs avec prix (> 0, plafond 500 000 $
9 9 pour la moyenne, même garde-fou que /api/stats/extended) ;
10 10 - deltas des KPI de stock = état à la fin vs état au DÉBUT de la période
11 11 (reconstruit avec first_seen) ; delta des nouveautés = fenêtre précédente
12 − de même longueur. Aucun chiffre inventé : indisponible => None (le front
13 − masque). Cache mémoire 5 min par période."""
12 + de même longueur ; deltas des répartitions = même reconstruction.
13 +- jauges = couvertures mesurées (prix, image, dispo, géoloc, boutiques) ;
14 +- activité horaire = heures réelles de détection (first_seen) ;
15 +- sources & fraîcheur = journal sync_log.
16 +Aucun chiffre inventé : indisponible => champ omis / None (le front masque).
17 +Cache mémoire 5 min par période."""
14 18 from __future__ import annotations
15 19
16 20 import sqlite3
@@ -32,12 +36,22 @@ PLATFORM_LABELS = {
32 36 "wordpress": "WordPress", "generic": "Site générique", "": "Inconnue",
33 37 }
34 38
39 +ORIGIN_LABELS = {
40 + "A": "A — Fabriqué au Québec", "B": "B — Conçu au Québec",
41 + "C": "C — Détaillant québécois", "D": "D — Mixte", "E": "E — À vérifier",
42 +}
43 +
35 44 BUCKETS = [
36 45 ("0-10", "Moins de 10 $"), ("10-25", "10 – 25 $"), ("25-50", "25 – 50 $"),
37 46 ("50-100", "50 – 100 $"), ("100-250", "100 – 250 $"),
38 47 ("250-1000", "250 – 1 000 $"), ("1000+", "1 000 $ et plus"),
39 48 ]
40 49
50 +SIZE_BUCKETS = [
51 + ("1-10", "1 – 10"), ("11-50", "11 – 50"), ("51-200", "51 – 200"),
52 + ("201-500", "201 – 500"), ("501-1000", "501 – 1 000"), ("1000+", "> 1 000"),
53 +]
54 +
41 55
42 56 def _cat_label(key: str | None) -> str:
43 57 return CATEGORIES.get(key or "", (key or "Autre", []))[0]
@@ -49,6 +63,10 @@ def _price(v) -> str:
49 63 return f"{v:,.2f}".replace(",", " ").replace(".", ",") + " $"
50 64
51 65
66 +def _int(v) -> str:
67 + return f"{int(v):,}".replace(",", " ")
68 +
69 +
52 70 def _delta(cur, prev) -> float | None:
53 71 """% de variation, None si la base de comparaison est vide (rien d'inventé)."""
54 72 if prev is None or cur is None or prev <= 0:
@@ -60,6 +78,16 @@ def _ts(d: date) -> float:
60 78 return datetime(d.year, d.month, d.day, tzinfo=TZ).timestamp()
61 79
62 80
81 +def _spark(points: list[dict], n: int = 50) -> list[dict] | None:
82 + """Sous-échantillonne une série pour la sparkline d'un KPI (≥ 2 points)."""
83 + if len(points) < 2:
84 + return None
85 + if len(points) <= n:
86 + return points
87 + step = (len(points) - 1) / (n - 1)
88 + return [points[round(i * step)] for i in range(n)]
89 +
90 +
63 91 def _bounds(con: sqlite3.Connection, period: str, from_: str | None,
64 92 to: str | None) -> tuple[date, date, str]:
65 93 today = datetime.now(TZ).date()
@@ -113,6 +141,8 @@ def _build(period: str, from_: str | None, to: str | None) -> dict:
113 141 p_start, p_end = start - timedelta(days=ndays), start - timedelta(days=1)
114 142 pt0, pt1 = _ts(p_start), _ts(p_end + timedelta(days=1))
115 143 one = lambda sql, a=(): con.execute(sql, a).fetchone()[0] # noqa: E731
144 + days = [start + timedelta(days=i) for i in range(min(ndays, 400))]
145 + iso_days = [d.isoformat() for d in days]
116 146
117 147 # ----- KPI : état courant vs état au début de la période -------------
118 148 total = one("SELECT COUNT(*) FROM products WHERE active=1")
@@ -120,6 +150,7 @@ def _build(period: str, from_: str | None, to: str | None) -> dict:
120 150 stores_live = one("SELECT COUNT(*) FROM stores WHERE product_count>0")
121 151 stores_t0 = one("""SELECT COUNT(DISTINCT store_id) FROM products
122 152 WHERE active=1 AND first_seen<?""", (t0,))
153 + stores_reg = one("SELECT COUNT(*) FROM stores")
123 154 new_cur = one("SELECT COUNT(*) FROM products WHERE first_seen>=? AND first_seen<?", (t0, t1))
124 155 new_prev = one("SELECT COUNT(*) FROM products WHERE first_seen>=? AND first_seen<?", (pt0, pt1))
125 156 avg_now = one("""SELECT ROUND(AVG(price),2) FROM products
@@ -128,6 +159,7 @@ def _build(period: str, from_: str | None, to: str | None) -> dict:
128 159 WHERE active=1 AND price>0 AND price<=? AND first_seen<?""",
129 160 (PRICE_CAP, t0))
130 161 med_now = _median(con)
162 + med_t0 = _median(con, " AND first_seen<?", (t0,))
131 163 cats = one("SELECT COUNT(DISTINCT category) FROM products WHERE active=1 AND category<>''")
132 164 cats_t0 = one("""SELECT COUNT(DISTINCT category) FROM products
133 165 WHERE active=1 AND category<>'' AND first_seen<?""", (t0,))
@@ -136,46 +168,176 @@ def _build(period: str, from_: str | None, to: str | None) -> dict:
136 168 regions_t0 = one("""SELECT COUNT(DISTINCT s.region) FROM stores s
137 169 JOIN products p ON p.store_id=s.id
138 170 WHERE s.region<>'' AND p.active=1 AND p.first_seen<?""", (t0,))
171 + img_where = " AND images IS NOT NULL AND images<>'' AND images<>'[]'"
172 + with_img = one(f"SELECT COUNT(*) FROM products WHERE active=1{img_where}")
173 + with_img_t0 = one(f"""SELECT COUNT(*) FROM products
174 + WHERE active=1 AND first_seen<?{img_where}""", (t0,))
139 175
140 − def kpi(id_, lab, value, prev=None, unit="", raw_delta=None):
141 − d = raw_delta if raw_delta is not None else _delta(value, prev)
142 − return {"id": id_, "label": lab, "value": value, "unit": unit,
143 − "delta_pct": d,
144 − "direction": None if d is None else ("up" if d >= 0 else "down")}
145 −
146 − kpis = [
147 − kpi("produits", "Produits actifs au catalogue", total, total_t0),
148 − kpi("boutiques", "Boutiques en ligne avec produits", stores_live, stores_t0),
149 − kpi("nouveautes", f"Nouveaux produits ({label})", new_cur, new_prev),
150 − kpi("prix_moyen", "Prix moyen (produits actifs)", avg_now, avg_t0, unit="$"),
151 − kpi("prix_median", "Prix médian (produits actifs)", med_now, unit="$"),
152 − kpi("categories", "Catégories couvertes", cats, cats_t0),
153 − kpi("regions", "Régions avec boutiques actives", regions, regions_t0),
154 − ]
155 −
156 − # ----- séries quotidiennes -------------------------------------------
176 + # ----- séries quotidiennes (aussi utilisées comme sparklines) --------
157 177 cur_daily = _daily(con, t0, t1)
158 178 prev_daily = _daily(con, pt0, pt1)
159 − days = [start + timedelta(days=i) for i in range(min(ndays, 400))]
160 − new_points = [{"t": d.isoformat(), "v": cur_daily.get(d.isoformat(), 0)}
161 − for d in days]
179 + new_points = [{"t": d, "v": cur_daily.get(d, 0)} for d in iso_days]
162 180 compare = None
163 181 if sum(prev_daily.values()):
164 − pdays = [p_start + timedelta(days=i) for i in range(min(ndays, 400))]
165 − compare = [{"t": d.isoformat(), "v": prev_daily.get(d.isoformat(), 0)}
166 − for d in pdays]
182 + pdays = [(p_start + timedelta(days=i)).isoformat()
183 + for i in range(min(ndays, 400))]
184 + compare = [{"t": d, "v": prev_daily.get(d, 0)} for d in pdays]
167 185 base = one("SELECT COUNT(*) FROM products WHERE first_seen<?", (t0,))
168 186 cum_points, acc = [], base
169 187 for pt in new_points:
170 188 acc += pt["v"]
171 189 cum_points.append({"t": pt["t"], "v": acc})
190 +
191 + # prix moyen cumulatif du catalogue détecté (reconstruit via first_seen)
192 + pr = con.execute("""SELECT date(first_seen,'unixepoch','localtime') AS d,
193 + SUM(price), COUNT(*) FROM products
194 + WHERE price>0 AND price<=? GROUP BY d""",
195 + (PRICE_CAP,)).fetchall()
196 + psum = pcnt = 0.0
197 + by_day = {}
198 + for d, s, n in pr:
199 + by_day[d] = (s, n)
200 + start_iso = start.isoformat()
201 + for d, (s, n) in by_day.items():
202 + if d < start_iso:
203 + psum += s
204 + pcnt += n
205 + avg_points = []
206 + for d in iso_days:
207 + s, n = by_day.get(d, (0.0, 0))
208 + psum += s
209 + pcnt += n
210 + if pcnt:
211 + avg_points.append({"t": d, "v": round(psum / pcnt, 2)})
212 +
213 + # boutiques cumulées (première détection d'un produit par boutique)
214 + st_first = con.execute("""SELECT date(first_seen,'unixepoch','localtime') AS d,
215 + COUNT(*) FROM (
216 + SELECT store_id, MIN(first_seen) AS first_seen
217 + FROM products GROUP BY store_id) GROUP BY d""").fetchall()
218 + st_by_day = {r[0]: r[1] for r in st_first}
219 + st_acc = sum(v for d, v in st_by_day.items() if d < start_iso)
220 + st_points = []
221 + for d in iso_days:
222 + st_acc += st_by_day.get(d, 0)
223 + st_points.append({"t": d, "v": st_acc})
224 +
225 + def kpi(id_, lab, value, prev=None, unit="", spark=None):
226 + d = _delta(value, prev)
227 + out = {"id": id_, "label": lab, "value": value, "unit": unit,
228 + "delta_pct": d,
229 + "direction": None if d is None else ("up" if d >= 0 else "down")}
230 + sp = _spark(spark or [])
231 + if sp:
232 + out["spark"] = sp
233 + return out
234 +
235 + kpis = [
236 + kpi("produits", "Produits actifs au catalogue", total, total_t0,
237 + spark=cum_points),
238 + kpi("boutiques", "Boutiques en ligne avec produits", stores_live,
239 + stores_t0, spark=st_points),
240 + kpi("nouveautes", f"Nouveaux produits ({label})", new_cur, new_prev,
241 + spark=new_points),
242 + kpi("prix_moyen", "Prix moyen (produits actifs)", avg_now, avg_t0,
243 + unit="$", spark=avg_points),
244 + kpi("prix_median", "Prix médian (produits actifs)", med_now, med_t0,
245 + unit="$"),
246 + kpi("avec_image", "Produits actifs avec image", with_img, with_img_t0),
247 + kpi("categories", "Catégories couvertes", cats, cats_t0),
248 + kpi("regions", "Régions avec boutiques actives", regions, regions_t0),
249 + kpi("registre", "Boutiques au registre", stores_reg),
250 + ]
251 +
252 + # ----- jauges : couvertures mesurées ----------------------------------
253 + with_price = one("SELECT COUNT(*) FROM products WHERE active=1 AND price>0")
254 + avail = one("SELECT COUNT(*) FROM products WHERE active=1 AND available=1")
255 + live_geo = one("""SELECT COUNT(*) FROM stores
256 + WHERE product_count>0 AND region<>'' AND region IS NOT NULL""")
257 + pct = lambda a, b: round(100.0 * a / b, 1) if b else None # noqa: E731
258 + gauges = []
259 + for gid, glabel, val, help_ in [
260 + ("prix", "Produits avec prix affiché", pct(with_price, total),
261 + "part des produits actifs dont le prix est connu"),
262 + ("image", "Produits avec image", pct(with_img, total),
263 + "part des produits actifs avec au moins une image"),
264 + ("dispo", "Produits en stock", pct(avail, total),
265 + "part des produits actifs marqués disponibles à la source"),
266 + ("boutiques_actives", "Boutiques du registre avec produits",
267 + pct(stores_live, stores_reg),
268 + "boutiques dont le catalogue public est agrégé"),
269 + ("geoloc", "Boutiques actives géolocalisées", pct(live_geo, stores_live),
270 + "boutiques actives avec région administrative connue"),
271 + ]:
272 + if val is not None:
273 + gauges.append({"id": gid, "label": glabel, "value": val,
274 + "max": 100, "unit": "%", "help": help_})
275 +
276 + # ----- séries ----------------------------------------------------------
172 277 series = [
173 278 {"id": "nouveautes_jour", "title": "Nouveaux produits détectés par jour",
174 − "unit": "produits", "kind": "line", "points": new_points,
175 − **({"compare": compare} if compare else {})},
279 + "unit": "produits", "kind": "line" if compare else "bar",
280 + "points": new_points, **({"compare": compare} if compare else {})},
176 281 {"id": "cumul", "title": "Produits détectés — cumul du catalogue",
177 − "unit": "produits", "kind": "line", "points": cum_points},
282 + "unit": "produits", "kind": "area", "points": cum_points},
178 283 ]
284 + if len(avg_points) > 1:
285 + series.append(
286 + {"id": "prix_moyen", "title": "Prix moyen du catalogue détecté (cumul)",
287 + "unit": "$", "kind": "line", "points": avg_points})
288 +
289 + # ----- multi-courbes : nouveautés des 4 premières catégories ----------
290 + top4 = [r[0] for r in con.execute(
291 + """SELECT category FROM products WHERE first_seen>=? AND first_seen<?
292 + AND category<>'' GROUP BY category ORDER BY COUNT(*) DESC LIMIT 4""",
293 + (t0, t1)).fetchall()]
294 + multiseries = []
295 + if top4 and ndays > 1:
296 + qmarks = ",".join("?" * len(top4))
297 + rows = con.execute(
298 + f"""SELECT category, date(first_seen,'unixepoch','localtime') AS d,
299 + COUNT(*) FROM products
300 + WHERE first_seen>=? AND first_seen<? AND category IN ({qmarks})
301 + GROUP BY category, d""", (t0, t1, *top4)).fetchall()
302 + grid: dict[str, dict[str, int]] = {c: {} for c in top4}
303 + for c, d, n in rows:
304 + grid[c][d] = n
305 + multiseries.append({
306 + "id": "cats_nouveautes",
307 + "title": "Nouveaux produits par jour — top catégories",
308 + "unit": "produits",
309 + "series": [{"label": _cat_label(c),
310 + "points": [{"t": d, "v": grid[c].get(d, 0)}
311 + for d in iso_days]} for c in top4]})
312 +
313 + # ----- barres empilées : ajouts par plateforme e-commerce -------------
314 + plat_rows = con.execute(
315 + """SELECT COALESCE(s.platform,''), date(p.first_seen,'unixepoch','localtime') AS d,
316 + COUNT(*) FROM products p JOIN stores s ON s.id=p.store_id
317 + WHERE p.first_seen>=? AND p.first_seen<? GROUP BY 1, d""",
318 + (t0, t1)).fetchall()
319 + stacked = []
320 + if plat_rows and ndays > 1:
321 + tot_by_plat: dict[str, int] = {}
322 + for pl, d, n in plat_rows:
323 + tot_by_plat[pl] = tot_by_plat.get(pl, 0) + n
324 + top_pl = sorted(tot_by_plat, key=tot_by_plat.get, reverse=True)[:5]
325 + others = [pl for pl in tot_by_plat if pl not in top_pl]
326 + keys = [PLATFORM_LABELS.get(pl, pl or "Inconnue") for pl in top_pl]
327 + if others:
328 + keys.append("Autres")
329 + pgrid: dict[str, dict[str, int]] = {}
330 + for pl, d, n in plat_rows:
331 + k = (PLATFORM_LABELS.get(pl, pl or "Inconnue")
332 + if pl in top_pl else "Autres")
333 + pgrid.setdefault(d, {})
334 + pgrid[d][k] = pgrid[d].get(k, 0) + n
335 + stacked.append({
336 + "id": "ajouts_plateforme",
337 + "title": "Nouveaux produits par jour, par plateforme e-commerce",
338 + "unit": "produits", "keys": keys,
339 + "points": [{"t": d, "values": [pgrid.get(d, {}).get(k, 0)
340 + for k in keys]} for d in iso_days]})
179 341
180 342 # ----- répartitions ---------------------------------------------------
181 343 plat = con.execute("""SELECT platform, COUNT(*) FROM stores
@@ -184,32 +346,74 @@ def _build(period: str, from_: str | None, to: str | None) -> dict:
184 346 top_cats = con.execute("""SELECT category, COUNT(*) FROM products
185 347 WHERE active=1 GROUP BY category
186 348 ORDER BY 2 DESC LIMIT 12""").fetchall()
349 + cats_t0_rows = dict(con.execute(
350 + """SELECT category, COUNT(*) FROM products
351 + WHERE active=1 AND first_seen<? GROUP BY category""", (t0,)).fetchall())
352 + # donut catégories : top 7 + « Autres »
353 + donut_cats = [{"label": _cat_label(c), "value": n} for c, n in top_cats[:7]]
354 + rest = total - sum(n for _, n in top_cats[:7])
355 + if rest > 0:
356 + donut_cats.append({"label": "Autres", "value": rest})
357 + origin_rows = con.execute(
358 + """SELECT COALESCE(s.origin_class,''), COUNT(p.uid) FROM stores s
359 + JOIN products p ON p.store_id=s.id AND p.active=1
360 + GROUP BY 1 ORDER BY 2 DESC""").fetchall()
361 + region_now = con.execute(
362 + """SELECT s.region, COUNT(p.uid) FROM stores s
363 + JOIN products p ON p.store_id=s.id AND p.active=1
364 + WHERE s.region<>'' GROUP BY s.region ORDER BY 2 DESC""").fetchall()
365 + region_t0 = dict(con.execute(
366 + """SELECT s.region, COUNT(p.uid) FROM stores s
367 + JOIN products p ON p.store_id=s.id AND p.active=1
368 + AND p.first_seen<?
369 + WHERE s.region<>'' GROUP BY s.region""", (t0,)).fetchall())
370 + breakdowns = [
371 + {"id": "categories", "title": "Produits actifs par catégorie",
372 + "kind": "donut", "items": donut_cats},
373 + {"id": "plateformes", "title": "Boutiques par plateforme e-commerce",
374 + "kind": "donut",
375 + "items": [{"label": PLATFORM_LABELS.get(p or "", p or "Inconnue"),
376 + "value": n} for p, n in plat]},
377 + {"id": "regions_delta", "title": "Produits actifs par région (Δ période)",
378 + "kind": "bars",
379 + "items": [{"label": r, "value": n,
380 + "delta_pct": _delta(n, region_t0.get(r))}
381 + for r, n in region_now[:14]]},
382 + {"id": "origine", "title": "Produits par classe d'origine (A–E)",
383 + "kind": "bars",
384 + "items": [{"label": ORIGIN_LABELS.get(o, o or "Non classée"),
385 + "value": n} for o, n in origin_rows]},
386 + ]
387 +
388 + # ----- distributions --------------------------------------------------
187 389 buckets = dict(con.execute("""SELECT CASE
188 390 WHEN price < 10 THEN '0-10' WHEN price < 25 THEN '10-25'
189 391 WHEN price < 50 THEN '25-50' WHEN price < 100 THEN '50-100'
190 392 WHEN price < 250 THEN '100-250' WHEN price < 1000 THEN '250-1000'
191 393 ELSE '1000+' END AS b, COUNT(*) FROM products
192 394 WHERE active=1 AND price>0 GROUP BY b""").fetchall())
193 − breakdowns = [
194 − {"id": "plateformes", "title": "Boutiques par plateforme e-commerce",
195 − "kind": "donut",
196 − "items": [{"label": PLATFORM_LABELS.get(p or "", p or "Inconnue"),
197 − "value": n} for p, n in plat]},
198 − {"id": "categories", "title": "Top catégories (produits actifs)",
199 − "kind": "bar",
200 − "items": [{"label": _cat_label(c), "value": n} for c, n in top_cats]},
201 − {"id": "prix", "title": "Fourchettes de prix (produits actifs)",
202 − "kind": "bar",
203 − "items": [{"label": lab, "value": buckets[k]}
204 − for k, lab in BUCKETS if buckets.get(k)]},
395 + sizes = dict(con.execute("""SELECT CASE
396 + WHEN product_count <= 10 THEN '1-10'
397 + WHEN product_count <= 50 THEN '11-50'
398 + WHEN product_count <= 200 THEN '51-200'
399 + WHEN product_count <= 500 THEN '201-500'
400 + WHEN product_count <= 1000 THEN '501-1000'
401 + ELSE '1000+' END AS b, COUNT(*) FROM stores
402 + WHERE product_count>0 GROUP BY b""").fetchall())
403 + distributions = [
404 + {"id": "prix", "title": "Distribution des prix (produits actifs)",
405 + "unit": "produits",
406 + "bins": [{"label": lab, "value": buckets[k]}
407 + for k, lab in BUCKETS if buckets.get(k)]},
408 + {"id": "taille_boutiques",
409 + "title": "Boutiques par taille de catalogue (nb de produits)",
410 + "unit": "boutiques",
411 + "bins": [{"label": lab, "value": sizes[k]}
412 + for k, lab in SIZE_BUCKETS if sizes.get(k)]},
205 413 ]
206 414
207 − geo_rows = con.execute("""SELECT s.region, COUNT(p.uid) FROM stores s
208 − JOIN products p ON p.store_id=s.id AND p.active=1
209 − WHERE s.region<>'' GROUP BY s.region
210 − ORDER BY 2 DESC""").fetchall()
211 415 geo = {"title": "Produits actifs par région",
212 − "items": [{"label": r, "value": n} for r, n in geo_rows]}
416 + "items": [{"label": r, "value": n} for r, n in region_now]}
213 417
214 418 # ----- heatmap : nouveautés/jour sur 26 semaines ----------------------
215 419 h_start = datetime.now(TZ).date() - timedelta(days=181)
@@ -217,6 +421,19 @@ def _build(period: str, from_: str | None, to: str | None) -> dict:
217 421 heatmap = {"title": "Nouveaux produits par jour",
218 422 "cells": [{"date": d, "value": v} for d, v in sorted(hm.items())]}
219 423
424 + # ----- heatmap horaire 7×24 : heures réelles de détection -------------
425 + hr = con.execute(
426 + """SELECT strftime('%w', first_seen,'unixepoch','localtime') AS w,
427 + strftime('%H', first_seen,'unixepoch','localtime') AS h,
428 + COUNT(*) FROM products
429 + WHERE first_seen>=? AND first_seen<? GROUP BY w, h""",
430 + (t0, t1)).fetchall()
431 + hourly = None
432 + if hr:
433 + hourly = {"title": "Produits détectés par heure (période)",
434 + "cells": [{"dow": (int(w) + 6) % 7, "hour": int(h), "value": n}
435 + for w, h, n in hr]}
436 +
220 437 # ----- tableaux --------------------------------------------------------
221 438 shop_rows = con.execute("""
222 439 SELECT s.name, s.region, s.product_count,
@@ -232,6 +449,24 @@ def _build(period: str, from_: str | None, to: str | None) -> dict:
232 449 ROUND(AVG(CASE WHEN price>0 AND price<=? THEN price END),2)
233 450 FROM products WHERE active=1 GROUP BY category
234 451 ORDER BY n DESC""", (PRICE_CAP,)).fetchall()
452 + region_tbl = con.execute("""
453 + SELECT s.region, COUNT(DISTINCT s.id) AS st, COUNT(p.uid) AS n,
454 + ROUND(AVG(CASE WHEN p.price>0 AND p.price<=? THEN p.price END),2),
455 + SUM(CASE WHEN p.first_seen>=? AND p.first_seen<? THEN 1 ELSE 0 END)
456 + FROM stores s JOIN products p ON p.store_id=s.id AND p.active=1
457 + WHERE s.region<>'' GROUP BY s.region ORDER BY n DESC""",
458 + (PRICE_CAP, t0, t1)).fetchall()
459 + nouv_rows = con.execute("""
460 + SELECT p.title, s.name, p.category, p.price,
461 + date(p.first_seen,'unixepoch','localtime')
462 + FROM products p JOIN stores s ON s.id=p.store_id
463 + WHERE p.first_seen>=? AND p.first_seen<?
464 + ORDER BY p.first_seen DESC LIMIT 50""", (t0, t1)).fetchall()
465 + sync_rows = con.execute("""
466 + SELECT datetime(ts,'unixepoch','localtime'), store_id, found, added,
467 + updated, removed, status
468 + FROM sync_log WHERE ts>=? AND ts<? ORDER BY ts DESC LIMIT 50""",
469 + (t0, t1)).fetchall()
235 470 tables = [
236 471 {"id": "top_boutiques", "title": "Top boutiques",
237 472 "columns": ["Boutique", "Région", "Produits", "Nouveautés (période)", "Prix moyen"],
@@ -242,44 +477,102 @@ def _build(period: str, from_: str | None, to: str | None) -> dict:
242 477 "rows": [[_cat_label(c), n, st, _price(pavg),
243 478 _price(_median(con, " AND category=?", (c,)))]
244 479 for c, n, st, pavg in cat_rows]},
480 + {"id": "regions", "title": "Régions en détail",
481 + "columns": ["Région", "Boutiques", "Produits", "Prix moyen", "Nouveautés (période)"],
482 + "rows": [[r, st, n, _price(pavg), nouv]
483 + for r, st, n, pavg, nouv in region_tbl]},
245 484 ]
485 + if nouv_rows:
486 + tables.append(
487 + {"id": "nouveautes", "title": "Nouveautés récentes (période)",
488 + "columns": ["Produit", "Boutique", "Catégorie", "Prix", "Détecté le"],
489 + "rows": [[(t or "—")[:60], (s or "—")[:36], _cat_label(c),
490 + _price(p if p and p > 0 else None), d]
491 + for t, s, c, p, d in nouv_rows]})
492 + if sync_rows:
493 + tables.append(
494 + {"id": "syncs", "title": "Sources & fraîcheur — dernières synchronisations",
495 + "columns": ["Date", "Boutique", "Trouvés", "Ajoutés", "Mis à jour",
496 + "Retirés", "Statut"],
497 + "rows": [[d, sid, f or 0, a or 0, u or 0, rm or 0, st or "—"]
498 + for d, sid, f, a, u, rm, st in sync_rows]})
246 499
247 500 # ----- records & faits marquants --------------------------------------
248 501 records = []
249 502 if cur_daily:
250 503 day, v = max(cur_daily.items(), key=lambda kv: kv[1])
251 504 records.append({"label": "Jour record de nouveautés (période)",
252 − "value": f"{v:,}".replace(",", " ") + " produits", "date": day})
505 + "value": _int(v) + " produits", "date": day})
506 + all_time = con.execute(
507 + """SELECT date(first_seen,'unixepoch','localtime') AS d, COUNT(*) AS n
508 + FROM products GROUP BY d ORDER BY n DESC LIMIT 1""").fetchone()
509 + if all_time:
510 + records.append({"label": "Jour record de nouveautés (depuis le début)",
511 + "value": _int(all_time[1]) + " produits",
512 + "date": all_time[0]})
253 513 top_shop = con.execute("""SELECT s.name, COUNT(*) FROM products p
254 514 JOIN stores s ON s.id=p.store_id WHERE p.first_seen>=? AND p.first_seen<?
255 515 GROUP BY p.store_id ORDER BY 2 DESC LIMIT 1""", (t0, t1)).fetchone()
256 516 if top_shop:
257 517 records.append({"label": f"Boutique la plus prolifique (période) — {(top_shop[0] or '')[:40]}",
258 − "value": f"{top_shop[1]:,}".replace(",", " ") + " nouveautés"})
518 + "value": _int(top_shop[1]) + " nouveautés"})
519 + big_shop = con.execute("""SELECT name, product_count FROM stores
520 + ORDER BY product_count DESC LIMIT 1""").fetchone()
521 + if big_shop and big_shop[1]:
522 + records.append({"label": f"Boutique la mieux garnie — {(big_shop[0] or '')[:40]}",
523 + "value": _int(big_shop[1]) + " produits"})
259 524 top_region = con.execute("""SELECT s.region, COUNT(*) FROM products p
260 525 JOIN stores s ON s.id=p.store_id WHERE s.region<>''
261 526 AND p.first_seen>=? AND p.first_seen<? GROUP BY s.region
262 527 ORDER BY 2 DESC LIMIT 1""", (t0, t1)).fetchone()
263 528 if top_region:
264 529 records.append({"label": "Région la plus active (période)",
265 − "value": f"{top_region[0]} — " + f"{top_region[1]:,}".replace(",", " ") + " nouveautés"})
530 + "value": f"{top_region[0]} — " + _int(top_region[1]) + " nouveautés"})
266 531 if top_cats:
267 532 records.append({"label": "Catégorie la plus fournie",
268 533 "value": f"{_cat_label(top_cats[0][0])} — "
269 − + f"{top_cats[0][1]:,}".replace(",", " ") + " produits"})
534 + + _int(top_cats[0][1]) + " produits"})
535 + rich_cat = con.execute("""SELECT category,
536 + ROUND(AVG(CASE WHEN price>0 AND price<=? THEN price END),2) AS a
537 + FROM products WHERE active=1 GROUP BY category
538 + HAVING COUNT(*)>=100 AND a IS NOT NULL
539 + ORDER BY a DESC LIMIT 1""", (PRICE_CAP,)).fetchone()
540 + if rich_cat:
541 + records.append({"label": f"Catégorie au prix moyen le plus élevé — {_cat_label(rich_cat[0])}",
542 + "value": _price(rich_cat[1])})
543 + if plat:
544 + records.append({"label": "Plateforme e-commerce dominante",
545 + "value": f"{PLATFORM_LABELS.get(plat[0][0] or '', plat[0][0] or 'Inconnue')} — "
546 + + _int(plat[0][1]) + " boutiques"})
270 547 dear = con.execute("""SELECT p.title, p.price, s.name FROM products p
271 548 JOIN stores s ON s.id=p.store_id WHERE p.active=1 AND p.price>0
272 549 AND p.price<=? ORDER BY p.price DESC LIMIT 1""", (PRICE_CAP,)).fetchone()
273 550 if dear:
274 551 records.append({"label": f"Produit le plus cher au catalogue — {(dear[0] or '')[:34]} ({dear[2]})",
275 552 "value": _price(dear[1])})
276 −
277 − return {
553 + best_sync = con.execute("""SELECT store_id, added,
554 + date(ts,'unixepoch','localtime') FROM sync_log
555 + WHERE ts>=? AND ts<? AND added>0
556 + ORDER BY added DESC LIMIT 1""", (t0, t1)).fetchone()
557 + if best_sync:
558 + records.append({"label": f"Synchronisation la plus fructueuse (période) — {best_sync[0]}",
559 + "value": _int(best_sync[1]) + " ajouts",
560 + "date": best_sync[2]})
561 +
562 + out = {
278 563 "updated": datetime.now(TZ).isoformat(timespec="seconds"),
279 564 "period": {"from": start.isoformat(), "to": end.isoformat(), "label": label},
280 − "kpis": kpis, "series": series, "breakdowns": breakdowns,
565 + "kpis": kpis, "gauges": gauges, "series": series,
566 + "breakdowns": breakdowns, "distributions": distributions,
281 567 "geo": geo, "heatmap": heatmap, "tables": tables, "records": records,
282 568 }
569 + if multiseries:
570 + out["multiseries"] = multiseries
571 + if stacked:
572 + out["stacked"] = stacked
573 + if hourly:
574 + out["hourly"] = hourly
575 + return out
283 576 finally:
284 577 con.close()
285 578
modified fabrika/web.py +6 −5
@@ -348,7 +348,9 @@ def stats_report(period: str = "30j",
348 348 from_: str | None = Query(None, alias="from"),
349 349 to: str | None = None,
350 350 mode: str = "complet"):
351 − """Rapport statistique PDF estampillé Groupe-KA (gabarit kapdf/fpdf2)."""
351 + """Rapport statistique PDF estampillé Groupe-KA (gabarit kapdf/fpdf2 v2).
352 + 5 modes : complet | synthese | tendances | repartitions | donnees —
353 + un mode inconnu retombe sur `complet` (SPEC §3)."""
352 354 from fastapi.responses import Response
353 355
354 356 from . import kapdf, statsdash
@@ -359,10 +361,9 @@ def stats_report(period: str = "30j",
359 361 site = {"wordmark": "Fabri·Ka", "accent": "#c4532e",
360 362 "domain": "www.fabri-ka.com",
361 363 "tagline": "Tous les produits québécois. Un seul endroit."}
362 − pdf = kapdf.GroupeKAReport(
363 − site=site, dashboard=dash,
364 − mode="synthese" if mode == "synthese" else "complet").build()
365 − fname = kapdf.filename("fabri-ka", period)
364 + mode = mode if mode in kapdf.REPORT_MODES else "complet"
365 + pdf = kapdf.GroupeKAReport(site=site, dashboard=dash, mode=mode).build()
366 + fname = kapdf.filename("fabri-ka", period, mode)
366 367 return Response(content=pdf, media_type="application/pdf",
367 368 headers={"Content-Disposition": f'attachment; filename="{fname}"'})
368 369
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
4 −bord analytique) et l'**export PDF** estampillé Groupe-KA. Le visuel suit le
5 −design system ka-ui (tokens.css) avec l'accent de la marque.
3 +Contrat partagé par les plateformes pour leurs pages **/stats** (tableau de
4 +bord analytique) et les **exports PDF** estampillés Groupe-KA. Le visuel suit
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 13 ## 1. Page /stats — structure obligatoire (dans cet ordre)
8 14
9 −1. **Bandeau KPI** : 4–6 grandes cartes (`KpiCard`) — valeur, libellé,
10 − variation vs période précédente (▲/▼ + %, vert `--green` / rouge `--danger`).
15 +1. **Bandeau KPI** : 6–10 grandes cartes (`KpiCard`) — valeur, libellé,
16 + variation vs période précédente (▲/▼ + %, vert `--green` / rouge
17 + `--danger`), **sparkline** de tendance quand une série existe.
11 18 2. **Sélecteur de période global** (`PeriodSelector`) : `aujourd'hui · 7 j ·
12 19 30 j · 3 m · 6 m · 12 m · année en cours · tout` + plage personnalisée
13 20 (2 champs date). Toute la page se recalcule (state → refetch dashboard).
14 −3. **Graphiques** : courbes d'évolution (`LineChart`, survol = infobulle,
15 − légende cliquable pour masquer une série, comparaison N vs N-1 en
16 − pointillé), barres (`BarChart`), anneaux (`Donut`), calendrier de chaleur
17 − (`CalendarHeatmap`) quand pertinent.
18 −4. **Répartition géographique** (par ville/région) quand pertinent — barres
19 − horizontales triées (pas besoin de vraie carte).
20 −5. **Tableaux détaillés** (`DataTable`) : tri par colonne, recherche interne,
21 +3. **Jauges** (`GaugeCard`) quand pertinent : taux, couvertures, complétude.
22 +4. **Graphiques d'évolution** : courbes/aires (`LineChart`, survol =
23 + infobulle, légende cliquable, comparaison N vs N-1 en pointillé), barres
24 + verticales (`VBarChart` — volumes quotidiens), **multi-courbes ≤ 4 séries**
25 + (`MultiLineChart` — motifs de trait distincts, jamais la couleur seule),
26 + **barres empilées** (`StackedBarChart` — composition dans le temps).
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 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,
23 − plus forte croissance, meilleure entrée…) — cartes compactes.
24 −7. **Fraîcheur** : « Mis à jour le {date heure} » + bouton Rafraîchir.
25 −8. **Bouton PDF** bien visible en haut : « Télécharger le rapport PDF » avec
26 − deux choix (Rapport complet / Synthèse 2 pages). Indicateur de progression
27 − si > 2 s.
36 + Viser 3 à 5 tableaux par plateforme.
37 +9. **Records & faits marquants** : générés depuis les données (jour record,
38 + plus forte croissance, meilleure entrée…) — cartes compactes, 6–12.
39 +10. **Fraîcheur** : « Mis à jour le {date heure} » + bouton Rafraîchir.
40 +11. **Bouton PDF** bien visible en haut (`PdfButton`) : bouton principal
41 + « Rapport PDF complet » + menu « Autres rapports ▾ » listant les
42 + **5 rapports** (voir §3). Indicateur de progression si > 2 s.
28 43
29 44 Responsive : KPI empilés < 768 px, graphiques pleine largeur redimensionnés
30 45 (SVG viewBox), tableaux en défilement horizontal contenu, tactile ≥ 44 px.
31 46 AUCUNE donnée inventée : une stat indisponible = bloc « Pas encore mesuré »
32 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 55 ## 2. API — contrat commun
35 56
36 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 59 ```jsonc
39 60 {
40 − "updated": "2026-08-17T21:04:00-04:00",
41 − "period": { "from": "2026-07-18", "to": "2026-08-17", "label": "30 jours" },
61 + "updated": "2026-08-19T01:00:00-04:00",
62 + "period": { "from": "2026-07-20", "to": "2026-08-19", "label": "30 jours" },
42 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 68 "series": [ { "id": "vol", "title": "Annonces actives par jour", "unit": "annonces",
45 − "kind": "line", "points": [{ "t": "2026-07-18", "v": 31200 }],
46 − "compare": [{ "t": "2025-07-18", "v": 24100 }] } ],
47 − "breakdowns": [ { "id": "types", "title": "Par type", "kind": "donut",
48 − "items": [{ "label": "4½", "value": 9120 }] } ],
69 + "kind": "line", // line | bar | area
70 + "points": [{ "t": "2026-07-20", "v": 31200 }],
71 + "compare": [{ "t": "2025-07-20", "v": 24100 }] } ],
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 82 "geo": { "title": "Par région", "items": [{ "label": "Montréal", "value": 15680 }] },
50 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 86 "tables": [ { "id": "top", "title": "Top villes", "columns": ["Ville", "Annonces", "Δ 30 j"],
52 87 "rows": [["Montréal", 15680, "+3,1 %"]] } ],
53 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 92 Champs absents = section masquée. Cache serveur recommandé (≥ 5 min par
58 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 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
66 −apps Python ; les apps Next portent le même gabarit en pdfkit)
113 +Un `mode` inconnu retombe sur `complet`. Le gabarit (implémentations :
114 +`kapdf.py` fpdf2 pour les apps Python ; les apps Next portent le même
115 +gabarit en pdfkit) :
67 116
68 117 - **Couverture** : cadre encre, kicker « GROUPE KA · RAPPORT STATISTIQUE »,
69 − wordmark de la plateforme (boîte encre + accent), sous-titre, période
70 − couverte, date/heure de génération, bande encre au pied avec
118 + wordmark de la plateforme (boîte encre + accent), **type de rapport**,
119 + période couverte, date/heure de génération, bande encre au pied avec
71 120 « par Groupe KA — groupe-ka.com ».
72 −- **Sommaire** avec numéros de pages (mode complet).
73 −- **KPI** : grille de cartes (bordure encre, valeur en gros, delta coloré).
121 +- **Sommaire** avec numéros de pages (modes complet et donnees).
122 +- **KPI** : grille de cartes (bordure encre, valeur en gros, delta coloré
123 + arrondi à 1 décimale). **Jauges** : demi-arcs accent.
74 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 128 - **Tableaux** paginés proprement (lignes zébrées `--surface-2`, jamais
77 129 coupés en deux à cheval sur une ligne).
78 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 133 - **Chaque page** : en-tête discret (« Groupe KA · {Plateforme} », filet
82 134 encre) + pied (« © Groupe-KA — {année} — groupe-ka.com · {période} · p. X/Y »).
83 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 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,
89 − croissance), classement des plateformes, bloc résumé par plateforme + lien
140 +- **groupe-ka** : tableau de bord maître — consolidation des plateformes
141 + (volume total, croissance), classement, bloc résumé par plateforme + lien
90 142 vers sa page /stats ; « Rapport écosystème complet » = PDF consolidé.
91 143 - **lou-ka** : annonces actives/nouvelles/retirées, loyers moyens/médians par
92 − ville & taille, évolution, répartition par type, top villes.
93 −- **immo-ka** : annonces actives/nouvelles/vendues-retirées, prix moyen/médian
94 − par ville/région/type, délai de présence, top villes, tension du marché.
144 + ville & taille (multiseries), distribution des loyers, évolution,
145 + répartition par type, top villes, sources (stacked).
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 149 - **vrai-prix** : couverture du rôle (unités, valeur totale), estimations
96 − servies si journalisées, répartitions par municipalité/type, indices marché.
97 −- **auto-ka** : volume par marque/modèle/année/carburant/boîte, prix moyens et
98 − km moyens par segment, top marques/modèles.
99 −- **fabri-ka** : produits par catégorie/région/boutique, fourchettes de prix,
100 − nouveautés par période, top catégories.
101 −- **food-ka** : produits suivis, relevés de prix, soldes détectés (baisses/
102 − hausses, amplitude), top produits en solde, prix moyens par catégorie.
103 −- **resto-ka** : restos par cuisine/ville/gamme, menus & plats, nouveautés/
104 − fermetures détectées, top établissements.
150 + servies si journalisées, répartitions par municipalité/type, distribution
151 + des valeurs, indices marché.
152 +- **auto-ka** : volume par marque/modèle/année/carburant/boîte, prix moyens
153 + et km moyens par segment (multiseries), distributions prix/km/année,
154 + top marques/modèles.
155 +- **fabri-ka** : produits par catégorie/région/boutique, fourchettes de prix
156 + (distribution), nouveautés par période, top catégories.
157 +- **food-ka** : produits suivis, relevés de prix, soldes détectés
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 162 - **sorti-ka** : événements à venir/passés par catégorie/ville, gratuits vs
106 − payants, heatmap calendrier, top lieux.
107 −- **crea-ka** : créateurs par plateforme/niche/tier, comptes reliés, top
108 − créateurs, croissance du répertoire.
109 −- **trouve-ka** : pages indexées, domaines, rythme de crawl (indexées/h),
110 − erreurs, file frontier, tendances si les requêtes sont journalisées.
111 −- **api-ka** : appels par endpoint/jour/heure, latences moyennes + p95, taux
112 − d'erreur, top endpoints, uptime (données des middlewares de logging + runs).
113 −- **Transverse (tous)** : volume total agrégé + croissance, connecteurs actifs
114 − et éléments ajoutés/mis à jour par période (journaux de sync), complétude/
115 − fraîcheur moyenne des fiches quand mesurable. Trafic web : seulement si des
116 − journaux d'accès existent — sinon état vide propre.
163 + payants (stacked), heatmap calendrier + horaire, top lieux.
164 +- **crea-ka** : créateurs par plateforme/niche/tier, comptes reliés
165 + (stacked par plateforme), distribution des audiences, top créateurs,
166 + croissance du répertoire.
167 +- **trouve-ka** : pages indexées, domaines, rythme de crawl (indexées/h —
168 + hourly), erreurs, file frontier, tendances des requêtes journalisées.
169 +- **api-ka** : appels par endpoint/jour/heure (hourly), latences moyennes +
170 + p95 (multiseries), taux d'erreur, top endpoints/clés, uptime.
171 +- **job-ka** : offres actives/nouvelles/expirées par catégorie/ville/
172 + entreprise, distribution des salaires affichés, top employeurs.
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 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 +
121 −cache) — le front la rend automatiquement. 1 plateforme = implémenter les 2
122 −endpoints du contrat + une page /stats montée sur les composants du kit +
123 −`kapdf.py` (ou gabarit pdfkit) branché sur le même JSON de dashboard.
181 +1 métrique = 1 entrée `kpis[]`, `series[]`, `multiseries[]`, `stacked[]`,
182 +`distributions[]` ou `gauges[]` côté API (requête SQL agrégée + cache) — le
183 +front la rend automatiquement. 1 plateforme = implémenter les 2 endpoints du
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 2 // ka-ui/stats/kacharts.tsx — kit de graphiques SVG du module Stats commun
3 3 // Groupe KA (zéro dépendance, React 18+). Style : design system ka-ui
4 4 // (bordures encre, accent de la plateforme via var(--accent)).
5 −// Composants : KpiCard, PeriodSelector, LineChart (infobulle + légende
6 −// cliquable + comparaison N-1), BarChart, Donut, CalendarHeatmap, DataTable
7 −// (tri/recherche/pagination), RecordCard, PdfButton, EmptyBlock, Fraicheur.
8 −import { useMemo, useState } from "react";
5 +// v2 — composants : KpiCard (+sparkline), PeriodSelector, LineChart (ligne/
6 +// aire, infobulle + légende cliquable + comparaison N-1), MultiLineChart
7 +// (≤4 séries, pointillés distincts = jamais la couleur seule), VBarChart
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 15 export type Kpi = {
12 16 id: string; label: string; value: number | string; unit?: string;
13 17 delta_pct?: number | null; direction?: "up" | "down";
18 + spark?: Point[]; help?: string;
14 19 };
15 20 export type Point = { t: string; v: number };
16 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 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 38 export type TableSpec = { id: string; title: string; columns: string[]; rows: (string | number)[][] };
22 39 export type RecordFact = { label: string; value: string; date?: string };
23 40
@@ -32,25 +49,63 @@ export const PERIODS: { id: string; label: string }[] = [
32 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 60 export const fmtInt = (n: number) => n.toLocaleString("fr-CA");
36 61 export const fmtNum = (n: number) =>
37 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 75 export function KpiCard({ k }: { k: Kpi }) {
41 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 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 91 <p style={{ margin: 0, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(22px,2.4vw,30px)", letterSpacing: "-0.02em" }}>
45 92 {typeof k.value === "number" ? fmtNum(k.value) : k.value}
46 93 {k.unit ? <span style={{ fontSize: "0.6em", color: "var(--ink-2)" }}> {k.unit}</span> : null}
47 94 </p>
48 95 <p className="klabel" style={{ margin: "6px 0 0" }}>{k.label}</p>
49 − {k.delta_pct !== undefined && k.delta_pct !== null && (
50 − <p style={{ margin: "8px 0 0", fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 700, color: up ? "var(--green)" : "var(--danger)" }}>
51 − {up ? "▲" : "▼"} {k.delta_pct >= 0 ? "+" : ""}{fmtNum(k.delta_pct)} % <span style={{ color: "var(--ink-3)", fontWeight: 500 }}>vs période préc.</span>
52 − </p>
53 − )}
96 + <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 8 }}>
97 + {k.delta_pct !== undefined && k.delta_pct !== null ? (
98 + <p style={{ margin: "8px 0 0", fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 700, color: up ? "var(--green)" : "var(--danger)" }}>
99 + {up ? "▲" : "▼"} {fmtPct(k.delta_pct)} <span style={{ color: "var(--ink-3)", fontWeight: 500 }}>vs période préc.</span>
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 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 143 export function LineChart({ serie, height = 240 }: { serie: Serie; height?: number }) {
89 144 const [hide, setHide] = useState<{ cur: boolean; cmp: boolean }>({ cur: false, cmp: false });
90 145 const [hover, setHover] = useState<number | null>(null);
91 146 const W = 720, H = height, PL = 54, PR = 10, PT = 14, PB = 26;
92 147 const pts = serie.points ?? [];
148 + if (serie.kind === "bar") return <VBarChart serie={serie} height={height} />;
93 149 if (pts.length < 2) return <EmptyBlock title={serie.title} />;
94 150 const all = [...(hide.cur ? [] : pts), ...(!hide.cmp && serie.compare ? serie.compare : [])];
95 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 183 {[0, Math.floor(pts.length / 2), pts.length - 1].map((i) => (
128 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 189 {!hide.cmp && serie.compare && serie.compare.length > 1 && (
131 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 211 return (
153 − <button type="button" onClick={onClick} aria-pressed={!off}
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 }}>
212 + <button type="button" onClick={onClick} aria-pressed={!off} disabled={!onClick}
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 214 <span style={{ width: 18, height: 0, borderTop: `3px ${dashed ? "dashed" : "solid"} ${color}` }} />
156 215 {label}
157 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) => (
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 415 export function BarChart({ title, items, unit }: { title: string; items: BreakItem[]; unit?: string }) {
163 416 const rows = (items ?? []).slice(0, 14);
164 417 if (!rows.length) return <EmptyBlock title={title} />;
@@ -169,9 +422,16 @@ export function BarChart({ title, items, unit }: { title: string; items: BreakIt
169 422 <div style={{ marginTop: 12, display: "grid", gap: 9 }}>
170 423 {rows.map((r) => (
171 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 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 435 </div>
176 436 <div style={{ marginTop: 3, height: 12, background: "rgba(20,24,20,0.06)", borderRadius: "0 3px 3px 0" }}>
177 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 507 /* ---------- Calendrier de chaleur ---------- */
228 508 export function CalendarHeatmap({ title, cells }: { title: string; cells: { date: string; value: number }[] }) {
229 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 602 /* ---------- Tableau : tri, recherche, pagination ---------- */
265 603 export function DataTable({ spec, pageSize = 25 }: { spec: TableSpec; pageSize?: number }) {
266 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 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 692 const url = (mode: string) => {
345 693 const p = new URLSearchParams({ period, mode });
346 694 if (from) p.set("from", from);
@@ -348,23 +696,38 @@ export function PdfButton({ period, from, to, endpoint = "/api/stats/report" }:
348 696 return `${endpoint}?${p}`;
349 697 };
350 698 const dl = (mode: string) => {
351 − setBusy(true);
699 + setBusy(mode);
700 + setOpen(false);
352 701 const a = document.createElement("a");
353 702 a.href = url(mode);
354 703 a.download = "";
355 704 document.body.appendChild(a);
356 705 a.click();
357 706 a.remove();
358 − setTimeout(() => setBusy(false), 2500);
707 + setTimeout(() => setBusy(null), 3000);
359 708 };
360 709 return (
361 − <span style={{ display: "inline-flex", gap: 8, flexWrap: "wrap" }}>
362 − <button type="button" className="btn btn-primary" onClick={() => dl("complet")} disabled={busy}>
363 − {busy ? "Génération…" : "⬇ Télécharger le rapport PDF"}
710 + <span ref={box} style={{ position: "relative", display: "inline-flex", gap: 8, flexWrap: "wrap" }}>
711 + <button type="button" className="btn btn-primary" onClick={() => dl("complet")} disabled={!!busy}>
712 + {busy ? "Génération…" : "⬇ Rapport PDF complet"}
364 713 </button>
365 − <button type="button" className="btn btn-ghost" onClick={() => dl("synthese")} disabled={busy}>
366 − Synthèse (2 p.)
714 + <button type="button" className="btn btn-ghost" onClick={() => setOpen((o) => !o)} disabled={!!busy}
715 + aria-haspopup="menu" aria-expanded={open}>
716 + Autres rapports ▾
367 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 731 </span>
369 732 );
370 733 }
modified frontend/src/pages/Stats.tsx +74 −16
@@ -1,8 +1,11 @@
1 1 // -----------------------------------------------------------------------------
2 2 // Fabri-Ka — page /stats : tableau de bord analytique (module ka-stats commun
3 −// Groupe KA). Structure imposée par frontend/src/ka/stats/SPEC.md §1 :
4 −// PDF en haut, bandeau KPI, sélecteur de période (refetch global), graphiques,
5 −// géo, tableaux, records, fraîcheur. Données : GET /api/stats/dashboard.
3 +// Groupe KA, v2). Structure imposée par frontend/src/ka/stats/SPEC.md §1 :
4 +// PDF en haut (menu 5 rapports), bandeau KPI (+sparklines), sélecteur de
5 +// période (refetch global), jauges, évolution (courbes + stats de séries,
6 +// multi-courbes, empilées), répartitions (donuts, barres, histogrammes), géo,
7 +// calendriers (26 sem. + 7×24), tableaux, records, fraîcheur.
8 +// Données : GET /api/stats/dashboard — réelles, rien d'inventé.
6 9 // -----------------------------------------------------------------------------
7 10 import { useCallback, useEffect, useState, type CSSProperties } from 'react'
8 11 import {
@@ -10,29 +13,45 @@ import {
10 13 BreakItem,
11 14 CalendarHeatmap,
12 15 DataTable,
16 + Distribution,
13 17 Donut,
14 18 EmptyBlock,
15 19 Fraicheur,
20 + Gauge,
21 + GaugeCard,
22 + Histogram,
23 + HourCell,
24 + HourHeatmap,
16 25 Kpi,
17 26 KpiCard,
18 27 LineChart,
28 + MultiLineChart,
29 + MultiSerie,
19 30 PdfButton,
20 31 PeriodSelector,
21 32 RecordCard,
22 33 RecordFact,
23 34 Serie,
35 + StackedBarChart,
36 + StackedSerie,
37 + StatSummary,
24 38 TableSpec,
25 39 } from '../ka/stats/kacharts'
26 40
27 −type Breakdown = { id: string; title: string; kind?: 'donut' | 'bar'; items: BreakItem[] }
41 +type Breakdown = { id: string; title: string; kind?: 'donut' | 'bars' | 'bar'; items: BreakItem[] }
28 42 type Dashboard = {
29 43 updated: string
30 44 period: { from: string; to: string; label: string }
31 45 kpis: Kpi[]
46 + gauges?: Gauge[]
32 47 series: Serie[]
48 + multiseries?: MultiSerie[]
49 + stacked?: StackedSerie[]
33 50 breakdowns: Breakdown[]
51 + distributions?: Distribution[]
34 52 geo?: { title: string; items: BreakItem[] }
35 53 heatmap?: { title: string; cells: { date: string; value: number }[] }
54 + hourly?: { title: string; cells: HourCell[] }
36 55 tables: TableSpec[]
37 56 records: RecordFact[]
38 57 }
@@ -87,7 +106,7 @@ export default function Stats() {
87 106
88 107 return (
89 108 <div className="page" style={{ maxWidth: 1160, margin: '0 auto', padding: '24px 16px 56px' }}>
90 − {/* ---- en-tête : titre + bouton PDF bien visible (SPEC §1.8) ---- */}
109 + {/* ---- en-tête : titre + bouton PDF (menu 5 rapports — SPEC §1.11) ---- */}
91 110 <header
92 111 style={{
93 112 display: 'flex',
@@ -131,8 +150,8 @@ export default function Stats() {
131 150
132 151 {dash && (
133 152 <div style={{ opacity: loading ? 0.55 : 1, transition: 'opacity 0.2s' }}>
134 − {/* ---- 1. bandeau KPI ---- */}
135 − <section aria-label="Indicateurs clés" style={{ display: 'grid', gap: 12, gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))' }}>
153 + {/* ---- 1. bandeau KPI (+ sparklines) ---- */}
154 + <section aria-label="Indicateurs clés" style={{ display: 'grid', gap: 12, gridTemplateColumns: 'repeat(auto-fit, minmax(190px, 1fr))' }}>
136 155 {dash.kpis.map((k) => (
137 156 <KpiCard key={k.id} k={k} />
138 157 ))}
@@ -154,17 +173,36 @@ export default function Stats() {
154 173 </p>
155 174 </section>
156 175
157 − {/* ---- 3. graphiques ---- */}
176 + {/* ---- 3. jauges : taux & couvertures ---- */}
177 + {dash.gauges && dash.gauges.length > 0 && (
178 + <>
179 + <h2 style={SECTION_TITLE}>Couverture des données</h2>
180 + <section aria-label="Jauges" style={{ display: 'grid', gap: 12, gridTemplateColumns: 'repeat(auto-fit, minmax(170px, 1fr))' }}>
181 + {dash.gauges.map((g) => (
182 + <GaugeCard key={g.id} g={g} />
183 + ))}
184 + </section>
185 + </>
186 + )}
187 +
188 + {/* ---- 4. graphiques d'évolution ---- */}
158 189 <h2 style={SECTION_TITLE}>Évolution</h2>
159 190 <div style={{ display: 'grid', gap: 14 }}>
160 191 {dash.series.map((s) => (
161 − <LineChart key={s.id} serie={s} />
192 + <div key={s.id}>
193 + <LineChart serie={s} />
194 + <StatSummary serie={s} />
195 + </div>
196 + ))}
197 + {(dash.multiseries ?? []).map((ms) => (
198 + <MultiLineChart key={ms.id} ms={ms} />
199 + ))}
200 + {(dash.stacked ?? []).map((st) => (
201 + <StackedBarChart key={st.id} st={st} />
162 202 ))}
163 − {dash.heatmap ? (
164 − <CalendarHeatmap title={dash.heatmap.title} cells={dash.heatmap.cells} />
165 − ) : null}
166 203 </div>
167 204
205 + {/* ---- 5. répartitions & distributions ---- */}
168 206 <h2 style={SECTION_TITLE}>Répartitions</h2>
169 207 <div style={{ display: 'grid', gap: 14, gridTemplateColumns: 'repeat(auto-fit, minmax(min(340px, 100%), 1fr))' }}>
170 208 {donuts.map((b) => (
@@ -174,8 +212,15 @@ export default function Stats() {
174 212 <BarChart key={b.id} title={b.title} items={b.items} />
175 213 ))}
176 214 </div>
215 + {dash.distributions && dash.distributions.length > 0 && (
216 + <div style={{ display: 'grid', gap: 14, gridTemplateColumns: 'repeat(auto-fit, minmax(min(340px, 100%), 1fr))', marginTop: 14 }}>
217 + {dash.distributions.map((d) => (
218 + <Histogram key={d.id} dist={d} />
219 + ))}
220 + </div>
221 + )}
177 222
178 − {/* ---- 4. répartition géographique ---- */}
223 + {/* ---- 6. répartition géographique ---- */}
179 224 <h2 style={SECTION_TITLE}>Régions</h2>
180 225 {dash.geo && dash.geo.items.length ? (
181 226 <BarChart title={dash.geo.title} items={dash.geo.items} unit="produits" />
@@ -183,7 +228,20 @@ export default function Stats() {
183 228 <EmptyBlock title="Répartition géographique" />
184 229 )}
185 230
186 − {/* ---- 5. tableaux détaillés ---- */}
231 + {/* ---- 7. calendriers : 26 semaines + 7×24 ---- */}
232 + <h2 style={SECTION_TITLE}>Calendriers d'activité</h2>
233 + <div style={{ display: 'grid', gap: 14 }}>
234 + {dash.heatmap ? (
235 + <CalendarHeatmap title={dash.heatmap.title} cells={dash.heatmap.cells} />
236 + ) : (
237 + <EmptyBlock title="Calendrier d'activité" />
238 + )}
239 + {dash.hourly && dash.hourly.cells.length > 0 && (
240 + <HourHeatmap title={dash.hourly.title} cells={dash.hourly.cells} />
241 + )}
242 + </div>
243 +
244 + {/* ---- 8. tableaux détaillés ---- */}
187 245 <h2 style={SECTION_TITLE}>Détails</h2>
188 246 <div style={{ display: 'grid', gap: 16 }}>
189 247 {dash.tables.map((t) => (
@@ -191,7 +249,7 @@ export default function Stats() {
191 249 ))}
192 250 </div>
193 251
194 − {/* ---- 6. records & faits marquants ---- */}
252 + {/* ---- 9. records & faits marquants ---- */}
195 253 {dash.records.length > 0 && (
196 254 <>
197 255 <h2 style={SECTION_TITLE}>Records & faits marquants</h2>
@@ -203,7 +261,7 @@ export default function Stats() {
203 261 </>
204 262 )}
205 263
206 − {/* ---- 7. fraîcheur ---- */}
264 + {/* ---- 10. fraîcheur ---- */}
207 265 <div style={{ marginTop: 28, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 10 }}>
208 266 <Fraicheur updated={dash.updated} onRefresh={load} />
209 267 <p className="klabel" style={{ margin: 0 }}>
210 268