react-monitor-dag

一个基于React的运维/监控DAG图

Usage no npm install needed!

<script type="module">
  import reactMonitorDag from 'https://cdn.skypack.dev/react-monitor-dag';
</script>

README

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 -
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

### 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 -

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
  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
}

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