<div>
    <h3>Pendapatan per Channel</h3>
    <flux:card class="mb-6 mt-2 bg-zinc-200 dark:bg-zinc-700">
        <canvas id="channelRevenueChart" width="400" height="200"></canvas>
    </flux:card>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
    <script>
        document.addEventListener('livewire:navigated', function() {
            var ctx = document.getElementById('channelRevenueChart').getContext('2d');
            var channelRevenueChart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: @json($channels),
                    datasets: [{
                        // label: 'Rp',
                        data: @json($revenues),
                        backgroundColor: @json($backgroundColors),
                        borderColor: @json($borderColors),
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    legend: {
                        display: false
                    }
                }
            });
        });
    </script>
</div>
