dyolink/frontend/src/components/today/TodayRadialGaugeChart.tsx

'use client';

import {
  PolarAngleAxis,
  RadialBar,
  RadialBarChart,
  ResponsiveContainer,
} from 'recharts';

import { TODAY_CHART_PRIMARY_COLOR } from '@/components/today/chart-theme';

interface TodayRadialGaugeChartProps {
  percent: number;
  completed: number;
  total: number;
  percentLabel: string;
  tasksLabel: string;
  size?: 'sm' | 'md';
  fillColor?: string;
  showRatio?: boolean;
}

export function TodayRadialGaugeChart({
  percent,
  completed,
  total,
  percentLabel,
  tasksLabel,
  size = 'md',
  fillColor = TODAY_CHART_PRIMARY_COLOR,
  showRatio = true,
}: TodayRadialGaugeChartProps) {
  const isCompact = size === 'sm';
  const clamped = Math.max(0, Math.min(100, percent));
  const data = [{ name: 'progress', value: clamped, fill: fillColor }];

  return (
    <div className={`relative w-full ${isCompact ? 'h-[108px]' : 'h-full min-h-0 flex-1'}`}>
      <ResponsiveContainer width="100%" height="100%">
        <RadialBarChart
          cx="50%"
          cy="50%"
          innerRadius={isCompact ? '62%' : '68%'}
          outerRadius="100%"
          barSize={isCompact ? 9 : 14}
          data={data}
          startAngle={90}
          endAngle={-270}
        >
          <PolarAngleAxis type="number" domain={[0, 100]} tick={false} />
          <RadialBar
            background={{ fill: 'rgba(41, 69, 106, 0.55)' }}
            dataKey="value"
            cornerRadius={isCompact ? 6 : 8}
          />
        </RadialBarChart>
      </ResponsiveContainer>
      <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center px-1">
        <span
          className={`font-semibold text-text-primary ${isCompact ? 'text-base leading-tight' : 'text-3xl'}`}
        >
          {percentLabel}
        </span>
        <span className={`text-text-muted ${isCompact ? 'mt-0.5 text-[10px]' : 'mt-1 text-xs'}`}>
          {tasksLabel}
        </span>
        {showRatio && total > 0 ? (
          <span
            className={`text-text-secondary ${isCompact ? 'mt-0.5 text-[10px]' : 'mt-0.5 text-[11px]'}`}
          >
            {completed}/{total}
          </span>
        ) : null}
      </div>
    </div>
  );
}