Effort Modes

Source code

TypeScript ts

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 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 tsx

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 ts

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';

@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">
      <div style="display: flex; gap: 8px">
        <button type="button" (click)="setLevelingMode('warn')">Warn</button>
        <button type="button" (click)="setLevelingMode('auto')">Auto level</button>
      </div>
      <div style="display: flex; gap: 8px">
        <button type="button" (click)="setResourcePlanningEnabled(false)">Task view</button>
        <button type="button" (click)="setResourcePlanningEnabled(true)">Resource load</button>
      </div>
      <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 durationDays. 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.

Formula

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

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

Example: Task Types

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

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.