@worktile/gantt 12.0.1 → 12.0.2

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

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

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

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

@@ -1,31 +0,0 @@
-: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;
-        }
-    }
-}

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

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

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

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

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

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

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