diff --git a/src/components/Comparison.tsx b/src/components/Comparison.tsx index 278cfec..49ca3a6 100644 --- a/src/components/Comparison.tsx +++ b/src/components/Comparison.tsx @@ -6,7 +6,7 @@ import { getUniqueChannels, getUniqueMuseums, getUniqueDistricts, umrahData } from '../services/dataService'; -import { chartColors, createBaseOptions } from '../config/chartConfig'; +import { chartColors, chartPalette, createBaseOptions } from '../config/chartConfig'; import type { MuseumRecord, Season } from '../types'; import { useLanguage } from '../contexts/LanguageContext'; import type { LC } from '../lib/locale'; @@ -160,17 +160,34 @@ export default function PeriodSelectorDemo({ data, seasons, includeVAT, allowedM const ds = new Date(cs0.getTime() + i * 86400000); return ds.toLocaleDateString('en-GB', { day: 'numeric', month: 'long', year: 'numeric' }); }); + const museumList = selMuseums.length > 0 ? selMuseums : museums; + const multiMuseum = museumList.length >= 2; + const museumDatasets = museumList.map((museum, idx) => { + const mg = group(currData.filter(r => r.museum_name === museum), currStart); + 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:periodLabel(prevStart,prevEnd), data:labels.map((_,i) => pg[i+1]||0), borderColor:chartColors.muted, backgroundColor:'transparent', borderWidth:2, tension:0.4, pointRadius:gran==='week'?3:1, pointBackgroundColor:chartColors.muted }, - { label:periodLabel(currStart,currEnd), data:labels.map((_,i) => cg[i+1]||0), borderColor:chartColors.primary, backgroundColor:chartColors.primary+'15', borderWidth:2, tension:0.4, fill:true, pointRadius:gran==='week'?4:2, pointBackgroundColor:chartColors.primary }, + ...museumDatasets, + { label: multiMuseum ? `Total ยท ${periodLabel(currStart,currEnd)}` : periodLabel(currStart,currEnd), data:labels.map((_,i) => cg[i+1]||0), borderColor:chartColors.primary, backgroundColor: multiMuseum ? 'transparent' : chartColors.primary+'15', borderWidth:2.5, tension:0.4, fill: !multiMuseum, pointRadius:gran==='week'?4:2, pointBackgroundColor:chartColors.primary }, ] } }; - }, [prevData, currData, prevStart, currStart, prevEnd, currEnd, metric, gran, getVal, L]); + }, [prevData, currData, prevStart, currStart, prevEnd, currEnd, metric, gran, getVal, L, selMuseums, museums]); const trendData = trendResult.data; const museumData = useMemo(() => { diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx index b8ecd90..0d5af05 100644 --- a/src/components/Dashboard.tsx +++ b/src/components/Dashboard.tsx @@ -121,23 +121,22 @@ 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], - }; - }) - : []; + const museumList = selMuseums.length > 0 ? selMuseums : allMuseums; + const multiMuseum = museumList.length >= 2; + const museumDatasets = museumList.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: { @@ -149,7 +148,7 @@ export default function DashboardDemo({ data, seasons: _seasons, includeVAT, set ] } }; - }, [filteredData, prevData, prevStart, start, metric, gran, getVal, L, selMuseums]); + }, [filteredData, prevData, prevStart, start, metric, gran, getVal, L, selMuseums, allMuseums]); const trendData = trendResult.data; const museumData = useMemo(() => {