[REACT] How to change the color of a particular bar in resource histogram

[NBhavadharani]

Hi Team,

In our case, on click of a button the related bars of the resource histogram should change its color and revert to normal by the second click .
How can I proceed , Is there any function for the same?

[mats]

In our case, on click of a button the related bars of the resource histogram

What are the "related bars"? You wish to highlight the bars for one resources, for one time-interval?

[NBhavadharani]

What I meant was I want to highlight particular task with certain field values .
for example , if there is a field namely "HoldStatus" then those tasks with "holdstatus : yes" should be highlighted.

[mats]

Histogram visualises the total time for each resource, it's not (yet) broken down into per-task elements I'm afraid.

[arcady]

Do you mean you need to highlight the histogram bars related to a certain task? As Mats wrote the histogram aggregates allocation info for all resource assignments. And its bars are grouped by the current time axis ticks. So such highlighting won't be very accurate even if implemented.

[NBhavadharani]

Okay , can I implement this in schedulerPro ?

[mats]

It will not be easy I'm afraid, we could implement it for you as part of a Professional Services arrangement. Please contact our sales if interested. Details: https://www.bryntum.com/services/

[arcady]

Provide a function to https://www.bryntum.com/docs/scheduler-pro/#SchedulerPro/view/ResourceHistogram#config-getRectClass config. The function would return a proper CSS class to highlight certain ticks. Here is an example of such function that highlights w/ "foo" CSS class bars related to assignment of event #1:

const histogram = window.histogram = new ResourceHistogram({
    
    ...

    getRectClass(series, rectConfig, datum, index) {
        // call default histogram "getRectClass" function to support existing behaviour
        let result = ResourceHistogram.prototype.getRectClass.call(this, ...arguments);

        if (series.id === 'effort' && datum.assignments) {
            // We want to highlight bars related to the event #1 assignment
            // datum.assignments is a Set() - convert it to array and user Array.find()
            // to search for assignments w/ eventId == 1  
            if ([ ...datum.assignments.values() ].find(assignment => assignment.eventId == 1)) {
                // append our CSS that would highlight the bar
                return result + ' foo';
            }
        }

        return result;
    }

And to refresh the histogram rows simply call

histogram.refresh()

[arcady]

But as I said it won't be accurate. Perfect solution will take time as Mats wrote above.

[NBhavadharani]

Hi ,
We are having a gantt , schedulerPro and a resource histogram with shared project model.
Now I have created a button which will filter the gantt based on field values . I have included the corresponding code :

const handleClick = () => {
    if (filter) {
        filterRef.current.gantt.taskStore.filter({
            filters: (task) =>
                // task.id("1"),
                task.skillException && task.skillException.match(
                    "1"),
            replace: true,
        });
        setFilter(false);
    } else {
        filterRef.current.gantt.taskStore.clearFilters();
        setFilter(true);
    }
};

Now my requirement is, on click of this button the Gantt should be filtered (the affected task should be visible rest should be hidden ) whereas in the schedulerPro the respective task should just be highlighted with different color while the other tasks should be in same color and not hidden .
The problem is the schedulerPro is also filtered along with the gantt . I dont want it that way . How can I proceed ? I have attached the screenshot , you can see that Rudder mech Task is filtered in both Gantt and schedulerPro.