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 %} 

templates/public/dashboard.html.twig

@@ -260,20 +260,9 @@
                     {
                         label: 'Villes',
                         data: bubbleChartData,
-                        backgroundColor: bubbleChartData.map(d => `rgba(255, 99, 132, ${d.completion / 100})`),
-                        borderColor: 'rgba(255, 99, 132, 1)',
-                    },
-                    // regressionLine ? {
-                    //     label: 'Régression linéaire',
-                    //     type: 'line',
-                    //     data: regressionLine,
-                    //     borderColor: 'rgba(0, 0, 0, 0.7)',
-                    //     borderWidth: 2,
-                    //     pointRadius: 0,
-                    //     fill: false,
-                    //     order: 0,
-                    //     tension: 0
-                    // } : null
+                        backgroundColor: bubbleChartData.map(d => `rgba(75, 192, 192, ${d.completion / 100})`),
+                        borderColor: 'rgba(75, 192, 192, 1)',
+                    }, 
                 ].filter(Boolean)
             },
             options: {
@@ -284,7 +273,8 @@
                         align: 'center',
                         color: '#000',
                         font: {
-                            weight: 'bold'
+                            weight: '400',
+                            size: "10px",
                         },
                         formatter: (value, context) => {
                             return context.dataset.data[context.dataIndex].label;
@@ -303,7 +293,7 @@
                                 return [
                                     `${d.label}`,
                                     `Population: ${d.x.toLocaleString()}`,
-                                    `Lieux / 1000 hab: ${d.y.toFixed(2)}`,
+                                    `Lieux / hab: ${d.y.toFixed(2)}`,
                                     `Total lieux: ${Math.round(Math.pow(d.r / 2, 2))}`,
                                     `Complétion: ${d.completion}%`
                                 ];