tykayn/osm-labo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

up graphes stats de ville

Browse source
This commit is contained in:
Tykayn 2025-11-25 23:26:33 +01:00 • committed by tykayn
parent b323c2fe9f
commit 62e086cd64
2 changed files with 161 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

32
templates/admin/stats.html.twig
View file

@ -152,7 +152,7 @@
} }
#stats-table thead th { #stats-table thead th {
background: #f8f9fa; background:rgb(255, 255, 255);
border-bottom: 2px solid #dee2e6; border-bottom: 2px solid #dee2e6;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
padding: 0.75rem; padding: 0.75rem;
@ -706,16 +706,16 @@
<p class="mb-0">Comment est calculé le score de complétion ?</p> <p class="mb-0">Comment est calculé le score de complétion ?</p>
<i class="bi bi-chevron-down ms-auto" id="completionInfoIcon"></i> <i class="bi bi-chevron-down ms-auto" id="completionInfoIcon"></i>
</div> </div>
<div id="completionInfoContent" style="display: none;" class="mt-3"> <div id="completionInfoContent" class="mt-3">
<p>Le score de complétion est calculé en fonction de plusieurs critères :</p> <p>Le score de complétion est calculé en fonction de plusieurs critères :</p>
<ul> <ul>
<li>Nom du commerce</li> <li>Nom du commerce: tag name</li>
<li>Adresse complète (numéro, rue, code postal)</li> <li>Adresse complète (numéro, rue, code postal): tag contact:street ou addr:street et tag contact:housenumber ou addr:housenumber</li>
<li>Horaires d'ouverture</li> <li>Horaires d'ouverture: tag opening_hours</li>
<li>Site web</li> <li>Site web: tag website ou contact:website ou url ou contact:url</li>
<li>Numéro de téléphone</li> <li>Numéro de téléphone: tag phone ou contact:phone</li>
<li>Accessibilité PMR</li> <li>Accessibilité PMR: tag wheelchair</li>
<li>SIRET</li> <li>SIRET: tag ref:FR:SIRET</li>
</ul> </ul>
<p>Chaque critère rempli augmente le score de complétion d'une part égale. <p>Chaque critère rempli augmente le score de complétion d'une part égale.
Un commerce parfaitement renseigné aura un score de 100%.</p> Un commerce parfaitement renseigné aura un score de 100%.</p>
@ -1220,15 +1220,19 @@
console.log('pas de completionCtx'); console.log('pas de completionCtx');
} else { } else {
new Chart(completionCtx, { new Chart(completionCtx, {
type: 'bar', type: 'line',
data: { data: {
labels: completionLabels, labels: completionLabels,
datasets: [{ datasets: [{
label: 'Évolution du taux de complétion', label: 'Décompte des objets par tranches de complétion',
data: completionValues, data: completionValues,
backgroundColor: 'rgba(75, 192, 192, 0.5)', backgroundColor: 'rgba(75, 192, 192, 0.1)',
borderColor: 'rgba(75, 192, 192, 1)', borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1 borderWidth: 2,
tension: 0.3,
fill: false,
pointRadius: 4,
pointHoverRadius: 6
}] }]
}, },
options: { options: {
@ -1241,7 +1245,7 @@
plugins: { plugins: {
title: { title: {
display: true, display: true,
text: 'Évolution du taux de complétion', text: 'Décompte des objets par tranches de complétion',
font: { font: {
size: 16 size: 16
} }

211
templates/admin/stats_history.html.twig
View file

@ -75,82 +75,85 @@ document.addEventListener('DOMContentLoaded', function() {
]; ];
const completionStat = {{stat.getCompletionPercent()}} const completionStat = {{stat.getCompletionPercent()}}
new Chart(ctx, { // Fonction pour créer les données avec labels uniquement sur le dernier point
function createDatasetWithLastLabel(label, data, borderColor, backgroundColor, borderWidth, hidden) {
const lastIndex = data.length - 1;
return {
label: label,
data: data,
borderColor: borderColor,
backgroundColor: backgroundColor,
tension: 0.3,
fill: false,
borderWidth: borderWidth,
hidden: hidden,
pointRadius: function(context) {
// Afficher un point plus grand uniquement sur le dernier point
return context.dataIndex === lastIndex ? 5 : 3;
},
pointHoverRadius: function(context) {
return context.dataIndex === lastIndex ? 7 : 5;
}
};
}
const chart = new Chart(ctx, {
type: 'line', type: 'line',
data: { data: {
labels: labels, labels: labels,
datasets: [ datasets: [
{ createDatasetWithLastLabel(
label: 'Taux de complétion global (%)', 'Taux de complétion global (%)',
data: completionData, completionData,
borderColor: 'rgb(75, 192, 192)', 'rgb(75, 192, 192)',
backgroundColor: 'rgba(75, 192, 192, 0.1)', 'rgba(75, 192, 192, 0.1)',
tension: 0.3, 3,
fill: false, false
borderWidth: 3 ),
}, createDatasetWithLastLabel(
{ 'Horaires d\'ouverture (%)',
label: 'Horaires d\'ouverture (%)', openingHoursData,
data: openingHoursData, 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)', 'rgba(255, 99, 132, 0.1)',
backgroundColor: 'rgba(255, 99, 132, 0.1)', 2,
tension: 0.3, false
fill: false, ),
borderWidth: 2 createDatasetWithLastLabel(
}, 'Adresses (%)',
{ addressData,
label: 'Adresses (%)', 'rgb(54, 162, 235)',
data: addressData, 'rgba(54, 162, 235, 0.1)',
borderColor: 'rgb(54, 162, 235)', 2,
backgroundColor: 'rgba(54, 162, 235, 0.1)', false
tension: 0.3, ),
fill: false, createDatasetWithLastLabel(
borderWidth: 2 'Sites web (%)',
}, websiteData,
{ 'rgb(255, 205, 86)',
label: 'Sites web (%)', 'rgba(255, 205, 86, 0.1)',
data: websiteData, 2,
borderColor: 'rgb(255, 205, 86)', false
backgroundColor: 'rgba(255, 205, 86, 0.1)', ),
tension: 0.3, createDatasetWithLastLabel(
fill: false, 'SIRET (%)',
borderWidth: 2 siretData,
}, 'rgb(153, 102, 255)',
{ 'rgba(153, 102, 255, 0.1)',
label: 'SIRET (%)', 2,
data: siretData, false
borderColor: 'rgb(153, 102, 255)', ),
backgroundColor: 'rgba(153, 102, 255, 0.1)', createDatasetWithLastLabel(
tension: 0.3, 'Emails (%)',
fill: false, emailData,
borderWidth: 2 'rgb(199, 199, 199)',
}, 'rgba(199, 199, 199, 0.1)',
{ 2,
label: 'Emails (%)', false
data: emailData, )
borderColor: 'rgb(199, 199, 199)',
backgroundColor: 'rgba(199, 199, 199, 0.1)',
tension: 0.3,
fill: false,
borderWidth: 2
}
] ]
}, },
options: { options: {
responsive: true, responsive: true,
plugins: {
title: {
display: true,
text: 'Évolution des taux de complétion dans le temps => '+completionStat
},
legend: {
position: 'top',
labels: {
usePointStyle: true,
padding: 20
}
}
},
scales: { scales: {
y: { y: {
beginAtZero: true, beginAtZero: true,
@ -170,6 +173,78 @@ document.addEventListener('DOMContentLoaded', function() {
interaction: { interaction: {
intersect: false, intersect: false,
mode: 'index' mode: 'index'
},
plugins: {
title: {
display: true,
text: 'Évolution des taux de complétion dans le temps => '+completionStat
},
legend: {
position: 'top',
labels: {
usePointStyle: true,
padding: 20
},
onClick: function(e, legendItem, legend) {
const index = legendItem.datasetIndex;
const chart = legend.chart;
const meta = chart.getDatasetMeta(index);
// Basculer la visibilité
meta.hidden = meta.hidden === null ? !chart.data.datasets[index].hidden : null;
// Mettre à jour le graphique
chart.update();
}
},
tooltip: {
enabled: true
}
},
animation: {
onComplete: function() {
const chart = this.chart;
const ctx = chart.ctx;
const lastIndex = labels.length - 1;
chart.data.datasets.forEach((dataset, datasetIndex) => {
const meta = chart.getDatasetMeta(datasetIndex);
if (meta.hidden) return;
const lastPoint = meta.data[lastIndex];
if (!lastPoint) return;
const value = dataset.data[lastIndex];
const x = lastPoint.x;
const y = lastPoint.y;
// Style du texte avec fond pour meilleure lisibilité
ctx.save();
ctx.font = 'bold 11px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
const text = value.toFixed(1) + '%';
const textMetrics = ctx.measureText(text);
const textWidth = textMetrics.width;
const textHeight = 14;
const padding = 4;
// Dessiner un rectangle de fond avec la couleur de la courbe
ctx.fillStyle = dataset.borderColor;
ctx.fillRect(
x - textWidth / 2 - padding,
y - textHeight - padding - 8,
textWidth + padding * 2,
textHeight + padding * 2
);
// Dessiner le texte en blanc
ctx.fillStyle = '#ffffff';
ctx.fillText(text, x, y - 8);
ctx.restore();
});
}
} }
} }
}); });