# @tskctl/taskctl_graph

> TASKCTL 业界领先ETL批量调度专家

Latest version **1.0.1** (published 2021-10-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install @tskctl/taskctl_graph
pnpm add @tskctl/taskctl_graph
yarn add @tskctl/taskctl_graph
bun add @tskctl/taskctl_graph
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-10-27 |
| First published | 2021-10-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 74.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | mfhe@task.com |
| Maintainers | mfhetsk |
| Keywords | TASKCTL, graph-dag, workflow, org-tree |

## Links

- npm: https://www.npmjs.com/package/@tskctl/taskctl_graph
- Repository: https://gitee.com/mftaskctl/taskctl-graph-lib
- npm.io page: https://npm.io/package/@tskctl/taskctl_graph

## Alternatives

- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2021-10-27
- 1.0.0 — 2021-10-22
- 0.5.0 — 2021-10-15
- 0.4.4 — 2021-10-15
- 0.4.3 — 2021-10-15
- 0.4.2 — 2021-10-15
- 0.4.1 — 2021-10-15
- 0.4.0 — 2021-10-15
- 0.3.0 — 2021-10-14

## README

# TASKCTL 业界领先 ETL 批量调度专家

[![塔斯克](https://s3.bmp.ovh/imgs/2021/10/9211baef1279b3a7.png)](http://taskctl.com/)

> 源码地址: [https://gitee.com/mftaskctl/taskctl-graph-lib.git](https://gitee.com/mftaskctl/taskctl-graph-lib.git)  
> 在线预览: [http://mftaskctl.gitee.io/taskctl-graph-lib/](http://mftaskctl.gitee.io/taskctl-graph-lib/)  
> 最新版本: 0.4.3

## 1 安装及使用

### 1.1 添加依赖

```sh
# 添加NPM依赖
npm i -S @tskctl/taskctl_graph
yarn add @tskctl/taskctl_graph
```

### 1.2 使用

```ts
import { mockNodes, toCalcGraphData } from "@tskctl/taskctl_graph_lib";

// 模拟数据
const nodes = mockNodes(150, true);

// 计算图数据
const data = toCalcGraphData(nodes[0], {
  offset: [0, 0],
  size: [100, 50],
  space: [20, 10],
  debug: true,
  compact: storage.compact,
});
```

### 1.3 包声明

```ts
export declare namespace NS {
  /**
   * 盒子大小
   * S0 - 宽度 - 盒子
   * S1 - 高度 - 盒子
   * S2 - 高度 - 临时高度(计算时临时变量)
   * S3 - 个数 - 组节点下第一个非空子节点下的S3个数(计算时临时变量，用于画线)
   * S4 - 个数 - 组节点下最后一个非空子节点下的S4个数(计算时临时变量，用于画线)
   */
  type Size = [number, number, number, number, number];
  /** 节点类型: 0-串联;1-并联;2-普通节点 */
  type NodeType = 0 | 1 | 2;
  /** 图形方向: 0-从左到右;1-从上到下 */
  type GraphDirection = 0 | 1;
  /** 绘制图形配置 */
  type Opts = {
    /** 图形上下左右偏移值 */
    offset: [number, number];
    /** 节点之间间隔(水平与垂直方向) */
    space: [number, number];
    /** 普通节点盒子大小 */
    size: [number, number];
    /** 箭头对角线长->对等边 */
    arrow: number;
    /** 是否紧凑模型 -> 是否绘制单串行节点 */
    compact: boolean;
    /** 是否调试 */
    debug: boolean;
    /** 图形方向：0-从左到右;1-从上到下 */
    direction: GraphDirection;
    /** 是否启用数据优化 - 清楚空组套空组或组组只有一个节点情况 */
    optimizeData: boolean;
  };
  /** 节点基础数据对象 */
  interface XNode {
    /** 类型: 0-串联;1-并联;2-普通节点 */
    type: NodeType;
    /** 节点名称-唯一 */
    name: string;
    /** 子节点 */
    children?: XNode[];
    /** 节点强制依赖(画斜线), 多个使用逗号隔开 */
    lean?: string;
  }
  /** 节点绘制图形对象 */
  interface DrwNode extends XNode {
    /** 节点类型 */
    type: NodeType;
    /** 节点名称 */
    name: string;
    /** 子节点集合 */
    children: DrwNode[];
    /** 上级节点名称 */
    pname?: string;
    /** 盒子大小 */
    size: Size;
    /** 盒子坐标 */
    position: [number, number];
  }
}
/**
 * 计算图形
 * @param root 节点树根节点
 * @param config 配置
 * @returns
 */
export declare function toCalcGraphData(
  root: NS.XNode,
  config?: Partial<NS.Opts>
): {
  dnodes: NS.DrwNode[];
  dlines: string[];
  dsize: [number, number];
  root: NS.DrwNode;
};
```

## 2 案例

### 2.1 从左到右图形

![从左到右图形](https://s3.bmp.ovh/imgs/2021/10/5d402c41cb0abf23.png)

### 2.1 从上到下图形

![从上到下图形](https://s3.bmp.ovh/imgs/2021/10/8f1f6cda9e65e458.png)

---
_Source: https://npm.io/package/@tskctl/taskctl_graph · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._