mirror of
https://forge.chapril.org/tykayn/osm-commerces
synced 2025-10-04 17:04:53 +02:00
thèmes en plus, graph embed
This commit is contained in:
Tykayn
tykayn
parent
4300278f15
commit
f4e8c70ead
7 changed files with 327 additions and 9 deletions
98
templates/admin/followup_embed_graph.html.twig
Normal file
98
templates/admin/followup_embed_graph.html.twig
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
{% extends 'base_embed.html.twig' %}
|
||||
|
||||
{% block title %}Graphe thématique : {{ label }}{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="container mt-4">
|
||||
<h1><i class="bi {{ icon }} fs-2"></i> {{ label }}</h1>
|
||||
<canvas id="embedThemeChart" width="600" height="300"></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="https://osm-mon-commerce.fr/?insee={{ stats.zone }}" 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>
|
||||
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',
|
||||
},
|
||||
{
|
||||
label: 'Complétion (%)',
|
||||
data: completionData,
|
||||
borderColor: 'green',
|
||||
backgroundColor: 'rgba(0,255,0,0.1)',
|
||||
fill: false,
|
||||
yAxisID: 'y1',
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
parsing: true,
|
||||
responsive: true,
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: label
|
||||
}
|
||||
},
|
||||
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 } }
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
// 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);
|
||||
let ref = null;
|
||||
for (let i = data.length - 1; i >= 0; i--) {
|
||||
const d = new Date(data[i].x);
|
||||
if (d <= refDate) {
|
||||
ref = data[i].y;
|
||||
break;
|
||||
}
|
||||
}
|
||||
const last = data[data.length - 1].y;
|
||||
return ref !== null ? last - ref : null;
|
||||
}
|
||||
function formatDelta(val) {
|
||||
if (val === null) return '-';
|
||||
if (val === 0) return '0';
|
||||
return (val > 0 ? '+' : '') + val;
|
||||
}
|
||||
const delta7dCount = formatDelta(getDelta(countData, 7));
|
||||
const infoDiv = document.createElement('div');
|
||||
infoDiv.className = 'mt-3 alert alert-info';
|
||||
infoDiv.innerHTML = `<strong>Progression sur 7 jours :</strong> ${delta7dCount}`;
|
||||
canvas.parentNode.appendChild(infoDiv);
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
@ -28,6 +28,9 @@
|
|||
<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>
|
||||
{% endfor %}
|
||||
<h2 class="mt-4">Données brutes</h2>
|
||||
|
|
|
|||
51
templates/base_embed.html.twig
Normal file
51
templates/base_embed.html.twig
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}Welcome!{% endblock %}</title>
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%221.2em%22 font-size=%2296%22>⚫️</text></svg>">
|
||||
|
||||
<link rel="icon" type="image/png" href="{{ asset('logo-osm.png') }}">
|
||||
{# Run `composer require symfony/webpack-encore-bundle` to start using Symfony UX #}
|
||||
{% block stylesheets %}
|
||||
{{ encore_entry_link_tags('app') }}
|
||||
<link href='{{ asset('js/mapbox/mapbox-gl.css') }}' rel='stylesheet' />
|
||||
<!-- CSS Bootstrap -->
|
||||
<link rel="stylesheet" href="{{ asset('css/bootstrap-icons.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('js/bootstrap/bootstrap-icons.min.css') }}">
|
||||
<link href="{{ asset('js/bootstrap/bootstrap.min.css') }}" rel="stylesheet">
|
||||
<!-- CSS personnalisé -->
|
||||
<link rel="stylesheet" href="{{ asset('css/main.css') }}">
|
||||
|
||||
{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
{% for label, messages in app.flashes %}
|
||||
{% for message in messages %}
|
||||
<div class="alert alert-{{ label }} is-{{ label }} alert-dismissible fade show mt-3" role="alert">
|
||||
{{ message }}
|
||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
|
||||
<main class="body-landing">
|
||||
{% block body %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<footer class="main-footer">
|
||||
{% include 'public/nav.html.twig' %}
|
||||
</footer>
|
||||
|
||||
{% block javascripts %}
|
||||
{{ encore_entry_script_tags('app') }}
|
||||
<script src="{{ asset('js/bootstrap/bootstrap.bundle.min.js') }}"></script>
|
||||
<script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block completion_progress %}
|
||||
{% endblock %}
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue