From 6c457986ad114f99d40f3c558ff7643400f9f8d0 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Mon, 30 Jun 2025 15:33:43 +0200
Subject: [PATCH] =?UTF-8?q?ajout=20icones=20graphs=20th=C3=A9matiques?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/admin/followup_graph.html.twig | 101 ++++++++++-------------
 1 file changed, 45 insertions(+), 56 deletions(-)

diff --git a/templates/admin/followup_graph.html.twig b/templates/admin/followup_graph.html.twig
index 7e19868..450ec64 100644
--- a/templates/admin/followup_graph.html.twig
+++ b/templates/admin/followup_graph.html.twig
@@ -64,45 +64,11 @@
 {{ parent() }}
 <script src="/js/chartjs/chart.umd.js"></script>
 <script src="/js/chartjs/chartjs-adapter-date-fns.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
 <script>
     const series = {{ series|json_encode|raw }};
-    console.log('series',series)
-
-    const typeLabels = {
-        fire_hydrant: 'Bornes incendie',
-        charging_station: 'Bornes de recharge',
-        toilets: 'Toilettes publiques',
-        bus_stop: 'Arrêts de bus',
-        defibrillator: 'Défibrillateurs',
-        camera: 'Caméras de surveillance',
-        recycling: 'Points de recyclage',
-        substation: 'Sous-stations électriques',
-        laboratory: "Laboratoires d'analyse",
-        school: 'Écoles',
-        police: 'Commissariats',
-        healthcare: 'Lieux de santé',
-        bicycle_parking: 'Parkings vélos'
-    };
-    function formatDelta(val) {
-        if (val === null) return '-';
-        if (val === 0) return '0';
-        return (val > 0 ? '+' : '') + val;
-    }
-    function getDelta(data, days) {
-        if (!data.length) return null;
-        const now = new Date(data[data.length - 1].x || data[data.length - 1].date);
-        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 || data[i].date);
-            if (d <= refDate) {
-                ref = data[i].y !== undefined ? data[i].y : data[i].value;
-                break;
-            }
-        }
-        const last = data[data.length - 1].y !== undefined ? data[data.length - 1].y : data[data.length - 1].value;
-        return ref !== null ? last - ref : null;
-    }
+    const followupIcons = {{ followup_icons|json_encode|raw }};
+    const typeLabels = Object.assign({}, {{ followup_labels|json_encode|raw }});
     document.addEventListener('DOMContentLoaded', function() {
         Object.keys(typeLabels).forEach(function(baseType) {
             const countData = (series[baseType + '_count'] || []).map(pt => ({ x: pt.date, y: pt.value }));
@@ -113,17 +79,13 @@
             // Derniers points
             const lastCount = countData.length ? countData[countData.length - 1].y : '-';
             const lastCompletion = completionData.length ? completionData[completionData.length - 1].y : '-';
-            // Deltas
-            const delta7dCount = formatDelta(getDelta(countData, 7));
-            const delta30dCount = formatDelta(getDelta(countData, 30));
-            const delta365dCount = formatDelta(getDelta(countData, 365));
-            const delta7dComp = formatDelta(getDelta(completionData, 7));
-            const delta30dComp = formatDelta(getDelta(completionData, 30));
-            const delta365dComp = formatDelta(getDelta(completionData, 365));
-            // Mettre à jour le titre
+            // Date de dernière mise à jour
+            const lastDate = countData.length ? countData[countData.length - 1].x : null;
+            // Mettre à jour le titre avec l'icône
             const titleElem = document.getElementById('title-' + baseType);
             if (titleElem) {
-                titleElem.innerHTML = `${typeLabels[baseType]} ( ${lastCount}, ${lastCompletion}%)`;
+                const icon = followupIcons[baseType] || 'bi-question-circle';
+                titleElem.innerHTML = `<i class="bi ${icon} fs-2"></i> ${typeLabels[baseType]} ( ${lastCount}, ${lastCompletion}%)`;
             }
             // Créer le graphique
             new Chart(canvas, {
@@ -137,6 +99,13 @@
                             backgroundColor: 'rgba(0,0,255,0.1)',
                             fill: false,
                             yAxisID: 'y',
+                            datalabels: {
+                                align: 'top',
+                                anchor: 'end',
+                                display: true,
+                                formatter: function(value) { return value.y; },
+                                font: { weight: 'bold' }
+                            }
                         },
                         {
                             label: 'Complétion (%)',
@@ -145,6 +114,13 @@
                             backgroundColor: 'rgba(0,255,0,0.1)',
                             fill: false,
                             yAxisID: 'y1',
+                            datalabels: {
+                                align: 'bottom',
+                                anchor: 'end',
+                                display: true,
+                                formatter: function(value) { return value.y + '%'; },
+                                font: { weight: 'bold' }
+                            }
                         }
                     ]
                 },
@@ -155,6 +131,20 @@
                         title: {
                             display: true,
                             text: `${typeLabels[baseType]} ( ${lastCount}, ${lastCompletion}%)`
+                        },
+                        datalabels: {
+                            display: true
+                        },
+                        tooltip: {
+                            callbacks: {
+                                title: function(context) {
+                                    // Affiche la date au survol
+                                    return context[0].parsed.x ? new Date(context[0].parsed.x).toLocaleString() : '';
+                                },
+                                label: function(context) {
+                                    return context.dataset.label + ': ' + context.parsed.y;
+                                }
+                            }
                         }
                     },
                     scales: {
@@ -162,17 +152,16 @@
                         y: { beginAtZero: true, title: { display: true, text: 'Nombre' } },
                         y1: { beginAtZero: true, position: 'right', title: { display: true, text: 'Complétion (%)' }, grid: { drawOnChartArea: false } }
                     }
-                }
+                },
+                plugins: [ChartDataLabels]
             });
-            // Afficher les changements sous le graphique
-            const infoDiv = document.createElement('div');
-            infoDiv.className = 'mb-4';
-            infoDiv.innerHTML = `<strong>Évolution sur :</strong> <ul>
-                <li>7 jours : N ${delta7dCount}, complétion ${delta7dComp} %</li>
-                <li>30 jours : N ${delta30dCount}, complétion ${delta30dComp} %</li>
-                <li>1 an : N ${delta365dCount}, complétion ${delta365dComp} %</li>
-            </ul>`;
-            canvas.parentNode.insertBefore(infoDiv, canvas.nextSibling);
+            // Afficher la date de dernière mise à jour sous le graphique
+            if (lastDate) {
+                const dateDiv = document.createElement('div');
+                dateDiv.className = 'text-end text-muted small mb-2';
+                dateDiv.innerHTML = `<i class="bi bi-clock-history"></i> Dernière mise à jour : ${new Date(lastDate).toLocaleString()}`;
+                canvas.parentNode.insertBefore(dateDiv, canvas.nextSibling);
+            }
         });
     });
 </script>