feat(charts): show per-museum trend lines when multiple museums selected
Deploy HiHala Dashboard / deploy (push) Successful in 10s
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:
@@ -121,17 +121,35 @@ export default function DashboardDemo({ data, seasons: _seasons, includeVAT, set
|
|||||||
return ds.toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' });
|
return ds.toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' });
|
||||||
});
|
});
|
||||||
const prevYear = parseInt(start.slice(0,4))-1;
|
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 {
|
return {
|
||||||
tooltipLabels,
|
tooltipLabels,
|
||||||
data: {
|
data: {
|
||||||
labels,
|
labels,
|
||||||
datasets: [
|
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:`${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 trendData = trendResult.data;
|
||||||
|
|
||||||
const museumData = useMemo(() => {
|
const museumData = useMemo(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user