harmoniser les décomptes de completion sur la page stats
This commit is contained in:
Tykayn
tykayn
parent
b9f57e48b5
commit
060b23f87e
3 changed files with 399 additions and 345 deletions
|
|
@ -4,69 +4,81 @@
|
|||
|
||||
{% block stylesheets %}
|
||||
{{ parent() }}
|
||||
<link href='{{ asset('css/city-sidebar.css') }}' rel='stylesheet' />
|
||||
<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>
|
||||
<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>Évolution 7j</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 :
|
||||
<!-- 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 %}
|
||||
|
|
@ -74,20 +86,21 @@
|
|||
{% else %}
|
||||
<i class="bi bi-arrow-right text-secondary"></i>
|
||||
{% endif %}
|
||||
{{ diff.completion_diff_7j > 0 ? '+' ~ diff.completion_diff_7j : diff.completion_diff_7j }}%
|
||||
{{ 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 :
|
||||
</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 %}
|
||||
|
|
@ -95,20 +108,21 @@
|
|||
{% else %}
|
||||
<i class="bi bi-arrow-right text-secondary"></i>
|
||||
{% endif %}
|
||||
{{ diff.completion_diff_30j > 0 ? '+' ~ diff.completion_diff_30j : diff.completion_diff_30j }}%
|
||||
{{ 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 :
|
||||
</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 %}
|
||||
|
|
@ -116,225 +130,248 @@
|
|||
{% else %}
|
||||
<i class="bi bi-arrow-right text-secondary"></i>
|
||||
{% endif %}
|
||||
{{ diff.completion_diff_6mois > 0 ? '+' ~ diff.completion_diff_6mois : diff.completion_diff_6mois }}%
|
||||
{{ 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>
|
||||
</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>
|
||||
</div>
|
||||
{% include 'admin/_followup_completion_tags.html.twig' with {
|
||||
'completion_tags': completion_tags,
|
||||
'followup_labels': followup_labels,
|
||||
'all_types': [type]
|
||||
} %}
|
||||
{% endfor %}
|
||||
{% 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">É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>
|
||||
<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>
|
||||
</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;
|
||||
{{ 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'}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
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)'
|
||||
text: `${typeLabels[baseType]} ( ${lastCount}, ${lastCompletion}%)`
|
||||
},
|
||||
datalabels: {
|
||||
display: true
|
||||
},
|
||||
datalabels: { display: false },
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
title: function(context) {
|
||||
title: function (context) {
|
||||
// Affiche la date au survol
|
||||
return context[0].parsed.x ? new Date(context[0].parsed.x).toLocaleString() : '';
|
||||
},
|
||||
label: function(context) {
|
||||
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' } }
|
||||
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>
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -150,6 +150,60 @@
|
|||
{{ stats.name }} - {{ stats.completionPercent }}% complété</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="carte" class="section-anchor">
|
||||
<h2>Carte</h2>
|
||||
<div id="maploader">
|
||||
<div class="spinner-border" role="status">
|
||||
<i class="bi bi-load bi-spin"></i>
|
||||
<span class="visually-hidden">Chargement de la carte...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end mb-2">
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn btn-outline-primary" id="circleMarkersBtn">
|
||||
<i class="bi bi-circle"></i> Cercles
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-primary active" id="dropMarkersBtn">
|
||||
<i class="bi bi-geo-alt"></i> Gouttes
|
||||
</button>
|
||||
</div>
|
||||
<button id="btn-geolocate" class="btn btn-outline-primary btn-sm">
|
||||
<i class="bi bi-geo-alt"></i> Me localiser
|
||||
</button>
|
||||
</div>
|
||||
<div id="map" style="height: 400px; width: 100%; margin-bottom: 1rem;"></div>
|
||||
|
||||
<div id="graphiques" class="section-anchor">
|
||||
<h2>Graphiques</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-12">
|
||||
<canvas id="repartition_tags" width="600" height="400"
|
||||
style="max-width:100%; margin: 20px 0;"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="bi bi-calendar-event"></i> Fréquence des mises à jour par
|
||||
trimestre pour {{ stats.name }}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="modificationsByQuarterChart"
|
||||
style="min-height: 250px; width: 100%;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="attribution">
|
||||
<a href="https://www.openstreetmap.org/copyright">Données OpenStreetMap</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if stats.population %}
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-4 col-12">
|
||||
|
|
@ -466,57 +520,6 @@
|
|||
</div>
|
||||
|
||||
|
||||
<div id="carte" class="section-anchor">
|
||||
<h2>Carte</h2>
|
||||
<div id="maploader">
|
||||
<div class="spinner-border" role="status">
|
||||
<i class="bi bi-load bi-spin"></i>
|
||||
<span class="visually-hidden">Chargement de la carte...</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-end mb-2">
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn btn-outline-primary" id="circleMarkersBtn">
|
||||
<i class="bi bi-circle"></i> Cercles
|
||||
</button>
|
||||
<button type="button" class="btn btn-outline-primary active" id="dropMarkersBtn">
|
||||
<i class="bi bi-geo-alt"></i> Gouttes
|
||||
</button>
|
||||
</div>
|
||||
<button id="btn-geolocate" class="btn btn-outline-primary btn-sm">
|
||||
<i class="bi bi-geo-alt"></i> Me localiser
|
||||
</button>
|
||||
</div>
|
||||
<div id="map" style="height: 400px; width: 100%; margin-bottom: 1rem;"></div>
|
||||
|
||||
<div id="graphiques" class="section-anchor">
|
||||
<h2>Graphiques</h2>
|
||||
<div class="row">
|
||||
<div class="col-md-6 col-12">
|
||||
<canvas id="repartition_tags" width="600" height="400"
|
||||
style="max-width:100%; margin: 20px 0;"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="bi bi-calendar-event"></i> Fréquence des mises à jour par
|
||||
trimestre pour {{ stats.name }}
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="modificationsByQuarterChart"
|
||||
style="min-height: 250px; width: 100%;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="attribution">
|
||||
<a href="https://www.openstreetmap.org/copyright">Données OpenStreetMap</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mt-4">
|
||||
{% include 'admin/stats_history.html.twig' with {stat: stats} %}
|
||||
<canvas id="distribution_completion" class="mt-4 mb-4" height="400"></canvas>
|
||||
|
|
@ -718,23 +721,10 @@
|
|||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const geojsonData = {{ geojson|raw }};
|
||||
const map_token = "{{ maptiler_token }}";
|
||||
// Liste des tags attendus pour la complétion des lieux
|
||||
const completionTags = {{ completion_tags['places']|json_encode|raw }};
|
||||
// Calcul de la complétion et des tags manquants pour chaque lieu
|
||||
// Les valeurs de complétion et tags manquants sont maintenant calculées côté serveur
|
||||
// et incluses directement dans les données GeoJSON
|
||||
geojsonData.features.forEach(f => {
|
||||
let filled = 0;
|
||||
let missing = [];
|
||||
if (completionTags && completionTags.length > 0) {
|
||||
completionTags.forEach(tag => {
|
||||
if (f.properties && typeof f.properties[tag] !== 'undefined' && f.properties[tag] !== null && f.properties[tag] !== '') {
|
||||
filled++;
|
||||
} else {
|
||||
missing.push(tag);
|
||||
}
|
||||
});
|
||||
}
|
||||
f.properties.completion = completionTags && completionTags.length > 0 ? Math.round(100 * filled / completionTags.length) : null;
|
||||
// Correction : toujours un tableau
|
||||
// Assurons-nous que missing_tags est toujours un tableau
|
||||
f.properties.missing_tags = Array.isArray(f.properties.missing_tags) ? f.properties.missing_tags : (f.properties.missing_tags ? [f.properties.missing_tags] : []);
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue