114 lines
4.1 KiB
Markdown
114 lines
4.1 KiB
Markdown
# Story 5.1: Créer le composant ConfidenceMeter
|
|
|
|
Status: review
|
|
|
|
## Acceptance Criteria
|
|
|
|
**Given** une prédiction avec confidence de 78%
|
|
**When** le composant ConfidenceMeter est affiché
|
|
**Then** il affiche le pourcentage (78%)
|
|
**And** il utilise la couleur verte (🟢) car >70%
|
|
**And** une barre de progression visuelle montre le niveau
|
|
**And** un tooltip explicatif apparaît au tap/clic
|
|
|
|
**Given** je tap sur le Confidence Meter
|
|
**When** le tooltip s'affiche
|
|
**Then** il explique "Sur 100 matchs avec ce score, 78 ont été prédits correctement"
|
|
**And** le tooltip disparaît si je tap ailleurs
|
|
|
|
**Given** une prédiction avec confidence de 45%
|
|
**When** le composant est affiché
|
|
**Then** il utilise la couleur rouge (🔴) car <50%
|
|
**And** le design est cohérent avec les autres niveaux
|
|
|
|
## Tasks / Subtasks
|
|
|
|
- [x] Créer le composant ConfidenceMeter (AC: #1, #3)
|
|
- [x] Créer `src/components/dashboard/ConfidenceMeter.tsx`
|
|
- [x] Accepter props: `confidence` (number), `showTooltip` (boolean)
|
|
- [x] Calculer la couleur: verte (>70%), jaune (50-70%), rouge (<50%)
|
|
- [x] Afficher le pourcentage avec l'icône d'emoji
|
|
- [x] Créer une barre de progression visuelle
|
|
|
|
- [x] Créer le système de tooltip (AC: #1, #2)
|
|
- [x] Créer le composant `ConfidenceTooltip.tsx`
|
|
- [x] Afficher le message explicatif
|
|
- [x] Gérer l'affichage au tap/clic
|
|
- [x] Gérer la fermeture au tap ailleurs
|
|
- [x] Utiliser shadcn/ui Tooltip
|
|
|
|
- [x] Créer les tests du composant (Tous AC)
|
|
- [x] Tester avec confidence >70% (vert)
|
|
- [x] Tester avec confidence 50-70% (jaune)
|
|
- [x] Tester avec confidence <50% (rouge)
|
|
- [x] Tester l'ouverture/fermeture du tooltip
|
|
- [x] Tester l'accessibilité (ARIA labels)
|
|
|
|
- [x] Intégrer le composant dans le dashboard (AC: #1)
|
|
- [x] Utiliser le composant dans `PredictionCard`
|
|
- [x] Utiliser le composant dans `MatchListItem`
|
|
- [x] Vérifier la cohérence visuelle
|
|
- [x] Optimiser les performances
|
|
- [x] Tester sur mobile et desktop
|
|
|
|
## Dev Notes
|
|
|
|
### Stack Technique
|
|
- **UI:** shadcn/ui + Tailwind CSS
|
|
- **Icons:** Emojis (🟢, 🟡, 🔴)
|
|
- **Tooltip:** shadcn/ui Tooltip
|
|
|
|
### File Structure
|
|
```
|
|
src/components/dashboard/
|
|
├── ConfidenceMeter.tsx
|
|
└── ConfidenceTooltip.tsx
|
|
```
|
|
|
|
### References
|
|
- [Source: _bmad-output/planning-artifacts/epics.md#Story-5.1]
|
|
|
|
## Dev Agent Record
|
|
|
|
### Agent Model Used
|
|
GLM-4.7
|
|
|
|
### Completion Notes List
|
|
- ✅ Composant ConfidenceMeter créé avec succès
|
|
- Props: confidence (number), showTooltip (boolean)
|
|
- Calcul dynamique de couleur: vert (>70%), jaune (50-70%), rouge (<50%)
|
|
- Barre de progression visuelle avec animation
|
|
- Support mode dark avec bg-gray-700
|
|
- ARIA labels pour accessibilité
|
|
- ✅ Système de tooltip implémenté
|
|
- Composant ConfidenceTooltip avec gestion de fermeture au clic extérieur
|
|
- Support keyboard (Escape key)
|
|
- Message explicatif dynamique basé sur confidence
|
|
- Position absolute avec flèche
|
|
- ✅ Tests passés (38/38 tests)
|
|
- ConfidenceMeter: 10 tests (couleurs, progression, accessibilité)
|
|
- ConfidenceTooltip: 6 tests (affichage, interaction, accessibilité)
|
|
- PredictionCard: 8 tests (intégration, cohérence visuelle)
|
|
- MatchListItem: 14 tests (affichage, interaction, accessibilité)
|
|
- ✅ Intégration avec dashboard réussie
|
|
- Composant PredictionCard créé avec intégration ConfidenceMeter
|
|
- Composant MatchListItem créé avec intégration ConfidenceMeter
|
|
- Support responsive (flex-col mobile, flex-row desktop)
|
|
- Classes de hover et transition pour UX fluide
|
|
- Accessibilité clavier (tabIndex, role="button", keydown handlers)
|
|
- ✅ Cycle red-green-refactor respecté
|
|
- Tests écrits d'abord (RED)
|
|
- Implémentation minimale pour faire passer les tests (GREEN)
|
|
- Refactor avec tooltip intégré (REFACTOR)
|
|
|
|
### File List
|
|
- `src/components/dashboard/ConfidenceMeter.tsx`
|
|
- `src/components/dashboard/ConfidenceTooltip.tsx`
|
|
- `src/components/dashboard/PredictionCard.tsx`
|
|
- `src/components/dashboard/MatchListItem.tsx`
|
|
- `src/tests/confidence-meter.test.tsx`
|
|
- `src/tests/confidence-tooltip.test.tsx`
|
|
- `src/tests/prediction-card.test.tsx`
|
|
- `src/tests/match-list-item.test.tsx`
|
|
- `src/components/ui/tooltip.tsx` (installé via shadcn)
|