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

feat: add ad spend growth percentage indicators in Weekly Sales grid

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-01-26 10:39:41 +01:00
parent 9350ffd84d
commit 28430820ce
1 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/WeeklyGrid.tsx
+7 -2
View File
@@ -454,8 +454,9 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking, onDrillDown
<span>{weekTotals[week]?.units.toLocaleString('de-DE') || 0}</span> <span>{weekTotals[week]?.units.toLocaleString('de-DE') || 0}</span>
{renderGrowth(weekTotals[week]?.units || 0, weekTotals[weeks[idx + 1]]?.units || 0)} {renderGrowth(weekTotals[week]?.units || 0, weekTotals[weeks[idx + 1]]?.units || 0)}
</div> </div>
<div className="text-[10px] text-indigo-400 font-bold"> <div className="flex items-center justify-center gap-1 text-[10px] text-indigo-400 font-bold">
€{(weekTotals[week]?.spend || 0).toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })} <span>€{(weekTotals[week]?.spend || 0).toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</span>
{renderGrowth(weekTotals[week]?.spend || 0, weekTotals[weeks[idx + 1]]?.spend || 0)}
</div> </div>
<div className="text-[9px] text-teal-400 font-black tracking-tight mt-0.5"> <div className="text-[9px] text-teal-400 font-black tracking-tight mt-0.5">
GV: {(weekTotals[week]?.gv || 0).toLocaleString('de-DE')} GV: {(weekTotals[week]?.gv || 0).toLocaleString('de-DE')}
@@ -507,6 +508,7 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking, onDrillDown
const val = row.unitsByWeek[week] || 0; const val = row.unitsByWeek[week] || 0;
const prevVal = row.unitsByWeek[weeks[idx + 1]] || 0; const prevVal = row.unitsByWeek[weeks[idx + 1]] || 0;
const spend = row.spendByWeek[week] || 0; const spend = row.spendByWeek[week] || 0;
const prevSpend = row.spendByWeek[weeks[idx + 1]] || 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">
@@ -518,9 +520,12 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking, onDrillDown
</div> </div>
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">
{spend > 0 && ( {spend > 0 && (
<div className="flex items-center gap-1">
<span className={`text-[11px] font-medium ${sortConfig?.key === week && sortConfig.metric === 'spend' ? 'text-amber-300' : 'text-indigo-400/80'}`}> <span className={`text-[11px] font-medium ${sortConfig?.key === week && sortConfig.metric === 'spend' ? 'text-amber-300' : 'text-indigo-400/80'}`}>
€{spend.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })} €{spend.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}
</span> </span>
{renderGrowth(spend, prevSpend)}
</div>
)} )}
{row.gvByWeek?.[week] > 0 && ( {row.gvByWeek?.[week] > 0 && (
<span className={`text-[9px] font-black tracking-tighter ${sortConfig?.key === week && sortConfig.metric === 'gv' ? 'text-teal-300' : 'text-teal-500/70'}`}> <span className={`text-[9px] font-black tracking-tighter ${sortConfig?.key === week && sortConfig.metric === 'gv' ? 'text-teal-300' : 'text-teal-500/70'}`}>