const CategoryBudgetTrendsChart = ({ data }) => { // Get unique fiscal years and account categories const fiscalYears = [...new Set(data.map(d => d.fiscal_year))].sort(); const accountCategories = [...new Set(data.map(d => d.account_category))]; // Prepare data for stacked bar chart const processedData = fiscalYears.map(year => { const yearData = { fiscal_year: year }; accountCategories.forEach(category => { const item = data.find(d => d.fiscal_year === year && d.account_category === category); yearData[category] = item ? item.total_budget : 0; }); return yearData; }); const colors = [CHART_1_COLOR, CHART_2_COLOR, CHART_3_COLOR, CHART_4_COLOR, CHART_5_COLOR, CHART_6_COLOR, '#FFC300', '#DAF7A6', '#FF5733', '#C70039', '#900C3F']; return ( `$${(value / 1000000).toFixed(1)}M`} tick={{ fontSize: 12, fill: FOREGROUND_COLOR }} label={{ value: 'Total Adopted Budget', angle: -90, position: 'insideLeft', offset: -10, fill: FOREGROUND_COLOR }} /> [`$${value.toLocaleString()}`, name]} contentStyle={{ backgroundColor: BACKGROUND_COLOR, borderRadius: 8, border: 'none' }} labelStyle={{ color: FOREGROUND_COLOR }} /> {value}} /> {accountCategories.map((category, index) => ( ))} ); };