109 lines
No EOL
4.7 KiB
Twig
109 lines
No EOL
4.7 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{# {% block title %}Suivi de la rue {{ street }} à {{ city }}{% endblock %} #}
|
|
|
|
{% block stylesheets %}
|
|
{{ parent() }}
|
|
<link href='{{ asset('js/maplibre/maplibre-gl.css') }}' rel='stylesheet'/>
|
|
<style>
|
|
#streetMap { height: 400px; width: 100%; border-radius: 8px; margin-bottom: 2rem; }
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="container my-5">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div>
|
|
<h1>Rue <span class="text-primary">{{ street|e('html') }}</span> à <span class="text-success">{{ city }}</span></h1>
|
|
<a href="{{ stats_url }}" class="btn btn-outline-info my-2"><i class="bi bi-bar-chart"></i> Voir les statistiques de la ville</a>
|
|
</div>
|
|
<a href="{{ path('app_public_index') }}" class="btn btn-secondary"><i class="bi bi-arrow-left"></i> Retour à l'accueil</a>
|
|
</div>
|
|
|
|
<div class="row mb-4">
|
|
<div class="col-md-6 col-12">
|
|
<h3>Répartition de la complétion</h3>
|
|
<canvas id="completionChart" height="200"></canvas>
|
|
</div>
|
|
<div class="col-md-6 col-12">
|
|
<h3>Carte des lieux</h3>
|
|
<div id="streetMap" style="height: 300px; width: 100%; border-radius: 8px;"></div>
|
|
<span class="is-info"> Si il manque des lieux dans cette rue c'est parce que les objets n'ont pas d'attribut "contact:street" et "contact:housenumber". Les addresses des commerces et autres lieux doivent toujours être sur des noeuds distincts dans OpenStreetMap.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="mt-4">Lieux de la rue</h2>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-striped table-hover table-responsive table-sort">
|
|
{% include 'admin/stats/table-head.html.twig' with {stats: {places: places, getAvecAdresse: 0, getAvecSite: 0, getAvecAccessibilite: 0, getAvecNote: 0}} %}
|
|
<tbody>
|
|
{% for commerce in places %}
|
|
{% include 'admin/stats/row.html.twig' with {commerce: commerce, stats: {population: 0, places: places}} %}
|
|
{% else %}
|
|
<tr><td colspan="18" class="text-muted">Aucun lieu trouvé pour cette rue.</td></tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block javascripts %}
|
|
{{ parent() }}
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="{{ asset('js/maplibre/maplibre-gl.js') }}"></script>
|
|
<script>
|
|
// Graphe de complétion
|
|
const completionData = {
|
|
labels: {{ completion_buckets|keys|json_encode|raw }},
|
|
datasets: [{
|
|
label: 'Nombre de lieux',
|
|
data: {{ completion_buckets_values|json_encode|raw }},
|
|
backgroundColor: [
|
|
'#e57373', '#ffb74d', '#fff176', '#81c784', '#64b5f6'
|
|
]
|
|
}]
|
|
};
|
|
new Chart(document.getElementById('completionChart'), {
|
|
type: 'bar',
|
|
data: completionData,
|
|
options: {
|
|
responsive: true,
|
|
plugins: { legend: { display: false } },
|
|
scales: { y: { beginAtZero: true, precision: 0 } }
|
|
}
|
|
});
|
|
|
|
// Carte MapLibre
|
|
const mapToken = '{{ maptiler_token }}';
|
|
const places = {{ places_js|json_encode|raw }};
|
|
let center = [2.35, 48.85];
|
|
if (places.length > 0) {
|
|
const avgLat = places.reduce((sum, p) => sum + (p.lat || 0), 0) / places.length;
|
|
const avgLon = places.reduce((sum, p) => sum + (p.lon || 0), 0) / places.length;
|
|
center = [avgLon, avgLat];
|
|
}
|
|
const map = new maplibregl.Map({
|
|
container: 'streetMap',
|
|
style: `https://api.maptiler.com/maps/streets/style.json?key=${mapToken}`,
|
|
center: center,
|
|
zoom: 16
|
|
});
|
|
// Couleurs selon la complétion
|
|
function getColor(percentage) {
|
|
if (percentage < 20) return '#e57373';
|
|
if (percentage < 40) return '#ffb74d';
|
|
if (percentage < 60) return '#fff176';
|
|
if (percentage < 80) return '#81c784';
|
|
return '#64b5f6';
|
|
}
|
|
places.forEach(place => {
|
|
if (place.lat && place.lon) {
|
|
new maplibregl.Marker({color: getColor(place.completionPercentage)})
|
|
.setLngLat([place.lon, place.lat])
|
|
.setPopup(new maplibregl.Popup().setHTML(`<strong>${place.name || '(sans nom)'}</strong><br>Complétion : ${place.completionPercentage}%`))
|
|
.addTo(map);
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %} |