Sparkline
A row-sized trend line with no axes.
View code
{MONITORS.map((monitor) => (
<div key={monitor.name} mix={[grid(), raw({ gridTemplateColumns: "minmax(0, 1fr) 5rem minmax(0, 12rem)", alignItems: "center", gap: "1rem" })]}>
<span>{monitor.name}</span>
<span mix={[tabularNums(), textAlign("end")]}>{monitor.latest}</span>
<Sparkline
values={monitor.values}
label={`${monitor.name} response time, ${monitor.state.toLowerCase()}`}
tone={monitor.tone}
state={monitor.state}
/>
</div>
))}Demo apps
Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.
- CMSInkwellInkwell, a demo CMS built from @sdxc/ui/app: posts with count tabs and quick edit, an editor with a quiet save status and a loud Publish, media and settings./demo/apps/inkwell
- Ops dashboardPulsePulse, an invented ops dashboard: Northwind's services with live filters, a peek sheet and a bulk bar, metrics that switch one chart, incidents, deploys and settings./demo/apps/pulse
- Support inboxRelayRelay, an invented support inbox: mailboxes, conversations and the open conversation on one screen, with contacts, reports and settings./demo/apps/relay
Every demo, landings and docs sites alike, is listed in the demo gallery.
Installation
An ordinary dependency: install it, import the theme once, and import the component where it is used.
npm add @sdxc/ui remiximport "@sdxc/ui/theme.css";Usage
import { Sparkline } from "@sdxc/ui/app";Renders the trend: a role="img" SVG named by label that fills the row's inline size at
--ui-sparkline-block-size, with a stroke that stays --ui-sparkline-line-width wide at any
size. The latest-point dot is a round box over the plot, so it stays round when the plot stretches.
Examples
<Sparkline values={checks} label={t("monitor.checks")} area dot={false} domain={[0, 100]} />Props
Read from the component's own types, so every prop, every default and every allowed value is listed.
| Prop | Type | Required | Description |
|---|---|---|---|
values | readonly (number | null)[] | Yes | Samples in time order; a null leaves a gap in the line instead of drawing a zero. |
label | string | Yes | Accessible name of the graphic, summarising the trend ("p95 latency, rising"). |
description | string | No | Longer accessible description, such as the range and the latest value. |
tone | "brand" | "neutral" | "success" | "warning" | "danger" | No | |
area | boolean | No | Fills the region under the line. |
dot | boolean | No | Marks the latest sample with a dot. |
domain | readonly [number, number] | No | [min, max] the plot spans; the samples' own extremes when omitted, so rows can share a scale. |
state | RemixNode | No | One word beside the line that reads the trend ("Stable", "Degrading"). |
parts | PartsProps | No |
Also accepts everything in Omit<TagProps<"span">, "children">.
Types
| Name | Values | What it decides |
|---|---|---|
Tone | "brand" | "neutral" | "success" | "warning" | "danger" | Semantic role the line, area and dot are drawn in. |