feat(charts): show per-museum trend lines when multiple museums selected
Deploy HiHala Dashboard / deploy (push) Successful in 10s

When 2+ museums are selected, the trend chart now renders one colored line
per museum plus a bold Total line, instead of a single aggregated line.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
fahed
2026-04-30 10:42:18 +03:00
parent 1070490ad2
commit 26bb69c76c
+20 -2
View File
@@ -121,17 +121,35 @@ export default function DashboardDemo({ data, seasons: _seasons, includeVAT, set
return ds.toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' });
});
const prevYear = parseInt(start.slice(0,4))-1;
const multiMuseum = selMuseums.length >= 2;
const museumDatasets = multiMuseum
? selMuseums.map((museum, idx) => {
const mg = group(filteredData.filter(r => r.museum_name === museum), start);
return {
label: museum,
data: labels.map((_,i) => mg[i+1]||0),
borderColor: chartPalette[idx % chartPalette.length],
backgroundColor: 'transparent',
borderWidth: 1.5,
tension: 0.4,
fill: false,
pointRadius: gran==='week' ? 3 : 1,
pointBackgroundColor: chartPalette[idx % chartPalette.length],
};
})
: [];
return {
tooltipLabels,
data: {
labels,
datasets: [
{ label:`${prevYear}`, data:labels.map((_,i) => pg[i+1]||0), borderColor:chartColors.muted, backgroundColor:'transparent', borderWidth:1.5, tension:0.4, pointRadius:0, borderDash:[4,3] },
{ label:start.slice(0,4), data:labels.map((_,i) => cg[i+1]||0), borderColor:chartColors.primary, backgroundColor:chartColors.primary+'18', borderWidth:2.5, tension:0.4, fill:true, pointRadius:gran==='week'?3:1, pointBackgroundColor:chartColors.primary },
...museumDatasets,
{ label: multiMuseum ? `Total ${start.slice(0,4)}` : start.slice(0,4), data:labels.map((_,i) => cg[i+1]||0), borderColor:chartColors.primary, backgroundColor: multiMuseum ? 'transparent' : chartColors.primary+'18', borderWidth:2.5, tension:0.4, fill: !multiMuseum, pointRadius:gran==='week'?3:1, pointBackgroundColor:chartColors.primary },
]
}
};
}, [filteredData, prevData, prevStart, start, metric, gran, getVal, L]);
}, [filteredData, prevData, prevStart, start, metric, gran, getVal, L, selMuseums]);
const trendData = trendResult.data;
const museumData = useMemo(() => {