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

Refine Top 50 badge visibility based on customer filters

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-01-28 08:31:52 +01:00
parent 8be5f1a767
commit 87e097224b
2 changed files with 21 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/WeeklyGrid.tsx
+20 -7
View File
@@ -1,7 +1,7 @@
import React, { useMemo, useState, useEffect, useCallback, useRef } from 'react';
import * as XLSX from 'xlsx';
import { CombinedKPIs } from '../types';
import { pivotWeeklySalesData, WeeklyPivotRow } from '../services/dataProcessor';
import { pivotWeeklySalesData, WeeklyPivotRow, PAN_EU_COUNTRIES } from '../services/dataProcessor';
import { StockBadge } from './StockBadge';
import { InColumnStockFilter } from './InColumnStockFilter';
@@ -15,6 +15,7 @@ interface WeeklyGridProps {
stockMap?: Map<string, number>;
stockFilter: string[];
onStockFilterChange: (newFilters: string[]) => void;
customerFilters: string[];
}
type SortConfig = {
@@ -65,17 +66,28 @@ const WeeklyRow: React.FC<{
top50Mode: 'eu' | 'uk';
sortConfig: SortConfig;
renderGrowth: (current: number, previous: number) => React.ReactNode;
}> = React.memo(({ row, weeks, onDrillDown, stockMap, top50Ranking, top50Mode, sortConfig, renderGrowth }) => {
customerFilters: string[];
}> = React.memo(({ row, weeks, onDrillDown, stockMap, top50Ranking, top50Mode, sortConfig, renderGrowth, customerFilters }) => {
const ranks: { rank: number; label: string; theme: 'amber' | 'blue' | 'indigo' }[] = [];
const asin = row.asin.trim().toUpperCase();
const isUKSelected = customerFilters.some(c => c.toLowerCase().includes('uk'));
const isEUPartialSelected = customerFilters.some(c => PAN_EU_COUNTRIES.includes(c));
const hasNoCustomerFilter = customerFilters.length === 0;
if (top50Ranking) {
if (top50Mode === 'eu') {
const rank = top50Ranking.eu.get(asin);
if (rank) ranks.push({ rank, label: 'EU', theme: 'indigo' });
} else {
// Only show UK rank if UK is explicitly selected
if (top50Mode === 'uk' && isUKSelected) {
const rank = top50Ranking.uk.get(asin);
if (rank) ranks.push({ rank, label: 'UK', theme: 'blue' });
}
// Only show EU rank if at least one Pan-EU country is selected
// OR if no filters are selected (User might want to see them all then, but user said "only when... is selected")
// Actually the prompt says: "only appear when in the filters... is selected"
else if (top50Mode === 'eu' && isEUPartialSelected) {
const rank = top50Ranking.eu.get(asin);
if (rank) ranks.push({ rank, label: 'EU', theme: 'indigo' });
}
}
return (
@@ -145,7 +157,7 @@ const WeeklyRow: React.FC<{
);
});
const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking, onDrillDown, stockMap, stockFilter, onStockFilterChange }) => {
const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking, onDrillDown, stockMap, stockFilter, onStockFilterChange, customerFilters }) => {
// Pivot data - memoized
const { rows, weeks: allWeeks } = useMemo(() => pivotWeeklySalesData(data), [data]);
@@ -599,6 +611,7 @@ const WeeklyGrid: React.FC<WeeklyGridProps> = ({ data, top50Ranking, onDrillDown
top50Mode={top50Mode}
sortConfig={sortConfig}
renderGrowth={renderGrowth}
customerFilters={customerFilters}
/>
))}
{displayCount < sortedRows.length && (