[REACT] TypeScript - Bryntum Gantt - Resource histogram load file json data

[trunggosei]

I download the code "resource-histogram" from:
https://bryntum.com/products/gantt/examples/frameworks/react/javascript/resource-histogram/build/

And I read loadInlineData function in: https://bryntum.com/products/gantt/docs/api/Gantt/model/ProjectModel#function-loadInlineData

I want to load data from loadInlineData, but the Chart shows message "No records to display" (console.log('Raw projectFileData:') still show data)
Could you help me?
This is my code:

---

// this is main file:

import {
  BryntumGantt,
  BryntumGanttProjectModel,
  BryntumResourceHistogram,
  BryntumSplitter
} from '@bryntum/gantt-react';
import { Fragment, useEffect, useRef } from 'react';
import { ganttProps, histogramProps, projectProps } from './GanttConfig';

import projectFileData from './data1.json';
import './styles/CustomStyle.scss';

export default function CapacityProjection() {
  const projectRef = useRef<BryntumGanttProjectModel>(null);
  const ganttRef = useRef<BryntumGantt>(null);
  const histogramRef = useRef<BryntumResourceHistogram>(null);

  useEffect(() => {
    if (projectFileData && projectRef.current?.instance) {
      // Raw data
      console.log('Raw projectFileData:', JSON.stringify(projectFileData));
      projectRef.current.instance.loadInlineData(projectFileData);
    }

// setup partnership between gantt and histogram
if (histogramRef.current?.instance && ganttRef.current?.instance) {
  histogramRef.current.instance.addPartner(ganttRef.current.instance);
}
  }, []);

  return (
    <Fragment>
      <BryntumGanttProjectModel ref={projectRef} {...projectProps} />
      <BryntumGantt ref={ganttRef} {...ganttProps} project={projectRef} />
      <BryntumSplitter />
      <BryntumResourceHistogram ref={histogramRef} {...histogramProps} project={projectRef} />
    </Fragment>
  );
}

---

// this is config file:

export const projectProps = {
  startDate: '2019-01-16',
  endDate: '2019-02-13',
  // transport: {
  //   load: {
  //     url: './data1.json'
  //   }
  // },
  autoLoad: true,
  autoSetConstraints: true,
  validateResponse: true
};

export const ganttProps = {
  dependencyIdField: 'sequenceNumber',
  resourceImageFolderPath: 'users/',
  startDate: '2019-01-11',
  endDate: '2019-03-24',
  viewPreset: 'weekAndDayLetter',
  columnLines: true,
  labelsFeature: {
    before: {
      field: 'name',
      editor: {
        type: 'textfield'
      }
    }
  },
  columns: [
    { type: 'name', width: 280 },
    { type: 'resourceassignment', showAvatars: true, width: 170 }
  ]
};

export const histogramProps = {
  resourceImagePath: 'users/',
  startDate: '2019-01-11',
  endDate: '2019-03-24',
  viewPreset: 'weekAndDayLetter',
  hideHeaders: true,
  rowHeight: 50,
  showBarTip: true,
  scheduleTooltipFeature: false,
  columns: [{ type: 'resourceInfo', field: 'name', showEventCount: false, width: 410 }]
};

---

Result has no data:

No data.png (165.15 KiB) Viewed 206 times

---

And if use "url: './data1.json'" then result has data:

export const projectProps = {
  startDate: '2019-01-16',
  endDate: '2019-02-13',
  transport: {
    load: {
      url: './data1.json'
    }
  },
  autoLoad: true,
  autoSetConstraints: true,
  validateResponse: true
};

Has data.png (225.51 KiB) Viewed 206 times

[ghulam.ghous]

You are loading the data using loadInline method to load the data. But the data is not in the correct format, you are providing to loadInlineData method. It should be something like this:

await project.loadInlineData({
    tasksData : [
        { id : 1, name : 'Proof-read docs', startDate : '2017-01-02', endDate : '2017-01-09' },
        { id : 2, name : 'Release docs', startDate : '2017-01-09', endDate : '2017-01-10' }
    ],
    resourcesData : [
        { id : 1, name : 'Arcady' },
        { id : 2, name : 'Don' }
    ],
    dependenciesData : [
        { fromTask : 1, toTask : 2 }
    ],
    assignmentsData : [
         { 'event' : 1, 'resource' : 1 },
         { 'event' : 2, 'resource' : 2 }
     ]
     calendarsData    : [
         {
             id        : 111,
             name      : 'My cool calendar',
             intervals : [
                 {
                     recurrentStartDate : 'on Sat',
                     recurrentEndDate   : 'on Mon',
                     isWorking          : false
                 }
             ]
         }
     ]
});

But currently as you can see the format in the console output, it has incorrect format, for example for tasks, it is:

"tasks" : { "rows" : [//tasks data]}

When it should be

"tasksData" : [//tasks data]

[trunggosei]

Thank you for your answer.
I use original json data from the example: https://bryntum.com/products/gantt/examples/frameworks/react/javascript/resource-histogram/build/
The json file has:

"tasks" : {"rows" : [...]}

example_data.png (192.92 KiB) Viewed 184 times

[trunggosei]

I've resolved the issue. Instead of passing projectData directly to loadInlineData, I'll pass the corresponding components separately

      const { tasks, resources, assignments, calendars, project } = projectData;
      projectRef.current.instance.loadInlineData({
        tasksData: tasks?.rows || [],
        resourcesData: resources?.rows || [],
        assignmentsData: assignments?.rows || [],
        calendarsData: calendars?.rows || [],
        projectData: project || {}
      });

[ghulam.ghous]

Thanks for letting us know, I have opened a ticket to warn user whenever wrong params are used to loadData using loadInlineData method, so they shouldn't get stuck. https://github.com/bryntum/support/issues/11248