SignedDeltaBar

API reference and demos for SignedDeltaBar.

Source

Import

import { SignedDeltaBar } from "@flanksource/clicky-ui/data";

Demos

Positive · Open in Storybook

Negative · Open in Storybook

Zero · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
className	string	—	Classes applied to the root.
format	(…) => string	—	Formats the trailing label. Defaults to a signed two-decimal percentage.
height	string	h-4	Height utility class, e.g. `h-4`.
max	number	50	Magnitude (in `value` units) that maps to a full half-bar. Larger values clamp.
positiveIsBad	boolean	false	Treat positive values as the "bad" direction (red) and negative as "good" (green). Benchmarks pass `true` — a positive runtime delta is a regression. Defaults to `false`, where positive is green and negative is red.
significant	boolean	true	When false the bar renders muted, signalling the delta is not meaningful (e.g. below a statistical-significance threshold).
value*	number	—	Signed value to visualize. Negative grows left, positive grows right.