Metric rules
A React component in Beamline's Data & tables category.
Ordered rules that colour a dashboard number. Each rule has a name for what its colour means ("At risk", not just red) and a tone (good, watch, act, note); rules are checked top to bottom and the first that matches wins, so the preview shows the number in the winning tone with the rule's name and says why ("Rule 2, “At risk”, matched first: 74% above 60%"), and a value to try. A rule overlapping an earlier one says which values it loses to it; one an earlier rule fully covers says it never matches; a rule without its limit is skipped and says so; order changes with buttons. A metric with no value shows Unavailable with no colour, never a reassuring green.
Use it for
- Setting the thresholds that colour a KPI tile, a number field or a dashboard figure.
- Anywhere ordered rules decide a status and people must see which rule wins and why.
Not for
- Showing the metric itself (metric-card).
- Conditions that pick records (query-builder).
Anatomy
- preview: the metric's name, the number in the winning tone with the rule's name, why it won (or that none did, or that there is no value), the value to try
- rules: the order note; each rule with its rank, name, colour, condition and limit (two for between), its flag, Move up, Move down, Remove
- Add a rule
States
- preview: a rule won (its tone); no rule matches (no colour, said); no value (Unavailable, hatched, said)
- rule: complete; incomplete (skipped, said); overlapping an earlier rule (the values said); never matches (said); the winner (tinted)
- right to left: the layout mirrors
- reduced motion: nothing moves
Keyboard
- Tab through the value to try, then each rule's name, colour, condition, limits, Move up, Move down and Remove, then Add a rule
Motion
Nothing moves. Nothing runs at rest.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
rules (required) | MetricRule[] | — | |
onChange (required) | (rules: MetricRule[]) => void | — | |
value (required) | number | null | — | The metric's value to preview; null when it has none (a missing source). |
onValueChange | ((value: number | null) => void) | — | Reports the selected value after a change; no callback by default. |
metric (required) | string | — | The metric's name ("Accounts at risk"). |
format | ((n: number) => string) | — | How to show a number ("74%"). |
labels | Partial<{ preview: Message; rules: Message; order: Message; won: Message; wonBetween: M… | — | |
className | string | — | Classes on the documented visual root; no override 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. |
Built from
Dependencies
lucide-react
Import
import { MetricRules } from "@beamline/metric-rules";Get it
Metric rules 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
More in Data & tables
- Living table: A table that shows as much as fits on both axes: width decides which columns show (the rest ride in the name line, moving there rather than vanishing)…
- Availability layers: A week of bookable start times whose closed times explain themselves: every availability rule (hours, time off, bookings, buffers, rooms, lead time…
- Capacity terrain: 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…
- Domino move: A room board where one move shows its chain: drag a booking (or pick it and aim it with the keys) onto a taken room and the bookings it would push appear…
- Match board: Month-end matching as one picture: bank lines and books entries side by side with threads between them — solid for matched, dashed with the host's reason…
- Split anything: One splitter for money, quantities and time: a bar of the whole shows every target's part and what is not split yet; items are dragged onto targets…
- Approval route: A policy you can read by trying it: an amount on a log scale with the thresholds as marks (the arrows stop just under, at and just over each), the…
- Proposal twin: A proposal edited beside the client's exact page, the two linked both ways: a field in focus lights its twin on the page, scrolls it into view and joins…
- Quantity river: The life of one order line's quantity: at rest a bar of its real split ("5 delivered · 1 back in stock · 1 damaged · 5 cancelled"), unfolding into a…
- Stock horizon: Projected stock per item over the coming weeks: a strip of weeks with the safety line, weeks under safety in warn and short in danger, every dip said in…
- Ageing queue: Tickets that visibly age: each ticket's ring fills toward its own service target and steps from on time to late to very late, the words say when it is…
- Import lens: A messy import made fixable by kind: rows stream through the checks once with live counts; problems gather into groups that say what is wrong in words…
- Duplicate guard: A new record that watches for the one that already exists: as you type, the likely duplicates slide in beside the form with the fields that match lit and…
- Scan flow: A pick list that takes scans: each scan flies from the scan field into its row and fills that row's quantity ring, and the prompt moves to the next bin…
- Pack planner: The packing bench: the order's items sit in box outlines drawn to scale, each box filling to its padding line, weighing against its limit and naming the…
- Provenance lens: Hold Alt (or press Lens) over any number on the page and see what makes it: hairline threads draw from the number to the rows, cards and documents on…
- Record time machine: The record itself, rewound in place: a slim track of every change (a tick per change in its person's colour, hollow for automation, named moments as…
- Tension timeline: A plan where slack is something you see: every dependency is a string from one task's end to the next one's start, sagging with the days it has to spare…
- Replay bar: Rewind for anything live: pause a stream, scrub back to the moment you missed (markers for the ones that matter), step one update at a time, replay at a…
- Event calendar: A schedule of events by day, week or month: events that overlap sit side by side, drag one to another time or day or pull its bottom edge to change its…
- Kanban board: Work as cards in columns by stage: drag a card (or lift it with Space and walk it with the arrows) to another column or place, the cards around it make…
- Data grid: Virtualised local or server-driven grid: stable row IDs, manual sort and filters, pages or infinite loading, retry without losing rows, inline editing…
- Pivot table: Records summed up by the fields people choose: rows grouped by one or more fields that fold open level by level, columns split by another, one or more…
- Query builder: Conditions people build by hand to pick out records: each rule is a field, an operator that fits the field (contains, between, in the last N days, is any…
- Sort order: Several sort keys in order. Each key says its rank in words ("Sort by Plan, A to Z", "then by Size, largest first") with its order named for the field's…
- Log viewer: Log lines as they stream: it follows the newest line until you scroll up, then counts what arrived and brings you back in one click; filter by level with…
- JSON viewer: A JSON value as a tree you can read and walk: branches open and close (one level, or all at once), closed ones preview what they hold, every value reads…
- JSON diff viewer: Two versions of a JSON value compared as one tree: added keys marked +, removed ones struck through with −, changed values read old → new, unchanged keys…
- Import mapping: Map the columns of a file to the fields of one record type, see what every value becomes, then run the import and get an outcome for each row…
- Diff table: Proposed edits to a table before they happen: new rows green, removals struck through, changed cells old → new; each change can be left out and Apply…
- Filter toolbar: The filters on a list kept in view: chips that remove themselves, Add filter with fields and their values, Clear all, and room for search or view controls.
- Table: A native HTML table for small datasets, composed with children or driven by records; shared server paging, sorting, filters, search, stable-ID selection…