demo cleaning

src/components/DashboardPieChart.tsx

@@ -0,0 +1,89 @@
+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 * 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;