Comparison view

Pro

Before and after, numerically: each measure's two values and the change, coloured by whether that change is good for it. A side that wasn't measured shows a dash and no change is computed from it.

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/comparison-view

Brings in: data, locale, scale, utils

Usage

TSX · The example above

"use client"

import { ComparisonView, type ComparisonRow } from "@/components/comparison-view"

const rows: ComparisonRow[] = [
  { label: "Test coverage", before: 0.72, after: 0.78, format: "percent", good: "up" },
  { label: "Failing tests", before: 10, after: 6, good: "down" },
  { label: "Median deploy time", before: 412, after: 468, format: "duration", good: "down" },
  { label: "Stale feature flags", before: 14, after: 9, good: "down" },
  { label: "Users affected by incidents", before: null, after: null, good: "down" },
]

export default function Example() {
  return <ComparisonView className="max-w-xl" before="4.1 release" after="4.2 release" rows={rows} />
}

<ComparisonView>

Prop	Type	Default	Description
beforerequired	`string`	—	Heading of the before column, e.g. "Last quarter".
afterrequired	`string`	—	Heading of the after column, e.g. "This quarter".
rowsrequired	`ComparisonRow[]`	—	One row per measure: its two values (null when not measured), format, and which direction is good.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

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

Key	English
measure	Measure
change	Change
better	(better)
worse	(worse)

Types

ComparisonRow: { label: string; before: number | null; after: number | null; format?: ValueFormat | undefined; good: "up" | "down" }