thèmes en plus, graph embed

templates/admin/followup_embed_graph.html.twig

@@ -0,0 +1,98 @@
+{% extends 'base_embed.html.twig' %}
+
+{% block title %}Graphe thématique : {{ label }}{% endblock %}
+
+{% block body %}
+<div class="container mt-4">
+    <h1><i class="bi {{ icon }} fs-2"></i> {{ label }}</h1>
+    <canvas id="embedThemeChart" width="600" height="300"></canvas>
+    <div class="mb-3 mt-2">
+        <a href="{{ path('app_admin_stats', {'insee_code': stats.zone}) }}" class="btn btn-info me-2">
+            <i class="bi bi-bar-chart"></i> Voir la page de la ville
+        </a>
+        <a href="https://osm-mon-commerce.fr/?insee={{ stats.zone }}" target="_blank" class="btn btn-success me-2">
+            <i class="bi bi-globe"></i> OSM Mon Commerce
+        </a>
+    </div>
+</div>
+{% endblock %}
+
+{% block javascripts %}
+{{ parent() }}
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0"></script>
+<script>
+const series = {{ series|json_encode|raw }};
+const theme = {{ theme|json_encode|raw }};
+const label = {{ label|json_encode|raw }};
+const countData = (series[theme + '_count'] || []).map(e => ({x: e.date, y: e.value}));
+const completionData = (series[theme + '_completion'] || []).map(e => ({x: e.date, y: e.value}));
+const canvas = document.getElementById('embedThemeChart');
+if (canvas) {
+    new Chart(canvas, {
+        type: 'line',
+        data: {
+            datasets: [
+                {
+                    label: 'Nombre',
+                    data: countData,
+                    borderColor: 'blue',
+                    backgroundColor: 'rgba(0,0,255,0.1)',
+                    fill: false,
+                    yAxisID: 'y',
+                },
+                {
+                    label: 'Complétion (%)',
+                    data: completionData,
+                    borderColor: 'green',
+                    backgroundColor: 'rgba(0,255,0,0.1)',
+                    fill: false,
+                    yAxisID: 'y1',
+                }
+            ]
+        },
+        options: {
+            parsing: true,
+            responsive: true,
+            plugins: {
+                title: {
+                    display: true,
+                    text: label
+                }
+            },
+            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 } }
+            }
+        }
+    });
+}
+// Affichage de la progression sur une semaine
+function getDelta(data, days) {
+    if (!data.length) return null;
+    const now = new Date(data[data.length - 1].x);
+    const refDate = new Date(now.getTime() - days * 24 * 60 * 60 * 1000);
+    let ref = null;
+    for (let i = data.length - 1; i >= 0; i--) {
+        const d = new Date(data[i].x);
+        if (d <= refDate) {
+            ref = data[i].y;
+            break;
+        }
+    }
+    const last = data[data.length - 1].y;
+    return ref !== null ? last - ref : null;
+}
+function formatDelta(val) {
+    if (val === null) return '-';
+    if (val === 0) return '0';
+    return (val > 0 ? '+' : '') + val;
+}
+const delta7dCount = formatDelta(getDelta(countData, 7));
+const infoDiv = document.createElement('div');
+infoDiv.className = 'mt-3 alert alert-info';
+infoDiv.innerHTML = `<strong>Progression sur 7 jours :</strong> ${delta7dCount}`;
+canvas.parentNode.appendChild(infoDiv);
+</script>
+{% endblock %} 

templates/admin/followup_graph.html.twig

@@ -28,6 +28,9 @@
             <a href="http://127.0.0.1:8111/import?url=https://overpass-api.de/api/interpreter?data={{ overpass_query|url_encode }}" target="_blank" class="btn btn-sm btn-outline-success">
                 <i class="bi bi-box-arrow-in-up-right"></i> Ouvrir dans JOSM
             </a>
+            <a href="{{ path('admin_followup_embed_graph', {'insee_code': stats.zone, 'theme': type}) }}" target="_blank" class="btn btn-sm btn-outline-secondary ms-2">
+                <i class="bi bi-code-slash"></i> Version embarquée
+            </a>
         </div>
     {% endfor %}
     <h2 class="mt-4">Données brutes</h2>