<h1 class="mb-5"><?php echo e($name); ?></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 style="max-width: 900px;max-height: 700px" id="Domaines_achat_en_pourcent"></canvas>
    <?php if (isset($component)) { $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4 = $component; } ?>
<?php $component = $__env->getContainer()->make(Illuminate\View\AnonymousComponent::class, ['view' => 'components.saveAsPdf','data' => ['canvasId' => 'Domaines_achat_en_pourcent','pdfName' => 'Domaines d\achat en pourcent']]); ?>
<?php $component->withName('saveAsPdf'); ?>
<?php if ($component->shouldRender()): ?>
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
<?php $component->withAttributes(['canvasId' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute('Domaines_achat_en_pourcent'),'pdfName' => \Illuminate\View\Compilers\BladeCompiler::sanitizeComponentAttribute('Domaines d\achat en pourcent')]); ?>
<?php if (isset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4)): ?>
<?php $component = $__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4; ?>
<?php unset($__componentOriginalc254754b9d5db91d5165876f9d051922ca0066f4); ?>
<?php endif; ?>
<?php echo $__env->renderComponent(); ?>
<?php endif; ?>


    <script>
        const renderAllDomainsPurchaseChart = () => {

            let DomainsPurchasePercentage = <?php echo json_encode($allDomainsPurchase ?? ''); ?>;
            let totalAmountHT = 0;
            DomainsPurchasePercentage.forEach(domain => {
                totalAmountHT += domain.montant_ht;
            });

            let labelsdomainsPurchasePercentage = DomainsPurchasePercentage.flatMap(domain => domain.domaine);
            let valuesDomainsPurchasePercentage = DomainsPurchasePercentage.flatMap(domain => domain.montant_ht);
            let percentageForEachDomain = DomainsPurchasePercentage.map(domain => (domain.montant_ht / totalAmountHT) * 100);

            const displayFloatNumber = (x) => {
                return Number.parseFloat(x).toFixed(1);
            }

            const domainsPurchasePercentageChart = document.getElementById('Domaines_achat_en_pourcent');

            return new Chart(domainsPurchasePercentageChart, {
                type: 'doughnut',
                data: {
                    labels: labelsdomainsPurchasePercentage,
                    datasets: [{
                        data: percentageForEachDomain,
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 99, 132, 1)',
                            'rgba(255, 159, 64, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(255, 99, 132, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    plugins: {
                        datalabels: {
                            formatter: (value) => {
                                return displayFloatNumber(value) + " %";
                            },
                            font: {
                                size: 16,
                            }
                        },
                        legend: {
                            position: 'left',
                            maxWidth: 400,
                            labels: {
                                padding: 20,
                            }
                        },
                        tooltip: {
                            callbacks: {
                                label: function (context) {
                                    var label = context.label || '';
                                    var value = context.parsed;

                                    if (label) {
                                        label += ': ';
                                    }
                                    if (value !== null) {
                                        label += displayFloatNumber(value) + " %";
                                    }
                                    return label;
                                }
                            }
                        }
                    },
                }
            });
        }

        document.addEventListener('DOMContentLoaded', function () {
            renderAllDomainsPurchaseChart();
        });

    </script>
<?php endif; ?>
<?php /**PATH /var/www/html/resources/views/components/charts/allDomainsPurchaseChart.blade.php ENDPATH**/ ?>