demo D276

A project plan, balanced across people in ESM

Put people on tasks and see who is booked past what they can do: the clashing bars are outlined and the avatar ringed, then one press shifts the lower-priority work later until the plan is clear

gantt.overAllocations · gantt.level()

This puts people on tasks and shows who is booked past what they can do, outlining the clashing bars and ringing the avatar, then levels the plan in one press by shifting lower-priority work later. It turns overallocation from something you hunt for into something the plan shows and can resolve.

Building…

Loading a live grid…

This is the ES module version. The grid is imported straight from a CDN as a module, the same configuration as the vanilla tab without a global script tag, so it drops into any bundler or a bare module script.

The configuration

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.71.0/lattice-grid.min.css">

<div style="margin-bottom: 10px">
  <button id="level">Level the plan</button> <span id="status"></span>
</div>
<div id="plan" style="height: 440px; overflow: auto"></div>

<script type="module">
  import { createGantt } from '@toclocoinc/lattice-grid/modules/gantt';

  // Each task carries an assignee; each resource a capacity. Two tasks fall to
  // one person at the same time, so that resource is booked past capacity.
  const gantt = createGantt({
    tasks,
    dependencies,
    resources: [
      { id: 'Ana Ruiz', capacity: 1 },
      { id: 'Bo Ito', capacity: 1 },
      { id: 'Cy Okafor', capacity: 1 },
    ],
    projectStart: '2027-01-04',
    calendar: 'weekends',
    autoSchedule: true,
  });

  const render = () => {
    gantt.mountSplit(document.getElementById('plan'), {
      gridWidth: 300, rowHeight: 34, height: 440, zoom: 'day',
      nonWorking: 'weekends', showArrows: true, showProgress: true,
    });
    // overAllocations reports where a resource is booked beyond capacity across
    // concurrent tasks; the split view rings the over-booked avatars.
    const over = gantt.overAllocations;
    document.getElementById('status').textContent =
      over.length ? 'Over-booked: ' + [...new Set(over.map((o) => o.resource))].join(', ') : 'Everyone is within capacity.';
  };
  render();

  // level() shifts the lower-priority tasks later to clear the over-allocation,
  // honouring the dependency order and the working-day calendar.
  document.getElementById('level').addEventListener('click', () => { gantt.level(); render(); });
</script>