react-lineage-dag v2.1.0-beta.23

Blood Map

A diagram used to represent relationships between tables and between table and other related entities

English | 简体中文

✨ Features

• relational diagram out of the box
• support custom operations and custom node events
• elegant, natural interaction design

Usage

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

import LineageDag from 'react-lineage-dag';
// need to import styles
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

  interface ITable {
    id: string;                 // table ID
    name: string;               // table name
    isCollapse: boolean;        // whether to collapse all the columns
    fields: []                  // data stored in columns
  }

  interface IRelation {
    id?: string;                 // relation ID, not required, but recommended
    srcTableId: string;          // source table ID
    tgtTableId: string;          // target table ID
    srcTableColName: string;     // field name of source table
    tgtTableColName: string;     // field name of target table
  }

  interface operator {
    id: string;                  // unique identification of the button
    name: string;                // chinese name of the button
    icon: JSX.Element            // rendering of the operator
    onClick: (node: any): void   // click event
  }

  interface column {
    key: string,                                              // unique identification of the column
    width?: number,                                           // column width
    primaryKey: boolean,                                      // whether the value corresponding to the key of this column is a key-value pair, corresponding to the primary key concept of the column in antd
    render?(text: any, record: any, index: number): void      // rendering method of the column
  }

  interface config {
    delayDraw: number; // Delayed rendering, this component must ensure that the canvas container rendering (including animation execution) is completed before rendering, otherwise the coordinates will be offset, such as: antd's modal animation
    titleRender?: () => void;                         // title render of custom node
    showActionIcon?: boolean,                        // whether to display the operation icons: zoom in, zoom out, focus
    enableHoverChain: boolean,                       // whether to enable highlight the chain when hovering
    enableHoverAnimate: boolean,                     // whether to enable highlight the chain with animate when hovering
    minimap?: {                                      // whether to enable thumbnail
      enable: boolean,
      config: {
        nodeColor: any
      }
    }
  }

Dev

# after clone this project
$ npm install
$ cd example
$ npm install
$ npm start