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

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

{% block title %}Graphe thématique : {{ label }} - {{ stats.name }}{% endblock %}

{% block body %}
<div class="container mt-4">
    <h1><i class="bi {{ icon }} fs-2"></i> {{ label }} <small class="text-muted">- {{ stats.name }}</small></h1>
    <canvas id="embedThemeChart" width="600" height="400"></canvas>
    <div class="mb-3 mt-2">
        <a href="{{ path('app_admin_stats', {'insee_code': stats.zone}) }}" class="btn btn-info me-2">
            <i class="bi bi-bar-chart"></i> Voir la page de la ville
        </a>
        <a href="{{ path('admin_followup_theme_graph', {'insee_code': stats.zone, 'theme': theme}) }}" class="btn btn-primary me-2">
            <i class="bi bi-graph-up"></i> Graphe détaillé
        </a>
        <a href="{{ path('app_public_index') }}" target="_blank" class="btn btn-success me-2">
            <i class="bi bi-globe"></i> OSM Mon Commerce
        </a>
    </div>
</div>
{% endblock %}

{% block javascripts %}
{{ parent() }}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@3.0.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<script>
const series = {{ series|json_encode|raw }};
const theme = {{ theme|json_encode|raw }};
const label = {{ label|json_encode|raw }};
const countData = (series[theme + '_count'] || []).map(e => ({x: e.date, y: e.value}));
const completionData = (series[theme + '_completion'] || []).map(e => ({x: e.date, y: e.value}));
const canvas = document.getElementById('embedThemeChart');
if (canvas) {
    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: label
                },
                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]
    });
}
// Affichage de la progression sur une semaine
function getDelta(data, days) {
    if (!data.length) return null;
    
    const now = new Date(data[data.length - 1].x);
    const refDate = new Date(now.getTime() - days * 24 * 60 * 60 * 1000);
    const last = data[data.length - 1].y;
    
    // Chercher la mesure exacte à la date de référence
    let exactRef = null;
    for (let i = data.length - 1; i >= 0; i--) {
        const d = new Date(data[i].x);
        if (d <= refDate) {
            exactRef = data[i].y;
            break;
        }
    }
    
    // Si on a trouvé une mesure exacte, l'utiliser
    if (exactRef !== null) {
        return last - exactRef;
    }
    
    // Sinon, chercher les deux mesures les plus proches pour faire une interpolation
    let beforeRef = null;
    let afterRef = null;
    let beforeDate = null;
    let afterDate = null;
    
    // Chercher la mesure juste avant la date de référence
    for (let i = data.length - 1; i >= 0; i--) {
        const d = new Date(data[i].x);
        if (d < refDate) {
            beforeRef = data[i].y;
            beforeDate = d;
            break;
        }
    }
    
    // Chercher la mesure juste après la date de référence
    for (let i = 0; i < data.length; i++) {
        const d = new Date(data[i].x);
        if (d > refDate) {
            afterRef = data[i].y;
            afterDate = d;
            break;
        }
    }
    
    // Si on a les deux mesures, faire une interpolation linéaire
    if (beforeRef !== null && afterRef !== null && beforeDate !== null && afterDate !== null) {
        const timeDiff = afterDate.getTime() - beforeDate.getTime();
        const refTimeDiff = refDate.getTime() - beforeDate.getTime();
        const ratio = refTimeDiff / timeDiff;
        const interpolatedRef = beforeRef + (afterRef - beforeRef) * ratio;
        return last - interpolatedRef;
    }
    
    // Si on n'a qu'une mesure avant, l'utiliser
    if (beforeRef !== null) {
        return last - beforeRef;
    }
    
    // Si on n'a qu'une mesure après, l'utiliser
    if (afterRef !== null) {
        return last - afterRef;
    }
    
    // Si aucune mesure n'est disponible, retourner null
    return null;
}

function formatDelta(val) {
    if (val === null) return 'Pas de données';
    if (val === 0) return '0';
    return (val > 0 ? '+' : '') + val;
}

const delta7dCount = getDelta(countData, 7);
const delta7dCompletion = getDelta(completionData, 7);

const infoDiv = document.createElement('div');
infoDiv.className = 'mt-3 alert ' + (delta7dCount === null ? 'alert-secondary' : 'alert-info');

let progressionText = '';
if (delta7dCount === null) {
    progressionText = '<span title="Données insuffisantes pour calculer la progression">Aucune donnée</span>';
} else {
    const countText = delta7dCount > 0 ? '+' + delta7dCount : delta7dCount === 0 ? '0' : delta7dCount;
    const completionText = delta7dCompletion !== null ? 
        (delta7dCompletion > 0 ? '+' + delta7dCompletion.toFixed(1) : delta7dCompletion === 0 ? '0' : delta7dCompletion.toFixed(1)) + '%' : 
        'N/A';
    progressionText = `${countText} objets, ${completionText} complétion`;
}

infoDiv.innerHTML = `<strong>Progression sur 7 jours :</strong> ${progressionText}`;
canvas.parentNode.appendChild(infoDiv);
</script>
{% endblock %}