Charts & metrics
Area Chart
Interactive area chart with range selection
detent-area-chart
Port status
- Catalog status
- implemented
- Origin
- upstream
- Phase
- 3
- Wave
- phase-3-data
- Group
- Charts & metrics
9.2 KB gzip for the class module · inlines the shared spring
Variants
7D week view
no data (empty state)
Local sample data only: pick a range with the tabs, or focus a chart and press ArrowLeft.
Recorded states
hoverrecorded state; no setterclosedrecorded state; no setterselectedrecorded state; no setterreduced motionrecorded state; no setteractiverecorded state; no setter
Usage
Import
import '/components/area-chart/define.js';
// or register it yourself
import { DetentAreaChart } from '/components/area-chart/area-chart.js';Attributes
default-rangeheighttitle
Properties
data
Slots
No slots are recorded for this component.
Events
No events are recorded for this component.
Example
Runnable example: site/examples/area-chart.ts. The snippet below is generated from the catalogued attributes.
<detent-area-chart
default-range="30D"
height="280"
title="Revenue"
></detent-area-chart>Property-only values
const element = document.querySelector('detent-area-chart');
if (element !== null) {
// data: AreaChartData
element.data = undefined;
}Source
The pinned upstream source for this row:
src/components/ui/InteractiveAreaChart.tsxsha256 ecaa0b1977b2…
Native files
The native module and its artifacts:
src/components/area-chart/area-chart.tssrc/components/area-chart/styles.csssrc/components/area-chart/define.tsdocs/components/area-chart.mdsite/examples/area-chart.tstests/browser/area-chart.spec.tsevidence/components/area-chart.md
API
Boolean attributes follow HTML presence semantics: present means true, absent means false, and disabled="false" still means disabled.
Attributes
| Attribute | Property | Type | Default | Notes |
|---|---|---|---|---|
default-range | defaultRange | string | "30D" | Kebab-case attribute; camelCase property. |
height | height | number | 280 | Kebab-case attribute; camelCase property. |
title | title | string | "Revenue" | Kebab-case attribute; camelCase property. |
Properties
| Property | Type | Default | Notes |
|---|---|---|---|
data | AreaChartData | DEFAULT_AREA_CHART_DATA | 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.
- React state/hooks replaced by element-owned state with pre-upgrade property preservation.
- The two extra exports (makeSeries, DEFAULT_AREA_CHART_DATA) ship from the class module instead of a second tag, keeping PC-2.1's one-to-one rule (recorded decision for the row's exports).
- className is replaced by the documented CSS parts and custom properties; consumers need no Tailwind.
- React state/hooks and Framer Motion's springs become element-owned state plus the shared createSpring helper (pinned 520/42/0.6 for the crosshair).
- default-range reflects the active range; a range the data does not contain selects the first key rather than rendering nothing.
- The line uses --detent-chart-series-1, whose light value is darkened so the mark keeps ≥ 3:1 against the surface (PC-12.6).
- role="tab" buttons have no aria-controls tabpanel: the chart they control is a single role="img", exactly as upstream, which is recorded rather than invented.
- Under reduced motion the morph is applied in one step and the crosshair jumps; no animation frame is scheduled for either.
What it does
A hand-written SVG area chart with a range switcher (7D / 30D / 1Y by default), an interruptible dataset morph, Catmull-Rom smoothing, a spring-tracked crosshair and full keyboard scrubbing. Zero charting dependencies and no network code of its own.
Upstream behaviour
- Hand-crafted SVG path generation with zero charting library dependencies
- Interruptible dataset morphing transition between date ranges (7D, 30D, 1Y)
- Catmull-Rom spline interpolation for smooth curve rendering
- Fluid scrubbing with spring-tracked crosshair, dot, and floating tooltip
- Full keyboard scrubbing support using Left and Right arrow keys
Differences from upstream
- `className` prop is replaced by documented CSS parts/custom properties; no Tailwind in consumers.
- React state/hooks replaced by element-owned state with pre-upgrade property preservation.
- The two extra exports (makeSeries, DEFAULT_AREA_CHART_DATA) ship from the class module instead of a second tag, keeping PC-2.1's one-to-one rule (recorded decision for the row's exports).
- className is replaced by the documented CSS parts and custom properties; consumers need no Tailwind.
- React state/hooks and Framer Motion's springs become element-owned state plus the shared createSpring helper (pinned 520/42/0.6 for the crosshair).
- default-range reflects the active range; a range the data does not contain selects the first key rather than rendering nothing.
- The line uses --detent-chart-series-1, whose light value is darkened so the mark keeps ≥ 3:1 against the surface (PC-12.6).
- role="tab" buttons have no aria-controls tabpanel: the chart they control is a single role="img", exactly as upstream, which is recorded rather than invented.
- Under reduced motion the morph is applied in one step and the crosshair jumps; no animation frame is scheduled for either.