1  import React from 'react';
 2  
 3  // Mock recharts components to avoid rendering issues in tests
 4  export const ResponsiveContainer = ({ children }: { children?: React.ReactNode }) => (
 5    <div data-testid="responsive-container">{children}</div>
 6  );
 7  
 8  export const PieChart = ({ children }: { children?: React.ReactNode }) => <div data-testid="pie-chart">{children}</div>;
 9  
10  export const Pie = ({ children, data }: { children?: React.ReactNode; data?: unknown[] }) => (
11    <div data-testid="pie" data-count={data?.length || 0}>
12      {children}
13    </div>
14  );
15  
16  export const Cell = () => <div data-testid="cell" />;
17  export const Sector = () => <div data-testid="sector" />;
18  
19  export const LineChart = ({ children, data }: { children?: React.ReactNode; data?: unknown[] }) => (
20    <div data-testid="line-chart" data-count={data?.length || 0}>
21      {children}
22    </div>
23  );
24  
25  export const BarChart = ({ children, data }: { children?: React.ReactNode; data?: Array<{ name?: string }> }) => (
26    <div data-testid="bar-chart" data-count={data?.length || 0} data-labels={data?.map((d) => d.name).join(',')}>
27      {children}
28    </div>
29  );
30  
31  export const ComposedChart = ({ children, data }: { children?: React.ReactNode; data?: unknown[] }) => (
32    <div data-testid="composed-chart" data-count={data?.length || 0}>
33      {children}
34    </div>
35  );
36  
37  export const AreaChart = ({ children, data }: { children?: React.ReactNode; data?: unknown[] }) => (
38    <div data-testid="area-chart" data-count={data?.length || 0}>
39      {children}
40    </div>
41  );
42  
43  export const Line = ({ name }: { name?: string }) => <div data-testid={name ? `line-${name}` : 'line'} />;
44  
45  export const Bar = ({ name }: { name?: string }) => <div data-testid={name ? `bar-${name}` : 'bar'} />;
46  
47  export const Area = ({ name, dataKey }: { name?: string; dataKey?: string }) => (
48    <div data-testid={`area-${dataKey}`} data-name={name} />
49  );
50  
51  export const XAxis = () => <div data-testid="x-axis" />;
52  
53  export const YAxis = () => <div data-testid="y-axis" />;
54  
55  export const Tooltip = () => <div data-testid="tooltip" />;
56  
57  export const Legend = () => <div data-testid="legend" />;
58  
59  export const ReferenceLine = ({ label }: { label?: { value?: string } }) => (
60    <div data-testid="reference-line" data-label={label?.value} />
61  );