Metrics and data panels
Operational summaries, responsive compact metric bands, daily-volume charts, trends, and panel anatomy.
Example
A representative composition rendered with the published package API.
Deployment frequency
Production deploys per week
Reliability
HealthyOptions
The decisions most consumers need to make when adopting this family.
MetricBand presentationCompact uses one full-width row per item below desktop and the configured number of columns on desktop; details and values wrap without individual card backgrounds.
MetricBandItem valueValues can contain links. A missing value (null, or omitted in compact presentation) renders quietly as an em dash or as emptyValue, such as "Never". Detail lines are reserved so values share a baseline.
DailyVolumeChartUse for every per-day measure: calendar-true days, a stated scale, first, middle, and last date labels, and an exact-values table. The successful series takes the success token so it matches outcome colours nearby; pass successfulTone="accent" for a measure with no outcome, such as plain volume.
emphasisGive primary metrics more visual weight without changing their semantic meaning. The primary card carries the burgundy emphasis edge.
MetricCard countUpCounts a numeric value up on load and between updates. Screen readers hear only the final value, and reduced motion shows it immediately. Pass a pre-formatted node instead when the value is not a plain number.
MetricTrend sentimentTrends render as tinted badges: Conscia green for positive, danger tint for negative. Always pair with an accessible label that states the direction and meaning.
ValueMeter toneBrand fills plain quantities with the blue-to-burgundy blend. Use a status tone only when the level itself means good, at risk, or bad.
| Option | Values or anatomy | Guidance |
|---|---|---|
MetricBand presentation | default · compact | Compact uses one full-width row per item below desktop and the configured number of columns on desktop; details and values wrap without individual card backgrounds. |
MetricBandItem value | React node · loading skeleton · emptyValue | Values can contain links. A missing value (null, or omitted in compact presentation) renders quietly as an em dash or as emptyValue, such as "Never". Detail lines are reserved so values share a baseline. |
DailyVolumeChart | total · stacked not-successful segment · successfulTone / unsuccessfulTone: success (default) · danger (default for the segment) · warning · information · accent | Use for every per-day measure: calendar-true days, a stated scale, first, middle, and last date labels, and an exact-values table. The successful series takes the success token so it matches outcome colours nearby; pass successfulTone="accent" for a measure with no outcome, such as plain volume. |
emphasis | primary · supporting | Give primary metrics more visual weight without changing their semantic meaning. The primary card carries the burgundy emphasis edge. |
MetricCard countUp | false (default) · true · { format, locale, durationMs } | Counts a numeric value up on load and between updates. Screen readers hear only the final value, and reduced motion shows it immediately. Pass a pre-formatted node instead when the value is not a plain number. |
MetricTrend sentiment | positive · negative · neutral | Trends render as tinted badges: Conscia green for positive, danger tint for negative. Always pair with an accessible label that states the direction and meaning. |
ValueMeter tone | brand (default) · neutral · success · warning · danger | Brand fills plain quantities with the blue-to-burgundy blend. Use a status tone only when the level itself means good, at risk, or bad. |
Usage
Copy the package import and adapt the composition to product-owned content and state.
import { DailyVolumeChart, DataPanel, DataPanelContent, DataPanelFooter, DataPanelHeader } from "@conscia-labs/design-system";