Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bert0324/lineage-dag
https://github.com/bert0324/lineage-dag
Last synced: 10 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/bert0324/lineage-dag
- Owner: Bert0324
- License: mit
- Created: 2023-04-03T13:57:36.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-19T12:30:37.000Z (11 months ago)
- Last Synced: 2024-11-08T20:50:16.308Z (2 months ago)
- Language: JavaScript
- Size: 920 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.en-US.md
- License: LICENSE
Awesome Lists containing this project
README
# Blood Map
> A diagram used to represent relationships between tables and between table and other related entities
English | [简体中文](./README.md)
## ✨ Features
- relational diagram out of the box
- support custom operations and custom node events
- elegant, natural interaction design
## Usage
```shell
$ npm install [email protected]
```
```jsx
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 (
)
}
```
## Props
| Property | Type | Default | Description |
| ---- | ---- | ---- | ---- |
| width | number | 100% | Canvas width |
| height | number | 100% | Canvas height |
| tables | ITable[] | [] | Nodes data, the detailed description is below the table |
| relations | IRelation[] | [] | Relations data, the detailed description is below the table |
| column | column[] | [] | Property configuration of the column (similar to the concept of column in antd table), the detailed description is below the table |
| centerId | string | undefined | Center point, when the center point changes, the canvas will focus on the point |
| operator | operator[] | [] | Render configuration of operation buttons on each node, the detailed description is below the table |
| className | string | undefined | Class name of canvas |
| actionMenu | action[] | [] | Operation button in the upper right corner (zoom in, zoom out, center), the detailed description is below the table |
| config | config | {} | Configuration of the canvas, the detailed description is below the table |
| onLoaded | Function | noop | Triggered when the butterfly is loaded |
```ts
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
minimap?: { // whether to enable thumbnail
enable: boolean,
config: {
nodeColor: any
}
}
}
```
## Dev
```shell
# after clone this project
$ npm install
$ cd example
$ npm install
$ npm start
```