[ANGULAR] gantt-resource-utilization

[devcat]

Hi,

I am modifying the example "examples\frameworks\angular\gantt-resource-utilization" to show only ResourceUtilization. I delete the bryntum-gantt component in app.component.html and the code that relate to it in app.component.ts, such as "this.resourceUtilization.addPartner(this.gantt)".

The page loads without errors and on the left side the list of resources is shown, but on the right side no elements are shown.

I have tried adding the value: "start Date : '2019-01-11'" to resourceUtilizationProps "app.config.ts" but it still starts on the current date "2024-09", I had to modify all the dates in "src\assets\data\launch-saas.json" to "2024" to be able to see information on the right side of the component.

What would be missing to configure?

Thanks

[marcio]

Hey devcat,

Thanks for reaching out.

Are you still using the same project model that's defined in the example? The ResourceUtilization component will use the information presented on the project model assigned to it.

[devcat]

It's the same project model. I am only commenting the bryntum-gantt component in the html and the addPartner() assignment, you can try it directly in your example "examples\frameworks\angular\gantt-resource-utilization":

<bryntum-demo-header></bryntum-demo-header>

<bryntum-gantt-project-model
    #project
    [startDate]="projectModelProps.startDate!"
    [endDate]="projectModelProps.endDate!"
    [calendar]="projectModelProps.calendar!"
    [loadUrl]="projectModelProps.loadUrl!"
    [autoLoad]="projectModelProps.autoLoad!"
</bryntum-gantt-project-model>
<!--<bryntum-gantt
    #gantt
    [project]="project"
    [resourceImageFolderPath]="ganttProps.resourceImageFolderPath!"
    [flex]="ganttProps.flex!"
    [labelsFeature]="ganttProps.labelsFeature!"
    [viewPreset]="ganttProps.viewPreset!"
    [columnLines]="ganttProps.columnLines!"
    [columns]="ganttProps.columns!"
    [startDate]="ganttProps.startDate!"
    [subGridConfigs]="ganttProps.subGridConfigs!"
    (onBeforeCellEditStart)="onBeforeCellEditStart($event)"
</bryntum-gantt>
<bryntum-splitter></bryntum-splitter>-->
<bryntum-resource-utilization
    #resourceUtilization
    [project]="project"
    [flex]="resourceUtilizationProps.flex!"
    [rowHeight]="resourceUtilizationProps.rowHeight!"
    [showBarTip]="resourceUtilizationProps.showBarTip!"
    [columns]="resourceUtilizationProps.columns!"
    [bbar]="resourceUtilizationProps.bbar!"
</bryntum-resource-utilization>

//@ViewChild('gantt') ganttComponent!: BryntumGanttComponent;
    @ViewChild('resourceUtilization') resourceUtilizationComponent!: BryntumResourceUtilizationComponent;

ngAfterViewInit(): void {
    //this.gantt = this.ganttComponent.instance;
    this.resourceUtilization = this.resourceUtilizationComponent.instance;

    // make resource utilization a partner of gantt
    //this.resourceUtilization.addPartner(this.gantt);
}

[alex.l]

Hi,

You forgot to add startDate for the view. It set in gantt, but when you removed partnering, resourceUtilizaion didn't get that setting anymore.

So simply add that line into resourceUtilization

[startDate]="ganttProps.startDate!"