christianV/CrazeAnalytix
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/CrazeAnalytix.git synced 2026-08-03 15:35:22 +02:00
Code Issues Packages Projects Releases Wiki Activity

Enhance tooltips with YoY comparison and English labels

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-01-31 17:42:59 +01:00
parent 6a83109e1c
commit b8d589bca1
1 changed files with 51 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/WeeklyGrid.tsx
+50 -20
View File
@@ -50,21 +50,23 @@ const useDebounce = (value: string, delay: number) => {
return debouncedValue; 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<{ const MetricDetailTooltip: React.FC<{
children: React.ReactNode; children: React.ReactNode;
currentValue: number; currentValue: number;
previousValue: number; previousValue: number;
yoyValue?: number;
currentWeekLabel: string; currentWeekLabel: string;
previousWeekLabel: string; previousWeekLabel: string;
yoyWeekLabel?: string;
metricName: string; metricName: string;
metricColor: string; metricColor: string;
formatValue?: (val: number) => 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 [isVisible, setIsVisible] = useState(false);
const growth = previousValue > 0 ? ((currentValue - previousValue) / previousValue) * 100 : (currentValue > 0 ? 100 : 0); const wowGrowth = previousValue > 0 ? ((currentValue - previousValue) / previousValue) * 100 : (currentValue > 0 ? 100 : 0);
const isPositive = growth >= 0; const yoyGrowth = yoyValue !== undefined && yoyValue > 0 ? ((currentValue - yoyValue) / yoyValue) * 100 : null;
const format = formatValue || ((v: number) => v.toLocaleString('de-DE')); const format = formatValue || ((v: number) => v.toLocaleString('de-DE'));
return ( return (
@@ -75,12 +77,12 @@ const MetricDetailTooltip: React.FC<{
> >
<div className="cursor-help">{children}</div> <div className="cursor-help">{children}</div>
{isVisible && ( {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"> <div className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 pb-2 border-b border-white/10">
📊 {metricName} Comparison 📊 {metricName} Comparison
</div> </div>
<div className="space-y-2"> <div className="space-y-1.5">
{/* Current Week */} {/* Current Week */}
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<span className="text-[10px] text-slate-500 font-bold">{currentWeekLabel}</span> <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> <span className="text-xs font-bold text-slate-400">{format(previousValue)}</span>
</div> </div>
{/* Divider */} {/* Same Week Last Year */}
<div className="border-t border-white/10 pt-2"> {yoyValue !== undefined && yoyWeekLabel && (
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<span className="text-[10px] text-slate-500 font-bold">vs Semana Anterior</span> <span className="text-[10px] text-slate-500 font-bold">{yoyWeekLabel}</span>
<span className={`text-xs font-black ${isPositive ? 'text-emerald-400' : 'text-red-400'}`}> <span className="text-xs font-bold text-slate-400">{format(yoyValue)}</span>
{isPositive ? '▲' : '▼'} {Math.abs(growth).toFixed(1)}% </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> </span>
</div> </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>
)}
</div> </div>
{/* Arrow */} {/* Arrow */}
@@ -184,9 +201,16 @@ const WeeklyRow: React.FC<{
const gv = row.gvByWeek?.[week] || 0; const gv = row.gvByWeek?.[week] || 0;
const prevGv = row.gvByWeek?.[weeks[idx + 1]] || 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] || '-'; 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 ( 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]' : ''}`}> <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 flex-col items-center justify-center gap-0.5">
@@ -194,8 +218,10 @@ const WeeklyRow: React.FC<{
<MetricDetailTooltip <MetricDetailTooltip
currentValue={val} currentValue={val}
previousValue={prevVal} previousValue={prevVal}
currentWeekLabel={`Semana ${weekNum}`} yoyValue={yoyUnits > 0 ? yoyUnits : undefined}
previousWeekLabel={`Semana ${prevWeekNum}`} currentWeekLabel={`Week ${weekNum} (${year})`}
previousWeekLabel={`Week ${prevWeekNum} (${year})`}
yoyWeekLabel={yoyUnits > 0 ? `Week ${weekNum} (${parseInt(year) - 1})` : undefined}
metricName="Units" metricName="Units"
metricColor="text-white" metricColor="text-white"
> >
@@ -213,8 +239,10 @@ const WeeklyRow: React.FC<{
<MetricDetailTooltip <MetricDetailTooltip
currentValue={spend} currentValue={spend}
previousValue={prevSpend} previousValue={prevSpend}
currentWeekLabel={`Semana ${weekNum}`} yoyValue={yoySpend > 0 ? yoySpend : undefined}
previousWeekLabel={`Semana ${prevWeekNum}`} currentWeekLabel={`Week ${weekNum} (${year})`}
previousWeekLabel={`Week ${prevWeekNum} (${year})`}
yoyWeekLabel={yoySpend > 0 ? `Week ${weekNum} (${parseInt(year) - 1})` : undefined}
metricName="Spend" metricName="Spend"
metricColor="text-indigo-400" metricColor="text-indigo-400"
formatValue={(v) => `€${v.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`} formatValue={(v) => `€${v.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`}
@@ -233,8 +261,10 @@ const WeeklyRow: React.FC<{
<MetricDetailTooltip <MetricDetailTooltip
currentValue={gv} currentValue={gv}
previousValue={prevGv} previousValue={prevGv}
currentWeekLabel={`Semana ${weekNum}`} yoyValue={yoyGv > 0 ? yoyGv : undefined}
previousWeekLabel={`Semana ${prevWeekNum}`} currentWeekLabel={`Week ${weekNum} (${year})`}
previousWeekLabel={`Week ${prevWeekNum} (${year})`}
yoyWeekLabel={yoyGv > 0 ? `Week ${weekNum} (${parseInt(year) - 1})` : undefined}
metricName="GV (Glance View)" metricName="GV (Glance View)"
metricColor="text-teal-400" metricColor="text-teal-400"
> >