Data Components
Two families, one domain. How the layer's data display components relate to each other and where they're headed.
Two families
The layer has two component families for displaying data. They overlap in some areas but serve different purposes.
data/
10 standalone components built over time for various display needs. Includes full charts (ChartUI), axis infrastructure (YAxis, Timeline), and metric cards (Stat, Val).
data/metric/
12 composable building blocks for single-value metric display. Primitives (Value, Trend, Spark) compose into layouts (Base, Compact, TinyInline).
Data-metric (formerly "data-machine") was built as a composable replacement for some — not all — of the data components.
The two families were never formally reconciled. This page documents their relationship and the path forward.
How data-metric works
Data-metric has a two-tier architecture: primitives handle one concern each, and layouts compose them into common arrangements.
Primitives
Layouts
The healthMode pattern is key: instead of a boolean isHealthy, data-metric takes a function (val) => boolean that determines when to show warning coloring. This is more expressive — you can encode thresholds, ranges, or any business logic.
Classification
Every data/ component falls into one of two buckets: replaced by data-metric (deprecation candidate), or unique purpose (keep).
Replaced by data-metric
These 6 components have equivalent or better replacements in the data-metric family.
Large hero number with health coloring. Base covers all the same features with a more flexible healthMode function instead of boolean isHealthy.
Advanced metric card. Production usage is standard label+value+metric — directly replaceable. Radio-button mode (isChecked) is dev-only, not migrated.
Direct replacement. Machine version adds health coloring and smart unit formatting.
DataPercentBar bundles a formatted number with the bar. Machine version is the pure bar — pair with DataMetricValue if the number is needed.
Same prop interface, but SVG-based instead of Chart.js. Eliminates a dependency. Needs visual comparison before bulk swap.
Legacy SVG spark. Direct successor exists. No production usage.
Unique purpose — keep
These 4 components serve purposes that data-metric doesn't address.
Chart.js wrapper for line/bar charts with auto-formatted axes and tooltips. Entirely different category from single-value display. 7+ production instances.
X-axis time labels and gridlines. Chart infrastructure that pairs with ChartUI. Active production usage.
Y-axis ruler overlay for charts. Pairs with ChartUI. The right primitive for chart axis display.
Simple text key-value pair. Different domain from metric display — no formatting, health, or decorations needed.
Which to use
For new code, follow this decision tree.
Single metric value (number, KPI, stat)
Use DataMetric_Base or DataMetricValue
Metric with trend arrow
Use DataMetric_Base (has trend prop) or DataMetricTrend
Inline sparkline
Use DataMetricSpark (SVG, no Chart.js needed)
Dense list-item row with bar + value + trend + spark
Use DataMetric_TinyInline
Full time-series chart with axes
Use DataChartUI + DataTimeline + DataYAxis
Simple text label + value pair
Use DataKeyVal
Naming
These components were originally called "data-machine." The rename to data-metric was completed in c28.
DataMachine_Base → DataMetric_Base
"Metric" immediately communicates "single numeric measurement with optional decorations." No naming collision with existing components. The rename covered 12 layer components, ~55 files in app.qpoint.io, and 12 registry entries on this site.
Migration status
Deprecation and migration haven't started yet. This is the current state.