up stats dashboard
This commit is contained in:
parent
fd3827ee52
commit
711fc277be
5 changed files with 246 additions and 96 deletions
|
@ -29,96 +29,6 @@ window.getLabourerUrl = getLabourerUrl;
|
|||
|
||||
Chart.register(ChartDataLabels);
|
||||
|
||||
function initDashboardChart() {
|
||||
const chartCanvas = document.getElementById('statsBubbleChart');
|
||||
if (!chartCanvas) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!chartCanvas.dataset.stats || chartCanvas.dataset.stats.length <= 2) { // <= 2 pour ignorer '[]'
|
||||
console.log("Les données du graphique sont vides ou absentes, le graphique ne sera pas affiché.");
|
||||
return;
|
||||
}
|
||||
|
||||
const statsData = JSON.parse(chartCanvas.dataset.stats);
|
||||
|
||||
if (statsData && statsData.length > 0) {
|
||||
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
|
||||
};
|
||||
});
|
||||
|
||||
new Chart(chartCanvas.getContext('2d'), {
|
||||
type: 'bubble',
|
||||
data: {
|
||||
datasets: [{
|
||||
label: 'Villes',
|
||||
data: bubbleChartData,
|
||||
backgroundColor: bubbleChartData.map(d => `rgba(255, 99, 132, ${d.completion / 100})`),
|
||||
borderColor: 'rgba(255, 99, 132, 1)',
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
datalabels: {
|
||||
anchor: 'center',
|
||||
align: 'center',
|
||||
color: '#000',
|
||||
font: {
|
||||
weight: 'bold'
|
||||
},
|
||||
formatter: (value, context) => {
|
||||
return context.dataset.data[context.dataIndex].label;
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: (context) => {
|
||||
const d = context.raw;
|
||||
return [
|
||||
`${d.label}`,
|
||||
`Population: ${d.x.toLocaleString()}`,
|
||||
`Lieux / 1000 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'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Attendre le chargement du DOM
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
console.log('DOMContentLoaded');
|
||||
|
@ -266,8 +176,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
});
|
||||
}
|
||||
|
||||
enableLabourageForm();
|
||||
initDashboardChart();
|
||||
|
||||
enableLabourageForm();
|
||||
adjustListGroupFontSize('.list-group-item');
|
||||
});
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue