feat(charts): always show per-museum trend lines, with or without filter

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>

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(() => {

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 museumList = selMuseums.length > 0 ? selMuseums : allMuseums;
-    const museumDatasets = multiMuseum
+    const multiMuseum = museumList.length >= 2;
-      ? selMuseums.map((museum, idx) => {
+    const museumDatasets = museumList.map((museum, idx) => {
-          const mg = group(filteredData.filter(r => r.museum_name === museum), start);
+      const mg = group(filteredData.filter(r => r.museum_name === museum), start);
-          return {
+      return {
-            label: museum,
+        label: museum,
-            data: labels.map((_,i) => mg[i+1]||0),
+        data: labels.map((_,i) => mg[i+1]||0),
-            borderColor: chartPalette[idx % chartPalette.length],
+        borderColor: chartPalette[idx % chartPalette.length],
-            backgroundColor: 'transparent',
+        backgroundColor: 'transparent',
-            borderWidth: 1.5,
+        borderWidth: 1.5,
-            tension: 0.4,
+        tension: 0.4,
-            fill: false,
+        fill: false,
-            pointRadius: gran==='week' ? 3 : 1,
+        pointRadius: gran==='week' ? 3 : 1,
-            pointBackgroundColor: chartPalette[idx % chartPalette.length],
+        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(() => {