basalt-ui 1.41.0 → 2.0.1

package/src/charts/BandStrip.tsx

@@ -0,0 +1,276 @@
+/**
+ * `BandStrip` — a 1-D state strip: one gap-free band per slot over the shared x axis, no y
+ * dimension (`docs/V2-SPEC.md` § 9.3). Each band is in one of the `states`, tinted by the state's
+ * color (or an intensity `fill` of the datum's own), optionally carrying an inset `marker`.
+ * Absence is a state like any other: color it `VX.neutral` for a flat, unhatched fill.
+ *
+ * The rung supplies the legend, cursor, crosshair and tooltip. The visible bands are decorative
+ * rects on the rung's `[0, 1]` zone scale (a band scale pads its slots, a strip must not), and an
+ * invisible bar per slot on the real x scale carries the pointer, so the cursor keys stay the
+ * slots' own.
+ */
+import { barY } from '@tanstack/charts/bar'
+import { decorative } from '@tanstack/charts/mark/decorative'
+import { rect } from '@tanstack/charts/rect'
+import { useCallback, useMemo } from 'react'
+import type { ReactElement } from 'react'
+import { oneOf } from '../common/errors'
+import { NON_FINITE } from '../format/shared'
+import { VX, alpha } from '../tokens'
+import { CartesianRung } from './CartesianChart'
+import { emphasis } from './marks'
+import { rowX } from './types'
+import type {
+  AxisConfig,
+  CartesianChartProps,
+  ChartMarks,
+  ChartSeries,
+  ChartX,
+  PlotContext,
+  PlotRow,
+} from './types'
+
+/** A state a strip can draw. A band has no number to plot, so `formatValue` reads the datum. */
+export type BandStripSeries<T> = Pick<
+  ChartSeries<T>,
+  'key' | 'label' | 'color' | 'tooltip' | 'legend' | 'note' | 'fillOpacity'
+> & {
+  /**
+   * The tooltip row's value for a band in this state. `null` is an ABSENT reading and renders an
+   * em dash; omit the function when the state's name is the whole reading ("Not measured").
+   */
+  formatValue?: (d: T) => string | null
+}
+
+/** One band: its state, and the two ways to qualify it. */
+export type BandSpan = {
+  /** A `states` key: the band's legend entry, fill and tooltip row. */
+  state: string
+  /** Overrides the state's fill — an intensity ramp WITHIN a state. `alpha(VX.*, …)`, never a hex. */
+  fill?: string
+  /**
+   * A shorter, inset bar over the band, for a fact that must not be read off the fill ramp (a
+   * renegotiation, a restart). Its color is a `states` entry, so the legend names it.
+   */
+  marker?: {
+    /** Defaults to the band's own `state`. */
+    state?: string
+    /** Vertical inset from the band's top and bottom, in px. Default 6. */
+    inset?: number
+  }
+}
+
+/** Collapse adjacent data where one band per datum would be thinner than `minBandPx`. */
+export type BandFold<T> = {
+  /** Floor on a drawn band's px width. Default 3. */
+  minBandPx?: number
+  /**
+   * The consumer's merge of a group of adjacent data into the datum drawn in its place — whether
+   * that is a max, a sum or a recomputed rate is a question about the measurement. Keep the first
+   * datum's `x`, or the cursor key stops naming a real slot.
+   */
+  merge: (group: T[]) => T
+}
+
+export type BandStripProps<T, X extends ChartX = ChartX> = Omit<
+  CartesianChartProps<T, X>,
+  'marks' | 'series' | 'y' | 'y2' | 'zones' | 'xZones' | 'refLines'
+> & {
+  states: readonly BandStripSeries<T>[]
+  /** Which state, fill and marker each datum has. Memoize it: a new function recompiles the chart. */
+  getBand: (d: T) => BandSpan
+  fold?: BandFold<T>
+}
+
+const DEFAULT_MIN_BAND_PX = 3
+const DEFAULT_MARKER_INSET = 6
+
+/** The whole strip is one row: a fixed unit domain, no ticks, no grid. */
+const STRIP_AXIS = {
+  domain: [0, 1],
+  ticks: [],
+  grid: false,
+} as const satisfies AxisConfig<unknown>
+
+/** Forces the rung's hidden `[0, 1]` x scale (`zx`) into existence; draws nothing. */
+const ZX_ANCHOR = [{ fill: 'transparent' }] as const
+
+/** A band whose state is not in `states`: a typo in dev, a neutral tint in production. */
+const UNKNOWN_FILL = alpha(VX.neutral, 0.2)
+
+type Cell = { f0: number; f1: number; y0: number; y1: number }
+/** Cells sharing one paint: a `rect` mark takes a constant fill and opacity. */
+type Layer = { fill: string; opacity: number; cells: Cell[] }
+/** A run of adjacent slots drawn as one band; `items` are the source data it stands for. */
+type Group<T> = { start: number; items: T[] }
+/** A slot that answers the pointer: its own source datum, and the (possibly merged) one it reads. */
+type Hit<T> = { source: T; state: string; datum: T }
+
+/** Adjacent data in groups of equal size, the last possibly shorter, at most `cap` groups. */
+function groupsOf<T>(data: readonly T[], cap: number): Group<T>[] {
+  const size = Math.max(1, Math.ceil(data.length / Math.max(cap, 1)))
+  const out: Group<T>[] = []
+  data.forEach((d, i) => {
+    const last = out.at(-1)
+    if (last && last.items.length < size) last.items.push(d)
+    else out.push({ start: i, items: [d] })
+  })
+  return out
+}
+
+/** Appends a cell to the layer with this paint, creating it in first-use order. */
+function paintInto(layers: Map<string, Layer>, fill: string, opacity: number, cell: Cell): void {
+  const key = `${fill}|${opacity}`
+  const layer = layers.get(key)
+  if (layer) layer.cells.push(cell)
+  else layers.set(key, { fill, opacity, cells: [cell] })
+}
+
+type LayoutInput<T> = {
+  data: readonly T[]
+  getBand: (d: T) => BandSpan
+  fold: BandFold<T> | undefined
+  states: ReadonlyMap<string, BandStripSeries<T>>
+  /** State keys the legend has not toggled off. */
+  visible: ReadonlySet<string>
+  width: number
+  height: number
+  /** Legend-hover dimming for a state key. */
+  emphasis: (key: string) => number
+}
+
+const unknownState = (prop: string, got: string, known: Iterable<string>): Error =>
+  new Error(oneOf('BandStrip', prop, [...known], got))
+
+/**
+ * Where every band and marker goes, and which slots answer the pointer. Pure: base layers and
+ * marker layers come back separately so the caller can paint all markers after all bands (a
+ * marker in another state's color must never sit under a later band).
+ */
+function layoutBands<T>(input: LayoutInput<T>): {
+  base: Layer[]
+  markers: Layer[]
+  hits: Hit<T>[]
+} {
+  const { data, getBand, fold, states, visible } = input
+  const cap = Math.floor(input.width / (fold?.minBandPx ?? DEFAULT_MIN_BAND_PX))
+  const groups: Group<T>[] =
+    fold && data.length > cap
+      ? groupsOf(data, cap)
+      : data.map((d, start) => ({ start, items: [d] }))
+  const base = new Map<string, Layer>()
+  const markers = new Map<string, Layer>()
+  const hits: Hit<T>[] = []
+
+  for (const g of groups) {
+    const datum = fold && g.items.length > 1 ? fold.merge(g.items) : g.items[0]
+    if (datum === undefined) continue
+    const span = getBand(datum)
+    const state = states.get(span.state)
+    if (!state && process.env.NODE_ENV !== 'production')
+      throw unknownState('BandSpan.state', span.state, states.keys())
+    if (state && !visible.has(span.state)) continue
+    const cell = { f0: g.start / data.length, f1: (g.start + g.items.length) / data.length }
+    const opacity = input.emphasis(span.state)
+    paintInto(
+      base,
+      span.fill ?? (state ? alpha(state.color, state.fillOpacity ?? 1) : UNKNOWN_FILL),
+      opacity,
+      { ...cell, y0: 0, y1: 1 },
+    )
+
+    if (span.marker) {
+      const markerKey = span.marker.state ?? span.state
+      const markerState = states.get(markerKey)
+      if (!markerState && process.env.NODE_ENV !== 'production')
+        throw unknownState('BandSpan.marker.state', markerKey, states.keys())
+      if (!markerState || visible.has(markerKey)) {
+        const inset = (span.marker.inset ?? DEFAULT_MARKER_INSET) / Math.max(input.height, 1)
+        paintInto(markers, markerState?.color ?? UNKNOWN_FILL, input.emphasis(markerKey), {
+          ...cell,
+          y0: inset,
+          y1: 1 - inset,
+        })
+      }
+    }
+    // An unknown state (production only) answers no pointer: a tooltip row needs its series.
+    if (state) for (const source of g.items) hits.push({ source, state: span.state, datum })
+  }
+  return { base: [...base.values()], markers: [...markers.values()], hits }
+}
+
+export function BandStrip<T, X extends ChartX = ChartX>(props: BandStripProps<T, X>): ReactElement {
+  const { states, getBand, fold, cursorResolution = 'leading', tooltip, ...rest } = props
+  const { data, x } = rest
+
+  const series = useMemo<ChartSeries<T>[]>(
+    () =>
+      states.map((s) => ({
+        key: s.key,
+        label: s.label,
+        color: s.color,
+        mark: 'bar' as const,
+        ...(s.tooltip !== undefined && { tooltip: s.tooltip }),
+        ...(s.legend !== undefined && { legend: s.legend }),
+        ...(s.note !== undefined && { note: s.note }),
+        getValue: (d) => (getBand(d).state === s.key ? 1 : null),
+        formatValue: (_v, d) => (s.formatValue ? (s.formatValue(d) ?? NON_FINITE) : ''),
+      })),
+    [states, getBand],
+  )
+
+  const marks = useCallback(
+    (plot: PlotContext<T, X>): ChartMarks => {
+      const { base, markers, hits } = layoutBands({
+        data,
+        getBand,
+        fold,
+        states: new Map(states.map((s) => [s.key, s])),
+        visible: new Set(plot.visible.map((s) => s.key)),
+        width: plot.width,
+        height: plot.height,
+        emphasis: (key) => emphasis(plot.highlighted, { key }),
+      })
+      const rows: PlotRow<T, X>[] = hits.map((h) => ({
+        x: x(h.source),
+        y: 1,
+        series: h.state,
+        datum: h.datum,
+      }))
+      return [
+        ...[...base, ...markers].map(({ fill, opacity, cells }, i) =>
+          decorative(
+            rect(cells, {
+              id: `band-${i}`,
+              x1: 'f0',
+              x2: 'f1',
+              y1: 'y0',
+              y2: 'y1',
+              xScale: 'zx',
+              fill,
+              inset: 0,
+              ...(opacity < 1 && { fillOpacity: opacity }),
+            }),
+          ),
+        ),
+        ...(rows.length > 0
+          ? [barY(rows, { id: 'hit', x: rowX, y1: 0, y2: 1, fill: 'transparent' })]
+          : []),
+      ]
+    },
+    [states, getBand, fold, data, x],
+  )
+
+  return (
+    <CartesianRung
+      {...rest}
+      series={series}
+      marks={marks}
+      band
+      y={STRIP_AXIS}
+      xZones={ZX_ANCHOR}
+      cursorResolution={cursorResolution}
+      {...(tooltip !== undefined && { tooltip })}
+    />
+  )
+}

package/src/charts/Bars.tsx

@@ -0,0 +1,141 @@
+/**
+ * `Bars` — bar series on a band x scale (Date, number or string), stacked, grouped or normalized,
+ * with line overlays on `y`/`y2` (`docs/V2-SPEC.md` § 9.3). A negative value draws below zero: a
+ * stack diverges around the baseline (the 1.x `negativeBars`, now just a signed value). Zones,
+ * reference lines, legend, cursor and tooltip are the rung's.
+ */
+import { barY } from '@tanstack/charts/bar'
+import { group } from '@tanstack/charts/group'
+import { stack } from '@tanstack/charts/stack'
+import { useCallback, useMemo } from 'react'
+import type { ReactElement } from 'react'
+import { CartesianRung } from './CartesianChart'
+import { emphasis, lineMark } from './marks'
+import { rowX } from './types'
+import type {
+  CartesianChartProps,
+  ChartMarks,
+  ChartSeries,
+  ChartX,
+  PlotContext,
+  PlotRow,
+} from './types'
+
+/** A bar series. Bars always read the left axis. */
+export type BarsBar<T> = Pick<
+  ChartSeries<T>,
+  'key' | 'label' | 'color' | 'getValue' | 'formatValue' | 'tooltip' | 'legend' | 'role' | 'note'
+> & {
+  /** Default 0.85. */
+  fillOpacity?: number
+}
+
+/** A line overlay; `axis: 'right'` reads the chart's `y2`. */
+export type BarsLine<T> = Pick<
+  ChartSeries<T>,
+  | 'key'
+  | 'label'
+  | 'color'
+  | 'getValue'
+  | 'formatValue'
+  | 'tooltip'
+  | 'legend'
+  | 'role'
+  | 'note'
+  | 'axis'
+  | 'dash'
+  | 'curve'
+  | 'strokeWidth'
+  | 'strokeOpacity'
+>
+
+export type BarsProps<T, X extends ChartX = ChartX> = Omit<
+  CartesianChartProps<T, X>,
+  'marks' | 'series'
+> & {
+  bars: readonly BarsBar<T>[]
+  lines?: readonly BarsLine<T>[]
+  /** Default `'stacked'`. `'normalized'` stacks each x to its share of the total. */
+  layout?: 'stacked' | 'grouped' | 'normalized'
+  /** Per-bar opacity (a partial week, an estimate). Overrides the series' `fillOpacity`. */
+  barOpacity?: (d: T, key: string) => number
+}
+
+const DEFAULT_BAR_OPACITY = 0.85
+
+const paint = (color: string, opacity: number): string =>
+  opacity >= 1 ? color : `color-mix(in srgb, ${color} ${Math.round(opacity * 100)}%, transparent)`
+
+let warnedLogStack = false
+
+/** A stack sums bar heights and a log axis has no additive zero to sum from (V2-SPEC § 9.9): dev
+ * throws, production logs once and draws what it can. Lines-only and grouped charts are fine. */
+function guardLogStack(layout: string, onLog: boolean): void {
+  if (!onLog || layout === 'grouped') return
+  const message = `Bars: ${layout} bars cannot use a log axis; use layout: 'grouped'`
+  if (process.env.NODE_ENV !== 'production') throw new Error(message)
+  // oxlint-disable-next-line no-console -- the production leg of a dev-only throw
+  if (!warnedLogStack) console.error(message)
+  warnedLogStack = true
+}
+
+export function Bars<T, X extends ChartX = ChartX>(props: BarsProps<T, X>): ReactElement {
+  const { bars, lines, layout = 'stacked', barOpacity, ...rest } = props
+  guardLogStack(layout, bars.length > 0 && rest.y?.scale === 'log')
+  const series = useMemo<ChartSeries<T>[]>(
+    () => [
+      ...bars.map((b) => ({ ...b, mark: 'bar' as const })),
+      ...(lines ?? []).map((l) => ({ ...l, mark: 'line' as const })),
+    ],
+    [bars, lines],
+  )
+
+  const marks = useCallback(
+    (plot: PlotContext<T, X>): ChartMarks => {
+      const barKeys = new Set(bars.map((b) => b.key))
+      const visibleBars = plot.visible.filter((s) => barKeys.has(s.key))
+      const byKey = new Map(bars.map((b) => [b.key, b]))
+      const rows = visibleBars.flatMap((s) => plot.rows(s.key))
+      const h = plot.highlighted
+      const fill = (row: PlotRow<T, X>): string => {
+        const bar = byKey.get(row.series)
+        if (!bar) return 'transparent'
+        const base = barOpacity?.(row.datum, row.series) ?? bar.fillOpacity ?? DEFAULT_BAR_OPACITY
+        return paint(bar.color, base * emphasis(h, { key: row.series }))
+      }
+      const order = visibleBars.map((s) => s.key)
+      const out: ChartMarks[number][] = []
+      if (rows.length > 0)
+        out.push(
+          barY(rows, {
+            id: 'bars',
+            x: rowX,
+            y: 'y',
+            z: 'series',
+            fill,
+            layout:
+              layout === 'grouped'
+                ? group({ padding: 0.1 })
+                : stack({ order, ...(layout === 'normalized' && { offset: 'normalize' }) }),
+          }),
+        )
+      for (const s of plot.visible) {
+        if (barKeys.has(s.key)) continue
+        out.push(lineMark(plot, s))
+      }
+      return out
+    },
+    [bars, layout, barOpacity],
+  )
+
+  return (
+    <CartesianRung
+      {...rest}
+      series={series}
+      marks={marks}
+      band
+      reverseRows={layout !== 'grouped'}
+      {...(layout !== 'grouped' && { stack: layout })}
+    />
+  )
+}

package/src/charts/CartesianChart.tsx

@@ -0,0 +1,206 @@
+/**
+ * `CartesianChart` — the one cartesian rung (`docs/V2-SPEC.md` § 9.2): a definition compiler plus
+ * one host. Every cartesian kind is this component with fixed `marks`.
+ *
+ * Three layers, composed here and nowhere else: the width hook (`sizing.ts`), the bare engine mount
+ * in its CSS-owned box (`host.tsx`, `box.tsx`: the height exists before JS runs), and the chrome —
+ * the derived legend (its mode picked in CSS) and the `state` placeholders — around both.
+ */
+import { useCallback, useId, useMemo, useState } from 'react'
+import type { CSSProperties, ReactElement, ReactNode } from 'react'
+import { useInChartCard } from './card-context'
+import { compileCartesian } from './compile'
+import type { CartesianDefinition } from './compile'
+import { ChartEngine, idPrefixOf } from './host'
+import { ChartLegend, legendEntries } from './legend'
+import { INITIAL_WIDTH, useChartSize } from './sizing'
+import { ChartPlaceholder, resolveChartState } from './state'
+import type { CartesianChartProps, ChartSeries, ChartX } from './types'
+
+/** Kind-only compile switches, never on the public props. */
+export type RungOptions = {
+  /** A band x scale (bars). */
+  band?: boolean
+  /** Tooltip rows bottom-up, so a stack reads top-down. */
+  reverseRows?: boolean
+  /** How the bar series combine for the auto domain. */
+  stack?: 'stacked' | 'normalized'
+}
+
+// A size container: the legend picks none/dots/chips from this box's width in CSS, so the server
+// HTML already carries the right one (`chart-legend.module.css`).
+const rootStyle: CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 6,
+  // `width: 100%` because a size container cannot take its width from its content: without it
+  // the root collapses to 0 in a flex row or an auto grid track.
+  width: '100%',
+  minWidth: 0,
+  containerType: 'inline-size',
+}
+// A `placement: 'header'` legend inside a `ChartCard` sits where the header's legend row did: the
+// header's 4px bottom inset plus the row's 6px top padding is 10px, less the body's own 2px top inset.
+const headerLegendStyle: CSSProperties = { marginTop: 8 }
+
+/** `useId` output (`«r1»`, `:r1:`) is not a safe SVG id fragment. */
+
+/** The previous object while every field is `Object.is`-equal: a one-dependency memo key. */
+function useShallowStable<V extends Record<string, unknown>>(next: V): V {
+  const [kept, setKept] = useState(next)
+  // Union of keys: an omitted prop and an explicit `undefined` are different inputs.
+  const same = [...new Set([...Object.keys(kept), ...Object.keys(next)])].every((k) =>
+    Object.is(kept[k], next[k]),
+  )
+  // Render-phase setState: React re-renders at once with `kept` replaced, no effect, no stale frame.
+  if (!same) setKept(next)
+  return same ? kept : next
+}
+
+/** What a chart's definition is compiled from, besides its own props: the chrome's live state. */
+export type ShellContext = {
+  /** Unique per mounted chart (React `useId`). */
+  chartId: string
+  /** Series keys the legend has toggled off. */
+  hidden: ReadonlySet<string>
+  /** The legend entry under the pointer. */
+  highlighted: string | null
+  /** A coarse primary pointer. */
+  coarse: boolean
+  /** The measured width; 0 unless the shell was asked to track it (`byWidth`). */
+  width: number
+}
+
+export type ChartShellProps<T> = Pick<
+  CartesianChartProps<T, ChartX>,
+  'ariaLabel' | 'legend' | 'height' | 'state' | 'className' | 'style'
+> & {
+  /** The legend and tooltip source. */
+  series: readonly ChartSeries<T>[]
+  /** Compiles the definition; memoized on its own identity and the context. Keep it stable. */
+  compile: (ctx: ShellContext) => CartesianDefinition
+  /** Recompile when the measured width changes (default: it is not an input). */
+  byWidth?: boolean
+}
+
+/**
+ * The chrome around every chart: size, the `hidden`/`highlighted` legend state, the derived legend
+ * (and its `ChartCard` header slot), the `state` placeholders and the engine mount. The rung and
+ * the composed kinds differ only in the definition they compile.
+ */
+export function ChartShell<T>(props: ChartShellProps<T>): ReactElement {
+  const { ariaLabel, legend, height, state, className, style, series, compile, byWidth } = props
+  const chartId = useId()
+  const inCard = useInChartCard()
+  const { ref, width: measured, coarse } = useChartSize()
+  const [hidden, setHidden] = useState<ReadonlySet<string>>(() => new Set())
+  const [highlighted, setHighlighted] = useState<string | null>(null)
+
+  // Unmeasured (the server, the first client frame) is the regular class, as the engine's
+  // `initialWidth` is.
+  const width = byWidth ? measured || INITIAL_WIDTH : 0
+  const definition = useMemo(
+    () => compile({ chartId, hidden, highlighted, coarse, width }),
+    [compile, chartId, hidden, highlighted, coarse, width],
+  )
+
+  // ── legend: micro has none, compact shows dots, regular and wide show chips (CSS, § 9.6) ──────
+  const config = legend === false ? null : (legend ?? {})
+  const entryCount = legendEntries(series, false)[0]?.length ?? 0
+  const shown = config !== null && entryCount > 0
+  const toggle = config?.toggle ?? entryCount >= 2
+  const onToggle = useCallback((key: string) => {
+    setHidden((prev) => {
+      const next = new Set(prev)
+      if (!next.delete(key)) next.add(key)
+      return next
+    })
+  }, [])
+  const legendNode: ReactNode = useMemo(
+    () =>
+      shown ? (
+        <ChartLegend
+          series={series}
+          hidden={hidden}
+          mode="auto"
+          groups={config?.groups === true}
+          toggle={toggle}
+          onToggle={onToggle}
+          onHighlight={setHighlighted}
+        />
+      ) : null,
+    [shown, series, hidden, config?.groups, toggle, onToggle],
+  )
+  // `header` is the enclosing card's header row (`top` outside a card); either way the legend is
+  // the first thing in the chart's own markup.
+  const atTop = config?.placement === 'top' || config?.placement === 'header'
+  const asHeaderRow = config?.placement === 'header' && inCard
+
+  const resolved = resolveChartState(state)
+  return (
+    <div
+      ref={ref}
+      data-basalt-chart=""
+      {...(className !== undefined && { className })}
+      style={style ? { ...rootStyle, ...style } : rootStyle}
+    >
+      {atTop && (asHeaderRow ? <div style={headerLegendStyle}>{legendNode}</div> : legendNode)}
+      {resolved === null ? (
+        <ChartEngine
+          definition={definition}
+          ariaLabel={ariaLabel}
+          height={height}
+          idPrefix={idPrefixOf(chartId)}
+          coarse={coarse}
+        />
+      ) : (
+        <ChartPlaceholder state={state} height={height} />
+      )}
+      {!atTop && legendNode}
+    </div>
+  )
+}
+
+export function CartesianRung<T, X extends ChartX>(
+  props: CartesianChartProps<T, X> & RungOptions,
+): ReactElement {
+  const { ariaLabel, legend, height, state, className, style, series, ...spec } = props
+  const stable = useShallowStable({ ...spec, series })
+  const compile = useCallback(
+    (ctx: ShellContext) => compileCartesian({ ...stable, ...ctx }),
+    [stable],
+  )
+  return (
+    <ChartShell
+      series={series}
+      compile={compile}
+      ariaLabel={ariaLabel}
+      {...(legend !== undefined && { legend })}
+      {...(height !== undefined && { height })}
+      {...(state !== undefined && { state })}
+      {...(className !== undefined && { className })}
+      {...(style !== undefined && { style })}
+    />
+  )
+}
+
+/**
+ * The cartesian rung with consumer marks. Required `ariaLabel`; `marks(plot)` returns TanStack
+ * marks imported from the allowed `@tanstack/charts/*` subpaths, drawn from `plot.rows(key)`.
+ *
+ * ```tsx
+ * import { lineY } from '@tanstack/charts/line'
+ * <CartesianChart
+ *   ariaLabel="Load"
+ *   data={rows}
+ *   x={(d) => d.at}
+ *   series={[{ key: 'load', label: 'Load', color: VX.line, getValue: (d) => d.load }]}
+ *   marks={(plot) => [lineY(plot.rows('load'), { x: 'x', y: 'y', stroke: VX.line })]}
+ * />
+ * ```
+ */
+export function CartesianChart<T, X extends ChartX>(
+  props: CartesianChartProps<T, X>,
+): ReactElement {
+  return <CartesianRung {...props} />
+}