document.addEventListener('DOMContentLoaded', function () {
    var loader = document.getElementById('cass_dashboard');

    if (loader) {
        new Vue({
            el: '#cass_dashboard',
            data() {
                return {
                    cass_state_data: {
                        labels: ["Brouillon", "Ouverte", "Confirmée", "Terminée", "Annulée"],
                        datasets: [
                            {
                                data: [12, 19, 3, 5, 2],
                                borderWidth: 1,
                            },
                        ],
                    },

                    chartData: {
                        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                        datasets: [
                            {
                                label: "# de Votes",
                                data: [12, 19, 3, 5, 2, 3],
                                borderWidth: 1,
                            },
                        ],
                    },
                    chartOptions: {
                        plugins: {
                            title: {
                                display: true,
                                text: 'Titre du graphique'
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                            },
                        },
                    },
                };
            },
            mounted() {
                const chart_cass_state_date = document.getElementById('chart_race_state').getContext('2d');
                const ctx2 = document.getElementById('chart2').getContext('2d');
                const ctx3 = document.getElementById('chart3').getContext('2d');
                const ctx4 = document.getElementById('chart4').getContext('2d');
                const ctx5 = document.getElementById('chart5').getContext('2d');
                const ctx6 = document.getElementById('chart6').getContext('2d');
                const ctx7 = document.getElementById('chart7').getContext('2d');
                const ctx8 = document.getElementById('chart8').getContext('2d');

                new Chart(chart_cass_state_date, {
                    title: 'Etats généraux des courses',
                    type: 'doughnut',
                    data: this.cass_state_data,
                    options: {
                        plugins: {
                            title: {
                                display: true,
                                text: 'Etat des courses'
                            }
                        }
                    }
                });
                new Chart(ctx2, {
                    type: 'bubble',
                    data: this.chartData,
                    options: this.chartOptions,
                });
                new Chart(ctx3, {
                    type: 'doughnut',
                    data: this.chartData,
                    options: this.chartOptions,
                });
                new Chart(ctx4, {
                    type: 'line',
                    data: this.chartData,
                    options: this.chartOptions,
                });
                new Chart(ctx5, {
                    type: 'line',
                    data: this.chartData,
                    options: this.chartOptions,
                });
                new Chart(ctx6, {
                    type: 'pie',
                    data: this.chartData,
                    options: this.chartOptions,
                });
                new Chart(ctx7, {
                    type: 'radar',
                    data: this.chartData,
                    options: this.chartOptions,
                });
                new Chart(ctx8, {
                    type: 'line',
                    data: this.chartData,
                    options: this.chartOptions,
                });


            },
        });
    }
});
