React Threshold Editor
Alarm limits get set once, badly, in a config file — a round number someone guessed. This lets an engineer drag the warning and critical bands against real history and watch which past samples would have tripped, so the limits are tuned to the process instead of to a hunch.
Bearing temperature limits
current 74.8 °C · warning
Installation
Props
| Prop | Type | Description |
|---|---|---|
| history | number[] | Historical samples, oldest first |
| min max | number | Axis bounds |
| defaultLimits | ThresholdLimits | { criticalHigh?, warningHigh?, warningLow?, criticalLow? } |
| onChange | (limits: ThresholdLimits) => void | Fires on every drag or numeric edit |
| unit | string | Appended to readouts |
| height | number | SVG height (default 240) |
Feedback while you tune
Every limit line is draggable by its handle on the right rail, and the numeric fields below mirror them for exact entry — drag to explore, type to commit. As you move a line, two things update live: the shaded warning and critical zones redraw, and the history points recolour to whatever band they now fall in. The header keeps a running count of how many past samples breach each level.
That count is the whole value. A limit that would have alarmed forty times last week is a nuisance alarm in waiting; one that never fires is not protecting anything. Any limit can be omitted (leave it undefined) for a one-sided band. This is an editor — it proposes limits and reports their effect on history; wire onChange to persist them to the controller that actually enforces them.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.