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' } } } }
});
}