From 26bb69c76c0a47ae91a07e40d3a7fcf5888b2c1d Mon Sep 17 00:00:00 2001
From: fahed <fahed@softhouse.io>
Date: Thu, 30 Apr 2026 10:42:18 +0300
Subject: [PATCH] feat(charts): show per-museum trend lines when multiple
 museums selected

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>
---
 src/components/Dashboard.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/components/Dashboard.tsx b/src/components/Dashboard.tsx
index d29e59b..b8ecd90 100644
--- a/src/components/Dashboard.tsx
+++ b/src/components/Dashboard.tsx
@@ -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(() => {