const ManagerPortfolioBreakdownChart = ({ data }) => { // Get unique nomenclature groups for consistent color mapping const allNomenclatureGroups = Array.from(new Set(data.map(d => d.nomenclaturegroup))).sort(); const colors = [CHART_1_COLOR, CHART_2_COLOR, CHART_3_COLOR, CHART_4_COLOR, CHART_5_COLOR, CHART_6_COLOR, '#8884d8', '#82ca9d', '#ffc658', '#ff7300', '#a4de6c', '#d0ed57', '#ffc658']; // Extend colors if more than 6 groups + 'Прочее' const getColor = (groupName) => { const index = allNomenclatureGroups.indexOf(groupName); return colors[index % colors.length]; }; // Reformat data for StackedBarChart: each manager is an entry, with nomenclature groups as keys const formattedData = data.reduce((acc, item) => { let managerEntry = acc.find(entry => entry.manager_name === item.manager_name); if (!managerEntry) { managerEntry = { manager_name: item.manager_name }; acc.push(managerEntry); } managerEntry[item.nomenclaturegroup] = item.group_revenue; return acc; }, []); // Sort managers by total revenue for better comparison formattedData.sort((a, b) => { const totalRevenueA = Object.keys(a).filter(key => key !== 'manager_name').reduce((sum, key) => sum + a[key], 0); const totalRevenueB = Object.keys(b).filter(key => key !== 'manager_name').reduce((sum, key) => sum + b[key], 0); return totalRevenueB - totalRevenueA; }); return ( `$${(value / 1000000).toFixed(1)}M`} style={{ fontSize: 12 }} label={{ value: 'Выручка (руб.)', angle: -90, position: 'insideLeft', style: { textAnchor: 'middle', fill: FOREGROUND_COLOR } }} /> [`${value.toLocaleString()} руб.`, name]} contentStyle={{ backgroundColor: BACKGROUND_COLOR, borderRadius: 8 }} /> {allNomenclatureGroups.map((group, index) => ( ))} ); };