Our state of the art Gantt chart


Post by samuelms »

Gantt data loaded from tasks seems to ignore the startDate of individual tasks and instead uses the earliest found start date.

Notice in this screenshot that the start dates for all tasks is on 2023-08-15. I played with the data and gantt seems to use the earliest task start date found (not the first).

2024-07-09_18-38-39.png
2024-07-09_18-38-39.png (101.61 KiB) Viewed 97 times
    const project = useMemo(() => ({
        calendar: 'general',
        transport: {
            load: {
                url: '/api/gantt/jobs',
            },
        },
        autoLoad: true,
        // This config enables response 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 ganttProps: BryntumGanttProps = useMemo(() => ({
        project,
        // resourceImageFolderPath : '../_shared/images/users/',
        viewPreset: 'weekAndDayLetter',
        columnLines: true,
        columns: [
            { type: 'sequence', minWidth: 50, width: 50, text: '', align: 'right', resizable: false },
            { type: 'name', width: 280 },
            { type: 'percent', text: '% Completed', field: 'percentDone', showValue: false, width: 160 },
            { type: 'resourceassignment', text: 'Assigned Resources', showAvatars: true, width: 160 }
        ],
        startDate: '2023-08-01',
        endDate: '2024-07-13',
    }), [project]);

data

{
    "tasks": {
        "rows": [
            {
                "id": 1,
                "name": "Hobbit Mining Pit",
                "percentDone": 44,
                "duration": 755,
                "children": [
                    {
                        "id": "1-2",
                        "name": "Pre-Construction",
                        "startDate": "2023-08-15",
                        "endDate": "2024-02-05",
                        "percentDone": 190,
                        "duration": 174
                    },
                    {
                        "id": "1-3",
                        "name": "Superstructure",
                        "startDate": "2024-02-06",
                        "endDate": "2024-09-07",
                        "percentDone": 73,
                        "duration": 214
                    },
                    {
                        "id": "1-4",
                        "name": "Project Hangover and Operations",
                        "startDate": "2024-09-08",
                        "endDate": "2025-09-08",
                        "percentDone": 0,
                        "duration": 365
                    },
                    {
                        "id": "1-6",
                        "name": "Design and Planning",
                        "startDate": "2024-06-01",
                        "endDate": "2024-06-08",
                        "percentDone": 558,
                        "duration": 7
                    }
                ]
            },
            {
                "id": 2,
                "name": "Isengard Tower",
                "percentDone": 0,
                "duration": 189,
                "children": [
                    {
                        "id": "2-9",
                        "name": "Occupancy and Closeout",
                        "startDate": "2024-08-03",
                        "endDate": "2024-08-15",
                        "percentDone": 0,
                        "duration": 12
                    },
                    {
                        "id": "2-10",
                        "name": "Enclosure",
                        "startDate": "2024-10-01",
                        "endDate": "2024-11-02",
                        "percentDone": 0,
                        "duration": 32
                    },
                    {
                        "id": "2-11",
                        "name": "Exterior Landscaping",
                        "startDate": "2025-02-01",
                        "endDate": "2025-02-08",
                        "percentDone": 0,
                        "duration": 7
                    }
                ]
            }
        ]
    },
    "resources": {
        "rows": [
            {
                "id": "e-334",
                "name": "Egon Stetmann",
                "city": "El Cajon"
            },
            {
                "id": "e-335",
                "name": "Abathur Zerg",
                "city": "San Diego"
            },
            {
                "id": "e-336",
                "name": "Matt Horner",
                "city": "San Diego"
            },
            {
                "id": "e-337",
                "name": "Queen of Blades",
                "city": "San Diego"
            },
            {
                "id": "e-338",
                "name": "Fenix Protos",
                "city": "Santee"
            },
            {
                "id": "e-339",
                "name": "Zeratul Protos",
                "city": "San Diego"
            },
            {
                "id": "e-340",
                "name": "Karax Protoss",
                "city": "San Diego"
            },
            {
                "id": "e-341",
                "name": "Alexei Stukov",
                "city": "El Cajon"
            },
            {
                "id": "e-342",
                "name": "Arcturus Mengsk",
                "city": "San Diego"
            },
            {
                "id": "e-344",
                "name": "Michael Smith"
            },
            {
                "id": "e-345",
                "name": "Dehaka OgZerg",
                "city": "Poway"
            },
            {
                "id": "e-346",
                "name": "Artanis Protos",
                "city": "San Diego"
            },
            {
                "id": "e-347",
                "name": "Samir Duran",
                "city": "San Diego"
            },
            {
                "id": "e-348",
                "name": "Nova Terra",
                "city": "San Diego"
            },
            {
                "id": "e-349",
                "name": "Rory Swann",
                "city": "Spring Valley"
            },
            {
                "id": "e-350",
                "name": "Gabriel Tosh",
                "city": "San Diego"
            },
            {
                "id": "e-351",
                "name": "Valerian Mengsk",
                "city": "San Diego"
            },
            {
                "id": "e-442",
                "name": "Ryan Dude",
                "city": "Portland"
            }
        ]
    },
    "assignments": {
        "rows": [
            {
                "id": 2,
                "event": "1-2",
                "resource": "e-334"
            },
            {
                "id": 3,
                "event": "1-3",
                "resource": "e-334"
            },
            {
                "id": 4,
                "event": "1-4",
                "resource": "e-334"
            }
        ]
    }
}

Using gantt v6

  "dependencies": {
    "@bryntum/gantt": "npm:@bryntum/gantt-trial@^6.0.0",
    "@bryntum/gantt-react": "^6.0.0",

Post by ghulam.ghous »

Hi,

I have checked and the issue is how you are configuring the gantt. You will have to move your config to static file or use useState hook instead. We have documentation about that here: https://bryntum.com/products/gantt/docs/guide/Gantt/integration/react/guide#best-practices-for-configuration-management

Upon moving your config to a static file ganttConfig.ts all worked fine. Please try for yourself.

/**
 * Application configuration
 */
import React from "react";

const ganttConfig = {
  project: {
    calendar: "general",
    transport: {
      load: {
        url: "data/launch-saas.json",
      },
    },
    autoLoad: true,
    // This config enables response 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,
  },
  viewPreset: "weekAndDayLetter",
  columnLines: true,
  columns: [
    {
      type: "sequence",
      minWidth: 50,
      width: 50,
      text: "",
      align: "right",
      resizable: false,
    },
    { type: "name", width: 280 },
    {
      type: "percent",
      text: "% Completed",
      field: "percentDone",
      showValue: false,
      width: 160,
    },
    {
      type: "resourceassignment",
      text: "Assigned Resources",
      showAvatars: true,
      width: 160,
    },
  ],
  startDate: "2023-08-01",
  endDate: "2024-07-13",
};

export { ganttConfig };

Regards,
Ghous


Post by samuelms »

I received an email with advice that fixed the issue!

I hope it's ok to share that email here:

In gantt, tasks start/end dates always gets recalculated. And if you don't
want this to happen you'd need to set
https://bryntum.com/products/gantt/docs/api/Gantt/model/TaskModel#field-manuallyScheduled
to true on every task that you want it to be scheduled manually.

Please check this guide to understand how task scheduling works
https://bryntum.com/products/gantt/docs/guide/engine/gantt_events_scheduling

Best regards,
Tasnim


Post by ghulam.ghous »

Hi Samuel,

That was my colleague who answered it here. That is an alternative. Actually I kinda got it wrong. There is a new config introduced on project model in the 6.0 version autoSetConstraints which makes sure the loaded data should stay on the dates provided. Read here: https://bryntum.com/products/gantt/docs/api/Gantt/model/ProjectModel#config-autoSetConstraints.

I just checked again, and all you want to set is autoSetConstraints: true on your project model and everything is gonna be working fine.

const project = useMemo(() => ({
        calendar: 'general',
       autoSetConstraints: true,
        transport: {
            load: {
                url: '/api/gantt/jobs',
            },
        },
        autoLoad: true,
        // This config enables response 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
    }), []);

Can you please try this and let us know?


Post by samuelms »

Yes, setting

autoSetConstraints : true

on the project worked.


Post Reply