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

Feat: add hover tooltip on TOTALS row in Weekly Sales with WoW and YoY comparison

Browse Source 
Shows previous week and same week prior year values (Units, Revenue, Ads Spend, GV) with % change indicators when hovering any week cell in the TOTALS row.

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Christian Vidal Wolf
2026-04-27 11:22:53 +02:00
co-authored by Claude Sonnet 4.6
parent 550269724a
commit eadbaf3492
7 changed files with 172 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/AdsPerformance.tsx
+7 -4
View File
@@ -26,6 +26,7 @@ interface AdsPerformanceProps {
wocFilter: string[];
onWocFilterChange: (newFilters: string[]) => void;
buyBoxLostMap?: Map<string, { countries: string[]; reasons: Record<string, string> }>;
velocityMap?: Map<string, number>;
}
type SortKey = keyof CombinedKPIs | 'acos' | 'roas' | 'tacos' | 'ctr' | 'cpc' | 'cvrUnits';
@@ -48,7 +49,8 @@ const AdsRow: React.FC<{
stockMap?: Map<string, number>;
vendorStockMap?: Map<string, { eu: number; uk: number }>;
buyBoxLostMap?: Map<string, { countries: string[]; reasons: Record<string, string> }>;
}> = React.memo(({ item, top50Ranking, top50Mode, stockMap, vendorStockMap, buyBoxLostMap }) => {
velocityMap?: Map<string, number>;
}> = React.memo(({ item, top50Ranking, top50Mode, stockMap, vendorStockMap, buyBoxLostMap, velocityMap }) => {
const asin = item.asin.trim().toUpperCase();
const ranks: { rank: number; label: string; theme: 'amber' | 'blue' | 'indigo' }[] = [];
@@ -80,7 +82,7 @@ const AdsRow: React.FC<{
{stockMap && (
<StockBadge stock={stockMap.get(item.sku?.replace(/(DE|EN)$/i, ''))} />
)}
<VendorStockBadge asin={item.asin} vendorStockMap={vendorStockMap} mode={top50Mode} avgWeeklySales={item.avgWeeklySales} />
<VendorStockBadge asin={item.asin} vendorStockMap={vendorStockMap} mode={top50Mode} avgWeeklySales={velocityMap?.get(asin)} />
<BuyBoxWarningBadge asin={asin} buyBoxLostMap={buyBoxLostMap} />
</div>
</div>
@@ -116,7 +118,8 @@ const AdsPerformance: React.FC<AdsPerformanceProps> = ({
wocFilter,
onWocFilterChange,
top50Mode,
buyBoxLostMap
buyBoxLostMap,
velocityMap
}) => {
const [searchTerm, setSearchTerm] = useState('');
const [showOnlyTop50, setShowOnlyTop50] = useState(false);
@@ -487,7 +490,7 @@ const AdsPerformance: React.FC<AdsPerformanceProps> = ({
</thead>
<tbody className="divide-y divide-white/[0.03]">
{filteredAndSorted.map((p) => (
<AdsRow key={p.id} item={p} top50Ranking={top50Ranking} top50Mode={top50Mode} stockMap={stockMap} vendorStockMap={vendorStockMap} buyBoxLostMap={buyBoxLostMap} />
<AdsRow key={p.id} item={p} top50Ranking={top50Ranking} top50Mode={top50Mode} stockMap={stockMap} vendorStockMap={vendorStockMap} buyBoxLostMap={buyBoxLostMap} velocityMap={velocityMap} />
))}
</tbody>
</table>