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;
  /** Override ring hole size (e.g. "72%" leaves more room for center labels). */
  innerRadius?: string | number;
  /** Override compact chart wrapper height class when size is "sm". */
  compactClassName?: string;
  /** Ring thickness when size is "sm". */
  compactBarSize?: number;
}

export function TodayRadialGaugeChart({
  percent,
  completed,
  total,
  percentLabel,
  tasksLabel,
  size = 'md',
  fillColor = TODAY_CHART_PRIMARY_COLOR,
  showRatio = true,
  innerRadius,
  compactClassName,
  compactBarSize,
}: TodayRadialGaugeChartProps) {
  const isCompact = size === 'sm';
  const clamped = Math.max(0, Math.min(100, percent));
  const data = [{ name: 'progress', value: clamped, fill: fillColor }];
  const resolvedInnerRadius = innerRadius ?? (isCompact ? '62%' : '68%');
  const resolvedBarSize = isCompact ? (compactBarSize ?? 9) : 14;
  const wrapperClass = isCompact
    ? compactClassName ?? 'h-[108px]'
    : 'h-full min-h-0 flex-1';

  return (
    <div className={`relative w-full ${wrapperClass}`}>
      <ResponsiveContainer width="100%" height="100%">
        <RadialBarChart
          cx="50%"
          cy="50%"
          innerRadius={resolvedInnerRadius}
          outerRadius="100%"
          barSize={resolvedBarSize}
          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 ${
          innerRadius != null && isCompact ? 'px-2.5' : '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>
  );
}