diff --git a/dashboard/public/index.html b/dashboard/public/index.html index 6d23806..e06aacd 100644 --- a/dashboard/public/index.html +++ b/dashboard/public/index.html @@ -300,14 +300,16 @@ if (sub) { let series = [...new Set(data.map(r => r[1]))]; series.forEach((s, idx) => { + // Use a wider golden-angle based hue distribution for maximum contrast + const hue = (idx * 137.5) % 360; datasets.push({ label: s, data: labels.map(l => { let match = data.find(r => r[0] === l && r[1] === s); return match ? match[2] : 0; }), - backgroundColor: `hsla(${idx * 40 + 200}, 70%, 50%, 0.8)`, - borderColor: `hsla(${idx * 40 + 200}, 70%, 50%, 1)`, + backgroundColor: `hsla(${hue}, 70%, 55%, 0.8)`, + borderColor: `hsla(${hue}, 70%, 55%, 1)`, borderWidth: 2, fill: currentChartType === 'line' }); @@ -350,7 +352,23 @@ if (charts.continent) charts.continent.destroy(); charts.continent = new Chart(contCtx, { type: 'doughnut', - data: { labels: store.summary.map(r => r[0]), datasets: [{ data: store.summary.map(r => r[2]), backgroundColor: ['#38bdf8', '#fbbf24', '#10b981', '#f87171'], borderWidth: 0 }] }, + data: { + labels: store.summary.map(r => r[0]), + datasets: [{ + data: store.summary.map(r => r[2]), + backgroundColor: [ + '#38bdf8', // Sky + '#f43f5e', // Rose + '#fbbf24', // Amber + '#10b981', // Emerald + '#8b5cf6', // Violet + '#f97316', // Orange + '#06b6d4', // Cyan + '#ec4899' // Pink + ], + borderWidth: 0 + }] + }, options: { responsive: true, maintainAspectRatio: false, cutout: '70%', plugins: { legend: { position: 'bottom', labels: { color: '#94a3b8' } } } } }); }