# Sparkline

> A row-sized trend line with no axes: the SVG stretches to its box while the stroke keeps its width, an optional area and last-point dot mark where the series ends, and a one-word state can sit beside it, so a list row carries its own trend.

```ts
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

```tsx
<Sparkline values={latency} label={t("monitor.latencyTrend")} tone="warning" state={t("trend.degrading")} />
```

```tsx
<Sparkline values={checks} label={t("monitor.checks")} area dot={false} domain={[0, 100]} />
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `values` | `readonly (number \| null)[]` | Samples in time order; a `null` leaves a gap in the line instead of drawing a zero. |
| `label` | `string` | Accessible name of the graphic, summarising the trend ("p95 latency, rising"). |
| `description?` | `string` | Longer accessible description, such as the range and the latest value. |
| `tone?` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` |  |
| `area?` | `boolean` | Fills the region under the line. |
| `dot?` | `boolean` | Marks the latest sample with a dot. |
| `domain?` | `readonly [number, number]` | `[min, max]` the plot spans; the samples' own extremes when omitted, so rows can share a scale. |
| `state?` | `RemixNode` | One word beside the line that reads the trend ("Stable", "Degrading"). |
| `parts?` | `PartsProps` |  |

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. |