diff --git a/components/WeeklyGrid.tsx b/components/WeeklyGrid.tsx index 6d9c4a7..30d71fa 100644 --- a/components/WeeklyGrid.tsx +++ b/components/WeeklyGrid.tsx @@ -55,10 +55,10 @@ const MetricDetailTooltip: React.FC<{ children: React.ReactNode; currentValue: number; previousValue: number; - yoyValue?: number; + yoyValue: number; currentWeekLabel: string; previousWeekLabel: string; - yoyWeekLabel?: string; + yoyWeekLabel: string; metricName: string; metricColor: string; formatValue?: (val: number) => string; @@ -66,8 +66,9 @@ const MetricDetailTooltip: React.FC<{ const [isVisible, setIsVisible] = useState(false); const wowGrowth = previousValue > 0 ? ((currentValue - previousValue) / previousValue) * 100 : (currentValue > 0 ? 100 : 0); - const yoyGrowth = yoyValue !== undefined && yoyValue > 0 ? ((currentValue - yoyValue) / yoyValue) * 100 : null; + const yoyGrowth = yoyValue > 0 ? ((currentValue - yoyValue) / yoyValue) * 100 : null; const format = formatValue || ((v: number) => v.toLocaleString('de-DE')); + const hasYoyData = yoyValue > 0; return (
{previousWeekLabel} - {format(previousValue)} + {previousValue > 0 ? format(previousValue) : 'N/A'}
- {/* Same Week Last Year */} - {yoyValue !== undefined && yoyWeekLabel && ( -
- {yoyWeekLabel} - {format(yoyValue)} -
- )} + {/* Same Week Last Year - ALWAYS SHOWN */} +
+ {yoyWeekLabel} + + {hasYoyData ? format(yoyValue) : 'No data'} + +
{/* WoW Growth */}
vs Previous Week - = 0 ? 'text-emerald-400' : 'text-red-400'}`}> - {wowGrowth >= 0 ? '▲' : '▼'} {Math.abs(wowGrowth).toFixed(1)}% - + {previousValue > 0 ? ( + = 0 ? 'text-emerald-400' : 'text-red-400'}`}> + {wowGrowth >= 0 ? '▲' : '▼'} {Math.abs(wowGrowth).toFixed(1)}% + + ) : ( + N/A + )}
- {/* YoY Growth */} - {yoyGrowth !== null && ( -
- vs Same Week Last Year + {/* YoY Growth - ALWAYS SHOWN */} +
+ vs Same Week Last Year + {yoyGrowth !== null ? ( = 0 ? 'text-emerald-400' : 'text-red-400'}`}> {yoyGrowth >= 0 ? '▲' : '▼'} {Math.abs(yoyGrowth).toFixed(1)}% -
- )} + ) : ( + No data + )} +
{/* Arrow */} @@ -211,6 +218,7 @@ const WeeklyRow: React.FC<{ const yoySpend = row.spendByWeek[lastYearWeek] || 0; const yoyGv = row.gvByWeek?.[lastYearWeek] || 0; + return (
@@ -218,10 +226,10 @@ const WeeklyRow: React.FC<{ 0 ? yoyUnits : undefined} + yoyValue={yoyUnits} currentWeekLabel={`Week ${weekNum} (${year})`} previousWeekLabel={`Week ${prevWeekNum} (${year})`} - yoyWeekLabel={yoyUnits > 0 ? `Week ${weekNum} (${parseInt(year) - 1})` : undefined} + yoyWeekLabel={`Week ${weekNum} (${parseInt(year) - 1})`} metricName="Units" metricColor="text-white" > @@ -239,10 +247,10 @@ const WeeklyRow: React.FC<{ 0 ? yoySpend : undefined} + yoyValue={yoySpend} currentWeekLabel={`Week ${weekNum} (${year})`} previousWeekLabel={`Week ${prevWeekNum} (${year})`} - yoyWeekLabel={yoySpend > 0 ? `Week ${weekNum} (${parseInt(year) - 1})` : undefined} + yoyWeekLabel={`Week ${weekNum} (${parseInt(year) - 1})`} metricName="Spend" metricColor="text-indigo-400" formatValue={(v) => `€${v.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`} @@ -261,10 +269,10 @@ const WeeklyRow: React.FC<{ 0 ? yoyGv : undefined} + yoyValue={yoyGv} currentWeekLabel={`Week ${weekNum} (${year})`} previousWeekLabel={`Week ${prevWeekNum} (${year})`} - yoyWeekLabel={yoyGv > 0 ? `Week ${weekNum} (${parseInt(year) - 1})` : undefined} + yoyWeekLabel={`Week ${weekNum} (${parseInt(year) - 1})`} metricName="GV (Glance View)" metricColor="text-teal-400" >