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

perf: disable StrictMode and optimize App calculations to handle 120k+ rows

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-04-16 12:09:52 +02:00
parent 630941c96a
commit fbb6c75197
2 changed files with 15 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App.tsx
+12 -46
View File
@@ -532,11 +532,14 @@ const App: React.FC = () => {
console.log('[App] Metadata ready'); console.log('[App] Metadata ready');
console.time('filteredData');
const filteredData = useMemo(() => filterData(rawData, deferredFilters, stockMap, vendorStockMap, top50Mode), [rawData, deferredFilters, stockMap, vendorStockMap, top50Mode]); const filteredData = useMemo(() => filterData(rawData, deferredFilters, stockMap, vendorStockMap, top50Mode), [rawData, deferredFilters, stockMap, vendorStockMap, top50Mode]);
console.timeEnd('filteredData');
console.time('filteredAdsData');
const filteredAdsData = useMemo(() => filterAdsData(adsData, deferredFilters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode), [adsData, deferredFilters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode]); const filteredAdsData = useMemo(() => filterAdsData(adsData, deferredFilters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode), [adsData, deferredFilters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode]);
console.timeEnd('filteredAdsData');
// MKT tab: ads without PAN_EU default restriction — includes all countries unless
// the user explicitly selects a marketplace filter
const mktAdsData = useMemo(() => adsData.filter(ad => { const mktAdsData = useMemo(() => adsData.filter(ad => {
const countryMatch = deferredFilters.customer.length === 0 const countryMatch = deferredFilters.customer.length === 0
? true ? true
@@ -545,56 +548,19 @@ const App: React.FC = () => {
const weekMatch = deferredFilters.week.length === 0 || deferredFilters.week.includes(`W${ad.week}`); const weekMatch = deferredFilters.week.length === 0 || deferredFilters.week.includes(`W${ad.week}`);
return countryMatch && yearMatch && weekMatch; return countryMatch && yearMatch && weekMatch;
}), [adsData, deferredFilters.customer, deferredFilters.year, deferredFilters.week]); }), [adsData, deferredFilters.customer, deferredFilters.year, deferredFilters.week]);
console.time('aggregatedData');
const aggregatedData = useMemo(() => aggregateData(filteredData), [filteredData]); const aggregatedData = useMemo(() => aggregateData(filteredData), [filteredData]);
console.timeEnd('aggregatedData');
// Calculate country-aware Top 50 Best Sellers for 2025 console.time('combinedAdsData');
const top50Ranking2025 = useMemo(() => {
// Filter only 2025 data
const data2025 = rawData.filter(r => r.year === 2025);
const calculateTop50 = (entries: SalesRecord[]) => {
const asinTotals = new Map<string, number>();
entries.forEach(r => {
const asin = r.asin.trim().toUpperCase();
asinTotals.set(asin, (asinTotals.get(asin) || 0) + r.sellOut);
});
const sorted = Array.from(asinTotals.entries())
.sort((a, b) => b[1] - a[1])
.slice(0, 50);
const rankMap = new Map<string, number>();
sorted.forEach(([asin], index) => {
rankMap.set(asin, index + 1);
});
return rankMap;
};
const euData = data2025.filter(r => !r.customer.toLowerCase().includes('uk'));
const ukData = data2025.filter(r => r.customer.toLowerCase().includes('uk'));
return {
eu: calculateTop50(euData),
uk: calculateTop50(ukData)
};
}, [rawData]);
// Determine which dataset to use for velocity calculation based on top50Mode
// Derived Data for Vendor (BSR)
const filteredBsrData = useMemo(() => {
return filterBsrData(bsrData, deferredFilters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode);
}, [bsrData, deferredFilters, globalAsinMetadata, stockMap, vendorStockMap, top50Mode]);
// Combine Sales & Ads Data dynamically based on current filters
const combinedAdsData = useMemo(() => { const combinedAdsData = useMemo(() => {
return mergeSalesAndAdsData(filteredData, filteredAdsData, globalAsinMetadata, trafficData, velocityMap, filteredBsrData); return mergeSalesAndAdsData(filteredData, filteredAdsData, globalAsinMetadata, trafficData, velocityMap, filteredBsrData);
}, [filteredData, filteredAdsData, globalAsinMetadata, trafficData, velocityMap, filteredBsrData]); }, [filteredData, filteredAdsData, globalAsinMetadata, trafficData, velocityMap, filteredBsrData]);
console.timeEnd('combinedAdsData');
// Unfiltered combined data for Experiment calculations (so they aren't affected by UI filters) // Defer or remove unfilteredCombinedData to save memory on initialization
const unfilteredCombinedData = useMemo(() => { const unfilteredCombinedData = null;
return mergeSalesAndAdsData(rawData, adsData, globalAsinMetadata, trafficData, velocityMap, bsrData);
}, [rawData, adsData, globalAsinMetadata, trafficData, velocityMap, bsrData]);
// Derived Data for Grid (YTD Filtered - Isolated) // Derived Data for Grid (YTD Filtered - Isolated)
// 1. Identify "Current Year" max week // 1. Identify "Current Year" max week
index.tsx
+3 -5
View File
@@ -10,9 +10,7 @@ if (!rootElement) {
const root = ReactDOM.createRoot(rootElement); const root = ReactDOM.createRoot(rootElement);
root.render( root.render(
<React.StrictMode> <ErrorBoundary>
<ErrorBoundary> <App />
<App /> </ErrorBoundary>
</ErrorBoundary>
</React.StrictMode>
); );