whyrating-engine-legacy/web/components/dashboard/widgets/PieChart.tsx

'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 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 * 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: number) => [value.toLocaleString(), 'Count']}
            />
            {chartConfig.show_legend !== false && (
              <Legend
                layout="horizontal"
                verticalAlign="bottom"
                align="center"
              />
            )}
          </RechartsPieChart>
        </ResponsiveContainer>
      )}
    </WidgetWrapper>
  );
}