Resources
Assignments carry units (a number for every assigned resource, an array per resource or an id map); with effortDriven the work in hours and the assigned units decide a task's length. The utilization histogram shows the load per period against each resource's capacity, and the resource view regroups the plan by person.
units effort-driven histogram resource view
Units, work & utilization
Bora works half time (capacity: 50) and is booked at 100% on the database while also running monitoring — the histogram turns those periods red. Edit a task (double-click), change its people or units: with effortDriven the finish follows work ÷ (8h × Σ units).
units effort effortDriven showResourceHistogram capacity
Task
Resources
Units
Work
Platform
API design
Ana
100%
32h
Database
Ana, Bora
50%, 100%
40h
Monitoring
Bora
100%
16h
Load tests
Cem
100%
24h
Hand-over
August 2026August 2026August 2026August 2026August 2026September 2026September 2026September 2026September 2026October 2026
2345678910111213141516171819202122232425262728293031123456789101112131415161718192021222324252627282930123456
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeGantt } from '@oge-ui/gantt';
import type { OgeGanttColumn, OgeGanttResource } from '@oge-ui/gantt';
@Component({
selector: 'demo-root',
imports: [OgeGantt],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- units (%) per assignment, work in hours and effortDriven: changing
a task's people, units or work recomputes its finish. The histogram
sums units per period against each resource's capacity line —
over-allocated periods turn red. -->
<oge-gantt
[tasks]="tasks"
[resources]="resources"
[columns]="columns"
[effortDriven]="true"
[hoursPerDay]="8"
[showResourceHistogram]="true"
style="height: 460px"
/>
`,
})
export class Demo {
protected readonly columns: OgeGanttColumn[] = [
{ field: 'title' },
{ field: 'resources' },
{ field: 'units' },
{ field: 'effort' },
];
protected readonly resources: OgeGanttResource[] = [
{ id: 1, text: 'Ana' },
{ id: 2, text: 'Bora', capacity: 50 }, // half time
{ id: 3, text: 'Cem' },
];
protected readonly tasks = [
{ id: 1, title: 'API design', start: new Date(2026, 7, 3), end: new Date(2026, 7, 7), resourceId: [1], effort: 32 },
{
id: 2,
title: 'Database',
start: new Date(2026, 7, 5),
end: new Date(2026, 7, 11),
resourceId: [1, 2],
units: [50, 100], // per assignment, in %
effort: 40,
},
{ id: 3, title: 'Monitoring', start: new Date(2026, 7, 6), end: new Date(2026, 7, 10), resourceId: [2], effort: 16 },
{ id: 4, title: 'Load tests', start: new Date(2026, 7, 11), end: new Date(2026, 7, 14), resourceId: [3], effort: 24 },
];
}Resource view
viewMode: 'resources' lists every resource as a group with its tasks underneath (a task with two people appears twice); tasks without a resource gather under Unassigned. Dragging an assignment bar moves the real task. The toolbar toggle flips the view.
viewMode resource rows Unassigned
Task
Start
End
Duration
Ana
Aug 3
Aug 11
8d
API design
Aug 3
Aug 7
4d
Database
Aug 5
Aug 11
6d
Bora
Aug 5
Aug 11
6d
Database
Aug 5
Aug 11
6d
Monitoring
Aug 6
Aug 10
4d
Cem
Aug 11
Aug 14
3d
Load tests
Aug 11
Aug 14
3d
Unassigned
Aug 14
Aug 15
1d
Hand-over
Aug 14
Aug 15
1d
August 2026August 2026August 2026August 2026August 2026September 2026September 2026September 2026September 2026October 2026
2345678910111213141516171819202122232425262728293031123456789101112131415161718192021222324252627282930123456
View: resources
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { OgeGantt } from '@oge-ui/gantt';
import type { OgeGanttResource, OgeGanttViewMode } from '@oge-ui/gantt';
@Component({
selector: 'demo-root',
imports: [OgeGantt],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<!-- viewMode 'resources' regroups the rows by resource (the toolbar's
Resource view toggle flips it); assignment rows edit the real task. -->
<oge-gantt
[tasks]="tasks"
[resources]="resources"
[(viewMode)]="view"
style="height: 420px"
/>
<p>View: {{ view() }}</p>
`,
})
export class Demo {
protected readonly view = signal<OgeGanttViewMode>('resources');
protected readonly resources: OgeGanttResource[] = [
{ id: 1, text: 'Ana' },
{ id: 2, text: 'Bora', capacity: 50 }, // half time
{ id: 3, text: 'Cem' },
];
protected readonly tasks = [
{ id: 1, title: 'API design', start: new Date(2026, 7, 3), end: new Date(2026, 7, 7), resourceId: [1], effort: 32 },
{
id: 2,
title: 'Database',
start: new Date(2026, 7, 5),
end: new Date(2026, 7, 11),
resourceId: [1, 2],
units: [50, 100], // per assignment, in %
effort: 40,
},
{ id: 3, title: 'Monitoring', start: new Date(2026, 7, 6), end: new Date(2026, 7, 10), resourceId: [2], effort: 16 },
{ id: 4, title: 'Load tests', start: new Date(2026, 7, 11), end: new Date(2026, 7, 14), resourceId: [3], effort: 24 },
];
}