Our state of the art Gantt chart


[REACT] using setTimeSpan, time span disappears

Post Reply

Post by derulker »

Hi,

I am having an issue with the setTimeSpan function where my new time range will flash on the chart for a moment, and then be replaced by the earliest start date, and latest end date of my data.

I was able to reproduce the behavior in the basic gantt example: https://bryntum.com/examples/gantt/basic/

When I run the code:

import { Gantt, ProjectModel } from '../../build/gantt.module.js?449864';
import shared from '../_shared/shared.module.js?449864';
/* eslint-disable no-unused-vars */

const project = new ProjectModel({
    transport : {
        load : {
            url : '../_datasets/launch-saas.json'
        }
    }
});

const gantt = new Gantt({
    appendTo : 'container',

project,

dependencyIdField : 'sequenceNumber',

columns : [
    { type : 'name', width : 250 }
],

// Custom task content, display task name on child tasks
taskRenderer({ taskRecord }) {
    if (taskRecord.isLeaf && !taskRecord.isMilestone) {
        return taskRecord.name;
    }
}
});

project.load();

gantt.setTimeSpan(new Date(2019, 0, 13), new Date(2019, 1, 3));

I see the 3 day range flash for a second, and then it is replaced. Is there a different way I should be using setTimeSpan?

Thanks

Post by mats »

Better to configure the Gantt with startDate/endDate values directly, then no need for calling setTimeSpan

Post by derulker »

We need to update the start and end date dynamically, so we use setTimeSpan to do so. Is there another way to update the start and end dates?

Post by mats »

setTimeSpan is the right API, just for the initial display - it's more efficient to set the start / end directly on your gantt config. In your test case, nothing is configured on the Gantt timeline - this puts it into a mode where it reads start/end from the data to show project contents.

Post by derulker »

Okay thanks, that fixes this issue, but now there's another error. When I set startDate and endDate on the gantt object and then call setTimeSpan with a date range before my initial start and end I see this error:

Uncaught Error: Invalid start/end dates. Start date must less than end date. Start date: Fri Jan 01 2021 00:00:00 GMT-0500 (Eastern Standard Time). End date: Fri Jan 01 2021 00:00:00 GMT-0500 (Eastern Standard Time).
    at TimeAxis.internalOnReconfigure (webpack-internal:///./node_modules/@bryntum/gantt/gantt.module.js:555)
    at TimeAxis.reconfigure (webpack-internal:///./node_modules/@bryntum/gantt/gantt.module.js:555)
    at TimeAxis.setTimeSpan (webpack-internal:///./node_modules/@bryntum/gantt/gantt.module.js:555)
    at Object.setEndDate (webpack-internal:///./node_modules/@bryntum/gantt/gantt.module.js:570)
    at Object.changeEndDate (webpack-internal:///./node_modules/@bryntum/gantt/gantt.module.js:570)
    at Object.set (webpack-internal:///./node_modules/@bryntum/gantt/gantt.module.js:498)
    at applyPropValue (webpack-internal:///./node_modules/@bryntum/gantt-react/WrapperHelper.js:140)
    at eval (webpack-internal:///./node_modules/@bryntum/gantt-react/WrapperHelper.js:556)
    at Array.forEach (<anonymous>)
    at shouldComponentUpdate (webpack-internal:///./node_modules/@bryntum/gantt-react/WrapperHelper.js:551)

For example, I set startDate to Jan 1 2021 and endDate to Dec 31 2021 and then try calling setTimeSpan with the range Nov 1 2020 - Dec 1 2020.

Looks like setTimeSpan checks the validity of the new date range before it's completely set.

Post by mats »

Can you please upload the test case so we can run this and see it ourselves to debug?

Post Reply