Our state of the art Gantt chart


Post by phil714 »

Hi,

I've had this bug for a couple weeks and after trying to pinpoint the origin, I'm almost certain this is the reason. I used the field inlineData on the ProjectModel to load my tasks but whenever the tasks have a startDate and endDate that are null (or undefined), I have an error when the project load. I also have errors when trying to TaskDragCreate and the component becomes unusable. Here's the error:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'getTime')
    at Function.max (gantt.umd.js:31584)
    at Gantt.internalOnProjectRefresh (gantt.umd.js:127777)
    at ProjectModel.trigger (gantt.umd.js:53953)
    at EngineReplica.finalizeCommitAsync (gantt.umd.js:96556)
    at EngineReplica.doCommitAsync (gantt.umd.js:1295)
    at async ProjectModel.commitLoad (gantt.umd.js:102217)
    at async ProjectModel.loadInlineData (gantt.umd.js:102211)

And here's my code, I modified the react/typescript/basic example although I don't think this is related to React but to the loadInlineData function.

// AppConfig.ts

/**
 * Application configuration
 */
 import { GanttConfig } from '@bryntum/gantt/gantt.umd.js';

 const ganttConfig: Partial<GanttConfig> = {
     columns: [{ type: 'name', field: 'name', width: 250 }],
     viewPreset: 'weekAndDayLetter',
     barMargin: 10
 };
 
 export { ganttConfig };
// App.tsx

/**
 * Main Application script
 */
// Polyfills for Edge <= 18. Remove this line if you don't need support for it.
import 'core-js/stable';

import React, { Fragment, FunctionComponent, useEffect, useRef } from 'react';

import { BryntumDemoHeader, BryntumThemeCombo, BryntumGantt } from '@bryntum/gantt-react';
import { ganttConfig } from './AppConfig';
import './App.scss';
import { Gantt, ProjectModel } from '@bryntum/gantt/gantt.umd.js';


export const projectModel = new ProjectModel({
    // This config enables responses validation and dumping of found errors to the browser console.
    // It's meant to be used as a development stage helper only so please set it to false for production systems.
    validateResponse: true,
  });


const App: FunctionComponent = () => {
    const ganttRef = useRef<{ instance: Gantt }>();

useEffect(() => {
  projectModel.id = '9uow1wzae4knvnyv4c91y';
  projectModel.startDate = '2021-10-01';
  projectModel.endDate = '2021-10-15';
  
  const eventsData2 = [{
      id: 1,
      name: 'Parent task 1',
      startDate: null,
      endDate: null,
      children: [{
          id: 2,
          name: 'Child task 1',
          startDate: null,
          endDate: null,
      }, {
          id: 3,
          name: 'Child task 2',
          startDate: null,
          endDate: null,
      }, {
          id: 4,
          name: 'Child task 3',
          startDate: null,
          endDate: null,
      }]
  }]
  
  const inlineData = {
      eventsData: eventsData2,
  };
  
  projectModel.inlineData = inlineData;
  
});

return (
    <Fragment>
        <BryntumDemoHeader
            title="React Basic demo with TypeScript"
            href="../../../../../#example-frameworks-react-typescript-basic"
            children={<BryntumThemeCombo />}
        />
        <BryntumGantt {...ganttConfig} project={projectModel} ref={ganttRef} />
    </Fragment>
);
};

export default App;

Post by saki »

Well, you are giving the scheduling engine an impossible task: "Engine, you have no dates, no durations, yet, schedule these events!"

Truth is that the engine should not crash but give a console log or a popup (this feature will come in a later version), nevertheless, such data cannot be used for scheduling.

Try to add at least durations and dependencies and remove nulls until the data is valid and loads.


Post by arcady »

As Saki told the Gantt should not crash. There was a similar report recently but I cannot find a ticket now. So I've made a new one: https://github.com/bryntum/support/issues/3462
Thank you for the report.


Post Reply