fahed/hihala-dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(charts): always show per-museum trend lines, with or without filter
Deploy HiHala Dashboard / deploy (push) Successful in 11s
Details

Browse Source 
When no museum is selected, all museums get individual lines. When a subset
is selected, only those museums are shown. Both Dashboard and Comparison
trend charts now follow this pattern.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
fahed
2026-04-30 10:44:52 +03:00
parent 26bb69c76c
commit 7365bc808b
2 changed files with 37 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Comparison.tsx
+20 -3
View File
@@ -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(() => {
src/components/Dashboard.tsx
+5 -6
View File
@@ -121,9 +121,9 @@ 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 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,
@@ -136,8 +136,7 @@ export default function DashboardDemo({ data, seasons: _seasons, includeVAT, set
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(() => {