Consensus Meter

Preview

Install

1. 1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.

   npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"

2. 2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.

   npx shadcn@latest add @txbrendan/theme

3. 3. Add the component.

   npx shadcn@latest add @txbrendan/consensus-meter

Props

• counts

  How many ratings fall on each side. Up to 40 draw one segment each. More draw one segment per side, sized by its share. Counts below 0 count as 0, and parts round to whole ratings.

  { negative: number; neutral: number; positive: number }

• targets

  The targets and the current value. The track always fits the current value, even outside the targets. A low above the high is read the other way round.

  { low: number; average: number; high: number; current: number }

• verdict

  The overall call, shown in a badge. Green when 60% or more lean positive, red when 60% or more lean negative. Its words morph when they change, and long words are cut short.

  ReactNode

• aria-label

  Names the meter. TypeScript requires aria-label or aria-labelledby.

  string

• valueFormat

  Formats the targets.

  Intl.NumberFormatOptions · default US dollars, with cents on every target when any has them, and short form like $2.35M from $100,000 up

• locale

  The locale for numbers. Fixed, so server and browser print the same text.

  string · default "en-US"

• labels

  The words for each side and each target.

  { negative?, neutral?, positive?, low?, average?, current?, high?: string } · default Bearish, Neutral, Bullish, Low, Average, Current, High

• noun

  What one rating is called, for the count.

  { one: string; other: string } · default { one: "rating", other: "ratings" }

• loading

  Shows placeholders at the same size.

  boolean · default false

• emptyText

  Shown when every count is 0.

  ReactNode · default "No ratings yet"

• className

  Extra classes. Later classes win.

  string

Accessibility

• Renders a <figure> named by aria-label or aria-labelledby. TypeScript requires one.
• Every count and every target is printed as text, so nothing lives only in color. The segments and the track are hidden from screen readers, and a hidden line reads each target and how far it sits from the current value, which sighted people see on hover or tap.
• Each side's color sits beside its word: Bearish, Neutral, Bullish. The targets differ by shape: plain dots for the ends, rings for the average and the current value. The average and the line to it take the color of the lean, up or down. With forced colors, the bar, track, and marks take system colors, so they stay visible.
• Hovering a side lifts its segments and fades the others. Hovering a target grows its mark, fades the others, and swaps its word for how far it sits from the current value. On touch, a tap does the same, and a tap anywhere but on a part lets go. Each side has a strip 26px tall over the thin bar, and each mark a 24px target.
• Once on screen, the bar fills from the start and each target glides out from the current value. When the data changes, counts roll, segments resize, and marks and labels glide. With motion off, it all shows at once. Right to left, the labels and the track both run from the right.
• Loading and the empty text are read out through a status line that stays on the page.

Examples

<ConsensusMeter
  aria-label="Analyst consensus"
  counts={{ negative: 0, neutral: 1, positive: 6 }}
  targets={{ low: 375, average: 398.57, high: 460, current: 282.32 }}
  verdict="Strong buy"
  noun={{ one: "analyst", other: "analysts" }}
/>

<ConsensusMeter aria-label="Reviews" counts={{ negative: 3, neutral: 4, positive: 2 }} verdict="Mixed" />

<ConsensusMeter aria-label="Analyst consensus" counts={data?.counts ?? { negative: 0, neutral: 0, positive: 0 }} targets={data?.targets} loading={isLoading} />