const AdoptedBudgetAccountComparisonChart = ({ data }) => { const fiscalYears = [...new Set(data.map(d => d.fiscal_year))].sort(); const accountNames = [...new Set(data.map(d => d.account_name))]; // Prepare data for grouped bar chart const processedData = accountNames.map(name => { const accountData = { account_name: name }; fiscalYears.forEach(year => { const item = data.find(d => d.fiscal_year === year && d.account_name === name); accountData[year] = item ? item.total_budget : 0; }); return accountData; }); const colors = [CHART_1_COLOR, CHART_2_COLOR]; // For 2 fiscal years 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}} /> {fiscalYears.map((year, index) => ( ))} ); };