107 lines
2.9 KiB
TypeScript
107 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import {
|
|
PieChart as RechartsPieChart,
|
|
Pie,
|
|
Cell,
|
|
Tooltip,
|
|
Legend,
|
|
ResponsiveContainer,
|
|
} from 'recharts';
|
|
import type { WidgetConfig, ChartData, PieChartConfig } from '@/lib/pipeline-types';
|
|
import { WidgetWrapper } from './WidgetWrapper';
|
|
|
|
interface PieChartWidgetProps {
|
|
config: WidgetConfig;
|
|
data: ChartData | null;
|
|
loading: boolean;
|
|
error?: string;
|
|
onRefresh?: () => void;
|
|
}
|
|
|
|
// Default colors for pie slices
|
|
const DEFAULT_COLORS = [
|
|
'#3b82f6', // blue
|
|
'#22c55e', // green
|
|
'#ef4444', // red
|
|
'#eab308', // yellow
|
|
'#8b5cf6', // purple
|
|
'#ec4899', // pink
|
|
'#06b6d4', // cyan
|
|
'#f97316', // orange
|
|
];
|
|
|
|
/**
|
|
* Pie/Donut chart widget using Recharts.
|
|
*/
|
|
export function PieChartWidget({
|
|
config,
|
|
data,
|
|
loading,
|
|
error,
|
|
onRefresh,
|
|
}: PieChartWidgetProps) {
|
|
const chartConfig = config.config as unknown as PieChartConfig;
|
|
const chartData = data?.data || [];
|
|
const colors = chartConfig.colors || DEFAULT_COLORS;
|
|
const innerRadius = chartConfig.inner_radius || 0; // 0 = pie, > 0 = donut
|
|
|
|
// Transform data to use consistent keys
|
|
const transformedData = chartData.map((item) => ({
|
|
name: item[chartConfig.label_key] as string,
|
|
value: item[chartConfig.value_key] as number,
|
|
}));
|
|
|
|
return (
|
|
<WidgetWrapper config={config} loading={loading} error={error} onRefresh={onRefresh}>
|
|
{transformedData.length === 0 ? (
|
|
<div className="flex items-center justify-center h-full text-gray-500">
|
|
No data available
|
|
</div>
|
|
) : (
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<RechartsPieChart>
|
|
<Pie
|
|
data={transformedData}
|
|
cx="50%"
|
|
cy="50%"
|
|
innerRadius={innerRadius}
|
|
outerRadius="80%"
|
|
dataKey="value"
|
|
nameKey="name"
|
|
label={
|
|
chartConfig.show_labels !== false
|
|
? ({ name, percent }) => `${name} ${((percent ?? 0) * 100).toFixed(0)}%`
|
|
: undefined
|
|
}
|
|
labelLine={chartConfig.show_labels !== false}
|
|
>
|
|
{transformedData.map((_, index) => (
|
|
<Cell
|
|
key={`cell-${index}`}
|
|
fill={colors[index % colors.length]}
|
|
/>
|
|
))}
|
|
</Pie>
|
|
<Tooltip
|
|
contentStyle={{
|
|
backgroundColor: 'white',
|
|
border: '1px solid #e5e7eb',
|
|
borderRadius: '0.375rem',
|
|
}}
|
|
formatter={(value) => [(value ?? 0).toLocaleString(), 'Count']}
|
|
/>
|
|
{chartConfig.show_legend !== false && (
|
|
<Legend
|
|
layout="horizontal"
|
|
verticalAlign="bottom"
|
|
align="center"
|
|
/>
|
|
)}
|
|
</RechartsPieChart>
|
|
</ResponsiveContainer>
|
|
)}
|
|
</WidgetWrapper>
|
|
);
|
|
}
|