tykayn/osm-commerces
1
0
Fork 0
mirror of https://forge.chapril.org/tykayn/osm-commerces synced 2025-10-04 17:04:53 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

ajout icones graphs thématiques

Browse source
This commit is contained in:
Tykayn 2025-06-30 15:33:43 +02:00 • committed by tykayn
parent f1d2374119
commit 6c457986ad
1 changed files with 45 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

101
templates/admin/followup_graph.html.twig
View file

@ -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>