chartbastan/_bmad-output/implementation-artifacts/5-3-créer-le-composant-energywave-pour-visualisation-24h.md

Story 5.3: Créer le composant EnergyWave pour visualisation 24h

Status: review

Acceptance Criteria

Given des données d'énergie sur 24h sont disponibles When le composant EnergyWave est affiché Then il affiche un graphique de ligne montrant l'évolution And l'axe X montre le temps (-24h à maintenant) And l'axe Y montre le niveau d'énergie (0-100) And le graphique est interactif (hover pour voir valeurs précises)

Given le graphique est affiché sur mobile When je consulte la visualisation Then le graphique est responsive et lisible And les interactions tactiles fonctionnent (pinch to zoom si nécessaire)

Tasks / Subtasks

• Installer et configurer D3.js (AC: #1)

  • Installer d3 et @types/d3
  • Installer recharts ou utiliser D3.js directement
  • Créer le wrapper pour D3.js avec React
  • Configurer les options de graphique
  • Vérifier l'installation

• Créer le composant EnergyWave (AC: #1)

  • Créer src/components/dashboard/EnergyWave.tsx
  • Accepter props: data (Array de points), teamId (number)
  • Configurer les axes: X (temps -24h), Y (énergie 0-100)
  • Créer le graphique de ligne avec D3.js/Recharts
  • Utiliser shadcn/ui Card comme conteneur

• Implémenter l'interactivité (AC: #1)

  • Créer le système de tooltip sur hover
  • Afficher la valeur précise au point survolé
  • Afficher l'heure correspondante
  • Gérer le mobile tap
  • Utiliser shadcn/ui Tooltip

• Configurer la responsivité (AC: #2)

  • Adapter la taille du graphique à l'écran
  • Optimiser les labels pour mobile
  • Gérer le pinch to zoom si nécessaire
  • Optimiser les performances sur mobile
  • Tester sur différentes tailles d'écran

• Créer les tests du composant (Tous AC)

  • Tester avec des données d'énergie sur 24h
  • Tester l'affichage des axes
  • Tester l'interactivité hover/tap
  • Tester la responsivité (mobile/tablet/desktop)
  • Tester avec des données vides ou limitées

• Intégrer le composant dans les détails du match (AC: #1, #2)

  • Utiliser le composant dans MatchListItem (expanded view)
  • Passer les données d'énergie sur 24h
  • Vérifier la cohérence visuelle
  • Optimiser le chargement des données
  • Tester avec différents scénarios

Dev Notes

Stack Technique

• Visualisation: D3.js ou Recharts
• UI: shadcn/ui + Tailwind CSS
• Interactivité: React hooks

File Structure

src/components/dashboard/
├── EnergyWave.tsx
└── EnergyWaveTooltip.tsx

References

• [Source: _bmad-output/planning-artifacts/epics.md#Story-5.3]

Dev Agent Record

Agent Model Used

GLM-4.7

Completion Notes List

• D3.js et Recharts installés et configurés
• Composant EnergyWave créé avec Recharts pour une meilleure intégration React
• Visualisation interactive 24h avec graphique de ligne, axes X/Y et tooltips
• Composant EnergyWaveTooltip créé avec coloration dynamique basée sur le niveau d'énergie
• Responsivité implémentée avec ResponsiveContainer de Recharts
• Statistiques affichées (moyenne, max, min)
• Ligne de référence à 50 pour visualiser le seuil moyen
• Tests unitaires complets créés (EnergyWave: 14 tests, EnergyWaveTooltip: 12 tests)
• Intégration dans MatchListItem avec lazy loading pour optimisation
• Interface TypeScript avec types stricts pour EnergyDataPoint
• Support pour 24h de données d'énergie avec timestamps ISO 8601
• Tests MatchListItem mis à jour pour la nouvelle interface

Implementation Plan

1. Installer D3.js et Recharts pour la visualisation de données
2. Créer le composant principal EnergyWave avec Recharts pour simplifier l'intégration React
3. Implémenter l'interactivité avec tooltips personnalisés
4. Configurer la responsivité avec ResponsiveContainer
5. Créer des tests unitaires complets
6. Intégrer dans MatchListItem avec lazy loading

File List

• chartbastan/package.json (ajout des dépendances d3, @types/d3, recharts)
• chartbastan/src/components/dashboard/EnergyWave.tsx (nouveau)
• chartbastan/src/components/dashboard/EnergyWaveTooltip.tsx (nouveau)
• chartbastan/src/components/dashboard/MatchListItem.tsx (modifié: ajout prop energyData24h, lazy loading)
• chartbastan/src/tests/components/dashboard/EnergyWave.test.tsx (nouveau, 14 tests)
• chartbastan/src/tests/components/dashboard/EnergyWaveTooltip.test.tsx (nouveau, 12 tests)
• chartbastan/src/tests/match-list-item.test.tsx (modifié: mise à jour des tests pour nouvelle interface)

Change Log

• 2026-01-17: Implémentation complète du composant EnergyWave pour visualisation 24h
  • Installation de D3.js et Recharts
  • Création du composant EnergyWave avec graphique de ligne interactif
  • Création du composant EnergyWaveTooltip avec coloration dynamique
  • Implémentation de la responsivité
  • Création de tests unitaires complets
  • Intégration dans MatchListItem
  • Mise à jour des tests existants