// Chart.js minimal pour 4NK Notariat window.Chart = class Chart { constructor(ctx, config) { 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 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) => { ctx.fillStyle = colors[index % colors.length]; ctx.fillRect(10, legendY, 15, 15); ctx.fillStyle = '#333'; ctx.font = '12px Arial'; ctx.fillText(label, 30, legendY + 12); 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 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; ctx.beginPath(); ctx.moveTo(padding, padding); 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'; ctx.textAlign = 'center'; labels.forEach((label, index) => { const x = padding + (index / (values.length - 1)) * chartWidth; 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(); } } }; // Simuler les options globales window.Chart.defaults = { responsive: true, maintainAspectRatio: false };