Resource Planning View

The Resource Planning View switches the Gantt chart from a task-centric WBS to a resource-centric view. This allows managers to visualize daily or weekly load, capacity thresholds, and over-allocation hotspots.

Resource names include a compact avatar for faster scanning. Gantt derives a colored initials avatar from the resource name by default; supply avatarUrl on a resource to render its profile image instead.

Source code

1
import { GANTT_RESOURCE_PLANNING_DEMO } from './gantt-advanced-data';
2
import { loadAdvancedGanttDemo } from './GanttAdvancedVanillaDemo';
3

4
export function load(parentSelector: string) {
5
  return loadAdvancedGanttDemo(parentSelector, GANTT_RESOURCE_PLANNING_DEMO);
6
}

1
<template>
2
  <GanttAdvancedDemo :demo="GANTT_RESOURCE_PLANNING_DEMO" />
3
</template>
4

5
<script setup lang="ts">
6
import GanttAdvancedDemo from './GanttAdvancedDemo.vue';
7
import { GANTT_RESOURCE_PLANNING_DEMO } from './gantt-advanced-data';
8
</script>

1
import React from 'react';
2
import GanttAdvancedDemo from './GanttAdvancedReactDemo';
3
import { GANTT_RESOURCE_PLANNING_DEMO } from './gantt-advanced-data';
4

5
export default function GanttResourcePlanning() {
6
  return <GanttAdvancedDemo demo={GANTT_RESOURCE_PLANNING_DEMO} />;
7
}

1
import { Component, NO_ERRORS_SCHEMA, ViewEncapsulation } from '@angular/core';
2
import { RevoGrid } from '@revolist/angular-datagrid';
3
import { GanttAdvancedAngularBase } from './GanttAdvancedAngularBase';
4
import { GANTT_RESOURCE_PLANNING_DEMO } from './gantt-advanced-data';
5
import { defineGanttResourcePlanningToolbarElement } from './gantt-resource-planning-toolbar';
6

7
defineGanttResourcePlanningToolbarElement();
8

9
@Component({
10
  selector: 'gantt-resource-planning-grid',
11
  standalone: true,
12
  // Allows Angular demos to bind RevoGrid plugin props that are not wrapper inputs.
13
  schemas: [NO_ERRORS_SCHEMA],
14
  imports: [RevoGrid],
15
  template: `
16
    <div style="height: 560px; display: flex; flex-direction: column; gap: 8px">
17
      <gantt-resource-planning-toolbar
18
        [options]="resourcePlanningToolbarOptions"
19
        (gantt-resource-planning-toolbar-options-change)="
20
          setResourcePlanningToolbarOptions($any($event).detail)
21
        "
22
      ></gantt-resource-planning-toolbar>
23
      <revo-grid
24
        style="height: 100%"
25
        [theme]="theme"
26
        [hideAttribution]="true"
27
        [plugins]="plugins"
28
        [source]="tasks"
29
        [columns]="columns"
30
        [gantt]="ganttConfig"
31
        [ganttDependencies]="dependencies"
32
        [ganttCalendars]="calendars"
33
        [ganttResources]="resources"
34
        [ganttAssignments]="assignments"
35
      ></revo-grid>
36
    </div>
37
  `,
38
  encapsulation: ViewEncapsulation.None,
39
})
40
export class GanttResourcePlanningGridComponent extends GanttAdvancedAngularBase {
41
  protected readonly demo = GANTT_RESOURCE_PLANNING_DEMO;
42
}

Enabling the Planning View

Use gantt.resourcePlanning to toggle the view and configure its behavior:

1
grid.gantt = {
2
  resourcePlanning: {
3
    enabled: true,
4
    visibleResourceIds: ['alex', 'nina', 'ravi'],
5
    loadGranularity: 'day',
6
    capacityDisplay: 'line',
7
    overAllocationDisplay: 'highlight',
8
  },
9
};

1
grid.ganttResources = [
2
  {
3
    id: 'alex',
4
    name: 'Alex Morgan',
5
    avatarUrl: '/images/team/alex-morgan.png',
6
    role: 'Lead Engineer',
7
    calendarId: 'standard',
8
    allocationCapacity: 100,
9
    hourlyCost: 120,
10
  },
11
];

Configuration Options

Option	Description
`enabled`	Toggle between task rows and resource load rows.
`visibleResourceIds`	Array of resource IDs to display in the planning view.
`loadGranularity`	`'day'` or `'week'`. The time bucket for load calculation.
`capacityDisplay`	`'line'` or `'none'`. Renders a capacity threshold on load bars.
`overAllocationDisplay`	`'highlight'` or `'none'`. Marks buckets exceeding capacity.

Resource Filtering

When you are in the normal task view, you can use resourceFilterIds to filter tasks assigned to specific resources while keeping ancestor summary tasks visible. This provides context-aware filtering within the project structure.

1
grid.gantt = {
2
  resourceFilterIds: ['alex'],
3
};