const PortfolioBalanceChart = ({ data }) => { const managers = [...new Set(data.map(d => d.manager))]; const COLORS = [CHART_1_COLOR, CHART_2_COLOR, CHART_3_COLOR, CHART_4_COLOR, CHART_5_COLOR, CHART_6_COLOR, '#8884d8', '#82ca9d', '#ffc658', '#ff7300']; // More colors for diversity return (

{managers.map(managerName => { const managerData = data .filter(d => d.manager === managerName) .sort((a, b) => b.revenue_share_percent - a.revenue_share_percent); const topGroups = managerData.slice(0, 6); // Top 6 groups const otherRevenue = managerData.slice(6).reduce((sum, d) => sum + d.group_revenue, 0); const otherShare = managerData.slice(6).reduce((sum, d) => sum + d.revenue_share_percent, 0); const chartData = [...topGroups.map(d => ({ name: d.nomenclature_group, value: d.group_revenue, percent: d.revenue_share_percent }))]; if (otherShare > 0) { chartData.push({ name: 'Прочее', value: otherRevenue, percent: otherShare }); } const totalValue = chartData.reduce((sum, entry) => sum + entry.value, 0); const renderCustomLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, name }) => { if (percent < 0.05) return null; // Only show labels for segments larger than 5% const radius = innerRadius + (outerRadius - innerRadius) * 0.5; const x = cx + radius * Math.cos(-midAngle * Math.PI / 180); const y = cy + radius * Math.sin(-midAngle * Math.PI / 180); return ( cx ? 'start' : 'end'} dominantBaseline="central" style={{ fontSize: 12, fontWeight: 'bold' }}> {`${(percent * 100).toFixed(1)}%`} ); }; return (

Баланс Портфеля (Доля Выручки по Группам Номенклатуры): {managerName}

{chartData.map((entry, index) => ( ))} [`${(entry.payload.percent).toFixed(1)}%`, entry.payload.name]} contentStyle={{ backgroundColor: BACKGROUND_COLOR, borderRadius: 8 }} /> `${entry.payload.name}: ${(entry.payload.percent).toFixed(1)}%`} />

); })}

); };