Metric Bar List

v0.1.2

List of labeled proportional bars in two densities: inline (label · bar · value breakdowns) and card (header badges + headline value over a full-width bar). Parent supplies the fill fraction and tone, so no scaling or thresholding logic lives in the component.

View as Markdown

Install

npx shadcn@latest add @signalos/metric-bar-list

Requires a configured @signalos registry and a valid SIGNALOS_REGISTRY_TOKEN - get access. Registry dependencies (@signalos/tokens, @signalos/utils, @signalos/skeleton) are pulled automatically.

Preview

Example & code

metric-bar-list.example.tsx

// Example: contributing metrics (card) and a breakdown (inline).
import { MetricBarList } from "@/components/widgets/metric-bar-list/MetricBarList"
import { StatusBadge } from "@/components/widgets/status-badge/StatusBadge"

export default function Example() {
  return (
    <div className="flex max-w-md flex-col gap-6">
      <MetricBarList
        items={[
          {
            id: "s1",
            badges: <StatusBadge severity="high" appearance="chip" />,
            label: "coverage_rate",
            eyebrow: "SIG-15C5 · Jun 9, 11:56",
            fraction: 1,
            value: "5.0σ",
            valueDetail: "CRLB 0.00",
            tone: "error",
            highlighted: true,
          },
          {
            id: "s2",
            badges: <StatusBadge severity="medium" appearance="chip" />,
            label: "latency_p95",
            eyebrow: "SIG-3625 · Jun 9, 11:57",
            fraction: 0.43,
            value: "2.2σ",
            valueDetail: "CRLB 0.10",
            tone: "warning",
          },
        ]}
      />

      <MetricBarList
        layout="inline"
        items={[
          { id: "1h", label: "< 1h", fraction: 0.2, value: 1, tone: "error" },
          { id: "4h", label: "< 4h", fraction: 0.4, value: 2, tone: "warning" },
          { id: "24h", label: "< 24h", fraction: 0, value: 0, tone: "muted" },
        ]}
      />
    </div>
  )
}

Props

MetricBarItem

Prop	Type	Default	Description
id*	`string`	-	Stable React key.
label	`ReactNode`	-	Row label (inline layout) — short mono caption.
fraction*	`number`	-	Fill fraction from 0 to 1.
value*	`ReactNode`	-	Headline value shown at the row's trailing edge.
valueDetail	`ReactNode`	-	Secondary value under the headline (card layout).
tone	`MetricBarTone \| undefined`	"primary"	Bar/value tone.
badges	`ReactNode`	-	Header badges/chips (card layout only).
eyebrow	`ReactNode`	-	Eyebrow / sub-caption text under the badges (card layout only).
highlighted	`boolean \| undefined`	-	Highlights the row (e.g. the max value) with an accent border.
disabled	`boolean \| undefined`	-	Disables the interactive affordance for this row.
onSelect	`(() => void) \| undefined`	-	Makes the row a button.

MetricBarListProps

Prop	Type	Default
items*	`readonly MetricBarItem[]`	-
layout	`MetricBarLayout \| undefined`	"card"
className	`string \| undefined`	-
data-testid	`string \| undefined`	-

Supporting types

export type MetricBarLayout = "inline" | "card"

export type MetricBarTone =
  "primary" | "success" | "warning" | "error" | "muted"

Changelog

metric-bar-list

0.1.2

Resolved a merge conflict.

0.1.1

Add the missing "use client" directive - rows render <button onClick>, which crashes in a server-component tree without it.

0.1.0

Initial release, genericized from the attention-routing-01 block's SignalsList bars, deadline bars, and role bars. The domain signal/deadline shapes are replaced by generic MetricBarItems (fraction, value, tone, badges, highlighted), with inline and card layouts and a matching MetricBarListSkeleton.