diff --git a/components/ForecastView.tsx b/components/ForecastView.tsx index 86ba58e..71e28cf 100644 --- a/components/ForecastView.tsx +++ b/components/ForecastView.tsx @@ -65,12 +65,32 @@ const ForecastView: React.FC = ({ data, filters, top50Ranking return MONTH_ORDER.slice(0, lastDataMonthIdx + 1); }, [filters.month, lastDataMonthIdx]); - // Global Aggregate Data + // Base Global Filtering (Line, ASIN, SKU, Title) + const baseFilteredData = useMemo(() => { + let result = data; + + if (filters.line && filters.line.length > 0) { + result = result.filter(p => filters.line.includes(p.line)); + } + if (filters.asin && filters.asin.length > 0) { + result = result.filter(p => filters.asin.includes(p.asin)); + } + if (filters.sku && filters.sku.length > 0) { + result = result.filter(p => filters.sku.includes(p.sku)); + } + if (filters.title && filters.title.length > 0) { + result = result.filter(p => filters.title.includes(p.title)); + } + + return result; + }, [data, filters.line, filters.asin, filters.sku, filters.title]); + + // Global Aggregate Data (respects filters) const globalMonthlyData = useMemo(() => { return MONTH_ORDER.map(m => { let forecast = 0; let actual = 0; - data.forEach(p => { + baseFilteredData.forEach(p => { const monthPoint = p.monthlyData.find(md => md.month === m); if (monthPoint) { forecast += monthPoint.forecastUnits; @@ -79,7 +99,7 @@ const ForecastView: React.FC = ({ data, filters, top50Ranking }); return { name: m, Forecast: forecast, Actual: actual }; }); - }, [data]); + }, [baseFilteredData]); const globalSummary = useMemo(() => { let periodForecast = 0; @@ -87,7 +107,7 @@ const ForecastView: React.FC = ({ data, filters, top50Ranking let annualForecast = 0; let annualActual = 0; - data.forEach(p => { + baseFilteredData.forEach(p => { annualForecast += p.annualForecast; p.monthlyData.forEach(md => { annualActual += md.actualUnits; @@ -109,10 +129,10 @@ const ForecastView: React.FC = ({ data, filters, top50Ranking annualActual, annualFulfillment }; - }, [data, activeMonths]); + }, [baseFilteredData, activeMonths]); const filteredProducts = useMemo(() => { - let result = data; + let result = baseFilteredData; if (searchTerm) { const s = searchTerm.toLowerCase(); @@ -129,7 +149,7 @@ const ForecastView: React.FC = ({ data, filters, top50Ranking } return result; - }, [data, searchTerm, showOnlyTop50, top50Mode, top50Ranking]); + }, [baseFilteredData, searchTerm, showOnlyTop50, top50Mode, top50Ranking]); const sortedProducts = useMemo(() => { const result = [...filteredProducts];