Workload calculation issue in dhtmlx gantt resource grouping

[Kiran]

I have used pro version for grouping based on resources,but workload calculation has issue,check screenshot where in some value “3” is considered overload.

and see code

setResourceTemplates(): void {

this.oGanttInstance.templates.resource_cell_value = (

  cellStart,

  cellEnd,

  resource,

  tasks

) => {

  const totalHours = this.calculateTotalHours(tasks, resource.id, cellStart, cellEnd);

  return this.formatHours(totalHours);

};

}

/** Core calculator */

private calculateTotalHours(tasks: any[], resourceId: any, cellStart: Date, cellEnd: Date): number {

let total = 0;



for (const task of tasks) {

  const assignments = this.oGanttInstance.getResourceAssignments(resourceId, task.id);

  total += this.calculateAssignmentsHours(assignments, cellStart, cellEnd);

}



return this.roundHours(total);

}

/** Per assignment calculation */

private calculateAssignmentsHours(assignments: any[], cellStart: Date, cellEnd: Date): number {

let total = 0;



for (const assignment of assignments) {

  const overlapHours = this.getOverlapHours(assignment, cellStart, cellEnd);

  total += overlapHours;

}



return total;

}

/** Overlap logic isolated */

private getOverlapHours(assignment: any, cellStart: Date, cellEnd: Date): number {

if (!assignment.start_date) return 0;



const start = new Date(assignment.start_date);

const end = assignment.end_date

  ? new Date(assignment.end_date)

  : new Date(start.getTime() + 24 \* 60 \* 60 \* 1000);



if (end <= start) return 0;



const overlapStart = start > cellStart ? start : cellStart;

const overlapEnd = end < cellEnd ? end : cellEnd;



if (overlapStart >= overlapEnd) return 0;



return (overlapEnd.getTime() - overlapStart.getTime()) / 3600000;

}

/** Rounding logic */

private roundHours(hours: number): number {

return hours % 1 ? Math.round(hours \* 10) / 10 : hours;

}

/** UI formatting */

private formatHours(hours: number): string {

return hours ? \`<div>${hours}</div>\` : "";

}
and prepare groups i used
private groupTasksByResources(resources): void {

const groups = resources.map(this.prepareGroups.bind(this))

this.oGanttInstance.groupBy({

  groups: groups,

  relation_property: this.oGanttInstance.config.resource_property,

  group_id: "group_id",

  group_text: "text",

  default_group_label: 'Un-Assigned',

  default: true,

});

}

private prepareGroups(item): any {

const group = this.oGanttInstance.copy(item);

group.group_id = group.id;

group.id = this.oGanttInstance.uid();

return group;

}

[ramil]

Hello Kiran,
The style of the resource cell elements is added in the resource_cell_class template:

resource_cell_class template | DHTMLX Gantt Docs

So, you need to define the logic for the overload calculation there.
In our samples, there is a simple logic that only compares the number of tasks:

I agree with you that it shouldn’t work like that. The logic was added when Gantt didn’t have a way to specify resource assignments and you could only assign resources. So, I added a task for the dev team to update the samples and add better logic.

Here is an example of how it can be implemented:

gantt.templates.resource_cell_class = function (start_date, end_date, resource, tasks) {
    let result = 0;
    tasks.forEach(function (item) {
        const assignments = gantt.getResourceAssignments(resource.id, item.id);
        assignments.forEach(function (assignment) {
            result += assignment.value * 1;
        });
    });

    const css = [];
    css.push("resource_marker");
    if (result <= 8) {
        css.push("workday_ok");
    } else {
        css.push("workday_over");
    }
    return css.join(" ");
};

DHTMLX Snippet Tool