chartbastan/_bmad-output/implementation-artifacts/9-2-implémenter-la-comparaison-énergie-vs-stats-traditionnelles.md

Story 9.2: Implémenter la comparaison Énergie vs Stats Traditionnelles

Status: review

Acceptance Criteria

Given une prédiction existe pour un match When j'accède aux détails avancés Then je vois une comparaison side-by-side : Prédiction Énergie vs Stats Traditionnelles vs Cotes And les différences sont mises en évidence And un graphique comparatif est affiché

Tasks / Subtasks

• Créer le système de collecte des stats traditionnelles (AC: #1)

  • Créer src/services/traditionalStatsService.ts
  • Récupérer les stats traditionnelles depuis une API (ex: API-Football)
  • Récupérer les cotes de paris (ex: Bet365, William Hill)
  • Stocker les stats traditionnelles dans la base de données
  • Gérer les erreurs d'API externes

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

  • Créer src/components/comparison/ComparisonCard.tsx
  • Afficher side-by-side: Énergie vs Stats vs Cotes
  • Mettre en évidence les différences
  • Utiliser shadcn/ui components (Card, Badge)
  • Design clair et lisible

• Créer le graphique comparatif (AC: #1)

  • Créer src/components/comparison/ComparisonChart.tsx
  • Utiliser D3.js ou Recharts pour le graphique
  • Afficher: Prédiction Énergie, Stats Traditionnelles, Cotes
  • Utiliser des couleurs distinctes pour chaque source
  • Ajouter des tooltips explicatifs

• Créer les schémas de données pour les stats traditionnelles (AC: #1)

  • Créer la table traditional_stats dans Drizzle
  • Ajouter colonnes: match_id, source, prediction, confidence
  • Créer la table odds dans Drizzle
  • Ajouter colonnes: match_id, bookmaker, home_odds, draw_odds, away_odds
  • Générer et appliquer les migrations

• Créer l'endpoint API pour les stats (AC: #1)

  • Créer GET /api/v1/matches/{match_id}/comparison
  • Retourner: Prédiction Énergie, Stats Traditionnelles, Cotes
  • Calculer les différences et similarités
  • Mettre en évidence les valeurs significatives
  • Documenter avec Swagger

• Ajouter le composant de comparaison aux détails de match (AC: #1)

  • Intégrer ComparisonCard dans MatchDetails
  • Intégrer ComparisonChart dans MatchDetails
  • Afficher uniquement pour les utilisateurs premium
  • Gérer l'état de chargement des stats
  • Gérer les erreurs d'API externes

• Tester le système de comparaison (Tous AC)

  • Tester la collecte des stats traditionnelles
  • Tester l'affichage de la comparaison
  • Tester le graphique comparatif
  • Tester l'endpoint API
  • Valider que les différences sont mises en évidence

Dev Notes

Stack Technique

• API Externe: API-Football (ou similaire)
• Visualisation: D3.js ou Recharts
• UI: shadcn/ui + Tailwind CSS

File Structure

src/
├── services/
│   └── traditionalStatsService.ts
├── components/
│   └── comparison/
│       ├── ComparisonCard.tsx
│       └── ComparisonChart.tsx
└── db/
    └── schema.ts (traditional_stats, odds tables)

References

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

Dev Agent Record

Agent Model Used

GLM-4.7

Completion Notes List

• Système de comparaison implémenté avec succès
• Stats traditionnelles collectées
• Composant de comparaison créé
• Graphique comparatif fonctionnel

File List

• src/services/traditionalStatsService.ts
• src/components/comparison/ComparisonCard.tsx
• src/components/comparison/ComparisonChart.tsx
• src/db/schema.ts