worktile · walkerkay · Jul 22, 2020 · Jul 22, 2020 · Jul 22, 2020
diff --git a/.docgenirc.js b/.docgenirc.js
@@ -27,6 +27,15 @@ module.exports = {
                 }
             }
         },
+        {
+            title: '区间展示',
+            path: 'range',
+            locales: {
+                'en-us': {
+                    title: 'Range'
+                }
+            }
+        },
         {
             title: '配置',
             path: 'configuration',

diff --git a/example/src/app/app-routing.module.ts b/example/src/app/app-routing.module.ts
@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { AppGanttExampleComponent } from './gantt/gantt.component';
 import { AppGanttFlatExampleComponent } from './gantt-flat/flat.component';
+import { AppGanttRangeExampleComponent } from './gantt-range/gantt-range.component';
 
 const routes: Routes = [
     {
@@ -12,6 +13,10 @@ const routes: Routes = [
         path: 'flat',
         component: AppGanttFlatExampleComponent,
     },
+    {
+        path: 'range',
+        component: AppGanttRangeExampleComponent
+    }
 ];
 
 @NgModule({

diff --git a/example/src/app/app.module.ts b/example/src/app/app.module.ts
@@ -11,9 +11,10 @@ import { AppRoutingModule } from './app-routing.module';
 import { CommonModule } from '@angular/common';
 import { AppGanttFlatExampleComponent } from './gantt-flat/flat.component';
 import { EXAMPLE_MODULES } from './content/example-modules';
+import { AppGanttRangeExampleComponent } from './gantt-range/gantt-range.component';
 
 @NgModule({
-    declarations: [AppComponent, AppGanttExampleComponent, AppGanttFlatExampleComponent],
+    declarations: [AppComponent, AppGanttExampleComponent, AppGanttFlatExampleComponent, AppGanttRangeExampleComponent],
     imports: [CommonModule, DocgeniTemplateModule, NgxGanttModule, AppRoutingModule, RouterModule.forRoot([...routes]), ...EXAMPLE_MODULES],
     providers: [
         { provide: APP_INITIALIZER, useFactory: initializeDocgeniSite, deps: [GlobalContext], multi: true },
@@ -23,6 +24,6 @@ import { EXAMPLE_MODULES } from './content/example-modules';
             useValue: config
         }
     ],
-    bootstrap: [AppComponent],
+    bootstrap: [AppComponent]
 })
 export class AppModule {}
diff --git a/example/src/app/configuration/parameters/api/zh-cn.js b/example/src/app/configuration/parameters/api/zh-cn.js
@@ -193,6 +193,18 @@ module.exports = [
                 description: `设置原始数据`,
                 type: 'T',
                 default: ''
+            },
+            {
+                name: 'type',
+                description: `数据展示方式（区间展示和普通展示）`,
+                type: 'GanttItemType',
+                default: ''
+            },
+            {
+                name: 'progress',
+                description: `进度`,
+                type: 'number',
+                default: ''
             }
         ]
     },

diff --git a/example/src/app/gantt-range/gantt-range.component.html b/example/src/app/gantt-range/gantt-range.component.html
@@ -0,0 +1,61 @@
+<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>
+<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>
diff --git a/example/src/app/gantt-range/gantt-range.component.ts b/example/src/app/gantt-range/gantt-range.component.ts
@@ -0,0 +1,62 @@
+import { Component, OnInit, HostBinding } from '@angular/core';
+import { mockItems } from './mocks';
+import {
+    GanttBarClickEvent,
+    GanttViewType,
+    GanttDragEvent,
+    GanttLoadOnScrollEvent,
+    GanttLineClickEvent,
+    GanttLinkDragEvent,
+    GanttItem,
+    GanttViewOptions,
+    GanttDate
+} from 'ngx-gantt';
+import { of } from 'rxjs';
+import { delay } from 'rxjs/operators';
+@Component({
+    selector: 'app-gantt-range-example',
+    templateUrl: './gantt-range.component.html'
+})
+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() {}
+
+    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));
+    }
+}
diff --git a/example/src/app/gantt-range/mocks.ts b/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'
+    }
+];
diff --git a/example/src/app/gantt/gantt.component.html b/example/src/app/gantt/gantt.component.html
@@ -36,8 +36,8 @@
     #gantt
     start="1514736000"
     end="1609430400"
-    [items]="items"
     [groups]="groups"
+    [items]="items"
     [viewType]="options.viewType"
     [draggable]="options.draggable"
     [linkable]="options.linkable"

diff --git a/example/src/app/gantt/mocks.ts b/example/src/app/gantt/mocks.ts
@@ -28,7 +28,6 @@ export const mockItems = [
         start: 1590035675,
         group_id: '00001',
         color: '#FF0000',
-        links: ['item-0301'],
         children: [
             {
                 id: 'item-child-0101',