mirror of
https://github.com/christianvidalwolf-prog/CrazeAnalytix.git
synced 2026-08-03 12:15:23 +02:00
Add metric tooltips showing comparison details (vs previous week)
This commit is contained in:
Christian Vidal Wolf
+123
-19
@@ -50,6 +50,71 @@ const useDebounce = (value: string, delay: number) => {
|
||||
return debouncedValue;
|
||||
};
|
||||
|
||||
// Tooltip component to show comparison details on hover
|
||||
const MetricDetailTooltip: React.FC<{
|
||||
children: React.ReactNode;
|
||||
currentValue: number;
|
||||
previousValue: number;
|
||||
currentWeekLabel: string;
|
||||
previousWeekLabel: string;
|
||||
metricName: string;
|
||||
metricColor: string;
|
||||
formatValue?: (val: number) => string;
|
||||
}> = ({ children, currentValue, previousValue, currentWeekLabel, previousWeekLabel, 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 format = formatValue || ((v: number) => v.toLocaleString('de-DE'));
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative inline-flex items-center"
|
||||
onMouseEnter={() => setIsVisible(true)}
|
||||
onMouseLeave={() => setIsVisible(false)}
|
||||
>
|
||||
<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="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">
|
||||
{/* Current Week */}
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-[10px] text-slate-500 font-bold">{currentWeekLabel}</span>
|
||||
<span className={`text-xs font-black ${metricColor}`}>{format(currentValue)}</span>
|
||||
</div>
|
||||
|
||||
{/* Previous Week */}
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-[10px] text-slate-500 font-bold">{previousWeekLabel}</span>
|
||||
<span className="text-xs font-bold text-slate-400">{format(previousValue)}</span>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="border-t border-white/10 pt-2">
|
||||
<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>
|
||||
</div>
|
||||
<div className="text-[9px] text-slate-600 mt-1.5 text-center italic">
|
||||
Comparado con la semana inmediatamente anterior
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Arrow */}
|
||||
<div className="absolute bottom-[-6px] left-1/2 -translate-x-1/2 w-3 h-3 bg-slate-950 border-r border-b border-white/20 rotate-45"></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const WeeklyRow: React.FC<{
|
||||
row: WeeklyPivotRow;
|
||||
weeks: string[];
|
||||
@@ -116,31 +181,70 @@ const WeeklyRow: React.FC<{
|
||||
const prevVal = row.unitsByWeek[weeks[idx + 1]] || 0;
|
||||
const spend = row.spendByWeek[week] || 0;
|
||||
const prevSpend = row.spendByWeek[weeks[idx + 1]] || 0;
|
||||
const gv = row.gvByWeek?.[week] || 0;
|
||||
const prevGv = row.gvByWeek?.[weeks[idx + 1]] || 0;
|
||||
|
||||
const weekNum = week.split('-')[1];
|
||||
const prevWeekNum = weeks[idx + 1]?.split('-')[1] || '-';
|
||||
|
||||
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">
|
||||
<div className="flex items-center gap-1">
|
||||
<span className={`text-sm font-bold ${val > 0 ? (sortConfig?.key === week && sortConfig.metric === 'units' ? 'text-indigo-400' : 'text-white') : 'text-slate-700'}`}>
|
||||
{val > 0 ? val.toLocaleString('de-DE') : '-'}
|
||||
</span>
|
||||
{val > 0 && renderGrowth(val, prevVal)}
|
||||
</div>
|
||||
{/* Units with tooltip */}
|
||||
<MetricDetailTooltip
|
||||
currentValue={val}
|
||||
previousValue={prevVal}
|
||||
currentWeekLabel={`Semana ${weekNum}`}
|
||||
previousWeekLabel={`Semana ${prevWeekNum}`}
|
||||
metricName="Units"
|
||||
metricColor="text-white"
|
||||
>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className={`text-sm font-bold ${val > 0 ? (sortConfig?.key === week && sortConfig.metric === 'units' ? 'text-indigo-400' : 'text-white') : 'text-slate-700'}`}>
|
||||
{val > 0 ? val.toLocaleString('de-DE') : '-'}
|
||||
</span>
|
||||
{val > 0 && renderGrowth(val, prevVal)}
|
||||
</div>
|
||||
</MetricDetailTooltip>
|
||||
|
||||
<div className="flex flex-col items-center">
|
||||
{/* Spend with tooltip */}
|
||||
{spend > 0 && (
|
||||
<div className="flex items-center gap-1">
|
||||
<span className={`text-[11px] font-medium ${sortConfig?.key === week && sortConfig.metric === 'spend' ? 'text-amber-300' : 'text-indigo-400/80'}`}>
|
||||
€{spend.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}
|
||||
</span>
|
||||
{renderGrowth(spend, prevSpend)}
|
||||
</div>
|
||||
<MetricDetailTooltip
|
||||
currentValue={spend}
|
||||
previousValue={prevSpend}
|
||||
currentWeekLabel={`Semana ${weekNum}`}
|
||||
previousWeekLabel={`Semana ${prevWeekNum}`}
|
||||
metricName="Spend"
|
||||
metricColor="text-indigo-400"
|
||||
formatValue={(v) => `€${v.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`}
|
||||
>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className={`text-[11px] font-medium ${sortConfig?.key === week && sortConfig.metric === 'spend' ? 'text-amber-300' : 'text-indigo-400/80'}`}>
|
||||
€{spend.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}
|
||||
</span>
|
||||
{renderGrowth(spend, prevSpend)}
|
||||
</div>
|
||||
</MetricDetailTooltip>
|
||||
)}
|
||||
{row.gvByWeek?.[week] > 0 && (
|
||||
<div className="flex items-center gap-1">
|
||||
<span className={`text-[9px] font-black tracking-tighter ${sortConfig?.key === week && sortConfig.metric === 'gv' ? 'text-teal-300' : 'text-teal-500/70'}`}>
|
||||
GV: {row.gvByWeek[week].toLocaleString('de-DE')}
|
||||
</span>
|
||||
{renderGrowth(row.gvByWeek[week], row.gvByWeek?.[weeks[idx + 1]] || 0)}
|
||||
</div>
|
||||
|
||||
{/* GV with tooltip */}
|
||||
{gv > 0 && (
|
||||
<MetricDetailTooltip
|
||||
currentValue={gv}
|
||||
previousValue={prevGv}
|
||||
currentWeekLabel={`Semana ${weekNum}`}
|
||||
previousWeekLabel={`Semana ${prevWeekNum}`}
|
||||
metricName="GV (Glance View)"
|
||||
metricColor="text-teal-400"
|
||||
>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className={`text-[9px] font-black tracking-tighter ${sortConfig?.key === week && sortConfig.metric === 'gv' ? 'text-teal-300' : 'text-teal-500/70'}`}>
|
||||
GV: {gv.toLocaleString('de-DE')}
|
||||
</span>
|
||||
{renderGrowth(gv, prevGv)}
|
||||
</div>
|
||||
</MetricDetailTooltip>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user