courbes d'historique

This commit is contained in:
Tykayn 2025-06-19 11:01:44 +02:00 committed by tykayn
parent 06ced163e6
commit d9219db84f
4 changed files with 233 additions and 30 deletions

View file

@ -11,33 +11,124 @@
document.addEventListener('DOMContentLoaded', function() {
const ctx = document.getElementById('completionHistoryChart').getContext('2d');
// Préparer les données pour chaque aspect
const labels = [
{% for stat in statsHistory %}
'{{ stat.date|date('d/m/Y') }}'{% if not loop.last %},{% endif %}
{% endfor %}
];
const completionData = [
{% for stat in statsHistory %}
{{ stat.completionPercent }}{% if not loop.last %},{% endif %}
{% endfor %}
];
const openingHoursData = [
{% for stat in statsHistory %}
{% if stat.placesCount > 0 %}
{{ ((stat.openingHoursCount / stat.placesCount) * 100)|round(1) }}{% if not loop.last %},{% endif %}
{% else %}
0{% if not loop.last %},{% endif %}
{% endif %}
{% endfor %}
];
const addressData = [
{% for stat in statsHistory %}
{% if stat.placesCount > 0 %}
{{ ((stat.addressCount / stat.placesCount) * 100)|round(1) }}{% if not loop.last %},{% endif %}
{% else %}
0{% if not loop.last %},{% endif %}
{% endif %}
{% endfor %}
];
const websiteData = [
{% for stat in statsHistory %}
{% if stat.placesCount > 0 %}
{{ ((stat.websiteCount / stat.placesCount) * 100)|round(1) }}{% if not loop.last %},{% endif %}
{% else %}
0{% if not loop.last %},{% endif %}
{% endif %}
{% endfor %}
];
const siretData = [
{% for stat in statsHistory %}
{% if stat.placesCount > 0 %}
{{ ((stat.siretCount / stat.placesCount) * 100)|round(1) }}{% if not loop.last %},{% endif %}
{% else %}
0{% if not loop.last %},{% endif %}
{% endif %}
{% endfor %}
];
new Chart(ctx, {
type: 'line',
data: {
labels: [
{% for stat in statsHistory %}
'{{ stat.date|date('d/m/Y') }}'{% if not loop.last %},{% endif %}
{% endfor %}
],
datasets: [{
label: 'Taux de complétion (%)',
data: [
{% for stat in statsHistory %}
{{ stat.completionPercent }}{% if not loop.last %},{% endif %}
{% endfor %}
],
borderColor: 'rgb(75, 192, 192)',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
tension: 0.3,
fill: true
}]
labels: labels,
datasets: [
{
label: 'Taux de complétion global (%)',
data: completionData,
borderColor: 'rgb(75, 192, 192)',
backgroundColor: 'rgba(75, 192, 192, 0.1)',
tension: 0.3,
fill: false,
borderWidth: 3
},
{
label: 'Horaires d\'ouverture (%)',
data: openingHoursData,
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.1)',
tension: 0.3,
fill: false,
borderWidth: 2
},
{
label: 'Adresses (%)',
data: addressData,
borderColor: 'rgb(54, 162, 235)',
backgroundColor: 'rgba(54, 162, 235, 0.1)',
tension: 0.3,
fill: false,
borderWidth: 2
},
{
label: 'Sites web (%)',
data: websiteData,
borderColor: 'rgb(255, 205, 86)',
backgroundColor: 'rgba(255, 205, 86, 0.1)',
tension: 0.3,
fill: false,
borderWidth: 2
},
{
label: 'SIRET (%)',
data: siretData,
borderColor: 'rgb(153, 102, 255)',
backgroundColor: 'rgba(153, 102, 255, 0.1)',
tension: 0.3,
fill: false,
borderWidth: 2
}
]
},
options: {
responsive: true,
plugins: {
title: {
display: true,
text: 'Évolution du taux de complétion au fil du temps'
text: 'Évolution des taux de complétion par aspect au fil du temps'
},
legend: {
position: 'top',
labels: {
usePointStyle: true,
padding: 20
}
}
},
scales: {
@ -46,7 +137,7 @@ document.addEventListener('DOMContentLoaded', function() {
max: 100,
title: {
display: true,
text: 'Complétion (%)'
text: 'Pourcentage (%)'
}
},
x: {
@ -55,6 +146,10 @@ document.addEventListener('DOMContentLoaded', function() {
text: 'Date'
}
}
},
interaction: {
intersect: false,
mode: 'index'
}
}
});

View file

@ -128,7 +128,7 @@
{% block javascripts %}
{{ parent() }}
<script src='{{ asset('js/utils.js') }}'></script>
{# <script src='{{ asset('js/utils.js') }}'></script> #}
<script type="module">
import { adjustListGroupFontSize } from '{{ asset('js/utils.js') }}';
document.addEventListener('DOMContentLoaded', function() {