`src/components/charts/SourceReliabilityChart.tsx`

69 lines
'use client';

import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Cell, ReferenceLine } from 'recharts';

interface ReliabilityData {
  name: string;
  success_rate: number;
  total_runs: number;
  records: number;
}

interface SourceReliabilityChartProps {
  data: ReliabilityData[];
  title?: string;
}

function getBarColor(rate: number): string {
  if (rate >= 90) return '#22c55e';
  if (rate >= 70) return '#f59e0b';
  return '#ef4444';
}

const CustomTooltip = ({ active, payload }: any) => {
  if (!active || !payload?.length) return null;
  const d = payload[0].payload;
  return (
    <div className="bg-navy-800 border border-navy-600 rounded-lg p-3 shadow-xl">
      <p className="text-sm font-medium text-white">{d.name}</p>
      <p className="text-xs" style={{ color: getBarColor(d.success_rate) }}>
        Success Rate: {d.success_rate}%
      </p>
      <p className="text-xs text-navy-300">{d.total_runs} runs · {d.records.toLocaleString()} records</p>
    </div>
  );
};

export default function SourceReliabilityChart({ data, title }: SourceReliabilityChartProps) {
  if (!data?.length) {
    return (
      <div className="bg-navy-800/50 rounded-xl border border-navy-700 p-8 text-center">
        <p className="text-navy-400">No source reliability data available</p>
      </div>
    );
  }

  const height = Math.max(300, data.length * 40);

  return (
    <div className="bg-navy-800/50 rounded-xl border border-navy-700 p-4">
      {title && <h3 className="text-sm font-semibold uppercase tracking-wider text-gray-400 mb-4">{title}</h3>}
      <ResponsiveContainer width="100%" height={height}>
        <BarChart data={data} layout="vertical" margin={{ top: 5, right: 20, bottom: 5, left: 100 }}>
          <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" horizontal={false} />
          <XAxis type="number" domain={[0, 100]} stroke="#64748b" fontSize={11} tickFormatter={(v) => `${v}%`} />
          <YAxis type="category" dataKey="name" stroke="#64748b" fontSize={11} tick={{ fill: '#94a3b8' }} width={95} />
          <Tooltip content={<CustomTooltip />} />
          <ReferenceLine x={90} stroke="#22c55e" strokeDasharray="3 3" strokeOpacity={0.5} />
          <ReferenceLine x={70} stroke="#f59e0b" strokeDasharray="3 3" strokeOpacity={0.5} />
          <Bar dataKey="success_rate" radius={[0, 4, 4, 0]}>
            {data.map((entry, i) => (
              <Cell key={i} fill={getBarColor(entry.success_rate)} />
            ))}
          </Bar>
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
}