fix pages zones
This commit is contained in:
Tykayn
tykayn
parent
1c24ae1fea
commit
00977d4fba
9 changed files with 6085 additions and 433 deletions
|
|
@ -4,16 +4,18 @@
|
|||
|
||||
{% block stylesheets %}
|
||||
{{ parent() }}
|
||||
<link href='{{ asset('js/maplibre/maplibre-gl.css') }}' rel='stylesheet' />
|
||||
<link href='{{ asset('js/maplibre/maplibre-gl.css') }}' rel='stylesheet'/>
|
||||
<style>
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mapDashboard {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.suggestion-list {
|
||||
position: absolute;
|
||||
background: white;
|
||||
|
|
@ -25,28 +27,35 @@
|
|||
z-index: 1000;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.suggestion-item {
|
||||
padding: 8px 12px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.suggestion-item:hover {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.suggestion-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.suggestion-details {
|
||||
font-size: 0.9em;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.suggestion-type {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
position: relative;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.bubble-chart-container {
|
||||
min-height: 300px;
|
||||
|
|
@ -55,6 +64,7 @@
|
|||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 769px) {
|
||||
.bubble-chart-container {
|
||||
min-height: 400px;
|
||||
|
|
@ -68,81 +78,83 @@
|
|||
|
||||
|
||||
{% block body %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h1 class="mb-4">Tableau de bord</h1>
|
||||
</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 class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h1 class="mb-4">Tableau de bord</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Statistiques des villes (bubble chart)
|
||||
</div>
|
||||
<div class="card-body bubble-chart-container">
|
||||
<canvas id="bubbleChart" style="width: 100%; height: 100%; min-height: 300px;"></canvas>
|
||||
</div>
|
||||
<p>Plus une ville est en haut, plus ses informations sont complètes. Plus elle est à droite, plus elle à été modifiée récemment en moyenne. La taille de la bulle donne le nombre de lieux d'intérêt repérés dans la ville.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Fraîcheur des données OSM (âge moyen par trimestre)
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="freshnessHistogram" style="min-height: 300px; width: 100%;"></canvas>
|
||||
<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>
|
||||
|
||||
<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 class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Statistiques des villes (bubble chart)
|
||||
</div>
|
||||
<div class="card-body bubble-chart-container">
|
||||
<canvas id="bubbleChart" style="width: 100%; height: 100%; min-height: 300px;"></canvas>
|
||||
</div>
|
||||
<p>Plus une ville est en haut, plus ses informations sont complètes. Plus elle est à droite, plus
|
||||
elle à été modifiée récemment en moyenne. La taille de la bulle donne le nombre de lieux
|
||||
d'intérêt repérés dans la ville.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-4">
|
||||
<div class="col-12">
|
||||
<h2>Statistiques par ville</h2>
|
||||
|
||||
<div class="table-container" >
|
||||
<div class="table-responsive">
|
||||
<table id="dashboard-table" class="table table-striped table-sort">
|
||||
<thead>
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
Fraîcheur des données OSM (âge moyen par trimestre)
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<canvas id="freshnessHistogram" style="min-height: 300px; 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-container">
|
||||
<div class="table-responsive">
|
||||
<table id="dashboard-table" class="table table-striped table-sort">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Ville</th>
|
||||
<th>Code postal</th>
|
||||
|
|
@ -155,11 +167,13 @@
|
|||
<th>Date moyenne de mise à jour</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for stat in stats_list %}
|
||||
<tr>
|
||||
<td><a href="{{ path('app_admin_stats', {'insee_code': stat.zone}) }}" title="Voir les statistiques de cette ville">
|
||||
{% if stat.zone != 'undefined' and stat.zone matches '/^\\d+$/' %}
|
||||
<tr>
|
||||
<td><a href="{{ path('app_admin_stats', {'insee_code': stat.zone}) }}"
|
||||
title="Voir les statistiques de cette ville">
|
||||
{% if stat.name %}
|
||||
{{ stat.name }}
|
||||
{% else %}
|
||||
|
|
@ -174,45 +188,48 @@
|
|||
{% endif %}
|
||||
{% endif %}
|
||||
</a></td>
|
||||
<td>{{ stat.zone }}</td>
|
||||
<td>{{ stat.completionPercent }}%</td>
|
||||
<td>{{ stat.placesCount }}</td>
|
||||
<td>{{ (stat.placesCount / (stat.population or 1 ))|round(2) }}</td>
|
||||
<td>{% if stat.budgetAnnuel %}{{ (stat.budgetAnnuel / 1000000)|number_format(1, '.', ' ') }} M€{% else %}-{% endif %}</td>
|
||||
<td>{% if stat.budgetAnnuel and stat.population %}{{ (stat.budgetAnnuel / stat.population)|number_format(0, '.', ' ') }} €{% else %}-{% endif %}</td>
|
||||
<td>{% if stat.budgetAnnuel and stat.placesCount %}{{ (stat.budgetAnnuel / stat.placesCount)|number_format(0, '.', ' ') }} €{% else %}-{% endif %}</td>
|
||||
<td>{{ stat.osmDataDateAvg|date('Y-m-d H:i') }}</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">
|
||||
<i class="bi bi-eye"></i>
|
||||
</a>
|
||||
<a href="{{ path('app_admin_labourer', {'insee_code': stat.zone, 'deleteMissing': 1}) }}"
|
||||
class="btn btn-sm btn-success btn-labourer"
|
||||
data-zip-code="{{ stat.zone }}"
|
||||
title="Labourer cette ville"
|
||||
>
|
||||
<i class="bi bi-recycle"></i>
|
||||
</a>
|
||||
|
||||
<a href="{{ path('app_admin_delete_by_zone', {'insee_code': stat.zone}) }}"
|
||||
class="btn btn-sm btn-danger"
|
||||
onclick="return confirm('Êtes-vous sûr de vouloir supprimer cette zone ?')"
|
||||
title="Supprimer cette ville"
|
||||
>
|
||||
<i class="bi bi-trash"></i>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<td>{{ stat.zone }}</td>
|
||||
<td>{{ stat.completionPercent }}%</td>
|
||||
<td>{{ stat.placesCount }}</td>
|
||||
<td>{{ (stat.placesCount / (stat.population or 1 ))|round(2) }}</td>
|
||||
<td>{% if stat.budgetAnnuel %}{{ (stat.budgetAnnuel / 1000000)|number_format(1, '.', ' ') }} M€{% else %}-{% endif %}</td>
|
||||
<td>{% if stat.budgetAnnuel and stat.population %}{{ (stat.budgetAnnuel / stat.population)|number_format(0, '.', ' ') }} €{% else %}-{% endif %}</td>
|
||||
<td>{% if stat.budgetAnnuel and stat.placesCount %}{{ (stat.budgetAnnuel / stat.placesCount)|number_format(0, '.', ' ') }} €{% else %}-{% endif %}</td>
|
||||
<td>{{ stat.osmDataDateAvg|date('Y-m-d H:i') }}</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">
|
||||
<i class="bi bi-eye"></i>
|
||||
</a>
|
||||
<a href="{{ path('app_admin_labourer', {'insee_code': stat.zone, 'deleteMissing': 1}) }}"
|
||||
class="btn btn-sm btn-success btn-labourer"
|
||||
data-zip-code="{{ stat.zone }}"
|
||||
title="Labourer cette ville"
|
||||
>
|
||||
<i class="bi bi-recycle"></i>
|
||||
</a>
|
||||
|
||||
<a href="{{ path('app_admin_delete_by_zone', {'insee_code': stat.zone}) }}"
|
||||
class="btn btn-sm btn-danger"
|
||||
onclick="return confirm('Êtes-vous sûr de vouloir supprimer cette zone ?')"
|
||||
title="Supprimer cette ville"
|
||||
>
|
||||
<i class="bi bi-trash"></i>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
|
|
@ -221,220 +238,220 @@
|
|||
<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('bubbleChart');
|
||||
if (!chartCanvas) {
|
||||
console.warn('Canvas #bubbleChart introuvable');
|
||||
return;
|
||||
}
|
||||
const statsData = {{ stats|raw }};
|
||||
console.log('statsData', statsData);
|
||||
|
||||
if (!statsData || statsData.length === 0) {
|
||||
chartCanvas.parentNode.innerHTML += '<div class="text-muted p-3">Aucune donnée de statistiques à afficher pour le graphique.</div>';
|
||||
return;
|
||||
}
|
||||
const bubbleChartData = statsData.map(stat => {
|
||||
const population = parseInt(stat.population, 10);
|
||||
const placesCount = parseInt(stat.placesCount, 10);
|
||||
const ratio = population > 0 ? (placesCount / population) * 1000 : 0;
|
||||
return {
|
||||
x: population,
|
||||
y: ratio,
|
||||
r: Math.sqrt(placesCount) * 2,
|
||||
label: stat.name,
|
||||
completion: stat.completionPercent || 0
|
||||
};
|
||||
});
|
||||
// Calcul de la régression linéaire (moindres carrés)
|
||||
const validPoints = bubbleChartData.filter(d => d.x > 0 && d.y > 0);
|
||||
const n = validPoints.length;
|
||||
let regressionLine = null, slope = 0, intercept = 0;
|
||||
if (n >= 2) {
|
||||
let sumX = 0, sumY = 0, sumXY = 0, sumXX = 0;
|
||||
validPoints.forEach(d => {
|
||||
sumX += Math.log10(d.x);
|
||||
sumY += d.y;
|
||||
sumXY += Math.log10(d.x) * d.y;
|
||||
sumXX += Math.log10(d.x) * Math.log10(d.x);
|
||||
});
|
||||
const meanX = sumX / n;
|
||||
const meanY = sumY / n;
|
||||
slope = (sumXY - n * meanX * meanY) / (sumXX - n * meanX * meanX);
|
||||
intercept = meanY - slope * meanX;
|
||||
const xMin = Math.min(...validPoints.map(d => d.x));
|
||||
const xMax = Math.max(...validPoints.map(d => d.x));
|
||||
regressionLine = [
|
||||
{ x: xMin, y: slope * Math.log10(xMin) + intercept },
|
||||
{ x: xMax, y: slope * Math.log10(xMax) + intercept }
|
||||
];
|
||||
}
|
||||
Chart.register(window.ChartDataLabels);
|
||||
const bubbleChart = new Chart(chartCanvas.getContext('2d'), {
|
||||
type: 'bubble',
|
||||
data: {
|
||||
datasets: [
|
||||
{
|
||||
label: 'Villes',
|
||||
data: bubbleChartData,
|
||||
backgroundColor: bubbleChartData.map(d => `rgba(75, 192, 192, ${d.completion / 100})`),
|
||||
borderColor: 'rgba(75, 192, 192, 1)',
|
||||
},
|
||||
].filter(Boolean)
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
datalabels: {
|
||||
anchor: 'center',
|
||||
align: 'center',
|
||||
color: '#000',
|
||||
font: {
|
||||
weight: '400',
|
||||
size: "10px",
|
||||
},
|
||||
formatter: (value, context) => {
|
||||
return context.dataset.data[context.dataIndex].label;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
display: true
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: (context) => {
|
||||
const d = context.raw;
|
||||
if (context.dataset.type === 'line') {
|
||||
return `Régression: y = ${slope.toFixed(2)} × log10(x) + ${intercept.toFixed(2)}`;
|
||||
}
|
||||
return [
|
||||
`${d.label}`,
|
||||
`Population: ${d.x.toLocaleString()}`,
|
||||
`Lieux / hab: ${d.y.toFixed(2)}`,
|
||||
`Total lieux: ${Math.round(Math.pow(d.r / 2, 2))}`,
|
||||
`Complétion: ${d.completion}%`
|
||||
];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
type: 'logarithmic',
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Population (échelle log)'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Commerces pour 1000 habitants'
|
||||
}
|
||||
}
|
||||
}
|
||||
window.statsDataForBubble = {{ stats|raw }};
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const chartCanvas = document.getElementById('bubbleChart');
|
||||
if (!chartCanvas) {
|
||||
console.warn('Canvas #bubbleChart introuvable');
|
||||
return;
|
||||
}
|
||||
});
|
||||
// Ajout du clic sur une bulle
|
||||
chartCanvas.onclick = function(evt) {
|
||||
const points = bubbleChart.getElementsAtEventForMode(evt, 'nearest', { intersect: true }, true);
|
||||
if (points.length > 0) {
|
||||
const firstPoint = points[0];
|
||||
const dataIndex = firstPoint.index;
|
||||
const stat = statsData[dataIndex];
|
||||
if (stat && stat.zone) {
|
||||
window.location.href = '/admin/stats/' + stat.zone;
|
||||
}
|
||||
}
|
||||
};
|
||||
// HISTOGRAMME FRAÎCHEUR
|
||||
const freshnessCanvas = document.getElementById('freshnessHistogram');
|
||||
if (freshnessCanvas) {
|
||||
// Regrouper les villes par trimestre d'âge moyen OSM
|
||||
const statsData = {{ stats|raw }};
|
||||
const quarterCounts = {};
|
||||
const quarterCities = {};
|
||||
statsData.forEach(stat => {
|
||||
if (!stat.osmDataDateAvg) return;
|
||||
const date = new Date(stat.osmDataDateAvg);
|
||||
if (isNaN(date)) return;
|
||||
const year = date.getFullYear();
|
||||
const month = date.getMonth(); // 0-11
|
||||
const quarter = Math.floor(month / 3) + 1;
|
||||
const key = `${year}-T${quarter}`;
|
||||
if (!quarterCounts[key]) quarterCounts[key] = 0;
|
||||
if (!quarterCities[key]) quarterCities[key] = [];
|
||||
quarterCounts[key]++;
|
||||
quarterCities[key].push(stat.name);
|
||||
console.log('statsData', statsData);
|
||||
|
||||
if (!statsData || statsData.length === 0) {
|
||||
chartCanvas.parentNode.innerHTML += '<div class="text-muted p-3">Aucune donnée de statistiques à afficher pour le graphique.</div>';
|
||||
return;
|
||||
}
|
||||
const bubbleChartData = statsData.map(stat => {
|
||||
const population = parseInt(stat.population, 10);
|
||||
const placesCount = parseInt(stat.placesCount, 10);
|
||||
const ratio = population > 0 ? (placesCount / population) * 1000 : 0;
|
||||
return {
|
||||
x: population,
|
||||
y: ratio,
|
||||
r: Math.sqrt(placesCount) * 2,
|
||||
label: stat.name,
|
||||
completion: stat.completionPercent || 0
|
||||
};
|
||||
});
|
||||
// Ordonner les trimestres
|
||||
const sortedKeys = Object.keys(quarterCounts).sort();
|
||||
const data = sortedKeys.map(k => quarterCounts[k]);
|
||||
const labels = sortedKeys;
|
||||
const citiesPerQuarter = sortedKeys.map(k => quarterCities[k]);
|
||||
new Chart(freshnessCanvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
fill: true,
|
||||
tension: 0.2,
|
||||
// Calcul de la régression linéaire (moindres carrés)
|
||||
const validPoints = bubbleChartData.filter(d => d.x > 0 && d.y > 0);
|
||||
const n = validPoints.length;
|
||||
let regressionLine = null, slope = 0, intercept = 0;
|
||||
if (n >= 2) {
|
||||
let sumX = 0, sumY = 0, sumXY = 0, sumXX = 0;
|
||||
validPoints.forEach(d => {
|
||||
sumX += Math.log10(d.x);
|
||||
sumY += d.y;
|
||||
sumXY += Math.log10(d.x) * d.y;
|
||||
sumXX += Math.log10(d.x) * Math.log10(d.x);
|
||||
});
|
||||
const meanX = sumX / n;
|
||||
const meanY = sumY / n;
|
||||
slope = (sumXY - n * meanX * meanY) / (sumXX - n * meanX * meanX);
|
||||
intercept = meanY - slope * meanX;
|
||||
const xMin = Math.min(...validPoints.map(d => d.x));
|
||||
const xMax = Math.max(...validPoints.map(d => d.x));
|
||||
regressionLine = [
|
||||
{x: xMin, y: slope * Math.log10(xMin) + intercept},
|
||||
{x: xMax, y: slope * Math.log10(xMax) + intercept}
|
||||
];
|
||||
}
|
||||
Chart.register(window.ChartDataLabels);
|
||||
const bubbleChart = new Chart(chartCanvas.getContext('2d'), {
|
||||
type: 'bubble',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'Nombre de villes',
|
||||
data: data,
|
||||
backgroundColor: 'rgba(54, 162, 235, 0.7)',
|
||||
borderColor: 'rgba(54, 162, 235, 1)',
|
||||
borderWidth: 1,
|
||||
datalabels: {
|
||||
anchor: 'end',
|
||||
align: 'end',
|
||||
color: '#333',
|
||||
font: { weight: 'bold', size: 10 },
|
||||
formatter: function(value, context) {
|
||||
const idx = context.dataIndex;
|
||||
const villes = citiesPerQuarter[idx] || [];
|
||||
if (villes.length === 0) return '';
|
||||
let txt = villes.slice(0, 5).join(', ');
|
||||
if (villes.length > 5) txt += ', ...';
|
||||
return txt;
|
||||
}
|
||||
}
|
||||
}]
|
||||
datasets: [
|
||||
{
|
||||
label: 'Villes',
|
||||
data: bubbleChartData,
|
||||
backgroundColor: bubbleChartData.map(d => `rgba(75, 192, 192, ${d.completion / 100})`),
|
||||
borderColor: 'rgba(75, 192, 192, 1)',
|
||||
},
|
||||
].filter(Boolean)
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: { display: false },
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function(ctx) {
|
||||
const idx = ctx.dataIndex;
|
||||
const villes = citiesPerQuarter[idx] || [];
|
||||
let label = `Villes : ${ctx.parsed.y}`;
|
||||
if (villes.length > 0) {
|
||||
label += '\n' + villes.join(', ');
|
||||
}
|
||||
return label;
|
||||
}
|
||||
datalabels: {
|
||||
anchor: 'center',
|
||||
align: 'center',
|
||||
color: '#000',
|
||||
font: {
|
||||
weight: '400',
|
||||
size: "10px",
|
||||
},
|
||||
formatter: (value, context) => {
|
||||
return context.dataset.data[context.dataIndex].label;
|
||||
}
|
||||
},
|
||||
datalabels: {
|
||||
legend: {
|
||||
display: true
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: (context) => {
|
||||
const d = context.raw;
|
||||
if (context.dataset.type === 'line') {
|
||||
return `Régression: y = ${slope.toFixed(2)} × log10(x) + ${intercept.toFixed(2)}`;
|
||||
}
|
||||
return [
|
||||
`${d.label}`,
|
||||
`Population: ${d.x.toLocaleString()}`,
|
||||
`Lieux / hab: ${d.y.toFixed(2)}`,
|
||||
`Total lieux: ${Math.round(Math.pow(d.r / 2, 2))}`,
|
||||
`Complétion: ${d.completion}%`
|
||||
];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
title: { display: true, text: 'Trimestre de l\'âge moyen OSM' }
|
||||
type: 'logarithmic',
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Population (échelle log)'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
title: { display: true, text: 'Nombre de villes' }
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Commerces pour 1000 habitants'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: [ChartDataLabels]
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
// Ajout du clic sur une bulle
|
||||
chartCanvas.onclick = function (evt) {
|
||||
const points = bubbleChart.getElementsAtEventForMode(evt, 'nearest', {intersect: true}, true);
|
||||
if (points.length > 0) {
|
||||
const firstPoint = points[0];
|
||||
const dataIndex = firstPoint.index;
|
||||
const stat = statsData[dataIndex];
|
||||
if (stat && stat.zone) {
|
||||
window.location.href = '/admin/stats/' + stat.zone;
|
||||
}
|
||||
}
|
||||
};
|
||||
// HISTOGRAMME FRAÎCHEUR
|
||||
const freshnessCanvas = document.getElementById('freshnessHistogram');
|
||||
if (freshnessCanvas) {
|
||||
// Regrouper les villes par trimestre d'âge moyen OSM
|
||||
const statsData = {{ stats|raw }};
|
||||
const quarterCounts = {};
|
||||
const quarterCities = {};
|
||||
statsData.forEach(stat => {
|
||||
if (!stat.osmDataDateAvg) return;
|
||||
const date = new Date(stat.osmDataDateAvg);
|
||||
if (isNaN(date)) return;
|
||||
const year = date.getFullYear();
|
||||
const month = date.getMonth(); // 0-11
|
||||
const quarter = Math.floor(month / 3) + 1;
|
||||
const key = `${year}-T${quarter}`;
|
||||
if (!quarterCounts[key]) quarterCounts[key] = 0;
|
||||
if (!quarterCities[key]) quarterCities[key] = [];
|
||||
quarterCounts[key]++;
|
||||
quarterCities[key].push(stat.name);
|
||||
});
|
||||
// Ordonner les trimestres
|
||||
const sortedKeys = Object.keys(quarterCounts).sort();
|
||||
const data = sortedKeys.map(k => quarterCounts[k]);
|
||||
const labels = sortedKeys;
|
||||
const citiesPerQuarter = sortedKeys.map(k => quarterCities[k]);
|
||||
new Chart(freshnessCanvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
fill: true,
|
||||
tension: 0.2,
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [{
|
||||
label: 'Nombre de villes',
|
||||
data: data,
|
||||
backgroundColor: 'rgba(54, 162, 235, 0.7)',
|
||||
borderColor: 'rgba(54, 162, 235, 1)',
|
||||
borderWidth: 1,
|
||||
datalabels: {
|
||||
anchor: 'end',
|
||||
align: 'end',
|
||||
color: '#333',
|
||||
font: {weight: 'bold', size: 10},
|
||||
formatter: function (value, context) {
|
||||
const idx = context.dataIndex;
|
||||
const villes = citiesPerQuarter[idx] || [];
|
||||
if (villes.length === 0) return '';
|
||||
let txt = villes.slice(0, 5).join(', ');
|
||||
if (villes.length > 5) txt += ', ...';
|
||||
return txt;
|
||||
}
|
||||
}
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {display: false},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function (ctx) {
|
||||
const idx = ctx.dataIndex;
|
||||
const villes = citiesPerQuarter[idx] || [];
|
||||
let label = `Villes : ${ctx.parsed.y}`;
|
||||
if (villes.length > 0) {
|
||||
label += '\n' + villes.join(', ');
|
||||
}
|
||||
return label;
|
||||
}
|
||||
}
|
||||
},
|
||||
datalabels: {
|
||||
display: true
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
title: {display: true, text: 'Trimestre de l\'âge moyen OSM'}
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
title: {display: true, text: 'Nombre de villes'}
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: [ChartDataLabels]
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue