const FundDistributionPieChart = ({ data }) => { const COLORS = [CHART_1_COLOR, CHART_2_COLOR, CHART_3_COLOR, CHART_4_COLOR, CHART_5_COLOR, CHART_6_COLOR]; const filteredData = data.filter(d => d.budgeted_amount > 0 && d.fund_name !== 'TOTAL PROPOSED ADOPTED BUDGET' && d.fund_name !== 'Total Other Restricted' && d.fund_name !== 'Total General Fund'); const chartData = filteredData.map(d => ({ name: d.fund_name, value: parseFloat(d.budgeted_amount) })); const totalValue = chartData.reduce((sum, entry) => sum + entry.value, 0); const renderCustomLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent }) => { 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 ( {chartData.map((entry, index) => ( ))} [`$${value.toLocaleString()}`, props.payload.name]} contentStyle={{ backgroundColor: BACKGROUND_COLOR, borderRadius: 8 }} /> `${value}: $${entry.payload.value.toLocaleString()}`} /> ); };