125 lines
5.0 KiB
Markdown
125 lines
5.0 KiB
Markdown
# 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
|