Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
import React from 'react';
import { SelectBox, ISelectBoxOptions } from 'devextreme-react/select-box';
import { CheckBox, ICheckBoxOptions } from 'devextreme-react/check-box';
import { NumberBox, INumberBoxOptions } from 'devextreme-react/number-box';
import { DateBox, IDateBoxOptions } from 'devextreme-react/date-box';
import {
Gantt, Tasks, Dependencies, Resources, ResourceAssignments, Column, Editing, Toolbar, Item,
} from 'devextreme-react/gantt';
import pdfExporter from 'devextreme/pdf_exporter';
import { jsPDF } from 'jspdf';
import {
tasks, dependencies, resources, resourceAssignments, startDateLabel, endDateLabel,
documentFormatLabel, exportModeLabel, dateRangeLabel,
} from './data.ts';
import 'jspdf-autotable';
type GanttPdfExportMode = 'all' | 'treeList' | 'chart';
const formats = ['A0', 'A1', 'A2', 'A3', 'A4', 'Auto'];
const exportModes = ['All', 'Chart', 'Tree List'];
const dateRanges = ['All', 'Visible', 'Custom'];
const startTaskIndexLabel = { 'aria-label': 'Start Task Index' };
const endTaskIndexLabel = { 'aria-label': 'End Task Index' };
class App extends React.Component {
formatBoxRef: any;
exportModeBoxRef: any;
dateRangeBoxRef: any;
ganttRef: any;
state: { formatBoxValue: string; exportModeBoxValue: string; dateRangeBoxValue: string; landscapeCheckBoxValue: boolean; startTaskIndex: number; endTaskIndex: number; startDate: Date; endDate: Date; customRangeDisabled: boolean; };
exportButtonOptions: { icon: string; hint: string; stylingMode: string; onClick: any; };
exportModeBoxSelectionChanged: ISelectBoxOptions['onValueChanged'];
formatBoxSelectionChanged: ISelectBoxOptions['onValueChanged'];
dateRangeBoxSelectionChanged: ISelectBoxOptions['onValueChanged'];
onLandscapeCheckBoxChanged: ICheckBoxOptions['onValueChanged'] ;
startTaskIndexValueChanged: INumberBoxOptions['onValueChanged'];
endTaskIndexValueChanged: INumberBoxOptions['onValueChanged'];
startDateValueChanged: IDateBoxOptions['onValueChanged'];
endDateValueChanged: IDateBoxOptions['onValueChanged'];
constructor(props) {
super(props);
this.formatBoxRef = null;
this.exportModeBoxRef = null;
this.dateRangeBoxRef = null;
this.ganttRef = React.createRef();
this.state = {
formatBoxValue: formats[0],
exportModeBoxValue: exportModes[0],
dateRangeBoxValue: dateRanges[1],
landscapeCheckBoxValue: true,
startTaskIndex: 0,
endTaskIndex: 3,
startDate: tasks[0].start,
endDate: tasks[0].end,
customRangeDisabled: true,
};
this.exportButtonOptions = {
icon: 'exportpdf',
hint: 'Export to PDF',
stylingMode: 'text',
onClick: this.exportButtonClick.bind(this),
};
const updateFn = (key) => (e) => this.setState({ [key]: e.value });
this.formatBoxSelectionChanged = updateFn('formatBoxValue');
this.exportModeBoxSelectionChanged = updateFn('exportModeBoxValue');
this.dateRangeBoxSelectionChanged = ({ value }) => {
this.setState({
dateRangeBoxValue: value,
customRangeDisabled: value !== 'Custom',
});
};
this.onLandscapeCheckBoxChanged = updateFn('landscapeCheckBoxValue');
this.startTaskIndexValueChanged = updateFn('startTaskIndex');
this.endTaskIndexValueChanged = updateFn('endTaskIndex');
this.startDateValueChanged = updateFn('startDate');
this.endDateValueChanged = updateFn('startDate');
}
render() {
return (
<React.Fragment>
<Gantt
ref={this.ganttRef}
taskListWidth={500}
scaleType="weeks"
height={700}
rootValue={-1}>
<Tasks dataSource={tasks} />
<Dependencies dataSource={dependencies} />
<Resources dataSource={resources} />
<ResourceAssignments dataSource={resourceAssignments} />
<Toolbar>
<Item name="undo" />
<Item name="redo" />
<Item name="separator" />
<Item name="zoomIn" />
<Item name="zoomOut" />
<Item name="separator" />
<Item widget="dxButton" options={this.exportButtonOptions} />
</Toolbar>
<Column dataField="title" caption="Subject" width={300} />
<Column dataField="start" caption="Start Date" />
<Column dataField="end" caption="End Date" />
<Editing enabled={true} />
</Gantt>
<div className="options">
<div className="column">
<div className="caption">Export Options</div>
<div className="option">
<div className="label">Document format:</div>
{' '}
<div className="value">
<SelectBox items={formats}
value={this.state.formatBoxValue}
inputAttr={documentFormatLabel}
onValueChanged={this.formatBoxSelectionChanged} />
</div>
</div>
<div className="option">
<div className="label">Landscape orientation:</div>
{' '}
<div className="value">
<CheckBox
value={this.state.landscapeCheckBoxValue}
onValueChanged={this.onLandscapeCheckBoxChanged} />
</div>
</div>
<div className="option">
<div className="label">Export mode:</div>
{' '}
<div className="value">
<SelectBox items={exportModes}
value={this.state.exportModeBoxValue}
inputAttr={exportModeLabel}
onValueChanged={this.exportModeBoxSelectionChanged} />
</div>
</div>
<div className="option">
<div className="label">Date range:</div>
{' '}
<div className="value">
<SelectBox items={dateRanges}
value={this.state.dateRangeBoxValue}
inputAttr={dateRangeLabel}
onValueChanged={this.dateRangeBoxSelectionChanged} />
</div>
</div>
</div>
{' '}
<div className="column">
<div className="caption">Task Filter Options</div>
<div className="option">
<div className="label">Start task (index):</div>
{' '}
<div className="value">
<NumberBox
value={this.state.startTaskIndex}
min={0}
max={this.state.endTaskIndex}
disabled={this.state.customRangeDisabled}
showSpinButtons={true}
inputAttr={startTaskIndexLabel}
onValueChanged={this.startTaskIndexValueChanged}
/>
</div>
</div>
<div className="option">
<div className="label">End task (index):</div>
{' '}
<div className="value">
<NumberBox
value={this.state.endTaskIndex}
min={this.state.startTaskIndex}
max={tasks.length - 1}
disabled={this.state.customRangeDisabled}
showSpinButtons={true}
inputAttr={endTaskIndexLabel}
onValueChanged={this.endTaskIndexValueChanged}
/>
</div>
</div>
<div className="option">
<div className="label">Start date:</div>
{' '}
<div className="value">
<DateBox
value={this.state.startDate}
max={this.state.endDate}
inputAttr={startDateLabel}
disabled={this.state.customRangeDisabled}
type="date"
onValueChanged={this.startDateValueChanged}
/>
</div>
</div>
<div className="option">
<div className="label">End date:</div>
{' '}
<div className="value">
<DateBox
value={this.state.endDate}
min={this.state.startDate}
inputAttr={endDateLabel}
disabled={this.state.customRangeDisabled}
type="date"
onValueChanged={this.endDateValueChanged}
/>
</div>
</div>
</div>
</div>
</React.Fragment>
);
}
exportButtonClick() {
const gantt = this.ganttRef.current.instance();
const format = this.state.formatBoxValue.toLowerCase();
const isLandscape = this.state.landscapeCheckBoxValue;
const exportMode: GanttPdfExportMode = this.state.exportModeBoxValue === 'Tree List' ? 'treeList' : this.state.exportModeBoxValue.toLowerCase() as GanttPdfExportMode;
const dataRangeMode = this.state.dateRangeBoxValue.toLowerCase();
let dataRange;
if (dataRangeMode === 'custom') {
dataRange = {
startIndex: this.state.startTaskIndex,
endIndex: this.state.endTaskIndex,
startDate: this.state.startDate,
endDate: this.state.endDate,
};
} else {
dataRange = dataRangeMode;
}
pdfExporter.exportGantt(
{
component: gantt,
// eslint-disable-next-line new-cap
createDocumentMethod: (args) => new jsPDF(args),
format,
landscape: isLandscape,
exportMode,
dateRange: dataRange,
},
).then((doc) => doc.save('gantt.pdf'));
}
}
export default App;
import React from 'react';
import { SelectBox } from 'devextreme-react/select-box';
import { CheckBox } from 'devextreme-react/check-box';
import { NumberBox } from 'devextreme-react/number-box';
import { DateBox } from 'devextreme-react/date-box';
import {
Gantt,
Tasks,
Dependencies,
Resources,
ResourceAssignments,
Column,
Editing,
Toolbar,
Item,
} from 'devextreme-react/gantt';
import pdfExporter from 'devextreme/pdf_exporter';
import { jsPDF } from 'jspdf';
import {
tasks,
dependencies,
resources,
resourceAssignments,
startDateLabel,
endDateLabel,
documentFormatLabel,
exportModeLabel,
dateRangeLabel,
} from './data.js';
import 'jspdf-autotable';
const formats = ['A0', 'A1', 'A2', 'A3', 'A4', 'Auto'];
const exportModes = ['All', 'Chart', 'Tree List'];
const dateRanges = ['All', 'Visible', 'Custom'];
const startTaskIndexLabel = { 'aria-label': 'Start Task Index' };
const endTaskIndexLabel = { 'aria-label': 'End Task Index' };
class App extends React.Component {
constructor(props) {
super(props);
this.formatBoxRef = null;
this.exportModeBoxRef = null;
this.dateRangeBoxRef = null;
this.ganttRef = React.createRef();
this.state = {
formatBoxValue: formats[0],
exportModeBoxValue: exportModes[0],
dateRangeBoxValue: dateRanges[1],
landscapeCheckBoxValue: true,
startTaskIndex: 0,
endTaskIndex: 3,
startDate: tasks[0].start,
endDate: tasks[0].end,
customRangeDisabled: true,
};
this.exportButtonOptions = {
icon: 'exportpdf',
hint: 'Export to PDF',
stylingMode: 'text',
onClick: this.exportButtonClick.bind(this),
};
const updateFn = (key) => (e) => this.setState({ [key]: e.value });
this.formatBoxSelectionChanged = updateFn('formatBoxValue');
this.exportModeBoxSelectionChanged = updateFn('exportModeBoxValue');
this.dateRangeBoxSelectionChanged = ({ value }) => {
this.setState({
dateRangeBoxValue: value,
customRangeDisabled: value !== 'Custom',
});
};
this.onLandscapeCheckBoxChanged = updateFn('landscapeCheckBoxValue');
this.startTaskIndexValueChanged = updateFn('startTaskIndex');
this.endTaskIndexValueChanged = updateFn('endTaskIndex');
this.startDateValueChanged = updateFn('startDate');
this.endDateValueChanged = updateFn('startDate');
}
render() {
return (
<React.Fragment>
<Gantt
ref={this.ganttRef}
taskListWidth={500}
scaleType="weeks"
height={700}
rootValue={-1}
>
<Tasks dataSource={tasks} />
<Dependencies dataSource={dependencies} />
<Resources dataSource={resources} />
<ResourceAssignments dataSource={resourceAssignments} />
<Toolbar>
<Item name="undo" />
<Item name="redo" />
<Item name="separator" />
<Item name="zoomIn" />
<Item name="zoomOut" />
<Item name="separator" />
<Item
widget="dxButton"
options={this.exportButtonOptions}
/>
</Toolbar>
<Column
dataField="title"
caption="Subject"
width={300}
/>
<Column
dataField="start"
caption="Start Date"
/>
<Column
dataField="end"
caption="End Date"
/>
<Editing enabled={true} />
</Gantt>
<div className="options">
<div className="column">
<div className="caption">Export Options</div>
<div className="option">
<div className="label">Document format:</div>{' '}
<div className="value">
<SelectBox
items={formats}
value={this.state.formatBoxValue}
inputAttr={documentFormatLabel}
onValueChanged={this.formatBoxSelectionChanged}
/>
</div>
</div>
<div className="option">
<div className="label">Landscape orientation:</div>{' '}
<div className="value">
<CheckBox
value={this.state.landscapeCheckBoxValue}
onValueChanged={this.onLandscapeCheckBoxChanged}
/>
</div>
</div>
<div className="option">
<div className="label">Export mode:</div>{' '}
<div className="value">
<SelectBox
items={exportModes}
value={this.state.exportModeBoxValue}
inputAttr={exportModeLabel}
onValueChanged={this.exportModeBoxSelectionChanged}
/>
</div>
</div>
<div className="option">
<div className="label">Date range:</div>{' '}
<div className="value">
<SelectBox
items={dateRanges}
value={this.state.dateRangeBoxValue}
inputAttr={dateRangeLabel}
onValueChanged={this.dateRangeBoxSelectionChanged}
/>
</div>
</div>
</div>{' '}
<div className="column">
<div className="caption">Task Filter Options</div>
<div className="option">
<div className="label">Start task (index):</div>{' '}
<div className="value">
<NumberBox
value={this.state.startTaskIndex}
min={0}
max={this.state.endTaskIndex}
disabled={this.state.customRangeDisabled}
showSpinButtons={true}
inputAttr={startTaskIndexLabel}
onValueChanged={this.startTaskIndexValueChanged}
/>
</div>
</div>
<div className="option">
<div className="label">End task (index):</div>{' '}
<div className="value">
<NumberBox
value={this.state.endTaskIndex}
min={this.state.startTaskIndex}
max={tasks.length - 1}
disabled={this.state.customRangeDisabled}
showSpinButtons={true}
inputAttr={endTaskIndexLabel}
onValueChanged={this.endTaskIndexValueChanged}
/>
</div>
</div>
<div className="option">
<div className="label">Start date:</div>{' '}
<div className="value">
<DateBox
value={this.state.startDate}
max={this.state.endDate}
inputAttr={startDateLabel}
disabled={this.state.customRangeDisabled}
type="date"
onValueChanged={this.startDateValueChanged}
/>
</div>
</div>
<div className="option">
<div className="label">End date:</div>{' '}
<div className="value">
<DateBox
value={this.state.endDate}
min={this.state.startDate}
inputAttr={endDateLabel}
disabled={this.state.customRangeDisabled}
type="date"
onValueChanged={this.endDateValueChanged}
/>
</div>
</div>
</div>
</div>
</React.Fragment>
);
}
exportButtonClick() {
const gantt = this.ganttRef.current.instance();
const format = this.state.formatBoxValue.toLowerCase();
const isLandscape = this.state.landscapeCheckBoxValue;
const exportMode = this.state.exportModeBoxValue === 'Tree List'
? 'treeList'
: this.state.exportModeBoxValue.toLowerCase();
const dataRangeMode = this.state.dateRangeBoxValue.toLowerCase();
let dataRange;
if (dataRangeMode === 'custom') {
dataRange = {
startIndex: this.state.startTaskIndex,
endIndex: this.state.endTaskIndex,
startDate: this.state.startDate,
endDate: this.state.endDate,
};
} else {
dataRange = dataRangeMode;
}
pdfExporter
.exportGantt({
component: gantt,
// eslint-disable-next-line new-cap
createDocumentMethod: (args) => new jsPDF(args),
format,
landscape: isLandscape,
exportMode,
dateRange: dataRange,
})
.then((doc) => doc.save('gantt.pdf'));
}
}
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
export const tasks = [{
id: 1,
parentId: -1,
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,
}];
export const dependencies = [{
id: 1,
predecessorId: 3,
successorId: 4,
type: 0,
}, {
id: 2,
predecessorId: 4,
successorId: 5,
type: 0,
}, {
id: 3,
predecessorId: 5,
successorId: 6,
type: 0,
}, {
id: 4,
predecessorId: 6,
successorId: 7,
type: 0,
}, {
id: 5,
predecessorId: 7,
successorId: 9,
type: 0,
}, {
id: 6,
predecessorId: 9,
successorId: 10,
type: 0,
}, {
id: 7,
predecessorId: 10,
successorId: 11,
type: 0,
}, {
id: 8,
predecessorId: 11,
successorId: 12,
type: 0,
}, {
id: 9,
predecessorId: 12,
successorId: 13,
type: 0,
}, {
id: 10,
predecessorId: 13,
successorId: 14,
type: 0,
}, {
id: 11,
predecessorId: 14,
successorId: 15,
type: 0,
}, {
id: 12,
predecessorId: 15,
successorId: 16,
type: 0,
}, {
id: 13,
predecessorId: 16,
successorId: 17,
type: 0,
}, {
id: 14,
predecessorId: 17,
successorId: 19,
type: 0,
}, {
id: 15,
predecessorId: 19,
successorId: 20,
type: 0,
}, {
id: 16,
predecessorId: 20,
successorId: 21,
type: 0,
}, {
id: 17,
predecessorId: 21,
successorId: 22,
type: 0,
}, {
id: 18,
predecessorId: 22,
successorId: 23,
type: 0,
}, {
id: 19,
predecessorId: 23,
successorId: 24,
type: 0,
}, {
id: 20,
predecessorId: 24,
successorId: 25,
type: 0,
}, {
id: 21,
predecessorId: 25,
successorId: 27,
type: 0,
}, {
id: 22,
predecessorId: 27,
successorId: 28,
type: 0,
}, {
id: 23,
predecessorId: 28,
successorId: 29,
type: 0,
}, {
id: 24,
predecessorId: 29,
successorId: 30,
type: 0,
}, {
id: 25,
predecessorId: 31,
successorId: 32,
type: 0,
}, {
id: 26,
predecessorId: 37,
successorId: 38,
type: 0,
}, {
id: 27,
predecessorId: 38,
successorId: 39,
type: 0,
}, {
id: 28,
predecessorId: 39,
successorId: 40,
type: 0,
}, {
id: 29,
predecessorId: 40,
successorId: 41,
type: 0,
}, {
id: 30,
predecessorId: 41,
successorId: 42,
type: 0,
}, {
id: 31,
predecessorId: 42,
successorId: 44,
type: 0,
}, {
id: 32,
predecessorId: 44,
successorId: 45,
type: 0,
}, {
id: 33,
predecessorId: 45,
successorId: 46,
type: 0,
}, {
id: 34,
predecessorId: 46,
successorId: 47,
type: 0,
}, {
id: 35,
predecessorId: 47,
successorId: 48,
type: 0,
}, {
id: 36,
predecessorId: 53,
successorId: 54,
type: 0,
}, {
id: 37,
predecessorId: 54,
successorId: 55,
type: 0,
}, {
id: 38,
predecessorId: 55,
successorId: 56,
type: 0,
}, {
id: 39,
predecessorId: 56,
successorId: 57,
type: 0,
}, {
id: 40,
predecessorId: 59,
successorId: 60,
type: 0,
}, {
id: 41,
predecessorId: 60,
successorId: 61,
type: 0,
}, {
id: 42,
predecessorId: 61,
successorId: 62,
type: 0,
}, {
id: 43,
predecessorId: 63,
successorId: 64,
type: 0,
}, {
id: 44,
predecessorId: 64,
successorId: 65,
type: 0,
}, {
id: 45,
predecessorId: 65,
successorId: 66,
type: 0,
}, {
id: 46,
predecessorId: 66,
successorId: 67,
type: 0,
}, {
id: 47,
predecessorId: 69,
successorId: 70,
type: 0,
}, {
id: 48,
predecessorId: 70,
successorId: 71,
type: 0,
}, {
id: 49,
predecessorId: 71,
successorId: 72,
type: 0,
}, {
id: 50,
predecessorId: 72,
successorId: 73,
type: 0,
}, {
id: 51,
predecessorId: 73,
successorId: 74,
type: 0,
}, {
id: 52,
predecessorId: 74,
successorId: 76,
type: 0,
}, {
id: 53,
predecessorId: 76,
successorId: 77,
type: 0,
}, {
id: 54,
predecessorId: 77,
successorId: 78,
type: 0,
}, {
id: 55,
predecessorId: 78,
successorId: 79,
type: 0,
}, {
id: 56,
predecessorId: 79,
successorId: 80,
type: 0,
}, {
id: 57,
predecessorId: 80,
successorId: 81,
type: 0,
}, {
id: 58,
predecessorId: 81,
successorId: 83,
type: 0,
}, {
id: 59,
predecessorId: 83,
successorId: 84,
type: 0,
}, {
id: 60,
predecessorId: 84,
successorId: 85,
type: 0,
}, {
id: 61,
predecessorId: 85,
successorId: 86,
type: 0,
}, {
id: 62,
predecessorId: 86,
successorId: 87,
type: 0,
}];
export const resources = [{
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',
}];
export const resourceAssignments = [{
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,
}];
export const startDateLabel = { 'aria-label': 'Start Date' };
export const endDateLabel = { 'aria-label': 'End Date' };
export const documentFormatLabel = { 'aria-label': 'Document Format' };
export const exportModeLabel = { 'aria-label': 'Export Mode' };
export const dateRangeLabel = { 'aria-label': 'Date Range' };
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'openai': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
'bundles:': '../../../../bundles/',
'externals:': '../../../../bundles/externals/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types/prop-types.js',
'fflate': 'npm:fflate/esm/browser.js',
'jspdf': 'npm:jspdf@2.5.2/dist/jspdf.umd.min.js',
'jspdf-autotable': 'npm:jspdf-autotable@3.8.3/dist/jspdf.plugin.autotable.min.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign',
'devextreme': 'npm:devextreme@link:../../packages/devextreme/artifacts/npm/devextreme/cjs',
'devextreme-react': 'npm:devextreme-react@link:../../packages/devextreme-react/npm/cjs',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.54/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.12/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
export const tasks = [
{
id: 1,
parentId: -1,
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,
},
];
export const dependencies = [
{
id: 1,
predecessorId: 3,
successorId: 4,
type: 0,
},
{
id: 2,
predecessorId: 4,
successorId: 5,
type: 0,
},
{
id: 3,
predecessorId: 5,
successorId: 6,
type: 0,
},
{
id: 4,
predecessorId: 6,
successorId: 7,
type: 0,
},
{
id: 5,
predecessorId: 7,
successorId: 9,
type: 0,
},
{
id: 6,
predecessorId: 9,
successorId: 10,
type: 0,
},
{
id: 7,
predecessorId: 10,
successorId: 11,
type: 0,
},
{
id: 8,
predecessorId: 11,
successorId: 12,
type: 0,
},
{
id: 9,
predecessorId: 12,
successorId: 13,
type: 0,
},
{
id: 10,
predecessorId: 13,
successorId: 14,
type: 0,
},
{
id: 11,
predecessorId: 14,
successorId: 15,
type: 0,
},
{
id: 12,
predecessorId: 15,
successorId: 16,
type: 0,
},
{
id: 13,
predecessorId: 16,
successorId: 17,
type: 0,
},
{
id: 14,
predecessorId: 17,
successorId: 19,
type: 0,
},
{
id: 15,
predecessorId: 19,
successorId: 20,
type: 0,
},
{
id: 16,
predecessorId: 20,
successorId: 21,
type: 0,
},
{
id: 17,
predecessorId: 21,
successorId: 22,
type: 0,
},
{
id: 18,
predecessorId: 22,
successorId: 23,
type: 0,
},
{
id: 19,
predecessorId: 23,
successorId: 24,
type: 0,
},
{
id: 20,
predecessorId: 24,
successorId: 25,
type: 0,
},
{
id: 21,
predecessorId: 25,
successorId: 27,
type: 0,
},
{
id: 22,
predecessorId: 27,
successorId: 28,
type: 0,
},
{
id: 23,
predecessorId: 28,
successorId: 29,
type: 0,
},
{
id: 24,
predecessorId: 29,
successorId: 30,
type: 0,
},
{
id: 25,
predecessorId: 31,
successorId: 32,
type: 0,
},
{
id: 26,
predecessorId: 37,
successorId: 38,
type: 0,
},
{
id: 27,
predecessorId: 38,
successorId: 39,
type: 0,
},
{
id: 28,
predecessorId: 39,
successorId: 40,
type: 0,
},
{
id: 29,
predecessorId: 40,
successorId: 41,
type: 0,
},
{
id: 30,
predecessorId: 41,
successorId: 42,
type: 0,
},
{
id: 31,
predecessorId: 42,
successorId: 44,
type: 0,
},
{
id: 32,
predecessorId: 44,
successorId: 45,
type: 0,
},
{
id: 33,
predecessorId: 45,
successorId: 46,
type: 0,
},
{
id: 34,
predecessorId: 46,
successorId: 47,
type: 0,
},
{
id: 35,
predecessorId: 47,
successorId: 48,
type: 0,
},
{
id: 36,
predecessorId: 53,
successorId: 54,
type: 0,
},
{
id: 37,
predecessorId: 54,
successorId: 55,
type: 0,
},
{
id: 38,
predecessorId: 55,
successorId: 56,
type: 0,
},
{
id: 39,
predecessorId: 56,
successorId: 57,
type: 0,
},
{
id: 40,
predecessorId: 59,
successorId: 60,
type: 0,
},
{
id: 41,
predecessorId: 60,
successorId: 61,
type: 0,
},
{
id: 42,
predecessorId: 61,
successorId: 62,
type: 0,
},
{
id: 43,
predecessorId: 63,
successorId: 64,
type: 0,
},
{
id: 44,
predecessorId: 64,
successorId: 65,
type: 0,
},
{
id: 45,
predecessorId: 65,
successorId: 66,
type: 0,
},
{
id: 46,
predecessorId: 66,
successorId: 67,
type: 0,
},
{
id: 47,
predecessorId: 69,
successorId: 70,
type: 0,
},
{
id: 48,
predecessorId: 70,
successorId: 71,
type: 0,
},
{
id: 49,
predecessorId: 71,
successorId: 72,
type: 0,
},
{
id: 50,
predecessorId: 72,
successorId: 73,
type: 0,
},
{
id: 51,
predecessorId: 73,
successorId: 74,
type: 0,
},
{
id: 52,
predecessorId: 74,
successorId: 76,
type: 0,
},
{
id: 53,
predecessorId: 76,
successorId: 77,
type: 0,
},
{
id: 54,
predecessorId: 77,
successorId: 78,
type: 0,
},
{
id: 55,
predecessorId: 78,
successorId: 79,
type: 0,
},
{
id: 56,
predecessorId: 79,
successorId: 80,
type: 0,
},
{
id: 57,
predecessorId: 80,
successorId: 81,
type: 0,
},
{
id: 58,
predecessorId: 81,
successorId: 83,
type: 0,
},
{
id: 59,
predecessorId: 83,
successorId: 84,
type: 0,
},
{
id: 60,
predecessorId: 84,
successorId: 85,
type: 0,
},
{
id: 61,
predecessorId: 85,
successorId: 86,
type: 0,
},
{
id: 62,
predecessorId: 86,
successorId: 87,
type: 0,
},
];
export const resources = [
{
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',
},
];
export const resourceAssignments = [
{
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,
},
];
export const startDateLabel = { 'aria-label': 'Start Date' };
export const endDateLabel = { 'aria-label': 'End Date' };
export const documentFormatLabel = { 'aria-label': 'Document Format' };
export const exportModeLabel = { 'aria-label': 'Export Mode' };
export const dateRangeLabel = { 'aria-label': 'Date Range' };
<!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/24.2.3/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/24.2.3/css/dx-gantt.min.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import("./index.tsx");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
#gantt {
height: 700px;
}
.options {
background-color: rgba(191, 191, 191, 0.15);
margin-top: 20px;
display: flex;
}
.column {
width: 40%;
display: flex;
flex-direction: column;
margin: 15px 3%;
text-align: left;
}
.option {
padding: 5px 0;
display: flex;
align-items: center;
}
.label,
.value {
display: inline-block;
vertical-align: middle;
}
.label {
width: 180px;
}
.value {
width: 30%;
}
.caption {
font-size: 18px;
font-weight: 500;
}
This demo allows you to apply the following built-in export and task filter options:
Export Options
Document format - Specifies document size.
Landscape orientation – Renders the PDF horizontally.
Export mode - Specifies Gantt regions to include within the exported document (chart area, tree list area, or the entire component).
Task Filter Options
Date range - Restricts data output against a specified date range.
Start task (index) – Restricts data output against the start task's index within an index range.
End task (index) – Restricts data output against the end task's index within an index range.
Start date (task)- Restricts data output by start date.
End date (task) – Restricts data output by end date.
Click the “Export” toolbar item to call the exportGantt(options) method (exports Gantt data with specified export options).
To enable PDF export operations, you must reference or import the following:
-
jsPDF
A library that creates and manages PDF documents. -
jsPDF-AutoTable
A plugin that creates and manages tables in PDF documents.