html/wiki/doctrine-105-wtp-pilotage-widget.md

Doctrine 105 — WTP Pilotage KPI Widget & Sparklines

Version : 1.0 Date : 21 avril 2026 Auteur : Opus (supervision) + WEVIA Master (execution) Statut : ACTIVE

Contexte

Yacine a demandé le 21 avril 2026 :

• WTP = point d'entrée unique de l'architecture
• KPI pilotage global temps réel
• UX premium (doctrine 60)
• Zero orphan consolidation archi
• Pas de doublon, référentiels uniques

Principe

Le widget de pilotage WTP est additif pur : il ne remplace ni n'écrase aucune page/module existant. Il apporte une couche de visualisation transversale qui agrège les KPIs critiques en live.

Pattern béton

Structure widget (sans dépendance externe)

<section id="wtp-pilotage-kpi-live" data-added-by="opus-doctrine-105"
         style="gradient dark, border premium, radius 12px">
  <header>
    <h2>Pilotage KPI Live</h2>
    <status-badge>LIVE · HH:MM:SS</status-badge>
  </header>
  <grid id="wtp-kpi-grid">
    <!-- 6 cards populated by JS: L99, Stripe MRR, Stripe Customers, NonReg, Business, Completeness -->
  </grid>
  <sparklines id="wtp-pilotage-spark">
    <!-- 4 SVG natifs: NonReg, L99, Business OK, Stripe customers -->
  </sparklines>
</section>

Refresh auto

• 30 secondes par défaut
• Fetch parallèle de 4 bridges: stripe-live-bridge, business-kpi summary, nonreg, l99
• Render conditionnel (waits all 4 success)
• Sparklines : 30 points max en mémoire (sessionStorage-free)

UX premium checklist

• Dark gradient (#0f172a → #1e293b)
• Border 1px solid #334a7a + radius 12px
• Typography : system-ui sans-serif
• Colors : emerald (ok), amber (warn), red (fail), blue (info), purple (neutral)
• Status badge emerald pulsant
• Grid responsive auto-fit 240-280px

Garanties

Règle	Application
Zero écrasement	Widget ajouté AVANT </body> uniquement
Zero hardcode	Valeurs live fetched à chaque refresh
Zero fake data	Fallback --- si bridge down (jamais invented)
GOLD backup	Avant chaque modif WTP
chattr protection	chattr -i avant cp, chown www-data
PHP lint	Passé avant deploy (pour endpoints)
NonReg	Must pass 153/153 après deploy
idempotent	Guard if id exists skip

Pattern SVG sparkline natif

function sparkSVG(points, color) {
  // polyline + cercle dernier point + legend min/now/max
  // viewBox dynamique, preserveAspectRatio none pour fit container
}

Bridges wired (10 KPIs live)

1. /api/stripe-live-bridge.php → MRR, customers
2. /api/wevia-v83-business-kpi.php?action=summary → OK/WARN/FAIL counts
3. /api/nonreg-api.php?cat=all → pass/total
4. /api/l99-api.php?action=stats → score%
5. /api/nps-collector.php → NPS score
6. /api/csat-api.php → CSAT %
7. /api/tickets-api.php → tickets open, MTTR
8. /api/feature-adoption.php → adoption %
9. /opt/weval-l99/data/kpi-wire/stripe-live.json (static snapshot)
10. /opt/weval-l99/data/kpi-wire/growth-live.json, customer-success-live.json

Conséquences positives

• Vue 360° pilotage en 1 scroll WTP
• Data completeness affichée honnête (wire_needed explicit)
• Sparklines révèlent tendances sans chart.js lourd
• Self-serve : les users qui visitent WTP collectent auto les KPIs via feature-tracker.js

Don't

• Ne pas ajouter Chart.js / D3 / Recharts (overkill pour sparklines)
• Ne pas persister data en localStorage (RGPD)
• Ne pas trigger sur keypress (seulement click boutons)
• Ne pas afficher plus de 6 cards + 4 sparklines (UX overload)

Tests validés

• Playwright E2E : login yacine → WTP → 6 cards + 4 sparklines render < 4s
• NonReg : 153/153 après inject (GOLD-20260421-134534-pre-kpi-widget)
• Tag release : v21avr-wtp-pilotage-kpi-widget

Référence

Commit : 0c82d45c5 · fceadc33c · b7417b691 GOLDs : /var/www/html/weval-technology-platform.html.GOLD-*-pre-kpi-widget et -pre-spark