You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

react-lineage-dag

Package Overview
Dependencies
Maintainers
3
Versions
57
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-lineage-dag

表格/字段血缘React组件


Version published
Weekly downloads
818
increased by3.54%
Maintainers
3
Created
Weekly downloads
 

Readme

Source

血缘图

用于表示表与表之间,表和其他关联实体之间关系的图

demo preview

English | 简体中文

✨ 特性

  • 开箱即用的关系图表
  • 支持自定义操作、自定义节点事件
  • 优雅、自然的交互设计

使用

$ npm install react-lineage-dag@2.x

import LineageDag from 'react-lineage-dag';
// 需要引入样式
import 'react-lineage-dag/dist/index.css';

const data = {
  tables: [
    {
      id: '1',
      name: 'table-1',
      fields: [
        {
          name: 'id',
          title: 'id'
        },
        {
          name: 'age',
          title: 'age'
        }
      ]
    },
    {
      id: '2',
      name: 'table-2',
      fields: [
        {
          name: 'id',
          title: 'id'
        },
        {
          name: 'age',
          title: 'age'
        }
      ]      
    },
    {
      id: '3',
      name: 'table-3',
      fields: [
        {
          name: 'id',
          title: 'id'
        },
        {
          name: 'age',
          title: 'age'
        }
      ]      
    }    
  ],
  relations: [
    {
      srcTableId: '1',
      tgtTableId: '2',
      srcTableColName: 'id',
      tgtTableColName: 'age'
    },
    {
      srcTableId: '1',
      tgtTableId: '3',
      srcTableColName: 'id',
      tgtTableColName: 'age'
    }
  ]
}

const App = () => {
  return (
    <LineageDag {...data} />
  )
}

Props

属性名属性类型默认值说明
widthnumber100%画布宽度
heightnumber100%画布高度
tablesITable[][]节点数据,具体描述位于表格下方
relationsIRelation[][]线段数据,具体描述位于表格下方
columncolumn[][]列的属性配置(和antd table的column概念相似),具体描述位于表格下方
centerIdstringundefined中心点,当中心点发生变化时,画布会聚焦此中心点
operatoroperator[][]每个节点上的操作按钮渲染配置,具体描述位于表格下方
classNamestringundefined画布类名
actionMenuaction[][]右上角操作按钮(放大、缩小、居中),具体描述位于表格下方
configconfig{}画布配置,具体描述位于表格下方
onLoadedFunctionnoopbutterfly加载完毕时
  interface ITable {
    id: string;                 // 表ID
    name: string;               // 表名(显示名)
    isCollapse: boolean;        // 是否折叠所有列
    fields: []                  // 列数据
  }

  interface IRelation {
    id?: string;                 // 关系ID,非必填,建议填写
    srcTableId: string;          // 源表格ID
    tgtTableId: string;          // 目标表格ID
    srcTableColName: string;     // 源表字段名
    tgtTableColName: string;     // 目标表字段名
  }

  interface operator {
    id: string;                  // 按钮唯一标识
    name: string;                // 按钮中文名
    icon: JSX.Element            // 操作项渲染
    onClick: (node: any): void   // 按钮点击事件
  }

  interface column {
    key: string,                                              // 列的唯一标识
    width?: number,                                           // 列的宽度
    primaryKey: boolean,                                      // 这列的key对应的value是否作为键值对,与antd中的column的primaryKey概念对应
    render?(text: any, record: any, index: number): void      // 列渲染的方法
  }

  interface config {
    delayDraw: number; // 延迟渲染,此组件一定要确保画布容器渲染(包括动画执行)完毕才能渲染,否则坐标都产生偏移,如:antd的
    titleRender?: (title: string, node:any) => void; // 自定义节点的title render
    showActionIcon?: boolean,                        // 是否展示操作icon:放大,缩小,聚焦
    enableHoverChain: boolean,                       // 是否开启hover高亮链路
    enableHoverAnimate: boolean,                     // 是否开启hover高亮血缘链路带动画
    minimap?: {                                      // 是否开启缩略图
      enable: boolean,
      config: {
        nodeColor: any
      }
    }
  }

Dev

# clone 本项目后
$ npm install
$ cd example
$ npm install
$ npm start

Keywords

FAQs

Package last updated on 11 Sep 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc