const ManagerNomenclatureGroupShareChart = ({ data }) => { const managers = Array.from(new Set(data.map(d => d.manager))); const topN = 5; // Display top N nomenclature groups for each manager const chartData = managers.map(manager => { const managerGroups = data.filter(d => d.manager === manager) .sort((a, b) => b.percentage_of_total_sales - a.percentage_of_total_sales) .slice(0, topN); const otherSales = data.filter(d => d.manager === manager) .slice(topN) .reduce((sum, d) => sum + d.percentage_of_total_sales, 0); return { manager: manager, ...managerGroups.reduce((acc, curr) => ({ ...acc, [curr.nomenclature_group]: curr.percentage_of_total_sales }), {}), 'Прочее': otherSales }; }); const allNomenclatureGroups = Array.from(new Set(data.map(d => d.nomenclature_group))); const topGroupsAcrossAllManagers = Array.from(new Set( data.flatMap(d => data.filter(item => item.manager === d.manager) .sort((a, b) => b.percentage_of_total_sales - a.percentage_of_total_sales) .slice(0, topN) .map(item => item.nomenclature_group)) )).slice(0, 7); // Limit to top 7 distinct groups for legend clarity const colors = [CHART_1_COLOR, CHART_2_COLOR, CHART_3_COLOR, CHART_4_COLOR, CHART_5_COLOR, CHART_6_COLOR, '#8884d8']; // Add one more color for 'Прочее' return ( `${value}%`} style={{ fontSize: 12 }} /> [`${value.toFixed(2)}%`, 'Доля в продажах']} contentStyle={{ backgroundColor: BACKGROUND_COLOR, borderRadius: 8 }} /> {topGroupsAcrossAllManagers.map((group, index) => ( ))} ); };