Charts

Score Gauge

A score built from parts: a segmented ring around the total, with each part's points listed below.

idle

Usage

import { ScoreGauge } from "@mizen-labs/ui";

Each part's arc spans its share of the maximum score; the list shows its points.

Guidance	Practice
Do	Name the score's meaning beside it, such as "Excellent", and keep part labels short.

Guidance	Boundary
Scope	The score is the sum of part values; use it only when parts add up to a meaningful total.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`parts`	`readonly { id: string; label: string; value: number; max: number; detail?: string; tone?: ChartSeriesTone }[]`	`Required`	One to six parts. Each arc spans its max's share of the ring and fills to its value.
`aria-label`	`string`	`Required`	Names the score.
`locale`	`string`	`"en-US"`	Formats the score and part points.

Charts

A score built from parts: a segmented ring around the total, with each part's points listed below.

idle

import { ScoreGauge } from "@mizen-labs/ui";

Each part's arc spans its share of the maximum score; the list shows its points.

Guidance	Practice
Do	Name the score's meaning beside it, such as "Excellent", and keep part labels short.

Guidance	Boundary
Scope	The score is the sum of part values; use it only when parts add up to a meaningful total.

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

Prop	Type	Default	Description
`parts`	`readonly { id: string; label: string; value: number; max: number; detail?: string; tone?: ChartSeriesTone }[]`	`Required`	One to six parts. Each arc spans its max's share of the ring and fills to its value.
`aria-label`	`string`	`Required`	Names the score.
`locale`	`string`	`"en-US"`	Formats the score and part points.