mirror of
https://github.com/christianvidalwolf-prog/CrazeAnalytix.git
synced 2026-08-03 12:45:23 +02:00
Enhance tooltips with YoY comparison and English labels
This commit is contained in:
Christian Vidal Wolf
+50
-20
@@ -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>
|
||||
|
||||
{/* 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"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user