supervisor-ui/components/charts/ProcessStateChart.tsx

'use client';

import { ProcessInfo, ProcessState } from '@/lib/supervisor/types';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from 'recharts';
import { chartColors } from '@/lib/utils/chartColors';

interface ProcessStateChartProps {
  processes: ProcessInfo[];
}

export function ProcessStateChart({ processes }: ProcessStateChartProps) {
  const stateCounts = processes.reduce(
    (acc, proc) => {
      if (proc.state === ProcessState.RUNNING) acc.running++;
      else if (proc.state === ProcessState.STOPPED || proc.state === ProcessState.EXITED) acc.stopped++;
      else if (proc.state === ProcessState.FATAL) acc.fatal++;
      else if (proc.state === ProcessState.STARTING) acc.starting++;
      else if (proc.state === ProcessState.STOPPING) acc.stopping++;
      else acc.other++;
      return acc;
    },
    { running: 0, stopped: 0, fatal: 0, starting: 0, stopping: 0, other: 0 }
  );

  const data = [
    { name: 'Running', value: stateCounts.running, color: chartColors.running },
    { name: 'Stopped', value: stateCounts.stopped, color: chartColors.stopped },
    { name: 'Fatal', value: stateCounts.fatal, color: chartColors.fatal },
    { name: 'Starting', value: stateCounts.starting, color: chartColors.starting },
    { name: 'Stopping', value: stateCounts.stopping, color: chartColors.stopping },
    { name: 'Other', value: stateCounts.other, color: chartColors.muted },
  ].filter((item) => item.value > 0);

  return (
    <Card>
      <CardHeader>
        <CardTitle>Process State Distribution</CardTitle>
      </CardHeader>
      <CardContent>
        <ResponsiveContainer width="100%" height={300}>
          <PieChart>
            <Pie
              data={data}
              cx="50%"
              cy="50%"
              labelLine={false}
              label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
              outerRadius={80}
              fill="#8884d8"
              dataKey="value"
            >
              {data.map((entry, index) => (
                <Cell key={`cell-${index}`} fill={entry.color} />
              ))}
            </Pie>
            <Tooltip
              contentStyle={{
                backgroundColor: 'rgba(0, 0, 0, 0.9)',
                border: 'none',
                borderRadius: '8px',
                color: '#ffffff',
              }}
              itemStyle={{ color: '#ffffff' }}
            />
            <Legend />
          </PieChart>
        </ResponsiveContainer>
      </CardContent>
    </Card>
  );
}