63 lines
1.6 KiB
TypeScript
63 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { Layer, Rectangle } from 'recharts';
|
|
|
|
function CustomLink(props: any) {
|
|
const [fill, setFill] = React.useState('url(#linkGradient)');
|
|
const {
|
|
hoveredLinks,
|
|
activeLinks,
|
|
payload,
|
|
sourceX,
|
|
targetX,
|
|
sourceY,
|
|
targetY,
|
|
sourceControlX,
|
|
targetControlX,
|
|
linkWidth,
|
|
index,
|
|
activeLink
|
|
} =
|
|
props;
|
|
const isActive = activeLinks.length > 0 && activeLinks.includes(payload.id);
|
|
const isHover = hoveredLinks.length > 0 && hoveredLinks.includes(payload.id);
|
|
|
|
const onClick = () => {
|
|
if (props.onClick) {
|
|
props.onClick(props.payload);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Layer
|
|
key={`CustomLink${index}`}
|
|
onClick={onClick}
|
|
onMouseEnter={props.onMouseEnter}
|
|
onMouseLeave={props.onMouseLeave}
|
|
>
|
|
<path
|
|
d={`
|
|
M${sourceX},${sourceY + linkWidth / 2}
|
|
C${sourceControlX},${sourceY + linkWidth / 2}
|
|
${targetControlX},${targetY + linkWidth / 2}
|
|
${targetX},${targetY + linkWidth / 2}
|
|
L${targetX},${targetY - linkWidth / 2}
|
|
C${targetControlX},${targetY - linkWidth / 2}
|
|
${sourceControlX},${sourceY - linkWidth / 2}
|
|
${sourceX},${sourceY - linkWidth / 2}
|
|
Z
|
|
`}
|
|
fill={isActive ? 'rgba(57, 78, 255, 1)' : (isHover ? 'rgba(57, 78, 255, 0.5)' : fill)}
|
|
strokeWidth='1'
|
|
strokeOpacity={props.strokeOpacity}
|
|
onMouseEnter={() => {
|
|
setFill('rgba(57, 78, 255, 0.5)');
|
|
}}
|
|
onMouseLeave={() => {
|
|
setFill('url(#linkGradient)');
|
|
}}
|
|
/>
|
|
</Layer>
|
|
);
|
|
}
|
|
|
|
export default CustomLink;
|