252 lines
9 KiB
Twig
252 lines
9 KiB
Twig
<div class="card mt-4">
|
|
<div class="card-header">
|
|
<h2>Évolution du taux de complétion</h2>
|
|
</div>
|
|
<div class="card-body">
|
|
<canvas id="completionHistoryChart" height="400" style="height:400px !important; max-height:400px; min-height:200px;"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
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|reverse %}
|
|
'{{ stat.date|date('d/m/Y') }}'{% if not loop.last %},{% endif %}
|
|
{% endfor %}
|
|
];
|
|
|
|
const completionData = [
|
|
{% for stat in statsHistory|reverse %}
|
|
{{ stat.completionPercent }}{% if not loop.last %},{% endif %}
|
|
{% endfor %}
|
|
];
|
|
|
|
const openingHoursData = [
|
|
{% for stat in statsHistory|reverse %}
|
|
{% 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|reverse %}
|
|
{% 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|reverse %}
|
|
{% 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|reverse %}
|
|
{% 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 %}
|
|
];
|
|
|
|
const emailData = [
|
|
{% for stat in statsHistory|reverse %}
|
|
{% if stat.placesCount > 0 %}
|
|
{{ ((stat.emailsCount / stat.placesCount) * 100)|round(1) }}{% if not loop.last %},{% endif %}
|
|
{% else %}
|
|
0{% if not loop.last %},{% endif %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
];
|
|
const completionStat = {{stat.getCompletionPercent()}}
|
|
|
|
// 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',
|
|
data: {
|
|
labels: labels,
|
|
datasets: [
|
|
createDatasetWithLastLabel(
|
|
'Taux de complétion global (%)',
|
|
completionData,
|
|
'rgb(75, 192, 192)',
|
|
'rgba(75, 192, 192, 0.1)',
|
|
3,
|
|
false
|
|
),
|
|
createDatasetWithLastLabel(
|
|
'Horaires d\'ouverture (%)',
|
|
openingHoursData,
|
|
'rgb(255, 99, 132)',
|
|
'rgba(255, 99, 132, 0.1)',
|
|
2,
|
|
false
|
|
),
|
|
createDatasetWithLastLabel(
|
|
'Adresses (%)',
|
|
addressData,
|
|
'rgb(54, 162, 235)',
|
|
'rgba(54, 162, 235, 0.1)',
|
|
2,
|
|
false
|
|
),
|
|
createDatasetWithLastLabel(
|
|
'Sites web (%)',
|
|
websiteData,
|
|
'rgb(255, 205, 86)',
|
|
'rgba(255, 205, 86, 0.1)',
|
|
2,
|
|
false
|
|
),
|
|
createDatasetWithLastLabel(
|
|
'SIRET (%)',
|
|
siretData,
|
|
'rgb(153, 102, 255)',
|
|
'rgba(153, 102, 255, 0.1)',
|
|
2,
|
|
false
|
|
),
|
|
createDatasetWithLastLabel(
|
|
'Emails (%)',
|
|
emailData,
|
|
'rgb(199, 199, 199)',
|
|
'rgba(199, 199, 199, 0.1)',
|
|
2,
|
|
false
|
|
)
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
max: 100,
|
|
title: {
|
|
display: true,
|
|
text: 'Pourcentage (%)'
|
|
}
|
|
},
|
|
x: {
|
|
title: {
|
|
display: true,
|
|
text: 'Date'
|
|
}
|
|
}
|
|
},
|
|
interaction: {
|
|
intersect: false,
|
|
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();
|
|
});
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|