176 lines
No EOL
8.1 KiB
Twig
176 lines
No EOL
8.1 KiB
Twig
{% 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>
|
|
<div class="mb-3 d-flex flex-wrap gap-2">
|
|
<a href="{{ path('admin_followup', {'insee_code': stats.zone}) }}" class="btn btn-warning">
|
|
<i class="bi bi-arrow-repeat"></i> Mettre à jour les suivis (followup)
|
|
</a>
|
|
<a href="{{ path('app_admin_labourer', {'insee_code': stats.zone, 'deleteMissing': 1}) }}" class="btn btn-primary">
|
|
<i class="bi bi-shovel"></i> Labourer la zone
|
|
</a>
|
|
<a href="{{ path('app_admin_stats', {'insee_code': stats.zone}) }}" class="btn btn-info">
|
|
<i class="bi bi-bar-chart"></i> Voir les stats
|
|
</a>
|
|
</div>
|
|
<p>Historique des objets suivis (nombre et complétion).</p>
|
|
{% for type, label in followup_labels %}
|
|
<h2 id="title-{{ type }}"><i class="bi {{ followup_icons[type]|default('bi-question-circle') }} fs-2"></i> {{ label }}</h2>
|
|
<canvas id="{{ type }}Chart" width="600" height="300"></canvas>
|
|
<div class="mb-3">
|
|
{% set overpass_query = '[out:json][timeout:60];\narea["ref:INSEE"="' ~ stats.zone ~ '"]->.searchArea;\n(' ~ followup_overpass[type]|default('') ~ ');\n\n(._;>;);\n\nout meta;\n>;' %}
|
|
<a href="https://overpass-turbo.eu/?Q={{ overpass_query|url_encode }}" target="_blank" class="btn btn-sm btn-outline-primary me-2">
|
|
<i class="bi bi-geo"></i> Voir sur Overpass Turbo
|
|
</a>
|
|
<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>
|
|
</div>
|
|
{% endfor %}
|
|
<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>
|
|
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;
|
|
}
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
Object.keys(typeLabels).forEach(function(baseType) {
|
|
const countData = (series[baseType + '_count'] || []).map(pt => ({ x: pt.date, y: pt.value }));
|
|
const completionData = (series[baseType + '_completion'] || []).map(pt => ({ x: pt.date, y: pt.value }));
|
|
const canvasId = baseType + 'Chart';
|
|
const canvas = document.getElementById(canvasId);
|
|
if (!canvas) return;
|
|
// 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
|
|
const titleElem = document.getElementById('title-' + baseType);
|
|
if (titleElem) {
|
|
titleElem.innerHTML = `${typeLabels[baseType]} ( ${lastCount}, ${lastCompletion}%)`;
|
|
}
|
|
// Créer le graphique
|
|
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: `${typeLabels[baseType]} ( ${lastCount}, ${lastCompletion}%)`
|
|
}
|
|
},
|
|
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 } }
|
|
}
|
|
}
|
|
});
|
|
// 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);
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |