Jason Jordan
89 lines
2.1 KiB
TypeScript
89 lines
2.1 KiB
TypeScript
import { Cell, Pie, PieChart, ResponsiveContainer } from 'recharts';
|
|
|
|
type TooltipPayload = ReadonlyArray<any>;
|
|
|
|
type Coordinate = {
|
|
x: number;
|
|
y: number;
|
|
};
|
|
|
|
type PieSectorData = {
|
|
percent?: number;
|
|
name?: string | number;
|
|
midAngle?: number;
|
|
middleRadius?: number;
|
|
tooltipPosition?: Coordinate;
|
|
value?: number;
|
|
paddingAngle?: number;
|
|
dataKey?: string;
|
|
payload?: any;
|
|
tooltipPayload?: ReadonlyArray<TooltipPayload>;
|
|
};
|
|
|
|
type GeometrySector = {
|
|
cx: number;
|
|
cy: number;
|
|
innerRadius: number;
|
|
outerRadius: number;
|
|
startAngle: number;
|
|
endAngle: number;
|
|
};
|
|
|
|
type PieLabelProps = PieSectorData &
|
|
GeometrySector & {
|
|
tooltipPayload?: any;
|
|
};
|
|
|
|
|
|
const RADIAN = Math.PI / 180;
|
|
const COLORS = ['#32CD32', '#E0E0E0'];
|
|
|
|
const renderCustomizedLabel = ({ cx, cy, midAngle, innerRadius, outerRadius, value }: PieLabelProps) => {
|
|
const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
|
|
const x = cx + (radius - 25) * Math.cos(-(midAngle ?? 0) * RADIAN);
|
|
const y = cy + radius * Math.sin(-(midAngle ?? 0) * RADIAN);
|
|
|
|
return (
|
|
<text x={x} y={y} fill="#04153E" textAnchor={x > cx ? 'start' : 'end'} dominantBaseline="central">
|
|
{`$${value}`}
|
|
</text>
|
|
);
|
|
};
|
|
|
|
interface DashboardPieChartProps {
|
|
paid: number;
|
|
remaining: number;
|
|
}
|
|
|
|
const DashboardPieChart: React.FC<DashboardPieChartProps> = ({paid, remaining}) => {
|
|
const data = [
|
|
{ name: 'Deductable Paid', value: paid },
|
|
{ name: 'Deductable Remaining', value: remaining },
|
|
];
|
|
return (
|
|
<div className="w-full h-full">
|
|
<PieChart width={250} height={140} title="Deductable Progress">
|
|
<Pie
|
|
data={data}
|
|
startAngle={180}
|
|
endAngle={0}
|
|
cx="50%"
|
|
cy="100%"
|
|
labelLine={false}
|
|
label={renderCustomizedLabel}
|
|
outerRadius={120}
|
|
fill="#2A4B6F"
|
|
dataKey="value"
|
|
stroke="#04153E"
|
|
strokeWidth={2}
|
|
>
|
|
{data.map((entry, index) => (
|
|
<Cell key={`cell-${entry.name}`} fill={COLORS[index % COLORS.length]} />
|
|
))}
|
|
</Pie>
|
|
</PieChart>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DashboardPieChart; |