Our state of the art Gantt chart


Post by stevend »

Is there an example on how to setup a Gantt with linked ResourceHistogram in pure React? Until now, I've based my code on the existing (non-react) example, but I would prefer to use the pure react way of working, as I'm switching to 4.1.0. How do I link both components? Any help would be greatly appreciated.


Post by pmiklashevich »

Hello!

We have no React resource-histogram demo in Gantt, but we have such demo in SchedulerPro. You can download the trial to see the sources (SchedulerPro/examples/frameworks/react/javascript/resource-histogram). Basically you need 2 components: <BryntumGantt/> and <BryntumResourceHistogram/> and corresponding configurations. The list of supported wrappers is here: https://www.bryntum.com/docs/gantt/#guides/integration/react.md#wrappers

Cheers!

Pavlo Miklashevych
Sr. Frontend Developer


Post by stevend »

Thanks for the tip. That really helped! I almost got it working now. My main view now looks more or less like this

    const ganttRef = useRef(null);
    const histogramRef = useRef(null);

    useEffect(() => {
        histogramRef.current.instance.partner = ganttRef.current.instance;
    });

    return (
        <Fragment>

            <SplitPane split="horizontal" primary="first" defaultSize='75vh' >
                <BryntumGantt ref={ganttRef}
                              project={projectConfig}
                              taskMenuFeature={taskMenuFeatureConfig}
                              columns={planningColumnConfig}
                              {...ganttConfig}
                />
                <BryntumResourceHistogram ref={histogramRef}
                                          project={projectConfig}
                                          {...histogramConfig}
                />
            </SplitPane>
        </Fragment>
    )

This seems to works for most of the cases, ie scrolling the Gantt or Histogram view left or right, makes the other view scroll too.
But there are some issues:

  1. Initially the Gantt view and histogram view are not the same width. Once I resize on, the other changes to the correct size. But ideally they should already have the same width from the start
  2. When I manipulate the Gantt view via a toolbar (zoom in/out, shift left/right), the histogram view doesn't follow. My toolbar is registered in the ganttConfig as tbar: {type: PlanningToolbar.type},, and upon clicking the previous button, calls the following code
            this.gantt.shiftPrevious();
        }
    This shifts the Gantt view left, but not the resourcesHistogram. But weirdly, I also have a button to jump to today's date, via the following code
        onScrollToTodayClick() {
            this.gantt.scrollToNow({block: "center"})
        }
    and this does scroll both views.

Post by pmiklashevich »

When I manipulate the Gantt view via a toolbar (zoom in/out, shift left/right), the histogram view doesn't follow. My toolbar is registered in the ganttConfig as tbar: {type: PlanningToolbar.type},, and upon clicking the previous button, calls the following code

Reproduced in Scheduler Pro demo. Ticket here: https://github.com/bryntum/support/issues/2695

Initially the Gantt view and histogram view are not the same width. Once I resize on, the other changes to the correct size. But ideally they should already have the same width from the start

Reproduced this one too. Seems the bug appears when both panels are rendered and then get partnered (on the fly, like it's implemented in the React demo). Ticket here: https://github.com/bryntum/support/issues/2696

I faced with another problem, that the locked grid width of the primary partner gets shrunk to match the histogram. The adjustment happens because the partnering happens on the fly, and since both components have different sizes, dates, timeline configs, etc, the components adjust their values. To make it more or less predictable you can comment out this line:

useEffect(() => {
        histogramRef.current.instance.partner = ganttRef.current.instance;
    });

Then setup column width to match top and bottom locked grid width. And then return the partnering back. That should help to avoid initial width problem.

We are going to add a new React Gantt Resource Histogram demo. I can share the code here, so you can compare with yours. The bugs are reproducible there too. We will address.

Best regards,
Pavel

Attachments
resource-histogram.zip
(2.57 MiB) Downloaded 114 times

Pavlo Miklashevych
Sr. Frontend Developer


Post by stevend »

Thanks!


Post Reply