osm-commerces/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>
    <div class="mb-3 d-flex flex-wrap gap-2">
        <a href="{{ path('admin_followup', {'insee_code': stats.zone}) }}" class="btn btn-warning">
            <i class="bi bi-arrow-repeat"></i> Mettre à jour les suivis (followup)
        </a>
        <a href="{{ path('app_admin_labourer', {'insee_code': stats.zone, 'deleteMissing': 1}) }}" class="btn btn-primary">
            <i class="bi bi-shovel"></i> Labourer la zone
        </a>
        <a href="{{ path('app_admin_labourer', {'insee_code': stats.zone, 'deleteMissing': 1, 'disableFollowUpCleanup': 1}) }}" class="btn btn-warning" title="Labourer sans nettoyer les suivis OSM">
            <i class="bi bi-shield-check"></i> Labourer (sans nettoyage)
        </a>
        <a href="{{ path('app_admin_stats', {'insee_code': stats.zone}) }}" class="btn btn-info">
            <i class="bi bi-bar-chart"></i> Voir les stats
        </a>
    </div>
    <p>Historique des objets suivis (nombre et complétion).</p>
    {% for type, label in followup_labels %}
        <h2 id="title-{{ type }}"><i class="bi {{ followup_icons[type]|default('bi-question-circle') }} fs-2"></i> {{ label }}</h2>
        <canvas id="{{ type }}Chart" width="600" height="400"></canvas>
        <div class="mb-3">
            {% set overpass_query = '[out:json][timeout:60];\narea["ref:INSEE"="' ~ stats.zone ~ '"]->.searchArea;\n(' ~ followup_overpass[type]|default('') ~ ');\n\n(._;>;);\n\nout meta;\n>;' %}
            <a href="https://overpass-turbo.eu/?Q={{ overpass_query|url_encode }}" target="_blank" class="btn btn-sm btn-outline-primary me-2">
                <i class="bi bi-geo"></i> Voir sur Overpass Turbo
            </a>
            <a href="http://127.0.0.1:8111/import?url=https://overpass-api.de/api/interpreter?data={{ overpass_query|url_encode }}" target="_blank" class="btn btn-sm btn-outline-success">
                <i class="bi bi-box-arrow-in-up-right"></i> Ouvrir dans JOSM
            </a>
            <a href="{{ path('admin_followup_embed_graph', {'insee_code': stats.zone, 'theme': type}) }}" target="_blank" class="btn btn-sm btn-outline-secondary ms-2">
                <i class="bi bi-code-slash"></i> Version embarquée
            </a>
        </div>
        {% include 'admin/_followup_completion_tags.html.twig' with {
            'completion_tags': completion_tags,
            'followup_labels': followup_labels,
            'all_types': [type]
        } %}
    {% endfor %}
    <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 point in all_points %}
                <tr>
                    <td>{{ point.date }}</td>
                    <td>{{ point.type }}</td>
                    <td>{{ point.name }}</td>
                    <td>{{ point.value }}</td>
                </tr>
            {% 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 src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<script>
    const series = {{ series|json_encode|raw }};
    const followupIcons = {{ followup_icons|json_encode|raw }};
    const typeLabels = Object.assign({}, {{ followup_labels|json_encode|raw }});
    document.addEventListener('DOMContentLoaded', function() {
        Object.keys(typeLabels).forEach(function(baseType) {
            const countData = (series[baseType + '_count'] || []).map(pt => ({ x: pt.date, y: pt.value }));
            const completionData = (series[baseType + '_completion'] || []).map(pt => ({ x: pt.date, y: pt.value }));
            const canvasId = baseType + 'Chart';
            const canvas = document.getElementById(canvasId);
            if (!canvas) return;
            // Derniers points
            const lastCount = countData.length ? countData[countData.length - 1].y : '-';
            const lastCompletion = completionData.length ? completionData[completionData.length - 1].y : '-';
            // Date de dernière mise à jour
            const lastDate = countData.length ? countData[countData.length - 1].x : null;
            // Mettre à jour le titre avec l'icône
            const titleElem = document.getElementById('title-' + baseType);
            if (titleElem) {
                const icon = followupIcons[baseType] || 'bi-question-circle';
                titleElem.innerHTML = `<i class="bi ${icon} fs-2"></i> ${typeLabels[baseType]} ( ${lastCount}, ${lastCompletion}%)`;
            }
            // Créer le graphique
            new Chart(canvas, {
                type: 'line',
                data: {
                    datasets: [
                        {
                            label: 'Nombre',
                            data: countData,
                            borderColor: 'blue',
                            backgroundColor: 'rgba(0,0,255,0.1)',
                            fill: false,
                            yAxisID: 'y',
                            datalabels: {
                                align: 'top',
                                anchor: 'end',
                                display: true,
                                formatter: function(value) { return value.y; },
                                font: { weight: 'bold' }
                            }
                        },
                        {
                            label: 'Complétion (%)',
                            data: completionData,
                            borderColor: 'green',
                            backgroundColor: 'rgba(0,255,0,0.1)',
                            fill: false,
                            yAxisID: 'y1',
                            datalabels: {
                                align: 'bottom',
                                anchor: 'end',
                                display: true,
                                formatter: function(value) { return value.y + '%'; },
                                font: { weight: 'bold' }
                            }
                        }
                    ]
                },
                options: {
                    parsing: true,
                    responsive: true,
                    plugins: {
                        title: {
                            display: true,
                            text: `${typeLabels[baseType]} ( ${lastCount}, ${lastCompletion}%)`
                        },
                        datalabels: {
                            display: true
                        },
                        tooltip: {
                            callbacks: {
                                title: function(context) {
                                    // Affiche la date au survol
                                    return context[0].parsed.x ? new Date(context[0].parsed.x).toLocaleString() : '';
                                },
                                label: function(context) {
                                    return context.dataset.label + ': ' + context.parsed.y;
                                }
                            }
                        }
                    },
                    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 }, min: 0, max: 100 }
                    }
                },
                plugins: [ChartDataLabels]
            });
            // Afficher la date de dernière mise à jour sous le graphique
            if (lastDate) {
                const dateDiv = document.createElement('div');
                dateDiv.className = 'text-end text-muted small mb-2';
                dateDiv.innerHTML = `<i class="bi bi-clock-history"></i> Dernière mise à jour : ${new Date(lastDate).toLocaleString()}`;
                canvas.parentNode.insertBefore(dateDiv, canvas.nextSibling);
            }
        });
    });
</script>
{% endblock %}