Data

Stats, charts, trends, and key-value displays for presenting metrics.

How data & data-metric relate →

DataCardBordered surface card wrapping a title, a primary DataMetricValue, and a description, with slots to override the value or append details.

DataChartUIFull Chart.js wrapper supporting line and bar charts with auto-formatted axes.

DataDonutChartDonut/pie chart with a center slot and a swatch legend, driven by an array of {title, percent, html} items.

DataHistoryGraphPictogram-style history chart — one unit-block lane per series, side by side per time column (or continuous bars past a density threshold), with an inline swatch legend.

DataIdentityItemOne cell in an entity identity row: a leading visual (slot) beside a small muted label over a bold value.

DataKeyValKey-value pair with grey label above and semi-bold value below.

DataPercentBarWraps UxPercentBar with compact-formatted total text and percent-width bar.

DataSmileArticulating SVG smile gauge — a curve that bends from frown (low) through flat (mid) to smile (high), with a range-driven gradient fill and matching numeric readout.

DataSparkChartSmall inline line chart rendered via Chart.js with configurable fill and stroke.

DataSparkChartOldLegacy SVG-based spark chart using svgMachine. Renders a polygon/polyline with scaleY flip.

DataStatLarge numeric statistic with label, formatted value, loading spinner, and optional health coloring.

DataSurfacePanelRanked rows with a trailing DataPercentBar column — the house shape for "what does this thing touch" lists (models, MCP servers, workspaces, tools, sessions). Owns its overflow behavior via UxShowMore.

DataTableColumn-config-driven data table with sorting, search, tone-mapped pills, and optional expandable rows.

DataTimelineX-axis timeline with vertical gridlines and time labels for different timeframes.

DataTrendDirectionDisplays a trend value with +/- prefix and a directional triangle icon.

DataValMetric card with label, formatted value, inline slot, health coloring, and optional radio-button mode.

DataYAxisY-axis ruler overlay with evenly-spaced stop labels.

DataCard

DataChartUI

DataDonutChart

DataHistoryGraph

DataIdentityItem

DataKeyVal

DataPercentBar

DataSmile

DataSparkChart

DataSparkChartOld

DataStat

DataSurfacePanel

DataTable

DataTimeline

DataTrendDirection

DataVal

DataYAxis