Hi Team ,
I am Using BryntumResourceutilization to calculate the working time of recourses . My quarry is I want assigned particular time to a task . In default the time was 24hr for one day .
I can see one example in demo "Customized task bar" where you can assigned "hoursWorked" to a particular task.
Is there any way to use these "hoursWorked" in "resourceutilization" ?
Please suggest better solution.
Hi varindercodeadda,
In the "Customized task bar" demo source code there is an implementation regarding the hoursWorked field (which is a custom field), you can set up custom fields by following this guide https://www.bryntum.com/docs/gantt/guide/Gantt/data/project_data#adding-custom-fields-to-entities
Also, to understand better how entities work, check this guide
https://www.bryntum.com/docs/gantt/guide/Core/advanced/classes
Best regards,
Márcio
Hi Marcio ,
class MyResourceModel extends ResourceModel {
static get fields() {
return [
'hoursWorked'
];
}
get workedHoursByDay() {
const
me = this,
{ startDate, endDate, isParent, duration } = me;
// With Gantt using early rendering we can get here before dates are normalized, if so bail out to not cache
// invalid values below
if (!startDate || !endDate || !duration) {
return null
}
if (!isParent && me._workedHoursByDay?.duration === duration && me._workedHoursByDay.startDateMs === startDate.getTime()) {
return me._workedHoursByDay
}
const
durationInDays = DateHelper.getDurationInUnit(startDate, endDate, 'd', false),
workedHoursByDay = Array(durationInDays || 0).fill(0),
calendar = me.project.calendar,
hoursWorked = me.hoursWorked || [];
let index = 0;
// Rollup values from parent task's immediate children
for (let i = 0; i < durationInDays; i++) {
const
intervalStart = DateHelper.add(startDate, i, 'd'),
intervalEnd = DateHelper.add(intervalStart, 1, 'd');
if (calendar.isWorkingTime(intervalStart, intervalEnd)) {
if (isParent) {
workedHoursByDay[i] = this.children.reduce((total, child) => {
if (DateHelper.intersectSpans(child.startDate, child.endDate, intervalStart, intervalEnd)) {
const startDiff = DateHelper.getDurationInUnit(startDate, child.startDate, 'd');
return total += child.workedHoursByDay[i - startDiff];
}
else {
return total;
}
}, 0);
}
else {
workedHoursByDay[i] = hoursWorked[index];
}
index++;
}
}
// Cache by start + duration
workedHoursByDay.startDateMs = startDate.getTime();
workedHoursByDay.duration = duration;
me._workedHoursByDay = workedHoursByDay;
return workedHoursByDay;
}
}
export const projectConfig = {
calendar: 'general',
hoursPerDay: 24,
daysPerWeek: 5,
daysPerMonth: 20,
autoLoad: true,
stm: {
autoRecord: true
},
resourceModelClass: MyResourceModel
};
export const resourceUtilization = {
columns: [
{ type: 'tree', text: 'Name', field: 'name', width: 150 }
],
rowHeight: 40,
tickSize: 40,
minHeight: '20em',
showBarTip: true,
collapsible: true,
taskRenderer({ taskRecord }) {
if (!taskRecord.isMilestone) {
const workedHoursByDay = taskRecord.workedHoursByDay || [];
return [
{
tag: 'div',
class: 'hoursWorked',
children: workedHoursByDay.map(workedHours => {
return {
text: workedHours
};
})
}
];
}
}
};
I am using this code for rendering the hoursWorked data in resourceutilization. But the issuce is the data is not rendering in the BryntumResourceutilization
Please help me if I can doing something worng
I am afraid Marcio misunderstood your question.
ResourceUtilization widget is not so flexible as Gantt and adding custom html fragments are not supported out of the box, but it's possible to put text into bar using https://bryntum.com/docs/gantt/api/SchedulerPro/view/ResourceHistogram#config-getBarText
as well as customize tooltip https://bryntum.com/docs/gantt/api/SchedulerPro/view/ResourceHistogram#config-barTooltipTemplate
All the best,
Alex
Please take a look at this explainer video on how I want the resource component to behave.
Note: this is an existing system from a different provider.
Hope this explains it a little better for you.
Hi bohpa,
Thank you for your video and explanation.
https://bryntum.com/docs/gantt/api/SchedulerPro/view/ResourceHistogram is a widget that displays a read-only timeline report of the workload for the resources in a project. The resource allocation is visualized as bars along the time axis with an optional line indicating the maximum available time for each resource.
You can load any records as resources, if it's actually not the same as data in resourceStore of your Gantt.
But ResourceHistogram is not something base and configurable, like Gantt, unfortunately. It's just a widget with absolutely unambiguous purpose - show allocation per resource.
We have base class called Histogram. You could check the source code of both and create your own widget using it as example. There is also possibility to customize rendered text as you need (see my previous posts), but in your case you basically need to overwrite all these behaviour, so better to use Histogram as a base.
https://bryntum.com/docs/gantt/api/Core/widget/graph/Histogram
The sources may be founded in the source code you downloaded.
lib/Core/widget/graph/Histogram.js and lib/Gantt/view/ResourceHistogram.js
Here is also some replies that may be helpful for you viewtopic.php?f=51&t=21837&p=109394#p109394
As we mentioned in the topic I linked above, we will discuss possibility to add a new example with custom Histogram data usage.
All the best,
Alex
