osm-commerces/templates/admin/stats_history.html.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"></canvas>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('completionHistoryChart').getContext('2d');
    
    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
            }]
        },
        options: {
            responsive: true,
            plugins: {
                title: {
                    display: true,
                    text: 'Évolution du taux de complétion au fil du temps'
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100,
                    title: {
                        display: true,
                        text: 'Complétion (%)'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Date'
                    }
                }
            }
        }
    });
});
</script>