const ManagerProductPortfolioChart = ({ data }) => { const managers = [...new Set(data.map(d => d.manager))]; const productGroups = [...new Set(data.map(d => d.product_group))]; // Define a set of distinct colors for product groups const COLORS = [ CHART_1_COLOR, CHART_2_COLOR, CHART_3_COLOR, CHART_4_COLOR, CHART_5_COLOR, CHART_6_COLOR, '#FFBB28', '#FF8042', '#00C49F', '#8884d8', '#82ca9d', '#ffc658', '#d0ed57', '#a4de6c', '#8dd1e1' ]; // Aggregate data for stacked bar chart const chartData = managers.map(manager => { const managerData = data.filter(d => d.manager === manager); const totalRevenue = managerData.reduce((sum, d) => sum + d.product_group_revenue, 0); // Sort product groups by revenue share for this manager and take top N, group others const sortedGroups = managerData.sort((a, b) => b.product_group_revenue - a.product_group_revenue); const topN = 5; // Display top 5 product groups, rest as 'Other' let otherRevenue = 0; const topGroups = sortedGroups.slice(0, topN).map(d => ({ product_group: d.product_group, revenue: d.product_group_revenue })); if (sortedGroups.length > topN) { otherRevenue = sortedGroups.slice(topN).reduce((sum, d) => sum + d.product_group_revenue, 0); topGroups.push({ product_group: 'Прочее', revenue: otherRevenue }); } const managerChartEntry = { manager }; topGroups.forEach(item => { managerChartEntry[item.product_group] = item.revenue; }); return managerChartEntry; }); // Get all unique product groups (including 'Other') that appear in the chart data const allProductGroupsInChart = [...new Set(chartData.flatMap(d => Object.keys(d).filter(key => key !== 'manager')))]; return ( `${(value / 1000000).toFixed(1)}M ₽`} style={{ fontSize: 12 }} /> [`${value.toLocaleString()} ₽`, name]} contentStyle={{ backgroundColor: BACKGROUND_COLOR, borderRadius: 8 }} /> {allProductGroupsInChart.map((group, index) => ( ))} ); };