Data Machine

Composable primitives and layout templates for building stat widgets with health, spark, and trend slots.

How data & data-metric relate →

DataMetric_BaseFull-featured machine layout composing label, value, trend, and spark chart. Optionally clickable.

DataMetric_CompactCompact machine layout with label, value, trend, and spark — no navigation routing.

DataMetric_InlineTrendMinimal layout showing only value and trend side-by-side.

DataMetric_SimpleMinimal label + value layout with lightweight label styling.

DataMetric_TinyInlineCompact horizontal layout with percent bar background, value, label, and optional trend/spark.

DataMetricBackgroundWrapper that highlights background red when a value is "hot" according to a health mode.

DataMetricDateSimple date display cell for data machine layouts.

DataMetricLabelSmall underlined label primitive for machine layouts, text-13 with hairline border.

DataMetricPercentBarHorizontal grape-200 progress bar driven by percent width.

DataMetricSparkSVG-based spark chart primitive using svgMachine for machine layouts.

DataMetricTrendChange indicator with directional triangle, health coloring, and unit formatting.

DataMetricValueFlexible numeric display with dynamic font sizing, unit formatting, health mode, and loading spinner.

DataMetric_Base

DataMetric_Compact

DataMetric_InlineTrend

DataMetric_Simple

DataMetric_TinyInline

DataMetricBackground

DataMetricDate

DataMetricLabel

DataMetricPercentBar

DataMetricSpark

DataMetricTrend

DataMetricValue