<h1 class="mb-5"><?php echo e($name); ?>

    <i class="fas fa-info-circle text-primary fa-xs" data-toggle="tooltip"
       title="Vous pouvez réaliser des zooms avec la molette de la souris ou avec le pad clavier"></i>
</h1>
<?php if($verif): ?>
    <?php if (isset($component)) { $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4 = $component; } ?>
<?php $component = $__env->getContainer()->make(Illuminate\View\AnonymousComponent::class, ['view' => 'components.noData','data' => []]); ?>
<?php $component->withName('noData'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes([]); ?>
<?php if (isset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4)): ?>
<?php $component = $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4; ?>
<?php unset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4); ?>
<?php endif; ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>
<?php else: ?>
    <canvas width="600" id="Taux_couverture_achat"></canvas>
    <?php if (isset($component)) { $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4 = $component; } ?>
<?php $component = $__env->getContainer()->make(Illuminate\View\AnonymousComponent::class, ['view' => 'components.saveAsPdf','data' => ['canvasId' => 'Taux_couverture_achat','pdfName' => 'Taux de couverture des achats sur marché et hors marché par famille achat en MONTANT HT']]); ?>
<?php $component->withName('saveAsPdf'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes(['canvasId' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute('Taux_couverture_achat'),'pdfName' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute('Taux de couverture des achats sur marché et hors marché par famille achat en MONTANT HT')]); ?>
<?php if (isset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4)): ?>
<?php $component = $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4; ?>
<?php unset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4); ?>
<?php endif; ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>


    <script>
        const renderPurchaseCoverageRateChart = () => {
            let purchaseCoverageRate = <?php echo json_encode($purchaseCoverageRate ?? ''); ?>;

            let labels = purchaseCoverageRate.flatMap(purchase => purchase.segment);
            let purchaseCoverageRateInMarket = purchaseCoverageRate.flatMap(purchase => purchase.marche);
            let purchaseCoverageRateOffMarket = purchaseCoverageRate.flatMap(purchase => purchase.hors_marche);

            let purchaseCoverageRateChart = document.getElementById('Taux_couverture_achat');

            return new Chart(purchaseCoverageRateChart, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: 'Dans le marché',
                            data: purchaseCoverageRateInMarket,
                            backgroundColor: 'rgba(0, 123, 255, 0.2)',
                            borderColor: 'rgba(0, 123, 255, 1)',
                            borderWidth: 1
                        },
                        {
                            label: 'Hors marché',
                            data: purchaseCoverageRateOffMarket,
                            backgroundColor: 'rgba(220, 53, 69, 0.2)',
                            borderColor: 'rgba(220, 53, 69, 1)',
                            borderWidth: 1
                        }
                    ]
                },
                options: {
                    responsive: true,
                    scales: {
                        x: {
                            stacked: true,
                        },
                        y: {
                            stacked: true,
                        }
                    },
                    layout: {
                        padding: 40
                    },
                    plugins: {
                        datalabels: {
                            formatter: (value) => {
                                if (value === 0) {
                                    return '';
                                }
                                return value.toLocaleString('fr-FR') + " €";
                            },
                            font: {
                                size: 14,
                            },
                            display: false,
                        },
                        tooltip: {
                            callbacks: {
                                label: function (context) {
                                    var label = context.dataset.label || '';
                                    var value = context.parsed.y;
                                    if (context.parsed.y !== null) {
                                        label += ': ' + value.toLocaleString('fr-FR') + " €";
                                    }
                                    return label;
                                }
                            }
                        },
                        zoom: {
                            zoom: {
                                wheel: {
                                    enabled: true,
                                },
                                pinch: {
                                    enabled: true
                                },
                                mode: 'x',
                            }
                        }
                    },
                }
            });
        }

        document.addEventListener('DOMContentLoaded', function () {
            renderPurchaseCoverageRateChart();
        });
    </script>
<?php endif; ?>
<?php /**PATH /var/www/html/resources/views/components/charts/purchaseCoverageRateChart.blade.php ENDPATH**/ ?>