basalt-ui 1.41.0 → 2.0.1

package/src/charts/Lines.tsx

@@ -0,0 +1,151 @@
+/**
+ * `Lines` — n line series over the rung (`docs/V2-SPEC.md` § 9.3; the two 1.x line kinds, merged).
+ * Per series: an optional `area` gradient, dash, curve, markers, the right axis. Per chart:
+ * `thresholds` (fills between the first series and a value, Date/number x only). Zones, x-zones,
+ * reference lines, `y2`, legend, cursor and tooltip are the rung's.
+ *
+ * At the wide class with ≤ 3 plotted lines and no `y2`, each line also carries an end label; the
+ * legend still names every series (and still toggles them).
+ */
+import { areaY } from '@tanstack/charts/area'
+import { differenceY } from '@tanstack/charts/difference'
+import { decorative } from '@tanstack/charts/mark/decorative'
+import { text } from '@tanstack/charts/text'
+import { useCallback } from 'react'
+import type { ReactElement } from 'react'
+import { VX } from '../tokens'
+import { CartesianRung } from './CartesianChart'
+import { areaGradientId } from './compile'
+import { chartCurve } from './curves'
+import { lineMark, markersOf, yScaleOf } from './marks'
+import { rowX } from './types'
+import type {
+  CartesianChartProps,
+  ChartMarks,
+  ChartSeries,
+  ChartX,
+  PlotContext,
+  PlotRow,
+  Threshold,
+} from './types'
+
+const MAX_END_LABELS = 3
+/** Below this vertical gap two end labels would collide; then none is drawn. */
+const END_LABEL_MIN_GAP = 13
+const END_LABEL_DX = 6
+
+export type LinesProps<T, X extends ChartX = ChartX> = Omit<CartesianChartProps<T, X>, 'marks'> & {
+  /**
+   * Fills between the first visible series and a value, on one side of it. Unavailable on a string
+   * x: the engine's `differenceY` takes a Date or number x only.
+   */
+  thresholds?: [X] extends [string] ? never : readonly Threshold[]
+}
+
+const hasValue = <T, X extends ChartX>(r: PlotRow<T, X>): boolean => r.y !== null
+
+function endLabels<T, X extends ChartX>(
+  plot: PlotContext<T, X>,
+  lines: readonly ChartSeries<T>[],
+): ChartMarks {
+  if (plot.containerClass !== 'wide' || plot.y2 !== undefined) return []
+  if (lines.length === 0 || lines.length > MAX_END_LABELS) return []
+  const last = lines.flatMap((s) => {
+    const row = plot.rows(s.key).findLast(hasValue)
+    return row ? [{ s, row }] : []
+  })
+  // Collision check in pixels from the plot height: labels that would overlap are not drawn at all.
+  // No `y2` here (returned above), so every label reads the left domain.
+  const domain = plot.yDomain
+  const ys = last.map(({ row }) => {
+    if (row.y === null) return Number.NaN
+    return ((row.y - domain[0]) / (domain[1] - domain[0] || 1)) * plot.height
+  })
+  const sorted = ys.toSorted((a, b) => a - b)
+  if (
+    sorted.some(
+      (y, i) => Number.isNaN(y) || (i > 0 && y - (sorted[i - 1] as number) < END_LABEL_MIN_GAP),
+    )
+  )
+    return []
+  return last.map(({ s, row }) =>
+    decorative(
+      text([row], {
+        id: `${s.key}-end-label`,
+        x: rowX,
+        y: 'y',
+        text: () => s.label,
+        fill: s.color,
+        fontSize: VX.text.micro,
+        anchor: 'start',
+        dx: END_LABEL_DX,
+      }),
+    ),
+  )
+}
+
+export function Lines<T, X extends ChartX = ChartX>(props: LinesProps<T, X>): ReactElement {
+  const { thresholds, ...rest } = props
+  const { series } = props
+  const marks = useCallback(
+    (plot: PlotContext<T, X>): ChartMarks => {
+      const indexOf = new Map(series.map((s, i) => [s.key, i]))
+      const plotted = plot.visible.filter((s) => plot.rows(s.key).some(hasValue))
+      const primary = plotted[0]
+      const out: ChartMarks[number][] = []
+
+      // Threshold lobes first (under the line), against the first plotted series.
+      if (primary && thresholds) {
+        const pts = plot.rows(primary.key).filter(hasValue) as PlotRow<T, Date | number>[]
+        thresholds.forEach((t, i) => {
+          out.push(
+            decorative(
+              differenceY(pts, {
+                id: `threshold-${i}`,
+                x: rowX,
+                y1: t.value,
+                y2: 'y',
+                positiveFill: t.side === 'above' ? t.fill : null,
+                negativeFill: t.side === 'below' ? t.fill : null,
+                fillOpacity: 1,
+                stroke: 'none',
+                comparisonStroke: 'none',
+                ...(yScaleOf(plot, primary) !== undefined && { yScale: 'y2' }),
+              }),
+            ),
+          )
+        })
+      }
+      for (const s of plot.visible) {
+        if (!s.area) continue
+        out.push(
+          decorative(
+            areaY(plot.rows(s.key), {
+              id: `${s.key}-area`,
+              x: rowX,
+              y2: 'y',
+              y1: () => 0,
+              fill: `url(#${areaGradientId(indexOf.get(s.key) ?? 0)})`,
+              fillOpacity: 1,
+              curve: chartCurve(s.curve ?? 'monotone'),
+              ...(yScaleOf(plot, s) !== undefined && { yScale: 'y2' }),
+            }),
+          ),
+        )
+      }
+      for (const s of plot.visible) {
+        out.push(lineMark(plot, s))
+        out.push(...markersOf(s, plot.rows(s.key), yScaleOf(plot, s)))
+      }
+      out.push(
+        ...endLabels(
+          plot,
+          plotted.filter((s) => s.role !== 'reference'),
+        ),
+      )
+      return out
+    },
+    [series, thresholds],
+  )
+  return <CartesianRung {...rest} marks={marks} />
+}

package/src/charts/MirroredBars.tsx

@@ -0,0 +1,303 @@
+/**
+ * `MirroredBars` — two bar panes mirrored around one baseline, each in its OWN y domain
+ * (`docs/V2-SPEC.md` § 9.2, § 9.3): the `up` pane grows from the baseline upward, the `down` pane
+ * downward. Two views composed with `composeViews` + `grid` + `alignX`, one host, one cursor, one
+ * tooltip.
+ *
+ * Why two domains: an upload an order of magnitude below its download flattens to a line along the
+ * baseline on a shared scale, and it is the half that explains a stall. A pane has no lower bound to
+ * configure — its zero IS the baseline.
+ *
+ * ABSENCE is a state a reader cannot decode from either axis, so it is drawn across the full height
+ * of both panes in one flat `--vx-neutral` fill: a `getAbsentFraction` share of a bar's width that no
+ * source sample covers. A bar that measured zero draws nothing; an absent one draws neutral.
+ */
+import { decorative } from '@tanstack/charts/mark/decorative'
+import { rect } from '@tanstack/charts/rect'
+import { ruleY } from '@tanstack/charts/rule'
+import { scaleLinear } from '@tanstack/charts/scales/linear'
+import type { ChartTooltipRow as EngineTooltipRow, ChartValue } from '@tanstack/charts/types/core'
+import { useCallback, useMemo } from 'react'
+import type { ReactElement } from 'react'
+import { VX, alpha } from '../tokens'
+import { resolveContainerClass } from '../tokens/size-classes'
+import { defaultFormatX, defaultNumberFormat, visibleSeries } from './compile'
+import { barMark, emphasis } from './marks'
+import { PanelRung, paneX, paneY, rowsOf } from './panel'
+import type { PaneBuilder, PanelInput, PanelPlan } from './panel'
+import { xScaleFor } from './scales'
+import { rowX } from './types'
+import type { CartesianChartProps, ChartSeries, ChartX, PlotRow } from './types'
+
+/** One of the two panes. */
+export type MirroredBarPane = {
+  /** The `series` entry this pane draws: its colour, legend entry and tooltip row. A key naming no
+   * entry throws: the pane would vanish, which reads as a measured zero. */
+  key: string
+  /** The pane's upper bound. `'auto'` (default) is its own visible maximum; a number pins it. */
+  max?: number | 'auto'
+  /** When `'auto'`: floors the upper bound, so a quiet window does not amplify noise to full height. */
+  autoMaxFloor?: number
+  /** Tick count for this pane's own axis. Default 3. */
+  ticks?: number
+  /** Tick and tooltip formatter, in the pane's OWN units. */
+  format: (v: number) => string
+}
+
+/** A bar series. Any entry that is neither pane is legend-only (give it `getValue: () => null`). */
+export type MirroredBarsSeries<T> = Pick<
+  ChartSeries<T>,
+  'key' | 'label' | 'color' | 'getValue' | 'formatValue' | 'tooltip' | 'legend' | 'role' | 'note'
+>
+
+export type MirroredBarsProps<T, X extends ChartX = ChartX> = Pick<
+  CartesianChartProps<T, X>,
+  | 'ariaLabel'
+  | 'data'
+  | 'x'
+  | 'formatX'
+  | 'legend'
+  | 'height'
+  | 'state'
+  | 'cursorGroup'
+  | 'tooltip'
+  | 'className'
+  | 'style'
+> & {
+  /** The single source of colours, legend entries and tooltip rows. */
+  series: readonly MirroredBarsSeries<T>[]
+  /** Drawn above the baseline. */
+  up: MirroredBarPane
+  /** Drawn below the baseline. */
+  down: MirroredBarPane
+  /** The up pane's share of the height. Default 0.35: the pair is usually asymmetric. */
+  upFraction?: number
+  /** 0..1 of a bar's width that no source sample covers, drawn neutral across both panes. */
+  getAbsentFraction?: (d: T) => number
+  /** Per-datum bar opacity: a real but qualified measurement (a short bucket) drawn dimmer. */
+  getBarOpacity?: (d: T) => number
+  /**
+   * Collapse adjacent data where one band per datum would be sub-pixel. `merge` is the consumer's
+   * (max, sum, or a rate from summed parts) and must keep `group[0]`'s x, the slot start.
+   */
+  fold?: { minBandPx?: number; merge: (group: T[]) => T }
+  /** Default `'leading'`: x is a slot's start. */
+  cursorResolution?: CartesianChartProps<T, X>['cursorResolution']
+}
+
+const DEFAULT_UP_FRACTION = 0.35
+const DEFAULT_PANE_TICKS = 3
+const DEFAULT_MIN_BAND_PX = 3
+const BAR_OPACITY = 1
+/** A band's drawn share of its step: `1 - BAND_PADDING_INNER` in `scales.ts`. */
+const BAND_FILL = 0.8
+
+const clamp01 = (v: number | undefined): number =>
+  v === undefined || !Number.isFinite(v) ? 0 : Math.min(Math.max(v, 0), 1)
+
+/** At most `cap` slots: adjacent data merged in equal runs. */
+function fold<T>(data: readonly T[], cap: number, merge: (group: T[]) => T): T[] {
+  if (cap <= 0) return []
+  if (data.length <= cap) return [...data]
+  const size = Math.ceil(data.length / cap)
+  const out: T[] = []
+  for (let i = 0; i < data.length; i += size) out.push(merge(data.slice(i, i + size)))
+  return out
+}
+
+/** One pane's upper bound; `|| 1` guards a window with no traffic (a zero-width domain is NaN). */
+function paneMax<T>(pane: MirroredBarPane, s: ChartSeries<T>, data: readonly T[], on: boolean) {
+  if (pane.max !== undefined && pane.max !== 'auto') return pane.max || 1
+  if (!on) return 1
+  let max = 0
+  for (const d of data) {
+    const v = s.getValue(d)
+    if (v !== null && Number.isFinite(v)) max = Math.max(max, v)
+  }
+  return Math.max(max, pane.autoMaxFloor ?? 0) || 1
+}
+
+function assertPaneKey<T>(
+  side: 'up' | 'down',
+  key: string,
+  series: readonly ChartSeries<T>[],
+): ChartSeries<T> {
+  const found = series.find((s) => s.key === key)
+  if (found) return found
+  throw new Error(
+    `[basalt] MirroredBars: ${side}.key "${key}" names no \`series\` entry ` +
+      `(known: ${series.map((s) => s.key).join(', ')}): the pane would silently vanish, which ` +
+      'reads as a measured zero.',
+  )
+}
+
+export function MirroredBars<T, X extends ChartX = ChartX>(
+  props: MirroredBarsProps<T, X>,
+): ReactElement {
+  const { data, x, series, up, down, upFraction = DEFAULT_UP_FRACTION, ...more } = props
+  const { getAbsentFraction, getBarOpacity, fold: foldConfig, cursorResolution = 'leading' } = more
+  const { getAbsentFraction: _a, getBarOpacity: _b, fold: _f, cursorResolution: _c, ...rung } = more
+  const { formatX } = rung
+
+  const bars = useMemo<ChartSeries<T>[]>(
+    () => series.map((s) => ({ ...s, mark: 'bar' as const })),
+    [series],
+  )
+
+  const plan = useCallback(
+    ({ hidden, highlighted, width }: PanelInput): PanelPlan<T> => {
+      const upSeries = assertPaneKey('up', up.key, bars)
+      const downSeries = assertPaneKey('down', down.key, bars)
+      const drawn = foldConfig
+        ? fold(
+            data,
+            Math.floor(width / (foldConfig.minBandPx ?? DEFAULT_MIN_BAND_PX)),
+            foldConfig.merge,
+          )
+        : data
+      const model = xScaleFor<X>(drawn.map(x), true)
+      const visible = visibleSeries(bars, hidden)
+      const upOn = visible.includes(upSeries)
+      const downOn = visible.includes(downSeries)
+      const format = (v: ChartValue): string => (formatX ? formatX(v as X) : defaultFormatX(v))
+      const upMax = paneMax(up, upSeries, drawn, upOn)
+      const downMax = paneMax(down, downSeries, drawn, downOn)
+      const bandWidth = 2 * model.halfStep * BAND_FILL
+      // One instance per pane: the engine sets a scale's range, and the panes' plots differ in width.
+      const bandScale = () => xScaleFor<X>(drawn.map(x), true).scale
+
+      const pane =
+        (
+          side: 'up' | 'down',
+          cfg: MirroredBarPane,
+          s: ChartSeries<T>,
+          on: boolean,
+          max: number,
+        ): PaneBuilder =>
+        ({ width: w }) => {
+          const cls = resolveContainerClass(w)
+          // The down pane's zero is at its top.
+          const domain: [number, number] = side === 'up' ? [0, max] : [max, 0]
+          const rows: PlotRow<T, X>[] = on ? rowsOf(drawn, x, s) : []
+          const opacity = (d: T): number =>
+            (getBarOpacity?.(d) ?? BAR_OPACITY) * emphasis(highlighted, s)
+          // A partly-absent bar is painted by rects on the plot-fraction scale, so its measured share
+          // is narrower than its band; the bar itself stays as the (transparent) focus target.
+          const left = (row: PlotRow<T, X>): number => (model.fraction(row.x) ?? 0) - bandWidth / 2
+          const absent = (d: T): number => clamp01(getAbsentFraction?.(d))
+          const measured = rows.filter(
+            (r) => r.y !== null && absent(r.datum) > 0 && absent(r.datum) < 1,
+          )
+          const byOpacity = (rs: PlotRow<T, X>[]): [number, PlotRow<T, X>[]][] => {
+            const groups = new Map<number, PlotRow<T, X>[]>()
+            for (const r of rs) {
+              const o = opacity(r.datum)
+              const group = groups.get(o)
+              if (group) group.push(r)
+              else groups.set(o, [r])
+            }
+            return [...groups]
+          }
+          const gaps = (on ? drawn : []).flatMap((d, i) => {
+            const a = absent(d)
+            const row = rows[i] ?? { x: x(d), y: null, series: s.key, datum: d }
+            return a > 0 ? [{ row, a }] : []
+          })
+          return {
+            marks: [
+              ruleY([0], {
+                id: 'baseline',
+                stroke: VX.axisStroke,
+                strokeOpacity: 1,
+                strokeWidth: 1,
+              }),
+              barMark(rows, {
+                id: `${side}-bars`,
+                x: rowX,
+                y: 'y',
+                fill: (row: PlotRow<T, X>) =>
+                  absent(row.datum) > 0 ? 'transparent' : alpha(s.color, opacity(row.datum)),
+              }),
+              // A rect's fill is constant, so one mark per distinct opacity.
+              ...byOpacity(measured).map(([o, group]) =>
+                decorative(
+                  rect(group, {
+                    id: `${side}-measured-${o}`,
+                    x1: (r) => left(r),
+                    x2: (r) => left(r) + bandWidth * (1 - absent(r.datum)),
+                    y1: () => 0,
+                    y2: (r) => r.y ?? 0,
+                    xScale: 'zx',
+                    fill: alpha(s.color, o),
+                    inset: 0,
+                  }),
+                ),
+              ),
+              decorative(
+                rect(gaps, {
+                  id: `${side}-absent`,
+                  x1: ({ row, a }) => left(row) + bandWidth * (1 - a),
+                  x2: ({ row }) => left(row) + bandWidth,
+                  y1: () => 0,
+                  y2: () => max,
+                  xScale: 'zx',
+                  fill: VX.neutral,
+                  inset: 0,
+                }),
+              ),
+            ],
+            scales: {
+              x:
+                side === 'down'
+                  ? paneX({ scale: bandScale(), model, format, cls })
+                  : { scale: bandScale(), axis: false },
+              y: paneY({
+                scale: scaleLinear().domain(domain),
+                domain,
+                format: cfg.format,
+                ticks: cfg.ticks ?? DEFAULT_PANE_TICKS,
+                cls,
+              }),
+              zx: { channel: 'x', scale: scaleLinear().domain([0, 1]), axis: false },
+            },
+          }
+        }
+
+      return {
+        keys: model.values,
+        top: pane('up', up, upSeries, upOn, upMax),
+        bottom: pane('down', down, downSeries, downOn, downMax),
+        topFraction: upFraction,
+        gap: 0,
+        rows: (d) => {
+          const out: EngineTooltipRow[] = []
+          for (const s of visible) {
+            const v = s.getValue(d)
+            if (s.tooltip === false || v === null || !Number.isFinite(v)) continue
+            // Each pane's row falls back to ITS OWN formatter: the panes are in different units.
+            const fallback =
+              s.key === up.key ? up.format : s.key === down.key ? down.format : defaultNumberFormat
+            out.push({
+              label: s.note === undefined ? s.label : `${s.label} · ${s.note}`,
+              value: s.formatValue ? s.formatValue(v, d) : fallback(v),
+              color: s.color,
+              ...(highlighted === s.key && { active: true }),
+            })
+          }
+          return out
+        },
+      }
+    },
+    [data, x, bars, up, down, upFraction, getAbsentFraction, getBarOpacity, foldConfig, formatX],
+  )
+
+  return (
+    <PanelRung
+      {...rung}
+      series={bars}
+      plan={plan}
+      byWidth={foldConfig !== undefined}
+      cursorResolution={cursorResolution}
+    />
+  )
+}

package/src/charts/Sparkline.tsx

@@ -0,0 +1,176 @@
+/**
+ * `Sparkline` — a quiet inline trend, line or bar (`docs/V2-SPEC.md` § 9.3; the two 1.x sparkline
+ * kinds, merged). Guide-free and zero-margin, so the plot is the whole box: no axes, grid, legend,
+ * cursor or tooltip. It does not ride `CartesianChart` (all of that is the rung's chrome); it
+ * compiles a bare definition and mounts it on the same host. `width` omitted, the host measures
+ * the container, which is what a `StatCard` sparkline slot or a flex row wants.
+ */
+import { dot } from '@tanstack/charts/dot'
+import { decorative } from '@tanstack/charts/mark/decorative'
+import { lineY } from '@tanstack/charts/line'
+import { scaleBand } from '@tanstack/charts/scales/band'
+import { scaleLinear } from '@tanstack/charts/scales/linear'
+import { useId, useMemo } from 'react'
+import type { ReactElement } from 'react'
+import type { BasaltProps } from '../common/props'
+import { VX } from '../tokens'
+import type { CartesianDefinition } from './compile'
+import { chartCurve } from './curves'
+import { barMark } from './marks'
+import { ChartEngine, idPrefixOf } from './host'
+import { CHART_THEME } from './theme'
+
+export type SparklineProps = BasaltProps & {
+  /** The accessible name. Required: a chart without one is an unlabeled image. */
+  ariaLabel: string
+  data: readonly number[]
+  /** Height in px. */
+  height: number
+  /** Width in px. Default: the container's, measured by the host. */
+  width?: number
+  /** Default `'line'`. */
+  mark?: 'line' | 'bar'
+  /** A `VX.*` ref or a series token. Default `VX.faint`. */
+  color?: string
+  /** Paints the last point in `emphasisColor` — the one reading a trend beside a KPI is for. */
+  emphasizeLast?: boolean
+  /** Default `VX.accent`. */
+  emphasisColor?: string
+}
+
+type Point = { i: number; v: number | null }
+
+const LINE_WIDTH = 1.6
+const DOT_R = 2.5
+const BAR_GAP = 0.15
+
+const finite = (v: number): number | null => (Number.isFinite(v) ? v : null)
+
+/** Min and max of the finite values, by loop (a spread overflows the stack on long series). */
+function extent(rows: readonly Point[]): readonly [number, number] | null {
+  let lo = Number.POSITIVE_INFINITY
+  let hi = Number.NEGATIVE_INFINITY
+  for (const r of rows) {
+    if (r.v === null) continue
+    if (r.v < lo) lo = r.v
+    if (r.v > hi) hi = r.v
+  }
+  return lo <= hi ? [lo, hi] : null
+}
+
+function compileSparkline(
+  rows: readonly Point[],
+  [lo, hi]: readonly [number, number],
+  mark: 'line' | 'bar',
+  color: string,
+  emphasisColor: string | null,
+): CartesianDefinition {
+  const last = rows.at(-1)
+  return {
+    chart: () => {
+      if (mark === 'bar') {
+        return {
+          marks: [
+            barMark(rows, {
+              id: 'bars',
+              x: 'i',
+              y: 'v',
+              fill: (r: Point) =>
+                emphasisColor !== null && r.i === rows.length - 1 ? emphasisColor : color,
+            }),
+          ],
+          scales: {
+            x: {
+              scale: scaleBand<number>()
+                .domain(rows.map((r) => r.i))
+                .padding(BAR_GAP),
+              axis: false as const,
+            },
+            y: {
+              scale: scaleLinear().domain([Math.min(lo, 0), Math.max(hi, 0) || 1]),
+              axis: false as const,
+            },
+          },
+          theme: CHART_THEME,
+          guides: false,
+          margin: 0,
+        }
+      }
+      // A flat or single-point series needs an extent; 10% air keeps the stroke inside the box.
+      const pad = (hi - lo) * 0.1 || 1
+      // Half a dot of air at each end, in index units, so the last-point dot is not clipped.
+      const xPad = emphasisColor === null ? 0 : (rows.length - 1) * 0.04 || 0.5
+      return {
+        marks: [
+          lineY(rows, {
+            id: 'line',
+            x: 'i',
+            y: 'v',
+            stroke: color,
+            strokeWidth: LINE_WIDTH,
+            curve: chartCurve('monotone'),
+          }),
+          ...(emphasisColor !== null && last !== undefined && last.v !== null
+            ? [
+                decorative(
+                  dot([last], { id: 'last', x: 'i', y: 'v', r: DOT_R, fill: emphasisColor }),
+                ),
+              ]
+            : []),
+        ],
+        scales: {
+          x: {
+            scale: scaleLinear().domain([-xPad, Math.max(rows.length - 1, 1) + xPad]),
+            axis: false as const,
+          },
+          y: { scale: scaleLinear().domain([lo - pad, hi + pad]), axis: false as const },
+        },
+        theme: CHART_THEME,
+        guides: false,
+        margin: 0,
+      }
+    },
+  }
+}
+
+/** `useId` output (`«r1»`, `:r1:`) is not a safe SVG id fragment. */
+
+export function Sparkline(props: SparklineProps): ReactElement {
+  const {
+    ariaLabel,
+    data,
+    height,
+    width,
+    mark = 'line',
+    color = VX.faint,
+    emphasizeLast = false,
+    emphasisColor = VX.accent,
+    className,
+    style,
+  } = props
+  const id = useId()
+  const definition = useMemo(() => {
+    const rows: Point[] = data.map((v, i) => ({ i, v: finite(v) }))
+    const range = extent(rows)
+    // No finite value means nothing to scale: the empty render, never an Infinity domain.
+    if (range === null) return null
+    return compileSparkline(rows, range, mark, color, emphasizeLast ? emphasisColor : null)
+  }, [data, mark, color, emphasizeLast, emphasisColor])
+  return (
+    <div
+      data-basalt-sparkline=""
+      {...(className !== undefined && { className })}
+      style={{ width: width ?? '100%', height, minWidth: 0, ...style }}
+    >
+      {definition !== null && (
+        <ChartEngine
+          definition={definition}
+          ariaLabel={ariaLabel}
+          height={height}
+          idPrefix={idPrefixOf(id, 'spark')}
+          coarse={false}
+        />
+      )}
+    </div>
+  )
+}