How to initiate gantt chart declarative way?

[galih56]

I have personal project to practice my js skill. I found this repo and i'm interested to give a try.
I want to make a component that contain gantt chart. I tried this code below. But it was rendered and duplicated.

const ganttchart=(props)=>{    
    const data = [
        {
          id: 'NURSES+Anne', name: 'Anne',
          activities: [
              {
              id: 'SHIFTS+Emergency+Monday+2+8',
              name: 'Emergency',
              start: 1474880400000,
              end: 1474902000000,
              },
          ],
        },
    ];
    const config = {
        data: {
          resources: {
              data: data, 
              activities: 'activities',
              name: 'name', 
              id: 'id',
          },
          activities: {
              start: 'start',   end: 'end',    name: 'name', 
          },
        },
        toolbar: [
        'title',   'search',   'separator',
        {
            type: 'button',
            text: 'Refresh',
            fontIcon: 'fa fa-refresh fa-lg',
            onclick: function(ctx) {
            ctx.gantt.draw();
            },
        },
        'fitToContent',  'zoomIn', 'zoomOut',
        ],
        title: 'Simple Gantt',  
    };
    setTimeout(() => {
      new Gantt('gantt', config); // eslint-disable-line no-new
    }, 0);
    return (<div id="gantt" style={{minHeight:'400px !important'}}></div>)
}
export default ganttchart;

I also tried with declarative way like the code below

const ganttchart=(props)=>{    
    const data = [
        {
          id: 'NURSES+Anne',
          name: 'Anne',
          activities: [
              {
              id: 'SHIFTS+Emergency+Monday+2+8',
              name: 'Emergency',
              start: 1474880400000,
              end: 1474902000000,
              },
          ],
        },
    ];
    const config = {
        data: {
        //....
        },
        toolbar: [
        'title',   'search',   'separator',
        {
            type: 'button',
            text: 'Refresh',
            fontIcon: 'fa fa-refresh fa-lg',
            onclick: function(ctx) {
            ctx.gantt.draw();
            },
        },
        'fitToContent',  'zoomIn', 'zoomOut',
        ],
        title: 'Simple Gantt',  
    };
  return (<GanttChart config={config} />);
}
export default ganttchart;

I use both ways inside a parent component like this :

function parentComponent{
  return(
        <div>
           <GanttChart detailProject={data} />      
        </div>
  )
}                         

When i use the first one, gantt chart was successfuly rendered but it duplicates several times

here is the result :

When i use the second one, gantt chart was not rendered and threw an error

[galih56]

I finally found the problem. It's the package 'ibm-gantt-chart-react'.
import GanttChart from 'ibm-gantt-chart-react';
when i console.log(GanttChart), it shows 'undefined' value.
But i cannot fix it

[delhoume]

Here https://github.com/IBM/gantt-chart/tree/master/packages/ibm-gantt-chart-react is an example of how to use the Gantt component in React

[jeremydrichardson]

I'm having the same issue under different circumstances.

It seems to be tied to how many times the parent component renders.

In my situation I'm passing the data from a react hook that loads the data from an api. However, it seems the data is changing so it has to re-render the parent component and then instantiates a new GanttChart when it does that with the updated data instead of updating the existing GanttChart.

[TomasHubelbauer]

I had to change my code like so:

import { GanttChart } from 'ibm-gantt-chart-react';
import 'ibm-gantt-chart/dist/ibm-gantt-chart.css';

Since this package doesn't have associated TypeScript typings, I also had to add types.d.ts with this to make my CRA+TS based project to build. See my comment in #35.