npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@qppq54s/react-lineage-dag

v2.0.35-fix-4

Published

表格/字段血缘React组件

Downloads

9

Readme

血缘图

根据 此issue 修改代码,修复了部分表之前出现的重叠现象

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

demo preview

English | 简体中文

✨ 特性

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

使用

$ npm install [email protected]

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

const data = {
  columns: [{
    key: 'name',
    primaryKey: true
  }, {
    key: 'title',
  }],
  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

| 属性名 | 属性类型 | 默认值 | 说明 | | ---- | ---- | ---- | ---- | | width | number | 100% | 画布宽度 | | height | number | 100% | 画布高度 | | tables | ITable[] | [] | 节点数据,具体描述位于表格下方 | | relations | IRelation[] | [] | 线段数据,具体描述位于表格下方 | | column | column[] | [] | 列的属性配置(和antd table的column概念相似),具体描述位于表格下方 | | centerId | string | undefined | 中心点,当中心点发生变化时,画布会聚焦此中心点 | | operator | operator[] | [] | 每个节点上的操作按钮渲染配置,具体描述位于表格下方 | | className | string | undefined | 画布类名 | | actionMenu | action[] | [] | 右上角操作按钮(放大、缩小、居中),具体描述位于表格下方 | | config | config | {} | 画布配置,具体描述位于表格下方 | | onLoaded | Function | noop | butterfly加载完毕时 |

  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高亮链路
    minimap?: {                                      // 是否开启缩略图
      enable: boolean,
      config: {
        nodeColor: any
      }
    }
  }

Dev

# clone 本项目后
$ nvm use v16.16.0
$ npm install
$ cd example
$ npm install
$ npm start