const AccountCategoryDistributionChart = ({ data }) => { const filteredData = data.filter(d => d.aggregated_amount !== null); const totalAmount = filteredData.reduce((sum, entry) => sum + parseFloat(entry.aggregated_amount), 0); 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']; const renderCustomLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, percent, name }) => { if (percent < 0.03) return null; // Only show labels for slices larger than 3% 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 ( {filteredData.map((entry, index) => ( ))} [`$${parseFloat(value).toLocaleString()}`, props.payload.display_category]} contentStyle={{ backgroundColor: BACKGROUND_COLOR, borderRadius: 8 }} /> `${entry.payload.display_category}: $${parseFloat(entry.payload.aggregated_amount).toLocaleString()}`} /> ); };