README.en-US.md

A React-based Operations/Monitoring DAG Diagram

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	-
onClickCanvas	Click Canvas Event	() => 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

### menu

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