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');
    
    // 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 %}
    ];
    
    new Chart(ctx, {
        type: 'line',
        data: {
            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
                },
                {
                    label: 'Emails (%)',
                    data: emailData,
                    borderColor: 'rgb(199, 199, 199)',
                    backgroundColor: 'rgba(199, 199, 199, 0.1)',
                    tension: 0.3,
                    fill: false,
                    borderWidth: 2
                }
            ]
        },
        options: {
            responsive: true,
            plugins: {
                title: {
                    display: true,
                    text: 'Évolution des taux de complétion par aspect au fil du temps'
                },
                legend: {
                    position: 'top',
                    labels: {
                        usePointStyle: true,
                        padding: 20
                    }
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    max: 100,
                    title: {
                        display: true,
                        text: 'Pourcentage (%)'
                    }
                },
                x: {
                    title: {
                        display: true,
                        text: 'Date'
                    }
                }
            },
            interaction: {
                intersect: false,
                mode: 'index'
            }
        }
    });
});
</script>