mirror of
https://github.com/christianvidalwolf-prog/CrazeAnalytix.git
synced 2026-08-03 16:45:24 +02:00
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:
@@ -363,7 +363,7 @@ const App: React.FC = () => {
|
||||
contextData={contextAggregatedData}
|
||||
/>
|
||||
)}
|
||||
{view === 'table' && <DataGrid data={filteredData} />}
|
||||
{view === 'table' && <DataGrid data={filteredData} hasCustomerFilter={filters.customer.length > 0} />}
|
||||
{view === 'movers' && <TopMovers data={filteredData} />}
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -3,11 +3,12 @@ import {
|
||||
LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer
|
||||
} from 'recharts';
|
||||
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';
|
||||
|
||||
interface DataGridProps {
|
||||
data: SalesRecord[];
|
||||
hasCustomerFilter: boolean;
|
||||
}
|
||||
|
||||
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 [sortConfig, setSortConfig] = useState<SortConfig>({ key: null, direction: 'desc' });
|
||||
const [showChart, setShowChart] = useState(true);
|
||||
@@ -248,8 +249,11 @@ const DataGrid: React.FC<DataGridProps> = ({ data }) => {
|
||||
|
||||
// Transform flat data into Pivot structure
|
||||
const { rows: pivotRows, years } = useMemo(() => {
|
||||
return pivotSalesData(data, effectiveDimensions);
|
||||
}, [data, effectiveDimensions]);
|
||||
// Apply Pan-EU grouping when no customer filter is applied
|
||||
const processedData = applyPanEUGrouping(data, hasCustomerFilter);
|
||||
|
||||
return pivotSalesData(processedData, effectiveDimensions);
|
||||
}, [data, effectiveDimensions, hasCustomerFilter]);
|
||||
|
||||
// Data for the time series chart, supporting single and multi-year comparison
|
||||
const { chartData, uniqueYears, isComparisonView, chartTitle } = useMemo(() => {
|
||||
|
||||
@@ -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[] => {
|
||||
const values = new Set(data.map(item => String(item[field])));
|
||||
return Array.from(values).sort();
|
||||
|
||||
Reference in New Issue
Block a user