<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sales Growth per Consumer</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>

<canvas id="salesGrowthChart" width="400" height="200"></canvas>

<script>
    const ctx = document.getElementById('salesGrowthChart').getContext('2d');

    // Data preparation
    const salesData = <?php echo json_encode($sales_growth); ?>;

    const labels = [...new Set(salesData.map(item => item.bulan))];
    const konsumenNames = [...new Set(salesData.map(item => item.konsumen))];

    const datasets = konsumenNames.map(konsumen => {
        return {
            label: konsumen,
            data: labels.map(label => {
                const entry = salesData.find(item => item.bulan === label && item.konsumen === konsumen);
                return entry ? entry.total_sales : 0; // If no sales, return 0
            }),
            borderColor: getRandomColor(),
            fill: false
        };
    });

    const salesGrowthChart = new Chart(ctx, {
        type: 'line', // or 'bar', etc.
        data: {
            labels: labels,
            datasets: datasets
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    function getRandomColor() {
        const letters = '0123456789ABCDEF';
        let color = '#';
        for (let i = 0; i < 6; i++) {
            color += letters[Math.floor(Math.random() * 16)];
        }
        return color;
    }
</script>

</body>
</html>
