@worktile/gantt 11.0.2 → 12.0.1

package/example/src/app/configuration/parameters/api/zh-cn.js

@@ -0,0 +1,350 @@
+module.exports = [
+    {
+        type: 'component',
+        name: 'ngx-gantt',
+        description: '',
+        properties: [
+            {
+                name: 'items',
+                description: `设置数据项，如果单独设置items则会以列表形式展示，如果需要分组展示，则需要设置属性groupId对应分组数据`,
+                type: 'GanttItem[]'
+            },
+            {
+                name: 'groups',
+                description: `设置分组数据`,
+                type: 'GanttGroup[]'
+            },
+            {
+                name: 'viewType',
+                description: `设置视图类型`,
+                type: `day | month | quarter`,
+                default: 'month'
+            },
+            {
+                name: 'start',
+                description: `设置甘特图开始时间，格式为10位时间戳`,
+                type: 'number'
+            },
+            {
+                name: 'end',
+                description: `设置甘特图结束时间，格式为10位时间戳`,
+                type: 'number'
+            },
+            {
+                name: 'draggable',
+                description: `设置是否可拖拽`,
+                type: 'boolean',
+                default: 'false'
+            },
+
+            {
+                name: 'linkable',
+                description: `设置是否可连接关联关系`,
+                type: 'boolean',
+                default: 'false'
+            },
+
+            {
+                name: 'maxLevel',
+                description: `设置最大展示层级`,
+                type: 'number',
+                default: 2
+            },
+
+            {
+                name: 'async',
+                description: `设置是否开始异步`,
+                type: 'boolean',
+                default: 'false'
+            },
+            {
+                name: 'childrenResolve',
+                description: `设置异步数据源返回函数，返回值为 Observable 数据流`,
+                type: 'Function'
+            },
+
+            {
+                name: 'styles',
+                description: `配置内置的样式选项`,
+                type: 'GanttStyles'
+            },
+            {
+                name: 'viewOptions',
+                description: `配置视图选项`,
+                type: 'GanttViewOptions'
+            },
+            {
+                name: 'disabledLoadOnScroll',
+                description: `设置是否禁用滚动加载`,
+                type: 'boolean',
+                default: false
+            },
+            {
+                name: 'loadOnScroll',
+                description: `滚动加载事件`,
+                type: 'EventEmitter<GanttLoadOnScrollEvent>'
+            },
+            {
+                name: 'dragStarted',
+                description: `拖拽开始后事件`,
+                type: 'EventEmitter<GanttDragEvent>'
+            },
+            {
+                name: 'dragEnded',
+                description: `拖拽结束后事件`,
+                type: 'EventEmitter<GanttDragEvent>'
+            },
+            {
+                name: 'linkDragStarted',
+                description: `关联关系拖拽开始后事件`,
+                type: 'EventEmitter<GanttLinkDragEvent>'
+            },
+            {
+                name: 'linkDragEnded',
+                description: `关联关系拖拽结束后事件`,
+                type: 'EventEmitter<GanttLinkDragEvent>'
+            },
+            {
+                name: 'barClick',
+                description: `右侧时间条点击事件`,
+                type: 'EventEmitter<GanttBarClickEvent>'
+            },
+            {
+                name: 'lineClick',
+                description: `关联关系线点击时间`,
+                type: 'EventEmitter<GanttLinkDragEvent>'
+            },
+            {
+                name: '#group',
+                description: `设置分组显示模板`,
+                type: 'TemplateRef<any>'
+            },
+            {
+                name: '#bar',
+                description: `设置时间条显示模板`,
+                type: 'TemplateRef<any>'
+            },
+            {
+                name: '#groupHeader',
+                description: `设置分组头部显示模板`,
+                type: 'TemplateRef<any>'
+            },
+            {
+                name: '#tableEmpty',
+                description: `设置空表格模板`,
+                type: 'TemplateRef<any>'
+            }
+        ]
+    },
+    {
+        type: 'component',
+        name: 'ngx-gantt-table',
+        description: '甘特图左侧表格',
+        properties: [
+            {
+                name: 'columnChanges',
+                description: `列宽变化事件集`,
+                type: 'EventEmitter<GanttTableEvent>'
+            }
+        ]
+    },
+    {
+        type: 'component',
+        name: 'ngx-gantt-column',
+        description: '甘特图左侧列',
+        properties: [
+            {
+                name: 'name',
+                description: `设置列名称`,
+                type: 'string'
+            },
+            {
+                name: 'width',
+                description: `设置列宽`,
+                type: 'string ｜ number'
+            },
+            {
+                name: '#header',
+                description: `设置每列头部模板`,
+                type: 'TemplateRef<any>'
+            },
+            {
+                name: '#cell',
+                description: `设置每列内容模板`,
+                type: 'TemplateRef<any>'
+            }
+        ]
+    },
+    {
+        type: 'component',
+        name: 'ngx-gantt-bar',
+        description: '数据项条形图展示组件',
+        properties: [
+            {
+                name: 'template',
+                description: `设置时间条显示模板`,
+                type: 'TemplateRef<any>'
+            },
+            {
+                name: 'item',
+                description: `设置时间条显示数据`,
+                type: 'GanttItemInternal'
+            },
+            {
+                name: 'barClick',
+                description: `数据项条形图点击事件`,
+                type: 'EventEmitter<GanttBarClickEvent>'
+            }
+        ]
+    },
+    {
+        type: 'component',
+        name: 'ngx-gantt-range',
+        description: '数据项区间展示组件',
+        properties: [
+            {
+                name: 'template',
+                description: `设置区间展示模板`,
+                type: 'TemplateRef<any>'
+            },
+            {
+                name: 'item',
+                description: `设置区间展示数据`,
+                type: 'GanttItemInternal'
+            }
+        ]
+    },
+    {
+        type: 'component',
+        name: 'ngx-gantt-root',
+        description: '甘特图根组件',
+        properties: [
+            {
+                name: 'sideWidth',
+                description: `设置甘特图左侧内容宽度`,
+                type: 'number'
+            },
+            {
+                name: 'sideTemplate',
+                description: `设置甘特图左侧内容模板`,
+                type: 'TemplateRef<any>'
+            },
+            {
+                name: 'mainTemplate',
+                description: `设置甘特图右侧主要内容模板`,
+                type: 'TemplateRef<any>'
+            }
+        ]
+    }
+    // {
+    //     type: 'class',
+    //     name: 'GanttItem',
+    //     description: '数据项格式定义',
+    //     properties: [
+    //         {
+    //             name: 'id',
+    //             description: `唯一标识`,
+    //             type: 'string'
+    //         },
+    //         {
+    //             name: 'title',
+    //             description: `名称`,
+    //             type: 'string'
+    //         },
+    //         {
+    //             name: 'start',
+    //             description: `开始时间`,
+    //             type: 'number'
+    //         },
+    //         {
+    //             name: 'end',
+    //             description: `截止时间`,
+    //             type: 'number'
+    //         },
+    //         {
+    //             name: 'group_id',
+    //             description: `对应分组的Id`,
+    //             type: 'string'
+    //         },
+    //         {
+    //             name: 'links',
+    //             description: `关联数据项Ids`,
+    //             type: 'string[]'
+    //         },
+    //         {
+    //             name: 'color',
+    //             description: `设置颜色`,
+    //             type: 'string'
+    //         },
+    //         {
+    //             name: 'draggable',
+    //             description: `设置是否可拖拽`,
+    //             type: 'boolean'
+    //         },
+    //         {
+    //             name: 'linkable',
+    //             description: `设置是否可关联/被关联`,
+    //             type: 'boolean'
+    //         },
+    //         {
+    //             name: 'expand',
+    //             description: `设置是否展开`,
+    //             type: 'boolean',
+    //             default: 'false'
+    //         },
+    //         {
+    //             name: 'children',
+    //             description: `设置子数据`,
+    //             type: 'GanttItem[]',
+    //             default: ''
+    //         },
+    //         {
+    //             name: 'origin',
+    //             description: `设置原始数据`,
+    //             type: 'T',
+    //             default: ''
+    //         },
+    //         {
+    //             name: 'type',
+    //             description: `数据展示方式（区间展示和普通展示）`,
+    //             type: 'GanttItemType',
+    //             default: ''
+    //         },
+    //         {
+    //             name: 'progress',
+    //             description: `进度`,
+    //             type: 'number',
+    //             default: ''
+    //         }
+    //     ]
+    // },
+    // {
+    //     type: 'class',
+    //     name: 'GanttGroup',
+    //     description: '分组数据格式定义',
+    //     properties: [
+    //         {
+    //             name: 'id',
+    //             description: `唯一标识`,
+    //             type: 'string'
+    //         },
+    //         {
+    //             name: 'title',
+    //             description: `名称`,
+    //             type: 'string'
+    //         },
+    //         {
+    //             name: 'expand',
+    //             description: `设置是否展开`,
+    //             type: 'boolean',
+    //             default: 'true'
+    //         },
+    //         {
+    //             name: 'origin',
+    //             description: `设置原始数据`,
+    //             type: 'T',
+    //             default: ''
+    //         }
+    //     ]
+    // }
+];

package/example/src/app/configuration/parameters/doc/zh-cn.md

@@ -0,0 +1,5 @@
+---
+category: config
+title: 参数
+subtitle: Parameters
+---

package/example/src/app/gantt/gantt.component.html

@@ -0,0 +1,51 @@
+<thy-layout>
+  <thy-header>
+    <ng-template #headerContent>
+      <thy-button-group thySize="sm" thyType="outline-default">
+        <button thyButton *ngFor="let view of views" [class.active]="view.value === viewType" (click)="viewType = view.value">
+          {{ view.name }}
+        </button>
+      </thy-button-group>
+      &nbsp; &nbsp; &nbsp;
+      <thy-button thyType="primary" thySize="sm" (click)="print('gantt-example')"> ↓ 导出为图片 </thy-button>
+    </ng-template>
+    <ng-template #headerOperation>
+      <a href="https://github.com/worktile/ngx-gantt/blob/master/example/src/app/gantt" target="_blank">查看源码</a>
+    </ng-template>
+  </thy-header>
+  <thy-content>
+    <ngx-gantt
+      #gantt
+      [items]="items"
+      [viewType]="viewType"
+      [async]="true"
+      [childrenResolve]="childrenResolve"
+      [draggable]="true"
+      [linkable]="true"
+      (barClick)="barClick($event)"
+      (lineClick)="lineClick($event)"
+      (dragEnded)="dragEnded($event)"
+      (linkDragEnded)="linkDragEnded($event)"
+    >
+      <ngx-gantt-table>
+        <ngx-gantt-column name="标题" width="180px">
+          <ng-template #cell let-item="item"> {{ item.title }} </ng-template>
+        </ngx-gantt-column>
+        <ngx-gantt-column name="开始时间" width="140px">
+          <ng-template #cell let-item="item">
+            {{ item.start * 1000 | date: 'yyyy-MM-dd' }}
+          </ng-template>
+        </ngx-gantt-column>
+        <ngx-gantt-column name="截止时间" width="140px">
+          <ng-template #cell let-item="item">
+            {{ item.end * 1000 | date: 'yyyy-MM-dd' }}
+          </ng-template>
+        </ngx-gantt-column>
+      </ngx-gantt-table>
+
+      <ng-template #bar let-item="item">
+        <span style="color: #fff">&nbsp;&nbsp;{{ item.title }} </span>
+      </ng-template>
+    </ngx-gantt>
+  </thy-content>
+</thy-layout>

package/example/src/app/gantt/gantt.component.ts

@@ -0,0 +1,119 @@
+import { GanttPrintService } from './../../../../packages/gantt/src/gantt-print.service';
+import { Component, OnInit, HostBinding } from '@angular/core';
+import {
+    GanttBarClickEvent,
+    GanttViewType,
+    GanttDragEvent,
+    GanttLoadOnScrollEvent,
+    GanttLineClickEvent,
+    GanttLinkDragEvent,
+    GanttItem,
+    GanttViewOptions,
+    GanttDate
+} from 'ngx-gantt';
+import { of } from 'rxjs';
+import { delay } from 'rxjs/operators';
+import { ThyNotifyService } from 'ngx-tethys/notify';
+import { randomItems, random } from '../helper';
+
+@Component({
+    selector: 'app-gantt-example',
+    templateUrl: './gantt.component.html',
+    providers: [GanttPrintService]
+})
+export class AppGanttExampleComponent implements OnInit {
+    views = [
+        {
+            name: '日',
+            value: GanttViewType.day
+        },
+        {
+            name: '周',
+            value: GanttViewType.week
+        },
+        {
+            name: '月',
+            value: GanttViewType.month
+        },
+        {
+            name: '季',
+            value: GanttViewType.quarter
+        },
+        {
+            name: '年',
+            value: GanttViewType.year
+        }
+    ];
+
+    viewType: GanttViewType = GanttViewType.month;
+
+    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 },
+        { id: '000004', title: 'Task 4', start: 1624705997, expandable: true },
+        { id: '000005', title: 'Task 5', start: 1628075597, end: 1629544397, color: '#709dc1' },
+        { id: '000006', title: 'Task 6', start: 1641121997, end: 1645528397 },
+        { id: '000007', title: 'Task 7', start: 1639393997, end: 1640862797 },
+        { id: '000008', title: 'Task 8', end: 1628783999, color:'#709dc1' },
+        { id: '000009', title: 'Task 9', start: 1639307597, end: 1640344397 },
+        { id: '0000010', title: 'Task 10', start: 1609067597, end: 1617275597 },
+        { id: '0000011', title: 'Task 11', start: 1611918797, end: 1611918797 },
+        { id: '0000012', title: 'Task 12', start: 1627816397, end: 1631358797 },
+        { id: '0000013', title: 'Task 13', start: 1625051597, end: 1630667597, links: ['0000012'] },
+        { id: '0000014', title: 'Task 14', start: 1627920000, end: 1629129599 },
+        { id: '0000015', title: 'Task 15', start: 1633259597, end: 1639480397 },
+        { id: '0000016', title: 'Task 16', start: 1624965197, end: 1627211597 },
+        { id: '0000017', title: 'Task 17', start: 1641035597, end: 1649157197 },
+        { id: '0000018', title: 'Task 18', start: 1637061197, end: 1642677197 },
+        { id: '0000019', title: 'Task 19', start: 1637925197, end: 1646305997 },
+        { id: '0000020', title: 'Task 20', start: 1628334797, end: 1629889997 },
+        { id: '0000021', title: 'Task 21', start: 1622891597, end: 1627643597 },
+        { id: '0000022', title: 'Task 22', start: 1616238797, end: 1620731597 },
+        { id: '0000023', title: 'Task 23', start: 1626693197, end: 1630149197 },
+        { id: '0000024', title: 'Task 24', start: 1626174797, end: 1626952397 },
+        { id: '0000025', title: 'Task 25', start: 1631013197, end: 1637493197 },
+        { id: '0000026', title: 'Task 26', start: 1635937997, end: 1643886797 },
+        { id: '0000027', title: 'Task 27', start: 1637665997, end: 1644059597 },
+        { id: '0000028', title: 'Task 28', start: 1611400397, end: 1615547597 },
+        { id: '0000029', title: 'Task 29', start: 1618053197, end: 1619176397 }
+    ];
+
+    options = {
+        viewType: GanttViewType.day
+    };
+
+    @HostBinding('class.gantt-example-component') class = true;
+
+    childrenResolve = (item: GanttItem) => {
+        const children = randomItems(random(1, 5), item);
+        return of(children).pipe(delay(1000));
+    };
+
+    constructor(private printService: GanttPrintService, private thyNotify: ThyNotifyService) {}
+
+    ngOnInit(): void {}
+
+    barClick(event: GanttBarClickEvent) {
+        this.thyNotify.info('Event: barClick', `你点击了 [${event.item.title}]`);
+    }
+
+    lineClick(event: GanttLineClickEvent) {
+        this.thyNotify.info('Event: lineClick', `你点击了 ${event.source.title} 到 ${event.target.title} 的关联线`);
+    }
+
+    dragEnded(event: GanttDragEvent) {
+        this.thyNotify.info('Event: dragEnded', `修改了 [${event.item.title}] 的时间`);
+        this.items = [...this.items];
+    }
+
+    linkDragEnded(event: GanttLinkDragEvent) {
+        this.items = [...this.items];
+        this.thyNotify.info('Event: linkDragEnded', `创建了关联关系`);
+    }
+
+    print(name: string) {
+        this.printService.print(name);
+    }
+}

package/example/src/app/gantt-advanced/component/flat.component.html

@@ -0,0 +1,30 @@
+<ngx-gantt-root [sideWidth]="300">
+  <ng-template #sideTemplate>
+    <div class="gantt-flat-side-header">项目</div>
+    <div class="gantt-flat-side-body">
+      <div class="gantt-group" *ngFor="let group of groups; trackBy: trackBy">
+        <div class="gantt-group-content" [style.height.px]="group.mergedItems?.length * (styles.lineHeight + 10) - 10">
+          {{ group.title }}
+        </div>
+      </div>
+    </div>
+  </ng-template>
+  <ng-template #mainTemplate>
+    <div class="gantt-main-container">
+      <!-- groups -->
+      <div class="gantt-main-groups" *ngIf="groups && groups.length > 0" [style.width.px]="view.width">
+        <ng-container *ngFor="let group of groups; trackBy: trackBy">
+          <div class="gantt-main-group" [style.height.px]="group.mergedItems?.length * (styles.lineHeight + 10) - 10">
+            <ng-container *ngFor="let items of group.mergedItems">
+              <div class="gantt-flat-items" [style.height.px]="styles.lineHeight">
+                <ng-container *ngFor="let item of items; trackBy: trackBy">
+                  <ngx-gantt-bar [item]="item" [template]="barTemplate" (barClick)="barClick.emit($event)"></ngx-gantt-bar>
+                </ng-container>
+              </div>
+            </ng-container>
+          </div>
+        </ng-container>
+      </div>
+    </div>
+  </ng-template>
+</ngx-gantt-root>

package/example/src/app/gantt-advanced/component/flat.component.ts

@@ -0,0 +1,72 @@
+import { Component, OnInit, HostBinding, OnChanges, OnDestroy, SimpleChanges, NgZone, ChangeDetectorRef, ElementRef } from '@angular/core';
+import { GANTT_UPPER_TOKEN, GanttUpper, GanttItemInternal, GanttGroupInternal } from 'ngx-gantt';
+import { startWith, takeUntil } from 'rxjs/operators';
+
+@Component({
+    selector: 'app-gantt-flat',
+    templateUrl: './flat.component.html',
+    styleUrls: ['./flat.scss'],
+    providers: [
+        {
+            provide: GANTT_UPPER_TOKEN,
+            useExisting: AppGanttFlatComponent
+        }
+    ]
+})
+export class AppGanttFlatComponent extends GanttUpper implements OnInit, OnChanges, OnDestroy {
+    mergeIntervalDays = 3;
+
+    groups: GanttGroupInternal[] = [];
+
+    @HostBinding('class.gantt-flat') ganttFlatClass = true;
+
+    constructor(elementRef: ElementRef<HTMLElement>, cdr: ChangeDetectorRef, ngZone: NgZone) {
+        super(elementRef, cdr, ngZone);
+    }
+
+    private buildGroupMergedItems(items: GanttItemInternal[]) {
+        const mergedItems: GanttItemInternal[][] = [];
+        items = items.filter((item) => item.start && item.end).sort((a, b) => a.start.getUnixTime() - b.start.getUnixTime());
+        items.forEach((item) => {
+            let indexOfMergedItems = -1;
+            for (let i = 0; i < mergedItems.length; i++) {
+                const subItems = mergedItems[i];
+                if (item.start.value > subItems[subItems.length - 1].end.addDays(this.mergeIntervalDays).value) {
+                    subItems.push(item);
+                    indexOfMergedItems = i;
+                    break;
+                }
+            }
+            // 如果没有合适的位置插入，则插入到最后一行
+            if (indexOfMergedItems === -1) {
+                mergedItems.push([item]);
+                indexOfMergedItems = mergedItems.length - 1;
+            }
+        });
+        return mergedItems;
+    }
+
+    ngOnInit() {
+        super.onInit();
+        this.dragEnded.pipe(startWith(null), takeUntil(this.unsubscribe$)).subscribe(() => {
+            this.buildGroupItems();
+        });
+    }
+
+    private buildGroupItems() {
+        console.log(this.groups);
+        this.groups.forEach((group) => {
+            group.mergedItems = this.buildGroupMergedItems(group.items);
+            // 如果没有数据，默认填充两行空行
+            group.mergedItems = group.mergedItems.length === 0 ? [[]] : group.mergedItems;
+        });
+    }
+
+    ngOnChanges(changes: SimpleChanges) {
+        super.onChanges(changes);
+    }
+
+    ngOnDestroy() {
+        super.onDestroy();
+    }
+}

package/example/src/app/gantt-advanced/component/flat.scss

@@ -0,0 +1,31 @@
+:host {
+    .gantt-flat-side-header {
+        text-align: center;
+        position: sticky;
+        top: 0;
+        background: #fff;
+        height: 44px;
+        line-height: 44px;
+        z-index: 1;
+        border-bottom: 1px solid #eee;
+        box-sizing: border-box;
+    }
+
+    .gantt-group {
+        .gantt-group-content {
+            border-bottom: 1px solid #eee;
+            display: flex;
+            align-items: center;
+            padding: 15px;
+        }
+    }
+
+    .gantt-main-group {
+        border-bottom: 1px solid #eee;
+        padding: 15px 0;
+
+        .gantt-flat-items {
+            position: relative;
+        }
+    }
+}