<dx-gantt
taskListWidth="500"
scaleType="weeks"
height="700">
<dxo-tasks [dataSource]="tasks"></dxo-tasks>
<dxo-dependencies [dataSource]="dependencies"></dxo-dependencies>
<dxo-resources [dataSource]="resources"></dxo-resources>
<dxo-resource-assignments [dataSource]="resourceAssignments"></dxo-resource-assignments>
<dxi-column dataField="title" caption="Subject" [width]="300"></dxi-column>
<dxi-column dataField="start" caption="Start Date" dataType="date"></dxi-column>
<dxi-column dataField="end" caption="End Date" dataType="date"></dxi-column>
<dxo-editing [enabled]="true"></dxo-editing>
</dx-gantt>
import { NgModule, Component, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { DxGanttModule } from 'devextreme-angular';
import { Service, Task, Dependency, Resource, ResourceAssignment } from './app.service';
if (!/localhost/.test(document.location.host)) {
enableProdMode();
}
@Component({
selector: 'demo-app',
templateUrl: 'app/app.component.html',
styleUrls: ['app/app.component.css'],
providers: [Service],
preserveWhitespaces: true
})
export class AppComponent {
tasks: Task[];
dependencies: Dependency[];
resources: Resource[];
resourceAssignments: ResourceAssignment[];
constructor(service: Service) {
this.tasks = service.getTasks();
this.dependencies = service.getDependencies();
this.resources = service.getResources();
this.resourceAssignments = service.getResourceAssignments();
}
}
@NgModule({
imports: [
BrowserModule,
DxGanttModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
#gantt {
height: 700px;
}
import { Injectable } from '@angular/core';
export class Task {
id: number;
parentId: number;
title: string;
start: Date;
end: Date;
progress: number;
}
export class Dependency {
id: number;
predecessorId: number;
successorId: number;
type: number;
}
export class Resource {
id: number;
text: string;
}
export class ResourceAssignment {
id: number;
taskId: number;
resourceId: number;
}
let tasks: Task[] = [{
'id': 1,
'parentId': 0,
'title': 'Software Development',
'start': new Date('2019-02-21T05:00:00.000Z'),
'end': new Date('2019-07-04T12:00:00.000Z'),
'progress': 31
}, {
'id': 2,
'parentId': 1,
'title': 'Scope',
'start': new Date('2019-02-21T05:00:00.000Z'),
'end': new Date('2019-02-26T09:00:00.000Z'),
'progress': 60
}, {
'id': 3,
'parentId': 2,
'title': 'Determine project scope',
'start': new Date('2019-02-21T05:00:00.000Z'),
'end': new Date('2019-02-21T09:00:00.000Z'),
'progress': 100
}, {
'id': 4,
'parentId': 2,
'title': 'Secure project sponsorship',
'start': new Date('2019-02-21T10:00:00.000Z'),
'end': new Date('2019-02-22T09:00:00.000Z'),
'progress': 100
}, {
'id': 5,
'parentId': 2,
'title': 'Define preliminary resources',
'start': new Date('2019-02-22T10:00:00.000Z'),
'end': new Date('2019-02-25T09:00:00.000Z'),
'progress': 60
}, {
'id': 6,
'parentId': 2,
'title': 'Secure core resources',
'start': new Date('2019-02-25T10:00:00.000Z'),
'end': new Date('2019-02-26T09:00:00.000Z'),
'progress': 0
}, {
'id': 7,
'parentId': 2,
'title': 'Scope complete',
'start': new Date('2019-02-26T09:00:00.000Z'),
'end': new Date('2019-02-26T09:00:00.000Z'),
'progress': 0
}, {
'id': 8,
'parentId': 1,
'title': 'Analysis/Software Requirements',
'start': new Date('2019-02-26T10:00:00.000Z'),
'end': new Date('2019-03-18T09:00:00.000Z'),
'progress': 80
}, {
'id': 9,
'parentId': 8,
'title': 'Conduct needs analysis',
'start': new Date('2019-02-26T10:00:00.000Z'),
'end': new Date('2019-03-05T09:00:00.000Z'),
'progress': 100
}, {
'id': 10,
'parentId': 8,
'title': 'Draft preliminary software specifications',
'start': new Date('2019-03-05T10:00:00.000Z'),
'end': new Date('2019-03-08T09:00:00.000Z'),
'progress': 100
}, {
'id': 11,
'parentId': 8,
'title': 'Develop preliminary budget',
'start': new Date('2019-03-08T10:00:00.000Z'),
'end': new Date('2019-03-12T09:00:00.000Z'),
'progress': 100
}, {
'id': 12,
'parentId': 8,
'title': 'Review software specifications/budget with team',
'start': new Date('2019-03-12T10:00:00.000Z'),
'end': new Date('2019-03-12T14:00:00.000Z'),
'progress': 100
}, {
'id': 13,
'parentId': 8,
'title': 'Incorporate feedback on software specifications',
'start': new Date('2019-03-13T05:00:00.000Z'),
'end': new Date('2019-03-13T14:00:00.000Z'),
'progress': 70
}, {
'id': 14,
'parentId': 8,
'title': 'Develop delivery timeline',
'start': new Date('2019-03-14T05:00:00.000Z'),
'end': new Date('2019-03-14T14:00:00.000Z'),
'progress': 0
}, {
'id': 15,
'parentId': 8,
'title': 'Obtain approvals to proceed (concept, timeline, budget)',
'start': new Date('2019-03-15T05:00:00.000Z'),
'end': new Date('2019-03-15T09:00:00.000Z'),
'progress': 0
}, {
'id': 16,
'parentId': 8,
'title': 'Secure required resources',
'start': new Date('2019-03-15T10:00:00.000Z'),
'end': new Date('2019-03-18T09:00:00.000Z'),
'progress': 0
}, {
'id': 17,
'parentId': 8,
'title': 'Analysis complete',
'start': new Date('2019-03-18T09:00:00.000Z'),
'end': new Date('2019-03-18T09:00:00.000Z'),
'progress': 0
}, {
'id': 18,
'parentId': 1,
'title': 'Design',
'start': new Date('2019-03-18T10:00:00.000Z'),
'end': new Date('2019-04-05T14:00:00.000Z'),
'progress': 80
}, {
'id': 19,
'parentId': 18,
'title': 'Review preliminary software specifications',
'start': new Date('2019-03-18T10:00:00.000Z'),
'end': new Date('2019-03-20T09:00:00.000Z'),
'progress': 100
}, {
'id': 20,
'parentId': 18,
'title': 'Develop functional specifications',
'start': new Date('2019-03-20T10:00:00.000Z'),
'end': new Date('2019-03-27T09:00:00.000Z'),
'progress': 100
}, {
'id': 21,
'parentId': 18,
'title': 'Develop prototype based on functional specifications',
'start': new Date('2019-03-27T10:00:00.000Z'),
'end': new Date('2019-04-02T09:00:00.000Z'),
'progress': 100
}, {
'id': 22,
'parentId': 18,
'title': 'Review functional specifications',
'start': new Date('2019-04-02T10:00:00.000Z'),
'end': new Date('2019-04-04T09:00:00.000Z'),
'progress': 30
}, {
'id': 23,
'parentId': 18,
'title': 'Incorporate feedback into functional specifications',
'start': new Date('2019-04-04T10:00:00.000Z'),
'end': new Date('2019-04-05T09:00:00.000Z'),
'progress': 0
}, {
'id': 24,
'parentId': 18,
'title': 'Obtain approval to proceed',
'start': new Date('2019-04-05T10:00:00.000Z'),
'end': new Date('2019-04-05T14:00:00.000Z'),
'progress': 0
}, {
'id': 25,
'parentId': 18,
'title': 'Design complete',
'start': new Date('2019-04-05T14:00:00.000Z'),
'end': new Date('2019-04-05T14:00:00.000Z'),
'progress': 0
}, {
'id': 26,
'parentId': 1,
'title': 'Development',
'start': new Date('2019-04-08T05:00:00.000Z'),
'end': new Date('2019-05-07T12:00:00.000Z'),
'progress': 42
}, {
'id': 27,
'parentId': 26,
'title': 'Review functional specifications',
'start': new Date('2019-04-08T05:00:00.000Z'),
'end': new Date('2019-04-08T14:00:00.000Z'),
'progress': 100
}, {
'id': 28,
'parentId': 26,
'title': 'Identify modular/tiered design parameters',
'start': new Date('2019-04-09T05:00:00.000Z'),
'end': new Date('2019-04-09T14:00:00.000Z'),
'progress': 100
}, {
'id': 29,
'parentId': 26,
'title': 'Assign development staff',
'start': new Date('2019-04-10T05:00:00.000Z'),
'end': new Date('2019-04-10T14:00:00.000Z'),
'progress': 100
}, {
'id': 30,
'parentId': 26,
'title': 'Develop code',
'start': new Date('2019-04-11T05:00:00.000Z'),
'end': new Date('2019-05-01T14:00:00.000Z'),
'progress': 49
}, {
'id': 31,
'parentId': 26,
'title': 'Developer testing (primary debugging)',
'start': new Date('2019-04-16T12:00:00.000Z'),
'end': new Date('2019-05-07T12:00:00.000Z'),
'progress': 24
}, {
'id': 32,
'parentId': 26,
'title': 'Development complete',
'start': new Date('2019-05-07T12:00:00.000Z'),
'end': new Date('2019-05-07T12:00:00.000Z'),
'progress': 0
}, {
'id': 33,
'parentId': 1,
'title': 'Testing',
'start': new Date('2019-04-08T05:00:00.000Z'),
'end': new Date('2019-06-13T12:00:00.000Z'),
'progress': 23
}, {
'id': 34,
'parentId': 33,
'title': 'Develop unit test plans using product specifications',
'start': new Date('2019-04-08T05:00:00.000Z'),
'end': new Date('2019-04-11T14:00:00.000Z'),
'progress': 100
}, {
'id': 35,
'parentId': 33,
'title': 'Develop integration test plans using product specifications',
'start': new Date('2019-04-08T05:00:00.000Z'),
'end': new Date('2019-04-11T14:00:00.000Z'),
'progress': 100
}, {
'id': 36,
'parentId': 33,
'title': 'Unit Testing',
'start': new Date('2019-05-07T12:00:00.000Z'),
'end': new Date('2019-05-28T12:00:00.000Z'),
'progress': 0
}, {
'id': 37,
'parentId': 36,
'title': 'Review modular code',
'start': new Date('2019-05-07T12:00:00.000Z'),
'end': new Date('2019-05-14T12:00:00.000Z'),
'progress': 0
}, {
'id': 38,
'parentId': 36,
'title': 'Test component modules to product specifications',
'start': new Date('2019-05-14T12:00:00.000Z'),
'end': new Date('2019-05-16T12:00:00.000Z'),
'progress': 0
}, {
'id': 39,
'parentId': 36,
'title': 'Identify anomalies to product specifications',
'start': new Date('2019-05-16T12:00:00.000Z'),
'end': new Date('2019-05-21T12:00:00.000Z'),
'progress': 0
}, {
'id': 40,
'parentId': 36,
'title': 'Modify code',
'start': new Date('2019-05-21T12:00:00.000Z'),
'end': new Date('2019-05-24T12:00:00.000Z'),
'progress': 0
}, {
'id': 41,
'parentId': 36,
'title': 'Re-test modified code',
'start': new Date('2019-05-24T12:00:00.000Z'),
'end': new Date('2019-05-28T12:00:00.000Z'),
'progress': 0
}, {
'id': 42,
'parentId': 36,
'title': 'Unit testing complete',
'start': new Date('2019-05-28T12:00:00.000Z'),
'end': new Date('2019-05-28T12:00:00.000Z'),
'progress': 0
}, {
'id': 43,
'parentId': 33,
'title': 'Integration Testing',
'start': new Date('2019-05-28T12:00:00.000Z'),
'end': new Date('2019-06-13T12:00:00.000Z'),
'progress': 0
}, {
'id': 44,
'parentId': 43,
'title': 'Test module integration',
'start': new Date('2019-05-28T12:00:00.000Z'),
'end': new Date('2019-06-04T12:00:00.000Z'),
'progress': 0
}, {
'id': 45,
'parentId': 43,
'title': 'Identify anomalies to specifications',
'start': new Date('2019-06-04T12:00:00.000Z'),
'end': new Date('2019-06-06T12:00:00.000Z'),
'progress': 0
}, {
'id': 46,
'parentId': 43,
'title': 'Modify code',
'start': new Date('2019-06-06T12:00:00.000Z'),
'end': new Date('2019-06-11T12:00:00.000Z'),
'progress': 0
}, {
'id': 47,
'parentId': 43,
'title': 'Re-test modified code',
'start': new Date('2019-06-11T12:00:00.000Z'),
'end': new Date('2019-06-13T12:00:00.000Z'),
'progress': 0
}, {
'id': 48,
'parentId': 43,
'title': 'Integration testing complete',
'start': new Date('2019-06-13T12:00:00.000Z'),
'end': new Date('2019-06-13T12:00:00.000Z'),
'progress': 0
}, {
'id': 49,
'parentId': 1,
'title': 'Training',
'start': new Date('2019-04-08T05:00:00.000Z'),
'end': new Date('2019-06-10T12:00:00.000Z'),
'progress': 25
}, {
'id': 50,
'parentId': 49,
'title': 'Develop training specifications for end users',
'start': new Date('2019-04-08T05:00:00.000Z'),
'end': new Date('2019-04-10T14:00:00.000Z'),
'progress': 100
}, {
'id': 51,
'parentId': 49,
'title': 'Develop training specifications for helpdesk support staff',
'start': new Date('2019-04-08T05:00:00.000Z'),
'end': new Date('2019-04-10T14:00:00.000Z'),
'progress': 100
}, {
'id': 52,
'parentId': 49,
'title': 'Identify training delivery methodology (computer based training, classroom, etc.)',
'start': new Date('2019-04-08T05:00:00.000Z'),
'end': new Date('2019-04-09T14:00:00.000Z'),
'progress': 100
}, {
'id': 53,
'parentId': 49,
'title': 'Develop training materials',
'start': new Date('2019-05-07T12:00:00.000Z'),
'end': new Date('2019-05-28T12:00:00.000Z'),
'progress': 0
}, {
'id': 54,
'parentId': 49,
'title': 'Conduct training usability study',
'start': new Date('2019-05-28T12:00:00.000Z'),
'end': new Date('2019-06-03T12:00:00.000Z'),
'progress': 0
}, {
'id': 55,
'parentId': 49,
'title': 'Finalize training materials',
'start': new Date('2019-06-03T12:00:00.000Z'),
'end': new Date('2019-06-06T12:00:00.000Z'),
'progress': 0
}, {
'id': 56,
'parentId': 49,
'title': 'Develop training delivery mechanism',
'start': new Date('2019-06-06T12:00:00.000Z'),
'end': new Date('2019-06-10T12:00:00.000Z'),
'progress': 0
}, {
'id': 57,
'parentId': 49,
'title': 'Training materials complete',
'start': new Date('2019-06-10T12:00:00.000Z'),
'end': new Date('2019-06-10T12:00:00.000Z'),
'progress': 0
}, {
'id': 58,
'parentId': 1,
'title': 'Documentation',
'start': new Date('2019-04-08T05:00:00.000Z'),
'end': new Date('2019-05-20T09:00:00.000Z'),
'progress': 0
}, {
'id': 59,
'parentId': 58,
'title': 'Develop Help specification',
'start': new Date('2019-04-08T05:00:00.000Z'),
'end': new Date('2019-04-08T14:00:00.000Z'),
'progress': 80
}, {
'id': 60,
'parentId': 58,
'title': 'Develop Help system',
'start': new Date('2019-04-22T10:00:00.000Z'),
'end': new Date('2019-05-13T09:00:00.000Z'),
'progress': 0
}, {
'id': 61,
'parentId': 58,
'title': 'Review Help documentation',
'start': new Date('2019-05-13T10:00:00.000Z'),
'end': new Date('2019-05-16T09:00:00.000Z'),
'progress': 0
}, {
'id': 62,
'parentId': 58,
'title': 'Incorporate Help documentation feedback',
'start': new Date('2019-05-16T10:00:00.000Z'),
'end': new Date('2019-05-20T09:00:00.000Z'),
'progress': 0
}, {
'id': 63,
'parentId': 58,
'title': 'Develop user manuals specifications',
'start': new Date('2019-04-08T05:00:00.000Z'),
'end': new Date('2019-04-09T14:00:00.000Z'),
'progress': 65
}, {
'id': 64,
'parentId': 58,
'title': 'Develop user manuals',
'start': new Date('2019-04-22T10:00:00.000Z'),
'end': new Date('2019-05-13T09:00:00.000Z'),
'progress': 0
}, {
'id': 65,
'parentId': 58,
'title': 'Review all user documentation',
'start': new Date('2019-05-13T10:00:00.000Z'),
'end': new Date('2019-05-15T09:00:00.000Z'),
'progress': 0
}, {
'id': 66,
'parentId': 58,
'title': 'Incorporate user documentation feedback',
'start': new Date('2019-05-15T10:00:00.000Z'),
'end': new Date('2019-05-17T09:00:00.000Z'),
'progress': 0
}, {
'id': 67,
'parentId': 58,
'title': 'Documentation complete',
'start': new Date('2019-05-20T09:00:00.000Z'),
'end': new Date('2019-05-20T09:00:00.000Z'),
'progress': 0
}, {
'id': 68,
'parentId': 1,
'title': 'Pilot',
'start': new Date('2019-03-18T10:00:00.000Z'),
'end': new Date('2019-06-24T12:00:00.000Z'),
'progress': 22
}, {
'id': 69,
'parentId': 68,
'title': 'Identify test group',
'start': new Date('2019-03-18T10:00:00.000Z'),
'end': new Date('2019-03-19T09:00:00.000Z'),
'progress': 100
}, {
'id': 70,
'parentId': 68,
'title': 'Develop software delivery mechanism',
'start': new Date('2019-03-19T10:00:00.000Z'),
'end': new Date('2019-03-20T09:00:00.000Z'),
'progress': 100
}, {
'id': 71,
'parentId': 68,
'title': 'Install/deploy software',
'start': new Date('2019-06-13T12:00:00.000Z'),
'end': new Date('2019-06-14T12:00:00.000Z'),
'progress': 0
}, {
'id': 72,
'parentId': 68,
'title': 'Obtain user feedback',
'start': new Date('2019-06-14T12:00:00.000Z'),
'end': new Date('2019-06-21T12:00:00.000Z'),
'progress': 0
}, {
'id': 73,
'parentId': 68,
'title': 'Evaluate testing information',
'start': new Date('2019-06-21T12:00:00.000Z'),
'end': new Date('2019-06-24T12:00:00.000Z'),
'progress': 0
}, {
'id': 74,
'parentId': 68,
'title': 'Pilot complete',
'start': new Date('2019-06-24T12:00:00.000Z'),
'end': new Date('2019-06-24T12:00:00.000Z'),
'progress': 0
}, {
'id': 75,
'parentId': 1,
'title': 'Deployment',
'start': new Date('2019-06-24T12:00:00.000Z'),
'end': new Date('2019-07-01T12:00:00.000Z'),
'progress': 0
}, {
'id': 76,
'parentId': 75,
'title': 'Determine final deployment strategy',
'start': new Date('2019-06-24T12:00:00.000Z'),
'end': new Date('2019-06-25T12:00:00.000Z'),
'progress': 0
}, {
'id': 77,
'parentId': 75,
'title': 'Develop deployment methodology',
'start': new Date('2019-06-25T12:00:00.000Z'),
'end': new Date('2019-06-26T12:00:00.000Z'),
'progress': 0
}, {
'id': 78,
'parentId': 75,
'title': 'Secure deployment resources',
'start': new Date('2019-06-26T12:00:00.000Z'),
'end': new Date('2019-06-27T12:00:00.000Z'),
'progress': 0
}, {
'id': 79,
'parentId': 75,
'title': 'Train support staff',
'start': new Date('2019-06-27T12:00:00.000Z'),
'end': new Date('2019-06-28T12:00:00.000Z'),
'progress': 0
}, {
'id': 80,
'parentId': 75,
'title': 'Deploy software',
'start': new Date('2019-06-28T12:00:00.000Z'),
'end': new Date('2019-07-01T12:00:00.000Z'),
'progress': 0
}, {
'id': 81,
'parentId': 75,
'title': 'Deployment complete',
'start': new Date('2019-07-01T12:00:00.000Z'),
'end': new Date('2019-07-01T12:00:00.000Z'),
'progress': 0
}, {
'id': 82,
'parentId': 1,
'title': 'Post Implementation Review',
'start': new Date('2019-07-01T12:00:00.000Z'),
'end': new Date('2019-07-04T12:00:00.000Z'),
'progress': 0
}, {
'id': 83,
'parentId': 82,
'title': 'Document lessons learned',
'start': new Date('2019-07-01T12:00:00.000Z'),
'end': new Date('2019-07-02T12:00:00.000Z'),
'progress': 0
}, {
'id': 84,
'parentId': 82,
'title': 'Distribute to team members',
'start': new Date('2019-07-02T12:00:00.000Z'),
'end': new Date('2019-07-03T12:00:00.000Z'),
'progress': 0
}, {
'id': 85,
'parentId': 82,
'title': 'Create software maintenance team',
'start': new Date('2019-07-03T12:00:00.000Z'),
'end': new Date('2019-07-04T12:00:00.000Z'),
'progress': 0
}, {
'id': 86,
'parentId': 82,
'title': 'Post implementation review complete',
'start': new Date('2019-07-04T12:00:00.000Z'),
'end': new Date('2019-07-04T12:00:00.000Z'),
'progress': 0
}, {
'id': 87,
'parentId': 1,
'title': 'Software development template complete',
'start': new Date('2019-07-04T12:00:00.000Z'),
'end': new Date('2019-07-04T12:00:00.000Z'),
'progress': 0
}];
let dependencies: Dependency[] = [{
'id': 0,
'predecessorId': 1,
'successorId': 2,
'type': 0
}, {
'id': 1,
'predecessorId': 2,
'successorId': 3,
'type': 0
}, {
'id': 2,
'predecessorId': 3,
'successorId': 4,
'type': 0
}, {
'id': 3,
'predecessorId': 4,
'successorId': 5,
'type': 0
}, {
'id': 4,
'predecessorId': 5,
'successorId': 6,
'type': 0
}, {
'id': 5,
'predecessorId': 6,
'successorId': 7,
'type': 0
}, {
'id': 6,
'predecessorId': 7,
'successorId': 8,
'type': 0
}, {
'id': 7,
'predecessorId': 8,
'successorId': 9,
'type': 0
}, {
'id': 8,
'predecessorId': 9,
'successorId': 10,
'type': 0
}, {
'id': 9,
'predecessorId': 10,
'successorId': 11,
'type': 0
}, {
'id': 10,
'predecessorId': 11,
'successorId': 12,
'type': 0
}, {
'id': 11,
'predecessorId': 12,
'successorId': 13,
'type': 0
}, {
'id': 12,
'predecessorId': 13,
'successorId': 14,
'type': 0
}, {
'id': 13,
'predecessorId': 14,
'successorId': 15,
'type': 0
}, {
'id': 14,
'predecessorId': 15,
'successorId': 16,
'type': 0
}, {
'id': 15,
'predecessorId': 16,
'successorId': 17,
'type': 0
}, {
'id': 16,
'predecessorId': 17,
'successorId': 18,
'type': 0
}, {
'id': 17,
'predecessorId': 18,
'successorId': 19,
'type': 0
}, {
'id': 18,
'predecessorId': 19,
'successorId': 20,
'type': 0
}, {
'id': 19,
'predecessorId': 20,
'successorId': 21,
'type': 0
}, {
'id': 20,
'predecessorId': 21,
'successorId': 22,
'type': 0
}, {
'id': 21,
'predecessorId': 22,
'successorId': 23,
'type': 0
}, {
'id': 22,
'predecessorId': 23,
'successorId': 24,
'type': 0
}, {
'id': 23,
'predecessorId': 24,
'successorId': 25,
'type': 0
}, {
'id': 24,
'predecessorId': 25,
'successorId': 26,
'type': 0
}, {
'id': 25,
'predecessorId': 26,
'successorId': 27,
'type': 0
}, {
'id': 26,
'predecessorId': 27,
'successorId': 28,
'type': 0
}, {
'id': 27,
'predecessorId': 28,
'successorId': 29,
'type': 0
}, {
'id': 28,
'predecessorId': 29,
'successorId': 30,
'type': 0
}, {
'id': 29,
'predecessorId': 30,
'successorId': 31,
'type': 0
}, {
'id': 30,
'predecessorId': 31,
'successorId': 32,
'type': 0
}, {
'id': 31,
'predecessorId': 32,
'successorId': 33,
'type': 0
}, {
'id': 32,
'predecessorId': 33,
'successorId': 34,
'type': 0
}, {
'id': 33,
'predecessorId': 34,
'successorId': 35,
'type': 0
}, {
'id': 34,
'predecessorId': 35,
'successorId': 36,
'type': 0
}, {
'id': 35,
'predecessorId': 36,
'successorId': 37,
'type': 0
}, {
'id': 36,
'predecessorId': 37,
'successorId': 38,
'type': 0
}, {
'id': 37,
'predecessorId': 38,
'successorId': 39,
'type': 0
}, {
'id': 38,
'predecessorId': 39,
'successorId': 40,
'type': 0
}, {
'id': 39,
'predecessorId': 40,
'successorId': 41,
'type': 0
}, {
'id': 40,
'predecessorId': 41,
'successorId': 42,
'type': 0
}, {
'id': 41,
'predecessorId': 42,
'successorId': 43,
'type': 0
}, {
'id': 42,
'predecessorId': 43,
'successorId': 44,
'type': 0
}, {
'id': 43,
'predecessorId': 44,
'successorId': 45,
'type': 0
}, {
'id': 44,
'predecessorId': 45,
'successorId': 46,
'type': 0
}, {
'id': 45,
'predecessorId': 46,
'successorId': 47,
'type': 0
}, {
'id': 46,
'predecessorId': 47,
'successorId': 48,
'type': 0
}, {
'id': 47,
'predecessorId': 48,
'successorId': 49,
'type': 0
}, {
'id': 48,
'predecessorId': 49,
'successorId': 50,
'type': 0
}, {
'id': 49,
'predecessorId': 50,
'successorId': 51,
'type': 0
}, {
'id': 50,
'predecessorId': 51,
'successorId': 52,
'type': 0
}, {
'id': 51,
'predecessorId': 52,
'successorId': 53,
'type': 0
}, {
'id': 52,
'predecessorId': 53,
'successorId': 54,
'type': 0
}, {
'id': 53,
'predecessorId': 54,
'successorId': 55,
'type': 0
}, {
'id': 54,
'predecessorId': 55,
'successorId': 56,
'type': 0
}, {
'id': 55,
'predecessorId': 56,
'successorId': 57,
'type': 0
}, {
'id': 56,
'predecessorId': 57,
'successorId': 58,
'type': 0
}, {
'id': 57,
'predecessorId': 58,
'successorId': 59,
'type': 0
}, {
'id': 58,
'predecessorId': 59,
'successorId': 60,
'type': 0
}, {
'id': 59,
'predecessorId': 60,
'successorId': 61,
'type': 0
}, {
'id': 60,
'predecessorId': 61,
'successorId': 62,
'type': 0
}, {
'id': 61,
'predecessorId': 62,
'successorId': 63,
'type': 0
}, {
'id': 62,
'predecessorId': 63,
'successorId': 64,
'type': 0
}, {
'id': 63,
'predecessorId': 64,
'successorId': 65,
'type': 0
}, {
'id': 64,
'predecessorId': 65,
'successorId': 66,
'type': 0
}, {
'id': 65,
'predecessorId': 66,
'successorId': 67,
'type': 0
}, {
'id': 66,
'predecessorId': 67,
'successorId': 68,
'type': 0
}, {
'id': 67,
'predecessorId': 68,
'successorId': 69,
'type': 0
}, {
'id': 68,
'predecessorId': 69,
'successorId': 70,
'type': 0
}, {
'id': 69,
'predecessorId': 70,
'successorId': 71,
'type': 0
}, {
'id': 70,
'predecessorId': 71,
'successorId': 72,
'type': 0
}, {
'id': 71,
'predecessorId': 72,
'successorId': 73,
'type': 0
}, {
'id': 72,
'predecessorId': 73,
'successorId': 74,
'type': 0
}, {
'id': 73,
'predecessorId': 74,
'successorId': 75,
'type': 0
}, {
'id': 74,
'predecessorId': 75,
'successorId': 76,
'type': 0
}, {
'id': 75,
'predecessorId': 76,
'successorId': 77,
'type': 0
}, {
'id': 76,
'predecessorId': 77,
'successorId': 78,
'type': 0
}, {
'id': 77,
'predecessorId': 78,
'successorId': 79,
'type': 0
}, {
'id': 78,
'predecessorId': 79,
'successorId': 80,
'type': 0
}, {
'id': 79,
'predecessorId': 80,
'successorId': 81,
'type': 0
}, {
'id': 80,
'predecessorId': 81,
'successorId': 82,
'type': 0
}, {
'id': 81,
'predecessorId': 82,
'successorId': 83,
'type': 0
}, {
'id': 82,
'predecessorId': 83,
'successorId': 84,
'type': 0
}, {
'id': 83,
'predecessorId': 84,
'successorId': 85,
'type': 0
}, {
'id': 84,
'predecessorId': 85,
'successorId': 86,
'type': 0
}, {
'id': 85,
'predecessorId': 86,
'successorId': 87,
'type': 0
}];
let resources: Resource[] = [{
'id': 1,
'text': 'Management'
}, {
'id': 2,
'text': 'Project Manager'
}, {
'id': 3,
'text': 'Analyst'
}, {
'id': 4,
'text': 'Developer'
}, {
'id': 5,
'text': 'Testers'
}, {
'id': 6,
'text': 'Trainers'
}, {
'id': 7,
'text': 'Technical Communicators'
}, {
'id': 8,
'text': 'Deployment Team'
}];
let resourceAssignments: ResourceAssignment[] = [{
'id': 0,
'taskId': 3,
'resourceId': 1
}, {
'id': 1,
'taskId': 4,
'resourceId': 1
}, {
'id': 2,
'taskId': 5,
'resourceId': 2
}, {
'id': 3,
'taskId': 6,
'resourceId': 2
}, {
'id': 4,
'taskId': 9,
'resourceId': 3
}, {
'id': 5,
'taskId': 10,
'resourceId': 3
}, {
'id': 6,
'taskId': 11,
'resourceId': 2
}, {
'id': 7,
'taskId': 12,
'resourceId': 2
}, {
'id': 8,
'taskId': 12,
'resourceId': 3
}, {
'id': 9,
'taskId': 13,
'resourceId': 3
}, {
'id': 10,
'taskId': 14,
'resourceId': 2
}, {
'id': 11,
'taskId': 15,
'resourceId': 1
}, {
'id': 12,
'taskId': 15,
'resourceId': 2
}, {
'id': 13,
'taskId': 16,
'resourceId': 2
}, {
'id': 14,
'taskId': 19,
'resourceId': 3
}, {
'id': 15,
'taskId': 20,
'resourceId': 3
}, {
'id': 16,
'taskId': 21,
'resourceId': 3
}, {
'id': 17,
'taskId': 22,
'resourceId': 1
}, {
'id': 18,
'taskId': 23,
'resourceId': 1
}, {
'id': 19,
'taskId': 24,
'resourceId': 1
}, {
'id': 20,
'taskId': 24,
'resourceId': 2
}, {
'id': 21,
'taskId': 27,
'resourceId': 4
}, {
'id': 22,
'taskId': 28,
'resourceId': 4
}, {
'id': 23,
'taskId': 29,
'resourceId': 4
}, {
'id': 24,
'taskId': 30,
'resourceId': 4
}, {
'id': 25,
'taskId': 31,
'resourceId': 4
}, {
'id': 26,
'taskId': 34,
'resourceId': 5
}, {
'id': 27,
'taskId': 35,
'resourceId': 5
}, {
'id': 28,
'taskId': 37,
'resourceId': 5
}, {
'id': 29,
'taskId': 38,
'resourceId': 5
}, {
'id': 30,
'taskId': 39,
'resourceId': 5
}, {
'id': 31,
'taskId': 40,
'resourceId': 5
}, {
'id': 32,
'taskId': 41,
'resourceId': 5
}, {
'id': 33,
'taskId': 44,
'resourceId': 5
}, {
'id': 34,
'taskId': 45,
'resourceId': 5
}, {
'id': 35,
'taskId': 46,
'resourceId': 5
}, {
'id': 36,
'taskId': 47,
'resourceId': 5
}, {
'id': 37,
'taskId': 50,
'resourceId': 6
}, {
'id': 38,
'taskId': 51,
'resourceId': 6
}, {
'id': 39,
'taskId': 52,
'resourceId': 6
}, {
'id': 40,
'taskId': 53,
'resourceId': 6
}, {
'id': 41,
'taskId': 54,
'resourceId': 6
}, {
'id': 42,
'taskId': 55,
'resourceId': 6
}, {
'id': 43,
'taskId': 56,
'resourceId': 6
}, {
'id': 44,
'taskId': 59,
'resourceId': 7
}, {
'id': 45,
'taskId': 60,
'resourceId': 7
}, {
'id': 46,
'taskId': 61,
'resourceId': 7
}, {
'id': 47,
'taskId': 62,
'resourceId': 7
}, {
'id': 48,
'taskId': 63,
'resourceId': 7
}, {
'id': 49,
'taskId': 64,
'resourceId': 7
}, {
'id': 50,
'taskId': 65,
'resourceId': 7
}, {
'id': 51,
'taskId': 66,
'resourceId': 7
}, {
'id': 52,
'taskId': 69,
'resourceId': 2
}, {
'id': 53,
'taskId': 71,
'resourceId': 8
}, {
'id': 54,
'taskId': 72,
'resourceId': 8
}, {
'id': 55,
'taskId': 73,
'resourceId': 8
}, {
'id': 56,
'taskId': 76,
'resourceId': 8
}, {
'id': 57,
'taskId': 77,
'resourceId': 8
}, {
'id': 58,
'taskId': 78,
'resourceId': 8
}, {
'id': 59,
'taskId': 79,
'resourceId': 8
}, {
'id': 60,
'taskId': 80,
'resourceId': 8
}, {
'id': 61,
'taskId': 83,
'resourceId': 2
}, {
'id': 62,
'taskId': 84,
'resourceId': 2
}, {
'id': 63,
'taskId': 85,
'resourceId': 2
}];
@Injectable()
export class Service {
getTasks(): Task[] {
return tasks;
}
getDependencies(): Dependency[] {
return dependencies;
}
getResources(): Resource[] {
return resources;
}
getResourceAssignments(): ResourceAssignment[] {
return resourceAssignments;
}
}
// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here:
// https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/
System.config({
transpiler: 'ts',
typescriptOptions: {
module: "commonjs",
emitDecoratorMetadata: true,
experimentalDecorators: true
},
meta: {
'typescript': {
"exports": "ts"
}
},
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@3.4.5/lib/typescript.js',
'@angular/core': 'npm:@angular/core@8.0.0/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common@8.0.0/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler@8.0.0/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser@8.0.0/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@8.0.0/bundles/platform-browser-dynamic.umd.js',
'@angular/router': 'npm:@angular/router@8.0.0/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms@8.0.0/bundles/forms.umd.js',
'@angular/common/http': 'npm:@angular/common@8.0.0/bundles/common-http.umd.js',
'tslib': 'npm:tslib/tslib.js',
'rxjs': 'npm:rxjs@6.3.3',
'rxjs/operators': 'npm:rxjs@6.3.3/operators',
'devextreme': 'npm:devextreme@19.2',
'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js',
'quill': 'npm:quill@1.3.7/dist/quill.js',
'devexpress-diagram': 'npm:devexpress-diagram',
'devexpress-gantt': 'npm:devexpress-gantt',
'devextreme-angular': 'npm:devextreme-angular@19.2'
},
packages: {
'app': {
main: './app.component.ts',
defaultExtension: 'ts'
},
'devextreme': {
defaultExtension: 'js'
},
'rxjs': { main: 'index.js', defaultExtension: 'js' },
'rxjs/operators': { main: 'index.js', defaultExtension: 'js' },
'devextreme-angular': {
main: 'index.js',
defaultExtension: 'js'
}
}
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.4/css/dx-gantt.css" />
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js@0.6.25/dist/zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app').catch(console.error.bind(console));
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<demo-app>Loading...</demo-app>
</div>
</body>
</html>