Capacity terrain

A React component in Beamline's Data & tables category.

A schedule that stands on a terrain of capacity: under each station's lane of jobs, every day's load rises to its capacity line and an overload is a cliff above it that says how far over, with every overloaded day said in the head. Drag a job (from To schedule or the board), or pick it and aim it with the keys, and the start days where it fits for its whole length light as valleys while a dashed ghost and the terrain preview it in place and a line says where it fits; drop anywhere, an overload said. Required staff against the rota run as a lane beneath, a short day marked.

Use it for

Fitting a new job into a week of stations, crews or chairs with daily capacity: print and sign shops, workshops, salons, production lines, field crews.
The host owns the stations' capacity, the jobs (days, hours a day, crew) and the rota; the part shows load against capacity and where a job fits, and reports placements.

Not for

Dependencies and critical paths between tasks → gantt-chart or tension-timeline.
Booking times inside a day → availability-layers or event-calendar.

Anatomy

head: the label and every overloaded day in words (Press A is over on Fri 7 Nov by 6 h), or Every station fits its week
fit line: while a job is in hand, where it fits on the station under it, and where starting there goes over
board: the days across; per station a lane of job bars (name, hours a day; overlapping jobs stack) and its terrain (each day's load rising to the dashed capacity line, an overload a cliff above it with over N h); while aiming, valleys light on the lane and a dashed ghost shows where it lands (green where it fits)
staff (with assigned): per day Required and Assigned, a short day marked short N
To schedule: jobs not placed yet (days, hours a day, crew), or Everything is placed

States

at rest
an overloaded day
a job in hand (valleys, ghost, preview)
fits nowhere
placed
placed over capacity
staff short
every station fits
nothing to schedule

Keyboard

Each job is a button named by its name, length, station, first day and hours a day: Enter picks it; Left and Right move its start, Up and Down its station (keeping the day where it fits there, else the nearest day that does); Enter places it; Delete sends it to To schedule; Escape puts it back where it was
Each terrain day is named by its station, day, load and capacity; placing is said once (a polite status), with the days it goes over

Motion

The terrain rises and falls on transforms as a job is aimed or placed; the job in hand's hours stack on it as a striped layer; the room under the capacity line lights where it fits; placed jobs glide (the shared FLIP). Nothing runs at rest; reduced motion places everything.

Props

Prop	Type	Default	Description
`label` (required)	`string`	—	What the board plans: "Production, week of 3 Nov".
`days` (required)	`TerrainDay[]`	—
`stations` (required)	`TerrainStation[]`	—
`jobs` (required)	`TerrainJob[]`	—
`value`	`TerrainPlan`	—	Placements by job id; default the jobs' own station and start.
`defaultValue`	`TerrainPlan`	—	Initial selection when uncontrolled; omitted by default.
`onValueChange`	`((plan: TerrainPlan) => void)`	—	Reports the selected value after a change; no callback by default.
`assigned`	`readonly number[]`	—	People on the rota per day; with it, Required and Assigned lanes run under the stations.
`unit`	`string`	—	The unit of capacity and hours. Default "h".
`className`	`string`	—	Classes on the documented visual root; no override by default.
`classNames`	`Partial<Record<"root" \| "board" \| "lane" \| "terrain" \| "job" \| "tray", string>>`	—	Classes for the named visual parts; no overrides by default.
`style`	`CSSProperties`	—	Inline styles on the documented visual root; no overrides by default.
`ref`	`Ref<HTMLDivElement>`	—	Receives the documented native target or imperative handle; omitted by default.
`defaultAim`	`{ job: string; station?: string \| undefined; }`	—	Open with a job already in hand (a rush order to fit, a draft): picked and aimed at a station, its valleys lit, without taking the page's focus. Omitted by default.

Import

import { CapacityTerrain } from "@beamline/capacity-terrain";

Get it

Capacity terrain is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent

Capacity terrainComplete system · $49

A schedule that stands on a terrain of capacity.

Fitting a rush order into the print shop's week

Rush: 500 menus is in hand, aimed at Press B: Tue and Wed light as valleys where it fits all three days, its hours stacked striped on the terrain. On Press A nothing fits and Friday stays a cliff, 6 hours over. Drag it, or press Enter on it and use the arrows; drop it on Press B, Tue and the staff lane says Wed is one person short.

0 × 0full

Chairs whose hours change by day

Capacity day by day: the salon is closed on Sunday and Ben is off on Monday, so a two-day booking of 7 hours fits only where both days have room.

0 × 0full

A week that fits

No day over its capacity and nothing left to place: the head says every station fits.

0 × 0full

About Capacity terrain

← Availability layers Domino move →

Part of Beamline UI: polished, editable React components and complete screens for custom applications. Build your own style from any look; tokens, fonts, radii, motion; not only colours.

Capacity terrain

Use it for

Not for

Anatomy

States

Keyboard

Motion

Props

Import

Get it

More in Data & tables