add js

dashboard.js

@@ -1,15 +1,16 @@
+/* global Chart */  // Permet à l'IDE de reconnaître Chart.js
+
 // -------------------------------
-// 1 - Sélection des widgets
+// 1️⃣ Sélection des widgets
 // -------------------------------
 const climat = document.querySelector('.widget.climat');
 const securite = document.querySelector('.widget.securite');
 const energie = document.querySelector('.widget.energie');
 const lumiere = document.querySelector('.widget.lumiere');
-const graphiques = document.querySelector('.widget.graphiques');
 const alertes = document.querySelector('.widget.alertes');
 
 // -------------------------------
-// 2 - Hover dynamique sur les widgets
+// 2️⃣ Hover dynamique sur les widgets
 // -------------------------------
 function setupHover(widget, colorNormal, colorHover) {
     widget.addEventListener('mouseenter', () => {
@@ -20,63 +21,51 @@ function setupHover(widget, colorNormal, colorHover) {
     });
 }
 
-// Appliquer le hover sur chaque widget
 setupHover(climat, '#ADD8E6', '#87CEEB');
 setupHover(securite, '#D3D3D3', '#C0C0C0');
 setupHover(energie, '#FFFACD', '#FAFAD2');
 setupHover(lumiere, '#F5F5DC', '#FFF8DC');
 
 // -------------------------------
-// 3 - Simulation d'alerte visuelle
+// 3️⃣ Simulation d'alerte visuelle
 // -------------------------------
 function showAlert(widget) {
-    widget.classList.add('alert'); // contour rouge
-}
-
-function hideAlert(widget) {
-    widget.classList.remove('alert'); // retire le contour rouge
+    widget.classList.add('alert');
 }
 
 // Exemple : activer l'alerte sur climat
 showAlert(climat);
 
-// Le bloc Alertes reste visible
+// Le bloc alertes reste visible
 alertes.style.display = 'block';
 
 // -------------------------------
-// 4 - Préparer la zone graphique vide
+// 4️⃣ Graphique Chart.js
 // -------------------------------
 const canvasTemp = document.getElementById('graph-temp');
-if (canvasTemp) {
+if(canvasTemp) {
     const ctx = canvasTemp.getContext('2d');
-    const myChart = new Chart(ctx, {
+    new Chart(ctx, {
         type: 'line',
         data: {
-            labels: [],   // vide pour l'instant
+            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
             datasets: [{
                 label: 'Température',
-                data: [],   // vide pour l'instant
+                data: [20, 22, 19, 23, 21],
                 borderColor: 'blue',
+                backgroundColor: 'rgba(173,216,230,0.2)',
                 tension: 0.4
             }]
         },
         options: {
             responsive: true,
             plugins: {
-                legend: { display: false }
+                legend: { display: true }
             },
             scales: {
-                x: { display: false },
-                y: { display: false }
+                x: { display: true, title: { display: true, text: 'Mois' } },
+                y: { display: true, title: { display: true, text: '°C' } }
             }
         }
     });
-}
-
-// -------------------------------
-// 5 - Fonction de mise à jour future
-// -------------------------------
-function majWidget(widget, valeur) {
-    // futur code pour mettre à jour le widget avec de vraies données
-    // exemple : climat.querySelector('p').innerText = "Température : " + valeur + "°C";
 }