c229125055
* Various improvements Cards, OmniSearch and Cards Listing * Improved cards listing page * Various improvements in product analytics * Charts UI improvements * ui crash * Chart improvements and layout toggling * Various improvements * Tooltips * Improved icons in cards listing page * Update WidgetFormNew.tsx * Sankey improvements * Icon and text updates Text alignment and color changes in x-ray Icon Mapping with appropriate names and shapes * Colors and Trend Chart Interaction updates * ui --------- Co-authored-by: nick-delirium <nikita@openreplay.com>
55 lines
No EOL
1.7 KiB
TypeScript
55 lines
No EOL
1.7 KiB
TypeScript
import React from 'react';
|
|
import {Layer, Rectangle} from 'recharts';
|
|
import NodeButton from './NodeButton';
|
|
|
|
interface CustomNodeProps {
|
|
x: number;
|
|
y: number;
|
|
width: number;
|
|
height: number;
|
|
index: number;
|
|
payload: any;
|
|
containerWidth: number;
|
|
activeNodes: any[];
|
|
}
|
|
|
|
const CustomNode: React.FC<CustomNodeProps> = (props) => {
|
|
const {x, y, width, height, index, payload, containerWidth} = props;
|
|
const isOut = x + width + 6 > containerWidth;
|
|
const isDemo = payload.isDemo;
|
|
const isDropoff = payload.name === 'Dropoff';
|
|
|
|
return (
|
|
<Layer key={`CustomNode${index}`} style={{cursor: 'pointer'}}>
|
|
<Rectangle
|
|
x={x}
|
|
y={y}
|
|
width={width}
|
|
height={height}
|
|
fill={isDropoff ? '#454545' : '#394EFF'}
|
|
fillOpacity='1'
|
|
/>
|
|
{!isDemo ? (
|
|
<foreignObject
|
|
x={isOut ? x - 6 : x + width + 5}
|
|
y={y + 5}
|
|
height="25"
|
|
style={{width: "180px", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis"}}
|
|
>
|
|
<NodeButton payload={payload}/>
|
|
</foreignObject>
|
|
) : (
|
|
<foreignObject
|
|
x={isOut ? x - 6 : x + width + 5}
|
|
y={y + 5}
|
|
height="28"
|
|
style={{width: "70px", whiteSpace: "nowrap"}}
|
|
>
|
|
<div className={'p-1 bg-white rounded border'}>{payload.name}</div>
|
|
</foreignObject>
|
|
)}
|
|
</Layer>
|
|
);
|
|
}
|
|
|
|
export default CustomNode; |