diff --git a/components/Dashboard.tsx b/components/Dashboard.tsx index 97d63f1..8e5f805 100644 --- a/components/Dashboard.tsx +++ b/components/Dashboard.tsx @@ -479,6 +479,22 @@ const Dashboard: React.FC = ({ }) => { const [seasonalityMetric, setSeasonalityMetric] = useState<'sellOut' | 'units'>('sellOut'); const [top10Metric, setTop10Metric] = useState<'sellOut' | 'units'>('sellOut'); + const [cumulativeMetric, setCumulativeMetric] = useState<'sellOut' | 'units'>('sellOut'); + + const cumulativeData = useMemo(() => { + const source = cumulativeMetric === 'sellOut' ? data.seasonality : data.seasonalityUnits; + const years = data.availableYears; + const running: Record = {}; + years.forEach(y => { running[y] = 0; }); + return source.map(point => { + const result: Record = { name: point.name }; + years.forEach(y => { + running[y] = (running[y] || 0) + ((point[y] as number) || 0); + result[y] = running[y]; + }); + return result; + }); + }, [data.seasonality, data.seasonalityUnits, data.availableYears, cumulativeMetric]); // Calculate Ads KPIs by Year const adsKPIsByYear = useMemo(() => { @@ -804,6 +820,54 @@ const Dashboard: React.FC = ({ + {/* Cumulative Sales Chart - YoY comparison month by month */} + +
+
+
+ + +
+
+
+ + + + + cumulativeMetric === 'sellOut' ? `€${(val / 1000).toFixed(0)}k` : val.toLocaleString('de-DE')} + /> + } /> + + {data.availableYears.map((year, index) => ( + + ))} + + +
+
+
+ {/* Country Chart - Uses Specific Data 'data' usually, unless we want to broaden it. Kept specific for now. */}