Our state of the art Gantt chart


Post by Gantt_user »

I've downloaded the trial version of Gantt with the react wrapper.

These 2 packages are included in my package.json file.

"@bryntum/gantt": "npm:@bryntum/gantt-trial@4.1.2",
"@bryntum/gantt-react": "4.1.2",

I copied some data from the big data set example that was included in the bundled zip trial folder. The Gantt chart renders fine but I get a bunch of typing errors..

The typings file is the Bryntum Gantt 4.1.2 (TRIAL VERSION)

Below is an example of the tasksData array value that I used to pass to the ProjectModel. It complains about a bunch of properties in the child object not existing in the Model.

{
					"id": 12,
					"name": "Parent 12",
					"startDate": "2021-01-27T05:00:00.000Z",
					"expanded": true,
					"children": [
						{
							"id": 13,
							"name": "Sub-parent 121",
							"startDate": "2021-01-27T05:00:00.000Z",
							"expanded": true,
							"children": [
								{
									"id": 14,
									"name": "Task 1211",
									"startDate": "2021-01-27T05:00:00.000Z",
									"duration": 2,
									"percentDone": 45,
									"durationUnit": "day",
									"cls": "",
									"direction": "Forward",
									"manuallyScheduled": false,
									"slackUnit": "day",
									"critical": false,
									"effortUnit": "hour",
									"effortDriven": false,
									"schedulingMode": "Normal",
									"draggable": true,
									"resizable": true,
									"parentId": 13,
									"parentIndex": 0,
									"wbsValue": "2.1.1",
									"effort": 48,
									"constraintType": null,
									"constraintDate": null,
									"earlyStartDate": "2021-01-27T05:00:00.000Z",
									"earlyEndDate": "2021-01-29T05:00:00.000Z",
									"endDate": "2021-01-29T05:00:00.000Z"
								},
								{
									"id": 15,
									"name": "Task 1212",
									"startDate": "2021-01-29T05:00:00.000Z",
									"duration": 2,
									"percentDone": 88,
									"durationUnit": "day",
									"cls": "",
									"direction": "Forward",
									"manuallyScheduled": false,
									"slackUnit": "day",
									"critical": false,
									"effortUnit": "hour",
									"effortDriven": false,
									"schedulingMode": "Normal",
									"draggable": true,
									"resizable": true,
									"parentId": 13,
									"parentIndex": 1,
									"wbsValue": "2.1.2",
									"effort": 48,
									"constraintType": null,
									"constraintDate": null,
									"earlyStartDate": "2021-01-29T05:00:00.000Z",
									"earlyEndDate": "2021-01-31T05:00:00.000Z",
									"endDate": "2021-01-31T05:00:00.000Z"
								},
								{
									"id": 16,
									"name": "Task 1213",
									"startDate": "2021-01-31T05:00:00.000Z",
									"duration": 2,
									"percentDone": 11,
									"durationUnit": "day",
									"cls": "",
									"direction": "Forward",
									"manuallyScheduled": false,
									"slackUnit": "day",
									"critical": false,
									"effortUnit": "hour",
									"effortDriven": false,
									"schedulingMode": "Normal",
									"draggable": true,
									"resizable": true,
									"parentId": 13,
									"parentIndex": 2,
									"wbsValue": "2.1.3",
									"effort": 48,
									"constraintType": null,
									"constraintDate": null,
									"earlyStartDate": "2021-01-31T05:00:00.000Z",
									"earlyEndDate": "2021-02-02T05:00:00.000Z",
									"endDate": "2021-02-02T05:00:00.000Z"
								},
								{
									"id": 17,
									"name": "Task 1214",
									"startDate": "2021-02-02T05:00:00.000Z",
									"duration": 6,
									"percentDone": 40,
									"durationUnit": "day",
									"cls": "",
									"direction": "Forward",
									"manuallyScheduled": false,
									"slackUnit": "day",
									"critical": false,
									"effortUnit": "hour",
									"effortDriven": false,
									"schedulingMode": "Normal",
									"draggable": true,
									"resizable": true,
									"parentId": 13,
									"parentIndex": 3,
									"wbsValue": "2.1.4",
									"effort": 144,
									"constraintType": null,
									"constraintDate": null,
									"earlyStartDate": "2021-02-02T05:00:00.000Z",
									"earlyEndDate": "2021-02-08T05:00:00.000Z",
									"endDate": "2021-02-08T05:00:00.000Z"
								}
							],
							"durationUnit": "day",
							"cls": "",
							"direction": "Forward",
							"manuallyScheduled": false,
							"percentDone": 44,
							"slackUnit": "day",
							"critical": false,
							"effortUnit": "hour",
							"effortDriven": false,
							"schedulingMode": "Normal",
							"draggable": true,
							"resizable": true,
							"parentId": 12,
							"parentIndex": 0,
							"wbsValue": "2.1",
							"effort": 288,
							"constraintType": null,
							"constraintDate": null,
							"endDate": "2021-02-08T05:00:00.000Z",
							"duration": 12
						},
						{
							"id": 18,
							"name": "Sub-parent 122",
							"startDate": "2021-02-08T05:00:00.000Z",
							"expanded": true,
							"children": [
								{
									"id": 19,
									"name": "Task 1221",
									"startDate": "2021-02-08T05:00:00.000Z",
									"duration": 3,
									"percentDone": 9,
									"durationUnit": "day",
									"cls": "",
									"direction": "Forward",
									"manuallyScheduled": false,
									"slackUnit": "day",
									"critical": false,
									"effortUnit": "hour",
									"effortDriven": false,
									"schedulingMode": "Normal",
									"draggable": true,
									"resizable": true,
									"parentId": 18,
									"parentIndex": 0,
									"wbsValue": "2.2.1",
									"effort": 72,
									"constraintType": null,
									"constraintDate": null,
									"earlyStartDate": "2021-02-08T05:00:00.000Z",
									"earlyEndDate": "2021-02-11T05:00:00.000Z",
									"endDate": "2021-02-11T05:00:00.000Z"
								},
								{
									"id": 20,
									"name": "Task 1222",
									"startDate": "2021-02-11T05:00:00.000Z",
									"duration": 2,
									"percentDone": 65,
									"durationUnit": "day",
									"cls": "",
									"direction": "Forward",
									"manuallyScheduled": false,
									"slackUnit": "day",
									"critical": false,
									"effortUnit": "hour",
									"effortDriven": false,
									"schedulingMode": "Normal",
									"draggable": true,
									"resizable": true,
									"parentId": 18,
									"parentIndex": 1,
									"wbsValue": "2.2.2",
									"effort": 48,
									"constraintType": null,
									"constraintDate": null,
									"earlyStartDate": "2021-02-11T05:00:00.000Z",
									"earlyEndDate": "2021-02-13T05:00:00.000Z",
									"endDate": "2021-02-13T05:00:00.000Z"
								},
								{
									"id": 21,
									"name": "Task 1223",
									"startDate": "2021-02-13T05:00:00.000Z",
									"duration": 2,
									"percentDone": 61,
									"durationUnit": "day",
									"cls": "",
									"direction": "Forward",
									"manuallyScheduled": false,
									"slackUnit": "day",
									"critical": false,
									"effortUnit": "hour",
									"effortDriven": false,
									"schedulingMode": "Normal",
									"draggable": true,
									"resizable": true,
									"parentId": 18,
									"parentIndex": 2,
									"wbsValue": "2.2.3",
									"effort": 48,
									"constraintType": null,
									"constraintDate": null,
									"earlyStartDate": "2021-02-13T05:00:00.000Z",
									"earlyEndDate": "2021-02-15T05:00:00.000Z",
									"endDate": "2021-02-15T05:00:00.000Z"
								}
							],
							"durationUnit": "day",
							"cls": "",
							"direction": "Forward",
							"manuallyScheduled": false,
							"percentDone": 39.857142857142854,
							"slackUnit": "day",
							"critical": false,
							"effortUnit": "hour",
							"effortDriven": false,
							"schedulingMode": "Normal",
							"draggable": true,
							"resizable": true,
							"parentId": 12,
							"parentIndex": 1,
							"wbsValue": "2.2",
							"effort": 168,
							"constraintType": null,
							"constraintDate": null,
							"endDate": "2021-02-15T05:00:00.000Z",
							"duration": 7
						}
					],
					"durationUnit": "day",
					"cls": "",
					"direction": "Forward",
					"manuallyScheduled": false,
					"percentDone": 42.473684210526315,
					"slackUnit": "day",
					"critical": false,
					"effortUnit": "hour",
					"effortDriven": false,
					"schedulingMode": "Normal",
					"draggable": true,
					"resizable": true,
					"parentIndex": 1,
					"effort": 456,
					"endDate": "2021-02-15T05:00:00.000Z",
					"duration": 19
				}

Post by mats »

The Gantt chart renders fine but I get a bunch of typing errors..

Can you please copy paste the errors you see?


Post by Gantt_user »

mats wrote: Thu May 06, 2021 7:27 am

The Gantt chart renders fine but I get a bunch of typing errors..

Can you please copy paste the errors you see?

Object literal may only specify known properties, and '"name"' does not exist in type 'Model'.

Removing the name property from the child property reveals more errors.

Seems like the types from the declaration file and and the data used from the examples are a mismatch

"id": 10,
"name": "Task 123",
"startDate": "2021-01-25T05:00:00.000Z",
"duration": 2,
"percentDone": 75,
"durationUnit": "day",
"cls": "",
"direction": "Forward",
"manuallyScheduled": false,
"slackUnit": "day",
"critical": false,
"effortUnit": "hour",
"effortDriven": false,
"schedulingMode": "Normal",
"draggable": true,
"resizable": true,
"parentId": 7,
"parentIndex": 2,
"wbsValue": "1.2.3",
"effort": 48,
"constraintType": null,
"constraintDate": null,
"earlyStartDate": "2021-01-25T05:00:00.000Z",
"earlyEndDate": "2021-01-27T05:00:00.000Z",
"endDate": "2021-01-27T05:00:00.000Z"
export class Model implements TreeNode, ModelStm {
        static autoExposeFields: boolean
        static childrenField: string
        static convertEmptyParentToLeaf: boolean|object
        static defaults: object
        static idField: string
        allChildren: Model[]
        allFields: DataField[]
        childLevel: number
        children: Model[]
        descendantCount: number
        fieldMap: object
        fieldNames: string[]
        fields: DataField[]
        firstChild: Model
        firstStore: Store
        hasGeneratedId: boolean
        id: string|number
        internalId: number
        isBatchUpdating: boolean
        isCommitting: boolean
        isLeaf: boolean
        isLoaded: boolean
        isModified: boolean
        isParent: boolean
        isPhantom: boolean
        isValid: boolean
        json: string
        lastChild: Model
        modificationData: object
        modifications: object
        parent: Model
        parentId: number|string
        parentIndex: number
        previousSiblingsTotalCount: number
        stm: StateTrackingManager
        visibleDescendantCount: number
        constructor(data?: object, store?: Store, meta?: object);
        static addField(fieldDef: string|object): void;
        static asId(model: Model|string|number): string|number;
        static getFieldDefinition(fieldName: string): DataField;
        static processField(fieldName: string, value: any): any;
        static removeField(fieldName: string): void;
        ancestorsExpanded(store?: Store): boolean;
        appendChild(childRecord: Model|Model[], silent?: boolean): Model|Model[];
        beginBatch(): void;
        bubble(fn: Function, skipSelf?: boolean): void;
        bubbleWhile(fn: Function, skipSelf?: boolean): boolean;
        cancelBatch(): void;
        clearChanges(): void;
        contains(childOrId: Model|string|number): boolean;
        copy(newId?: number|string|object, deep?: boolean): Model;
        endBatch(silent?: boolean): void;
        equals(other: Model): boolean;
        generateId(): void;
        get(fieldName: string): any;
        getData(fieldName: string): any;
        getDataSource(fieldName: string): string;
        getDescendantCount(onlyVisible?: boolean, store?: Store): number;
        insertChild(childRecord: Model|Model[], before?: Model, silent?: boolean): Model|Model[];
        isExpanded(store: Store): boolean;
        isFieldModified(fieldName: string): boolean;
        remove(silent?: boolean): void;
        removeChild(childRecords: Model|Model[], isMove?: boolean, silent?: boolean): void;
        revertChanges(): void;
        set(field: string|object, value: any, silent?: boolean): void;
        toJSON(): object;
        toString(): string;
        traverse(fn: Function, skipSelf?: boolean, includeFilteredOutRecords?: boolean): void;
        traverseBefore(fn: Function, skipSelf?: boolean, includeFilteredOutRecords?: boolean): void;
        traverseWhile(fn: Function, skipSelf?: boolean, includeFilteredOutRecords?: boolean): boolean;
    }

I can get around this by using // @ts-nocheck but I don't think I should


Post by sergey.maltsev »

Hi!

Could you please attach demo code here so we can build and see it.
This will be much easier to get the point.


Post by Gantt_user »

sergey.maltsev wrote: Thu May 06, 2021 2:09 pm

Hi!

Could you please attach demo code here so we can build and see it.
This will be much easier to get the point.

Hi, below is a snippet of the code

const projectModel = new ProjectModel({
			tasksData: [
				{
					"id": 1,
					"name": "Parent 1",
					"startDate": "2021-01-01T05:00:00.000Z",
					"expanded": true,
					"children": [
						{
							"id": 2,
							"name": "Sub-parent 11",
							"startDate": "2021-01-01T05:00:00.000Z",
							"expanded": true,
							"children": [
								{
									"id": 3,
									"name": "Task 111",
									"startDate": "2021-01-01T05:00:00.000Z",
									"duration": 2,
									"percentDone": 47,
									"durationUnit": "day",
									"cls": "",
									"direction": "Forward",
									"manuallyScheduled": false,
									"slackUnit": "day",
									"critical": false,
									"effortUnit": "hour",
									"effortDriven": false,
									"schedulingMode": "Normal",
									"draggable": true,
									"resizable": true,
									"parentId": 2,
									"parentIndex": 0,
									"wbsValue": "1.1.1",
									"effort": 48,
									"constraintType": null,
									"constraintDate": null,
									"earlyStartDate": "2021-01-01T05:00:00.000Z",
									"earlyEndDate": "2021-01-03T05:00:00.000Z",
									"endDate": "2021-01-03T05:00:00.000Z"
								},
								{
									"id": 4,
									"name": "Task 112",
									"startDate": "2021-01-03T05:00:00.000Z",
									"duration": 5,
									"percentDone": 52,
									"durationUnit": "day",
									"cls": "",
									"direction": "Forward",
									"manuallyScheduled": false,
									"slackUnit": "day",
									"critical": false,
									"effortUnit": "hour",
									"effortDriven": false,
									"schedulingMode": "Normal",
									"draggable": true,
									"resizable": true,
									"parentId": 2,
									"parentIndex": 1,
									"wbsValue": "1.1.2",
									"effort": 120,
									"constraintType": null,
									"constraintDate": null,
									"earlyStartDate": "2021-01-03T05:00:00.000Z",
									"earlyEndDate": "2021-01-08T05:00:00.000Z",
									"endDate": "2021-01-08T05:00:00.000Z"
								},
								{
									"id": 5,
									"name": "Task 113",
									"startDate": "2021-01-08T05:00:00.000Z",
									"duration": 3,
									"percentDone": 79,
									"durationUnit": "day",
									"cls": "",
									"direction": "Forward",
									"manuallyScheduled": false,
									"slackUnit": "day",
									"critical": false,
									"effortUnit": "hour",
									"effortDriven": false,
									"schedulingMode": "Normal",
									"draggable": true,
									"resizable": true,
									"parentId": 2,
									"parentIndex": 2,
									"wbsValue": "1.1.3",
									"effort": 72,
									"constraintType": null,
									"constraintDate": null,
									"earlyStartDate": "2021-01-08T05:00:00.000Z",
									"earlyEndDate": "2021-01-11T05:00:00.000Z",
									"endDate": "2021-01-11T05:00:00.000Z"
								},
								{
									"id": 6,
									"name": "Task 114",
									"startDate": "2021-01-11T05:00:00.000Z",
									"duration": 6,
									"percentDone": 39,
									"durationUnit": "day",
									"cls": "",
									"direction": "Forward",
									"manuallyScheduled": false,
									"slackUnit": "day",
									"critical": false,
									"effortUnit": "hour",
									"effortDriven": false,
									"schedulingMode": "Normal",
									"draggable": true,
									"resizable": true,
									"parentId": 2,
									"parentIndex": 3,
									"wbsValue": "1.1.4",
									"effort": 144,
									"constraintType": null,
									"constraintDate": null,
									"earlyStartDate": "2021-01-11T05:00:00.000Z",
									"earlyEndDate": "2021-01-17T05:00:00.000Z",
									"endDate": "2021-01-17T05:00:00.000Z"
								}
							],
							"durationUnit": "day",
							"cls": "",
							"direction": "Forward",
							"manuallyScheduled": false,
							"percentDone": 51.5625,
							"slackUnit": "day",
							"critical": false,
							"effortUnit": "hour",
							"effortDriven": false,
							"schedulingMode": "Normal",
							"draggable": true,
							"resizable": true,
							"parentId": 1,
							"parentIndex": 0,
							"wbsValue": "1.1",
							"effort": 384,
							"constraintType": null,
							"constraintDate": null,
							"endDate": "2021-01-17T05:00:00.000Z",
							"duration": 16
						},
						{
							"id": 7,
							"name": "Sub-parent 12",
							"startDate": "2021-01-17T05:00:00.000Z",
							"expanded": true,
							"children": [
								{
									"id": 8,
									"name": "Task 121",
									"startDate": "2021-01-17T05:00:00.000Z",
									"duration": 2,
									"percentDone": 41,
									"durationUnit": "day",
									"cls": "",
									"direction": "Forward",
									"manuallyScheduled": false,
									"slackUnit": "day",
									"critical": false,
									"effortUnit": "hour",
									"effortDriven": false,
									"schedulingMode": "Normal",
									"draggable": true,
									"resizable": true,
									"parentId": 7,
									"parentIndex": 0,
									"wbsValue": "1.2.1",
									"effort": 48,
									"constraintType": null,
									"constraintDate": null,
									"earlyStartDate": "2021-01-17T05:00:00.000Z",
									"earlyEndDate": "2021-01-19T05:00:00.000Z",
									"endDate": "2021-01-19T05:00:00.000Z"
								},
								{
									"id": 9,
									"name": "Task 122",
									"startDate": "2021-01-19T05:00:00.000Z",
									"duration": 6,
									"percentDone": 66,
									"durationUnit": "day",
									"cls": "",
									"direction": "Forward",
									"manuallyScheduled": false,
									"slackUnit": "day",
									"critical": false,
									"effortUnit": "hour",
									"effortDriven": false,
									"schedulingMode": "Normal",
									"draggable": true,
									"resizable": true,
									"parentId": 7,
									"parentIndex": 1,
									"wbsValue": "1.2.2",
									"effort": 144,
									"constraintType": null,
									"constraintDate": null,
									"earlyStartDate": "2021-01-19T05:00:00.000Z",
									"earlyEndDate": "2021-01-25T05:00:00.000Z",
									"endDate": "2021-01-25T05:00:00.000Z"
								},
								{
									"id": 10,
									"name": "Task 123",
									"startDate": "2021-01-25T05:00:00.000Z",
									"duration": 2,
									"percentDone": 75,
									"durationUnit": "day",
									"cls": "",
									"direction": "Forward",
									"manuallyScheduled": false,
									"slackUnit": "day",
									"critical": false,
									"effortUnit": "hour",
									"effortDriven": false,
									"schedulingMode": "Normal",
									"draggable": true,
									"resizable": true,
									"parentId": 7,
									"parentIndex": 2,
									"wbsValue": "1.2.3",
									"effort": 48,
									"constraintType": null,
									"constraintDate": null,
									"earlyStartDate": "2021-01-25T05:00:00.000Z",
									"earlyEndDate": "2021-01-27T05:00:00.000Z",
									"endDate": "2021-01-27T05:00:00.000Z"
								}
							],
							"durationUnit": "day",
							"cls": "",
							"direction": "Forward",
							"manuallyScheduled": false,
							"percentDone": 62.8,
							"slackUnit": "day",
							"critical": false,
							"effortUnit": "hour",
							"effortDriven": false,
							"schedulingMode": "Normal",
							"draggable": true,
							"resizable": true,
							"parentId": 1,
							"parentIndex": 1,
							"wbsValue": "1.2",
							"effort": 240,
							"constraintType": null,
							"constraintDate": null,
							"endDate": "2021-01-27T05:00:00.000Z",
							"duration": 10
						}
					],
					"durationUnit": "day",
					"cls": "",
					"direction": "Forward",
					"manuallyScheduled": false,
					"percentDone": 55.88461538461539,
					"slackUnit": "day",
					"critical": false,
					"effortUnit": "hour",
					"effortDriven": false,
					"schedulingMode": "Normal",
					"draggable": true,
					"resizable": true,
					"parentId": null,
					"parentIndex": 0,
					"wbsValue": "1",
					"effort": 624,
					"constraintType": null,
					"constraintDate": null,
					"endDate": "2021-01-27T05:00:00.000Z",
					"duration": 26
				},
				{
					"id": 12,
					"name": "Parent 12",
					"startDate": "2021-01-27T05:00:00.000Z",
					"expanded": true,
					"children": [
						{
							"id": 13,
							"name": "Sub-parent 121",
							"startDate": "2021-01-27T05:00:00.000Z",
							"expanded": true,
							"children": [
								{
									"id": 14,
									"name": "Task 1211",
									"startDate": "2021-01-27T05:00:00.000Z",
									"duration": 2,
									"percentDone": 45,
									"durationUnit": "day",
									"cls": "",
									"direction": "Forward",
									"manuallyScheduled": false,
									"slackUnit": "day",
									"critical": false,
									"effortUnit": "hour",
									"effortDriven": false,
									"schedulingMode": "Normal",
									"draggable": true,
									"resizable": true,
									"parentId": 13,
									"parentIndex": 0,
									"wbsValue": "2.1.1",
									"effort": 48,
									"constraintType": null,
									"constraintDate": null,
									"earlyStartDate": "2021-01-27T05:00:00.000Z",
									"earlyEndDate": "2021-01-29T05:00:00.000Z",
									"endDate": "2021-01-29T05:00:00.000Z"
								},
								{
									"id": 15,
									"name": "Task 1212",
									"startDate": "2021-01-29T05:00:00.000Z",
									"duration": 2,
									"percentDone": 88,
									"durationUnit": "day",
									"cls": "",
									"direction": "Forward",
									"manuallyScheduled": false,
									"slackUnit": "day",
									"critical": false,
									"effortUnit": "hour",
									"effortDriven": false,
									"schedulingMode": "Normal",
									"draggable": true,
									"resizable": true,
									"parentId": 13,
									"parentIndex": 1,
									"wbsValue": "2.1.2",
									"effort": 48,
									"constraintType": null,
									"constraintDate": null,
									"earlyStartDate": "2021-01-29T05:00:00.000Z",
									"earlyEndDate": "2021-01-31T05:00:00.000Z",
									"endDate": "2021-01-31T05:00:00.000Z"
								},
								{
									"id": 16,
									"name": "Task 1213",
									"startDate": "2021-01-31T05:00:00.000Z",
									"duration": 2,
									"percentDone": 11,
									"durationUnit": "day",
									"cls": "",
									"direction": "Forward",
									"manuallyScheduled": false,
									"slackUnit": "day",
									"critical": false,
									"effortUnit": "hour",
									"effortDriven": false,
									"schedulingMode": "Normal",
									"draggable": true,
									"resizable": true,
									"parentId": 13,
									"parentIndex": 2,
									"wbsValue": "2.1.3",
									"effort": 48,
									"constraintType": null,
									"constraintDate": null,
									"earlyStartDate": "2021-01-31T05:00:00.000Z",
									"earlyEndDate": "2021-02-02T05:00:00.000Z",
									"endDate": "2021-02-02T05:00:00.000Z"
								},
								{
									"id": 17,
									"name": "Task 1214",
									"startDate": "2021-02-02T05:00:00.000Z",
									"duration": 6,
									"percentDone": 40,
									"durationUnit": "day",
									"cls": "",
									"direction": "Forward",
									"manuallyScheduled": false,
									"slackUnit": "day",
									"critical": false,
									"effortUnit": "hour",
									"effortDriven": false,
									"schedulingMode": "Normal",
									"draggable": true,
									"resizable": true,
									"parentId": 13,
									"parentIndex": 3,
									"wbsValue": "2.1.4",
									"effort": 144,
									"constraintType": null,
									"constraintDate": null,
									"earlyStartDate": "2021-02-02T05:00:00.000Z",
									"earlyEndDate": "2021-02-08T05:00:00.000Z",
									"endDate": "2021-02-08T05:00:00.000Z"
								}
							],
							"durationUnit": "day",
							"cls": "",
							"direction": "Forward",
							"manuallyScheduled": false,
							"percentDone": 44,
							"slackUnit": "day",
							"critical": false,
							"effortUnit": "hour",
							"effortDriven": false,
							"schedulingMode": "Normal",
							"draggable": true,
							"resizable": true,
							"parentId": 12,
							"parentIndex": 0,
							"wbsValue": "2.1",
							"effort": 288,
							"constraintType": null,
							"constraintDate": null,
							"endDate": "2021-02-08T05:00:00.000Z",
							"duration": 12
						},
						{
							"id": 18,
							"name": "Sub-parent 122",
							"startDate": "2021-02-08T05:00:00.000Z",
							"expanded": true,
							"children": [
								{
									"id": 19,
									"name": "Task 1221",
									"startDate": "2021-02-08T05:00:00.000Z",
									"duration": 3,
									"percentDone": 9,
									"durationUnit": "day",
									"cls": "",
									"direction": "Forward",
									"manuallyScheduled": false,
									"slackUnit": "day",
									"critical": false,
									"effortUnit": "hour",
									"effortDriven": false,
									"schedulingMode": "Normal",
									"draggable": true,
									"resizable": true,
									"parentId": 18,
									"parentIndex": 0,
									"wbsValue": "2.2.1",
									"effort": 72,
									"constraintType": null,
									"constraintDate": null,
									"earlyStartDate": "2021-02-08T05:00:00.000Z",
									"earlyEndDate": "2021-02-11T05:00:00.000Z",
									"endDate": "2021-02-11T05:00:00.000Z"
								},
								{
									"id": 20,
									"name": "Task 1222",
									"startDate": "2021-02-11T05:00:00.000Z",
									"duration": 2,
									"percentDone": 65,
									"durationUnit": "day",
									"cls": "",
									"direction": "Forward",
									"manuallyScheduled": false,
									"slackUnit": "day",
									"critical": false,
									"effortUnit": "hour",
									"effortDriven": false,
									"schedulingMode": "Normal",
									"draggable": true,
									"resizable": true,
									"parentId": 18,
									"parentIndex": 1,
									"wbsValue": "2.2.2",
									"effort": 48,
									"constraintType": null,
									"constraintDate": null,
									"earlyStartDate": "2021-02-11T05:00:00.000Z",
									"earlyEndDate": "2021-02-13T05:00:00.000Z",
									"endDate": "2021-02-13T05:00:00.000Z"
								},
								{
									"id": 21,
									"name": "Task 1223",
									"startDate": "2021-02-13T05:00:00.000Z",
									"duration": 2,
									"percentDone": 61,
									"durationUnit": "day",
									"cls": "",
									"direction": "Forward",
									"manuallyScheduled": false,
									"slackUnit": "day",
									"critical": false,
									"effortUnit": "hour",
									"effortDriven": false,
									"schedulingMode": "Normal",
									"draggable": true,
									"resizable": true,
									"parentId": 18,
									"parentIndex": 2,
									"wbsValue": "2.2.3",
									"effort": 48,
									"constraintType": null,
									"constraintDate": null,
									"earlyStartDate": "2021-02-13T05:00:00.000Z",
									"earlyEndDate": "2021-02-15T05:00:00.000Z",
									"endDate": "2021-02-15T05:00:00.000Z"
								}
							],
							"durationUnit": "day",
							"cls": "",
							"direction": "Forward",
							"manuallyScheduled": false,
							"percentDone": 39.857142857142854,
							"slackUnit": "day",
							"critical": false,
							"effortUnit": "hour",
							"effortDriven": false,
							"schedulingMode": "Normal",
							"draggable": true,
							"resizable": true,
							"parentId": 12,
							"parentIndex": 1,
							"wbsValue": "2.2",
							"effort": 168,
							"constraintType": null,
							"constraintDate": null,
							"endDate": "2021-02-15T05:00:00.000Z",
							"duration": 7
						}
					],
					"durationUnit": "day",
					"cls": "",
					"direction": "Forward",
					"manuallyScheduled": false,
					"percentDone": 42.473684210526315,
					"slackUnit": "day",
					"critical": false,
					"effortUnit": "hour",
					"effortDriven": false,
					"schedulingMode": "Normal",
					"draggable": true,
					"resizable": true,
					"parentIndex": 1,
					"effort": 456,
					"endDate": "2021-02-15T05:00:00.000Z",
					"duration": 19
				}
			]
		});
		
const ganttConfig: Partial<GanttConfig> = {
    project: projectModel,
    viewPreset: 'weekAndDayLetter',
    rowHeight: 23,
    barMargin: 2,
};

return <BryntumGantt {...ganttConfig}></BryntumGantt>;


Post by pmiklashevich »

Reproduced! We will get it fixed.

Reduced testcase:
Gantt/examples/frameworks/react/typescript/basic/src/AppConfig.ts

import {GanttConfig, ProjectModel} from '@bryntum/gantt/gantt.umd.js';

const projectModel = new ProjectModel({
    tasksData : [
        {
            "id"                : 1,
            "name"              : "Parent 1",
            "startDate"         : "2021-01-01T05:00:00.000Z",
            "expanded"          : true,
            "children"          : [
                {
                    "id"                : 2,
                    "name"              : "Sub-parent 11",
                    "startDate"         : "2021-01-01T05:00:00.000Z",
                    "expanded"          : true,
                    "children"          : [
                        {
                            "id"                : 3,
                            "name"              : "Task 111",
                            "startDate"         : "2021-01-01T05:00:00.000Z",
                            "duration"          : 2,
                            "percentDone"       : 47,
                            "durationUnit"      : "day",
                            "cls"               : "",
                            "direction"         : "Forward",
                            "manuallyScheduled" : false,
                            "slackUnit"         : "day",
                            "critical"          : false,
                            "effortUnit"        : "hour",
                            "effortDriven"      : false,
                            "schedulingMode"    : "Normal",
                            "draggable"         : true,
                            "resizable"         : true,
                            "parentId"          : 2,
                            "parentIndex"       : 0,
                            "wbsValue"          : "1.1.1",
                            "effort"            : 48,
                            "constraintType"    : null,
                            "constraintDate"    : null,
                            "earlyStartDate"    : "2021-01-01T05:00:00.000Z",
                            "earlyEndDate"      : "2021-01-03T05:00:00.000Z",
                            "endDate"           : "2021-01-03T05:00:00.000Z"
                        }
                    ],
                    "durationUnit"      : "day",
                    "cls"               : "",
                    "direction"         : "Forward",
                    "manuallyScheduled" : false,
                    "percentDone"       : 51.5625,
                    "slackUnit"         : "day",
                    "critical"          : false,
                    "effortUnit"        : "hour",
                    "effortDriven"      : false,
                    "schedulingMode"    : "Normal",
                    "draggable"         : true,
                    "resizable"         : true,
                    "parentId"          : 1,
                    "parentIndex"       : 0,
                    "wbsValue"          : "1.1",
                    "effort"            : 384,
                    "constraintType"    : null,
                    "constraintDate"    : null,
                    "endDate"           : "2021-01-17T05:00:00.000Z",
                    "duration"          : 16
                }
            ],
            "durationUnit"      : "day",
            "cls"               : "",
            "direction"         : "Forward",
            "manuallyScheduled" : false,
            "percentDone"       : 55.88461538461539,
            "slackUnit"         : "day",
            "critical"          : false,
            "effortUnit"        : "hour",
            "effortDriven"      : false,
            "schedulingMode"    : "Normal",
            "draggable"         : true,
            "resizable"         : true,
            "parentId"          : null,
            "parentIndex"       : 0,
            "wbsValue"          : "1",
            "effort"            : 624,
            "constraintType"    : null,
            "constraintDate"    : null,
            "endDate"           : "2021-01-27T05:00:00.000Z",
            "duration"          : 26
        }
    ]
});

const ganttConfig: Partial<GanttConfig> = {
    project: projectModel,
    columns: [{ type: 'name', field: 'name', width: 250 }],
    viewPreset: 'weekAndDayLetter',
    barMargin: 10
};

export { ganttConfig };

Note, you can pass an object to the project property with no errors:

const ganttConfig: Partial<GanttConfig> = {
    project: {
        tasksData : [
            {
                "id"                : 1,
                "name"              : "Parent 1",
                "startDate"         : "2021-01-01T05:00:00.000Z",
                "expanded"          : true,
                "children"          : [
                    {
                        "id"                : 2,
                        "name"              : "Sub-parent 11",
                        "startDate"         : "2021-01-01T05:00:00.000Z",
                        "expanded"          : true,
                        "children"          : [
                            {
                                "id"                : 3,
                                "name"              : "Task 111",
                                "startDate"         : "2021-01-01T05:00:00.000Z",
                                "duration"          : 2,
                                "percentDone"       : 47,
                                "durationUnit"      : "day",
                                "cls"               : "",
                                "direction"         : "Forward",
                                "manuallyScheduled" : false,
                                "slackUnit"         : "day",
                                "critical"          : false,
                                "effortUnit"        : "hour",
                                "effortDriven"      : false,
                                "schedulingMode"    : "Normal",
                                "draggable"         : true,
                                "resizable"         : true,
                                "parentId"          : 2,
                                "parentIndex"       : 0,
                                "wbsValue"          : "1.1.1",
                                "effort"            : 48,
                                "constraintType"    : null,
                                "constraintDate"    : null,
                                "earlyStartDate"    : "2021-01-01T05:00:00.000Z",
                                "earlyEndDate"      : "2021-01-03T05:00:00.000Z",
                                "endDate"           : "2021-01-03T05:00:00.000Z"
                            }
                        ],
                        "durationUnit"      : "day",
                        "cls"               : "",
                        "direction"         : "Forward",
                        "manuallyScheduled" : false,
                        "percentDone"       : 51.5625,
                        "slackUnit"         : "day",
                        "critical"          : false,
                        "effortUnit"        : "hour",
                        "effortDriven"      : false,
                        "schedulingMode"    : "Normal",
                        "draggable"         : true,
                        "resizable"         : true,
                        "parentId"          : 1,
                        "parentIndex"       : 0,
                        "wbsValue"          : "1.1",
                        "effort"            : 384,
                        "constraintType"    : null,
                        "constraintDate"    : null,
                        "endDate"           : "2021-01-17T05:00:00.000Z",
                        "duration"          : 16
                    }
                ],
                "durationUnit"      : "day",
                "cls"               : "",
                "direction"         : "Forward",
                "manuallyScheduled" : false,
                "percentDone"       : 55.88461538461539,
                "slackUnit"         : "day",
                "critical"          : false,
                "effortUnit"        : "hour",
                "effortDriven"      : false,
                "schedulingMode"    : "Normal",
                "draggable"         : true,
                "resizable"         : true,
                "parentId"          : null,
                "parentIndex"       : 0,
                "wbsValue"          : "1",
                "effort"            : 624,
                "constraintType"    : null,
                "constraintDate"    : null,
                "endDate"           : "2021-01-27T05:00:00.000Z",
                "duration"          : 26
            }
        ]
    },
    columns: [{ type: 'name', field: 'name', width: 250 }],
    viewPreset: 'weekAndDayLetter',
    barMargin: 10
};

Pavlo Miklashevych
Sr. Frontend Developer


Post by Gantt_user »

pmiklashevich wrote: Thu May 06, 2021 7:34 pm

Reproduced! We will get it fixed.

Reduced testcase:
Gantt/examples/frameworks/react/typescript/basic/src/AppConfig.ts

import {GanttConfig, ProjectModel} from '@bryntum/gantt/gantt.umd.js';

const projectModel = new ProjectModel({
    tasksData : [
        {
            "id"                : 1,
            "name"              : "Parent 1",
            "startDate"         : "2021-01-01T05:00:00.000Z",
            "expanded"          : true,
            "children"          : [
                {
                    "id"                : 2,
                    "name"              : "Sub-parent 11",
                    "startDate"         : "2021-01-01T05:00:00.000Z",
                    "expanded"          : true,
                    "children"          : [
                        {
                            "id"                : 3,
                            "name"              : "Task 111",
                            "startDate"         : "2021-01-01T05:00:00.000Z",
                            "duration"          : 2,
                            "percentDone"       : 47,
                            "durationUnit"      : "day",
                            "cls"               : "",
                            "direction"         : "Forward",
                            "manuallyScheduled" : false,
                            "slackUnit"         : "day",
                            "critical"          : false,
                            "effortUnit"        : "hour",
                            "effortDriven"      : false,
                            "schedulingMode"    : "Normal",
                            "draggable"         : true,
                            "resizable"         : true,
                            "parentId"          : 2,
                            "parentIndex"       : 0,
                            "wbsValue"          : "1.1.1",
                            "effort"            : 48,
                            "constraintType"    : null,
                            "constraintDate"    : null,
                            "earlyStartDate"    : "2021-01-01T05:00:00.000Z",
                            "earlyEndDate"      : "2021-01-03T05:00:00.000Z",
                            "endDate"           : "2021-01-03T05:00:00.000Z"
                        }
                    ],
                    "durationUnit"      : "day",
                    "cls"               : "",
                    "direction"         : "Forward",
                    "manuallyScheduled" : false,
                    "percentDone"       : 51.5625,
                    "slackUnit"         : "day",
                    "critical"          : false,
                    "effortUnit"        : "hour",
                    "effortDriven"      : false,
                    "schedulingMode"    : "Normal",
                    "draggable"         : true,
                    "resizable"         : true,
                    "parentId"          : 1,
                    "parentIndex"       : 0,
                    "wbsValue"          : "1.1",
                    "effort"            : 384,
                    "constraintType"    : null,
                    "constraintDate"    : null,
                    "endDate"           : "2021-01-17T05:00:00.000Z",
                    "duration"          : 16
                }
            ],
            "durationUnit"      : "day",
            "cls"               : "",
            "direction"         : "Forward",
            "manuallyScheduled" : false,
            "percentDone"       : 55.88461538461539,
            "slackUnit"         : "day",
            "critical"          : false,
            "effortUnit"        : "hour",
            "effortDriven"      : false,
            "schedulingMode"    : "Normal",
            "draggable"         : true,
            "resizable"         : true,
            "parentId"          : null,
            "parentIndex"       : 0,
            "wbsValue"          : "1",
            "effort"            : 624,
            "constraintType"    : null,
            "constraintDate"    : null,
            "endDate"           : "2021-01-27T05:00:00.000Z",
            "duration"          : 26
        }
    ]
});

const ganttConfig: Partial<GanttConfig> = {
    project: projectModel,
    columns: [{ type: 'name', field: 'name', width: 250 }],
    viewPreset: 'weekAndDayLetter',
    barMargin: 10
};

export { ganttConfig };

Note, you can pass an object to the project property with no errors:

const ganttConfig: Partial<GanttConfig> = {
    project: {
        tasksData : [
            {
                "id"                : 1,
                "name"              : "Parent 1",
                "startDate"         : "2021-01-01T05:00:00.000Z",
                "expanded"          : true,
                "children"          : [
                    {
                        "id"                : 2,
                        "name"              : "Sub-parent 11",
                        "startDate"         : "2021-01-01T05:00:00.000Z",
                        "expanded"          : true,
                        "children"          : [
                            {
                                "id"                : 3,
                                "name"              : "Task 111",
                                "startDate"         : "2021-01-01T05:00:00.000Z",
                                "duration"          : 2,
                                "percentDone"       : 47,
                                "durationUnit"      : "day",
                                "cls"               : "",
                                "direction"         : "Forward",
                                "manuallyScheduled" : false,
                                "slackUnit"         : "day",
                                "critical"          : false,
                                "effortUnit"        : "hour",
                                "effortDriven"      : false,
                                "schedulingMode"    : "Normal",
                                "draggable"         : true,
                                "resizable"         : true,
                                "parentId"          : 2,
                                "parentIndex"       : 0,
                                "wbsValue"          : "1.1.1",
                                "effort"            : 48,
                                "constraintType"    : null,
                                "constraintDate"    : null,
                                "earlyStartDate"    : "2021-01-01T05:00:00.000Z",
                                "earlyEndDate"      : "2021-01-03T05:00:00.000Z",
                                "endDate"           : "2021-01-03T05:00:00.000Z"
                            }
                        ],
                        "durationUnit"      : "day",
                        "cls"               : "",
                        "direction"         : "Forward",
                        "manuallyScheduled" : false,
                        "percentDone"       : 51.5625,
                        "slackUnit"         : "day",
                        "critical"          : false,
                        "effortUnit"        : "hour",
                        "effortDriven"      : false,
                        "schedulingMode"    : "Normal",
                        "draggable"         : true,
                        "resizable"         : true,
                        "parentId"          : 1,
                        "parentIndex"       : 0,
                        "wbsValue"          : "1.1",
                        "effort"            : 384,
                        "constraintType"    : null,
                        "constraintDate"    : null,
                        "endDate"           : "2021-01-17T05:00:00.000Z",
                        "duration"          : 16
                    }
                ],
                "durationUnit"      : "day",
                "cls"               : "",
                "direction"         : "Forward",
                "manuallyScheduled" : false,
                "percentDone"       : 55.88461538461539,
                "slackUnit"         : "day",
                "critical"          : false,
                "effortUnit"        : "hour",
                "effortDriven"      : false,
                "schedulingMode"    : "Normal",
                "draggable"         : true,
                "resizable"         : true,
                "parentId"          : null,
                "parentIndex"       : 0,
                "wbsValue"          : "1",
                "effort"            : 624,
                "constraintType"    : null,
                "constraintDate"    : null,
                "endDate"           : "2021-01-27T05:00:00.000Z",
                "duration"          : 26
            }
        ]
    },
    columns: [{ type: 'name', field: 'name', width: 250 }],
    viewPreset: 'weekAndDayLetter',
    barMargin: 10
};

Thanks for the sample.

Any idea why the start and end dates aren't respected in the chart? They all end on the same end date despite being configured to end on different dates. Changing the start date does not reflect in the chart either. No matter what I change the start/end dates to the tasks do not change.

TaskDates.png
TaskDates.png (28.46 KiB) Viewed 941 times

Post by arcady »

Task start and end dates are both calculated fields (for automatically scheduled tasks). The Gantt revalidates them after data loading.
Long story short, their values get calculated based on the task restrictions (constraints and dependencies ..including inherited ones from the task parents).
You can find more details in this guide: https://bryntum.com/docs/gantt/#engine/gantt_events_scheduling.md


Post by Gantt_user »

arcady wrote: Fri May 07, 2021 9:00 am

Task start and end dates are both calculated fields (for automatically scheduled tasks). The Gantt revalidates them after data loading.
Long story short, their values get calculated based on the task restrictions (constraints and dependencies ..including inherited ones from the task parents).
You can find more details in this guide: https://bryntum.com/docs/gantt/#engine/gantt_events_scheduling.md

Awesome!

That was it.

Are there any tips/improvements I can do or things I can look out for when it comes to sluggish behavior/performance with the react wrapper, in particular when scrolling?


Post by saki »

Post please a sample that would demonstrate the low scrolling performance in React and we'll tune it if necessary.

The general rule would be to use as few JSX renderers as possible to avoid the React overhead, but we need to see the code to find out the true reason of the problem.


Post Reply