From b8d589bca1f93836fcefbdfceffd878e9df75637 Mon Sep 17 00:00:00 2001
From: Christian Vidal Wolf <christianvidalwolf@gmail.com>
Date: Sat, 31 Jan 2026 17:42:59 +0100
Subject: [PATCH] Enhance tooltips with YoY comparison and English labels

---
 components/WeeklyGrid.tsx | 72 +++++++++++++++++++++++++++------------
 1 file changed, 51 insertions(+), 21 deletions(-)

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<{
         >
             <div className="cursor-help">{children}</div>
             {isVisible && (
-                <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 bg-slate-950 border border-white/20 rounded-xl shadow-2xl z-[200] p-3 pointer-events-none animate-in fade-in zoom-in-95 duration-150">
+                <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-72 bg-slate-950 border border-white/20 rounded-xl shadow-2xl z-[200] p-3 pointer-events-none animate-in fade-in zoom-in-95 duration-150">
                     <div className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 pb-2 border-b border-white/10">
                         📊 {metricName} Comparison
                     </div>
 
-                    <div className="space-y-2">
+                    <div className="space-y-1.5">
                         {/* Current Week */}
                         <div className="flex justify-between items-center">
                             <span className="text-[10px] text-slate-500 font-bold">{currentWeekLabel}</span>
@@ -93,18 +95,33 @@ const MetricDetailTooltip: React.FC<{
                             <span className="text-xs font-bold text-slate-400">{format(previousValue)}</span>
                         </div>
 
-                        {/* Divider */}
-                        <div className="border-t border-white/10 pt-2">
+                        {/* Same Week Last Year */}
+                        {yoyValue !== undefined && yoyWeekLabel && (
                             <div className="flex justify-between items-center">
-                                <span className="text-[10px] text-slate-500 font-bold">vs Semana Anterior</span>
-                                <span className={`text-xs font-black ${isPositive ? 'text-emerald-400' : 'text-red-400'}`}>
-                                    {isPositive ? '▲' : '▼'} {Math.abs(growth).toFixed(1)}%
+                                <span className="text-[10px] text-slate-500 font-bold">{yoyWeekLabel}</span>
+                                <span className="text-xs font-bold text-slate-400">{format(yoyValue)}</span>
+                            </div>
+                        )}
+
+                        {/* WoW Growth */}
+                        <div className="border-t border-white/10 pt-2 mt-2">
+                            <div className="flex justify-between items-center">
+                                <span className="text-[10px] text-slate-500 font-bold">vs Previous Week</span>
+                                <span className={`text-xs font-black ${wowGrowth >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
+                                    {wowGrowth >= 0 ? '▲' : '▼'} {Math.abs(wowGrowth).toFixed(1)}%
                                 </span>
                             </div>
-                            <div className="text-[9px] text-slate-600 mt-1.5 text-center italic">
-                                Comparado con la semana inmediatamente anterior
-                            </div>
                         </div>
+
+                        {/* YoY Growth */}
+                        {yoyGrowth !== null && (
+                            <div className="flex justify-between items-center">
+                                <span className="text-[10px] text-slate-500 font-bold">vs Same Week Last Year</span>
+                                <span className={`text-xs font-black ${yoyGrowth >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
+                                    {yoyGrowth >= 0 ? '▲' : '▼'} {Math.abs(yoyGrowth).toFixed(1)}%
+                                </span>
+                            </div>
+                        )}
                     </div>
 
                     {/* Arrow */}
@@ -184,9 +201,16 @@ const WeeklyRow: React.FC<{
                 const gv = row.gvByWeek?.[week] || 0;
                 const prevGv = row.gvByWeek?.[weeks[idx + 1]] || 0;
 
-                const weekNum = week.split('-')[1];
+                // Parse week as YYYY-WW
+                const [year, weekNum] = week.split('-');
                 const prevWeekNum = weeks[idx + 1]?.split('-')[1] || '-';
 
+                // Calculate same week last year key (e.g., 2026-05 -> 2025-05)
+                const lastYearWeek = `${parseInt(year) - 1}-${weekNum}`;
+                const yoyUnits = row.unitsByWeek[lastYearWeek] || 0;
+                const yoySpend = row.spendByWeek[lastYearWeek] || 0;
+                const yoyGv = row.gvByWeek?.[lastYearWeek] || 0;
+
                 return (
                     <td key={week} className={`p-3 py-2 text-center border-r border-white/5 align-middle ${sortConfig?.key === week ? 'bg-white/[0.01]' : ''}`}>
                         <div className="flex flex-col items-center justify-center gap-0.5">
@@ -194,8 +218,10 @@ const WeeklyRow: React.FC<{
                             <MetricDetailTooltip
                                 currentValue={val}
                                 previousValue={prevVal}
-                                currentWeekLabel={`Semana ${weekNum}`}
-                                previousWeekLabel={`Semana ${prevWeekNum}`}
+                                yoyValue={yoyUnits > 0 ? yoyUnits : undefined}
+                                currentWeekLabel={`Week ${weekNum} (${year})`}
+                                previousWeekLabel={`Week ${prevWeekNum} (${year})`}
+                                yoyWeekLabel={yoyUnits > 0 ? `Week ${weekNum} (${parseInt(year) - 1})` : undefined}
                                 metricName="Units"
                                 metricColor="text-white"
                             >
@@ -213,8 +239,10 @@ const WeeklyRow: React.FC<{
                                     <MetricDetailTooltip
                                         currentValue={spend}
                                         previousValue={prevSpend}
-                                        currentWeekLabel={`Semana ${weekNum}`}
-                                        previousWeekLabel={`Semana ${prevWeekNum}`}
+                                        yoyValue={yoySpend > 0 ? yoySpend : undefined}
+                                        currentWeekLabel={`Week ${weekNum} (${year})`}
+                                        previousWeekLabel={`Week ${prevWeekNum} (${year})`}
+                                        yoyWeekLabel={yoySpend > 0 ? `Week ${weekNum} (${parseInt(year) - 1})` : undefined}
                                         metricName="Spend"
                                         metricColor="text-indigo-400"
                                         formatValue={(v) => `€${v.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`}
@@ -233,8 +261,10 @@ const WeeklyRow: React.FC<{
                                     <MetricDetailTooltip
                                         currentValue={gv}
                                         previousValue={prevGv}
-                                        currentWeekLabel={`Semana ${weekNum}`}
-                                        previousWeekLabel={`Semana ${prevWeekNum}`}
+                                        yoyValue={yoyGv > 0 ? yoyGv : undefined}
+                                        currentWeekLabel={`Week ${weekNum} (${year})`}
+                                        previousWeekLabel={`Week ${prevWeekNum} (${year})`}
+                                        yoyWeekLabel={yoyGv > 0 ? `Week ${weekNum} (${parseInt(year) - 1})` : undefined}
                                         metricName="GV (Glance View)"
                                         metricColor="text-teal-400"
                                     >