@worktile/gantt 11.0.2 → 12.0.1

package/packages/gantt/src/components/icon/icon.component.ts

@@ -0,0 +1,28 @@
+import { Component, OnInit, Input, AfterViewInit, ElementRef, HostBinding } from '@angular/core';
+import { icons } from './icons';
+@Component({
+    selector: 'gantt-icon',
+    template: ''
+})
+export class GanttIconComponent implements OnInit, AfterViewInit {
+    @HostBinding('class.gantt-icon') isIcon = true;
+
+    @Input() set iconName(name: string) {
+        this.setSvg(name);
+    }
+
+    constructor(private elementRef: ElementRef<HTMLElement>) {}
+
+    ngOnInit(): void {}
+
+    ngAfterViewInit() {}
+
+    setSvg(name: string) {
+        const iconSvg = icons[name];
+        if (iconSvg) {
+            this.elementRef.nativeElement.innerHTML = iconSvg;
+        } else {
+            this.elementRef.nativeElement.innerHTML = '';
+        }
+    }
+}

package/packages/gantt/src/components/icon/icons.ts

@@ -0,0 +1,86 @@
+const angleRight = `<svg xmlns="http://www.w3.org/2000/svg" fit=""  preserveAspectRatio="xMidYMid meet" focusable="false"><g id="amnavigation/angle-right" stroke-width="1" fill-rule="evenodd"><path d="M7.978 11.498l-.005.005L2.3 5.831 3.13 5l4.848 4.848L12.826 5l.83.831-5.673 5.672-.005-.005z"   transform="rotate(-90 7.978 8.252)"></path></g></svg>`;
+const angleDown = `<svg xmlns="http://www.w3.org/2000/svg" fit=""  preserveAspectRatio="xMidYMid meet" focusable="false"><g id="aknavigation/angle-down" stroke-width="1" fill-rule="evenodd"><path d="M7.978 11.997l-.005.006L2.3 6.33l.83-.831 4.848 4.848L12.826 5.5l.83.83-5.673 5.673-.005-.006z" ></path></g></svg>`;
+const plusSquare = `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fit=""   preserveAspectRatio="xMidYMid meet" focusable="false"><g id="kxaction/plus-square" stroke-width="1" fill-rule="evenodd"><path d="M2 0h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 1.2a.8.8 0 0 0-.8.8v12a.8.8 0 0 0 .8.8h12a.8.8 0 0 0 .8-.8V2a.8.8 0 0 0-.8-.8H2zm5.45 6.2V4.75h1.2V7.4h2.65v1.2H8.65v2.65h-1.2V8.6H4.8V7.4h2.65z"></path></g></svg>`;
+const minusSquare = `<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fit="" preserveAspectRatio="xMidYMid meet" focusable="false"><g id="jnaction/minus-square" stroke-width="1" fill-rule="evenodd"><path d="M2 0h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm0 1.2a.8.8 0 0 0-.8.8v12a.8.8 0 0 0 .8.8h12a.8.8 0 0 0 .8-.8V2a.8.8 0 0 0-.8-.8H2zm2.8 6.2h6.5v1.2H4.8V7.4z"></path></g></svg>`;
+const loadingIcon = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 50 50" style="enable-background:new 0 0 50 50" xml:space="preserve">
+<path fill="#aaa" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z" transform="rotate(275.098 25 25)">
+    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform>
+</path>
+</svg>`;
+const emptyIcon = `<svg
+width="148px"
+height="134px"
+viewBox="0 0 148 134"
+version="1.1"
+xmlns="http://www.w3.org/2000/svg"
+xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+<defs>
+  <filter x="0.0%" y="0.0%" width="100.0%" height="100.0%" filterUnits="objectBoundingBox" id="filter-1">
+    <feGaussianBlur stdDeviation="0" in="SourceGraphic"></feGaussianBlur>
+  </filter>
+</defs>
+<g id="148x134" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+  <g id="编组-6" transform="translate(1.000000, 1.000000)">
+    <ellipse
+      id="椭圆形"
+      fill="#EDEEF2"
+      opacity="0.3"
+      filter="url(#filter-1)"
+      cx="73.0800017"
+      cy="115.920003"
+      rx="73.0800017"
+      ry="16.8000004"
+    ></ellipse>
+    <g id="编组-5" transform="translate(15.120000, 0.000000)">
+      <polygon
+        id="矩形"
+        fill="#E2E4E9"
+        points="19.2789848 49.5600011 99.1200023 48.7200011 117.600003 75.9297673 117.600003 92.313049 0 92.313049 0 75.0356267"
+      ></polygon>
+      <path
+        d="M23.5200005,0 L94.0800002,0 C97.7913538,2.06413823e-16 100.8,3.00864655 100.8,6.72000015 L100.8,99.1200023 L100.8,99.1200023 L16.8000004,99.1200023 L16.8000004,6.72000015 C16.8000004,3.00864655 19.8086469,1.56994302e-15 23.5200005,0 Z"
+        id="矩形"
+        fill="#F9FAFB"
+      ></path>
+      <path
+        d="M30.9200007,12.4400003 L86.6800019,12.4400003 C88.5356787,12.4400003 90.040002,13.9443236 90.040002,15.8000004 L90.040002,42.000001 C90.040002,43.8556778 88.5356787,45.360001 86.6800019,45.360001 L30.9200007,45.360001 C29.0643239,45.360001 27.5600006,43.8556778 27.5600006,42.000001 L27.5600006,15.8000004 C27.5600006,13.9443236 29.0643239,12.4400003 30.9200007,12.4400003 Z"
+        id="矩形"
+        fill="#E8EAEE"
+      ></path>
+      <text
+        id="&lt;/null&gt;"
+        font-family="PingFangSC-Medium, PingFang SC"
+        font-size="15.1200003"
+        font-weight="400"
+        fill="#BCBECD"
+      >
+        <tspan x="33.6000008" y="32.8000004">&lt;/null&gt;</tspan>
+      </text>
+      <rect id="矩形" fill="#E8EAEE" x="27.5600006" y="52.0800012" width="61.4800014" height="5.04000011" rx="2.52000006"></rect>
+      <rect
+        id="矩形备份"
+        fill="#E8EAEE"
+        x="27.5600006"
+        y="63.8400014"
+        width="61.4800014"
+        height="5.04000011"
+        rx="2.52000006"
+      ></rect>
+      <path
+        d="M0,75.6000017 L29.280235,75.6000017 C32.0637502,75.6000017 34.3202352,77.8564866 34.3202352,80.6400018 L34.3202352,86.2591426 C34.3202352,89.0426578 36.5767201,91.2991427 39.3602353,91.2991427 L78.4136737,91.2991427 C81.1971889,91.2991427 83.4536738,89.0426578 83.4536738,86.2591426 L83.4536738,80.6400018 C83.4536738,77.8564866 85.7101587,75.6000017 88.4936739,75.6000017 L117.600003,75.6000017 L117.600003,75.6000017 L117.600003,110.880003 C117.600003,115.519195 113.839194,119.280003 109.200002,119.280003 L8.40000019,119.280003 C3.76080819,119.280003 -6.53729019e-15,115.519195 0,110.880003 L0,75.6000017 L0,75.6000017 Z"
+        id="矩形"
+        fill="#EDEFF2"
+      ></path>
+    </g>
+  </g>
+</g>
+</svg>`;
+export const icons = {
+    'angle-right': angleRight,
+    'angle-down': angleDown,
+    'plus-square': plusSquare,
+    'minus-square': minusSquare,
+    loading: loadingIcon,
+    empty: emptyIcon
+};

package/packages/gantt/src/components/links/links.component.html

@@ -0,0 +1,19 @@
+<svg [attr.width]="ganttUpper.view.width" class="gantt-links-overlay-main">
+  <ng-container *ngFor="let link of links; let i = index; trackBy: trackBy">
+    <path [attr.d]="link.path" fill="transparent" stroke-width="2" [attr.stroke]="link.color" pointer-events="none"></path>
+    <g>
+      <path
+        class="link-line"
+        (click)="onLineClick($event, link)"
+        (mouseenter)="mouseEnterPath(link)"
+        (mouseleave)="mouseLeavePath(link)"
+        [attr.d]="link.path"
+        stroke="transparent"
+        stroke-width="9"
+        fill="none"
+        cursor="pointer"
+      ></path>
+    </g>
+  </ng-container>
+  <line class="link-dragging-line"></line>
+</svg>

package/packages/gantt/src/components/links/links.component.scss

@@ -0,0 +1,27 @@
+.gantt-links-overlay {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  svg {
+    overflow: visible;
+    z-index: 2;
+    position: absolute;
+  }
+}
+
+.link-dragging-container {
+  width: 100%;
+  height: 1px;
+  overflow: visible !important;
+  position: absolute;
+  top: $gantt-header-height;
+  left: 0;
+  z-index: 2000;
+
+  .link-dragging-line {
+    stroke: $gantt-link-line-color;
+    stroke-width: 2px;
+  }
+}

package/packages/gantt/src/components/links/links.component.ts

@@ -0,0 +1,263 @@
+import {
+    Component,
+    OnInit,
+    Input,
+    Output,
+    EventEmitter,
+    HostBinding,
+    Inject,
+    ChangeDetectorRef,
+    ElementRef,
+    OnDestroy,
+    OnChanges
+} from '@angular/core';
+import { merge, Subject } from 'rxjs';
+import { takeUntil, skip } from 'rxjs/operators';
+import { GanttGroupInternal } from '../../class/group';
+import { GanttItemInternal, GanttItem } from './../../class/item';
+import { GanttLineClickEvent } from '../../class/event';
+import { GanttDragContainer } from '../../gantt-drag-container';
+import { recursiveItems } from '../../utils/helpers';
+import { GanttDate } from '../../utils/date';
+import { GANTT_UPPER_TOKEN, GanttUpper } from '../../gantt-upper';
+
+enum LinkColors {
+    default = '#cacaca',
+    blocked = '#FF7575',
+    active = '#348FE4'
+}
+
+interface GanttLinkItem {
+    id: string;
+    before: { x: number; y: number };
+    after: { x: number; y: number };
+    start: GanttDate;
+    end: GanttDate;
+    origin: GanttItem;
+    links: string[];
+}
+
+interface LinkInternal {
+    path: string;
+    source: GanttItem;
+    target: GanttItem;
+    color: LinkColors;
+}
+
+@Component({
+    selector: 'gantt-links-overlay',
+    templateUrl: './links.component.html'
+})
+export class GanttLinksComponent implements OnInit, OnChanges, OnDestroy {
+    @Input() groups: GanttGroupInternal[] = [];
+
+    @Input() items: GanttItemInternal[] = [];
+
+    @Output() lineClick = new EventEmitter<GanttLineClickEvent>();
+
+    public links: LinkInternal[] = [];
+
+    private linkItems: GanttLinkItem[] = [];
+
+    private bezierWeight = -0.5;
+
+    private firstChange = true;
+
+    private unsubscribe$ = new Subject();
+
+    @HostBinding('class.gantt-links-overlay') ganttLinksOverlay = true;
+
+    constructor(
+        @Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper,
+        private cdr: ChangeDetectorRef,
+        private elementRef: ElementRef,
+        private ganttDragContainer: GanttDragContainer
+    ) {}
+
+    ngOnInit() {
+        this.buildLinks();
+        this.firstChange = false;
+
+        this.ganttDragContainer.dragStarted.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+            this.elementRef.nativeElement.style.visibility = 'hidden';
+        });
+
+        merge(
+            this.ganttUpper.viewChange,
+            this.ganttUpper.expandChange,
+            this.ganttUpper.view.start$,
+            this.ganttUpper.dragEnded,
+            this.ganttUpper.linkDragEnded
+        )
+            .pipe(takeUntil(this.unsubscribe$), skip(1))
+            .subscribe(() => {
+                this.elementRef.nativeElement.style.visibility = 'visible';
+                this.buildLinks();
+                this.cdr.detectChanges();
+            });
+    }
+
+    ngOnChanges() {
+        if (!this.firstChange) {
+            this.buildLinks();
+        }
+    }
+
+    private computeItemPosition() {
+        const lineHeight = this.ganttUpper.styles.lineHeight;
+        const barHeight = this.ganttUpper.styles.barHeight;
+        this.linkItems = [];
+        if (this.groups.length > 0) {
+            let itemNum = 0;
+            let groupNum = 0;
+            this.groups.forEach((group) => {
+                groupNum++;
+                if (group.expanded) {
+                    const items = recursiveItems(group.items);
+                    items.forEach((item, itemIndex) => {
+                        const y = (groupNum + itemNum + itemIndex) * lineHeight + item.refs.y + barHeight / 2;
+                        this.linkItems.push({
+                            ...item,
+                            before: {
+                                x: item.refs.x,
+                                y
+                            },
+                            after: {
+                                x: item.refs.x + item.refs.width,
+                                y
+                            }
+                        });
+                    });
+                    itemNum += items.length;
+                }
+            });
+        } else {
+            const items = recursiveItems(this.items);
+            items.forEach((item, itemIndex) => {
+                const y = itemIndex * lineHeight + item.refs.y + barHeight / 2;
+                this.linkItems.push({
+                    ...item,
+                    before: {
+                        x: item.refs.x,
+                        y
+                    },
+                    after: {
+                        x: item.refs.x + item.refs.width,
+                        y
+                    }
+                });
+            });
+        }
+    }
+
+    private generatePath(source: GanttLinkItem, target: GanttLinkItem) {
+        if (source.before && source.after && target.before && target.after) {
+            const x1 = source.after.x;
+            const y1 = source.after.y;
+
+            const x4 = target.before.x;
+            const y4 = target.before.y;
+
+            const dx = Math.abs(x4 - x1) * this.bezierWeight;
+            const x2 = x1 - dx;
+            const x3 = x4 + dx;
+
+            const centerX = (x1 + x4) / 2;
+            const centerY = (y1 + y4) / 2;
+
+            let controlX = this.ganttUpper.styles.lineHeight / 2;
+            const controlY = this.ganttUpper.styles.lineHeight / 2;
+
+            if (x1 >= x4) {
+                if (y4 > y1) {
+                    if (Math.abs(y4 - y1) <= this.ganttUpper.styles.lineHeight) {
+                        return `M ${x1} ${y1}
+                        C ${x1 + controlX} ${y1} ${x1 + controlX} ${y1 + controlX} ${x1} ${y1 + controlY}
+                        L ${x1} ${y1 + controlY} ${centerX} ${centerY}
+
+                        M ${x4} ${y4}
+                        C ${x4 - controlX} ${y4} ${x4 - controlX} ${y4 - controlX} ${x4} ${y4 - controlY}
+                        L ${x4} ${y4 - controlY} ${centerX} ${centerY}`;
+                    } else {
+                        controlX = this.ganttUpper.styles.lineHeight;
+                        return `M ${x1} ${y1}
+                        C ${x1 + controlX} ${y1} ${x1 + controlX} ${y1 + controlX} ${centerX} ${centerY}
+
+
+                        M ${x4} ${y4}
+                        C ${x4 - controlX} ${y4} ${x4 - controlX} ${y4 - controlX} ${centerX} ${centerY}`;
+                    }
+                } else {
+                    if (Math.abs(y4 - y1) <= this.ganttUpper.styles.lineHeight) {
+                        return `M ${x1} ${y1}
+                        C ${x1 + controlX} ${y1} ${x1 + controlX} ${y1 - controlX} ${x1} ${y1 - controlY}
+                        L ${x1} ${y1 - controlY} ${centerX} ${centerY}
+
+                        M ${x4} ${y4}
+                        C ${x4 - controlX} ${y4} ${x4 - controlX} ${y4 + controlX} ${x4} ${y4 + controlY}
+                        L ${x4} ${y4 + controlY} ${centerX} ${centerY}
+                        `;
+                    } else {
+                        controlX = this.ganttUpper.styles.lineHeight;
+                        return `M ${x1} ${y1}
+                        C ${x1 + controlX} ${y1} ${x1 + controlX} ${y1 - controlX} ${centerX} ${centerY}
+
+                        M ${x4} ${y4}
+                        C ${x4 - controlX} ${y4} ${x4 - controlX} ${y4 + controlX} ${centerX} ${centerY}`;
+                    }
+                }
+            }
+
+            return `M ${x1} ${y1} C ${x2} ${y1} ${x3} ${y4} ${x4} ${y4}`;
+        }
+    }
+
+    buildLinks() {
+        this.computeItemPosition();
+        this.links = [];
+        this.linkItems.forEach((source) => {
+            if (source.origin.start || source.origin.end) {
+                source.links.forEach((linkId) => {
+                    const target = this.linkItems.find((item) => item.id === linkId);
+                    if (target && (target.origin.start || target.origin.end)) {
+                        this.links.push({
+                            path: this.generatePath(source, target),
+                            source: source.origin,
+                            target: target.origin,
+                            color: source.end.getTime() > target.start.getTime() ? LinkColors.blocked : LinkColors.default
+                        });
+                    }
+                });
+            }
+        });
+    }
+
+    trackBy(index: number) {
+        return index;
+    }
+
+    onLineClick(event: MouseEvent, link: LinkInternal) {
+        this.lineClick.emit({
+            event,
+            source: link.source,
+            target: link.target
+        });
+    }
+
+    mouseEnterPath(link: LinkInternal) {
+        if (link.color === LinkColors.default) {
+            link.color = LinkColors.active;
+        }
+    }
+
+    mouseLeavePath(link: LinkInternal) {
+        if (link.color === LinkColors.active) {
+            link.color = LinkColors.default;
+        }
+    }
+
+    ngOnDestroy() {
+        this.unsubscribe$.next();
+        this.unsubscribe$.complete();
+    }
+}

package/packages/gantt/src/components/main/gantt-main.component.html

@@ -0,0 +1,35 @@
+<gantt-links-overlay [groups]="groups" [items]="items" (lineClick)="lineClick.emit($event)"></gantt-links-overlay>
+<!-- groups -->
+<div class="gantt-main-groups" *ngIf="groups && groups.length > 0; else itemsTemplate" [style.width.px]="ganttUpper.view.width">
+  <ng-container *ngFor="let group of groups; trackBy: trackBy">
+    <div class="gantt-group" [ngClass]="group.class">
+      <ng-template [ngTemplateOutlet]="groupHeaderTemplate" [ngTemplateOutletContext]="{ group: group }"></ng-template>
+    </div>
+    <div *ngIf="group.expanded" class="gantt-items">
+      <ng-template [ngTemplateOutlet]="ganttItems" [ngTemplateOutletContext]="{ items: group.items }"></ng-template>
+    </div>
+  </ng-container>
+</div>
+<!-- items -->
+<ng-template #itemsTemplate>
+  <div class="gantt-main-items" [style.width.px]="ganttUpper.view.width">
+    <ng-template [ngTemplateOutlet]="ganttItems" [ngTemplateOutletContext]="{ items: items }"></ng-template>
+  </div>
+</ng-template>
+
+<ng-template #ganttItems let-items="items">
+  <ng-container *ngFor="let item of items; trackBy: trackBy">
+    <div class="gantt-item" [style.height.px]="ganttUpper.styles.lineHeight">
+      <ng-container *ngIf="item.type | isGanttCustomItem">
+        <ng-template [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ item: item.origin, refs: item.refs }"></ng-template>
+      </ng-container>
+      <gantt-range *ngIf="item.type | isGanttRangeItem" [template]="rangeTemplate" [item]="item"></gantt-range>
+      <gantt-bar *ngIf="item.type | isGanttBarItem" [item]="item" [template]="barTemplate" (barClick)="barClick.emit($event)"></gantt-bar>
+    </div>
+    <ng-template
+      *ngIf="item.children && item.expanded"
+      [ngTemplateOutlet]="ganttItems"
+      [ngTemplateOutletContext]="{ items: item.children }"
+    ></ng-template>
+  </ng-container>
+</ng-template>

package/packages/gantt/src/components/main/gantt-main.component.ts

@@ -0,0 +1,35 @@
+import { Component, OnInit, HostBinding, Inject, Input, TemplateRef, Output, EventEmitter } from '@angular/core';
+import { GanttGroupInternal, GanttItemInternal, GanttBarClickEvent, GanttLineClickEvent } from '../../class';
+import { GANTT_UPPER_TOKEN, GanttUpper } from '../../gantt-upper';
+
+@Component({
+    selector: 'gantt-main',
+    templateUrl: './gantt-main.component.html'
+})
+export class GanttMainComponent implements OnInit {
+    @Input() groups: GanttGroupInternal[];
+
+    @Input() items: GanttItemInternal[];
+
+    @Input() groupHeaderTemplate: TemplateRef<any>;
+
+    @Input() itemTemplate: TemplateRef<any>;
+
+    @Input() barTemplate: TemplateRef<any>;
+
+    @Input() rangeTemplate: TemplateRef<any>;
+
+    @Output() barClick = new EventEmitter<GanttBarClickEvent>();
+
+    @Output() lineClick = new EventEmitter<GanttLineClickEvent>();
+
+    @HostBinding('class.gantt-main-container') ganttMainClass = true;
+
+    constructor(@Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper) {}
+
+    ngOnInit() {}
+
+    trackBy(item: GanttGroupInternal | GanttItemInternal, index: number) {
+        return item.id || index;
+    }
+}

package/packages/gantt/src/components/range/range.component.html

@@ -0,0 +1,8 @@
+<ng-container *ngIf="item.start && item.end">
+  <div class="gantt-range-main">
+    <div class="gantt-range-main-progress" *ngIf="item.progress >= 0" [style.width.%]="item.progress * 100"></div>
+  </div>
+  <div class="gantt-range-triangle left"></div>
+  <div class="gantt-range-triangle right"></div>
+  <ng-template [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item.origin, refs: item.refs }"></ng-template>
+</ng-container>

package/packages/gantt/src/components/range/range.component.scss

@@ -0,0 +1,35 @@
+.gantt-range {
+  position: absolute;
+  z-index: 2;
+  .gantt-range-main {
+    height: 10px;
+    background: #dfdfdf;
+    border: 1px solid #888;
+    border-radius: 4px 4px 0 0;
+    box-sizing: border-box;
+    position: relative;
+    .gantt-range-main-progress {
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+      background: #888;
+    }
+  }
+  .gantt-range-triangle {
+    width: 0;
+    height: 0;
+    border-top: 7px solid #888;
+    position: absolute;
+    top: 10px;
+
+    &.left {
+      border-right: 6px solid transparent;
+      left: 0;
+    }
+    &.right {
+      border-left: 6px solid transparent;
+      right: 0;
+    }
+  }
+}

package/packages/gantt/src/components/range/range.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit, HostBinding, ElementRef, OnChanges, OnDestroy, Inject } from '@angular/core';
+import { GANTT_UPPER_TOKEN, GanttUpper } from '../../gantt-upper';
+import { GanttItemUpper } from '../../gantt-item-upper';
+
+@Component({
+    selector: 'ngx-gantt-range,gantt-range',
+    templateUrl: './range.component.html'
+})
+export class NgxGanttRangeComponent extends GanttItemUpper implements OnInit, OnChanges, OnDestroy {
+    @HostBinding('class.gantt-range') ganttRangeClass = true;
+
+    constructor(elementRef: ElementRef<HTMLDivElement>, @Inject(GANTT_UPPER_TOKEN) ganttUpper: GanttUpper) {
+        super(elementRef, ganttUpper);
+    }
+
+    ngOnInit() {
+        super.onInit();
+    }
+
+    ngOnChanges(): void {
+        super.onChanges();
+    }
+
+    ngOnDestroy() {
+        super.onDestroy();
+    }
+}

package/packages/gantt/src/components/range/test/range.component.spec.ts

@@ -0,0 +1,80 @@
+import { CommonModule } from '@angular/common';
+import { Component, DebugElement } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NgxGanttComponent } from '../../../gantt.component';
+import { NgxGanttModule } from '../../../gantt.module';
+import { GanttDate } from '../../../utils/date';
+import { NgxGanttRangeComponent } from '../range.component';
+
+const mockRangeItems = [
+    {
+        id: 'item-0101',
+        title: 'VERSION 0101',
+        start: new GanttDate('2020-05-21 12:34:35').getUnixTime(),
+        type: 'range',
+        progress: 0.5,
+        color: '#FF0000',
+        children: [
+            {
+                id: 'item-child-0101',
+                title: 'VERSION Children 0101',
+                start: new GanttDate('2020-05-21 12:34:35').getUnixTime(),
+                color: '#FF0000',
+                linkable: false,
+                type: 'range'
+            }
+        ]
+    },
+    {
+        id: 'item-0102',
+        title: 'VERSION 0102',
+        start: new GanttDate('2020-05-31 22:34:35').getUnixTime(),
+        end: new GanttDate('2020-06-05 08:53:20').getUnixTime(),
+        color: '#9ACD32',
+        expandable: true,
+        type: 'range'
+    }
+];
+
+@Component({
+    selector: 'test-gantt-range',
+    template: ` <ngx-gantt #gantt [items]="items" [viewType]="viewType">
+        <ngx-gantt-table>
+            <ngx-gantt-column name="标题" width="200px">
+                <ng-template #cell let-item="item">
+                    {{ item.title }}
+                </ng-template>
+            </ngx-gantt-column>
+        </ngx-gantt-table>
+    </ngx-gantt>`
+})
+export class TestGanttRangeComponent {
+    constructor() {}
+
+    viewType = 'month';
+
+    items = mockRangeItems;
+}
+
+describe('ngx-gantt-range', () => {
+    let fixture: ComponentFixture<TestGanttRangeComponent>;
+    beforeEach(async () => {
+        TestBed.configureTestingModule({
+            imports: [CommonModule, NgxGanttModule],
+            declarations: [TestGanttRangeComponent]
+        }).compileComponents();
+        fixture = TestBed.createComponent(TestGanttRangeComponent);
+        fixture.detectChanges();
+    });
+
+    it('should render range item', () => {
+        const rangeItems = fixture.debugElement.queryAll(By.directive(NgxGanttRangeComponent));
+        expect(rangeItems.length).toEqual(mockRangeItems.length);
+    });
+
+    it('should has range progress', () => {
+        const rangeProgress = fixture.debugElement.queryAll(By.css('.gantt-range-main-progress'));
+        expect(rangeProgress.length).toEqual(1);
+    });
+});