88 أسطر
2.6 KiB
TypeScript
88 أسطر
2.6 KiB
TypeScript
import React from "react";
|
|
import { PieChart, Pie, Cell } from "recharts";
|
|
|
|
interface Ring {
|
|
color: string;
|
|
value: number;
|
|
}
|
|
|
|
interface Card {
|
|
percent: number;
|
|
rings: Ring[];
|
|
}
|
|
|
|
interface MultiRingCircularProgressProps {
|
|
card: Card;
|
|
hoveredIndex: number | null;
|
|
onHover: (index: number | null) => void;
|
|
cardId: string;
|
|
}
|
|
|
|
export default function MultiRingCircularProgress({ card, hoveredIndex, onHover, cardId }: MultiRingCircularProgressProps) {
|
|
const { percent, rings } = card;
|
|
|
|
// Create ring data with proper outer and inner radius calculations
|
|
const ringData = rings.map((ring, index) => ({
|
|
...ring,
|
|
outerRadius: 125 - (index * 20), // Decrease by 20px for each ring
|
|
innerRadius: 110 - (index * 20), // Decrease by 20px for each ring
|
|
}));
|
|
|
|
// When a ring is hovered, other rings become gray
|
|
const getHoverColor = (ring: Ring, index: number) => {
|
|
if (hoveredIndex === null) return ring.color;
|
|
if (hoveredIndex === index) return ring.color;
|
|
return "#d3d3d3"; // gray for non-hovered rings
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="flex items-center justify-center hover:scale-115 transition-all duration-300 cursor-pointer outline-none focus:outline-none focus:ring-0 focus:border-none"
|
|
onMouseLeave={() => onHover(null)}
|
|
onClick={() => {
|
|
console.log("hoveredIndex ");
|
|
}}
|
|
style={{ outline: "none", border: "none" }}
|
|
tabIndex={-1}
|
|
>
|
|
<PieChart width={400} height={400} className="focus-visible:outline-none focus-visible:ring-0 focus-visible:border-none" >
|
|
{ringData.map((ring, index) => (
|
|
<Pie
|
|
key={index}
|
|
data={[{ value: ring.value }, { value: 100 - ring.value }]}
|
|
dataKey="value"
|
|
startAngle={90}
|
|
endAngle={-270}
|
|
cornerRadius={50}
|
|
cx="50%"
|
|
cy="50%"
|
|
innerRadius={ring.innerRadius}
|
|
outerRadius={ring.outerRadius}
|
|
paddingAngle={0}
|
|
isAnimationActive={true}
|
|
scale={1.5}
|
|
onMouseEnter={() => onHover(index)}
|
|
onMouseLeave={() => onHover(null)}
|
|
fill={getHoverColor(ring, index)}
|
|
// pointerEvents={'none'}
|
|
>
|
|
<Cell
|
|
fill={getHoverColor(ring, index)}
|
|
/>
|
|
<Cell fill="#f2f3f5" />
|
|
</Pie>
|
|
))}
|
|
<text
|
|
x={200}
|
|
y={204}
|
|
textAnchor="middle"
|
|
dominantBaseline="middle"
|
|
style={{ fontSize: "1.3rem", fontWeight: "bold" }}
|
|
>
|
|
{percent}%
|
|
</text>
|
|
</PieChart>
|
|
</div>
|
|
);
|
|
}
|