Angular Gantt - Task Template

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, enableProdMode, ViewEncapsulation, provideZoneChangeDetection } from '@angular/core'; import { DxGanttModule, DxCheckBoxModule, DxSelectBoxModule } 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.component.html', styleUrls: ['./app.component.css'], providers: [Service], preserveWhitespaces: true, encapsulation: ViewEncapsulation.None, imports: [ DxGanttModule, DxCheckBoxModule, DxSelectBoxModule, ], }) 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(); } getImagePath(taskId) { const imgPath = '../../../../images/employees'; let img = taskId < 10 ? `0${taskId}` : taskId; img = `${imgPath}/${img}.png`; return img; } getTaskColor(taskId) { const color = taskId % 6; return `custom-task-color-${color}`; } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

#gantt { height: 700px; } .custom-task-color-0 { background-color: #512DA8; } .custom-task-color-1 { background-color: #2E7D32; } .custom-task-color-2 { background-color: #1564C0; } .custom-task-color-3 { background-color: #C2185B; } .custom-task-color-4 { background-color: #C62828; } .custom-task-color-5 { background-color: #DD2C00; } .custom-task-color-6 { background-color: #7B1FA2; } .custom-task { max-height: 48px; height: 100%; display: block; overflow: hidden; } .custom-task-wrapper { padding: 8px; color: #fff; } .custom-task-wrapper > * { display: block; overflow: hidden; text-overflow: ellipsis; } .custom-task-img-wrapper { float: left; width: 32px; height: 32px; border-radius: 50%; margin: 8px; background-color: #fff; overflow: hidden; } .custom-task-img { width: 32px; } .custom-task-title { font-weight: 600; font-size: 13px; } .custom-task-row { font-size: 11px; } .custom-task-progress { position: absolute; left: 0; bottom: 0; width: 0%; height: 4px; background: rgba(0, 0, 0, 0.3); } .dx-gantt .dx-row { height: 63px; }

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; } const currentDate: Date = new Date(Date.now()); const month: number = currentDate.getMonth(); const year: number = currentDate.getFullYear(); const tasks: Task[] = [{ id: 1, parentId: 0, title: 'Analysis/Software Requirements', start: new Date(year, month, 1), end: new Date(year, month, 28), progress: 31, }, { id: 2, parentId: 1, title: 'Conduct needs analysis', start: new Date(year, month, 1), end: new Date(year, month, 3), progress: 15, }, { id: 3, parentId: 1, title: 'Draft preliminary software specifications', start: new Date(year, month, 3), end: new Date(year, month, 5), progress: 30, }, { id: 4, parentId: 1, title: 'Review software specifications/budget with team', start: new Date(year, month, 4), end: new Date(year, month, 6), progress: 60, }, { id: 5, parentId: 1, title: 'Incorporate feedback on software specifications', start: new Date(year, month, 6), end: new Date(year, month, 8), progress: 45, }, { id: 6, parentId: 1, title: 'Develop delivery timeline', start: new Date(year, month, 8), end: new Date(year, month, 14), progress: 15, }, { id: 7, parentId: 1, title: 'Obtain approvals to proceed (concept, timeline, budget)', start: new Date(year, month, 14), end: new Date(year, month, 20), progress: 15, }, { id: 8, parentId: 1, title: 'Draft preliminary software specifications', start: new Date(year, month, 20), end: new Date(year, month, 25), progress: 0, }, { id: 9, parentId: 1, title: 'Secure required resources', start: new Date(year, month, 25), end: new Date(year, month, 28), progress: 0, }]; const dependencies: Dependency[] = [{ 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, }]; const resources: Resource[] = [{ id: 1, text: 'John Heart', }, { id: 2, text: 'Paul Peyton', }, { id: 3, text: 'Robert Reagan', }, { id: 4, text: 'Greta Sims', }, { id: 5, text: 'Brett Wade', }, { id: 6, text: 'Sandra Johnson', }, { id: 7, text: 'Kevin Carter', }, { id: 8, text: 'Cynthia Stanwick', }, { id: 9, text: 'Olivia Samuelson', }]; const resourceAssignments: ResourceAssignment[] = [{ id: 0, taskId: 1, resourceId: 1, }, { id: 1, taskId: 2, resourceId: 2, }, { id: 2, taskId: 3, resourceId: 3, }, { id: 3, taskId: 4, resourceId: 4, }, { id: 4, taskId: 5, resourceId: 5, }, { id: 5, taskId: 6, resourceId: 6, }, { id: 6, taskId: 7, resourceId: 7, }, { id: 7, taskId: 8, resourceId: 8, }, { id: 8, taskId: 9, resourceId: 9, }]; @Injectable() export class Service { getTasks(): Task[] { return tasks; } getDependencies(): Dependency[] { return dependencies; } getResources(): Resource[] { return resources; } getResourceAssignments(): ResourceAssignment[] { return resourceAssignments; } }

<!DOCTYPE html> <html lang="en"> <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=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx-gantt.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>