up historique

assets/app.js

@@ -17,7 +17,107 @@ import './josm.js';
 import './edit.js';
 
 import Chart from 'chart.js/auto';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import { genererCouleurPastel, setupCitySearch, handleAddCityFormSubmit, enableLabourageForm, getLabourerUrl, adjustListGroupFontSize } from './utils.js';
+import Tablesort from 'tablesort';
+
 window.Chart = Chart;
+window.genererCouleurPastel = genererCouleurPastel;
+window.setupCitySearch = setupCitySearch;
+window.handleAddCityFormSubmit = handleAddCityFormSubmit;
+window.getLabourerUrl = getLabourerUrl;
+
+Chart.register(ChartDataLabels);
+
+function initDashboardChart() {
+    const chartCanvas = document.getElementById('statsBubbleChart');
+    if (!chartCanvas) {
+        return;
+    }
+
+    if (!chartCanvas.dataset.stats || chartCanvas.dataset.stats.length <= 2) { // <= 2 pour ignorer '[]'
+        console.log("Les données du graphique sont vides ou absentes, le graphique ne sera pas affiché.");
+        return;
+    }
+
+    const statsData = JSON.parse(chartCanvas.dataset.stats);
+
+    if (statsData && statsData.length > 0) {
+        const bubbleChartData = statsData.map(stat => {
+            const population = parseInt(stat.population, 10);
+            const placesCount = parseInt(stat.placesCount, 10);
+            const ratio = population > 0 ? (placesCount / population) * 1000 : 0;
+            
+            return {
+                x: population,
+                y: ratio,
+                r: Math.sqrt(placesCount) * 2,
+                label: stat.name,
+                completion: stat.completionPercent || 0
+            };
+        });
+
+        new Chart(chartCanvas.getContext('2d'), {
+            type: 'bubble',
+            data: {
+                datasets: [{
+                    label: 'Villes',
+                    data: bubbleChartData,
+                    backgroundColor: bubbleChartData.map(d => `rgba(255, 99, 132, ${d.completion / 100})`),
+                    borderColor: 'rgba(255, 99, 132, 1)',
+                }]
+            },
+            options: {
+                responsive: true,
+                plugins: {
+                    datalabels: {
+                        anchor: 'center',
+                        align: 'center',
+                        color: '#000',
+                        font: {
+                            weight: 'bold'
+                        },
+                        formatter: (value, context) => {
+                            return context.dataset.data[context.dataIndex].label;
+                        }
+                    },
+                    legend: {
+                        display: false
+                    },
+                    tooltip: {
+                        callbacks: {
+                            label: (context) => {
+                                const d = context.raw;
+                                return [
+                                    `${d.label}`,
+                                    `Population: ${d.x.toLocaleString()}`,
+                                    `Lieux / 1000 hab: ${d.y.toFixed(2)}`,
+                                    `Total lieux: ${Math.round(Math.pow(d.r / 2, 2))}`,
+                                    `Complétion: ${d.completion}%`
+                                ];
+                            }
+                        }
+                    }
+                },
+                scales: {
+                    x: {
+                        type: 'logarithmic',
+                        title: {
+                            display: true,
+                            text: 'Population (échelle log)'
+                        }
+                    },
+                    y: {
+                        title: {
+                            display: true,
+                            text: 'Commerces pour 1000 habitants'
+                        }
+                    }
+                }
+            }
+        });
+    }
+}
 
 // Attendre le chargement du DOM
 document.addEventListener('DOMContentLoaded', () => {
@@ -79,6 +179,11 @@ document.addEventListener('DOMContentLoaded', () => {
   }
   updateCompletionProgress();
 
+  // Activer le tri sur tous les tableaux désignés
+  document.querySelectorAll('.js-sort-table').forEach(table => {
+    new Tablesort(table);
+  });
+
   // Focus sur le premier champ texte au chargement 
   const firstTextInput = document.querySelector('input.form-control');
   if (firstTextInput) {
@@ -94,10 +199,10 @@ document.addEventListener('DOMContentLoaded', () => {
   parseCuisine();
 
   // Tri automatique des tableaux
-  const tables = document.querySelectorAll('table');
-  tables.forEach(table => {
-    table.classList.add('js-sort-table');
-  });
+  // const tables = document.querySelectorAll('table');
+  // tables.forEach(table => {
+  //   table.classList.add('js-sort-table');
+  // });
 
 
   // Modifier la fonction de recherche existante
@@ -160,4 +265,9 @@ document.addEventListener('DOMContentLoaded', () => {
       }, 300);
     });
   }
+
+  enableLabourageForm();
+  initDashboardChart();
+
+  adjustListGroupFontSize('.list-group-item');
 });