ajout de courbe pour stats

templates/admin/stats.html.twig

@@ -12,6 +12,10 @@
             stroke: #fff;
             stroke-width: 3;
         }
+        #distribution_completion {
+            height: 300px;
+            margin: 20px 0;
+        }
     </style>
 {% endblock %}
 
@@ -66,6 +70,11 @@
     </div>
     <div class="card mt-4">
 
+
+    
+    <div id="distribution_completion" class="mt-4 mb-4"></div>
+
+
     <div class="row">
         <div class="col-md-6 col-12">
             <h1 class="card-title p-4">Tableau des {{ stats.places |length }} lieux</h1>
@@ -96,6 +105,7 @@
 
 <script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
 <script src='{{ asset('js/turf/turf.min.js') }}'></script>
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <script>
     const request = `{{query_places|raw}}`; 
     const zip_code = `{{stats.zone}}`;
@@ -157,6 +167,71 @@
         `;
     }
 
+    function calculateCompletionDistribution(elements) {
+        // Créer des buckets de 10% (0-10%, 10-20%, etc.)
+        const buckets = Array(11).fill(0);
+        
+        elements.forEach(element => {
+            const completion = calculateCompletion(element);
+            const bucketIndex = Math.floor(completion / 10);
+            buckets[bucketIndex]++;
+        });
+
+        return buckets;
+    }
+
+    function createCompletionChart(elements) {
+        const distribution = calculateCompletionDistribution(elements);
+        const ctx = document.createElement('canvas');
+        document.getElementById('distribution_completion').appendChild(ctx);
+
+        new Chart(ctx, {
+            type: 'line',
+            data: {
+                labels: ['0-10%', '10-20%', '20-30%', '30-40%', '40-50%', '50-60%', '60-70%', '70-80%', '80-90%', '90-100%'],
+                datasets: [{
+                    label: 'Nombre de commerces',
+                    data: distribution,
+                    backgroundColor: 'rgba(0, 128, 0, 0.1)',
+                    borderColor: 'rgba(0, 128, 0, 1)',
+                    borderWidth: 2,
+                    tension: 0.4,
+                    fill: true,
+                    pointBackgroundColor: 'rgba(0, 128, 0, 1)',
+                    pointBorderColor: '#fff',
+                    pointBorderWidth: 2,
+                    pointRadius: 4,
+                    pointHoverRadius: 6
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                scales: {
+                    y: {
+                        beginAtZero: true,
+                        title: {
+                            display: true,
+                            text: 'Nombre de commerces'
+                        }
+                    },
+                    x: {
+                        title: {
+                            display: true,
+                            text: 'Taux de complétion'
+                        }
+                    }
+                },
+                plugins: {
+                    title: {
+                        display: true,
+                        text: 'Distribution du taux de complétion des commerces'
+                    }
+                }
+            }
+        });
+    }
+
     async function fetchland() {
         // Requête pour obtenir le contour administratif
         const boundaryQuery = `[out:json][timeout:25];
@@ -179,7 +254,7 @@ out skel qt;`;
 
         const map = new maplibregl.Map({
             container: 'map',
-            style: 'https://api.maptiler.com/maps/basic-v2/style.json?key={{ maptiler_token }}',
+            style: 'https://api.maptiler.com/maps/streets-v2/style.json?key={{ maptiler_token }}',
             center: [2.3488, 48.8534],
             zoom: 12
         });
@@ -225,6 +300,9 @@ out skel qt;`;
             console.log('map chargé',data.elements);
             mapElements = data.elements;
 
+            // Créer le graphique de distribution
+            createCompletionChart(data.elements);
+
             document.getElementById('maploader').classList.add('d-none');
 
             // Créer une source pour les cercles