mirror of
https://github.com/christianvidalwolf-prog/CrazeAnalytix.git
synced 2026-08-03 14:55:23 +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}
|
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>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -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(() => {
|
||||||
|
|||||||
@@ -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();
|
||||||
|
|||||||
Reference in New Issue
Block a user