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

Implement Weeks of Coverage indicator for Vendor Stock

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-01-28 10:34:46 +01:00
parent 5915bb4c0e
commit 22f4a639c0
6 changed files with 112 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/AdsPerformance.tsx
+1 -1
View File
@@ -74,7 +74,7 @@ const AdsRow: React.FC<{
{stockMap && (
<StockBadge stock={stockMap.get(item.sku?.replace(/(DE|EN)$/i, ''))} />
)}
<VendorStockBadge asin={item.asin} vendorStockMap={vendorStockMap} mode={top50Mode} />
<VendorStockBadge asin={item.asin} vendorStockMap={vendorStockMap} mode={top50Mode} avgWeeklySales={item.avgWeeklySales} />
</div>
</div>
</td>
components/ForecastView.tsx
+1 -1
View File
@@ -66,7 +66,7 @@ const ForecastRow: React.FC<{
{stockMap && (
<StockBadge stock={stockMap.get(item.sku?.replace(/(DE|EN)$/i, ''))} />
)}
<VendorStockBadge asin={item.asin} vendorStockMap={vendorStockMap} mode={top50Mode} />
<VendorStockBadge asin={item.asin} vendorStockMap={vendorStockMap} mode={top50Mode} avgWeeklySales={item.avgWeeklySales} />
</div>
</div>
</td>
components/VendorStockBadge.tsx
+13 -3
View File
@@ -5,9 +5,10 @@ interface VendorStockBadgeProps {
asin: string;
vendorStockMap?: Map<string, { eu: number; uk: number }>;
mode: 'eu' | 'uk';
avgWeeklySales?: number;
}
export const VendorStockBadge: React.FC<VendorStockBadgeProps> = ({ asin, vendorStockMap, mode }) => {
export const VendorStockBadge: React.FC<VendorStockBadgeProps> = ({ asin, vendorStockMap, mode, avgWeeklySales }) => {
if (!vendorStockMap || !asin) return null;
const stockData = vendorStockMap.get(asin.toUpperCase());
@@ -15,11 +16,14 @@ export const VendorStockBadge: React.FC<VendorStockBadgeProps> = ({ asin, vendor
const stock = mode === 'uk' ? stockData.uk : stockData.eu;
// As per user request: "etiqueta será de color gris claro"
// Using a light gray/slate theme that fits the dashboard's premium look
// Calculate Weeks of Coverage (WOC)
const woc = (avgWeeklySales && avgWeeklySales > 0) ? stock / avgWeeklySales : null;
const wocColor = woc !== null ? (woc < 4 ? 'text-rose-500' : 'text-emerald-500') : 'text-slate-400';
const themeClasses = "bg-slate-200 text-slate-800 border-slate-300 shadow-sm";
return (
<div className="flex flex-col items-center gap-0.5">
<div
className={`inline-flex items-center gap-1 px-2 py-0.5 rounded border text-[10px] font-bold transition-all hover:scale-105 active:scale-95 cursor-default ${themeClasses}`}
title={`Stock en Amazon Warehouse (${mode.toUpperCase()}): ${stock}`}
@@ -58,5 +62,11 @@ export const VendorStockBadge: React.FC<VendorStockBadgeProps> = ({ asin, vendor
<span>{stock.toLocaleString('de-DE')}</span>
</div>
</div>
{woc !== null && (
<div className={`text-[9px] font-black uppercase tracking-tighter ${wocColor}`}>
{woc.toFixed(1)} Weeks Cover
</div>
)}
</div>
);
};
components/WeeklyGrid.tsx
+1 -1
View File
@@ -90,7 +90,7 @@ const WeeklyRow: React.FC<{
{stockMap && (
<StockBadge stock={stockMap.get(row.sku?.replace(/(DE|EN)$/i, ''))} />
)}
<VendorStockBadge asin={row.asin} vendorStockMap={vendorStockMap} mode={top50Mode} />
<VendorStockBadge asin={row.asin} vendorStockMap={vendorStockMap} mode={top50Mode} avgWeeklySales={row.avgWeeklySales} />
</div>
<span className="text-[9px] text-fuchsia-400/80 font-bold uppercase tracking-widest">{row.line}</span>
</div>
services/dataProcessor.ts
+59 -3
View File
@@ -598,10 +598,35 @@ export const mergeSalesAndAdsData = (
}
}
// 4. Calculate 4-Week Average Sales per ASIN
const latestYear = Math.max(...salesData.map(r => r.year).filter(y => y > 0));
const yearData = salesData.filter(r => r.year === latestYear);
const latestWeek = yearData.length > 0 ? Math.max(...yearData.map(r => r.week).filter(w => w !== undefined) as number[]) : 0;
const last4WeeksKeys = new Set<string>();
for (let i = 0; i < 4; i++) {
let w = latestWeek - i;
let y = latestYear;
if (w <= 0) {
w = 52 + w;
y = latestYear - 1;
}
last4WeeksKeys.add(`${y}|${w}`);
}
const asin4WeekSales = new Map<string, number>();
salesData.forEach(r => {
if (r.week === undefined) return;
if (last4WeeksKeys.has(`${r.year}|${r.week}`)) {
const key = r.asin.trim().toUpperCase();
asin4WeekSales.set(key, (asin4WeekSales.get(key) || 0) + r.units);
}
});
const mergedData: CombinedKPIs[] = [];
const processedKeys = new Set<string>();
// 4. Create ONE record per ASIN/Customer/Year/Week from sales
// 5. Create ONE record per ASIN/Customer/Year/Week from sales
salesMap.forEach((sale, key) => {
processedKeys.add(key);
const ad = adsMap.get(key);
@@ -623,6 +648,7 @@ export const mergeSalesAndAdsData = (
const ctr = adImpressions > 0 ? (adClicks / adImpressions) * 100 : 0;
const cpc = adClicks > 0 ? adCost / adClicks : 0;
const cvrUnits = adClicks > 0 ? (adUnits / adClicks) * 100 : 0;
const avgWeeklySales = (asin4WeekSales.get(sale.asin.trim().toUpperCase()) || 0) / 4;
mergedData.push({
id: `merged-${key}`,
@@ -653,7 +679,8 @@ export const mergeSalesAndAdsData = (
ctr,
cpc,
cvrUnits,
glanceViews: trafficMap.get(key) || 0
glanceViews: trafficMap.get(key) || 0,
avgWeeklySales
});
});
@@ -662,6 +689,7 @@ export const mergeSalesAndAdsData = (
if (!processedKeys.has(key)) {
const asin = ad.asin.trim().toUpperCase();
const meta = asinMetadata.get(asin);
const avgWeeklySales = (asin4WeekSales.get(asin) || 0) / 4;
mergedData.push({
id: `ads-only-${key}`,
@@ -692,7 +720,8 @@ export const mergeSalesAndAdsData = (
ctr: ad.impressions > 0 ? (ad.clicks / ad.impressions) * 100 : 0,
cpc: ad.clicks > 0 ? ad.cost / ad.clicks : 0,
cvrUnits: ad.clicks > 0 ? (ad.attributedUnits30d / ad.clicks) * 100 : 0,
glanceViews: trafficMap.get(key) || 0
glanceViews: trafficMap.get(key) || 0,
avgWeeklySales
});
}
});
@@ -1684,9 +1713,35 @@ export const calculateForecastViewData = (
monthMap.set(m, (monthMap.get(m) || 0) + r.units);
});
// 4-Week Average Sales Calculation
const latestYear = Math.max(...rawData.map(r => r.year).filter(y => y > 0));
const yearData = rawData.filter(r => r.year === latestYear);
const latestWeek = yearData.length > 0 ? Math.max(...yearData.map(r => r.week).filter(w => w !== undefined) as number[]) : 0;
const last4WeeksKeys = new Set<string>();
for (let i = 0; i < 4; i++) {
let w = latestWeek - i;
let y = latestYear;
if (w <= 0) {
w = 52 + w;
y = latestYear - 1;
}
last4WeeksKeys.add(`${y}|${w}`);
}
const asin4WeekSales = new Map<string, number>();
rawData.forEach(r => {
if (r.week === undefined) return;
if (last4WeeksKeys.has(`${r.year}|${r.week}`)) {
const key = r.asin.trim().toUpperCase();
asin4WeekSales.set(key, (asin4WeekSales.get(key) || 0) + r.units);
}
});
return forecastData.map(fc => {
const identifier = fc.asin.toUpperCase();
const meta = asinMetadata.get(identifier);
const avgWeeklySales = (asin4WeekSales.get(identifier) || 0) / 4;
// 2. Determine weights for this ASIN
const productRecords2025 = dataByAsin2025.get(identifier) || [];
@@ -1735,6 +1790,7 @@ export const calculateForecastViewData = (
actualUnits: totalActualUnits,
forecastUnits: totalForecastUnits,
accuracy: Math.max(0, accuracy),
avgWeeklySales,
monthlyData
};
});
types.ts
+2
View File
@@ -195,6 +195,7 @@ export interface CombinedKPIs {
cpc: number;
cvrUnits: number;
glanceViews: number; // Traffic / page views
avgWeeklySales?: number; // Added for Weeks of Coverage
}
export interface ForecastRecord {
@@ -220,5 +221,6 @@ export interface ProductForecastData {
actualUnits: number;
forecastUnits: number;
accuracy: number;
avgWeeklySales: number; // Added for Weeks of Coverage
monthlyData: Record<string, MonthlyForecastPoint>;
}