follow up graphs

assets/app.js

@@ -37,6 +37,7 @@ import {
   updateMapHeightForLargeScreens
 } from './utils.js';
 import tableSortJs from 'table-sort-js/table-sort.js';
+import 'chartjs-adapter-date-fns';
 console.log('TableSort', tableSortJs)
 
 // Charger table-sortable (version non minifiée locale)
@@ -270,4 +271,90 @@ document.addEventListener('DOMContentLoaded', () => {
   }
   //updateMapHeightForLargeScreens();
 
+  console.log('window.followupSeries',window.followupSeries)
+  if (!window.followupSeries) return;
+
+  const series = window.followupSeries;
+
+  // Données bornes de recharge
+  const chargingStationCount = (series['charging_station_count'] || []).map(point => ({ x: point.date, y: point.value }));
+  const chargingStationCompletion = (series['charging_station_completion'] || []).map(point => ({ x: point.date, y: point.value }));
+
+  // Données bornes incendie
+  const fireHydrantCount = (series['fire_hydrant_count'] || []).map(point => ({ x: point.date, y: point.value }));
+  const fireHydrantCompletion = (series['fire_hydrant_completion'] || []).map(point => ({ x: point.date, y: point.value }));
+
+  // Graphique bornes de recharge
+  const chargingStationChart = document.getElementById('chargingStationChart');
+  if (chargingStationChart) {
+    new Chart(chargingStationChart, {
+      type: 'line',
+      data: {
+        datasets: [
+          {
+            label: 'Nombre de bornes de recharge',
+            data: chargingStationCount,
+            borderColor: 'blue',
+            backgroundColor: 'rgba(0,0,255,0.1)',
+            fill: false,
+            yAxisID: 'y',
+          },
+          {
+            label: 'Complétion (%)',
+            data: chargingStationCompletion,
+            borderColor: 'green',
+            backgroundColor: 'rgba(0,255,0,0.1)',
+            fill: false,
+            yAxisID: 'y1',
+          }
+        ]
+      },
+      options: {
+        parsing: false,
+        responsive: true,
+        scales: {
+          x: { type: 'time', time: { unit: 'day' }, title: { display: true, text: 'Date' } },
+          y: { beginAtZero: true, title: { display: true, text: 'Nombre' } },
+          y1: { beginAtZero: true, position: 'right', title: { display: true, text: 'Complétion (%)' }, grid: { drawOnChartArea: false } }
+        }
+      }
+    });
+  }
+
+  // Graphique bornes incendie
+  const fireHydrantChart = document.getElementById('fireHydrantChart');
+  if (fireHydrantChart) {
+    new Chart(fireHydrantChart, {
+      type: 'line',
+      data: {
+        datasets: [
+          {
+            label: 'Nombre de bornes incendie',
+            data: fireHydrantCount,
+            borderColor: 'red',
+            backgroundColor: 'rgba(255,0,0,0.1)',
+            fill: false,
+            yAxisID: 'y',
+          },
+          {
+            label: 'Complétion (%)',
+            data: fireHydrantCompletion,
+            borderColor: 'orange',
+            backgroundColor: 'rgba(255,165,0,0.1)',
+            fill: false,
+            yAxisID: 'y1',
+          }
+        ]
+      },
+      options: {
+        parsing: false,
+        responsive: true,
+        scales: {
+          x: { type: 'time', time: { unit: 'day' }, title: { display: true, text: 'Date' } },
+          y: { beginAtZero: true, title: { display: true, text: 'Nombre' } },
+          y1: { beginAtZero: true, position: 'right', title: { display: true, text: 'Complétion (%)' }, grid: { drawOnChartArea: false } }
+        }
+      }
+    });
+  }
 });