fix imports js

templates/admin/stats.html.twig

@@ -305,7 +305,8 @@
 
 {% block javascripts %}
     {{ parent() }}
-<script>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script>
     document.addEventListener('DOMContentLoaded', function() {
         const geojsonData = {{ geojson|raw }};
         const map_token = "{{ maptiler_token }}";
@@ -520,11 +521,105 @@
         } else if (modifCanvas) {
             modifCanvas.parentNode.innerHTML = '<div class="alert alert-info">Aucune donnée de modification disponible pour cette ville.</div>';
         }
+
+        // Créer un graphique de la répartition des tags
+        const tagsCount = {};
+        const places = {{ geojson|raw }}.features;
+
+        places.forEach(place => {
+            const mainTag = place.properties.main_tag;
+            if (mainTag) {
+                tagsCount[mainTag] = (tagsCount[mainTag] || 0) + 1;
+            }
+        });
+
+        const sortedTags = Object.entries(tagsCount).sort(([, a], [, b]) => b - a);
+        const labels = sortedTags.map(item => item[0]);
+        const data = sortedTags.map(item => item[1]);
+        const container_tags= document.getElementById('repartition_tags');
+        if(!container_tags){
+            console.log('pas de container_tags', container_tags)
+            return;
+        }
+        const ctx = container_tags.getContext ? container_tags.getContext('2d') : null;
+        if(ctx){
+
+            new Chart(ctx, {
+                type: 'bar',
+            data: {
+                labels: labels,
+                datasets: [{
+                    label: 'Répartition des tags',
+                    data: data,
+                    backgroundColor: 'rgba(54, 162, 235, 0.5)',
+                    borderColor: 'rgba(54, 162, 235, 1)',
+                    borderWidth: 1
+                }]
+            },
+            options: {
+                indexAxis: 'y',
+                scales: {
+                    x: {
+                        beginAtZero: true
+                    }
+                },
+                responsive: true,
+                maintainAspectRatio: false
+            }
+        });
+
+                        }
+        // Graphique de distribution du taux de complétion
+        const completionData = [];
+        {% for commerce in stats.places %}
+            completionData.push({{ commerce.getCompletionPercentage() }});
+        {% endfor %}
+
+        const completionDistribution = {};
+        completionData.forEach(percent => {
+            const range = Math.floor(percent / 10) * 10;
+            const key = `${range}-${range + 10}%`;
+            completionDistribution[key] = (completionDistribution[key] || 0) + 1;
+        });
+
+        const completionLabels = Object.keys(completionDistribution).sort((a, b) => {
+            return parseInt(a.split('-')[0]) - parseInt(b.split('-')[0]);
+        });
+        const completionValues = completionLabels.map(label => completionDistribution[label]);
+const dc = document.getElementById('distribution_completion');
+
+if(dc ){
+    const completionCtx = dc.getContext ? dc.getContext('2d') : null;
+    if(!completionCtx){
+        console.log('pas de completionCtx' )
+        return ;
+    }
+        new Chart(completionCtx, {
+            type: 'bar',
+            data: {
+                labels: completionLabels,
+                datasets: [{
+                    label: 'Distribution du Taux de Complétion',
+                    data: completionValues,
+                    backgroundColor: 'rgba(75, 192, 192, 0.5)',
+                    borderColor: 'rgba(75, 192, 192, 1)',
+                    borderWidth: 1
+                }]
+            },
+            options: {
+                scales: {
+                    y: {
+                        beginAtZero: true
+                    }
+                },
+                responsive: true,
+                maintainAspectRatio: false
+            }
+        });
+}else{
+    console.log('pas de distribution_completion')
+}
+        
     });
-</script>
-
-    <script>
-        window.modificationsByQuarter = {{ modificationsByQuarter|raw }};
     </script>
-
 {% endblock %}