In this article, we learn how to implement DlhSoft Gantt Chart in our React js project.
Add the necessary DlhSoft.* script references to the head section(s) of HTML page(s) in your JavaScript-based application:
<head> <script src="DlhSoft.ProjectData.GanttChart.HTML.Controls.js" type="text/javascript"></script> <script src="DlhSoft.Data.HTML.Controls.js" type="text/javascript"></script> <script src="DlhSoft.ProjectData.GanttChart.HTML.Controls.Extras.js" type="text/javascript"></script> </head>
Then take reference for the Gantt chart view and also take dlhsoft from the window.
const ganttChartViewRef = useRef(null); var DlhSoft = window.DlhSoft;
Now add data items for the plot chart.
var items = [
{ content: 'Task 1', isExpanded: false },
{ content: 'Task 1.1', indentation: 1, start: new Date(year, month, 2, 8, 0, 0), finish: new Date(year, month, 4, 16, 0, 0) },
{ content: 'Task 1.2', indentation: 1, start: new Date(year, month, 3, 8, 0, 0), finish: new Date(year, month, 5, 12, 0, 0) },
{ content: 'Task 2', isExpanded: true },
{ content: 'Task 2.1', indentation: 1, start: new Date(year, month, 2, 8, 0, 0), finish: new Date(year, month, 8, 16, 0, 0), completedFinish: new Date(year, month, 5, 16, 0, 0), assignmentsContent: 'Resource 1, Resource 2 [50%]' },
{ content: 'Task 2.2', indentation: 1 },
{ content: 'Task 2.2.1', indentation: 2, start: new Date(year, month, 11, 8, 0, 0), finish: new Date(year, month, 14, 16, 0, 0), completedFinish: new Date(year, month, 14, 16, 0, 0), assignmentsContent: 'Resource 2' },
{ content: 'Task 2.2.2', indentation: 2, start: new Date(year, month, 12, 12, 0, 0), finish: new Date(year, month, 14, 16, 0, 0), assignmentsContent: 'Resource 2' },
{ content: 'Task 3', indentation: 1, start: new Date(year, month, 15, 16, 0, 0), isMilestone: true }
];
items[3].predecessors = [{ item: items[0], dependencyType: 'SS' }];
items[7].predecessors = [{ item: items[6], lag: 2 * 60 * 60 * 1000 }];
items[8].predecessors = [{ item: items[4] }, { item: items[5] }];
for (var i = 4; i <= 16; i++)
items.push({ content: 'Task ' + i, indentation: i >= 8 && i % 3 == 2 ? 0 : 1, start: new Date(year, month, 2 + (i <= 8 ? (i - 4) * 3 : i - 8), 8, 0, 0), finish: new Date(year, month, 2 + (i <= 8 ? (i - 4) * 3 + (i > 8 ? 6 : 1) : i - 2), 16, 0, 0) });
items[9].finish.setDate(items[9].finish.getDate() + 2);
items[9].assignmentsContent = 'Resource 1';
items[10].predecessors = [{ item: items[9] }];
Then create a setting object and set the current time in that.
Now add scales into the settings. Scale is used to show the timing/ days in the chart header in the plotted bars.
And also set the header height for the chart header in the settings.
var settings = { currentTime: new Date(2012, 8, 2, 12, 0, 0) };
settings.scales = [
{ scaleType: 'NonworkingTime', isHeaderVisible: false, isHighlightingVisible: true, highlightingStyle: 'stroke-width: 0; fill: #f8f8f8; fill-opacity: 0.65' },
{ scaleType: 'Months', headerTextFormat: 'Month', headerStyle: 'padding: 2.25px; border-right: solid 1px White; border-bottom: solid 1px White', isSeparatorVisible: true, separatorStyle: 'stroke: #c8bfe7; stroke-width: 0.5px' },
{ scaleType: 'Weeks', headerTextFormat: 'Date', headerStyle: 'padding: 2.25px; border-right: solid 1px White; border-bottom: solid 1px White', isSeparatorVisible: true, separatorStyle: 'stroke: #c8bfe7; stroke-width: 0.5px' },
{ scaleType: 'Days', headerTextFormat: 'Day', headerStyle: 'padding: 2.25px; border-right: solid 1px White' }, { scaleType: 'CurrentTime', isHeaderVisible: false, isSeparatorVisible: true, separatorStyle: 'stroke: Red; stroke-width: 0.5px' }
];
settings.headerHeight = 21 * 3;
Then add initialized Gantt chart theme from the themes file which was given in the vanilajs folder and pass the settings and themes into it.
import { initializeGanttChartTheme } from '../vanilajs/themes';
initializeGanttChartTheme(settings, theme);
Now take the onItemchanged event the get which bar or item will change.
function onItemChanged(item, propertyName, isDirect, isFinal) {
if (!isDirect || !isFinal)
return;
console.log(propertyName + " changed for " + item.content + ".");
}
This chart needs the theme for the designing of full chart items and bars. So, pass the theme props in the GanttChartview tag.
var theme = "DlhSoft-gray";
Now need to import GanttChartview from the DlhSoft.ProjectData.GanttChart.React.Components JavaScript file.
And pass the items, settings, theme, and ref as props. Also, we can add className, and change as props in the GanttChartview.
<GanttChartView className="gantt" ref={ganttChartViewRef} items={items} settings={settings} change={onItemChanged} theme={theme} />
Output:-
