Subscore card

Pro

Weighted subscores behind an overall score. Each has its weight, score and a bar toned by how it's doing. One that can't be computed says what it needs ("Not computed — needs test results") and is left out of the total, which says so.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/subscore-card

Brings in: data, locale, utils

Usage

TSX · The example above

"use client"

import { SubscoreCard } from "@/components/subscore-card"
import type { Subscore } from "@/lib/data"

const subscores: Subscore[] = [
  { label: "Tests pass", score: 94, max: 100, weight: 3 },
  { label: "Coverage over 75%", score: 82, max: 100, weight: 2 },
  { label: "Migrations reversible", score: 60, max: 100, weight: 2 },
  { label: "User impact known", score: null, max: 100, weight: 1, needs: "session analytics" },
]

export default function Example() {
  return <SubscoreCard className="max-w-md" title="Release readiness" subscores={subscores} />
}

<SubscoreCard>

Prop	Type	Default	Description
titlerequired	`string`	—	What the overall score measures, shown above the total.
subscoresrequired	`Subscore[]`	—	The parts of the score, each with weight, score and max; a null score is left out of the total and says what it needs.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under subscoreCard in <LocaleProvider strings={{ … }}>; the table is exported as subscoreCardStrings.

Key	English
outOf100	/ 100
partial	{left} of {total} not computed; the score covers the rest.
notComputed	Not computed
needs	Needs {what}
moreData	more data