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

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

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

{% block stylesheets %}
    {{ parent() }}
    <link href='{{ asset('css/city-sidebar.css') }}' rel='stylesheet'/>
{% endblock %}

{% block body %}
    <div class="container-fluid">
        <div class="row">
            <!-- Sidebar de navigation -->
            <div class="col-12">
                {% include 'admin/_city_sidebar.html.twig' with {'stats': stats, 'active_menu': 'followup_graph'} %}
            </div>

            <!-- Contenu principal -->
            <div class="col-md-9 col-lg-10 main-content">
                <div class="p-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>
                    <div id="objets_modified_lately">
                        {% set has_change = false %}
                        <table class="table table-bordered table-sm align-middle table-sortable" id="latestDiffsTable">
                            <thead>
                            <tr>
                                <th>Thème</th>
                                <th>
                                    {#                                    <pre> #}

                                    {#                                     {{ dump(adiff_query ) }} #}
                                    {#                                    </pre> #}
                                    {#                                    <a href="https://overpass-turbo.eu/?Q={{ adiff_query|url_encode }}" target="_blank" #}
                                    {#                                       title="Voir les changements des 7 derniers jours sur Overpass Turbo">Évolution 7j #}
                                    {#                                        <i class="bi bi-box-arrow-up-right"></i></a> #}
                                </th>
                                <th>Évolution 30j</th>
                                <th>Évolution 6 mois</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for type, diff in latest_diffs %}
                                {% set has_period_change = (diff.count_diff_7j != 0 or diff.count_diff_30j != 0 or diff.count_diff_6mois != 0) %}
                                {% if has_period_change %}
                                    {% set has_change = true %}
                                    <tr>
                                        <td>
                                            <a href="{{ path('admin_followup_theme_graph', {'insee_code': stats.zone, 'theme': type}) }}"
                                               class="fw-bold text-decoration-none">
                                                {{ tag_emoji(type) }} {{ diff.label }}
                                            </a>
                                        </td>
                                        <td>
                                            {% if diff.count_diff_7j > 0 %}
                                                <i class="bi bi-arrow-up text-success"></i>
                                            {% elseif diff.count_diff_7j < 0 %}
                                                <i class="bi bi-arrow-down text-danger"></i>
                                            {% else %}
                                                <i class="bi bi-arrow-right text-secondary"></i>
                                            {% endif %}
                                            {{ diff.count_diff_7j > 0 ? '+' ~ diff.count_diff_7j : diff.count_diff_7j }}
                                            objets
                                            <br>
                                            <span class="small text-muted">Complétion :
                                {% if diff.completion_diff_7j > 0 %}
                                    <i class="bi bi-arrow-up text-success"></i>
                                {% elseif diff.completion_diff_7j < 0 %}
                                    <i class="bi bi-arrow-down text-danger"></i>
                                {% else %}
                                    <i class="bi bi-arrow-right text-secondary"></i>
                                {% endif %}
                                                {{ diff.completion_diff_7j > 0 ? '+' ~ diff.completion_diff_7j : diff.completion_diff_7j }}%
                            </span>
                                        </td>
                                        <td>
                                            {% if diff.count_diff_30j > 0 %}
                                                <i class="bi bi-arrow-up text-success"></i>
                                            {% elseif diff.count_diff_30j < 0 %}
                                                <i class="bi bi-arrow-down text-danger"></i>
                                            {% else %}
                                                <i class="bi bi-arrow-right text-secondary"></i>
                                            {% endif %}
                                            {{ diff.count_diff_30j > 0 ? '+' ~ diff.count_diff_30j : diff.count_diff_30j }}
                                            objets
                                            <br>
                                            <span class="small text-muted">Complétion :
                                {% if diff.completion_diff_30j > 0 %}
                                    <i class="bi bi-arrow-up text-success"></i>
                                {% elseif diff.completion_diff_30j < 0 %}
                                    <i class="bi bi-arrow-down text-danger"></i>
                                {% else %}
                                    <i class="bi bi-arrow-right text-secondary"></i>
                                {% endif %}
                                                {{ diff.completion_diff_30j > 0 ? '+' ~ diff.completion_diff_30j : diff.completion_diff_30j }}%
                            </span>
                                        </td>
                                        <td>
                                            {% if diff.count_diff_6mois > 0 %}
                                                <i class="bi bi-arrow-up text-success"></i>
                                            {% elseif diff.count_diff_6mois < 0 %}
                                                <i class="bi bi-arrow-down text-danger"></i>
                                            {% else %}
                                                <i class="bi bi-arrow-right text-secondary"></i>
                                            {% endif %}
                                            {{ diff.count_diff_6mois > 0 ? '+' ~ diff.count_diff_6mois : diff.count_diff_6mois }}
                                            objets
                                            <br>
                                            <span class="small text-muted">Complétion :
                                {% if diff.completion_diff_6mois > 0 %}
                                    <i class="bi bi-arrow-up text-success"></i>
                                {% elseif diff.completion_diff_6mois < 0 %}
                                    <i class="bi bi-arrow-down text-danger"></i>
                                {% else %}
                                    <i class="bi bi-arrow-right text-secondary"></i>
                                {% endif %}
                                                {{ diff.completion_diff_6mois > 0 ? '+' ~ diff.completion_diff_6mois : diff.completion_diff_6mois }}%
                            </span>
                                        </td>
                                    </tr>
                                {% endif %}
                            {% endfor %}
                            {% if not has_change %}
                                <tr>
                                    <td colspan="4" class="text-muted">Aucun changement significatif cette semaine.</td>
                                </tr>
                            {% endif %}
                            </tbody>
                        </table>
                    </div>

                    {% 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>
                            <a href="{{ path('admin_followup_theme_graph', {'insee_code': stats.zone, 'theme': type}) }}"
                               target="_blank" class="btn btn-sm btn-outline-secondary ms-2">
                                <i class="bi bi-graph-up-arrow"></i> Détails
                            </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">Évolution du taux de complétion (CTC - Complète tes commerces)</h2>
                    <canvas id="ctcCompletionChart" width="900" height="400"></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 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>
            </div>
        </div>
    </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 src="/assets/js/table-sortable.js"></script>
    <script>
        const series = {{ series|json_encode|raw }};
        const followupIcons = {{ followup_icons|json_encode|raw }};
        const typeLabels = Object.assign({}, {{ followup_labels|json_encode|raw }});
        const ctcCompletionSeries = {% if  ctc_completion_series is defined %}{{ ctc_completion_series|json_encode|raw }} {% else %} []{% endif %};
        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);
                }
            });

            // --- Graphique séparé pour les données CTC ---
            if (Object.keys(ctcCompletionSeries).length > 0) {
                const ctcDatasets = Object.keys(ctcCompletionSeries).map(function (type) {
                    return {
                        label: typeLabels[type.replace('_count', '')] || type,
                        data: ctcCompletionSeries[type].map(pt => ({x: pt.date, y: pt.value})),
                        borderColor: 'orange',
                        backgroundColor: 'rgba(255,165,0,0.1)',
                        fill: false,
                        borderDash: [5, 3],
                        datalabels: {display: false}
                    };
                });
                const ctcCanvas = document.getElementById('ctcCompletionChart');
                if (ctcCanvas) {
                    new Chart(ctcCanvas, {
                        type: 'line',
                        data: {datasets: ctcDatasets},
                        options: {
                            parsing: true,
                            responsive: true,
                            plugins: {
                                title: {
                                    display: true,
                                    text: 'Évolution des complétions (CTC)'
                                },
                                datalabels: {display: false},
                                tooltip: {
                                    callbacks: {
                                        title: function (context) {
                                            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'}}
                            }
                        },
                        plugins: [ChartDataLabels]
                    });
                }
            }
        });
    </script>
{% endblock %}