follow up graphs

2025-06-29 15:56:55 +02:00 · 2025-06-29 15:56:55 +02:00 · ab1b9a9d3d
commit ab1b9a9d3d
parent 4b4a46c3f7
11 changed files with 580 additions and 41 deletions
--- a/templates/admin/followup_graph.html.twig
+++ b/templates/admin/followup_graph.html.twig
@ -0,0 +1,150 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}Suivi des objets OSM - {{ stats.name }}{% endblock %}
+
+{% block body %}
+<div class="container mt-4">
+    <h1>Suivi des objets OSM pour {{ stats.name }} ({{ stats.zone }})</h1>
+    <p>Historique des bornes incendie et bornes de recharge (nombre et complétion).</p>
+
+    <h2>Bornes de recharge</h2>
+    <canvas id="chargingStationChart" width="600" height="300"></canvas>
+
+    <h2>Bornes incendie</h2>
+    <canvas id="fireHydrantChart" width="600" height="300"></canvas>
+
+    <h2 class="mt-4">Données brutes</h2>
+    <table class="table table-bordered table-striped">
+        <thead>
+            <tr>
+                <th>Date</th>
+                <th>Type</th>
+                <th>Label</th>
+                <th>Valeur</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for type, points in series %}
+                {% for point in points %}
+                    <tr>
+                        <td>{{ point.date }}</td>
+                        <td>{{ type }}</td>
+                        <td>{{ point.name }}</td>
+                        <td>{{ point.value }}</td>
+                    </tr>
+                {% endfor %}
+            {% endfor %}
+        </tbody>
+    </table>
+
+    <a href="{{ path('app_admin_stats', {'insee_code': stats.zone}) }}" class="btn btn-secondary mt-3"><i class="bi bi-arrow-left"></i> Retour à la fiche ville</a>
+</div>
+{% endblock %}
+
+{% block javascripts %}
+{{ parent() }}
+<script src="/js/chartjs/chart.umd.js"></script>
+<script src="/js/chartjs/chartjs-adapter-date-fns.js"></script>
+<script>
+    // Log du contenu de la variable series
+    console.log('series', {{ series|json_encode|raw }});
+
+    // Données bornes de recharge
+    const chargingStationCount = [
+        {% for point in series['charging_station_count'] ?? [] %}
+            { x: "{{ point.date }}", y: {{ point.value }} },
+        {% endfor %}
+    ];
+    const chargingStationCompletion = [
+        {% for point in series['charging_station_completion'] ?? [] %}
+            { x: "{{ point.date }}", y: {{ point.value }} },
+        {% endfor %}
+    ];
+
+    // Données bornes incendie
+    const fireHydrantCount = [
+        {% for point in series['fire_hydrant_count'] ?? [] %}
+            { x: "{{ point.date }}", y: {{ point.value }} },
+        {% endfor %}
+    ];
+    const fireHydrantCompletion = [
+        {% for point in series['fire_hydrant_completion'] ?? [] %}
+            { x: "{{ point.date }}", y: {{ point.value }} },
+        {% endfor %}
+    ];
+
+    // Log des tableaux JS générés
+    console.log('chargingStationCount', chargingStationCount);
+    console.log('chargingStationCompletion', chargingStationCompletion);
+    console.log('fireHydrantCount', fireHydrantCount);
+    console.log('fireHydrantCompletion', fireHydrantCompletion);
+
+    // Graphique bornes de recharge
+    new Chart(document.getElementById('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
+    new Chart(document.getElementById('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 } }
+            }
+        }
+    });
+</script>
+{% endblock %}