mirror of
https://forge.chapril.org/tykayn/osm-commerces
synced 2025-10-04 17:04:53 +02:00
add bubble chart, fix dashboard perf
This commit is contained in:
Tykayn
tykayn
parent
ca00f8c0be
commit
ad4170db14
8 changed files with 335 additions and 248 deletions
|
|
@ -23,6 +23,7 @@
|
|||
overflow-y: auto;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
}
|
||||
.suggestion-item {
|
||||
padding: 8px 12px;
|
||||
|
|
@ -57,8 +58,43 @@
|
|||
<h1 class="mb-4">Tableau de bord</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Statistiques des villes (nombre de commerces)
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="statsBubbleChart" style="min-height: 400px; width: 100%;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Labourer une ville</h3>
|
||||
<form id="labourerForm">
|
||||
<div class="search-container">
|
||||
<input type="text"
|
||||
id="citySearch"
|
||||
class="form-control"
|
||||
placeholder="Rechercher une ville..."
|
||||
autocomplete="off">
|
||||
<div id="citySuggestions" class="suggestion-list"></div>
|
||||
</div>
|
||||
<input type="hidden" name="zip_code" id="selectedZipCode">
|
||||
<button type="submit" class="btn btn-primary mt-3">Labourer cette ville</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<h2>Statistiques par ville</h2>
|
||||
<div class="table-responsive">
|
||||
|
|
@ -69,6 +105,7 @@
|
|||
<th>Code postal</th>
|
||||
<th>Complétion</th>
|
||||
<th>Nombre de commerces</th>
|
||||
<th>Lieux par habitants</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
@ -84,7 +121,8 @@
|
|||
</a></td>
|
||||
<td>{{ stat.zone }}</td>
|
||||
<td>{{ stat.completionPercent }}%</td>
|
||||
<td>{{ stat.places|length }}</td>
|
||||
<td>{{ stat.placesCount }}</td>
|
||||
<td>{{ (stat.placesCount / (stat.population or 1 ))|round(2) }}</td>
|
||||
<td>
|
||||
<div class="btn-group" role="group">
|
||||
<a href="{{ path('app_admin_stats', {'insee_code': stat.zone}) }}" class="btn btn-sm btn-primary" title="Voir les statistiques de cette ville">
|
||||
|
|
@ -114,31 +152,119 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include 'public/labourage-form.html.twig' %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block javascripts %}
|
||||
{{ parent() }}
|
||||
<script src='{{ asset('js/maplibre/maplibre-gl.js') }}'></script>
|
||||
<script src='{{ asset('js/utils.js') }}'></script>
|
||||
{# Les scripts sont maintenant gérés par Webpack Encore via app.js #}
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Initialiser les tooltips Bootstrap
|
||||
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
||||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
return new bootstrap.Tooltip(tooltipTriggerEl)
|
||||
});
|
||||
const statsDataRaw = [
|
||||
{% for stat in stats %}
|
||||
{% if stat.placesCount > 0 and stat.name is not null and stat.population > 0 %}
|
||||
{
|
||||
label: '{{ (stat.name ~ " (" ~ stat.zone ~ ")")|e('js') }}',
|
||||
placesCount: {{ stat.placesCount }},
|
||||
completion: {{ stat.completionPercent|default(0) }},
|
||||
x: {{ stat.population }},
|
||||
y: {{ (stat.placesCount / stat.population * 1000)|round(2) }}
|
||||
},
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
];
|
||||
|
||||
// Colorer les cellules de pourcentage
|
||||
colorizePercentageCells('td:nth-child(3)');
|
||||
// colorier selon le nombre de lieux
|
||||
colorizePercentageCellsRelative('td:nth-child(4)', '154, 205, 50');
|
||||
|
||||
enableLabourageForm();
|
||||
performSearch('dieppe');
|
||||
const ctx = document.getElementById('statsBubbleChart');
|
||||
if (ctx && statsDataRaw.length > 0) {
|
||||
const statsData = statsDataRaw.map(d => ({
|
||||
...d,
|
||||
r: Math.sqrt(d.placesCount) * 2.5 // Utilise la racine carrée pour la taille, avec un facteur d'échelle
|
||||
}));
|
||||
|
||||
new Chart(ctx.getContext('2d'), {
|
||||
type: 'bubble',
|
||||
data: {
|
||||
datasets: [{
|
||||
label: 'Commerces par ville',
|
||||
data: statsData,
|
||||
backgroundColor: statsData.map(d => `hsla(120, 60%, 70%, ${d.completion / 120 + 0.2})`),
|
||||
borderColor: 'hsl(120, 60%, 40%)',
|
||||
borderWidth: 1,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
const data = context.dataset.data[context.dataIndex];
|
||||
let label = data.label || '';
|
||||
if (label) {
|
||||
label += ': ';
|
||||
}
|
||||
label += `${data.placesCount} commerces, ${data.y} pour 1000 hab., ${data.completion}% complétion`;
|
||||
return label;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
type: 'logarithmic',
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Population (échelle log)'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Commerces pour 1000 habitants'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// La fonction est maintenant globale grâce à l'import dans app.js
|
||||
if (typeof colorizePercentageCells === 'function') {
|
||||
colorizePercentageCells('td:nth-child(3)');
|
||||
}
|
||||
|
||||
// Gérer le formulaire de labourage
|
||||
const labourageForm = document.getElementById('labourerForm');
|
||||
const citySearchInput = document.getElementById('citySearch');
|
||||
const selectedZipCodeInput = document.getElementById('selectedZipCode');
|
||||
const labourageBtn = labourageForm.querySelector('button[type="submit"]');
|
||||
const originalBtnHtml = labourageBtn.innerHTML;
|
||||
|
||||
if (labourageForm && citySearchInput && typeof setupCitySearch === 'function') {
|
||||
setupCitySearch('citySearch', 'citySuggestions', function (suggestion) {
|
||||
// Afficher le spinner et désactiver le bouton
|
||||
labourageBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Chargement...';
|
||||
labourageBtn.disabled = true;
|
||||
citySearchInput.disabled = true;
|
||||
|
||||
if (suggestion.insee) {
|
||||
window.location.href = `/admin/labourer/${suggestion.insee}`;
|
||||
} else if (suggestion.postcode) {
|
||||
// Moins probable, mais en solution de repli
|
||||
window.location.href = `/admin/labourer/${suggestion.postcode}`;
|
||||
}
|
||||
});
|
||||
|
||||
labourageForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
alert("Veuillez rechercher et sélectionner une ville directement dans la liste de suggestions.");
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row city-list ">
|
||||
|
||||
<div id="stats_bubble"></div>
|
||||
<div class="mt-5">
|
||||
<h2><i class="bi bi-geo-alt"></i> Villes disponibles</h2>
|
||||
<p>Visualisez un tableau de bord de la complétion des commerces et autres lieux d'intérêt pour votre ville grâce à OpenStreetMap</p>
|
||||
|
|
@ -238,7 +238,12 @@
|
|||
}, 500);
|
||||
});
|
||||
enableLabourageForm();
|
||||
|
||||
|
||||
function displayStatsBubble(){
|
||||
const statsBubble = document.querySelector('#stats_bubble');
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue