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
x
import React, { useState } from 'react';import Gantt, { Tasks, Dependencies, Resources, ResourceAssignments, Column, Editing, IGanttOptions,} from 'devextreme-react/gantt';import CheckBox, { ICheckBoxOptions } from 'devextreme-react/check-box';import SelectBox, { ISelectBoxOptions } from 'devextreme-react/select-box';import DateBox, { IDateBoxOptions } from 'devextreme-react/date-box';import { tasks, dependencies, resources, resourceAssignments, startDateLabel, endDateLabel,} from './data.ts';import TaskTooltipTemplate from './TaskTooltipTemplate.tsx';import TaskProgressTooltipContentTemplate from './TaskProgressTooltipContentTemplate.tsx';import TaskTimeTooltipContentTemplate from './TaskTimeTooltipContentTemplate.tsx';const scaleTypes = ['auto', 'minutes', 'hours', 'days', 'weeks', 'months', 'quarters', 'years'];const titlePositions = ['inside', 'outside', 'none'];export const scaleTypeLabel = { 'aria-label': 'Scale Type' };export const titlePositionLabel = { 'aria-label': 'Title Position' };const taskTitlePosition: IGanttOptions['taskTitlePosition'] = 'outside';const scaleType: IGanttOptions['scaleType'] = 'months';const initialGanttConfig = { scaleType, taskTitlePosition, showResources: true, showDependencies: true, showCustomTaskTooltip: true, startDateRange: new Date(2018, 11, 1), endDateRange: new Date(2019, 11, 1),};function App() { const [ganttConfig, setGanttConfig] = useState(initialGanttConfig); const updateGanttConfig = (value: Partial<typeof initialGanttConfig>) => setGanttConfig({ ganttConfig, value, }); const onScaleTypeChanged: ISelectBoxOptions['onValueChanged'] = ({ value }) => updateGanttConfig({ scaleType: value }); const onTaskTitlePositionChanged: ISelectBoxOptions['onValueChanged'] = ({ value }) => updateGanttConfig({ taskTitlePosition: value }); const onShowResourcesChanged: ICheckBoxOptions['onValueChanged'] = ({ value }) => updateGanttConfig({ showResources: value }); const onShowDependenciesChanged: ICheckBoxOptions['onValueChanged'] = ({ value }) => updateGanttConfig({ showDependencies: value }); const onShowCustomTaskTooltip: ICheckBoxOptions['onValueChanged'] = ({ value }) => updateGanttConfig({ showCustomTaskTooltip: value }); const onStartDateValueChanged: IDateBoxOptions['onValueChanged'] = ({ value }) => updateGanttConfig({ startDateRange: value }); const onEndDateValueChanged: IDateBoxOptions['onValueChanged'] = ({ value }) => updateGanttConfig({ endDateRange: value }); return ( <div id="form-demo"> <div className="options"> <div className="caption">Options</div> <div className="column"> <div className="option"> <div className="label">Scale Type:</div> {' '} <div className="value"> <SelectBox items={scaleTypes} inputAttr={scaleTypeLabel} value={ganttConfig.scaleType} onValueChanged={onScaleTypeChanged} /> </div> </div> <div className="option"> <div className="label">Title Position:</div> {' '} <div className="value"> <SelectBox items={titlePositions} inputAttr={titlePositionLabel} value={ganttConfig.taskTitlePosition} onValueChanged={onTaskTitlePositionChanged} /> </div> </div> <div className="option"> <div className="label">Show Resources:</div> {' '} <div className="value"> <CheckBox value={ganttConfig.showResources} onValueChanged={onShowResourcesChanged} /> </div> </div> <div className="option"> <div className="label">Show Dependencies:</div> {' '} <div className="value"> <CheckBox value={ganttConfig.showDependencies} onValueChanged={onShowDependenciesChanged} /> </div> </div> </div> {' '} <div className="column"> <div className="option"> <div className="label">Start Date Range:</div> {' '} <div className="value"> <DateBox inputAttr={startDateLabel} value={ganttConfig.startDateRange} type="date" onValueChanged={onStartDateValueChanged} /> </div> </div> <div className="option"> <div className="label">End Date Range:</div> {' '} <div className="value"> <DateBox inputAttr={endDateLabel} value={ganttConfig.endDateRange} type="date" onValueChanged={onEndDateValueChanged} /> </div> </div> <div className="option"> <div className="label">Customize Task Tooltip:</div> {' '} <div className="value"> <CheckBox value={ganttConfig.showCustomTaskTooltip} onValueChanged={onShowCustomTaskTooltip} /> </div> </div> </div> </div> <div className="widget-container"> <Gantt taskListWidth={500} height={700} taskTitlePosition={ganttConfig.taskTitlePosition} scaleType={ganttConfig.scaleType} showResources={ganttConfig.showResources} showDependencies={ganttConfig.showDependencies} taskTooltipContentRender = {ganttConfig.showCustomTaskTooltip ? TaskTooltipTemplate : undefined} taskTimeTooltipContentRender = {ganttConfig.showCustomTaskTooltip ? TaskTimeTooltipContentTemplate : undefined} taskProgressTooltipContentRender = {ganttConfig.showCustomTaskTooltip ? TaskProgressTooltipContentTemplate : undefined} startDateRange = {ganttConfig.startDateRange} endDateRange = {ganttConfig.endDateRange}> <Tasks dataSource={tasks} /> <Dependencies dataSource={dependencies} /> <Resources dataSource={resources} /> <ResourceAssignments dataSource={resourceAssignments} /> <Column dataField="title" caption="Subject" width={300} /> <Column dataField="start" caption="Start Date" /> <Column dataField="end" caption="End Date" /> <Editing enabled /> </Gantt> </div> </div> );}export default App;xxxxxxxxxximport React, { useState } from 'react';import Gantt, { Tasks, Dependencies, Resources, ResourceAssignments, Column, Editing,} from 'devextreme-react/gantt';import CheckBox from 'devextreme-react/check-box';import SelectBox from 'devextreme-react/select-box';import DateBox from 'devextreme-react/date-box';import { tasks, dependencies, resources, resourceAssignments, startDateLabel, endDateLabel,} from './data.js';import TaskTooltipTemplate from './TaskTooltipTemplate.js';import TaskProgressTooltipContentTemplate from './TaskProgressTooltipContentTemplate.js';import TaskTimeTooltipContentTemplate from './TaskTimeTooltipContentTemplate.js';const scaleTypes = ['auto', 'minutes', 'hours', 'days', 'weeks', 'months', 'quarters', 'years'];const titlePositions = ['inside', 'outside', 'none'];export const scaleTypeLabel = { 'aria-label': 'Scale Type' };export const titlePositionLabel = { 'aria-label': 'Title Position' };const taskTitlePosition = 'outside';const scaleType = 'months';const initialGanttConfig = { scaleType, taskTitlePosition, showResources: true, showDependencies: true, showCustomTaskTooltip: true, startDateRange: new Date(2018, 11, 1), endDateRange: new Date(2019, 11, 1),};function App() { const [ganttConfig, setGanttConfig] = useState(initialGanttConfig); const updateGanttConfig = (value) => setGanttConfig({ ganttConfig, value, }); const onScaleTypeChanged = ({ value }) => updateGanttConfig({ scaleType: value }); const onTaskTitlePositionChanged = ({ value }) => updateGanttConfig({ taskTitlePosition: value }); const onShowResourcesChanged = ({ value }) => updateGanttConfig({ showResources: value }); const onShowDependenciesChanged = ({ value }) => updateGanttConfig({ showDependencies: value }); const onShowCustomTaskTooltip = ({ value }) => updateGanttConfig({ showCustomTaskTooltip: value }); const onStartDateValueChanged = ({ value }) => updateGanttConfig({ startDateRange: value }); const onEndDateValueChanged = ({ value }) => updateGanttConfig({ endDateRange: value }); return ( <div id="form-demo"> <div className="options"> <div className="caption">Options</div> <div className="column"> <div className="option"> <div className="label">Scale Type:</div>{' '} <div className="value"> <SelectBox items={scaleTypes} inputAttr={scaleTypeLabel} value={ganttConfig.scaleType} onValueChanged={onScaleTypeChanged} /> </div> </div> <div className="option"> <div className="label">Title Position:</div>{' '} <div className="value"> <SelectBox items={titlePositions} inputAttr={titlePositionLabel} value={ganttConfig.taskTitlePosition} onValueChanged={onTaskTitlePositionChanged} /> </div> </div> <div className="option"> <div className="label">Show Resources:</div>{' '} <div className="value"> <CheckBox value={ganttConfig.showResources} onValueChanged={onShowResourcesChanged} /> </div> </div> <div className="option"> <div className="label">Show Dependencies:</div>{' '} <div className="value"> <CheckBox value={ganttConfig.showDependencies} onValueChanged={onShowDependenciesChanged} /> </div> </div> </div>{' '} <div className="column"> <div className="option"> <div className="label">Start Date Range:</div>{' '} <div className="value"> <DateBox inputAttr={startDateLabel} value={ganttConfig.startDateRange} type="date" onValueChanged={onStartDateValueChanged} /> </div> </div> <div className="option"> <div className="label">End Date Range:</div>{' '} <div className="value"> <DateBox inputAttr={endDateLabel} value={ganttConfig.endDateRange} type="date" onValueChanged={onEndDateValueChanged} /> </div> </div> <div className="option"> <div className="label">Customize Task Tooltip:</div>{' '} <div className="value"> <CheckBox value={ganttConfig.showCustomTaskTooltip} onValueChanged={onShowCustomTaskTooltip} /> </div> </div> </div> </div> <div className="widget-container"> <Gantt taskListWidth={500} height={700} taskTitlePosition={ganttConfig.taskTitlePosition} scaleType={ganttConfig.scaleType} showResources={ganttConfig.showResources} showDependencies={ganttConfig.showDependencies} taskTooltipContentRender={ ganttConfig.showCustomTaskTooltip ? TaskTooltipTemplate : undefined } taskTimeTooltipContentRender={ ganttConfig.showCustomTaskTooltip ? TaskTimeTooltipContentTemplate : undefined } taskProgressTooltipContentRender={ ganttConfig.showCustomTaskTooltip ? TaskProgressTooltipContentTemplate : undefined } startDateRange={ganttConfig.startDateRange} endDateRange={ganttConfig.endDateRange} > <Tasks dataSource={tasks} /> <Dependencies dataSource={dependencies} /> <Resources dataSource={resources} /> <ResourceAssignments dataSource={resourceAssignments} /> <Column dataField="title" caption="Subject" width={300} /> <Column dataField="start" caption="Start Date" /> <Column dataField="end" caption="End Date" /> <Editing enabled /> </Gantt> </div> </div> );}export default App;xxxxxxxxxximport React from 'react';export default function TaskProgressTooltipContentTemplate({ progress }) { return ( <div className="custom-task-edit-tooltip"> <div className="custom-tooltip-title">{progress}%</div> </div> );}xxxxxxxxxximport React from 'react';function getTime(date: { toLocaleString: () => string; }) { return date.toLocaleString();}export default function TaskTimeTooltipContentTemplate(task: { start: Date; end: Date; }) { return ( <div className="custom-task-edit-tooltip"> <div className="custom-tooltip-title">Start: {getTime(task.start)}</div> <div className="custom-tooltip-title">End: {getTime(task.end)}</div> </div> );}xxxxxxxxxximport React from 'react';function getTimeEstimate({ start, end }) { return Math.abs(start - end) / 36e5;}function getTimeLeft({ start, end, progress }) { const timeEstimate = Math.abs(start - end) / 36e5; return Math.floor(((100 - progress) / 100) * timeEstimate);}export default function TaskTooltipTemplate(task: { title?: any; start: number; end: number; progress: number; }) { return ( <div className="custom-task-edit-tooltip"> <div className="custom-tooltip-title">{task.title}</div> <div className="custom-tooltip-row"><span> Estimate: </span>{getTimeEstimate(task)}<span> hours </span></div> <div className="custom-tooltip-row"><span> Left: </span>{getTimeLeft(task)}<span> hours </span></div> </div> );}xxxxxxxxxximport React from 'react';import ReactDOM from 'react-dom';import App from './App.tsx';ReactDOM.render( <App />, document.getElementById('app'),);xxxxxxxxxxexport const tasks = [{ 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,}];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' };xxxxxxxxxxwindow.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', '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@24.2.6/cjs', 'devextreme-react': 'npm:devextreme-react@24.2.6/cjs', 'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.2.15/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.60/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/common/core/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);xxxxxxxxxximport React from 'react';export default function TaskProgressTooltipContentTemplate({ progress }) { return ( <div className="custom-task-edit-tooltip"> <div className="custom-tooltip-title">{progress}%</div> </div> );}xxxxxxxxxximport React from 'react';function getTime(date) { return date.toLocaleString();}export default function TaskTimeTooltipContentTemplate(task) { return ( <div className="custom-task-edit-tooltip"> <div className="custom-tooltip-title">Start: {getTime(task.start)}</div> <div className="custom-tooltip-title">End: {getTime(task.end)}</div> </div> );}xxxxxxxxxximport React from 'react';function getTimeEstimate({ start, end }) { return Math.abs(start - end) / 36e5;}function getTimeLeft({ start, end, progress }) { const timeEstimate = Math.abs(start - end) / 36e5; return Math.floor(((100 - progress) / 100) * timeEstimate);}export default function TaskTooltipTemplate(task) { return ( <div className="custom-task-edit-tooltip"> <div className="custom-tooltip-title">{task.title}</div> <div className="custom-tooltip-row"> <span> Estimate: </span> {getTimeEstimate(task)} <span> hours </span> </div> <div className="custom-tooltip-row"> <span> Left: </span> {getTimeLeft(task)} <span> hours </span> </div> </div> );}xxxxxxxxxximport React from 'react';import ReactDOM from 'react-dom';import App from './App.js';ReactDOM.render(<App />, document.getElementById('app'));xxxxxxxxxxexport const tasks = [ { 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, },];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' };xxxxxxxxxx<html lang="en"> <head></head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body></html>xxxxxxxxxx#gantt { height: 700px;}.options { margin-bottom: 20px; background-color: rgba(191, 191, 191, 0.15);}.caption { font-size: 18px; font-weight: 500;}.column { width: 40%; display: inline-block; margin: 15px 3%; text-align: left; vertical-align: top;}.option { padding: 5px 0;}.label,.value { display: inline-block; vertical-align: middle;}.label { width: 180px;}.value { width: 45%;}.custom-task-edit-tooltip { background-color: white; color: black; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); padding: 10px 12px 12px 12px; border-radius: 3px;}.custom-task-edit-tooltip::before { border-top-color: white; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}.custom-task-edit-tooltip::after { border-bottom-color: white;}.custom-tooltip-title { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 13px; font-weight: 600; padding-bottom: 6px;}.custom-tooltip-row { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 12px; font-weight: 600;}