Our state of the art Gantt chart


Post by spodeopieter2 »

https://www.bryntum.com/docs/gantt/#guides/integration/react.md

I have attempted to integrate brythum gantt into a fresh create-react-app project , and I am finding the documentation a little disappointing. For example the documentation says nothing about importing the css , also nothing on importing the project model into ganttConfig.js and there are typos in the react hooks section .
cont myGantt = props => {
ganttRef = userRef();

Post by saki »

We will improve the docs, thank you for reporting. The ticket is here: https://github.com/bryntum/support/issues/417

Meanwhile, you can use the attached zip as the starting point, just follow the packed README.md
Attachments
minimal.zip
(17.01 KiB) Downloaded 159 times

Post by spodeopieter2 »

Thank you very much saki , I really appreciate the effort you guys put into the forum.

Post by spodeopieter2 »

Just a quick question , why are you using hooks in the advanced demo? I am struggling to get hooks to work with the minimal demo , any tips or tricks that might help me ? I don't have too much experience using hooks yet, but I want to start using them. If I don't use hooks and rather class components, will I later run into issues/difficulties Implementing the panel ?

Post by saki »

There are many articles on the web discussing why to use hooks.

One of the best is this: https://blog.bitsrc.io/why-we-switched-to-react-hooks-48798c42c7f

Post by spodeopieter2 »

I really want to use hooks for their benefits , I was just wondering if there was specific/major reason you guys are using them on the advanced demo. I tried modifying your minimal example to use hooks , but I am finding it difficult. And the documentation for integration is still a bit of a problem , even the demo code on class components is not doing what I was expecting it to do.

here is my attempt to make hooks work with your minimal demo.
import { useEffect } from "react";
//import BryntumGantt from "../BryntumGantt.js";
import ganttConfig from "../gantt/ganttConfig";
import { Gantt } from "bryntum-gantt";

const Timeline = props => {
  const gantt = new Gantt(ganttConfig);

  useEffect(() => {
    //gantt.render("container");
  }, []);
  return null;
};

export default Timeline;
Do you perhaps have a minimal using hooks on hand ?

If you can give me a time estimation on when this https://github.com/bryntum/support/issues/417 issue will be fixed it would be very nice.

I am sorry if this is just me being stupid because I am not experienced with hooks, I'm new to the concept.

Post by saki »

What exactly do you want to achieve?

The main problem in the above code is that you should create new Gantt inside useEffect.

Note: I suppose that you have read the section Rendering in React Hooks of the Gantt Integration Guide.

Post by spodeopieter2 »

I am trying to build a minimal starting point using hooks , so that I can later implement something similar to the advanced example later on. But I have no idea what is going in the react-shared folder in the examples , so I want a clean starting point if that makes sense.
And I know you guys are working to change the examples https://github.com/bryntum/support/issues/108 , perhaps you can explain the shared folder in the examples to me ? or give me a time estimation on when the examples will be improved ?

I have read the react integration docs multiple times. Just to be clear I was very skeptical about the react integration section , because the code there has typos and did not seem to be working correctly , so I assumed that It might be garbage and did not take it seriously . I thought that trying to blend the advanced example into the minimal example might be a better option , so I was trying to do that.

But I just decided to give the code in the integration docs another shot and It is looking much better now, When I use the following code :
import React, { useEffect, useRef } from "react";
//import BryntumGantt from "../BryntumGantt.js";
import ganttConfig from "../gantt/ganttConfig";
import { Gantt } from "bryntum-gantt";

const Timeline = props => {
  const elementRef = useRef(),
    ganttRef = useRef();

  useEffect(() => {
    ganttRef.current = new Gantt({
      ...ganttConfig,
      appendTo: elementRef.current
    });
    return () => {
      if (ganttRef.current) {
        ganttRef.current.destroy();
      }
    };
  }, []);

  return <div ref={elementRef}></div>;
};

export default Timeline;
ganttConfig.js :
import { ProjectModel } from "bryntum-gantt";
export default {
  startDate: "2019-06-20 08:00:00",
  project: new ProjectModel({
    startDate: "2017-01-01",
    eventsData: [
      {
        id: 1,
        name: "Write docs",
        expanded: true,
        children: [
          {
            id: 2,
            name: "Proof-read docs",
            startDate: "2017-01-02",
            endDate: "2017-01-09"
          },
          {
            id: 3,
            name: "Release docs",
            startDate: "2017-01-09",
            endDate: "2017-01-10"
          }
        ]
      }
    ]
  }),

  columns: []

  // other config options
};
I get this output :
CaptureHook.PNG
CaptureHook.PNG (8.47 KiB) Viewed 3198 times
so still not what I want , but almost.

Just a note , I think that if you have your documentation and examples done in very different styles , you will confuse inexperienced react developers.

Post by pmiklashevich »

Examples are given there to show you different use cases. You can run any of them and make sure they work. Then adjust it to your needs, play around the code and even copy to your folder and use as a starting point in creating your own application. Basically each example requires 3 things, you can find them here for example Gantt/examples/react/javascript/basic/package.json:
  "dependencies": {
    "bryntum-gantt": "file:../../../../build",
    "bryntum-react-shared": "file:../../_shared/build",
    "bryntum-resources": "file:../../../_shared",
1. bryntum library. We call this package 'bryntum-gantt'
2. bryntum additional sources required by our examples. We call this package 'bryntum-resources'. It contains some css, icons, fonts, etc
3. bryntum react wrapper. We call it 'bryntum-react-shared'. It's a React implementation of the Gantt. It uses Gantt vanilla code inside and provide React way of interacting with the Gantt API.

So to create your application you just need to make sure you copied those 3 things (outside of the React application folder) and specify correct paths to those sources. Then run 'npm install' and you're able to use them in your application.

Please start from one of our examples and try to implement what you need. If you get stuck, please zip up your code and attach here, so we have a runnable context to look at.

Pavlo Miklashevych
Sr. Frontend Developer


Post by saki »

Your code looks good now. Very well done!

_shared folder is one place from where all examples use wrappers. Section "Copy React wrappers to the project tree" of the Integration guide explains that you can just take files and copy them into your project if you want.

The screenshot shows that you probably need height:100vh; on the Gantt container.

Post Reply