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

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

    const labels = ["2021-12-31","2022-12-31","2023-12-31","2024-12-31","2025-12-31"];

    const evEbitdaValues =
        [107.39058077922078382471227087080478668212890625,21.24077702894036434599911444820463657379150390625,52.8336226007028955109490198083221912384033203125,87.609496872450364435280789621174335479736328125,122.5952057123427465512577327899634838104248046875];

    const peValues =
        [188.374331550802111223674728535115718841552734375,30.641791044776123698056835564784705638885498046875,52.53276955602536446576777962036430835723876953125,181.0779302304725888461689464747905731201171875,381.11864406779665159774594940245151519775390625];

    const psValues =
        [19.366020846106682284926137072034180164337158203125,4.73292332621344957743758641299791634082794189453125,8.1484637243859339150731102563440799713134765625,13.216055686354795994930100277997553348541259765625,15.2946629124616411132819848717190325260162353515625];

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

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

    new Chart(ctx, {
        type: 'line',

        data: {
            labels: labels,

            datasets: [
                {
                    label: 'EV/EBITDA',
                    data: evEbitdaValues,
                    borderColor: '#ef6f6c',
                    backgroundColor: '#ef6f6c',
                    borderWidth: 2,
                    pointRadius: 3,
                    pointHoverRadius: 5,
                    tension: 0.25,
                    spanGaps: true
                },
                {
                    label: 'P/E',
                    data: peValues,
                    borderColor:
                        'rgba(255, 255, 255, 0.75)',
                    backgroundColor:
                        'rgba(255, 255, 255, 0.75)',
                    borderWidth: 2,
                    pointRadius: 3,
                    pointHoverRadius: 5,
                    tension: 0.25,
                    spanGaps: true
                },
                {
                    label: 'P/S',
                    data: psValues,
                    borderColor:
                        'rgba(255, 255, 255, 0.30)',
                    backgroundColor:
                        'rgba(255, 255, 255, 0.30)',
                    borderWidth: 2,
                    pointRadius: 3,
                    pointHoverRadius: 5,
                    tension: 0.25,
                    spanGaps: true
                }
            ]
        },

        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: {
                mode: 'index',
                intersect: false
            },

            plugins: {
                title: {
                    display: false
                },

                legend: {
                    display: true,
                    position: 'bottom',

                    labels: {
                        color:
                            'rgba(255, 255, 255, 0.75)',
                        usePointStyle: true,
                        pointStyle: 'circle',
                        padding: 20
                    }
                },

                tooltip: {
                    enabled: true,

                    callbacks: {
                        label: function (context) {
                            const value = context.parsed.y;

                            if (value === null) {
                                return (
                                    context.dataset.label +
                                    ': N/A'
                                );
                            }

                            return (
                                context.dataset.label +
                                ': ' +
                                value.toFixed(2) +
                                'x'
                            );
                        }
                    }
                }
            },

            scales: {
                x: {
                    grid: {
                        display: false
                    },

                    border: {
                        display: false
                    },

                    ticks: {
                        color:
                            'rgba(255, 255, 255, 0.65)',
                        maxRotation: 0,
                        autoSkip: true
                    }
                },

                y: {
                    beginAtZero: true,

                    grid: {
                        color:
                            'rgba(255, 255, 255, 0.08)'
                    },

                    border: {
                        display: false
                    },

                    ticks: {
                        color:
                            'rgba(255, 255, 255, 0.65)',

                        callback: function (value) {
                            return value + 'x';
                        }
                    }
                }
            },

            layout: {
                padding: 10
            }
        },

        plugins: [{
            id: 'interFont',

            beforeInit: function () {
                Chart.defaults.font.family =
                    "'Inter', sans-serif";
            }
        }]
    });
});