Resource Management Example (Combined Example)

This page is not a new component: it demonstrates how to combine oas-resource (swimlanes + load histogram) with oas-card (resource cards), oas-checkbox (assignment table) and the pure function levelResources() into an interactive resource management page. The resource cards and assignment table belong to the host layer (implemented by the page script); the component only handles swimlane/histogram rendering, overload detection and leveling.

Runnable Combined Example

Resource management page: cards + assignment table + swimlane load + one-click leveling (recalculated on every change)

Alice

Capacity 1 · Peak – · Overloaded – days

Bob

Capacity 1 · Peak – · Overloaded – days

Cara

Capacity 1 · Peak – · Overloaded – days

Task	Dates	Alice	Bob	Cara

Load (parallel tasks)Overloaded (above capacity)

Level resourcesReset example data

Example

• Recalculated on every change: checking / unchecking a resource in the assignment table writes back to tasks immediately; the swimlanes, load histogram and resource cards are recomputed in sync.
• One-click leveling: calls the pure function levelResources() — durations are kept, later-only shifts; the result is merged back by id (never replaced wholesale), and shifted tasks get an "shifted +N days" tag in the dates column.
• Overload status row: refreshed by the host from the histogram's red pillars (.pillar.over) after the initial render and every recalculation; the oas-overload event updates it when the overload state changes (not dispatched when there is no overload, so the host needs its own fallback refresh).

Host Implementation Notes

import { levelResources } from '@oas-ui/ui'

// The return value is only the shifted tasks (new dates) — merge by id, never replace wholesale
const moved = levelResources(resources, tasks, { scale: 'day' })
tasks = tasks.map((t) => moved.find((m) => m.id === t.id) ?? t)

• Each oas-checkbox in the assignment table has value set to the resource id; the checked state is derived by the host from task.resources, and after oas-change (detail: { checked, value }) the host updates the data and rebuilds the table.
• The cards' "peak / overloaded days" are expanded day by day by the host: peak = the maximum parallel task count on any single day; overloaded days = days where the parallel count exceeds the capacity (capacity 1 here).
• The card and table styles on this page are for demo purposes only; all colors use design tokens (--oas-color-*) and adapt to the dark theme automatically.

Related

• Component contracts: Resource · Card · Checkbox