Historique ZonePlaces - {{ stats.name }} ({{ stats.zone }})

-

Historique combiné des suppressions et créations d'objets OSM par thème, groupé par date.

+

+ Historique combiné des suppressions et créations d'objets OSM par thème, groupé par date. +

+ + {# Sélecteur de période (pagination temporelle) #} + {% if changesByDate is empty %}
@@ -86,14 +121,23 @@
- {# Graphique des créations et suppressions #} + {# Graphiques des créations et suppressions #} {% if chart_data is defined and chart_data.dates|length > 0 %}
-
Évolution des créations et suppressions
+
Évolution des créations
- + +
+
+ +
+
+
Évolution des suppressions
+
+
+
{% endif %} @@ -114,10 +158,10 @@
{{ themeLabel }} ({{ objects|length }} suppression{{ objects|length > 1 ? 's' : '' }})
- +
- + @@ -130,7 +174,7 @@ {% for obj in objects %} - +
ThèmeThème Type ID Contributeur
{{ themeLabel }}{{ themeLabel }} {{ obj.type|upper }} {{ obj.id }} @@ -204,10 +248,10 @@
{{ themeLabel }} ({{ objects|length }} objet{{ objects|length > 1 ? 's' : '' }})
- +
- + @@ -219,7 +263,7 @@ {% for obj in objects %} - +
ThèmeThème Type ID Contributeur
{{ themeLabel }}{{ themeLabel }} {{ obj.type|upper }} {{ obj.id }} @@ -414,7 +458,7 @@ // Initialiser les filtres applyFilters(); - // Créer le graphique des créations et suppressions + // Créer les graphiques des créations et suppressions {% if chart_data is defined and chart_data.dates|length > 0 %} {% set hasCompletionData = false %} {% for comp in chart_data.completion %} @@ -422,19 +466,11 @@ {% set hasCompletionData = true %} {% endif %} {% endfor %} - const chartCanvas = document.getElementById('changesChart'); - if (chartCanvas) { - const chartData = { + const creationsCanvas = document.getElementById('creationsChart'); + if (creationsCanvas) { + const creationsData = { labels: {{ chart_data.dates|json_encode|raw }}, datasets: [ - { - label: 'Suppressions', - data: {{ chart_data.deletions|json_encode|raw }}, - borderColor: 'rgb(220, 53, 69)', - backgroundColor: 'rgba(220, 53, 69, 0.1)', - tension: 0.4, - fill: true - }, { label: 'Créations', data: {{ chart_data.creations|json_encode|raw }}, @@ -458,9 +494,9 @@ ] }; - new Chart(chartCanvas, { + new Chart(creationsCanvas, { type: 'line', - data: chartData, + data: creationsData, options: { responsive: true, maintainAspectRatio: true, @@ -532,6 +568,77 @@ } }); } + + const deletionsCanvas = document.getElementById('deletionsChart'); + if (deletionsCanvas) { + const deletionsData = { + labels: {{ chart_data.dates|json_encode|raw }}, + datasets: [ + { + label: 'Suppressions', + data: {{ chart_data.deletions|json_encode|raw }}, + borderColor: 'rgb(220, 53, 69)', + backgroundColor: 'rgba(220, 53, 69, 0.1)', + tension: 0.4, + fill: true + } + ] + }; + + new Chart(deletionsCanvas, { + type: 'line', + data: deletionsData, + options: { + responsive: true, + maintainAspectRatio: true, + interaction: { + mode: 'index', + intersect: false, + }, + plugins: { + legend: { + display: true, + position: 'top', + }, + tooltip: { + callbacks: { + label: function(context) { + let label = context.dataset.label || ''; + if (label) { + label += ': '; + } + if (context.parsed.y !== null) { + label += context.parsed.y; + } else { + label += 'N/A'; + } + return label; + } + } + } + }, + scales: { + x: { + display: true, + title: { + display: true, + text: 'Date' + } + }, + y: { + type: 'linear', + display: true, + position: 'left', + title: { + display: true, + text: 'Nombre d\'objets' + }, + beginAtZero: true + } + } + } + }); + } {% endif %} // Convertir les dates en format relatif