const CategoryBudgetTrendsChart = ({ data }) => { const fiscalYears = [...new Set(data.map(d => d.fiscal_year))].sort(); const accountCategories = [...new Set(data.map(d => d.account_category))]; // Get top N categories for better visualization const topNCategories = data .filter(d => d.fiscal_year === fiscalYears[fiscalYears.length - 1]) // Consider latest year for top categories .sort((a, b) => parseFloat(b.total_budget) - parseFloat(a.total_budget)) .slice(0, 5) // Top 5 categories .map(d => d.account_category); const filteredData = data.filter(d => topNCategories.includes(d.account_category)); const processedData = []; fiscalYears.forEach(year => { topNCategories.forEach(category => { const entry = filteredData.find(d => d.fiscal_year === year && d.account_category === category); processedData.push({ fiscal_year: year, account_category: category, total_budget: entry ? parseFloat(entry.total_budget) : 0, }); }); }); const COLORS = [CHART_1_COLOR, CHART_2_COLOR, CHART_3_COLOR, CHART_4_COLOR, CHART_5_COLOR]; return ( `$${(value / 1000000).toFixed(0)}M`} style={{ fontSize: 12 }} /> [`$${value.toLocaleString()}`, 'Total Budget']} contentStyle={{ backgroundColor: BACKGROUND_COLOR, borderRadius: 8 }} /> {topNCategories.map((category, index) => ( {processedData.filter(d => d.account_category === category).map((entry, idx) => ( ))} ))} ); };