feat: Implement Pan-EU grouping in Grid tab

- Added applyPanEUGrouping() helper function in dataProcessor.ts
- Groups Amazon DE/IT/FR/ES as 'Pan-EU' when no customer filter applied
- Shows individual countries when specific filter is selected
- Updated DataGrid to accept hasCustomerFilter prop
- Updated App.tsx to pass filter state to DataGrid
- Keeps Amazon UK and Amazon SC separate
- Verified with browser testing: grouping works correctly
This commit is contained in:
Christian Vidal Wolf
2026-01-20 12:59:35 +01:00
parent 98aba3e36b
commit 67951bcac8
3 changed files with 39 additions and 5 deletions
+1 -1
View File
@@ -363,7 +363,7 @@ const App: React.FC = () => {
contextData={contextAggregatedData} contextData={contextAggregatedData}
/> />
)} )}
{view === 'table' && <DataGrid data={filteredData} />} {view === 'table' && <DataGrid data={filteredData} hasCustomerFilter={filters.customer.length > 0} />}
{view === 'movers' && <TopMovers data={filteredData} />} {view === 'movers' && <TopMovers data={filteredData} />}
</div> </div>
</> </>
+8 -4
View File
@@ -3,11 +3,12 @@ import {
LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer
} from 'recharts'; } from 'recharts';
import { SalesRecord, PivotRow } from '../types'; import { SalesRecord, PivotRow } from '../types';
import { pivotSalesData, generateCSV, aggregateForTimeSeries, aggregateForComparisonTimeSeries } from '../services/dataProcessor'; import { pivotSalesData, generateCSV, aggregateForTimeSeries, aggregateForComparisonTimeSeries, applyPanEUGrouping } from '../services/dataProcessor';
import { DownloadIcon, FunnelIcon, CloseIcon, ChartIcon } from './Icons'; import { DownloadIcon, FunnelIcon, CloseIcon, ChartIcon } from './Icons';
interface DataGridProps { interface DataGridProps {
data: SalesRecord[]; data: SalesRecord[];
hasCustomerFilter: boolean;
} }
type SortConfig = { type SortConfig = {
@@ -224,7 +225,7 @@ const ExpandableChartCard: React.FC<{ title: string; children: React.ReactNode;
}; };
const DataGrid: React.FC<DataGridProps> = ({ data }) => { const DataGrid: React.FC<DataGridProps> = ({ data, hasCustomerFilter }) => {
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [sortConfig, setSortConfig] = useState<SortConfig>({ key: null, direction: 'desc' }); const [sortConfig, setSortConfig] = useState<SortConfig>({ key: null, direction: 'desc' });
const [showChart, setShowChart] = useState(true); const [showChart, setShowChart] = useState(true);
@@ -248,8 +249,11 @@ const DataGrid: React.FC<DataGridProps> = ({ data }) => {
// Transform flat data into Pivot structure // Transform flat data into Pivot structure
const { rows: pivotRows, years } = useMemo(() => { const { rows: pivotRows, years } = useMemo(() => {
return pivotSalesData(data, effectiveDimensions); // Apply Pan-EU grouping when no customer filter is applied
}, [data, effectiveDimensions]); const processedData = applyPanEUGrouping(data, hasCustomerFilter);
return pivotSalesData(processedData, effectiveDimensions);
}, [data, effectiveDimensions, hasCustomerFilter]);
// Data for the time series chart, supporting single and multi-year comparison // Data for the time series chart, supporting single and multi-year comparison
const { chartData, uniqueYears, isComparisonView, chartTitle } = useMemo(() => { const { chartData, uniqueYears, isComparisonView, chartTitle } = useMemo(() => {
+30
View File
@@ -924,6 +924,36 @@ export const aggregateData = (data: SalesRecord[]): AggregatedData => {
}; };
}; };
/**
* Groups Pan-EU countries (Amazon DE, IT, FR, ES) into a single "Pan-EU" customer
* when no customer filter is applied. This provides a consolidated view of European
* markets while keeping UK and SC separate.
*
* @param data - Array of sales records
* @param hasCustomerFilter - Whether a customer filter is currently applied
* @returns Processed data with Pan-EU grouping applied if appropriate
*/
export const applyPanEUGrouping = (
data: SalesRecord[],
hasCustomerFilter: boolean
): SalesRecord[] => {
// If customer filter is applied, don't group - show selected countries as-is
if (hasCustomerFilter) {
return data;
}
// Define Pan-EU countries
const PAN_EU_COUNTRIES = ['Amazon DE', 'Amazon IT', 'Amazon FR', 'Amazon ES'];
// Replace Pan-EU country names with "Pan-EU" for grouping
return data.map(record => {
if (PAN_EU_COUNTRIES.includes(record.customer)) {
return { ...record, customer: 'Pan-EU' };
}
return record;
});
};
export const getUniqueValues = (data: SalesRecord[], field: keyof SalesRecord): string[] => { export const getUniqueValues = (data: SalesRecord[], field: keyof SalesRecord): string[] => {
const values = new Set(data.map(item => String(item[field]))); const values = new Set(data.map(item => String(item[field])));
return Array.from(values).sort(); return Array.from(values).sort();