CA/frontend/src/components/overview/AlertSeverityDonut.tsx

import { memo } from 'react';
import { PieChart, Pie, Cell, Tooltip, Legend, ResponsiveContainer } from 'recharts';
import { EmptyState } from '@/components/ui';
import { CHART_COLORS } from './chartColors';

export interface AlertSlice {
  name: string;
  value: number;
  color: string;
}

interface AlertSeverityDonutProps {
  data: AlertSlice[];
}

const tooltipStyle = {
  backgroundColor: '#FFFFFF',
  border: `1px solid ${CHART_COLORS.tooltipBorder}`,
  borderRadius: '8px',
  fontSize: '12px',
};

function AlertSeverityDonutComponent({ data }: AlertSeverityDonutProps) {
  const hasData = data.some((d) => d.value > 0);

  return (
    <div className="card p-4">
      <div className="text-[11px] font-medium text-text-secondary uppercase tracking-wide mb-4">
        预警严重度分布
      </div>
      {hasData ? (
        <div className="flex items-center justify-center">
          <ResponsiveContainer width="100%" height={240}>
            <PieChart>
              <Pie
                data={data}
                cx="50%"
                cy="50%"
                innerRadius={50}
                outerRadius={80}
                paddingAngle={4}
                dataKey="value"
                nameKey="name"
              >
                {data.map((entry) => (
                  <Cell key={entry.name} fill={entry.color} />
                ))}
              </Pie>
              <Tooltip
                contentStyle={tooltipStyle}
                formatter={(value: number, name: string) => [value, name]}
              />
              <Legend
                wrapperStyle={{ fontSize: '12px' }}
                formatter={(value: string) => <span className="text-text-primary">{value}</span>}
              />
            </PieChart>
          </ResponsiveContainer>
        </div>
      ) : (
        <EmptyState title="暂无预警数据" />
      )}
    </div>
  );
}

export const AlertSeverityDonut = memo(AlertSeverityDonutComponent);