# `lr-sparkline` - **Import** `import '@aceshooting/lyra-ui/components/lr-sparkline.js';` (stable tag alias; registers the tag) - **Class** `LyraSparkline`, also available unregistered from `@aceshooting/lyra-ui/components/data/sparkline/sparkline.class.js` - **Family** `components/data/` — see `llms/index.md` for its siblings - **Status** `stable` since `4.0.0` — see the maturity and deprecation policy in `llms/shared.md` - **Release history** [CHANGELOG.md](../../CHANGELOG.md); family-wide breaking-change summaries: [llms-full.txt](../../llms-full.txt) - **Deprecated part** `base` since `8.0.0`; use part `::part(sparkline)`; removal not before `10.0.0` — The sparkline part names the rendered SVG wrapper unambiguously; base remains on that same node during the compatibility window. That version is a policy floor, not a plan: `wa-sparkline` still publishes its own deprecated `base` part, so this alias is removed only when upstream's is. - **Optional peers** none - **Themeable via** 6 parts, 4 custom properties — see this component's own `@csspart`/`@cssprop` list below - **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md` --- ## `lr-sparkline` Zero-dependency inline SVG trend chart (mirrors ``). Its default allocation is one `em` tall at a `4 / 1` aspect ratio, so it can sit directly in text; authored block size changes both dimensions through the aspect ratio. An empty or removed `data` attribute uses the `values` collection. With no usable fallback samples, no trend path is rendered. Attribute removal preserves `null` property readback, and supplying later space-separated samples restores the attribute-driven path. **Properties:** - `appearance: 'gradient'|'line'|'solid' = 'solid'` (reflected) — `solid` fills the area below the stroke, `gradient` fades that fill toward the baseline, and `line` renders only the stroke - `curve: 'linear'|'natural'|'step' = 'linear'` (reflected) — straight segments, smooth cubic interpolation, or horizontal/vertical steps - `data: string = ''` — space-separated finite numbers such as `"5 4 4 3 4 2 3"`; at least two finite values are required. Invalid/non-finite tokens are dropped, and a remaining series shorter than two values renders the named empty wrapper without an invalid SVG path - `label: string = ''` — accessible name applied verbatim to the SVG - `trend?: 'positive'|'negative'|'neutral'` (reflected) — selects semantic Lyra-token defaults for the line and fill. The public color custom properties below always override it **Additive Lyra extensions:** - `values: readonly number[] = []` (attribute: false) — property-only programmatic data source used while `data` is empty; foreign/non-array assignments render the empty state rather than throwing - `mark: LyraSparklineMark = 'line'`, where `LyraSparklineMark = 'line'|'bar'` (reflected) — chooses line/path versus bounded rectangle geometry. Fill treatment remains solely on the mirrored `appearance` axis - `min?: number` (defaults to data minimum) - `max?: number` (defaults to data maximum) - `accessibleLabel: string | null = null` (attribute `aria-label`) — programmatic compatibility name for the additive `values` path. Naming precedence is an authored host `aria-label` (including an intentional empty value), then nonempty `label`, then a nonempty programmatic `accessibleLabel`, then the localized generated summary **Events:** none. **Slots:** none. **CSS parts:** `sparkline` and deprecated `base` are aliases on the same outer SVG, `fill` is the area path for solid/gradient appearance, `line` is the stroke path. Additive aliases are `area` on the same fill path and `bar` on each extension-mode rectangle. **Themeable custom properties:** `--fill-color` (area/gradient stop color), `--line-color` (stroke color), and `--line-width` (stroke width). Each reads through the live CSS cascade; line/fill default to the selected `trend`'s semantic Lyra tokens and `--line-width` falls back through the compatibility `--lr-sparkline-stroke-width` to `--lr-border-width-medium`. No canvas bridge or manual refresh is needed. **Optional peer deps:** none. ```html ``` **Known gotchas:** - The semantic `role="img"` and accessible name live on the SVG that owns the graphic. `label` is applied exactly. The additive `values` path retains its localized, effective-locale summary when neither naming property is present; a `data` chart without a label is left presentational rather than inventing spoken application data. - flat data (every value equal, so the auto-computed range spans zero) now renders a centered midline/mid-height bars instead of collapsing every point to the bottom edge, and a single-value additive `values` series renders a visible flat line. Mirrored `data` deliberately requires two values. **Every** rendering mode (`mark="line"` with any appearance, or `mark="bar"`) decimates a `values` array past 500 points down to at most 500 plotted samples — evenly sampled by index, always keeping the first and last value exactly, not aggregated/averaged. `mark="bar"` caps at 500 rendered ``s directly; line marks cap the point count baked into the single ``'s `d` string instead (an uncapped path string also grows unbounded, even though the element count stays at one ``). Auto `min`/`max` is still scanned from the _full_ pre-decimation `values` array, so a real extreme value that decimation happens to drop can't silently narrow the rendered scale. - Point order mirrors under RTL while the numeric sample order remains unchanged. There are no animations, so reduced-motion mode needs no alternate timing branch. - **9.0 migration:** rename additive `type="bar"`/`"line"` to `mark="bar"`/`"line"`. Replace `type="area"` with `mark="line" appearance="solid"`. `values` is now property-only, matching its array type; use mirrored `data` for declarative space-separated samples. ---