Responsiveness For Chart Fixed

client/src/modules/OPD/PatientDistributionChart.jsx

@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import { PieChart, Pie, Cell, Legend, ResponsiveContainer, Sector } from 'recharts';
+
+const PatientDistributionChart = () => {
+  const [activeIndex, setActiveIndex] = useState(null);
+
+  const data = [
+    { name: 'CORPORATE', value: 29.7 },
+    { name: 'HMO', value: 19.7 },
+    { name: 'INSURANCE', value: 49.1 },
+    { name: 'MEDICARE', value: 1.4 },
+    { name: 'Financial Class', value: 0.1 },
+  ];
+
+  const COLORS = ['#3b82f6', '#f97316', '#9ca3af', '#facc15', '#14b8a6'];
+
+  const onPieEnter = (_, index) => {
+    setActiveIndex(index);
+  };
+
+  const onPieLeave = () => {
+    setActiveIndex(null);
+  };
+
+  const renderActiveShape = (props) => {
+    const { cx, cy, midAngle, innerRadius, outerRadius, startAngle, endAngle, fill, payload, percent, value } = props;
+    const sin = Math.sin(-midAngle * Math.PI / 180);
+    const cos = Math.cos(-midAngle * Math.PI / 180);
+    const sx = cx + (outerRadius + 10) * cos;
+    const sy = cy + (outerRadius + 10) * sin;
+    const mx = cx + (outerRadius + 30) * cos;
+    const my = cy + (outerRadius + 30) * sin;
+    const ex = mx + (cos >= 0 ? 1 : -1) * 22;
+    const ey = my;
+    const textAnchor = cos >= 0 ? 'start' : 'end';
+
+    return (
+      <g>
+        <Sector
+          cx={cx}
+          cy={cy}
+          innerRadius={innerRadius}
+          outerRadius={outerRadius}
+          startAngle={startAngle}
+          endAngle={endAngle}
+          fill={fill}
+        />
+        <Sector
+          cx={cx}
+          cy={cy}
+          startAngle={startAngle}
+          endAngle={endAngle}
+          innerRadius={outerRadius + 6}
+          outerRadius={outerRadius + 10}
+          fill={fill}
+        />
+        <path d={`M${sx},${sy}L${mx},${my}L${ex},${ey}`} stroke={fill} fill="none" />
+        <circle cx={ex} cy={ey} r={2} fill={fill} stroke="none" />
+        <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} textAnchor={textAnchor} fill="#333" className="text-sm">{`${payload.name}`}</text>
+        <text x={ex + (cos >= 0 ? 1 : -1) * 12} y={ey} dy={18} textAnchor={textAnchor} fill="#999" className="text-xs">
+          {`${value.toFixed(1)}%`}
+        </text>
+      </g>
+    );
+  };
+
+  const CustomizedLegend = (props) => {
+    const { payload } = props;
+    return (
+      <ul className="list-none p-0">
+        {payload.map((entry, index) => (
+          <li key={`item-${index}`} className="flex items-center mb-2">
+            <span
+              className="inline-block w-3 h-3 mr-2 rounded-full"
+              style={{ backgroundColor: entry.color }}
+            />
+            <span className="text-sm">{entry.value} - {entry.payload.value.toFixed(1)}%</span>
+          </li>
+        ))}
+      </ul>
+    );
+  };
+
+  return (
+    <ResponsiveContainer width="100%" height={400}>
+      <PieChart>
+        <Pie
+          activeIndex={activeIndex}
+          activeShape={renderActiveShape}
+          data={data}
+          cx="50%"
+          cy="50%"
+          innerRadius={0}
+          outerRadius={100}
+          fill="#8884d8"
+          dataKey="value"
+          onMouseEnter={onPieEnter}
+          onMouseLeave={onPieLeave}
+        >
+          {data.map((entry, index) => (
+            <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+          ))}
+        </Pie>
+        <Legend content={<CustomizedLegend />} layout="vertical" align="right" verticalAlign="middle" />
+      </PieChart>
+    </ResponsiveContainer>
+  );
+};
+
+export default PatientDistributionChart;