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

Fix: Corrected 2026 revenue discrepancy, resolved WeeklyGrid initialization crash, and restored Week Coverage data

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-04-20 12:54:40 +02:00
parent 11ddcb16c5
commit 1e7c88ffad
5 changed files with 440 additions and 417 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/MetricDetailTooltip.tsx
+126
View File
@@ -0,0 +1,126 @@
import React, { useState } from 'react';
interface MetricDetailTooltipProps {
children: React.ReactNode;
currentValue: number;
previousValue: number;
yoyValue: number;
currentWeekLabel: string;
previousWeekLabel: string;
yoyWeekLabel: string;
metricName: string;
metricColor: string;
formatValue?: (val: number) => string;
experimentDelta?: number | null;
baselineValue?: number | null;
}
/**
* Tooltip component to show comparison details on hover (WoW and YoY).
* Extracted from WeeklyGrid to prevent circular dependencies and initialization errors.
*/
export const MetricDetailTooltip: React.FC<MetricDetailTooltipProps> = ({
children,
currentValue,
previousValue,
yoyValue,
currentWeekLabel,
previousWeekLabel,
yoyWeekLabel,
metricName,
metricColor,
formatValue,
experimentDelta,
baselineValue
}) => {
const [isVisible, setIsVisible] = useState(false);
const wowGrowth = previousValue > 0 ? ((currentValue - previousValue) / previousValue) * 100 : (currentValue > 0 ? 100 : 0);
const yoyGrowth = yoyValue > 0 ? ((currentValue - yoyValue) / yoyValue) * 100 : null;
const format = formatValue || ((v: number) => v.toLocaleString('de-DE'));
const hasYoyData = yoyValue > 0;
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-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-1.5">
{/* 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">{previousValue > 0 ? format(previousValue) : 'N/A'}</span>
</div>
{/* Same Week Last Year */}
<div className="flex justify-between items-center">
<span className="text-[10px] text-slate-500 font-bold">{yoyWeekLabel}</span>
<span className={`text-xs font-bold ${hasYoyData ? 'text-slate-400' : 'text-slate-600 italic'}`}>
{hasYoyData ? format(yoyValue) : 'No data'}
</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>
{previousValue > 0 ? (
<span className={`text-xs font-black ${wowGrowth >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
{wowGrowth >= 0 ? '▲' : '▼'} {Math.abs(wowGrowth).toFixed(1)}%
</span>
) : (
<span className="text-xs font-bold text-slate-600 italic">N/A</span>
)}
</div>
</div>
{/* YoY Growth */}
<div className="flex justify-between items-center">
<span className="text-[10px] text-slate-500 font-bold">vs Same Week Last Year</span>
{yoyGrowth !== null ? (
<span className={`text-xs font-black ${yoyGrowth >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
{yoyGrowth >= 0 ? '▲' : '▼'} {Math.abs(yoyGrowth).toFixed(1)}%
</span>
) : (
<span className="text-xs font-bold text-slate-600 italic">No data</span>
)}
</div>
{/* Experiment Baseline Delta (If active) */}
{typeof experimentDelta === 'number' && typeof baselineValue === 'number' && (
<div className="border-t border-fuchsia-500/20 pt-2 mt-2 bg-fuchsia-500/5 -mx-3 px-3 pb-1">
<div className="flex justify-between items-center mb-1">
<span className="text-[10px] text-fuchsia-400/80 font-bold">vs Pre-Experiment Baseline</span>
<span className={`text-xs font-black ${experimentDelta >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
{experimentDelta >= 0 ? '▲' : '▼'} {Math.abs(experimentDelta).toFixed(1)}%
</span>
</div>
<div className="flex justify-between items-center">
<span className="text-[9px] text-slate-500">Baseline Avg (4w)</span>
<span className="text-[10px] font-bold text-slate-400">{format(baselineValue)}</span>
</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>
);
};