<div class="col-6">
    <div class="card h-100">
        <div class="card-body">
            <?php if(sizeof(array_keys($enjeux_efforts)) > 0): ?>
                <div class="chart-container" style="height:100%; width:100%">
                    <canvas id="enjeux-efforts-chart" width="400" height="400"></canvas>
                </div>
            <?php else: ?>
                <h5 class="card-title text-center font-weight-bold">Cartographie des projets - Matrice enjeux/efforts</h5>
                <p class="card-text">Pas de données disponible.</p>
            <?php endif; ?>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        <?php if(sizeof(array_keys($enjeux_efforts)) > 0): ?>
            var data = <?php echo json_encode(array_values($enjeux_efforts)); ?>;
            var xmax = Math.ceil(Math.max.apply(Math, data.map(function(o) { return o.x; })));
            xmax = xmax === 0 ? 1 : xmax; // Si l'axe des x a 0 pour max, on le set à 1
            var ymax = Math.max.apply(Math, data.map(function(o) { return o.y; }));
            ymax = ymax === 0 ? 1 : ymax; // Si l'axe des y a 0 pour max, on le set à 1
            new Chart($('#enjeux-efforts-chart'), {
                type: 'scatter',
                data: {
                    datasets: [{
                        data: data,
                        pointBackgroundColor: backgroundColor[0],
                        pointBorderColor: borderColor[0],
                        pointHoverBackgroundColor: backgroundColor[0],
                        pointHoverBorderColor: borderColor[0],
                        borderColor: borderColor[0],
                    },{
                        data: [{
                            x: 0,
                            y: 0
                        }, {
                            x: xmax,
                            y: ymax / 2
                        }],
                        type: 'line',
                        fill: false,
                        pointBackgroundColor: "rgba(217, 0, 0, 0.6)",
                        pointBorderColor: "rgb(217, 0, 0)",
                        pointHoverBackgroundColor: "rgba(217, 0, 0, 0.6)",
                        pointHoverBorderColor: "rgb(217, 0, 0)",
                        borderColor: "rgb(217, 0, 0)"
                    },{
                        data: [{
                            x: 0,
                            y: 0
                        }, {
                            x: xmax / 2,
                            y: ymax
                        }],
                        type: 'line',
                        fill: false,
                        pointBackgroundColor: "rgba(0, 196, 79, 0.6)",
                        pointBorderColor: "rgb(0, 196, 79)",
                        pointHoverBackgroundColor: "rgba(0, 196, 79, 0.6)",
                        pointHoverBorderColor: "rgb(0, 196, 79)",
                        borderColor: "rgb(0, 196, 79)"
                    }],
                    labels: [<?php echo '"' . implode('","', array_keys($enjeux_efforts)) . '"'; ?>]
                },
                options: {
                    title: {
                        display: true,
                        text: 'Cartographie des projets - Matrice enjeux/efforts',
                        fontSize: 18,
                        fontStyle: 'bold',
                        fontFamily: 'Nunito',
                        fontColor: '#222529'
                    },
                    legend: {
                        display: false
                    },
                    tooltips: {
                        filter: function (tooltipItem) {
                            return tooltipItem.datasetIndex === 0; // Affiche le tooltip que sur le premier dataset
                        },
                        callbacks: {
                            label: function(tooltipItem, data) {
                                return data.labels[tooltipItem.index] + ': (' + tooltipItem.xLabel + ', ' + tooltipItem.yLabel + ')';
                            }
                        }
                    },
                    responsive: true,
                    scales: {
                        xAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: 'Efforts (en jours)'
                            },
                            ticks: {
                                beginAtZero: true,
                                max: xmax
                            },
                        }],
                        yAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: 'Gains cibles (en euros)'
                            },
                            ticks: {
                                beginAtZero: true,
                                max: ymax
                            },
                        }]
                    },
                    plugins: {
                        datalabels: {
                            display: false
                        }
                    }
                }
            });
        <?php endif; ?>
    })
</script>
<?php /**PATH /var/www/html/resources/views/home/GHT/charts/gestion-paat/enjeux-efforts.blade.php ENDPATH**/ ?>