osm-labo/templates/admin/followup_graph.html.twig

{% extends 'base.html.twig' %}

{% block title %}Suivi des objets OSM - {{ stats.name }}{% endblock %}

{% block body %}
<div class="container mt-4">
    <h1>Suivi des objets OSM pour {{ stats.name }} ({{ stats.zone }})</h1>
    <p>Historique des bornes incendie et bornes de recharge (nombre et complétion).</p>

    <h2>Bornes de recharge</h2>
    <canvas id="chargingStationChart" width="600" height="300"></canvas>

    <h2>Bornes incendie</h2>
    <canvas id="fireHydrantChart" width="600" height="300"></canvas>

    <h2 class="mt-4">Données brutes</h2>
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Date</th>
                <th>Type</th>
                <th>Label</th>
                <th>Valeur</th>
            </tr>
        </thead>
        <tbody>
            {% for type, points in series %}
                {% for point in points %}
                    <tr>
                        <td>{{ point.date }}</td>
                        <td>{{ type }}</td>
                        <td>{{ point.name }}</td>
                        <td>{{ point.value }}</td>
                    </tr>
                {% endfor %}
            {% endfor %}
        </tbody>
    </table>

    <a href="{{ path('app_admin_stats', {'insee_code': stats.zone}) }}" class="btn btn-secondary mt-3"><i class="bi bi-arrow-left"></i> Retour à la fiche ville</a>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script src="/js/chartjs/chart.umd.js"></script>
<script src="/js/chartjs/chartjs-adapter-date-fns.js"></script>
<script>
    // Log du contenu de la variable series
    console.log('series', {{ series|json_encode|raw }});

    // Données bornes de recharge
    const chargingStationCount = [
        {% for point in series['charging_station_count'] ?? [] %}
            { x: "{{ point.date }}", y: {{ point.value }} },
        {% endfor %}
    ];
    const chargingStationCompletion = [
        {% for point in series['charging_station_completion'] ?? [] %}
            { x: "{{ point.date }}", y: {{ point.value }} },
        {% endfor %}
    ];

    // Données bornes incendie
    const fireHydrantCount = [
        {% for point in series['fire_hydrant_count'] ?? [] %}
            { x: "{{ point.date }}", y: {{ point.value }} },
        {% endfor %}
    ];
    const fireHydrantCompletion = [
        {% for point in series['fire_hydrant_completion'] ?? [] %}
            { x: "{{ point.date }}", y: {{ point.value }} },
        {% endfor %}
    ];

    // Log des tableaux JS générés
    console.log('chargingStationCount', chargingStationCount);
    console.log('chargingStationCompletion', chargingStationCompletion);
    console.log('fireHydrantCount', fireHydrantCount);
    console.log('fireHydrantCompletion', fireHydrantCompletion);

    // Graphique bornes de recharge
    new Chart(document.getElementById('chargingStationChart'), {
        type: 'line',
        data: {
            datasets: [
                {
                    label: 'Nombre de bornes de recharge',
                    data: chargingStationCount,
                    borderColor: 'blue',
                    backgroundColor: 'rgba(0,0,255,0.1)',
                    fill: false,
                    yAxisID: 'y',
                },
                {
                    label: 'Complétion (%)',
                    data: chargingStationCompletion,
                    borderColor: 'green',
                    backgroundColor: 'rgba(0,255,0,0.1)',
                    fill: false,
                    yAxisID: 'y1',
                }
            ]
        },
        options: {
            // parsing: false,
            responsive: true,
            scales: {
                x: { type: 'time', time: { unit: 'day' }, title: { display: true, text: 'Date' } },
                y: { beginAtZero: true, title: { display: true, text: 'Nombre' } },
                y1: { beginAtZero: true, position: 'right', title: { display: true, text: 'Complétion (%)' }, grid: { drawOnChartArea: false } }
            }
        }
    });

    // Graphique bornes incendie
    new Chart(document.getElementById('fireHydrantChart'), {
        type: 'line',
        data: {
            datasets: [
                {
                    label: 'Nombre de bornes incendie',
                    data: fireHydrantCount,
                    borderColor: 'red',
                    backgroundColor: 'rgba(255,0,0,0.1)',
                    // fill: false,
                    yAxisID: 'y',
                },
                {
                    label: 'Complétion (%)',
                    data: fireHydrantCompletion,
                    borderColor: 'orange',
                    backgroundColor: 'rgba(255,165,0,0.1)',
                    // fill: false,
                    yAxisID: 'y1',
                }
            ]
        },
        options: {
            // parsing: false,
            responsive: true,
            scales: {
                x: { type: 'time', time: { unit: 'day' }, title: { display: true, text: 'Date' } },
                y: { beginAtZero: true, title: { display: true, text: 'Nombre' } },
                y1: { beginAtZero: true, position: 'right', title: { display: true, text: 'Complétion (%)' }, grid: { drawOnChartArea: false } }
            }
        }
    });
</script>
{% endblock %}