57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { 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;
|
|
}
|
|
|
|
export function TodayRadialGaugeChart({
|
|
percent,
|
|
completed,
|
|
total,
|
|
percentLabel,
|
|
tasksLabel,
|
|
}: TodayRadialGaugeChartProps) {
|
|
const clamped = Math.max(0, Math.min(100, percent));
|
|
const data = [{ name: 'completion', value: clamped, fill: TODAY_CHART_PRIMARY_COLOR }];
|
|
|
|
return (
|
|
<div className="relative h-[240px] w-full">
|
|
<ResponsiveContainer width="100%" height="100%">
|
|
<RadialBarChart
|
|
cx="50%"
|
|
cy="50%"
|
|
innerRadius="68%"
|
|
outerRadius="100%"
|
|
barSize={14}
|
|
data={data}
|
|
startAngle={90}
|
|
endAngle={-270}
|
|
>
|
|
<RadialBar
|
|
background={{ fill: 'rgba(41, 69, 106, 0.55)' }}
|
|
dataKey="value"
|
|
cornerRadius={8}
|
|
/>
|
|
</RadialBarChart>
|
|
</ResponsiveContainer>
|
|
<div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center">
|
|
<span className="text-3xl font-semibold text-text-primary">{percentLabel}</span>
|
|
<span className="mt-1 text-xs text-text-muted">{tasksLabel}</span>
|
|
{total > 0 ? (
|
|
<span className="mt-0.5 text-[11px] text-text-secondary">
|
|
{completed}/{total}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|