document.addEventListener("DOMContentLoaded", function() {
    if (typeof Chart === 'undefined') return;

    const chartElements = document.querySelectorAll('.preciousuite-mrc-chart-canvas');
    
    chartElements.forEach(canvas => {
        const ctx = canvas.getContext('2d');
        const labels = JSON.parse(canvas.dataset.labels || '[]');
        const values = JSON.parse(canvas.dataset.values || '[]');

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    data: values,
                    borderWidth: 3,
                    fill: true,
                    tension: 0.4,
                    borderColor: '#3498db',
                    backgroundColor: 'rgba(52, 152, 219, 0.2)'
                }]
            },
            options: {
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    });
});
