livedash-node/components/charts/donut-chart-inner.tsx

"use client";

import {
  Cell,
  Legend,
  Pie,
  PieChart,
  ResponsiveContainer,
  Tooltip,
} from "recharts";

interface DonutChartInnerProps {
  data: Array<{ name: string; value: number; color?: string }>;
  title?: string;
  centerText?: {
    title: string;
    value: string | number;
  };
  colors: string[];
  height: number;
}

interface TooltipProps {
  active?: boolean;
  payload?: Array<{
    name: string;
    value: number;
    payload: { total: number };
  }>;
}

const CustomTooltip = ({ active, payload }: TooltipProps) => {
  if (active && payload && payload.length) {
    const data = payload[0];
    return (
      <div className="rounded-lg border bg-background p-3 shadow-md">
        <p className="text-sm font-medium">{data.name}</p>
        <p className="text-sm text-muted-foreground">
          <span className="font-medium text-foreground">{data.value}</span>{" "}
          sessions ({((data.value / data.payload.total) * 100).toFixed(1)}%)
        </p>
      </div>
    );
  }
  return null;
};

interface LegendProps {
  payload?: Array<{
    value: string;
    color: string;
    type?: string;
  }>;
}

const CustomLegend = ({ payload }: LegendProps) => {
  return (
    <div className="flex flex-wrap justify-center gap-4 mt-4">
      {payload?.map((entry, index) => (
        <div
          key={`legend-${entry.value}-${index}`}
          className="flex items-center gap-2"
        >
          <div
            className="w-3 h-3 rounded-full"
            style={{ backgroundColor: entry.color }}
          />
          <span className="text-sm text-muted-foreground">{entry.value}</span>
        </div>
      ))}
    </div>
  );
};

interface CenterLabelProps {
  centerText?: {
    title: string;
    value: string | number;
  };
}

const CenterLabel = ({ centerText }: CenterLabelProps) => {
  if (!centerText) return null;

  return (
    <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
      <div className="text-center">
        <p className="text-2xl font-bold">{centerText.value}</p>
        <p className="text-sm text-muted-foreground">{centerText.title}</p>
      </div>
    </div>
  );
};

export default function DonutChartInner({
  data,
  title,
  centerText,
  colors,
  height,
}: DonutChartInnerProps) {
  const total = data.reduce((sum, item) => sum + item.value, 0);
  const dataWithTotal = data.map((item) => ({ ...item, total }));

  return (
    <div
      className="relative"
      role="img"
      aria-label={`${title || "Chart"} - ${data.length} segments`}
    >
      <ResponsiveContainer width="100%" height={height}>
        <PieChart>
          <Pie
            data={dataWithTotal}
            cx="50%"
            cy="50%"
            innerRadius={60}
            outerRadius={100}
            paddingAngle={2}
            dataKey="value"
            className="transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary"
            tabIndex={0}
            onKeyDown={(e) => {
              if (e.key === "Enter" || e.key === " ") {
                e.preventDefault();
              }
            }}
          >
            {dataWithTotal.map((entry, index) => (
              <Cell
                key={`cell-${entry.name}-${index}`}
                fill={entry.color || colors[index % colors.length]}
                className="hover:opacity-80 cursor-pointer focus:opacity-80"
                stroke="hsl(var(--background))"
                strokeWidth={2}
              />
            ))}
          </Pie>
          <Tooltip content={<CustomTooltip />} />
          <Legend content={<CustomLegend />} />
        </PieChart>
      </ResponsiveContainer>
      <CenterLabel centerText={centerText} />
    </div>
  );
}