96 lines
2.8 KiB
TypeScript
96 lines
2.8 KiB
TypeScript
'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>
|
|
);
|
|
}
|