Our state of the art Gantt chart


Post by Ayurchenkoi »

Hello everyone. I bought a license (Gannt) and deployed the local version 4.1.0, but I cannot display the resource diagram (the ResourceHistogram component does not work or does not exist). Where can I get it, connect it? or is it in a Scheduler component that needs to be purchased separately?


Post by mats »

Did you look at the resourcehistogram demo in your /examples folder? It shows how to use it. https://bryntum.com/examples/gantt/resourcehistogram/

(the ResourceHistogram component does not work or does not exist)

Please describe in more details how you tried to implement it


Post by Ayurchenkoi »

Hi, we have React App written in TypeScript and try to implement TimeLine and Resource Grid on the Gantt page. In the gantt package examples, we have links to lib (written in vanilla JS). How we can add TimeLine and Grid Resource feature in React app? It looks like we need to add additional npm packages, but didn't find how to do it, or we need to copy "lib" folder to our project?


Post by saki »

You shouldn't need any other packages. <ResourceHistogram> and <TimeLine> are wrappers listed in the React Integration Guide. The React example that uses Gantt + Resource histogram is here:

https://bryntum.com/examples/gantt/frameworks/react/javascript/resource-histogram/build/index.html and React Timeline example is here:

https://bryntum.com/examples/gantt/frameworks/react/javascript/timeline/build/index.html

Source of these examples should give you a good starting point.


Post by Ayurchenkoi »

Hi, We have a problem with React App (TypeScript) we try to implement BryntumResourceHistogram and have the following problem: Not loading resource payload. We try to use JSON from the example provided in version 4.2.2 and do not have success also.

Attachments
Снимок экрана 2021-07-30 в 10.06.07.png
Снимок экрана 2021-07-30 в 10.06.07.png (51.98 KiB) Viewed 743 times
Снимок экрана 2021-07-30 в 10.04.35.png
Снимок экрана 2021-07-30 в 10.04.35.png (765.56 KiB) Viewed 743 times
Снимок экрана 2021-07-30 в 10.04.16.png
Снимок экрана 2021-07-30 в 10.04.16.png (394.02 KiB) Viewed 743 times

Post by saki »

Although it does not explain the problem, I have one comment:

In the code you posted you have projectConfigLocal function that returns a config option of the project. There's nothing wrong with it if you use it only in the histogram exactly as above. However, if you'd like to use the same project for the histogram and a Gantt then it wouldn't work because the config object is internally used to create an instance of ProjectModel.

Other than that, there is no obvious problem. Post please a showcase that we can run, investigate and debug to sort it out.


Post by Ayurchenkoi »

The problem is the following: I have a resource and have the task assigned to the resource but histograms show zero events and no green square for these resources with payload. There is no problem with connecting to Gantt this is working ok (this example is just for test JSON from examples provided with framework). You can see JSON in the Network panel on the screen above. Resouce with id 1 has assignments but nothing shows on Histogram, only the name of the resource.


Post by saki »

Yes, I understood the problem from the 2nd screenshot, however, we need to reproduce it to find the cause of it. Make please a showcase or steps to modify our demo to reproduce it.


Post by Ayurchenkoi »

Please find example project in attachment

Attachments
test-histogramm.zip
(3.63 MiB) Downloaded 83 times

Post by saki »

The problem is that project is passed to the histogram as object. Histogram is a defined at SchedulerPro level so it does not understand tasks property in json.

You have 2 options:

  1. change tasks to events in launch-saas.json
  2. create Gantt project and pass it to the histogram

The 2nd option would look like this:

import * as React from 'react'
import { useRef } from 'react'
import { BryntumResourceHistogram } from '@bryntum/gantt-react'
import { ProjectModel } from '@bryntum/gantt/gantt.umd.js'

export default function GanttResources() {

    const project = new ProjectModel({
        startDate: '2019-01-16',
        endDate: '2019-02-13',
        transport: {
            load: {
                url: '/data/launch-saas.json',
            },
        },
        autoLoad: true,
        autoSync: false,
    })

    const histogramConfig = {
        viewPreset: 'weekAndDayLetter',
        hideHeaders: false,
        rowHeight: 50,
        showBarTip: true,
        scheduleTooltipFeature: true,
        columns: [{ type: 'resourceInfo', field: 'name', showEventCount: true, width: 410 }],
        height: 400,
        columnLines: true,
        project: project,
        startDate: '2019-01-16',
    }

    // this works
    return <BryntumResourceHistogram {...histogramConfig} />
}

Note: Mind the startDate too.


Post Reply