Our state of the art Gantt chart


Post by chenghuang »

Use this way to initialize the gantt graph, and then the project startDate cannot be initialized.

gantt.png
gantt.png (35.26 KiB) Viewed 1187 times

And my gantt's config is not init project params.

config.png
config.png (31.93 KiB) Viewed 1187 times

The error is as follows

gantt_error.png
gantt_error.png (12 KiB) Viewed 1187 times

Post by tasnim »

Hi,

It's hard to understand what's wrong. We need to dive into the code and need to run it. Could you please upload a runnable test case here so we can debug it?


Post by chenghuang »

Okey.
Below is my demo.
I tried two methods to initialize the project start date, but neither of them worked properly.

import React, { Fragment } from 'react';

import { BryntumDemoHeader, BryntumGantt, BryntumThemeCombo } from '@bryntum/gantt-react';
import './lib/StatusColumn';
import './lib/GanttToolbar';

import './App.scss';

const tasks = [
    {
        "duration": 1,
        "endDate": "2023-02-03",
        "id": 1,
        "isLeaf": 1,
        "manuallyScheduled": true,
        "name": "task 1",
        "note": "",
        "parentId": 0,
        "parentIndex": 0,
        "percentDone": 0,
        "startDate": "2023-02-02",
        "children": [
            {
                "children": [],
                "duration": 1,
                "endDate": "2023-01-03",
                "id": 2,
                "isLeaf": 1,
                "manuallyScheduled": true,
                "name": "task 2",
                "note": "",
                "parentId": 1,
                "parentIndex": 0,
                "percentDone": 0,
                "startDate": "2023-02-02"
            }
        ]
    }
]

const dependencies =  [
    {
        "fromTask": 1,
        "toTask": 2,
        "type": 2,
        "lag": 1
    }
]

const resources = [
    { "id" : 1, "name" : "Celia", "city" : "Barcelona", "calendar" : null, "image" : "celia.jpg" },
    { "id" : 2, "name" : "Lee", "city" : "London", "calendar" : null, "image" : "lee.jpg"  },
    { "id" : 3, "name" : "Macy", "city" : "New York","calendar" : null, "image" : "macy.jpg"  },
    { "id" : 4, "name" : "Madison", "city" : "Barcelona", "calendar" : null,"image" : "madison.jpg"  },
    { "id" : 5, "name" : "Rob", "city" : "Rome", "calendar" : "business", "image" : "rob.jpg"  },
    { "id" : 6, "name" : "Dave", "city" : "Barcelona", "calendar" : "night", "image" : "dave.jpg"  },
    { "id" : 7, "name" : "Dan", "city" : "London", "calendar" : "night", "image" : "dan.jpg"  },
    { "id" : 8, "name" : "George", "city" : "New York", "calendar" : null, "image" : "george.jpg"  },
    { "id" : 9, "name" : "Gloria", "city" : "Rome", "calendar" : null, "image" : "gloria.jpg"  },
    { "id" : 10, "name" : "Henrik", "city" : "London", "calendar" : null, "image" : "henrik.jpg"  }
]

const assignments = [

]

const columns = [
    { type: 'wbs' },
    { type: 'name', width: 250 },
    { type: 'startdate' },
    { type: 'duration' },
    { type: 'resourceassignment', width: 120, showAvatars: true },
    { type: 'percentdone', showCircle: true, width: 70 },
    {
        type  : 'predecessor',
        width : 112
    },
    {
        type  : 'successor',
        width : 112
    },
    { type: 'schedulingmodecolumn' },
    { type: 'calendar' },
    { type: 'constrainttype' },
    { type: 'constraintdate' },
    { type: 'statuscolumn' },
    {
        type  : 'date',
        text  : 'Deadline',
        field : 'deadline'
    },
    { type: 'addnew' }
]

const ganttConfig  = {
    tbar : { type: 'gantttoolbar' },
    
dependencyIdField : 'wbsCode', newTaskDefaults: { duration: 1, manuallyScheduled: true }, // project: { // "startDate" : "2019-01-20", the first method // }, resourceImageFolderPath : 'users/', subGridConfigs: { locked: { flex : 3 }, normal: { flex : 4 } }, columnLines : false, rollupsFeature: { disabled : true }, baselinesFeature: { disabled : true }, progressLineFeature: { disabled : true, statusDate : new Date(2019, 0, 25) }, filterFeature : true, dependencyEditFeature : true, timeRangesFeature : { showCurrentTimeLine : true }, labelsFeature: { left: { field : 'name', // editor : { // type : 'textfield' // } } } }; const App = props => { return <> <BryntumGantt tasks={tasks} assignments={assignments} dependencies={dependencies} resources={resources} columns={columns} // project={{startDate: '2020-03-10'}} the second method {...ganttConfig} />; </> }; export default App;

Post by chenghuang »

So how should this problem be solved?


Post by marcio »

Hey chenghuang,

You can use the following to set the startDate

 <BryntumGantt
            tasks={tasks}
            assignments={assignments}
            dependencies={dependencies}
            resources={resources}
            columns={columns}
            startDate={'2020-03-10'}
            {...ganttConfig}
        />;

Best regards,
Márcio


Post by chenghuang »

Thank you, but I have also tried your method, the project start time will read the earliest time in the task list, not the startDate I configured.


Post by marcio »

Hey chenghuang,

I'm sharing an example project with the startDate set as I shared with you and a screenshot of that start date being displayed as I configured it.

Attachments
basic_example.zip
(1.92 MiB) Downloaded 40 times
Screenshot 2023-05-09 at 13.01.05.png
Screenshot 2023-05-09 at 13.01.05.png (312.33 KiB) Viewed 1110 times

Best regards,
Márcio


Post by chenghuang »

Hey marcio,
I downloaded the demo you shared with me and opened it to see that the startDate is '2020-03-10', but your demo shows the earliest time in the task list.


Post by marcio »

Hey chenghuang,

That's the expected behavior if you change for something like

startDate={'2020-10-01'}

You'll change the start of the project to be like the attached screenshot.

What do you want to achieve exactly? Change the view to be earlier than the project start date?

Attachments
Screenshot 2023-05-10 at 14.05.23.png
Screenshot 2023-05-10 at 14.05.23.png (182.05 KiB) Viewed 1085 times

Best regards,
Márcio


Post by chenghuang »

yeah, my project start time is deterministic, but the task's earliest start time is not necessarily equal to the project start time。


Post Reply