Level resources in dhtmlxGantt

This is the leveling demo with dhtmlxGantt as the chart. Gantt draws the bars, links and the resource histogram. The Planning Engine schedules every drag and levels the plan when you press Level resources.

The engine behind auto-scheduling

dhtmlxGantt takes a scheduling engine by name. Gantt.createPlanningEngine wraps the Planning Engine module that the page loads itself, so a drag or a new link is planned by the same engine that levels the plan.

Schedule the chart with the Planning Engine

import { Gantt } from "@dhx/gantt";
import init, { Project } from "<planning engine>/index.mjs";

await init();
// Registration is global; every chart that names the engine gets its own instance.
Gantt.registerSchedulingEngine("plen", () => Gantt.createPlanningEngine({ Project }));

const gantt = Gantt.getGanttInstance({ plugins: { auto_scheduling: true } });
gantt.config.auto_scheduling = { enabled: true, schedule_on_parse: true, engine: "plen" };

Level from the toolbar

Gantt itself does not level. The button sends the chart's tasks, links and assignments to an engine project, at the dates you gave them, and calls level.

Level the chart

// Gantt does not level. The button sends the chart to an engine project and levels it there.
const project = new Project({ dates: "date" });
project.solve({ config, calendars, tasks, links, resources, assignments }, { includeUnchanged: true });
const result = project.level({ allowSplits });
project.dispose();

The result goes back as ordinary task fields: the dates, leveling_delay andpauses. Gantt draws the pauses inside the bar and counts no load during them, and its auto-scheduling keeps the delays, so the leveled plan stays as it is until you change it.

Write the leveled plan back

// Through updateTask inside batchUpdate: one redraw, and the chart's engine keeps the leveled plan.
gantt.batchUpdate(() => {
  for (const r of records) {
    const task = gantt.getTask(r.id);
    task.start_date = r.start_date;
    task.end_date = r.end_date;               // includes the pauses
    task.leveling_delay = r.leveling_delay ?? 0;
    task.pauses = r.pauses ?? [];
    gantt.updateTask(r.id);
  }
});

Then keep working

Drag a bar and the task loses its delay: your placement replaces the leveled one. Press Level again and the engine levels from scratch on top of your edit. Untick Allow splits to compare a plan made of whole-task delays only.