✨ 特性

📦 安装

npm install react-monitor-dag

API：

MonitorDag属性

menu

config

edge

group

minimap

minimap Config

autoLayout Config

polling

statusNote

notes

🔗API

importMonitorDagfrom'react-monitor-dag';import'react-monitor-dag/dist/index.css';<MonitorDagdata={data}nodeMenu={menu}// Node Right-click Menu ConfigurationedgeMenu={menu}// Edge Right-click Menu ConfigurationonClickNode={(node)=>{}}// Single Click Node EventonContextmenuNode={(node)=>{}}// Right Click Node EventonDblClickNode={(node)=>{}}// Double Click Node EventonClickEdge={(edge)=>{}}// Single Click Edge EventonContextmenuEdge={(edge)=>{}}// Right Click Edge EventonContextmenuGroup={(data)=>{}}// Right Click Group EventonChangePage={(data)=>{}}// Single Click Group Pagination EventonNodeStatusChange={(data)=>{}}// the canvas has a callback after the node state changespolling={{// support pollingenable:true,interval:5000,// interval of pollinggetData:(data)=>{// the method of get data}}}registerStatus={{// Register status, which adds class to the node based on its statussuccess:'success-class',fail:'fail-class',timeout:'timeout-class',running:'runnning-class',waitting:'waiting-class',other:'other-class'}}statusNote={{// Status note in upper left cornerenable:true,notes:[{code:'success',className:'success-class',text:'运行成功'}]}}></MonitorDag>

interfacemenu{// '节点/线段'的右键菜单配置title ? :string,// 每列的展示的名字key:string,// 每列的唯一标志，对应数据上的key值render ?(key:string) :void,// 支持每列的自定义样式onClick ?(key:string,data:any) :void,// 每列的点击回调}interfaceconfig{direction:string,// 图的方向: 'left-right' or 'top-bottom'edge:{// 定制线段的类型type:string,config:any},labelRender ?(label:JSX.Element) :void,// 线段label的渲染方法labelTipsRender ?(data:any) :void,// 线段label tips的渲染方法nodeRender ?(data:any) :void,// 节点的渲染方法nodeTipsRender ?(data:any) :void,// 节点tips的渲染方法endpointTipsRender ?(data:any) :void,// 锚点tips的渲染方法minimap:{// 是否开启缩略图enable:boolean,config:{nodeColor:any,// 节点颜色activeNodeColor:any// 节点激活颜色}}}interfaceprops{data:any,// 画布数据width ? :number|string,// 组件宽height ? :number|string,// 组件高className ? :string,// 组件classnamenodeMenu:Array<menu>,// 节点右键菜单配置edgeMenu:Array<menu>,// 线段右键菜单配置config ? :any,// 画布配置polling ? :{// 支持轮训enable:boolean,interval:number,// 轮训时间getData(data):void// 轮训方法},registerStatus ? :{// 自行注册状态，会根据node的status给节点加上classsuccess:string,fail:string,// key:value的形式，可以自行注册，和node的status字段对应起来},statusNote ? :{// 画布左上角状态注释enable:boolean,notes:[{code:string,className:string,text:string,render?:()=>JSX.Element}]},onClickNode ?(node:any) :void,// 单击节点事件onContextmenuNode ?(node:any) :void,// 右键节点事件onDblClickNode ?(node:any) :void,// 双击节点事件onClickEdge ?(edge:any) :void,// 单击线段事件onClickLabel ?(label:string,edge:any) :void,//单击label的事件onContextmenuEdge ?(edge:any) :void,// 右键线段事件onContextmenuGroup?(edge:any):void,// 右键group事件onChangePage?(data:any):void,// 单击分页事件&搜索onNodeStatusChange?(data:any):void// 画布有节点状态变化后的回调}