ajout donut des tags

assets/utils.js

@@ -454,6 +454,7 @@ function check_validity() {
   return isValid;
 }
 
+
 // Exporter les fonctions dans window
 window.setupCitySearch = setupCitySearch;
 window.getLabourerUrl = getLabourerUrl;
@@ -469,4 +470,4 @@ window.listChangesets = listChangesets;
 window.updateMapHeightForLargeScreens = updateMapHeightForLargeScreens;
 window.searchInseeCode = searchInseeCode;
 window.genererCouleurPastel = genererCouleurPastel;
-window.check_validity = check_validity;
+window.check_validity = check_validity; 

templates/admin/stats.html.twig

@@ -122,7 +122,8 @@
             </button>
         </div>
    </div>
-        <div id="map" class="mt-4" style="height: 400px;"></div>
+        <div id="map" style="height: 400px; width: 100%; margin-bottom: 1rem;"></div>
+        <div id="repartition_tags" style="height: 300px; margin: 20px 0;"></div>
         <div id="attribution">
             <a href="https://www.openstreetmap.org/copyright">Données OpenStreetMap</a>
         </div>
@@ -236,9 +237,7 @@
     {{ parent() }}
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
-    <script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script>
+    <script src="https://unpkg.com/@turf/turf@6/turf.min.js"></script> 
-    {# <script src="{{ asset('js/map-utils.js') }}"></script> #}
-    <script src="{{ asset('js/utils.js') }}"></script>
     <script>
         // Attendre que le DOM et tous les scripts soient chargés
         document.addEventListener('DOMContentLoaded', function() {
@@ -952,9 +951,84 @@ window.updateMarkers = updateMarkers;
 }
 
     console.log('getOSMClosedSirets', CTC_urls.getOSMClosedSirets);
-    markClosedSiretsOnTable();
+    {# markClosedSiretsOnTable(); #}
 
-    
+function makeDonutGraphOfTags() {
+  // Récupérer tous les tags de la colonne 2
+  const tags = Array.from(document.querySelectorAll('table tbody tr td:nth-child(3)'))
+    .map(cell => cell.textContent.trim())
+    .filter(tag => tag.includes('=')) // Filtrer les cellules qui ne contiennent pas de =
+    .filter(tag => tag); // Filtrer les cellules vides
+
+  // Compter les occurrences de chaque tag
+  const tagCounts = {};
+  tags.forEach(tag => {
+    tagCounts[tag] = (tagCounts[tag] || 0) + 1;
+  });
+  console.log('tagCounts', tagCounts);
+
+  // Convertir en tableau et trier par nombre d'occurrences
+  const sortedTags = Object.entries(tagCounts)
+    .sort((a, b) => b[1] - a[1]);
+
+  // Créer ou récupérer la div pour le graphique
+  let repartitionDiv = document.getElementById('repartition_tags');
+  if (!repartitionDiv) {
+    repartitionDiv = document.createElement('div');
+    repartitionDiv.id = 'repartition_tags';
+    repartitionDiv.style.height = '300px';
+    repartitionDiv.style.margin = '20px 0';
+    // Insérer après la carte
+    const mapDiv = document.getElementById('map');
+    mapDiv.parentNode.insertBefore(repartitionDiv, mapDiv.nextSibling);
+  }
+
+  // Créer un canvas à l'intérieur de la div
+  const canvas = document.createElement('canvas');
+  repartitionDiv.innerHTML = ''; // Vider la div
+  repartitionDiv.appendChild(canvas);
+
+  // Créer le graphique donut
+  const ctx = canvas.getContext('2d');
+  new Chart(ctx, {
+    type: 'doughnut',
+    data: {
+      labels: sortedTags.map(([tag]) => tag),
+      datasets: [{
+        data: sortedTags.map(([, count]) => count),
+        backgroundColor: [
+          '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF',
+          '#FF9F40', '#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0',
+          '#9966FF', '#FF9F40', '#FF6384', '#36A2EB', '#FFCE56'
+        ]
+      }]
+    },
+    options: {
+      responsive: true,
+      maintainAspectRatio: false,
+      plugins: {
+        legend: {
+          position: 'right',
+          labels: {
+            boxWidth: 15,
+            padding: 15,
+            font: {
+              size: 12
+            }
+          }
+        },
+        title: {
+          display: true,
+          text: 'Répartition des types de lieux',
+          font: {
+            size: 16
+          }
+        }
+      }
+    }
+  });
+}
+    makeDonutGraphOfTags();
 </script>
 
 {% endblock %}