fix: Correction erreur 'canvas is not defined' dans chart.min.js

- Ajout de 'const canvas = this.ctx' dans drawDoughnutChart
- Ajout de 'const canvas = this.ctx' dans drawLineChart
- Correction de la référence à la variable canvas dans les méthodes
- Résolution de l'erreur ReferenceError lors du rendu des graphiques

services/web_interface/chart.min.js

@@ -4,55 +4,56 @@ window.Chart = class Chart {
         this.ctx = ctx;
         this.config = config;
         this.destroyed = false;
-        
+
         // Créer un canvas simple si Chart.js n'est pas disponible
         this.createSimpleChart();
     }
-    
+
     createSimpleChart() {
         if (this.destroyed) return;
-        
+
         const canvas = this.ctx;
         const ctx = canvas.getContext('2d');
         const config = this.config;
-        
+
         // Effacer le canvas
         ctx.clearRect(0, 0, canvas.width, canvas.height);
-        
+
         if (config.type === 'doughnut') {
             this.drawDoughnutChart(ctx, config);
         } else if (config.type === 'line') {
             this.drawLineChart(ctx, config);
         }
     }
-    
+
     drawDoughnutChart(ctx, config) {
         const data = config.data;
         const labels = data.labels || [];
         const values = data.datasets[0].data || [];
         const colors = data.datasets[0].backgroundColor || ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF'];
         
+        const canvas = this.ctx;
         const centerX = canvas.width / 2;
         const centerY = canvas.height / 2;
         const radius = Math.min(centerX, centerY) - 20;
-        
+
         const total = values.reduce((sum, val) => sum + val, 0);
         let currentAngle = 0;
-        
+
         // Dessiner les segments
         values.forEach((value, index) => {
             const sliceAngle = (value / total) * 2 * Math.PI;
-            
+
             ctx.beginPath();
             ctx.moveTo(centerX, centerY);
             ctx.arc(centerX, centerY, radius, currentAngle, currentAngle + sliceAngle);
             ctx.closePath();
             ctx.fillStyle = colors[index % colors.length];
             ctx.fill();
-            
+
             currentAngle += sliceAngle;
         });
-        
+
         // Dessiner la légende
         let legendY = 20;
         labels.forEach((label, index) => {
@@ -64,21 +65,22 @@ window.Chart = class Chart {
             legendY += 20;
         });
     }
-    
+
     drawLineChart(ctx, config) {
         const data = config.data;
         const labels = data.labels || [];
         const values = data.datasets[0].data || [];
         const color = data.datasets[0].borderColor || '#007bff';
         
+        const canvas = this.ctx;
         const padding = 40;
         const chartWidth = canvas.width - 2 * padding;
         const chartHeight = canvas.height - 2 * padding;
-        
+
         const maxValue = Math.max(...values);
         const minValue = Math.min(...values);
         const valueRange = maxValue - minValue || 1;
-        
+
         // Dessiner les axes
         ctx.strokeStyle = '#ddd';
         ctx.lineWidth = 1;
@@ -87,36 +89,36 @@ window.Chart = class Chart {
         ctx.lineTo(padding, canvas.height - padding);
         ctx.lineTo(canvas.width - padding, canvas.height - padding);
         ctx.stroke();
-        
+
         // Dessiner la ligne
         ctx.strokeStyle = color;
         ctx.lineWidth = 2;
         ctx.beginPath();
-        
+
         values.forEach((value, index) => {
             const x = padding + (index / (values.length - 1)) * chartWidth;
             const y = canvas.height - padding - ((value - minValue) / valueRange) * chartHeight;
-            
+
             if (index === 0) {
                 ctx.moveTo(x, y);
             } else {
                 ctx.lineTo(x, y);
             }
         });
-        
+
         ctx.stroke();
-        
+
         // Dessiner les points
         ctx.fillStyle = color;
         values.forEach((value, index) => {
             const x = padding + (index / (values.length - 1)) * chartWidth;
             const y = canvas.height - padding - ((value - minValue) / valueRange) * chartHeight;
-            
+
             ctx.beginPath();
             ctx.arc(x, y, 4, 0, 2 * Math.PI);
             ctx.fill();
         });
-        
+
         // Dessiner les labels
         ctx.fillStyle = '#333';
         ctx.font = '10px Arial';
@@ -126,14 +128,14 @@ window.Chart = class Chart {
             ctx.fillText(label, x, canvas.height - 10);
         });
     }
-    
+
     destroy() {
         this.destroyed = true;
         if (this.ctx && this.ctx.clearRect) {
             this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
         }
     }
-    
+
     update() {
         if (!this.destroyed) {
             this.createSimpleChart();