Detent web components
By Shane Logsdon

Charts & metrics

Live Line Chart

Implemented

Streaming line chart with pause and scrub

detent-live-line-chart

Port status
Catalog status
implemented
Origin
upstream
Phase
3
Wave
phase-3-data
Group
Charts & metrics

8.9 KB gzip for the class module

Variants

fixed domain 0–80, readout hidden, static history

Local sample data only: the chart in the preview simulates a feed with a timer in this page.

Recorded states

  • hover recorded state; no setter
  • pressed recorded state; no setter
  • closed recorded state; no setter
  • paused recorded state; no setter
  • reduced motion recorded state; no setter

Usage

Import

import '/components/live-line-chart/define.js';

// or register it yourself
import { DetentLiveLineChart } from '/components/live-line-chart/live-line-chart.js';

Attributes

  • aria-label
  • color
  • height
  • interval-ms
  • show-readout
  • unit
  • window-seconds

Properties

  • domain
  • formatValue
  • initial
  • source

Slots

No slots are recorded for this component.

Events

No events are recorded for this component.

Example

Runnable example: site/examples/live-line-chart.ts. The snippet below is generated from the catalogued attributes.

<detent-live-line-chart
  aria-label="auto-generated"
  color
  height="220"
  interval-ms="1000"
  show-readout
  unit=""
  window-seconds="60"
></detent-live-line-chart>

Property-only values

const element = document.querySelector('detent-live-line-chart');
if (element !== null) {
  // source: (push) => void | (() => void)
  element.source = () => {};
  // initial: number[]
  element.initial = [];
  // formatValue: (n: number) => string
  element.formatValue = () => {};
  // domain: [number, number]
  element.domain = undefined;
}

Source

The pinned upstream source for this row:

  • src/components/ui/LiveLineChart.tsx sha256 649f24a31508…

Native files

The native module and its artifacts:

  • src/components/live-line-chart/live-line-chart.ts
  • src/components/live-line-chart/styles.css
  • src/components/live-line-chart/define.ts
  • docs/components/live-line-chart.md
  • site/examples/live-line-chart.ts
  • tests/browser/live-line-chart.spec.ts
  • evidence/components/live-line-chart.md

API

Boolean attributes follow HTML presence semantics: present means true, absent means false, and disabled="false" still means disabled.

Attributes

Attributes
AttributePropertyTypeDefaultNotes
aria-labelariaLabelstringauto-generatedKebab-case attribute; camelCase property.
colorcolorstringCHART_COLORS[0]Kebab-case attribute; camelCase property.
heightheightnumber220Kebab-case attribute; camelCase property.
interval-msintervalMsnumber1000Kebab-case attribute; camelCase property.
show-readoutshowReadoutbooleantruePresence semantics: present means true, absent means false.
unitunitstring""Kebab-case attribute; camelCase property.
window-secondswindowSecondsnumber60Kebab-case attribute; camelCase property.

Properties

Properties
PropertyTypeDefaultNotes
domain[number, number]—Property-only: assign from script; not accepted as an attribute.
formatValue(n: number) => stringIntl.NumberFormatProperty-only: assign from script; not accepted as an attribute.
initialnumber[]—Property-only: assign from script; not accepted as an attribute.
source(push) => void | (() => void)—Property-only: assign from script; not accepted as an attribute.

Events

No custom events are recorded for this component.

Slots

No slots are recorded for this component.

CSS customisation

  • `className` prop is replaced by documented CSS parts/custom properties; no Tailwind in consumers.
  • Framer Motion springs/AnimatePresence ported to CSS transitions, WAAPI or the shared rAF spring helper.
  • React state/hooks replaced by element-owned state with pre-upgrade property preservation.
  • className is replaced by the documented CSS parts and custom properties; consumers need no Tailwind.
  • The source hook is not restarted on every property change; it is called once per connection and when source is replaced, and its cleanup runs on disconnect.
  • initial re-seeds the buffer when assigned (upstream only reads it on mount), which makes a replayed window possible; assigning it emits no event.
  • The default colour is upstream CHART_COLORS[0] resolved through --detent-chart-series-1, whose light value is darkened so the line keeps ≥ 3:1 against the surface (PC-12.6).
  • Y-axis ticks always use the compact tick formatter; formatValue formats the readout and the tooltip, as upstream.
  • Reduced motion draws one still frame per update instead of running the loop, so no frames are scheduled at all rather than a quiet loop (PC-10.5, PC-10.6).
  • A "Waiting for readings" state is shown when fewer than two readings exist; upstream draws an empty frame.

What it does

A live-updating line chart that streams readings into a rolling time window, with a current-value readout, a delta and a pause control.

Upstream behaviour
  • Subscribes to any push-based source such as a WebSocket, SSE stream, or interval
  • Draws directly into the DOM at 60fps without React re-renders on every frame
  • Auto-scaling y-range that eases smoothly as the visible window changes
  • Hovering or touching pauses the stream and freezes the frame for inspection
  • Crosshair tooltip shows the sampled value and how many seconds ago it arrived
  • Large readout with a live delta and a pause/resume button
  • Optional fixed y-domain, custom units, formatters, and colors
  • Pauses rendering when off-screen or when the tab is hidden
  • Container-aware sizing and prefers-reduced-motion support
Differences from upstream
  • `className` prop is replaced by documented CSS parts/custom properties; no Tailwind in consumers.
  • Framer Motion springs/AnimatePresence ported to CSS transitions, WAAPI or the shared rAF spring helper.
  • React state/hooks replaced by element-owned state with pre-upgrade property preservation.
  • className is replaced by the documented CSS parts and custom properties; consumers need no Tailwind.
  • The source hook is not restarted on every property change; it is called once per connection and when source is replaced, and its cleanup runs on disconnect.
  • initial re-seeds the buffer when assigned (upstream only reads it on mount), which makes a replayed window possible; assigning it emits no event.
  • The default colour is upstream CHART_COLORS[0] resolved through --detent-chart-series-1, whose light value is darkened so the line keeps ≥ 3:1 against the surface (PC-12.6).
  • Y-axis ticks always use the compact tick formatter; formatValue formats the readout and the tooltip, as upstream.
  • Reduced motion draws one still frame per update instead of running the loop, so no frames are scheduled at all rather than a quiet loop (PC-10.5, PC-10.6).
  • A "Waiting for readings" state is shown when fewer than two readings exist; upstream draws an empty frame.
Previous: Blob Toggle Next: Loader
Detent web components

Detent is a native rewrite of the MIT-licensed EasyUI catalog by Suraj Maurya; built from catalog/components.json and catalog/routes.json with no React-family runtime.

Docs

Components

Project

© 2026 Detent contributors. Upstream MIT license preserved. Human accessibility verification is still open; implementation status is shown per component.