const FinancialValuesChart = ({ data }) => { // Sort data by fiscal_year for proper line chart rendering const sortedData = [...data].sort((a, b) => a.fiscal_year.localeCompare(b.fiscal_year)); // Get unique accounts and metric types for lines const uniqueAccounts = [...new Set(sortedData.map(d => d.accounts))]; const uniqueMetricTypes = [...new Set(sortedData.map(d => d.metric_type))]; // Prepare data for Recharts: each line needs its own series // This structure is not ideal for Recharts LineChart with multiple lines directly from unpivoted data. // We need to pivot it for the chart. // Let's create a combined key for each line: "accounts - metric_type" const chartData = []; const years = [...new Set(sortedData.map(d => d.fiscal_year))].sort(); years.forEach(year => { const yearData = { fiscal_year: year }; sortedData.filter(d => d.fiscal_year === year).forEach(item => { yearData[`${item.accounts} - ${item.metric_type}`] = item.value; }); chartData.push(yearData); }); // Define colors for the lines const COLORS = [CHART_1_COLOR, CHART_2_COLOR, CHART_3_COLOR, CHART_4_COLOR, CHART_5_COLOR, CHART_6_COLOR]; let colorIndex = 0; return ( `$${(value / 1000).toLocaleString()}k`} style={{ fontSize: 12 }} /> [`$${value.toLocaleString()}`, name]} contentStyle={{ backgroundColor: BACKGROUND_COLOR, borderRadius: 8 }} /> {uniqueAccounts.flatMap(account => uniqueMetricTypes.map(metricType => { const dataKey = `${account} - ${metricType}`; const strokeColor = COLORS[colorIndex % COLORS.length]; colorIndex++; return ( ); }) )} ); };