English| [简体中文](. /README. md)

✨ Feature

• support the direction of left-to-right, top-to-bottom
• support for custom status, custom status note in upper left corner
• support for custom node styles and hover, focus status
• support edge's label style
• support the toolltips of node, endpoint, edge's label
• support right-click menu of nodes and edges
• support minimap and highlight status
• support edge flow animation

📦 Install

npm install react-monitor-dag

API：

MonitorDag properties

| Property | Description | Type | Default | |:-----------------:|:-----------------------------------------------------------------:|:---------------------------------------------------------------:|:-----------------------------------------------------------------------:| | data | data | any | - | | width | component width | number | string | - | | height | component height | number | string  | - | | className | component className | string | - | | nodeMenu | Node Right-click Menu Configuration | Array< menu> | (node) => Array< menu> | - | | nodeMenuClassName | Node Right-click Menu classname | string | - | | edgeMenu | Edge Right-click Menu Configuration | Array< [menu] | groupMenu | Group Right-click Menu Configuration | Array< [menu] (#menu-type)> | [ ] | | config | As configured aboveconfig Prop | any | - | | polling | support pollingpolling Prop | object | { } | | registerStatus | Register status, which adds class to the node based on its status | object | key:value, registered by user, corresponded to the status field of node | | statusNote | Status note in upper left cornerstatusNote Prop | object | { } | | onClickNode | Single Click Node Event | (node) => void | - | | onContextmenuNode | Right-Click Node Event | (node) => void | - | | onDblClickNode | Double Click Node Event | (node) => void | - | | onClickEdge | Single Click Edge Event | (edge) => void | - | | onClickLabel | Single Click Label Event | (label, edge) => void | - | | onContextmenuEdge | Right-Click Edge Event | (edge) => void | - | | onContextmenuGroup | Right-Click Group Event | (data) => void |
| onChangePage | Single-Click Group Pagination Event | (data) => void | | onNodeStatusChange | The canvas has a callback after the node state changes | (data) => void |

right-click menu configuration for'Node/Edge'

| Property | Description | Type | Default | |:--------:|:---------------------------------------:|:-----------------------------------------------:|:-------:| | title | name of each column | string | - | | key | unique flag for each column menu | string | - | | render | Customize the style of each column menu | (key) => void | - | | onClick | Click Callback for Each Column | (key, data) => void | - |

config

the configuration of canvas

| Property | Description | Type | Default | |:------------------:|:--------------------------------:|:-------------------------------------------------------------:|:---------------------------------:| | direction | the dag's direction | string | left-right | top-bottom | | edge | the configuration of edge | edge Prop { } | - | | labelRender | rendering method of edge's label | (label) => void | - | | labelTipsRender | rendering tooltips of edge label | (data) => void | - | | nodeRender | rendering of nodes | (data) => void | - | | nodeTipsRender | rendering tooltips of node | (data) => void | - | | endpointTipsRender | rendering tooltips of endpoint | (data) => void | - | | minimap | whether to show minimap | minimap Prop { } | - | | delayDraw | Delayed rendering. This component must ensure that the canvas container rendering (including animation execution) is completed before rendering, otherwise the coordinates will be offset, for example：Animation of Ant Design Modal | number | 0 | | autoLayout | custom layout | autoLayout Prop {} | - | | diffOptions | Collection of diff fields for node updates| Array< string> | - | | onLoaded | canvas loaded event| (data: {nodes, edges, groups}) => {} | - |

edge

the configuration of edge

| Property | Description | Type | Default | |:--------:|:------------------:|:----------------------------------:|:-------:| | type | the type of edge | string | - | | config | the config of edge | any | - |

group

the configuration of group

| Property | Description | Type | Default | |:------:|:--------:|:----------------------------------:|:-----:| | enableSearch | whether to enable the node group search node | boolean | false | | enablePagination | whether to turn on the page | boolean | true | | pageSize | nmber of per page | number | 20 | | rowCnt | the number of nodes are displayed in each row of the node group | number | 5 |

minimap

the configuration of minimap

| Property | Description | Type | Default | |:--------:|:-----------------------:|:---------------------------------------------------------------------------:|:-------:| | enable | whether to show minimap | boolean | - | | config | the config of minimap | minimap Config Prop { } | - |

autoLayout Config

the custom layout config

| Property | Description | Type | Default | |:--------:|:-----------------------:|:-------------------------------:|:-------:| | enable | whether to enable custom layout | boolean | - | | isAlways | whether to rearrange the layout after adding nodes | boolean | - | | config | algorithm configuration | { } | - |

minimap Config

the config of minimap

| Property | Description | Type | Default | |:---------------:|:-----------------:|:-------------------------------:|:-------:| | nodeColor | node color | any | - | | activeNodeColor | node active color | any | - |

polling

support polling

| Property | Description | Type | Default | |:--------:|:--------------------------:|:------------------------------------------:|:-------:| | enable | whether to support polling | boolean | - | | interval | interval of polling | number | - | | getData | the method of get data | (data) => void | - |

statusNote

Status note in upper left corner

| Property | Description | Type | Default | |:--------:|:-------------------------------------------:|:---------------------------------------------------------:|:-------:| | enable | whether to show status in upper left corner | boolean | - | | notes | the configuration of status note | notes Prop { } | - |

notes

the configuration of status note

| Property | Description | Type | Default | |:---------:|:----------------:|:-----------------------------------:|:-------:| | code | status code | string | - | | className | status className | string | - | | text | status text | string | - | | render | custom rendering methods | function | - |

🔗API

import MonitorDag from 'react-monitor-dag';
import 'react-monitor-dag/dist/index.css';
<MonitorDag
  data={data}
  nodeMenu={menu}                   // Node Right-click Menu Configuration
  edgeMenu={menu}                   // Edge Right-click Menu Configuration
  groupMenu={menu}                   // Group Right-click Menu Configuration
  onClickNode={(node) => {}}        // Single Click Node Event
  onContextmenuNode={(node) => {}}  // Right Click Node Event
  onDblClickNode={(node) => {}}     // Double Click Node Event
  onClickEdge={(edge) => {}}        // Single Click Edge Event
  onContextmenuEdge={(edge) => {}}  // Right Click Edge Event
  onContextmenuGroup={(data) => {}}   // Right Click Group Event
  onChangePage={(data) => {}}        // Single Click Group Pagination Event
  onNodeStatusChange={(data) => {}}  // The canvas has a callback after the node state changes
  polling={{                        // support polling
    enable: true,
    interval: 5000,                 // interval of polling 
    getData: (data) => {            // the method of get data

    }
  }}
  registerStatus={{                 // Register status, which adds class to the node based on its status
    success: 'success-class',
    fail: 'fail-class',
    timeout: 'timeout-class',
    running: 'runnning-class',
    waitting: 'waiting-class',
    other: 'other-class'
  }}
  statusNote={{                      // Status note in upper left corner
    enable: true,
    notes: [{
      code: 'success',
      className: 'success-class',
      text: '运行成功',
    }]
  }}
>
</MonitorDag>

interface menu { // right-click menu configuration for'Node/Edge'
  title ? : string, // name of each column
    key: string, // unique flag for each column menu
    render ? (key: string) : void, // Customize the style of each column menu
    onClick ? (key: string, data: any) : void, // Click Callback for Each Column
}

interface config {
  direction: string, // the dag's direction: 'left-right' or 'top-bottom'
    edge: { // the configuration of edge
      type: string,
      config: any
    },
    labelRender ? (label: JSX.Element) : void, // rendering method of edge's label
    labelTipsRender ? (data: any) : void, // rendering tooltips of edge label
    nodeRender ? (data: any) : void, // rendering of nodes
    nodeTipsRender ? (data: any) : void, // rendering tooltips of node
    endpointTipsRender ? (data: any) : void, // rendering tooltips of endpoint
    minimap: { // whether to show minimap
      enable: boolean,
      config: {
        nodeColor: any, // node color
        activeNodeColor: any // node active color
      }
    }
}

interface props {
  data: any, // data
    width ? : number | string, // component width
    height ? : number | string, // component height
    className ? : string, // component className
    nodeMenu: Array < menu > , // Node Right-click Menu Configuration
    edgeMenu: Array < menu > , // Edge Right-click Menu Configuration
    groupMenu: Array < menu > , // Group Right-click Menu Configuration
    config ? : any, // As configured above
    polling ? : { // support polling
      enable: boolean,
      interval: number, // interval of polling 
      getData(data): void // the method of get data
    },
    registerStatus ? : { // Register status, which adds class to the node based on its status
      success: string,
      fail: string
    },
    statusNote ? : { // Status note in upper left corner
      enable: boolean,
      notes: [{
        code: string,
        className: string,
        text: string,
        render?:() => JSX.Element
      }]
    },
    onClickNode ? (node: any) : void, // Single Click Node Event
    onContextmenuNode ? (node: any) : void, // Right-Click Node Event
    onDblClickNode ? (node: any) : void, // Double Click Node Event
    onClickEdge ? (edge: any) : void, // Single Click Edge Event
    onClickLabel ? (label: string, edge: any) : void, // Single Click Label Event
    onContextmenuEdge ? (edge: any) : void, // Right-Click Edge Event
    onContextmenuGroup?(edge: any): void,   // Right-Click Group Event
    onChangePage?(data:any): void,          // Single-Click Group Pagination Event
    onNodeStatusChange?(data: any): void           // The canvas has a callback after the node state changes
}

If you need more customized requirements, you can refer to issue or butterfly to customize your needs