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

Always show YoY comparison row in tooltips (displays 'No data' when unavailable)

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-01-31 20:48:47 +01:00
parent b8d589bca1
commit 01e20eb073
1 changed files with 34 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/WeeklyGrid.tsx
+25 -17
View File
@@ -55,10 +55,10 @@ const MetricDetailTooltip: React.FC<{
children: React.ReactNode;
currentValue: number;
previousValue: number;
yoyValue?: number;
yoyValue: number;
currentWeekLabel: string;
previousWeekLabel: string;
yoyWeekLabel?: string;
yoyWeekLabel: string;
metricName: string;
metricColor: string;
formatValue?: (val: number) => string;
@@ -66,8 +66,9 @@ const MetricDetailTooltip: React.FC<{
const [isVisible, setIsVisible] = useState(false);
const wowGrowth = previousValue > 0 ? ((currentValue - previousValue) / previousValue) * 100 : (currentValue > 0 ? 100 : 0);
const yoyGrowth = yoyValue !== undefined && yoyValue > 0 ? ((currentValue - yoyValue) / yoyValue) * 100 : null;
const yoyGrowth = yoyValue > 0 ? ((currentValue - yoyValue) / yoyValue) * 100 : null;
const format = formatValue || ((v: number) => v.toLocaleString('de-DE'));
const hasYoyData = yoyValue > 0;
return (
<div
@@ -92,37 +93,43 @@ const MetricDetailTooltip: React.FC<{
{/* 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>
<span className="text-xs font-bold text-slate-400">{previousValue > 0 ? format(previousValue) : 'N/A'}</span>
</div>
{/* Same Week Last Year */}
{yoyValue !== undefined && yoyWeekLabel && (
{/* Same Week Last Year - ALWAYS SHOWN */}
<div className="flex justify-between items-center">
<span className="text-[10px] text-slate-500 font-bold">{yoyWeekLabel}</span>
<span className="text-xs font-bold text-slate-400">{format(yoyValue)}</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 */}
{yoyGrowth !== null && (
{/* YoY Growth - ALWAYS SHOWN */}
<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>
</div>
) : (
<span className="text-xs font-bold text-slate-600 italic">No data</span>
)}
</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>
@@ -211,6 +218,7 @@ const WeeklyRow: React.FC<{
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">
@@ -218,10 +226,10 @@ const WeeklyRow: React.FC<{
<MetricDetailTooltip
currentValue={val}
previousValue={prevVal}
yoyValue={yoyUnits > 0 ? yoyUnits : undefined}
yoyValue={yoyUnits}
currentWeekLabel={`Week ${weekNum} (${year})`}
previousWeekLabel={`Week ${prevWeekNum} (${year})`}
yoyWeekLabel={yoyUnits > 0 ? `Week ${weekNum} (${parseInt(year) - 1})` : undefined}
yoyWeekLabel={`Week ${weekNum} (${parseInt(year) - 1})`}
metricName="Units"
metricColor="text-white"
>
@@ -239,10 +247,10 @@ const WeeklyRow: React.FC<{
<MetricDetailTooltip
currentValue={spend}
previousValue={prevSpend}
yoyValue={yoySpend > 0 ? yoySpend : undefined}
yoyValue={yoySpend}
currentWeekLabel={`Week ${weekNum} (${year})`}
previousWeekLabel={`Week ${prevWeekNum} (${year})`}
yoyWeekLabel={yoySpend > 0 ? `Week ${weekNum} (${parseInt(year) - 1})` : undefined}
yoyWeekLabel={`Week ${weekNum} (${parseInt(year) - 1})`}
metricName="Spend"
metricColor="text-indigo-400"
formatValue={(v) => `€${v.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`}
@@ -261,10 +269,10 @@ const WeeklyRow: React.FC<{
<MetricDetailTooltip
currentValue={gv}
previousValue={prevGv}
yoyValue={yoyGv > 0 ? yoyGv : undefined}
yoyValue={yoyGv}
currentWeekLabel={`Week ${weekNum} (${year})`}
previousWeekLabel={`Week ${prevWeekNum} (${year})`}
yoyWeekLabel={yoyGv > 0 ? `Week ${weekNum} (${parseInt(year) - 1})` : undefined}
yoyWeekLabel={`Week ${weekNum} (${parseInt(year) - 1})`}
metricName="GV (Glance View)"
metricColor="text-teal-400"
>