diff --git a/components/WeeklyGrid.tsx b/components/WeeklyGrid.tsx index 209c546..6d9c4a7 100644 --- a/components/WeeklyGrid.tsx +++ b/components/WeeklyGrid.tsx @@ -50,21 +50,23 @@ const useDebounce = (value: string, delay: number) => { return debouncedValue; }; -// Tooltip component to show comparison details on hover +// Tooltip component to show comparison details on hover (WoW and YoY) const MetricDetailTooltip: React.FC<{ children: React.ReactNode; currentValue: number; previousValue: number; + yoyValue?: number; currentWeekLabel: string; previousWeekLabel: string; + yoyWeekLabel?: string; metricName: string; metricColor: string; formatValue?: (val: number) => string; -}> = ({ children, currentValue, previousValue, currentWeekLabel, previousWeekLabel, metricName, metricColor, formatValue }) => { +}> = ({ children, currentValue, previousValue, yoyValue, currentWeekLabel, previousWeekLabel, yoyWeekLabel, metricName, metricColor, formatValue }) => { const [isVisible, setIsVisible] = useState(false); - const growth = previousValue > 0 ? ((currentValue - previousValue) / previousValue) * 100 : (currentValue > 0 ? 100 : 0); - const isPositive = growth >= 0; + const wowGrowth = previousValue > 0 ? ((currentValue - previousValue) / previousValue) * 100 : (currentValue > 0 ? 100 : 0); + const yoyGrowth = yoyValue !== undefined && yoyValue > 0 ? ((currentValue - yoyValue) / yoyValue) * 100 : null; const format = formatValue || ((v: number) => v.toLocaleString('de-DE')); return ( @@ -75,12 +77,12 @@ const MetricDetailTooltip: React.FC<{ >