Skip to content
Cloaked Design SystemVisualizations

MetricLineChartCard

A dashboard KPI tile that pairs a headline value and optional stat delta with an inline LineChart inside a Card, falling back to placeholder copy when no series can render.

Implementation preview
COMPLETE STORYBOOK REFERENCE

Every example. In one place.

Explore every named example, including states, compositions, and theme variants.

6 stories
SELECTED EXAMPLE

Default

Open controls
Default selectedOpen canvas
Example sourcepackages/design-system/src/components/visualizations/MetricLineChartCard/MetricLineChartCard.stories.tsxExport Default

Implementation preview Local Storybook build 0.2.0-preview.1. Source specification status does not approve this runtime.

Stories + source JSON ↗

Local specification source status: preview. Implementation preview pending sign-off.

A dashboard KPI tile that pairs a headline value and optional stat delta with an inline LineChart inside a Card, falling back to placeholder copy when no series can render.

Design-owned component contract ↗Version 0.2.0-preview.1 · Implementation preview pending sign-off
Implementation API 1 entry point · source-derived preview

Read the actual callable API and preserve its composition constraints. Each union branch is a complete alternative; props marked forbidden cannot be supplied.

import { MetricLineChartCard } from '@cloakedinc/design-system';
MetricLineChartCardMetricLineChartCardProps

packages/design-system/src/components/visualizations/MetricLineChartCard/MetricLineChartCard.tsx:12

PropTypePresenceNotes
titleReact.ReactNodeRequiredCard heading above the metric.
valueReact.ReactNodeRequiredThe headline metric itself, rendered at display size.
statLabelReact.ReactNodeOptionalOptional stat label beside the value.
statTone"up" | "down" | undefinedOptionalDirectional treatment for the stat label.Source default: 'up'
descriptionReact.ReactNodeOptionalSecondary copy under the metric; the line is omitted entirely when unset.
placeholderReact.ReactNodeOptionalEmpty-state copy shown when no series can render.
seriesDataVisualizationSeries[]RequiredPrimary series rendered in the card chart.
ghostSeriesDataVisualizationSeries[] | undefinedOptionalOptional ghosted comparison series.
ariaLabelstring | undefinedOptionalAccessible label for the chart.
testIdstring | undefinedOptionalOptional test selector, applied to the card root.

Only explicit destructured parameter initializers are extracted. Other runtime defaults remain in implementation source.

Complete contract · JSON ↗Guidance and source · Markdown ↗

Overview

A dashboard KPI tile: a LineChart packaged in a Card with a headline value, an optional stat delta, title, and description.

When to use

Use MetricLineChartCard as the standard metric card on a home or overview surface — it is the pre-composed wrapper around LineChart, so drop to a bare LineChart when you only need the sparkline without the value chrome. statTone colors the delta green (up) or red (down). series, ghostSeries, tone, and smoothing behave exactly as in LineChart.

When no series can render it shows placeholder copy instead of an empty chart, so always supply one for the zero-data case.

Not currently used in the app.

Empty state

With no series, placeholder copy replaces the chart entirely.

Component specification

$schema../../../specs/component-spec.schema.json
Parts
Id
card
Label
Card
Description
The surface shell that frames the metric and chart.
Required
true
Id
value
Label
Value
Description
The headline metric rendered in the display ramp.
Id
stat
Label
Stat delta
Description
The optional trend tag shown beside the value.
Id
chart
Label
Chart
Description
The inline LineChart, or placeholder copy when no series can render.
Allowed Design Choices
Variants
Base
Label
Base
Description
Content and the stat direction change the reading without changing the tile treatment.
Sizes
Stat Tones
Up
Label
Up
Description
The delta reads as a positive movement (green).
Down
Label
Down
Description
The delta reads as a negative movement (red).
Variants
Id
base
Label
Base
Description
A Card with a headline value, optional delta, and an inline chart.
Platforms
  • ios
  • android
  • web
SizesNone specified
Measurements
Id
metric-row-gap
Label
Value-to-stat gap
Kind
exact
Token
--cds-space-12
Value
12
Unit
px
Applies To
  • value
  • stat
Id
card-radius
Label
Card corner radius
Kind
exact
Token
--cds-radius-lg
Value
20
Unit
px
Applies To
  • card
Notes
Inherited from the default Card radius; MetricLineChartCard does not override it.
Id
card-padding
Label
Card slot padding
Kind
example-only
Token
--cds-space-16
Value
16
Unit
px
Applies To
  • card
  • chart
Notes
The header and text slots carry the default Card padding; the chart body uses padding none so the LineChart spans edge to edge.
Layout
Alignment
Header content is left-aligned in a column; the value and delta share a centered row.
Flow
Header (title, value row, description) stacks above the chart body.
Notes
  • The chart body drops its padding so the LineChart reaches the card edges.
Typography And Color
Typography
Label
Headline value
Description
The metric value uses the display-2 ramp.
Token
--cds-type-display-2-size
Label
Supporting copy
Description
The optional description uses the body ramp.
Token
--cds-type-body-size
Colors
Label
Value
Description
The headline value uses primary text.
Token
--cds-text-primary
Label
Description
Description
Supporting copy uses secondary text.
Token
--cds-text-secondary
Label
Card surface
Description
The tile sits on the card surface.
Token
--cds-bg-surface
States
Id
populated
Label
Populated
Description
At least one series with two or more points renders the inline chart.
Id
empty
Label
Empty
Description
No renderable series but a ghost projection still draws the will-grow chart.
Id
placeholder
Label
Placeholder
Description
No series and no ghost, so placeholder copy replaces the chart entirely.
Behavior
Label
Placeholder fallback
Description
When no series can render, show placeholder copy instead of an empty chart, so always supply one.
Label
Delegated chart
Description
Series, ghost series, tone, and smoothing behave exactly as in LineChart.
Label
Stat direction
Description
statTone colors the delta up (positive) or down (negative).
Accessibility
Label
Chart label
Description
Pass an accessible label so the inline chart is announced as a meaningful image.
Label
Readable delta
Description
State direction in the stat text, not color alone, so the trend reads without hue.
Content Adaptation
Label
When to wrap
Description
Use this tile when a metric needs value chrome; drop to a bare LineChart for a plain sparkline.
Label
Zero-data copy
Description
Provide placeholder copy for the zero-data case so the tile never shows an empty plot.
Motion Haptics
Motion
Label
Inline chart motion
Description
Motion comes from the inline LineChart; the card itself does not animate on mount.
Haptics
Label
No feedback
Description
The tile is a display and requests no haptic feedback.
Platform DifferencesNone specified
Implementation preview

This design-owned implementation is ready to try and review. It does not establish product approval. Imported specifications retain their original review status.

Inspect version 0.2.0-preview.1