@worktile/gantt 12.0.0 → 12.0.1

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

@@ -0,0 +1,32 @@
+<div style="line-height: 30px; padding: 15px; display: flex;">
+  <div style="flex: 1;">
+    <span class="text-primary">NgxGantt</span> 导出了 <span class="text-primary">ngx-gantt-root</span>、<span class="text-primary"
+      >ngx-gantt-bar</span
+    >
+    等基础组件，结合这些基础组件使用者可以结合自己的业务场景来封装自己的 Gantt 组件。
+    <br />
+    下面示例实现了任务分组的展示，并且将每个分组下任务按时间维度打平展示。
+  </div>
+  <div style="padding-right: 15px;">
+    <a href="https://github.com/worktile/ngx-gantt/blob/master/example/src/app/gantt-advanced" target="_blank">查看源码</a>
+  </div>
+</div>
+<thy-layout>
+  <thy-content>
+    <app-gantt-flat
+      #gantt
+      [items]="items"
+      [groups]="groups"
+      [viewType]="options.viewType"
+      [draggable]="options.draggable"
+      [styles]="options.styles"
+    >
+      <ng-template #group let-group="group">
+        {{ group.title }}
+      </ng-template>
+      <ng-template #bar let-item="item">
+        <span style="color: #fff">&nbsp;&nbsp;{{ item.title }}</span>
+      </ng-template>
+    </app-gantt-flat>
+  </thy-content>
+</thy-layout>

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

@@ -0,0 +1,34 @@
+import { Component, OnInit, HostBinding } from '@angular/core';
+import { GanttViewType, GanttGroup, GanttItem } from 'ngx-gantt';
+import { randomGroupsAndItems } from '../helper';
+
+@Component({
+    selector: 'app-gantt-advanced-example',
+    templateUrl: './gantt-advanced.component.html'
+})
+export class AppGanttAdvancedExampleComponent implements OnInit {
+    constructor() {}
+
+    items: GanttItem[] = [];
+
+    groups: GanttGroup[] = [];
+
+    options = {
+        viewType: GanttViewType.month,
+        draggable: true,
+        mergeIntervalDays: 3,
+        styles: {
+            lineHeight: 50
+        }
+    };
+
+    @HostBinding('class.gantt-example-component') class = true;
+
+    ngOnInit(): void {
+        const { groups, items } = randomGroupsAndItems(10);
+        this.groups = groups;
+        this.items = items;
+
+        console.log(this.groups, this.items);
+    }
+}

package/example/src/app/gantt-advanced/mocks.ts

@@ -0,0 +1,158 @@
+export const mockGroups = [
+    {
+        id: '00001',
+        title: 'Project 1',
+        class: 'test'
+    },
+    {
+        id: '00002',
+        title: 'Project 2'
+    },
+    {
+        id: '00003',
+        title: 'Project 3'
+    },
+    {
+        id: '00004',
+        title: 'Project 4'
+    },
+    {
+        id: '00005',
+        title: 'Project 5'
+    }
+];
+
+export const mockItems = [
+    {
+        id: 'item-0101',
+        title: 'VERSION 0101',
+        start: 1601318400,
+        group_id: '00001',
+        color: '#FF0000',
+    },
+    {
+        id: 'item-0102',
+        title: 'VERSION 0102',
+        start: 1590935675,
+        end: 1591318400,
+        color: '#9ACD32',
+        group_id: '00001',
+        expandable: true
+    },
+    {
+        id: 'item-0103',
+        title: 'VERSION 0103',
+        end: 1590035000,
+        group_id: '00001'
+    },
+    {
+        id: 'item-0104',
+        title: 'VERSION 0104',
+        group_id: '00001',
+        links: ['item-0301']
+    },
+    {
+        id: 'item-0201',
+        title: 'VERSION 0201',
+        group_id: '00002'
+    },
+    {
+        id: 'item-0202',
+        title: 'VERSION 0202',
+        start: 1581035675,
+        end: 1590230000,
+        group_id: '00002',
+        links: ['item-0203'],
+        color: 'rgb(52, 143, 228, 0.5)',
+        barStyle: {
+            border: '1px solid rgb(52, 143, 228)'
+        }
+    },
+    {
+        id: 'item-0203',
+        title: 'VERSION 0203',
+        start: 1593548400,
+        end: 1602428400,
+        group_id: '00002',
+        links: ['item-0204']
+    },
+    {
+        id: 'item-0204',
+        title: 'VERSION 0204',
+        start: 1591035675,
+        end: 1592418400,
+        group_id: '00002',
+        links: ['item-0301', 'item-0402']
+    },
+
+    {
+        id: 'item-0301',
+        title: 'VERSION 0301',
+        start: 1596035675,
+        end: 1599018400,
+        group_id: '00003'
+    },
+    {
+        id: 'item-0302',
+        title: 'VERSION 0302',
+        start: 1592035675,
+        end: 1598018400,
+        group_id: '00003'
+    },
+    {
+        id: 'item-0303',
+        title: 'VERSION 0303',
+        start: 1590135675,
+        end: 1594018400,
+        group_id: '00003'
+    },
+    {
+        id: 'item-0401',
+        title: 'VERSION 0401',
+        start: 1589035675,
+        end: 1594018400,
+        group_id: '00004'
+    },
+    {
+        id: 'item-0402',
+        title: 'VERSION 0402',
+        start: 1596035675,
+        end: 1599918400,
+        group_id: '00004'
+    },
+    {
+        id: 'item-0403',
+        title: 'VERSION 0403',
+        start: 1593035675,
+        end: 1599018400,
+        group_id: '00004'
+    },
+    {
+        id: 'item-0404',
+        title: 'VERSION 0404',
+        start: 1591035675,
+        end: 1592918400,
+        group_id: '00004'
+    },
+    {
+        id: 'item-0501',
+        title: 'VERSION 0501',
+        start: 1599935675,
+        end: 1602018400,
+        group_id: '00005'
+    },
+    {
+        id: 'item-0502',
+        title: 'VERSION 0502',
+        start: 1591035675,
+        end: 1594018400,
+        group_id: '00005'
+    },
+    {
+        id: 'item-0503',
+        title: 'VERSION 0503',
+        start: 1595035675,
+        end: 1599018400,
+        group_id: '00005'
+    }
+];

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

@@ -0,0 +1,42 @@
+<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)="expandAllGroups()">
+        {{ expanded ? '折叠全部分组' : '展开全部分组' }}
+      </thy-button>
+    </ng-template>
+    <ng-template #headerOperation>
+      <a href="https://github.com/worktile/ngx-gantt/blob/master/example/src/app/gantt-groups" target="_blank">查看源码</a>
+    </ng-template>
+  </thy-header>
+  <thy-content>
+    <ngx-gantt #gantt [groups]="groups" [items]="items" [viewType]="viewType" [draggable]="true">
+      <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>
+      <!-- group template -->
+      <ng-template #group let-group="group" let-items="items">
+        <span class="text-primary">{{ group.title }} 🚀 </span>
+      </ng-template>
+    </ngx-gantt>
+  </thy-content>
+</thy-layout>

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

@@ -0,0 +1,62 @@
+import { Component, OnInit, HostBinding, ViewChild } from '@angular/core';
+import { GanttViewType, GanttItem, GanttGroup, NgxGanttComponent } from 'ngx-gantt';
+import { randomGroupsAndItems } from '../helper';
+
+@Component({
+    selector: 'app-gantt-groups-example',
+    templateUrl: './gantt-groups.component.html'
+})
+export class AppGanttGroupsExampleComponent 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.quarter;
+
+    items: GanttItem[] = [];
+
+    groups: GanttGroup[] = [];
+
+    expanded = true;
+
+    @ViewChild('gantt') ganttComponent: NgxGanttComponent;
+
+    @HostBinding('class.gantt-example-component') class = true;
+
+    constructor() {}
+
+    ngOnInit(): void {
+        const { groups, items } = randomGroupsAndItems(10);
+        this.groups = groups;
+        this.items = items;
+    }
+
+    expandAllGroups() {
+        if (this.expanded) {
+            this.expanded = false;
+            this.ganttComponent.collapseAll();
+        } else {
+            this.expanded = true;
+            this.ganttComponent.expandAll();
+        }
+    }
+}

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

@@ -0,0 +1,66 @@
+<div class="gantt-demo-header">
+  <div class="header-section">
+    <span class="header-section-title">视图：</span>
+    <span class="header-section-content">
+      <input id="day" type="radio" value="day" name="view-type" [(ngModel)]="options.viewType" /> <label for="day">日</label>
+      <input id="month" type="radio" value="month" name="view-type" [(ngModel)]="options.viewType" /> <label for="month">月</label>
+      <input id="quarter" type="radio" value="quarter" name="view-type" [(ngModel)]="options.viewType" /> <label for="quarter">季度</label>
+    </span>
+  </div>
+  <div class="header-section">
+    <span class="header-section-title">是否可拖拽：</span>
+    <span class="header-section-content">
+      <input type="checkbox" [(ngModel)]="options.draggable" />
+    </span>
+  </div>
+
+  <div class="header-section">
+    <span class="header-section-content">
+      <button (click)="gantt.expandAll()">全部展开</button>
+    </span>
+  </div>
+  <div class="header-section">
+    <span class="header-section-content">
+      <button (click)="gantt.collapseAll()">全部收起</button>
+    </span>
+  </div>
+  <div class="header-section">
+    <span class="header-section-content">
+      <button (click)="print('gantt-range')">导出为图片</button>
+    </span>
+  </div>
+</div>
+<div class="gantt-demo-content">
+  <ngx-gantt
+    #gantt
+    start="1514736000"
+    end="1609430400"
+    [items]="items"
+    [viewType]="options.viewType"
+    [draggable]="options.draggable"
+    [async]="options.async"
+    [childrenResolve]="options.childrenResolve"
+    (barClick)="barClick($event)"
+    (dragEnded)="dragEnded($event)"
+    (loadOnScroll)="loadOnScroll($event)"
+  >
+    <ngx-gantt-table>
+      <ngx-gantt-column name="标题">
+        <ng-template #cell let-item="item">
+          {{ item.title }}
+        </ng-template>
+      </ngx-gantt-column>
+      <ngx-gantt-column>
+        <ng-template #header> <span style="font-weight: bold;">开始时间</span> </ng-template>
+        <ng-template #cell let-item="item">
+          {{ item.start * 1000 | date: 'yyyy-MM-dd' }}
+        </ng-template>
+      </ngx-gantt-column>
+      <ngx-gantt-column name="截止时间">
+        <ng-template #cell let-item="item">
+          {{ item.end * 1000 | date: 'yyyy-MM-dd' }}
+        </ng-template>
+      </ngx-gantt-column>
+    </ngx-gantt-table>
+  </ngx-gantt>
+</div>

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

@@ -0,0 +1,67 @@
+import { Component, OnInit, HostBinding } from '@angular/core';
+import { mockItems } from './mocks';
+import {
+    GanttBarClickEvent,
+    GanttViewType,
+    GanttDragEvent,
+    GanttLoadOnScrollEvent,
+    GanttLineClickEvent,
+    GanttLinkDragEvent,
+    GanttItem,
+    GanttViewOptions,
+    GanttDate,
+    GanttPrintService
+} from 'ngx-gantt';
+import { of } from 'rxjs';
+import { delay } from 'rxjs/operators';
+@Component({
+    selector: 'app-gantt-range-example',
+    templateUrl: './gantt-range.component.html',
+    providers: [GanttPrintService]
+})
+export class AppGanttRangeExampleComponent implements OnInit {
+    items = mockItems;
+
+    options = {
+        viewType: GanttViewType.month,
+        draggable: true,
+        async: true,
+        childrenResolve: this.getChildren.bind(this)
+    };
+
+    viewOptions: GanttViewOptions = {
+        start: new GanttDate(new Date('2020-3-1')),
+        end: new GanttDate(new Date('2020-6-30'))
+    };
+
+    @HostBinding('class.gantt-demo') class = true;
+
+    constructor(private printService: GanttPrintService) {}
+
+    ngOnInit(): void {}
+
+    barClick(event: GanttBarClickEvent) {
+        console.log(event);
+    }
+
+    dragEnded(event: GanttDragEvent) {
+        this.items = [...this.items];
+    }
+
+    loadOnScroll(event: GanttLoadOnScrollEvent) {}
+
+    getChildren(item: GanttItem) {
+        return of([
+            {
+                id: new Date().getTime(),
+                title: new Date().getTime(),
+                start: Math.floor(new Date().getTime() / 1000),
+                draggable: true,
+                linkable: false
+            }
+        ]).pipe(delay(1000));
+    }
+    print(name: string) {
+        this.printService.print(name);
+    }
+}

package/example/src/app/gantt-range/mocks.ts

@@ -0,0 +1,150 @@
+export const mockItems = [
+    {
+        id: 'item-0101',
+        title: 'VERSION 0101',
+        start: 1590035675,
+        group_id: '00001',
+        color: '#FF0000',
+        type: 'range',
+        progress: 0.5,
+        children: [
+            {
+                id: 'item-child-0101',
+                title: 'VERSION Children 0101',
+                start: 1590035675,
+                group_id: '00001',
+                color: '#FF0000',
+                linkable: false,
+                progress: 0.5,
+                barStyle: { border: `1px solid #FF0000` }
+            }
+        ]
+    },
+    {
+        id: 'item-0102',
+        title: 'VERSION 0102',
+        start: 1590935675,
+        end: 1591318400,
+        color: '#9ACD32',
+        group_id: '00001',
+        expandable: true
+    },
+    {
+        id: 'item-0103',
+        title: 'VERSION 0103',
+        end: 1592018400,
+        group_id: '00001'
+    },
+    {
+        id: 'item-0104',
+        title: 'VERSION 0104',
+        group_id: '00001',
+        links: ['item-0301']
+    },
+    {
+        id: 'item-0201',
+        title: 'VERSION 0201',
+        group_id: '00002'
+    },
+    {
+        id: 'item-0202',
+        title: 'VERSION 0202',
+        start: 1591035675,
+        end: 1593018400,
+        group_id: '00002',
+        links: ['item-0203'],
+        color: 'rgb(52, 143, 228, 0.5)',
+        barStyle: {
+            border: '1px solid rgb(52, 143, 228)'
+        }
+    },
+    {
+        id: 'item-0203',
+        title: 'VERSION 0203',
+        start: 1590235675,
+        end: 1591718400,
+        group_id: '00002',
+        links: ['item-0204'],
+        progress: 0.6,
+        barStyle: { border: `1px solid rgb(52, 143, 228)` }
+    },
+    {
+        id: 'item-0204',
+        title: 'VERSION 0204',
+        start: 1591035675,
+        end: 1592418400,
+        group_id: '00002',
+        links: ['item-0301', 'item-0402']
+    },
+
+    {
+        id: 'item-0301',
+        title: 'VERSION 0301',
+        start: 1596035675,
+        end: 1599018400,
+        group_id: '00003'
+    },
+    {
+        id: 'item-0302',
+        title: 'VERSION 0302',
+        start: 1592035675,
+        end: 1598018400,
+        group_id: '00003'
+    },
+    {
+        id: 'item-0303',
+        title: 'VERSION 0303',
+        start: 1590135675,
+        end: 1594018400,
+        group_id: '00003'
+    },
+    {
+        id: 'item-0401',
+        title: 'VERSION 0401',
+        start: 1589035675,
+        end: 1594018400,
+        group_id: '00004'
+    },
+    {
+        id: 'item-0402',
+        title: 'VERSION 0402',
+        start: 1596035675,
+        end: 1599918400,
+        group_id: '00004'
+    },
+    {
+        id: 'item-0403',
+        title: 'VERSION 0403',
+        start: 1593035675,
+        end: 1599018400,
+        group_id: '00004'
+    },
+    {
+        id: 'item-0404',
+        title: 'VERSION 0404',
+        start: 1591035675,
+        end: 1592918400,
+        group_id: '00004'
+    },
+    {
+        id: 'item-0501',
+        title: 'VERSION 0501',
+        start: 1599935675,
+        end: 1602018400,
+        group_id: '00005'
+    },
+    {
+        id: 'item-0502',
+        title: 'VERSION 0502',
+        start: 1591035675,
+        end: 1594018400,
+        group_id: '00005'
+    },
+    {
+        id: 'item-0503',
+        title: 'VERSION 0503',
+        start: 1595035675,
+        end: 1599018400,
+        group_id: '00005'
+    }
+];

package/example/src/app/helper.ts

@@ -0,0 +1,38 @@
+import { addDays, getUnixTime } from 'date-fns';
+import { GanttGroup, GanttItem } from 'ngx-gantt';
+
+export function random(min: number, max: number) {
+    return Math.floor(Math.random() * (max - min)) + min;
+}
+
+export function randomItems(length: number, parent?: GanttItem, group?: string) {
+    const items = [];
+    for (let i = 0; i < length; i++) {
+        const start = addDays(new Date(), random(-200, 200));
+        const end = addDays(start, random(0, 100));
+        items.push({
+            id: `${parent?.id || group || ''}00000${i}`,
+            title: `${parent?.title || 'Task'}-${i}`,
+            start: getUnixTime(start),
+            end: getUnixTime(end),
+            group_id: group
+        });
+    }
+    return items;
+}
+
+export function randomGroupsAndItems(length: number) {
+    const groups: GanttGroup[] = [];
+    let items: GanttItem[] = [];
+    for (let i = 0; i < length; i++) {
+        groups.push({
+            id: `00000${i}`,
+            title: `Group-${i}`
+        });
+        items = [...items, ...randomItems(6, undefined, groups[i].id)];
+    }
+    return {
+        groups,
+        items
+    };
+}

package/example/src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};

package/example/src/environments/environment.ts

@@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

package/example/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+<title>NgxGantt - Gantt Component for Angular</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <example-root></example-root>
+</body>
+</html>