React Facility Floorplan
"Where is the fault, physically?" A list of alarms can't answer that; a floor map can. Rooms are drawn as labelled zones, equipment as status dots positioned where it actually stands, and anything in alarm pulses so it draws the eye across the room.
Fab 2 — ground floor
Installation
Props
| Prop | Type | Description |
|---|---|---|
| zones | FloorZone[] | { id, label, x, y, width, height } — the rooms |
| assets | FloorAsset[] | { id, label, x, y, status, value? } |
| title | string | Heading; also drives the status summary |
| width | number | Coordinate width (default 640) |
| height | number | Coordinate height (default 380) |
Drawing attention where it belongs
Zones and assets both use absolute coordinates in a shared space, so you reproduce your real floor layout rather than an approximation. status is ok, warning, fault, or offline; a warning or fault gets an animated pulse ring, because on a wall-mounted overview the whole job of the screen is to make the one problem in a room full of green dots impossible to miss.
Hovering an asset surfaces its label, status, and live value in a corner readout — enough to triage without leaving the map. This is a status overlay, not a CAD tool: it renders the state you feed it. Drive status and value from your telemetry, and pair it with the Alarm Console for the detail behind a flashing dot.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.