d604f9920b
* feat ui: dashboards redesign start * more cards * fix ui: more different cards... * feat ui: finish cards, all trigger, all icons * change(ui): added missin const * feature(ui): new dashboard modal * feature(ui): new dashboard modal * change(ui): new cards * change(ui): dashboard redesign * change(ui): dashboard redesign * change(ui): dashboard redesign * change(ui): modal context and alert form * change(ui): table card show more with modal * change(ui): examples * change(ui): example categorize and other improvements * change(ui): example categorize and other improvements * change(ui): performance cards * change(ui): insights card * Various style updates in dashboards and other pages. (#2308) * Various minor style updates * Various style improvements * Update ExampleCards.tsx * change(ui): fixed an issue with card create * change(ui): fixed an issue with card create * change(ui): default filters and events order * change(ui): random data * Dashboards redesign - improvments (#2313) * Various minor style updates * Various style improvements * Update ExampleCards.tsx * various minor improvements in dashbaords. * revised dashboard widget header * change(ui): sessions by user * change(ui): funnel example * change(ui): modal height and scroll * change(ui): example cards with data * change(ui): example cards with data * change(ui): funnel bar text color * change(ui): example cards overlay click * change(ui): path analysis filter card --------- Co-authored-by: Shekar Siri <sshekarsiri@gmail.com> Co-authored-by: Sudheer Salavadi <connect.uxmaster@gmail.com>
82 lines
2.1 KiB
TypeScript
82 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { Layer } from 'recharts';
|
|
|
|
interface CustomLinkProps {
|
|
hoveredLinks: string[];
|
|
activeLinks: string[];
|
|
payload: any;
|
|
sourceX: number;
|
|
targetX: number;
|
|
sourceY: number;
|
|
targetY: number;
|
|
sourceControlX: number;
|
|
targetControlX: number;
|
|
linkWidth: number;
|
|
index: number;
|
|
activeLink: any;
|
|
onClick?: (payload: any) => void;
|
|
onMouseEnter?: () => void;
|
|
onMouseLeave?: () => void;
|
|
strokeOpacity?: number;
|
|
}
|
|
|
|
const CustomLink: React.FC<CustomLinkProps> = (props) => {
|
|
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;
|