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.

DataDotStripRows of readings as marks on one shared numeric axis: two or more readings per row stay visible, so nothing is averaged away. Shapes carry identity (dot, ring, diamond, square, keyed by the legend); an optional reference band, an outlined whole (track) and a dashed target; a tooltip per mark on hover and focus. From design c138's footprint page (layer v0.9.39).

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. Opt-in: `stacked` draws the series bottom-up in one column a day; `maxHeight` caps the chart's height by coarsening the unit (design c110).

DataHoverBreakdownA pointer-following card that breaks a row's number and drawing down into the items it's made of — a one-line 28 px title with the main datapoint in the upper right, tight context lines, a full-width summary drawing, then the items flowing into columns (down, then across). The card sizes to its content up to maxWidth (default: the window), where the title truncates. Placed above the pointer from its measured height (below when there's no room), always inside the window. Without items it's a plain tooltip. Extracted from design c100 (lever-strip variations).

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.

DataRankedBarsRanked-share rows — the "Ranked share" DataMachine preset as a component: one compact UxPercentBar per row in one hue, each bar the item's share of the whole (not of the max), so the rows read as the concentration the provenance names.

DataSegmentBarHorizontal 100 % bar of named segments — values in (the component normalizes), a 2 px surface gap between fills, per-segment hover title, and a legend of title + value in text tokens.

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.

DataSurfaceSectionThe chrome around a set of DataSurfacePanels — the "Surface" heading, a mono caption naming the scope ("what this agent touches"), a lede, an anchor id for NavJumpPills, and the responsive panel grid. Deliberately only the shell: which panels appear, what their bars measure, and where rows link is the consumer's composition.

DataTableColumn-config-driven data table with sorting, search, tone-mapped pills, and optional expandable rows. `columns` may change at runtime (a column picker): if the sorted column is hidden the sort falls back to initialSort, else the first sortable column (c95).

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

DataDotStrip

DataHistoryGraph

DataHoverBreakdown

DataIdentityItem

DataKeyVal

DataPercentBar

DataRankedBars

DataSegmentBar

DataSmile

DataSparkChart

DataSparkChartOld

DataStat

DataSurfacePanel

DataSurfaceSection

DataTable

DataTimeline

DataTrendDirection

DataVal

DataYAxis