Effort Modes

Source code

TypeScript

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

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

Vue

<template>
  <GanttAdvancedDemo :demo="GANTT_RESOURCE_PLANNING_DEMO" />
</template>

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

React

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

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

Angular

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

defineGanttResourcePlanningToolbarElement();

@Component({
  selector: 'gantt-resource-planning-grid',
  standalone: true,
  // Allows Angular demos to bind RevoGrid plugin props that are not wrapper inputs.
  schemas: [NO_ERRORS_SCHEMA],
  imports: [RevoGrid],
  template: `
    <div style="height: 560px; display: flex; flex-direction: column; gap: 8px">
      <gantt-resource-planning-toolbar
        [options]="resourcePlanningToolbarOptions"
        (gantt-resource-planning-toolbar-options-change)="
          setResourcePlanningToolbarOptions($any($event).detail)
        "
      ></gantt-resource-planning-toolbar>
      <revo-grid
        style="height: 100%"
        [theme]="theme"
        [hideAttribution]="true"
        [plugins]="plugins"
        [source]="tasks"
        [columns]="columns"
        [gantt]="ganttConfig"
        [ganttDependencies]="dependencies"
        [ganttCalendars]="calendars"
        [ganttResources]="resources"
        [ganttAssignments]="assignments"
      ></revo-grid>
    </div>
  `,
  encapsulation: ViewEncapsulation.None,
})
export class GanttResourcePlanningGridComponent extends GanttAdvancedAngularBase {
  protected readonly demo = GANTT_RESOURCE_PLANNING_DEMO;
}

Use effortMode to model Microsoft Project-style task types:

Mode	Behavior
fixed-duration	Preserve duration. Work and units do not recalculate duration.
fixed-work	Preserve workHours and derive duration from assigned units and calendar.
fixed-units	Preserve assignment units and derive duration from workHours and units.

workHours is always stored as canonical hours. Set workUnit to retain a task-specific display unit, or enter Work as text such as 5h, 2d, or 3w. Project durationSettings.defaultWorkUnit can fix the default Work unit independently from Duration.

Formula

The duration formula for fixed-work/fixed-units is:

duration = ceil(workHours / (hoursPerDay * totalAssignmentUnits))

Example: Task Types

grid.source = [
  {
    id: 'standup',
    name: 'Standup',
    effortMode: 'fixed-duration',
    duration: 1,
    workHours: 2,
  },
  {
    id: 'implementation',
    name: 'Implementation',
    effortMode: 'fixed-work',
    workHours: 32,
    workUnit: 'hour',
  },
];

grid.ganttAssignments = [
  {
    taskId: 'implementation',
    resourceId: 'alex',
    allocationUnits: 100,
  },
];

Expected result: standup keeps its one-day duration. implementation becomes four days (32h / 8h/day) with one 100% assignment.

See the Progress and work demo for more examples.