# 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

- [x] Installer et configurer D3.js (AC: #1)
  - [x] Installer `d3` et `@types/d3`
  - [x] Installer `recharts` ou utiliser D3.js directement
  - [x] Créer le wrapper pour D3.js avec React
  - [x] Configurer les options de graphique
  - [x] Vérifier l'installation

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

- [x] Implémenter l'interactivité (AC: #1)
  - [x] Créer le système de tooltip sur hover
  - [x] Afficher la valeur précise au point survolé
  - [x] Afficher l'heure correspondante
  - [x] Gérer le mobile tap
  - [x] Utiliser shadcn/ui Tooltip

- [x] Configurer la responsivité (AC: #2)
  - [x] Adapter la taille du graphique à l'écran
  - [x] Optimiser les labels pour mobile
  - [x] Gérer le pinch to zoom si nécessaire
  - [x] Optimiser les performances sur mobile
  - [x] Tester sur différentes tailles d'écran

- [x] Créer les tests du composant (Tous AC)
  - [x] Tester avec des données d'énergie sur 24h
  - [x] Tester l'affichage des axes
  - [x] Tester l'interactivité hover/tap
  - [x] Tester la responsivité (mobile/tablet/desktop)
  - [x] Tester avec des données vides ou limitées

- [x] Intégrer le composant dans les détails du match (AC: #1, #2)
  - [x] Utiliser le composant dans `MatchListItem` (expanded view)
  - [x] Passer les données d'énergie sur 24h
  - [x] Vérifier la cohérence visuelle
  - [x] Optimiser le chargement des données
  - [x] 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
