tykayn/osm-labo
1
0
Fork 0
Code Issues Pull requests 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

39
templates/public/dashboard.html.twig
View file

@ -47,6 +47,22 @@
position: relative;
margin-bottom: 1rem;
}
@media (max-width: 768px) {
.bubble-chart-container {
min-height: 300px;
height: 60vw;
max-height: 400px;
overflow-x: auto;
}
}
@media (min-width: 769px) {
.bubble-chart-container {
min-height: 400px;
height: 50vw;
max-height: 600px;
overflow-x: auto;
}
}
</style>
{% endblock %}
@ -59,16 +75,26 @@
</div>
</div>
<div class="row mb-2">
<div class="col-12 text-end">
<div class="form-check form-switch d-inline-block">
<input class="form-check-input" type="checkbox" id="toggleBubbleSize" checked>
<label class="form-check-label" for="toggleBubbleSize">
Taille des bulles proportionnelle au nombre de lieux
</label>
</div>
</div>
</div>
<div class="row mb-4">
<div class="col-12">
<div class="card">
<div class="card-header">
Statistiques des villes (nombre de commerces)
Statistiques des villes (bubble chart)
</div>
<div class="card-body">
<canvas id="statsBubbleChart" style="min-height: 400px; width: 100%;" data-stats="{{ stats|raw }}"></canvas>
<div class="card-body bubble-chart-container">
<canvas id="bubbleChart" style="width: 100%; height: 100%; min-height: 300px;"></canvas>
</div>
<pre>
</div>
</div>
</div>
@ -177,10 +203,11 @@
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<script>
window.statsDataForBubble = {{ stats|raw }};
document.addEventListener('DOMContentLoaded', function() {
const chartCanvas = document.getElementById('statsBubbleChart');
const chartCanvas = document.getElementById('bubbleChart');
if (!chartCanvas) {
console.warn('Canvas #statsBubbleChart introuvable');
console.warn('Canvas #bubbleChart introuvable');
return;
}
const statsData = {{ stats|raw }};