File size: 2,093 Bytes
4851501 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
"use client";
import dynamic from 'next/dynamic';
// Dynamic imports to avoid SSR issues with Recharts
const BarChart = dynamic(() => import('./BarChart'), { ssr: false });
const PieChart = dynamic(() => import('./PieChart'), { ssr: false });
const LineChart = dynamic(() => import('./LineChart'), { ssr: false });
export interface ChartData {
type: 'bar' | 'line' | 'pie' | 'donut';
title?: string;
data: Array<{ [key: string]: any }>;
xKey?: string;
yKey?: string;
lines?: Array<{ key: string; color?: string; name?: string }>;
xAxisLabel?: string; // New
yAxisLabel?: string; // New
}
interface ChartRendererProps {
chart: ChartData;
}
export default function ChartRenderer({ chart }: ChartRendererProps) {
const { type, title, data, xKey, yKey, lines, xAxisLabel, yAxisLabel } = chart;
switch (type) {
case 'bar':
return (
<BarChart
data={data}
title={title}
xKey={xKey || 'name'}
yKey={yKey || 'value'}
xAxisLabel={xAxisLabel}
yAxisLabel={yAxisLabel}
/>
);
case 'line':
return (
<LineChart
data={data}
title={title}
xKey={xKey || 'name'}
lines={lines || [{ key: yKey || 'value' }]}
/>
);
case 'pie':
return (
<PieChart
data={data}
title={title}
donut={false}
/>
);
case 'donut':
return (
<PieChart
data={data}
title={title}
donut={true}
/>
);
default:
return (
<div className="text-sm text-slate-500 p-4 bg-slate-50 rounded-lg">
Unknown chart type: {type}
</div>
);
}
}
|