Our state of the art Gantt chart


Post by mhallnpi »

New Bryntum user here, so apologies in advance if I'm churning over old ground.

My Gantt chart loads tasks, dependencies and assignments data into respective local state value on page load (i.e. useEffect({}, [])). I've added an Assigned Resources column, but the data from my DB call doesn't render upon page load, but only after an edit to the gantt chart, any edit.

2022-08-11_13-22.png
2022-08-11_13-22.png (47.69 KiB) Viewed 311 times

My ganttConfig and projectConfig are as follows:

const ganttConfig: Partial<GanttConfig> = {
  columns: [
    {
      type: 'name',
      field: 'name',
      width: 250
    },
    {
      type: 'resourceassignment',
      itemTpl: (assignment: any) => assignment.resourceName,
      editor: {
        chipView: {
          itemTpl: (assignment: any) => assignment.resourceName
        }
      }
    }
  ],
  viewPreset: 'weekAndDayLetter',
  barMargin: 10,
  height: 600
};

const projectConfig: Partial<ProjectModelConfig> = {
  calendar: 'general',
  // startDate: DateHelper.add(DateHelper.clearTime(new Date()), 0, 'day'),
  hoursPerDay: 24,
  daysPerWeek: 5,
  daysPerMonth: 20,
  autoSync: false
};

The project model and gantt components are called as follows:

<BryntumProjectModel
        ref={projectRef}
        {...projectConfig}
        tasks={tasks}
        dependencies={dependencies}
        resources={resources}
        assignments={assignments}
      />
      
<BryntumGantt ref={ganttRef} project={projectRef} {...ganttConfig} onDataChange={syncData} />

Any suggestions as to what I can do to render the data in the Resource Assignments column upon page load?


Post by mats »

Hard to say without being able to run it. Could you please upload a minimal test case then we'll be able to quickly see what's wrong.


Post by mhallnpi »

Hi Mats, I have resolved the problem by using TaskStore to load tasks into BryntumProjectModel vs. using the 'task' parameter.

<BryntumProjectModel
        ref={projectRef}
        {...projectConfig}
        // tasks={tasks}
        taskStore={taskStore}
        dependencies={dependencies}
        resources={resources}
        assignments={assignments}
      />

This, unfortunately, has caused another error. When I navigate away from the page, then return, I'm getting the following error message when trying to add data to the TaskStore. Should I open up another ticket for this? If not, here are the essentials:

Uncaught (in promise) TypeError: taskStore.add is not a function

Here's the Gantt component:

import { FC, useEffect, useRef, useState } from 'react';
import { BryntumGantt, BryntumFullscreenButton, BryntumProjectModel } from '@bryntum/gantt-react';
import { TaskStore } from '@bryntum/gantt';
import { GanttChartChange } from '../../types/global';
import {
	deleteProjectAssignment,
	deleteProjectDependency,
	deleteProjectTask,
	fetchProject,
	upsertProjectAssignment,
	upsertProjectDependency,
	upsertProjectTask
} from '../../api/project';
import { ganttConfig, projectConfig } from '../../GanttConfig';
import { Col, Row, Skeleton } from 'antd';

const taskStore = new TaskStore({
	transformFlatData: true,
	autoCommit: true,
	autoLoad: true,
	syncDataOnLoad: true
});

const DealsGanttChart: FC = () => {
	const ganttRef = useRef<BryntumGantt>(null);
	const projectRef = useRef<BryntumProjectModel>(null);
	const [dependencies, setDependencies] = useState<any[]>([]);
	const [assignments, setAssignments] = useState<any[]>([]);
	const [resources, setResources] = useState<any[]>([]);
	const [hasLoaded, setHasLoaded] = useState(false);
	const [loading, setLoading] = useState(false);

useEffect(() => {
	setLoading(true);
	fetchProject(1)
		.then((project: any) => {
			taskStore.add(project.tasks);
			setDependencies(project.dependencies);
			setResources(project.resources);
			setAssignments(project.assignments);
		})
		.finally(() => {
			setHasLoaded(true);
			setLoading(false);
		});
	}, []);

const syncData = async ({ store, action, record, records, changes }: any) => {
	if (!hasLoaded) return;
	// sync stuff
};

return (
	<>
		<BryntumProjectModel
			ref={projectRef}
			{...projectConfig}
			// tasks={tasks}
			taskStore={taskStore}
			dependencies={dependencies}
			resources={resources}
			assignments={assignments}
		/>

		<Row justify="space-between" align={'middle'}>
			<Col>&nbsp;</Col>
			<Col>
				<BryntumFullscreenButton />
			</Col>
		</Row>
		<Skeleton loading={loading} active>
			<BryntumGantt
				ref={ganttRef}
				project={projectRef}
				{...ganttConfig}
				onDataChange={syncData}
			/>
		</Skeleton>
	</>
);
};

export default DealsGanttChart;

Post by mats »

Hard to say, we'll need a runnable test case to look into this. Most likely it's a simple mistake somewhere but hard to say without runnable code.


Post Reply