christianV/CrazeAnalytix
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/CrazeAnalytix.git synced 2026-08-03 14:35:22 +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
+34 -26
View File
@@ -55,10 +55,10 @@ const MetricDetailTooltip: React.FC<{
children: React.ReactNode; children: React.ReactNode;
currentValue: number; currentValue: number;
previousValue: number; previousValue: number;
yoyValue?: number; yoyValue: number;
currentWeekLabel: string; currentWeekLabel: string;
previousWeekLabel: string; previousWeekLabel: string;
yoyWeekLabel?: string; yoyWeekLabel: string;
metricName: string; metricName: string;
metricColor: string; metricColor: string;
formatValue?: (val: number) => string; formatValue?: (val: number) => string;
@@ -66,8 +66,9 @@ const MetricDetailTooltip: React.FC<{
const [isVisible, setIsVisible] = useState(false); const [isVisible, setIsVisible] = useState(false);
const wowGrowth = previousValue > 0 ? ((currentValue - previousValue) / previousValue) * 100 : (currentValue > 0 ? 100 : 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 yoyGrowth = 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'));
const hasYoyData = yoyValue > 0;
return ( return (
<div <div
@@ -92,36 +93,42 @@ const MetricDetailTooltip: React.FC<{
{/* Previous Week */} {/* Previous Week */}
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<span className="text-[10px] text-slate-500 font-bold">{previousWeekLabel}</span> <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> </div>
{/* Same Week Last Year */} {/* Same Week Last Year - ALWAYS SHOWN */}
{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">{yoyWeekLabel}</span>
<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'}`}>
<span className="text-xs font-bold text-slate-400">{format(yoyValue)}</span> {hasYoyData ? format(yoyValue) : 'No data'}
</div> </span>
)} </div>
{/* WoW Growth */} {/* WoW Growth */}
<div className="border-t border-white/10 pt-2 mt-2"> <div className="border-t border-white/10 pt-2 mt-2">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<span className="text-[10px] text-slate-500 font-bold">vs Previous Week</span> <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'}`}> {previousValue > 0 ? (
{wowGrowth >= 0 ? '▲' : '▼'} {Math.abs(wowGrowth).toFixed(1)}% <span className={`text-xs font-black ${wowGrowth >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
</span> {wowGrowth >= 0 ? '▲' : '▼'} {Math.abs(wowGrowth).toFixed(1)}%
</span>
) : (
<span className="text-xs font-bold text-slate-600 italic">N/A</span>
)}
</div> </div>
</div> </div>
{/* YoY Growth */} {/* YoY Growth - ALWAYS SHOWN */}
{yoyGrowth !== null && ( <div className="flex justify-between items-center">
<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-[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'}`}> <span className={`text-xs font-black ${yoyGrowth >= 0 ? 'text-emerald-400' : 'text-red-400'}`}>
{yoyGrowth >= 0 ? '▲' : '▼'} {Math.abs(yoyGrowth).toFixed(1)}% {yoyGrowth >= 0 ? '▲' : '▼'} {Math.abs(yoyGrowth).toFixed(1)}%
</span> </span>
</div> ) : (
)} <span className="text-xs font-bold text-slate-600 italic">No data</span>
)}
</div>
</div> </div>
{/* Arrow */} {/* Arrow */}
@@ -211,6 +218,7 @@ const WeeklyRow: React.FC<{
const yoySpend = row.spendByWeek[lastYearWeek] || 0; const yoySpend = row.spendByWeek[lastYearWeek] || 0;
const yoyGv = row.gvByWeek?.[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">
@@ -218,10 +226,10 @@ const WeeklyRow: React.FC<{
<MetricDetailTooltip <MetricDetailTooltip
currentValue={val} currentValue={val}
previousValue={prevVal} previousValue={prevVal}
yoyValue={yoyUnits > 0 ? yoyUnits : undefined} yoyValue={yoyUnits}
currentWeekLabel={`Week ${weekNum} (${year})`} currentWeekLabel={`Week ${weekNum} (${year})`}
previousWeekLabel={`Week ${prevWeekNum} (${year})`} previousWeekLabel={`Week ${prevWeekNum} (${year})`}
yoyWeekLabel={yoyUnits > 0 ? `Week ${weekNum} (${parseInt(year) - 1})` : undefined} yoyWeekLabel={`Week ${weekNum} (${parseInt(year) - 1})`}
metricName="Units" metricName="Units"
metricColor="text-white" metricColor="text-white"
> >
@@ -239,10 +247,10 @@ const WeeklyRow: React.FC<{
<MetricDetailTooltip <MetricDetailTooltip
currentValue={spend} currentValue={spend}
previousValue={prevSpend} previousValue={prevSpend}
yoyValue={yoySpend > 0 ? yoySpend : undefined} yoyValue={yoySpend}
currentWeekLabel={`Week ${weekNum} (${year})`} currentWeekLabel={`Week ${weekNum} (${year})`}
previousWeekLabel={`Week ${prevWeekNum} (${year})`} previousWeekLabel={`Week ${prevWeekNum} (${year})`}
yoyWeekLabel={yoySpend > 0 ? `Week ${weekNum} (${parseInt(year) - 1})` : undefined} yoyWeekLabel={`Week ${weekNum} (${parseInt(year) - 1})`}
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 })}`}
@@ -261,10 +269,10 @@ const WeeklyRow: React.FC<{
<MetricDetailTooltip <MetricDetailTooltip
currentValue={gv} currentValue={gv}
previousValue={prevGv} previousValue={prevGv}
yoyValue={yoyGv > 0 ? yoyGv : undefined} yoyValue={yoyGv}
currentWeekLabel={`Week ${weekNum} (${year})`} currentWeekLabel={`Week ${weekNum} (${year})`}
previousWeekLabel={`Week ${prevWeekNum} (${year})`} previousWeekLabel={`Week ${prevWeekNum} (${year})`}
yoyWeekLabel={yoyGv > 0 ? `Week ${weekNum} (${parseInt(year) - 1})` : undefined} yoyWeekLabel={`Week ${weekNum} (${parseInt(year) - 1})`}
metricName="GV (Glance View)" metricName="GV (Glance View)"
metricColor="text-teal-400" metricColor="text-teal-400"
> >