document.addEventListener('DOMContentLoaded', function () {
    const canvas = document.getElementById('revenueBySegmentChart');

    if (!canvas || typeof Chart === 'undefined') {
        return;
    }

    const labels = ["Automotive","Energy Generation And Storage Segment","Services And Other"];
    const revenueDollarValues = [69526000000,12771000000,12530000000];

    if (labels.length === 0 || revenueDollarValues.length === 0) {
        return;
    }

    const ctx = canvas.getContext('2d');

    const colors = labels.map((label, index) => {
        if (index === 0) {
            return '#ef6f6c';
        }

        const opacity = Math.max(0.15, 1 / (index + 1));

        return `rgba(255, 255, 255, ${opacity})`;
    });

    const offsets = labels.map(() => 3);

const revenueChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: labels,
        datasets: [{
            data: revenueDollarValues,
            backgroundColor: colors,
            borderWidth: 0,
            offset: offsets,
            hoverOffset: 6
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        cutout: '65%',
        plugins: {
            title: {
                display: false
            },
            legend: {
                display: false
            },
            tooltip: {
                enabled: true
            }
        },
        layout: {
            padding: 10
        },
        elements: {
            arc: {
                borderWidth: 0
            }
        }
    },
    plugins: [{
        id: 'interFont',
        beforeInit: function () {
            Chart.defaults.font.family = "'Inter', sans-serif";
        }
    }]
});

setTimeout(function () {
    const firstSegment = revenueChart.getDatasetMeta(0).data[0];

    if (!firstSegment) {
        return;
    }

    const position = firstSegment.tooltipPosition();

    revenueChart.setActiveElements([
        {
            datasetIndex: 0,
            index: 0
        }
    ]);

    revenueChart.tooltip.setActiveElements(
        [
            {
                datasetIndex: 0,
                index: 0
            }
        ],
        position
    );

    revenueChart.update('none');
}, 100);
});