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>
57 lines
1.8 KiB
TypeScript
57 lines
1.8 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;
|
|
|
|
return (
|
|
<Layer key={`CustomNode${index}`} style={{cursor: 'pointer'}}>
|
|
<Rectangle x={x} y={y} width={width} height={height} fill='#394EFF' fillOpacity='1'/>
|
|
|
|
{/*<foreignObject*/}
|
|
{/* x={isOut ? x - 6 : x + width + 5}*/}
|
|
{/* y={0}*/}
|
|
{/* height={48}*/}
|
|
{/* style={{ width: '150px', padding: '2px' }}*/}
|
|
{/*>*/}
|
|
{/* <NodeDropdown payload={payload} />*/}
|
|
{/*</foreignObject>*/}
|
|
|
|
{!isDemo ? (
|
|
<foreignObject
|
|
x={isOut ? x - 6 : x + width + 5}
|
|
y={y + 5}
|
|
height="25"
|
|
style={{width: "150px", 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;
|