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, { 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;
import 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;
import React from 'react';
export default function TaskProgressTooltipContentTemplate({ progress }) {
return (
<div className="custom-task-edit-tooltip">
<div className="custom-tooltip-title">{progress}%</div>
</div>
);
}
import 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>
);
}
import 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>
);
}
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: 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' };
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',
'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';
export default function TaskProgressTooltipContentTemplate({ progress }) {
return (
<div className="custom-task-edit-tooltip">
<div className="custom-tooltip-title">{progress}%</div>
</div>
);
}
import 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>
);
}
import 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>
);
}
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: 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' };
<!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 {
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;
}