<div class="col-12">
    <div class="card h-100">
        <div class="card-body">
            <?php if(sizeof(array_keys($leviers)) > 0): ?>
                <div class="chart-container" style="height:50%; width:100%">
                    <canvas id="leviers-projets-chart" width="100" height="50"></canvas>
                </div>
            <?php else: ?>
                <h5 class="card-title text-center font-weight-bold">Leviers d'optimisation</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($leviers)) > 0): ?>
            var ctx = $('#leviers-projets-chart');
            new Chart(ctx, {
                type: 'radar',
                data: {
                    datasets: [{
                        data: [<?php echo e(implode(',', array_values($leviers))); ?>],
                        backgroundColor: backgroundColor,
                        borderColor: borderColor,
                        borderWidth: 1
                    }],
                    labels: [<?php echo '"' . implode('","', array_keys($leviers)) . '"'; ?>]
                },
                options: {
                    title: {
                        display: true,
                        text: 'Leviers d\'optimisation',
                        fontSize: 18,
                        fontStyle: 'bold',
                        fontFamily: 'Nunito',
                        fontColor: '#222529'
                    },
                    legend: {
                        display: false
                    },
                    responsive: true,
                    plugins: {
                        datalabels: {
                            display: false,
                        }
                    }
                },
            });
        <?php endif; ?>
    })
</script>
<?php /**PATH /var/www/html/resources/views/home/GHT/charts/gestion-paat/projets-leviers.blade.php ENDPATH**/ ?>