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 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 { // '节点/线段'的右键菜单配置 title ? : string, // 每列的展示的名字 key: string, // 每列的唯一标志，对应数据上的key值 render ? (key: string) : void, // 支持每列的自定义样式 onClick ? (key: string, data: any) : void, // 每列的点击回调 } interface config { 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 // 节点激活颜色 } } } interface props { data: any, // 画布数据 width ? : number | string, // 组件宽 height ? : number | string, // 组件高 className ? : string, // 组件classname nodeMenu: Array < menu > , // 节点右键菜单配置 edgeMenu: Array < menu > , // 线段右键菜单配置 config ? : any, // 画布配置 polling ? : { // 支持轮训 enable: boolean, interval: number, // 轮训时间 getData(data): void // 轮训方法 }, registerStatus ? : { // 自行注册状态，会根据node的status给节点加上class success: 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, // 单击分页事件&搜索 }