tykayn/osm-commerces
1
0
Fork 0
mirror of https://forge.chapril.org/tykayn/osm-commerces synced 2025-10-04 17:04:53 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

refacto js, up graph

Browse source
This commit is contained in:
Tykayn 2025-06-21 18:37:31 +02:00 • committed by tykayn
parent d66bc5e40c
commit 68680e0569
11 changed files with 840 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

150
templates/admin/stats.html.twig
View file

@ -244,14 +244,18 @@
</table>
</div>
<div class="card mt-4">
{# <div class="card mt-4">
<div class="card-header">
<h2>Requête Overpass</h2>
</div>
<div class="card-body">
<canvas id="modificationsByQuarterChart"></canvas>
</div>
</div>
<div id=overPassRequest >
<pre>
{{overpass}}
</pre>
</div>
</div>
</div> #}
<div class="completion-info mt-4">
<div class="alert alert-info">
@ -292,7 +296,7 @@
<div class="accordion mb-3" id="accordionStats">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
</div>
</div>
</div>
<!-- Bouton caché pour JOSM -->
<a id="josmButton" style="display: none;"></a>
@ -301,17 +305,65 @@
{% block javascripts %}
{{ parent() }}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
<script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const geojsonData = {{ geojson|raw }};
console.log('geojsonData', geojsonData)
const map_token = "{{ maptiler_token }}";
let map;
let map_is_loaded = false;
let dropMarkers = [];
let map_is_loaded = false;
let currentMode = 'drop';
// Fonction pour mettre à jour le style des marqueurs
window.updateMarkers = function(mode) {
currentMode = mode;
// Mettre à jour l'état visuel des boutons
document.getElementById('circleMarkersBtn').classList.toggle('active', mode === 'circle');
document.getElementById('dropMarkersBtn').classList.toggle('active', mode === 'drop');
if (!map) return;
// Supprimer la couche si elle existe déjà
if (map.getLayer('unclustered-point')) {
map.removeLayer('unclustered-point');
}
// Ajouter la couche selon le mode
if (mode === 'circle') {
map.addLayer({
id: 'unclustered-point',
type: 'circle',
source: 'places',
filter: ['!', ['has', 'point_count']],
paint: {
'circle-color': [
'case',
['has', 'completion'],
[
'rgb',
['-', 255, ['*', ['get', 'completion'], 2.55]],
['*', ['get', 'completion'], 2.55],
80
],
'#cccccc'
],
'circle-radius': 10,
'circle-stroke-width': 2,
'circle-stroke-color': '#fff'
}
});
} else {
map.addLayer({
id: 'unclustered-point',
type: 'circle',
source: 'places',
filter: ['!', ['has', 'point_count']],
paint: {
'circle-color': '#11b4da',
'circle-radius': 8,
'circle-stroke-width': 2,
'circle-stroke-color': '#fff'
}
});
}
}
if (map_token && geojsonData && geojsonData.features.length > 0) {
map = new maplibregl.Map({
container: 'map',
@ -322,7 +374,7 @@
map.on('load', function() {
map_is_loaded = true;
document.getElementById('maploader').style.display = 'none';
document.getElementById('maploader').style.display = 'none';
map.addSource('places', {
type: 'geojson',
@ -365,20 +417,18 @@
}
});
map.addLayer({
id: 'unclustered-point',
type: 'circle',
source: 'places',
filter: ['!', ['has', 'point_count']],
paint: {
'circle-color': '#11b4da',
'circle-radius': 8,
'circle-stroke-width': 2,
'circle-stroke-color': '#fff'
}
// Par défaut, gouttes bleues
window.updateMarkers('drop');
// Listeners boutons
document.getElementById('circleMarkersBtn').addEventListener('click', function() {
window.updateMarkers('circle');
});
// inspect a cluster on click
document.getElementById('dropMarkersBtn').addEventListener('click', function() {
window.updateMarkers('drop');
});
// Popups et clusters (inchangé)
map.on('click', 'clusters', function(e) {
const features = map.queryRenderedFeatures(e.point, { layers: ['clusters'] });
const clusterId = features[0].properties.cluster_id;
@ -405,10 +455,10 @@
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
new maplibregl.Popup()
new maplibregl.Popup()
.setLngLat(coordinates)
.setHTML(popupContent)
.addTo(map);
.setHTML(popupContent)
.addTo(map);
});
map.on('mouseenter', 'clusters', function() {
@ -436,7 +486,45 @@
openInJOSM(map, map_is_loaded, osmElements);
});
}
// === GRAPHIQUE FRÉQUENCE DES MISES À JOUR PAR TRIMESTRE ===
const modifData = {{ modificationsByQuarter|raw }};
const modifLabels = Object.keys(modifData);
const modifCounts = Object.values(modifData);
const modifCanvas = document.getElementById('modificationsByQuarterChart');
if (modifCanvas && modifLabels.length > 0) {
new Chart(modifCanvas.getContext('2d'), {
type: 'bar',
data: {
labels: modifLabels,
datasets: [{
label: 'Nombre de lieux modifiés',
data: modifCounts,
backgroundColor: 'rgba(54, 162, 235, 0.7)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: { display: false },
title: { display: true, text: 'Fréquence des mises à jour par trimestre' }
},
scales: {
y: { beginAtZero: true, title: { display: true, text: 'Nombre de lieux' } },
x: { title: { display: true, text: 'Trimestre' } }
}
}
});
} else if (modifCanvas) {
modifCanvas.parentNode.innerHTML = '<div class="alert alert-info">Aucune donnée de modification disponible pour cette ville.</div>';
}
});
</script>
<script>
window.modificationsByQuarter = {{ modificationsByQuarter|raw }};
</script>
{% endblock %}