RubricStrip
RubricStrip scores each criterion as a bar whose length is the score and whose thickness is its share of the weight.
- encodes
- bar length = score, bar thickness = weight
- precision
- high / medium
- nodes
- ≤ 2 per row, cap 8
RubricStrip encodes each criterion twice: bar length is the score, bar thickness is that criterion's share of the total
weight. A heavy criterion scoring poorly therefore carries more ink than a light one scoring well, which a table of the
same numbers hides. There is no total bar and none can be added; the summary names the highest and lowest criterion
instead of a weighted average, because one number throws away the structure. A target draws a single pass line across
every row.
Install
import { RubricStrip } from "@microcharts/react/rubric-strip";<RubricStrip data={[ { label: "Correctness", score: 0.92, weight: 3 }, { label: "Coverage", score: 0.78, weight: 2 }, { label: "Clarity", score: 0.65, weight: 1 }, { label: "Style", score: 0.41, weight: 1 }, ]} title="Model eval"/>Try it
When to use it
Use it for model and code-review scorecards and for weighted vendor comparison. For a single criterion use Bullet; for parts of a whole use SegmentedBar.
Sizing
Variants
Edge cases
A score outside the domain clamps to a full-length bar rather than overflowing the track, and the component logs a dev
warning. Omit weight and every criterion carries the same thickness, which is what the unweighted variant above shows.
Four homes
Accessibility
The accessible name reports the count and the extremes: "4 criteria; highest Lint (1), lowest Docs (0.5)." The interactive entry roves the criteria, announcing each one's score and its weight share of the total ("Coverage: 0.78, weight 29% of total.").
The interactive entry follows the shared interaction contract:
arrow keys rove between units on both axes, Home and End jump to the ends, and a click, tap, Enter or
Space selects a unit — pinning its readout so it survives blur, until you select it again or press Escape.
On touch, a tap pins and a drag scrubs.
Props
| Prop | Type | Notes |
|---|---|---|
| data* | { label, score, weight? }[] | Criteria; weights default equal. |
| target | number | Pass target — one tick across all rows. |
| labels | boolean | Criterion names in the left gutter. |
| animate | boolean | interactiveOpt-in entrance motion when the chart mounts client-side — add import "@microcharts/react/motion" once. Inert on the server, on hydrated server HTML, and under prefers-reduced-motion. |
Plus the shared grammar — data, domain, color, title, summary, format — and the layout props (width, height, className, style) that every chart accepts. Interactive entries also share animate and live, and — wherever a chart has more than one navigable unit — onActive, onSelect, selectedIndex and defaultSelectedIndex; and — wherever the chart shows a hover value — readout. See the shared grammar.