Website
Metrics
Metric panels, accessible data tables and chart arrangements.
Usage
When to reach for it
Ships from@misoto22/design/website
import { MetricsRange } from '@misoto22/design/website'Notes
A controlled range selector. Selection represents the data the host successfully loaded.
Best practices
Do
- Supply localized labels, descriptive links and meaningful image alternatives.
Don’t
- Do not put service credentials, routing logic or backend models inside presentation components.
Examples
a controlled range
The selected range and already-formatted readings remain in application state. Named panels can contain lists, tables or charts from a separately chosen renderer.
Library activity
Sample data
Reading
- Articles opened
- 24
- Minutes reading
- 180
Collection
- Saved records
- 7
- Notes written
- 3
Parts
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
MetricsSection
A dashboard section without a dependency on a chart engine or a domain response.
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | — | |
| action | ReactNode | — | |
| caption | ReactNode | — | |
| title | ReactNode | — |
Also accepts everything in Omit<HTMLAttributes<HTMLElement>, 'title'>. Those are forwarded to the underlying element and are not listed row by row.
MetricsPanel
A labeled panel. Children may use the separately imported charts entry.
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | — | |
| titlerequired | string | — | |
| caption | string | — |
Also accepts everything in Omit<HTMLAttributes<HTMLElement>, 'title'>. Those are forwarded to the underlying element and are not listed row by row.
MetricsPanelGrid
Responsive grids share their dividers and minimum panel width.
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | 2 | 4 | 2 | — |
Also accepts everything in HTMLAttributes<HTMLDivElement>. Those are forwarded to the underlying element and are not listed row by row.
MetricsEmptyState
An empty time series retains its plot space and tells the reader what will appear once the first observation arrives.
| Prop | Type | Default | Description |
|---|---|---|---|
| descriptionrequired | ReactNode | — | |
| titlerequired | ReactNode | — |
MetricsList
Already-formatted metric rows, with a named value relation and an explicit empty state.
| Prop | Type | Default | Description |
|---|---|---|---|
| emptyrequired | string | — | |
| itemsrequired | { id: string; label: ReactNode; value: ReactNode; icon?: ReactNode }[] | — | |
| labelrequired | string | — |
MetricValue
A supplied number with its units on the supporting type step.
| Prop | Type | Default | Description |
|---|---|---|---|
| segmentsrequired | { text: string; unit?: boolean }[] | — |
MetricDelta
Neutral direction marks never assume an increase is good or a decrease is an error.
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | — | |
| directionrequired | 'up' | 'down' | 'steady' | — |
LiveCount
Unknown live counts remain absent; a measured zero is a real reading.
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | string | — | |
| valuerequired | number | null | — |