@worktile/gantt 12.0.1 → 12.1.1

package/angular.json

@@ -1,136 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "gantt": {
-      "projectType": "library",
-      "root": "packages/gantt",
-      "sourceRoot": "packages/gantt/src",
-      "prefix": "ngx",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
-          "options": {
-            "tsConfig": "packages/gantt/tsconfig.lib.json",
-            "project": "packages/gantt/ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "tsConfig": "packages/gantt/tsconfig.lib.prod.json"
-            }
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "main": "packages/gantt/src/test.ts",
-            "tsConfig": "packages/gantt/tsconfig.spec.json",
-            "codeCoverage": true,
-            "karmaConfig": "packages/gantt/karma.conf.js"
-          }
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": [
-              "packages/gantt/tsconfig.lib.json",
-              "packages/gantt/tsconfig.spec.json"
-            ],
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
-        }
-      }
-    },
-    "example": {
-      "projectType": "application",
-      "schematics": {
-        "@schematics/angular:component": {
-          "style": "scss"
-        }
-      },
-      "root": "example",
-      "sourceRoot": "example/src",
-      "prefix": "example",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "outputPath": "dist/example",
-            "index": "example/src/index.html",
-            "main": "example/src/main.ts",
-            "polyfills": "example/src/polyfills.ts",
-            "tsConfig": "example/tsconfig.app.json",
-            "assets": [
-              "example/src/favicon.ico",
-              "example/src/assets"
-            ],
-            "styles": [
-              "example/src/styles.scss"
-            ],
-            "scripts": [],
-            "vendorChunk": true,
-            "extractLicenses": false,
-            "buildOptimizer": false,
-            "sourceMap": true,
-            "optimization": false,
-            "namedChunks": true
-          },
-          "configurations": {
-            "production": {
-              "fileReplacements": [
-                {
-                  "replace": "example/src/environments/environment.ts",
-                  "with": "example/src/environments/environment.prod.ts"
-                }
-              ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "namedChunks": false,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
-                }
-              ]
-            }
-          },
-          "defaultConfiguration": ""
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "example:build"
-          },
-          "configurations": {
-            "production": {
-              "browserTarget": "example:build:production"
-            }
-          }
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "example:build"
-          }
-        }
-      }
-    }
-  },
-  "defaultProject": "example",
-  "cli": {
-    "analytics": "7595d21d-c10d-4b06-8050-b8e56319939c"
-  }
-}

package/docs/guides/basic/components.md

@@ -1,54 +0,0 @@
----
-title: 组件说明
-path: 'components'
-order: 20
----
-
-`NgxGanttModule` 导出了多个组件，基础的组件有 `ngx-gantt`、`ngx-gantt-table`、`ngx-gantt-column`，同时还导出了一些适用于自定义扩展的高级组件 `ngx-gantt-root`、`ngx-gantt-bar`、 `ngx-gantt-range`。
-
-# 基础组件
-
-## ngx-gantt
-
-`ngx-gantt` 甘特图的根组件。
-
-## ngx-gantt-table
-
-`ngx-gantt-table`组件是指甘特图左侧的表格，该组件在`ngx-gantt`组件内部使用。
-
-## ngx-gantt-column
-
-`ngx-gantt-column`组件指甘特图左侧的表格中的列，该组件在`ngx-gantt-table`组件内部使用。
-
-```html
-<ngx-gantt>
-  <ngx-gantt-table>
-    <ngx-gantt-column> ... </ngx-gantt-column>
-  </ngx-gantt-table>
-</ngx-gantt>
-```
-
-# 扩展高级组件
-
-## ngx-gantt-root
-
-`ngx-gantt-root` 与 `ngx-gantt` 组件类似，参数也基本一致，基于 `ngx-gantt-root` 组件我们可以自定义左侧与右侧区域的内容，一般用于有自定义需求的甘特图基于此组件做二次封装。
-
-
-# ngx-gantt-bar
-
-`ngx-gantt-bar`组件指甘特图右侧水平的条形图，常用于表示项目下的任务。在无其他特殊需求，仅作为展示的情况下是用不到该组件的。该组件可在`ngx-gantt-root`组件内部使用，以满足一些自定义甘特图的场景。
-
-# ngx-gantt-range
-
-`ngx-gantt-range`组件和`ngx-gantt-bar`是相似的，区别在于`ngx-gantt-bar`是条形图展示而`ngx-gantt-range`组件是范围区间展示，常用于表示时间范围区间。
-
-
-```html
-<ngx-gantt-root>
-  <ng-template #sideTemplate></ng-template>
-  <ng-template #mainTemplate>
-    <ngx-gantt-bar></ngx-gantt-bar>
-  </ng-template>
-</ngx-gantt-root>
-```

package/docs/guides/basic/event.md

@@ -1,70 +0,0 @@
----
-title: 事件类型
-path: 'event'
-order: 40
----
-
-# GanttDragEvent
-
-数据项拖拽事件类，用于拖拽开始后或结束后传递数据项
-
-```ts
-export class GanttDragEvent<T = unknown> {
-  item: GanttItem<T>;
-}
-```
-
-# GanttTableEvent
-
-左侧表格列数或拖拽改变列宽时传递当前所有列的信息
-
-```ts
-export class GanttTableEvent {
-  columns: QueryList<NgxGanttTableColumnComponent>;
-}
-```
-
-# GanttLinkDragEvent
-
-拖拽数据项与其他数据项建立关联关系时传递当前数据项与目标数据项信息
-
-```ts
-export class GanttLinkDragEvent<T = unknown> {
-  source: GanttItem<T>;
-  target?: GanttItem<T>;
-}
-```
-
-# GanttLoadOnScrollEvent
-
-左右滚动时传递滚动后的时间区间，便于使用方加载数据
-
-```ts
-export class GanttLoadOnScrollEvent {
-  start: number;
-  end: number;
-}
-```
-
-# GanttLineClickEvent
-
-点击两个建立关联关系的数据项的关联线时传递鼠标事件和两个数据项
-
-```ts
-export class GanttLineClickEvent<T = unknown> {
-  event: MouseEvent;
-  source: GanttItem<T>;
-  target: GanttItem<T>;
-}
-```
-
-# GanttBarClickEvent
-
-点击数据项时传递数据项信息
-
-```ts
-export class GanttBarClickEvent<T = unknown> {
-  event: Event;
-  item: GanttItem<T>;
-}
-```

package/docs/guides/basic/index.md

@@ -1,4 +0,0 @@
----
-title: 基本用法
-order: 20
----

package/docs/guides/basic/style.md

@@ -1,68 +0,0 @@
----
-title: 样式重写
-path: 'style'
-order: 50
----
-
-`ngx-gantt` 使用了 `css` 预处理器 `scss`，支持重写组件的大部分的色值和部分layout样式。
-
-
-```scss
-// basic
-$gantt-color: #333 !default;
-$gantt-header-height: 44px !default;
-$gantt-border-color: #eee !default;
-$gantt-bg-color: #fff !default;
-$gantt-side-shadow: 12px 0 16px -10px rgba(0, 0, 0, 0.15) !default;
-$gantt-container-background-color: #fafafa !default;
-$gantt-item-height: 44px !default;
-$gantt-group-background-color: rgba(
-  $color: #f3f3f3,
-  $alpha: 0.5
-) !default;
-$gantt-group-height: 44px !default;
-$gantt-table-td-padding: 0 15px !default;
-
-// calendar
-$gantt-date-primary-color: #888 !default;
-$gantt-date-primary-font-size: 14px !default;
-$gantt-date-primary-border: #ddd !default;
-$gantt-date-secondary-color: #333 !default;
-$gantt-date-secondary-font-size: 14px !default;
-$gantt-date-secondary-weekend-color: #aaa !default;
-$gantt-date-week-backdrop-bg: rgba(
-  $color: #f3f3f3,
-  $alpha: 0.5
-) !default;
-$gantt-date-today-color: #ff9f73 !default;
-$gantt-date-today-text-color: #fff !default;
-
-// bar
-$gantt-bar-bg: #fff !default;
-$gantt-bar-layer-bg: #fff !default;
-$gantt-bar-handle-color: #cacaca !default;
-$gantt-bar-handle-height: 12px !default;
-$gantt-bar-background-color: #348fe4 !default;
-
-// drag
-$gantt-item-drag-mask-color: #348fe4 !default;
-$gantt-link-dragging-line-color: #348fe4 !default;
-
-// link
-$gantt-link-line-color: #348fe4 !default;
-
-// table
-$gantt-table-header-drag-line-width: 3px !default;
-$gantt-table-header-drag-line-color: #348fe4 !default;
-
-```
-
-示例：
-
-```
-$gantt-color: #000;
-$gantt-bg-color: #fafafa;
-
-@import '~@worktile/gantt/main.bundle.scss';
-
-```

package/docs/guides/basic/type.md

@@ -1,70 +0,0 @@
----
-title: 数据类型
-path: 'data-type'
-order: 30
----
-
-`ngx-gantt` 组件接收两种数据输入类型 `GanttItem`和`GanttGroup`。`GanttItem` 指甘特图数据项格式，`GanttGroup`指分组数据格式，具体类型定义如下：
-
-# GanttItem
-
-```ts
-export interface GanttItem<T = unknown> {
-  id: string;
-  title: string;
-  start?: number;
-  end?: number;
-  group_id?: string;
-  links?: string[];
-  draggable?: boolean;
-  linkable?: boolean;
-  expandable?: boolean;
-  expanded?: boolean;
-  children?: GanttItem[];
-  color?: string;
-  barStyle?: Partial<CSSStyleDeclaration>;
-  origin?: T;
-  type?: GanttItemType;
-  progress?: number;
-}
-```
-
-
-| Name       | Type                           | Default | Description                            |
-| ---------- | ------------------------------ | ------- | -------------------------------------- |
-| id         | `string`                       | `-`     | 唯一标识                               |
-| title      | `string`                       | `-`     | 名称                                   |
-| start      | `number`                       | `-`     | 开始时间                               |
-| end        | `number`                       | `-`     | 截止时间                               |
-| group_id   | `string`                       | `-`     | 对应分组的 Id                          |
-| links      | `string[]`                     | `-`     | 具有关联关系的`GanttItem`的`id`集合    |
-| draggable  | `boolean`                      | `-`     | 设置是否可拖拽                         |
-| linkable   | `boolean`                      | `-`     | 设置是否可关联/被关联                  |
-| expandable | `boolean`                      | `-`     | 设置是否可展开/收起                    |
-| expanded   | `boolean`                      | `false` | 设置是否展开/收起                      |
-| children   | `GanttItem[]`                  | `-`     | 设置子数据                             |
-| color      | `string`                       | `-`     | 设置颜色                               |
-| barStyle   | `Partial<CSSStyleDeclaration>` | `-`     | 设置样式                               |
-| origin     | `T`                            | `-`     | 设置原始数据                           |
-| type       | `GanttItemType`                | `-`     | 设置数据展示方式（区间展示和普通展示） |
-| progress   | `number`                       | `-`     | 设置进度                               |
-
-# GanttGroup
-
-```ts
-export interface GanttGroup<T = unknown> {
-  id: string;
-  title: string;
-  expanded?: boolean;
-  origin?: T;
-  class?: string;
-}
-```
-
-| Name     | Type      | Default | Description       |
-| -------- | --------- | ------- | ----------------- |
-| id       | `string`  | `-`     | 唯一标识          |
-| title    | `string`  | `-`     | 名称              |
-| expanded | `boolean` | `true`  | 设置是否展开/收起 |
-| origin   | `T`       | `-`     | 设置原始数据      |
-| class    | `string`  | `-`     | 设置`class`       |

package/docs/guides/basic/usage.md

@@ -1,189 +0,0 @@
----
-title: 如何使用
-path: usage
-order: 10
----
-
-## 基本使用
-
-一般情况下最基本的使用我们只需要定义 `items` 数据传入组件中，如需要左侧的表格展示，则还需要定义表格的 column
-
-```html
-<ngx-gantt #gantt [items]="items">
-  <ngx-gantt-table>
-    <ngx-gantt-column name="标题" width="300px">
-      <ng-template #cell let-item="item"> {{ item.title }} </ng-template>
-    </ngx-gantt-column>
-  </ngx-gantt-table>
-</ngx-gantt>
-```
-
-```javascript
-export class AppGanttExampleComponent {
-  items: GanttItem[] = [
-    { id: '000000', title: 'Task 0', start: 1627729997, end: 1628421197, expandable: true },
-    { id: '000001', title: 'Task 1', start: 1617361997, end: 1625483597, links: ['000003', '000004', '000000'], expandable: true },
-    { id: '000002', title: 'Task 2', start: 1610536397, end: 1610622797 },
-    { id: '000003', title: 'Task 3', start: 1628507597, end: 1633345997, expandable: true }
-  ];
-}
-```
-
-## 如何设置分组
-
-分组模式下我们还需要传入一个 `groups` 的数组，并且保证我们传入的 `items` 数据中设置了每个数据项的 `group_id`
-
-```html
-<ngx-gantt #gantt [groups]="groups" [items]="items">
-  <ngx-gantt-table>
-    <ngx-gantt-column name="标题" width="300px">
-      <ng-template #cell let-item="item"> {{ item.title }} </ng-template>
-    </ngx-gantt-column>
-  </ngx-gantt-table>
-</ngx-gantt>
-```
-
-```javascript
-export class AppGanttExampleComponent {
-  groups: GanttGroup[] = [
-    { id: '000000', title: 'Group-0' },
-    { id: '000001', title: 'Group-1' }
-  ];
-  items: GanttItem[] = [
-    { id: '000000', title: 'Task 0', start: 1627729997, end: 1628421197, group_id: '000000' },
-    { id: '000001', title: 'Task 1', start: 1617361997, end: 1625483597, group_id: '000001' }
-  ];
-}
-```
-
-## 树形结构展示
-
-`GanttItem` 类型包含 `children` 属性，默认情况下只要我们传入了 `children` 属性则就就会展示为树形结构。
-
-```javascript
-export class AppGanttExampleComponent {
-  items: GanttItem[] = [
-    {
-      id: '000000',
-      title: 'Task 0',
-      children: [
-        { id: '000000-01', title: 'Task 0-1' },
-        { id: '000000-02', title: 'Task 0-2' }
-      ]
-    }
-  ];
-}
-```
-
-如果需要异步加载子数据，我们需要设置将组件的 `async` 设置为 `true` 然后设置加载子数据的 Resolve 函数 `childrenResolve`，最后我们还需要指定哪些数据是可展开的。
-
-```html
-<ngx-gantt #gantt [items]="items" [async]="true" [childrenResolve]="childrenResolve"> ... </ngx-gantt>
-```
-
-```javascript
-export class AppGanttExampleComponent {
-  // 设置 expandable 为true 指定数据是可展开的
-  items: GanttItem[] = [
-    { id: '000000', title: 'Task 0', start: 1627729997, end: 1628421197, expandable: true },
-    { id: '000001', title: 'Task 1', start: 1617361997, end: 1625483597, expandable: true }
-  ];
-
-  // 设置加载子数据的 Resolve 函数，返回值必须是一个可观察对象 Observable
-  childrenResolve = (item: GanttItem) => {
-    const children = randomItems(random(1, 5), item);
-    return of(children).pipe(delay(1000));
-  };
-}
-```
-
-## 依赖
-
-如果我们需要展示数据项的依赖关系，则需要设置 `GanttItem` 中的 `links` 属性，设置需要关联的 id，如果需要拖拽创建关联关系，则需要设置 `[linkable] = true`，在某些场景下可能我们需要设置某一条数据开启拖拽创建关联，我们也可以通过设置 item 数据的 `linkable` 来实现。
-
-```html
-<ngx-gantt #gantt [items]="items" [linkable]="true" (linkDragEnded)="linkDragEnded($event)"> ... </ngx-gantt>
-```
-
-```javascript
-export class AppGanttExampleComponent {
-  items: GanttItem[] = [
-    { id: '000000', title: 'Task 0', start: 1627729997, end: 1628421197, links: ['000001', '000002'] },
-    { id: '000001', title: 'Task 1', start: 1617361997, end: 1625483597, links: ['000003'] },
-    { id: '000002', title: 'Task 2', start: 1617361997, end: 1625483597, linkable: false }
-  ];
-
-  linkDragEnded($event: GanttLinkDragEvent) {
-    this.http
-      .post(`/api/item/deps`, {
-        source: event.source,
-        target: event.target
-      })
-      .subscribe((items) => {});
-  }
-}
-```
-
-## 滚动加载
-
-为了保证组件的性能，默认情况下只会展示一定周期的时间（不同的视图周期不同），所以组件默认开启了滚动加载。如果不需要滚动加载可以通过设置 `[disabledLoadOnScroll]=true` 来禁用。
-
-```html
-<ngx-gantt #gantt [items]="items" (loadOnScroll)="loadOnScroll($event)"> ... </ngx-gantt>
-```
-
-```javascript
-export class AppGanttExampleComponent {
-  items: GanttItem[] = [
-    { id: '000000', title: 'Task 0', start: 1627729997, end: 1628421197 },
-    { id: '000001', title: 'Task 1', start: 1617361997, end: 1625483597 },
-    { id: '000002', title: 'Task 2', start: 1617361997, end: 1625483597 }
-  ];
-
-  loadOnScroll(event: GanttLoadOnScrollEvent) {
-    this.http.get(`/api/items?start=${event.start}&end=${event.end}`).subscribe((items) => {
-      this.items = [...this.items, ...items];
-    });
-  }
-}
-```
-
-## 拖拽
-
-通过设置 `[draggable]=true` 来启用拖拽功能，支持 `(dragStarted)`、`(dragEnded)` 事件。
-
-```html
-<ngx-gantt #gantt [items]="items" [draggable]="true" (dragEnded)="dragEnded($event)"> ... </ngx-gantt>
-```
-
-```javascript
-export class AppGanttExampleComponent {
-  dragEnded($event: GanttDragEvent) {
-    this.http
-      .put(`/api/item/${$event.item.id}`, {
-        start: $event.item.start,
-        end: $event.item.end
-      })
-      .subscribe((items) => {});
-  }
-}
-```
-
-## 导出为图片
-
-如需要导出图片功能，我们需要在使用组件时注入图片打印服务 `GanttPrintService`
-
-```javascript
-@Component({
-  selector: 'app-gantt-example',
-  templateUrl: './gantt.component.html',
-  providers: [GanttPrintService]
-})
-export class AppGanttExampleComponent {
-  @ViewChild('gantt') ganttComponent: NgxGanttComponent;
-
-  exportImage() {
-    ganttComponent.print('image name');
-  }
-}
-```

package/docs/guides/index.md

@@ -1,5 +0,0 @@
----
-title: 指南
-path: 'guides'
-order: 1
----

package/docs/guides/intro/getting-started.md

@@ -1,79 +0,0 @@
----
-title: 快速开始
-path: 'getting-started'
-order: 2
----
-
-# 安装
-
-```bash
-$ npm i @worktile/gantt --save
-# or
-$ yarn add @worktile/gantt
-```
-
-# 使用
-
-### 导入模块
-
-```ts
-import { NgModule } from '@angular/core';
-import { NgxGanttModule } from '@worktile/gantt';
-
-@NgModule({
-  ...
-  imports: [ NgxGanttModule, ... ]
-  ...
-})
-export class AppModule {
-
-}
-```
-
-<br/>
-
-### 引入样式
-在 angular.json 中引入
-```json
-{
-    "styles": [
-        "node_modules/@worktile/gantt/main.bundle.scss"
-    ]
-}
-```
-在style.scss中引入预构建样式文件
-```
-@import "~@worktile/gantt/main.bundle.scss";
-```
-
-### 组件中使用
-
-
-```html
-<!-- component.html -->
-<ngx-gantt #gantt [items]="items">
-  <ngx-gantt-table>
-    <ngx-gantt-column name="标题" width="300px">
-      <ng-template #cell let-item="item"> {{ item.title }} </ng-template>
-    </ngx-gantt-column>
-  </ngx-gantt-table>
-</ngx-gantt>
-```
-
-```javascript
-// component.ts
-@Component({
-  selector: 'app-gantt-example',
-  templateUrl: './gantt.component.html'
-})
-export class AppGanttExampleComponent {
-  items: GanttItem[] = [
-    { id: '000000', title: 'Task 0', start: 1627729997, end: 1628421197, expandable: true },
-    { id: '000001', title: 'Task 1', start: 1617361997, end: 1625483597, links: ['000003', '000004', '000000'], expandable: true },
-    { id: '000002', title: 'Task 2', start: 1610536397, end: 1610622797 },
-    { id: '000003', title: 'Task 3', start: 1628507597, end: 1633345997, expandable: true }
-  ];
-
-  constructor() {}
-}
-```