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

feat: implement 1-to-1 metric swap (Units vs Revenue) in Weekly Sales

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-02-19 16:36:05 +01:00
parent 635850bc5a
commit ab79f2ca6e
1 changed files with 8 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/WeeklyGrid.tsx
+8 -63
View File
@@ -267,51 +267,8 @@ const WeeklyRow: React.FC<{
)}
<div className="flex flex-col items-center gap-0.5">
{/* Secondary Metrics & Ads Spend */}
<div className="flex flex-wrap items-center justify-center gap-x-2 gap-y-0.5">
{primaryMetric === 'units' ? (
revenue > 0 && (
<MetricDetailTooltip
currentValue={revenue}
previousValue={prevRevenue}
yoyValue={yoyRevenue}
currentWeekLabel={`Week ${weekNum} (${year})`}
previousWeekLabel={`Week ${prevWeekNum} (${year})`}
yoyWeekLabel={`Week ${weekNum} (${parseInt(year) - 1})`}
metricName="Revenue"
metricColor="text-indigo-400/80"
formatValue={(v) => `€${v.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}`}
>
<div className="flex items-center gap-1 text-[10px]">
<span className={`font-medium ${sortConfig?.key === week && sortConfig.metric === 'spend' ? 'text-amber-300' : 'text-indigo-400/80'}`}>
€{revenue.toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}
</span>
{renderGrowth(revenue, prevRevenue)}
</div>
</MetricDetailTooltip>
)
) : (
val > 0 && (
<MetricDetailTooltip
currentValue={val}
previousValue={prevVal}
yoyValue={yoyUnits}
currentWeekLabel={`Week ${weekNum} (${year})`}
previousWeekLabel={`Week ${prevWeekNum} (${year})`}
yoyWeekLabel={`Week ${weekNum} (${parseInt(year) - 1})`}
metricName="Units"
metricColor="text-indigo-400/80"
>
<div className="flex items-center gap-1 text-[10px]">
<span className={`font-medium ${sortConfig?.key === week && sortConfig.metric === 'units' ? 'text-indigo-300' : 'text-indigo-400/80'}`}>
{val.toLocaleString('de-DE')}
</span>
{renderGrowth(val, prevVal)}
</div>
</MetricDetailTooltip>
)
)}
{/* Ads Spend & GV */}
<div className="flex flex-col items-center gap-0.5">
{/* Always show Ads Spend (if > 0) */}
{spend > 0 && (
<MetricDetailTooltip
@@ -1008,15 +965,9 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
<span>{weekTotals[week]?.units.toLocaleString('de-DE') || 0}</span>
{renderGrowth(weekTotals[week]?.units || 0, weekTotals[weeks[idx + 1]]?.units || 0)}
</div>
<div className="flex flex-wrap items-center justify-center gap-x-2 gap-y-0 text-[10px]">
<div className="flex items-center gap-0.5 text-indigo-300 font-bold">
<span>€{(weekTotals[week]?.revenue || 0).toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</span>
{renderGrowth(weekTotals[week]?.revenue || 0, weekTotals[weeks[idx + 1]]?.revenue || 0)}
</div>
<div className="flex items-center gap-0.5 text-rose-400/80 italic font-bold">
<span>Ads: €{(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 className="flex items-center gap-0.5 text-rose-400/80 italic font-bold text-[10px]">
<span>Ads: €{(weekTotals[week]?.spend || 0).toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</span>
{renderGrowth(weekTotals[week]?.spend || 0, weekTotals[weeks[idx + 1]]?.spend || 0)}
</div>
</>
) : (
@@ -1025,15 +976,9 @@ const WeeklyGrid: React.FC<WeeklyGridProps & { top50Mode: 'eu' | 'uk' }> = ({
<span>€{(weekTotals[week]?.revenue || 0).toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</span>
{renderGrowth(weekTotals[week]?.revenue || 0, weekTotals[weeks[idx + 1]]?.revenue || 0)}
</div>
<div className="flex flex-wrap items-center justify-center gap-x-2 gap-y-0 text-[10px]">
<div className="flex items-center gap-0.5 text-indigo-300 font-bold">
<span>{(weekTotals[week]?.units || 0).toLocaleString('de-DE')} Units</span>
{renderGrowth(weekTotals[week]?.units || 0, weekTotals[weeks[idx + 1]]?.units || 0)}
</div>
<div className="flex items-center gap-0.5 text-rose-400/80 italic font-bold">
<span>Ads: €{(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 className="flex items-center gap-0.5 text-rose-400/80 italic font-bold text-[10px]">
<span>Ads: €{(weekTotals[week]?.spend || 0).toLocaleString('de-DE', { minimumFractionDigits: 0, maximumFractionDigits: 0 })}</span>
{renderGrowth(weekTotals[week]?.spend || 0, weekTotals[weeks[idx + 1]]?.spend || 0)}
</div>
</>
)}