229 lines
No EOL
9.3 KiB
JavaScript
229 lines
No EOL
9.3 KiB
JavaScript
// Bubble chart du dashboard avec option de taille de bulle proportionnelle ou égale
|
||
|
||
let bubbleChart = null; // Déclaré en dehors pour garder la référence
|
||
function waitForChartAndDrawBubble() {
|
||
if (!window.Chart || !window.ChartDataLabels) {
|
||
setTimeout(waitForChartAndDrawBubble, 50);
|
||
return;
|
||
}
|
||
const chartCanvas = document.getElementById('bubbleChart');
|
||
const toggle = document.getElementById('toggleBubbleSize');
|
||
|
||
|
||
|
||
|
||
function drawBubbleChart(proportional) {
|
||
// Détruire toute instance Chart.js existante sur ce canvas (Chart.js v3+)
|
||
const existing = window.Chart.getChart(chartCanvas);
|
||
if (existing) {
|
||
try { existing.destroy(); } catch (e) { console.warn('Erreur destroy Chart:', e); }
|
||
}
|
||
if (bubbleChart) {
|
||
try { bubbleChart.destroy(); } catch (e) { console.warn('Erreur destroy Chart:', e); }
|
||
bubbleChart = null;
|
||
}
|
||
|
||
// Forcer le canvas à occuper toute la largeur/hauteur du conteneur en pixels
|
||
if (chartCanvas && chartCanvas.parentElement) {
|
||
const parentRect = chartCanvas.parentElement.getBoundingClientRect();
|
||
console.log('parentRect', parentRect)
|
||
|
||
chartCanvas.width = (parentRect.width);
|
||
chartCanvas.height = (parentRect.height);
|
||
chartCanvas.style.width = parentRect.width + 'px';
|
||
chartCanvas.style.height = parentRect.height + 'px';
|
||
}
|
||
|
||
|
||
if(!getBubbleData){
|
||
console.log('pas de getBubbleData')
|
||
return ;
|
||
}
|
||
const bubbleChartData = getBubbleData(proportional);
|
||
|
||
if(!bubbleChartData){
|
||
console.log('pas de bubbleChartData')
|
||
return ;
|
||
}
|
||
|
||
// Calcul de la régression linéaire (moindres carrés)
|
||
// On ne fait la régression que si on veut, mais l'axe X = fraicheur, Y = complétion
|
||
const validPoints = bubbleChartData.filter(d => d.x !== null && d.y !== null);
|
||
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 += d.x;
|
||
sumY += d.y;
|
||
sumXY += d.x * d.y;
|
||
sumXX += d.x * 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 * xMin + intercept },
|
||
{ x: xMax, y: slope * xMax + intercept }
|
||
];
|
||
}
|
||
window.Chart.register(window.ChartDataLabels);
|
||
bubbleChart = new window.Chart(chartCanvas.getContext('2d'), {
|
||
type: 'bubble',
|
||
data: {
|
||
datasets: [
|
||
{
|
||
label: 'Villes',
|
||
data: bubbleChartData,
|
||
backgroundColor: bubbleChartData.map(d => `rgba(94, 255, 121, ${d.completion / 100})`),
|
||
borderColor: 'rgb(94, 255, 121)',
|
||
datalabels: {
|
||
anchor: 'center',
|
||
align: 'center',
|
||
color: '#000',
|
||
display: true,
|
||
font: { weight: '400', size : "12px" },
|
||
formatter: (value, context) => {
|
||
return context.dataset.data[context.dataIndex].label;
|
||
}
|
||
}
|
||
},
|
||
regressionLine ? {
|
||
label: 'Régression linéaire',
|
||
type: 'line',
|
||
data: regressionLine,
|
||
borderColor: 'rgba(95, 168, 0, 0.7)',
|
||
borderWidth: 2,
|
||
pointRadius: 0,
|
||
fill: false,
|
||
order: 0,
|
||
tension: 0,
|
||
datalabels: { display: false }
|
||
} : null
|
||
].filter(Boolean)
|
||
},
|
||
options: {
|
||
plugins: {
|
||
datalabels: {
|
||
display: false
|
||
},
|
||
legend: { display: true },
|
||
tooltip: {
|
||
callbacks: {
|
||
label: (context) => {
|
||
const d = context.raw;
|
||
if (context.dataset.type === 'line') {
|
||
return `Régression: y = ${slope.toFixed(2)} × x + ${intercept.toFixed(2)}`;
|
||
}
|
||
return [
|
||
`${d.label}`,
|
||
`Fraîcheur moyenne: ${d.freshnessDays ? d.freshnessDays.toLocaleString() + ' jours' : 'N/A'}`,
|
||
`Complétion: ${d.y.toFixed(2)}%`,
|
||
`Population: ${d.population ? d.population.toLocaleString() : 'N/A'}`,
|
||
`Nombre de lieux: ${d.r.toFixed(2)}`,
|
||
`Budget: ${d.budget ? d.budget.toLocaleString() + ' €' : 'N/A'}`,
|
||
`Budget/habitant: ${d.budgetParHabitant ? d.budgetParHabitant.toFixed(2) + ' €' : 'N/A'}`,
|
||
`Budget/lieu: ${d.budgetParLieu ? d.budgetParLieu.toFixed(2) + ' €' : 'N/A'}`
|
||
];
|
||
}
|
||
}
|
||
}
|
||
},
|
||
scales: {
|
||
x: {
|
||
type: 'linear',
|
||
title: { display: true, text: 'Fraîcheur moyenne (jours, plus petit = plus récent)' }
|
||
},
|
||
y: {
|
||
title: { display: true, text: 'Taux de complétion (%)' },
|
||
min: 0,
|
||
max: 100
|
||
}
|
||
}
|
||
}
|
||
});
|
||
// 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 = window.statsDataForBubble[dataIndex];
|
||
if (stat && stat.zone) {
|
||
window.location.href = '/admin/stats/' + stat.zone;
|
||
}
|
||
}
|
||
};
|
||
}
|
||
|
||
// Initial draw
|
||
console.log('[bubble chart] Initialisation avec taille proportionnelle ?', toggle?.checked);
|
||
if(drawBubbleChart){
|
||
|
||
drawBubbleChart(toggle && toggle.checked);
|
||
// Listener
|
||
toggle?.addEventListener('change', function() {
|
||
console.log('[bubble chart] Toggle changé, taille proportionnelle ?', toggle?.checked);
|
||
drawBubbleChart(toggle?.checked);
|
||
});
|
||
}
|
||
}
|
||
|
||
function getBubbleData(proportional) {
|
||
// Générer les données puis trier par rayon décroissant
|
||
const data = window.statsDataForBubble?.map(stat => {
|
||
const population = parseInt(stat.population, 10);
|
||
const placesCount = parseInt(stat.placesCount, 10);
|
||
const completion = parseInt(stat.completionPercent, 10);
|
||
// Fraîcheur moyenne : âge moyen en jours (plus récent à droite)
|
||
let freshnessDays = null;
|
||
if (stat.osmDataDateAvg) {
|
||
const now = new Date();
|
||
const avgDate = new Date(stat.osmDataDateAvg);
|
||
freshnessDays = Math.round((now - avgDate) / (1000 * 60 * 60 * 24));
|
||
}
|
||
// Pour l'axe X, on veut que les plus récents soient à droite (donc X = -freshnessDays)
|
||
const x = freshnessDays !== null ? -freshnessDays : 0;
|
||
// Budget
|
||
const budget = stat.budgetAnnuel ? parseFloat(stat.budgetAnnuel) : null;
|
||
const budgetParHabitant = (budget && population) ? budget / population : null;
|
||
const budgetParLieu = (budget && placesCount) ? budget / placesCount : null;
|
||
return {
|
||
x: x,
|
||
y: completion,
|
||
r: proportional ? Math.sqrt(placesCount) * 2 : 12,
|
||
label: stat.name,
|
||
completion: stat.completionPercent || 0,
|
||
zone: stat.zone,
|
||
budget,
|
||
budgetParHabitant,
|
||
budgetParLieu,
|
||
population,
|
||
placesCount,
|
||
freshnessDays
|
||
};
|
||
});
|
||
// Trier du plus gros au plus petit rayon
|
||
if(data){
|
||
data.sort((a, b) => b.r - a.r);
|
||
}
|
||
return data;
|
||
}
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
waitForChartAndDrawBubble();
|
||
|
||
// Forcer deleteMissing=1 sur le formulaire de labourage
|
||
const labourerForm = document.getElementById('labourerForm');
|
||
if (labourerForm) {
|
||
labourerForm.addEventListener('submit', function(e) {
|
||
e.preventDefault();
|
||
const zipCode = document.getElementById('selectedZipCode').value;
|
||
if (zipCode) {
|
||
window.location.href = '/admin/labourer/' + zipCode + '?deleteMissing=1';
|
||
}
|
||
});
|
||
}
|
||
});
|