Dashboard React 19 temps reel pour BMW E90 325D. Visualisation telemetrique, agent IA Jarvis et controle fibre optique SUNKENET.
Technologies et librairies cibles.
| Technologie | Role | Justification |
|---|---|---|
React 19 | Framework SPA | Composants reactifs, Suspense, ecouteurs temps reel |
Vite 8 | Build tool | HMR ultra-rapide, bundling optimise, configuration minimale |
Recharts | Graphiques | Courbes RPM, temperature, pression turbo, common rail — rendu SVG performant |
Mercure (EventSource) | Temps reel | Reception push SSE sans polling — economie de batterie |
TailwindCSS | Design system | Dark mode natif, responsive, rapidite de prototypage |
React Router | Navigation | SPA multi-vues (Dashboard, Trajets, Jarvis, Parametres) |
Axios | HTTP Client | Requetes API REST vers Symfony 8 |
Vue d'ensemble des ecrans principaux.
Jauges temps reel : RPM, vitesse, temperature liquide refroidissement, temperature huile (M57 UDS), pression turbo, tension batterie. Indicateur couleur fibre SUNKENET. Carte GPS du trajet en cours.
Temps reelListe des trajets enregistres avec trace GPS sur carte (PostGIS). Filtrage par date, duree, distance. Statistiques de conduite agregees.
PostGISInterface conversationnelle avec l'agent Claude. Jarvis connait l'etat du vehicule, vos emails, votre calendrier. Il peut agir : changer la fibre, trouver une station essence, envoyer un SMS.
Claude AgentConfiguration des seuils d'alerte (RPM, temperatures, pression DPF), couleurs du kit fibre SUNKENET, gestion du token device, profil utilisateur.
ConfigLe serveur pousse les donnees — le client ne poll jamais.
Principe : Symfony 8 publie sur un topic Mercure a chaque nouvelle telemetrie. React 19 souscrit via EventSource. La donnee arrive uniquement quand elle change — zero gaspillage de batterie cote client. Mercure est deploye sur AWS aux cotes de l'API.
L'API /api/telemetry persiste en PostgreSQL et publie sur le topic /telemetry/{device_id}. En phase scale, l'ingestion passe par une queue SQS avant persistance.
Le hub Mercure envoie un evenement SSE a tous les clients abonnes au topic du device.
Le hook useTelemetry() parse le JSON et met a jour les jauges, graphiques Recharts et la carte GPS en temps reel.
Architecture des composants React 19.
| Composant | Props | Description |
|---|---|---|
<GaugeRPM /> | value, max, threshold | Jauge circulaire animee, rouge au-dela du seuil (M57 : redline 5000 RPM) |
<TelemetryChart /> | data[], dataKey, color | Courbe Recharts avec historique glissant (60s) — RPM, boost, temperatures |
<LiveMap /> | coordinates[] | Carte du trajet en cours (Leaflet ou Mapbox, donnees PostGIS) |
<FiberPreview /> | color, mode | Apercu visuel de la couleur fibre optique SUNKENET actuelle |
<JarvisChat /> | deviceId | Interface de chat avec l'agent IA Jarvis (Claude). Affiche les actions executees. |
<BatteryIndicator /> | voltage | Indicateur tension batterie avec seuils d'alerte (warning 12.2V, critique 11.8V) |
<TurboGauge /> | pressure, max | Jauge de pression turbo en temps reel (specifique M57) |
<DPFStatus /> | sootLevel, regenActive | Indicateur etat filtre a particules et regeneration en cours |
Dark mode obligatoire — lisibilite en conduite nocturne.
Fond sombre (#0a0e17), accents bleu/cyan pour les donnees, rouge pour les alertes, vert pour les etats normaux. Contraste WCAG AA minimum. TailwindCSS dark mode natif.
Inter pour le texte, JetBrains Mono pour les valeurs numeriques et le code. Tailles responsives gerees par TailwindCSS.
LisibiliteDesktop (monitoring complet), tablette (dashboard principal), mobile (alertes et Jarvis). Breakpoints TailwindCSS a 768px et 1024px.
Multi-deviceLe catalogue de composants interactif est disponible via Storybook. Il permet de visualiser, tester et documenter chaque composant React de maniere isolee.
Acces : Storybook tourne sur http://localhost:6006. Lancer avec npm run storybook depuis le repertoire frontend/.
Arborescence des composants React planifies et leurs responsabilites.
src/
├── components/
│ ├── gauges/
│ │ ├── GaugeRPM.tsx # Jauge circulaire RPM (SVG anime)
│ │ ├── TurboGauge.tsx # Jauge pression turbo M57
│ │ └── BatteryIndicator.tsx # Indicateur tension batterie
│ ├── charts/
│ │ ├── TelemetryChart.tsx # Courbe Recharts generique (temps reel)
│ │ └── TripChart.tsx # Graphiques historique trajet
│ ├── maps/
│ │ └── LiveMap.tsx # Carte Leaflet/Mapbox GPS temps reel
│ ├── fiber/
│ │ ├── FiberPreview.tsx # Apercu couleur SUNKENET
│ │ └── FiberColorPicker.tsx # Selecteur couleur pour fibre optique
│ ├── jarvis/
│ │ ├── JarvisChat.tsx # Interface chat agent IA
│ │ ├── JarvisMessage.tsx # Bulle message (user/assistant)
│ │ └── JarvisActionCard.tsx # Carte action executee par Jarvis
│ ├── status/
│ │ ├── DPFStatus.tsx # Indicateur DPF + regeneration
│ │ ├── ConnectionBadge.tsx # Badge etat connexion 4G/BLE
│ │ └── EngineStatus.tsx # Resume etat moteur M57
│ └── layout/
│ ├── Navbar.tsx # Barre de navigation
│ ├── Sidebar.tsx # Menu lateral
│ └── PageWrapper.tsx # Layout commun avec padding
├── hooks/
│ ├── useTelemetry.ts # Hook Mercure SSE — flux telemetrie
│ ├── useJarvis.ts # Hook agent IA — envoi/reception messages
│ └── useDeviceStatus.ts # Hook etat device (connecte, batterie, signal)
├── pages/
│ ├── DashboardPage.tsx # Page principale — jauges + carte + charts
│ ├── TripsPage.tsx # Historique des trajets
│ ├── JarvisPage.tsx # Chat avec Jarvis
│ └── SettingsPage.tsx # Parametres utilisateur et device
├── services/
│ ├── api.ts # Client Axios configure (baseURL, JWT)
│ └── mercure.ts # Helper EventSource pour Mercure
└── App.tsx # React Router — routage principalArchitecture de gestion d'etat basee sur les hooks React natifs et Mercure SSE.
Le hook useTelemetry(deviceId) ouvre une connexion EventSource vers le Hub Mercure. A chaque evenement, le JSON est parse et stocke dans un useState local. Le hook retourne { latest, history, isConnected }.
Les donnees de history sont maintenues dans un buffer circulaire de 60 secondes pour alimenter les graphiques Recharts sans consommer de memoire excessive.
Chaque composant (GaugeRPM, TurboGauge, TelemetryChart...) recoit les valeurs en props depuis la page parente qui appelle le hook. Pas de state global — chaque page est autonome.
Pas de Redux/Zustand : La complexite du state est geree par des hooks custom. Le flux de donnees est unidirectionnel : Mercure → Hook → Page → Composants. Si la complexite augmente, migration vers Zustand prevue.
Approche de testing avec Vitest pour les tests unitaires et composants.
| Type | Outil | Cible |
|---|---|---|
| Unit tests | Vitest | Hooks custom (useTelemetry, useJarvis), fonctions utilitaires, parsing PID |
| Component tests | Vitest + Testing Library | Rendu des composants avec props mockees (jauges, charts, status) |
| Integration tests | Vitest + MSW | Flux API (mock service worker) — login, telemetrie, commandes Jarvis |
| Visual regression | Storybook + Chromatic | Detection de regressions visuelles sur les composants critiques |
Priorite de couverture : En Phase 1 (MVP), focus sur les hooks custom et le parsing des donnees telemetriques. Les tests visuels Storybook/Chromatic seront ajoutes en Phase 2.
Commandes npm disponibles dans le repertoire frontend/.
| Commande | Description |
|---|---|
npm run dev | Demarre le serveur de developpement Vite (HMR) sur localhost:5174 |
npm run build | Build de production optimise (output dans dist/) |
npm run preview | Preview du build de production en local |
npm run lint | Lint ESLint + Prettier sur tous les fichiers TypeScript/TSX |
npm run test | Lance les tests Vitest en mode watch |
npm run test:ci | Lance les tests Vitest une seule fois (CI/CD) |
npm run storybook | Demarre Storybook sur localhost:6006 |
npm run build-storybook | Build statique de Storybook pour deploiement |