Awesome

English | 简体中文

✨ 特性

• 支持左到右，上到下的布局
• 支持自定义状态，左上角自定义状态注释
• 支持自定义节点样式，以及hover，focus状态
• 支持线段label样式
• 支持节点，锚点，线段label的tooltips
• 支持节点，线段的右键菜单
• 支持minimap，以及高亮状态
• 支持线段流动动画

📦 安装

npm install react-monitor-dag

API<a name='canvas-attr'></a>：

<b>MonitorDag属性</b>

<a name='menu-type'></a><b>menu</b>

'节点/线段'的右键菜单配置

<a name='config'></a><b>config</b>

画布配置

<a name='edge-prop'></a><b>edge</b>

定制线段属性

<a name='group-prop'></a><b>group</b>

定制线段属性

<a name='minimap-prop'></a><b>minimap</b>

缩略图属性

<a name='minimap-config-prop'></a><b>minimap Config</b>

缩略图的配置

<a name='auto-layout-prop'></a><b>autoLayout Config</b>

自动布局的配置

<a name='polling'></a><b>polling</b>

轮训属性配置

<a name='statusNote'></a><b>statusNote</b>

画布左上角状态配置

<a name='notes-prop'></a><b>notes</b>

左上角状态配置信息

🔗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
  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 { // '节点/线段'的右键菜单配置
  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,          // 单击分页事件&搜索
    onNodeStatusChange?(data: any): void           // 画布有节点状态变化后的回调
}

如需要更多定制的需求，您可以提issue或者参考Butterfly来定制您需要的需求