feat: add score histo

docs/frontend/CLASS_DASHBOARD.md

@@ -1,8 +1,9 @@
 # ⚡ **Documentation Frontend - Class Dashboard**
 
 > **Architecture JavaScript et Interface Utilisateur pour la page de présentation de classe**  
-> Version : 2.0 - Janvier 2025  
-> Expertise : JavaScript-Pro
+> Version : 2.1 - Août 2025  
+> Expertise : JavaScript-Pro  
+> **Nouveauté** : Histogramme Chart.js des moyennes des élèves 📊
 
 ---
 
@@ -119,6 +120,72 @@ Le frontend du Class Dashboard implémente une **architecture JavaScript moderne
 
 ---
 
+## 📊 **Nouveauté : Histogramme des Moyennes Chart.js**
+
+### **Integration Chart.js**
+**Nouvelle méthode `updateStudentAveragesChart()` :**
+- **Librairie** : Chart.js via CDN
+- **Type** : Graphique en barres (`type: 'bar'`)
+- **Canvas** : Element `#studentAveragesChart` dans la card résultats
+- **Gestion lifecycle** : Destruction/recréation automatique
+
+```javascript
+updateStudentAveragesChart(distribution) {
+    const canvas = document.getElementById('studentAveragesChart');
+    
+    // Gestion des données vides
+    const hasData = distribution && distribution.length > 0 && 
+                   distribution.some(item => item.count > 0);
+    
+    if (!hasData) {
+        // Affichage message "Aucune donnée disponible"
+        return;
+    }
+    
+    // Création Chart.js avec configuration optimisée
+    this.studentAveragesChart = new Chart(canvas, {
+        type: 'bar',
+        data: {
+            labels: distribution.map(item => item.range),
+            datasets: [{
+                data: distribution.map(item => item.count),
+                backgroundColor: 'rgba(251, 146, 60, 0.8)'  // Orange cohérent
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            animation: { duration: 800 }
+        }
+    });
+}
+```
+
+### **Configuration Visuelle**
+**Palette de couleurs cohérente :**
+- **Barres** : `rgba(251, 146, 60, 0.8)` - Orange avec transparence
+- **Bordures** : `rgba(251, 146, 60, 1)` - Orange plein
+- **Grille** : `rgba(251, 146, 60, 0.1)` - Orange subtil
+
+**Interactions utilisateur :**
+- **Tooltips personnalisés** : Format "X élève(s)" avec contexte
+- **Responsive design** : S'adapte aux contraintes parent (h-32)
+- **Animations fluides** : 800ms avec easing `easeInOutCubic`
+
+### **Gestion du Cycle de Vie**
+**Memory management :**
+- **Instance tracking** : `this.studentAveragesChart` pour référence
+- **Destruction propre** : `.destroy()` avant recréation
+- **Cleanup automatique** : Nettoyage dans `destroy()` de la classe
+
+### **Integration au Workflow**
+**Déclenchement automatique :**
+- Appelée depuis `updateResultsCard()` 
+- Se met à jour lors des changements de trimestre
+- Données fournies par l'API backend enrichie
+
+---
+
 ## 🔄 **Gestion d'État et Navigation**
 
 ### **URL Synchronization**