ajout de followup sur plusieurs thèmes
This commit is contained in:
Tykayn
tykayn
parent
ab1b9a9d3d
commit
0cdb2f9ae9
6 changed files with 501 additions and 120 deletions
|
|
@ -5,14 +5,26 @@
|
|||
{% 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>
|
||||
|
||||
<div class="mb-3">
|
||||
<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>
|
||||
</div>
|
||||
<p>Historique des objets suivis (nombre et complétion).</p>
|
||||
{% set type_labels = {
|
||||
'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'
|
||||
} %}
|
||||
{% for type in type_labels|keys %}
|
||||
<h2 id="title-{{ type }}">{{ type_labels[type] }}</h2>
|
||||
<canvas id="{{ type }}Chart" width="600" height="300"></canvas>
|
||||
{% endfor %}
|
||||
<h2 class="mt-4">Données brutes</h2>
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
|
|
@ -36,7 +48,6 @@
|
|||
{% 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 %}
|
||||
|
|
@ -46,105 +57,108 @@
|
|||
<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 } }
|
||||
const series = {{ series|json_encode|raw }};
|
||||
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'
|
||||
};
|
||||
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;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 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 } }
|
||||
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]} (N = ${lastCount}, complétion = ${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]} (N = ${lastCount}, complétion = ${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 %}
|
||||
|
|
@ -55,6 +55,9 @@
|
|||
</div>
|
||||
<div class="col-md-6 col-12">
|
||||
<a href="{{ path('app_admin_labourer', {'insee_code': stats.zone, 'deleteMissing': 1}) }}" class="btn btn-primary" id="labourer">Labourer les mises à jour</a>
|
||||
<a href="{{ path('admin_followup_graph', {'insee_code': stats.zone}) }}" class="btn btn-info ms-2" id="followup-graph-link">
|
||||
<i class="bi bi-graph-up"></i> Suivi OSM (graphes)
|
||||
</a>
|
||||
<button id="openInJOSM" class="btn btn-secondary ms-2">
|
||||
<i class="bi bi-map"></i> Ouvrir dans JOSM
|
||||
</button>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue