@worktile/gantt 11.0.2 → 12.0.1

package/README.md

@@ -1,24 +1,127 @@
-# Gantt
+# ngx-gantt
 
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.14.
+[![CircleCI](https://circleci.com/gh/worktile/ngx-gantt.svg?style=shield)](https://circleci.com/gh/worktile/ngx-gantt)
+[![Coverage Status][coveralls-image]][coveralls-url]
+[![npm (scoped)](https://img.shields.io/npm/v/@worktile/gantt?style=flat)](https://www.npmjs.com/package/@worktile/gantt)
+[![npm](https://img.shields.io/npm/dm/@worktile/gantt)](https://www.npmjs.com/package/@worktile/gantt)
+![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@worktile/gantt)
+[![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors-)
 
-## Code scaffolding
+[coveralls-image]: https://coveralls.io/repos/github/worktile/ngx-gantt/badge.svg?branch=master
+[coveralls-url]: https://coveralls.io/github/worktile/ngx-gantt
 
-Run `ng generate component component-name --project gantt` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project gantt`.
-> Note: Don't forget to add `--project gantt` or else it will be added to the default project in your `angular.json` file. 
+A modern and powerful gantt component for Angular
 
-## Build
+## Installation
 
-Run `ng build gantt` to build the project. The build artifacts will be stored in the `dist/` directory.
+```bash
+$ npm i @worktile/gantt --save
+# or
+$ yarn add @worktile/gantt
+```
 
-## Publishing
+## Demo
 
-After building your library with `ng build gantt`, go to the dist folder `cd dist/gantt` and run `npm publish`.
+[Try out our live demo](http://gantt.ngnice.com/)
 
-## Running unit tests
+## Usage
 
-Run `ng test gantt` to execute the unit tests via [Karma](https://karma-runner.github.io).
+### 1. Import the NgxGanttModule to use into your app.module.ts
 
-## Further help
+```ts
+import { NgModule } from '@angular/core';
+import { NgxGanttModule } from '@worktile/gantt';
 
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+@NgModule({
+  ...
+  imports: [ NgxGanttModule, ... ]
+  ...
+})
+export class AppModule {
+
+}
+```
+
+### 2. Import style file in angular.json or import style in your style.scss
+
+```json
+{
+  "styles": ["node_modules/@worktile/gantt/main.bundle.scss"]
+}
+```
+
+```scss
+@import '~@worktile/gantt/main.bundle.scss';
+```
+
+### 3. Using component
+
+component.html
+
+```html
+<ngx-gantt #gantt [items]="items">
+  <ngx-gantt-table>
+    <ngx-gantt-column name="Title" width="300px">
+      <ng-template #cell let-item="item"> {{ item.title }} </ng-template>
+    </ngx-gantt-column>
+  </ngx-gantt-table>
+</ngx-gantt>
+```
+
+component.ts
+
+```javascript
+@Component({
+  selector: 'app-gantt-example',
+  templateUrl: './gantt.component.html'
+})
+export class AppGanttExampleComponent {
+  items: GanttItem[] = [
+    { id: '000000', title: 'Task 0', start: 1627729997, end: 1628421197 },
+    { id: '000001', title: 'Task 1', start: 1617361997, end: 1625483597 }
+  ];
+
+  constructor() {}
+}
+```
+
+See [Getting Started](http://gantt.ngnice.com/guides/getting-started) for more details.
+
+## Development
+
+```bash
+$ git clone git@github.com:worktile/ngx-gantt.git
+$ cd ngx-gantt
+$ npm install
+$ npm run start
+```
+
+## Roadmap
+
+- [ ] virtual scrolling
+
+## Contributors ✨
+
+Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
+
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+  <tr>
+    <td align="center"><a href="https://github.com/walkerkay"><img src="https://avatars.githubusercontent.com/u/15701592?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Walker</b></sub></a><br /><a href="#question-walkerkay" title="Answering Questions">💬</a> <a href="https://github.com/walkerkay/ngx-gantt/commits?author=walkerkay" title="Code">💻</a> <a href="#design-walkerkay" title="Design">🎨</a> <a href="https://github.com/walkerkay/ngx-gantt/commits?author=walkerkay" title="Documentation">📖</a> <a href="#infra-walkerkay" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#maintenance-walkerkay" title="Maintenance">🚧</a> <a href="#projectManagement-walkerkay" title="Project Management">📆</a> <a href="https://github.com/walkerkay/ngx-gantt/pulls?q=is%3Apr+reviewed-by%3Awalkerkay" title="Reviewed Pull Requests">👀</a></td>
+    <td align="center"><a href="https://github.com/HandsomeButterball"><img src="https://avatars.githubusercontent.com/u/17664721?v=4?s=100" width="100px;" alt=""/><br /><sub><b>zhangwen</b></sub></a><br /><a href="https://github.com/walkerkay/ngx-gantt/commits?author=HandsomeButterball" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/mengshuicmq"><img src="https://avatars.githubusercontent.com/u/13193164?v=4?s=100" width="100px;" alt=""/><br /><sub><b>cmq</b></sub></a><br /><a href="https://github.com/walkerkay/ngx-gantt/commits?author=mengshuicmq" title="Code">💻</a></td>
+  </tr>
+</table>
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+
+## LICENSE
+
+[MIT License](https://github.com/worktile/ngx-gantt/blob/master/LICENSE)

package/angular.json

@@ -0,0 +1,136 @@
+{
+  "$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

@@ -0,0 +1,54 @@
+---
+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

@@ -0,0 +1,70 @@
+---
+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

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

package/docs/guides/basic/style.md

@@ -0,0 +1,68 @@
+---
+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

@@ -0,0 +1,70 @@
+---
+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`       |