107 lines
2.9 KiB
TypeScript
107 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import {
|
|
BarChart as RechartsBarChart,
|
|
Bar,
|
|
XAxis,
|
|
YAxis,
|
|
CartesianGrid,
|
|
Tooltip,
|
|
Legend,
|
|
ResponsiveContainer,
|
|
} from 'recharts';
|
|
import type { WidgetConfig, ChartData, ChartWidgetConfig } from '@/lib/pipeline-types';
|
|
import { WidgetWrapper } from './WidgetWrapper';
|
|
|
|
interface BarChartWidgetProps {
|
|
config: WidgetConfig;
|
|
data: ChartData | null;
|
|
loading: boolean;
|
|
error?: string;
|
|
onRefresh?: () => void;
|
|
}
|
|
|
|
// Default colors for series
|
|
const DEFAULT_COLORS = [
|
|
'#3b82f6', // blue
|
|
'#22c55e', // green
|
|
'#ef4444', // red
|
|
'#eab308', // yellow
|
|
'#8b5cf6', // purple
|
|
'#ec4899', // pink
|
|
'#06b6d4', // cyan
|
|
];
|
|
|
|
/**
|
|
* Bar chart widget using Recharts.
|
|
*/
|
|
export function BarChartWidget({
|
|
config,
|
|
data,
|
|
loading,
|
|
error,
|
|
onRefresh,
|
|
}: BarChartWidgetProps) {
|
|
const chartConfig = config.config as unknown as ChartWidgetConfig;
|
|
const chartData = data?.data || [];
|
|
|
|
return (
|
|
<WidgetWrapper config={config} loading={loading} error={error} onRefresh={onRefresh}>
|
|
{chartData.length === 0 ? (
|
|
<div className="flex items-center justify-center h-full text-gray-500">
|
|
No data available
|
|
</div>
|
|
) : (
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<RechartsBarChart
|
|
data={chartData}
|
|
margin={{ top: 5, right: 20, left: 0, bottom: 5 }}
|
|
>
|
|
{chartConfig.show_grid !== false && (
|
|
<CartesianGrid strokeDasharray="3 3" stroke="#d1d5db" />
|
|
)}
|
|
<XAxis
|
|
dataKey={chartConfig.x_axis?.key || 'x'}
|
|
tick={{ fontSize: 12, fill: '#374151' }}
|
|
tickLine={false}
|
|
axisLine={{ stroke: '#d1d5db' }}
|
|
/>
|
|
<YAxis
|
|
tick={{ fontSize: 12, fill: '#374151' }}
|
|
tickLine={false}
|
|
axisLine={{ stroke: '#d1d5db' }}
|
|
label={
|
|
chartConfig.y_axis?.label
|
|
? {
|
|
value: chartConfig.y_axis.label,
|
|
angle: -90,
|
|
position: 'insideLeft',
|
|
style: { fontSize: 12, fill: '#374151' },
|
|
}
|
|
: undefined
|
|
}
|
|
/>
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: 'white',
|
|
border: '1px solid #e5e7eb',
|
|
borderRadius: '0.375rem',
|
|
}}
|
|
/>
|
|
{chartConfig.show_legend !== false && <Legend />}
|
|
{chartConfig.series?.map((series, index) => (
|
|
<Bar
|
|
key={series.key}
|
|
dataKey={series.key}
|
|
name={series.name}
|
|
fill={series.color || DEFAULT_COLORS[index % DEFAULT_COLORS.length]}
|
|
radius={[4, 4, 0, 0]}
|
|
/>
|
|
))}
|
|
</RechartsBarChart>
|
|
</ResponsiveContainer>
|
|
)}
|
|
</WidgetWrapper>
|
|
);
|
|
}
|