basalt-ui 1.27.0 → 1.29.0

package/src/charts/kinds/MirroredBars.test.tsx

@@ -1,232 +0,0 @@
-/**
- * `MirroredBars` — the properties `DualPanel` provably cannot supply: two BAR panes (no line pane),
- * two INDEPENDENT domains resolved from two accessors (not one signed one), and absence hatched
- * across the full band rather than sitting on one side of a baseline.
- *
- * Under this DOM harness there is no ResizeObserver, so `ChartFrame` falls back to its `minWidth`
- * floor — `plot.width` is a fixed 200.
- */
-import { fireEvent, render, screen } from '@testing-library/react'
-import { describe, expect, test } from 'bun:test'
-import { ChartCursorScope } from '../cursor/scope'
-import type { ChartSeries } from '../series'
-import { MirroredBars } from './MirroredBars'
-
-type Point = { key: string; down: number | null; up: number | null; absent: number }
-
-const SERIES: ChartSeries<Point>[] = [
-  { key: 'down', label: 'Download', color: '#06c', mark: 'bar', getValue: (d) => d.down },
-  { key: 'up', label: 'Upload', color: '#999', mark: 'bar', getValue: (d) => d.up },
-  { key: 'absent', label: 'Not measured', color: '#555', mark: 'bar', getValue: () => null },
-]
-
-const DATA: Point[] = [
-  { key: '2026-08-01', down: 800, up: 40, absent: 0 },
-  { key: '2026-08-02', down: 400, up: 20, absent: 0 },
-  { key: '2026-08-03', down: null, up: null, absent: 1 },
-]
-
-function renderChart(props: Partial<Parameters<typeof MirroredBars<Point>>[0]> = {}) {
-  return render(
-    <ChartCursorScope>
-      <MirroredBars<Point>
-        data={DATA}
-        chartId="mb"
-        getX={(d) => d.key}
-        series={SERIES}
-        up={{ key: 'up', format: (v) => `${v}u`, ticks: 2 }}
-        down={{ key: 'down', format: (v) => `${v}d`, ticks: 2 }}
-        getAbsentFraction={(d) => d.absent}
-        height={200}
-        {...props}
-      />
-    </ChartCursorScope>,
-  )
-}
-
-/** Tick label text of one left axis, in paint order (up pane first, down pane second). */
-function axisText(container: HTMLElement, index: number): string {
-  return container.querySelectorAll('.visx-axis-left')[index]?.textContent ?? ''
-}
-
-describe('MirroredBars — two panes, two independent domains', () => {
-  test('each pane paints its OWN axis in its OWN units — a shared scale could print only one', () => {
-    const { container } = renderChart({
-      up: { key: 'up', format: (v) => `${v}u`, max: 100, ticks: 2 },
-      down: { key: 'down', format: (v) => `${v}d`, max: 1000, ticks: 2 },
-    })
-    expect(container.querySelectorAll('.visx-axis-left')).toHaveLength(2)
-    // Two axes, two domains, two unit suffixes — neither axis carries the other's numbers.
-    expect(axisText(container, 0)).toContain('100u')
-    expect(axisText(container, 0)).not.toContain('d')
-    expect(axisText(container, 1)).toContain('1000d')
-    expect(axisText(container, 1)).not.toContain('u')
-  })
-
-  test('an auto pane resolves from its OWN accessor: 40 up beside 800 down', () => {
-    const { container } = renderChart()
-    // `40` can only come from the up accessor's own maximum; on a shared [0, 800] scale d3 would
-    // never place a tick there.
-    expect(axisText(container, 0)).toContain('40u')
-    expect(axisText(container, 1)).not.toContain('40d')
-  })
-
-  test('a pinned `max` on one pane leaves the other pane’s auto domain alone', () => {
-    const { container } = renderChart({ up: { key: 'up', format: (v) => `${v}u`, max: 200 } })
-    expect(axisText(container, 0)).toContain('200u')
-    // Down stayed auto — its ticks still span its own 800 maximum, not the pinned 200.
-    expect(axisText(container, 1)).toContain('500d')
-    expect(axisText(container, 1)).not.toContain('200d')
-  })
-
-  test('`autoMaxFloor` widens a quiet pane without touching its sibling', () => {
-    const withoutFloor = renderChart()
-    expect(axisText(withoutFloor.container, 0)).toContain('40u')
-    withoutFloor.unmount()
-
-    const { container } = renderChart({
-      up: { key: 'up', format: (v) => `${v}u`, autoMaxFloor: 500, ticks: 2 },
-    })
-    // The floor lifted the up domain well past its 40 maximum...
-    expect(axisText(container, 0)).toContain('400u')
-    expect(axisText(container, 0)).not.toContain('40u')
-    // ...and the down pane is unmoved.
-    expect(axisText(container, 1)).toContain('500d')
-  })
-})
-
-describe('MirroredBars — geometry around the shared baseline', () => {
-  test('up bars grow upward from the baseline, down bars downward, and both are proportional', () => {
-    const { container } = renderChart()
-    const rects = [...container.querySelectorAll('rect')].filter(
-      (r) => r.getAttribute('fill')?.startsWith('color-mix') === true,
-    )
-    // Two measured points × two panes.
-    expect(rects).toHaveLength(4)
-    const [up1, down1, up2, down2] = rects.map((r) => ({
-      y: Number(r.getAttribute('y')),
-      h: Number(r.getAttribute('height')),
-    }))
-    // Both panes share ONE baseline: the up bar's bottom edge equals the down bar's top edge.
-    expect(up1!.y + up1!.h).toBeCloseTo(down1!.y, 5)
-    expect(up2!.y + up2!.h).toBeCloseTo(down2!.y, 5)
-    // Half the value, half the height — within each pane's own scale.
-    expect(down2!.h / down1!.h).toBeCloseTo(0.5, 5)
-    expect(up2!.h / up1!.h).toBeCloseTo(0.5, 5)
-    // ...and the two panes are NOT on one scale: 40 up and 800 down draw comparable heights.
-    expect(up1!.h).toBeGreaterThan(down1!.h * 0.2)
-  })
-
-  test('an unmeasured point hatches the FULL band, not one side of the baseline', () => {
-    const { container } = renderChart()
-    const hatched = [...container.querySelectorAll('rect')].filter(
-      (r) => r.getAttribute('fill') === 'url(#mb-mirrored-absent)',
-    )
-    expect(hatched).toHaveLength(1)
-    expect(Number(hatched[0]?.getAttribute('y'))).toBe(0)
-    const baselineLine = container.querySelector('line[stroke-width="1"]')
-    const baselineY = Number(baselineLine?.getAttribute('y1'))
-    expect(Number(hatched[0]?.getAttribute('height'))).toBeGreaterThan(baselineY)
-  })
-
-  test('a NaN value draws no bar at all rather than NaN geometry', () => {
-    // `deriveTooltipRows` skips only null, so a NaN reaching `scaleLinear` used to emit
-    // `y="NaN" height="NaN"` — a bar that silently fails to paint behind a React warning.
-    const { container } = renderChart({
-      data: [{ key: '2026-08-01', down: Number.NaN, up: Number.NaN, absent: 0 }],
-    })
-    expect(container.innerHTML).not.toContain('NaN')
-    const painted = [...container.querySelectorAll('rect')].filter(
-      (r) => r.getAttribute('fill')?.startsWith('color-mix') === true,
-    )
-    expect(painted).toHaveLength(0)
-  })
-
-  test('`getBarOpacity` dims a qualified measurement without changing its geometry', () => {
-    const { container } = renderChart({ getBarOpacity: (d) => (d.key === '2026-08-02' ? 0.45 : 1) })
-    const fills = [...container.querySelectorAll('rect')]
-      .map((r) => r.getAttribute('fill'))
-      .filter((f): f is string => f?.startsWith('color-mix') === true)
-    expect(fills).toContain('color-mix(in srgb, #06c 45%, transparent)')
-    expect(fills).toContain('color-mix(in srgb, #06c 100%, transparent)')
-  })
-})
-
-describe('MirroredBars — legend toggle removes a pane whole', () => {
-  test('hiding a pane drops its bars AND its axis together', () => {
-    const { container } = renderChart()
-    expect(container.querySelectorAll('.visx-axis-left')).toHaveLength(2)
-
-    const toggle = container.querySelector('[data-legend-key="up"]')
-    fireEvent.click(toggle as Element)
-
-    expect(container.querySelectorAll('.visx-axis-left')).toHaveLength(1)
-    expect(container.textContent).not.toContain('40u')
-    expect(axisText(container, 0)).toContain('500d')
-  })
-})
-
-describe('MirroredBars — tooltip rows are derived, each in its own pane’s units', () => {
-  test('a pane row falls back to that pane’s formatter, never the other pane’s', async () => {
-    renderChart({ ariaLabel: 'Carried' })
-    const slider = screen.getByRole('slider')
-    fireEvent.keyDown(slider, { key: 'ArrowRight' })
-
-    const tip = await screen.findByRole('tooltip')
-    expect(tip.textContent).toContain('800d')
-    expect(tip.textContent).toContain('40u')
-    // The legend-only absence entry has no value, so it never becomes a row.
-    expect(tip.textContent).not.toContain('Not measured')
-  })
-
-  test('an unmeasured point yields no pane rows at all rather than a fabricated zero', async () => {
-    renderChart({ ariaLabel: 'Carried' })
-    const slider = screen.getByRole('slider')
-    fireEvent.keyDown(slider, { key: 'ArrowRight' })
-    fireEvent.keyDown(slider, { key: 'ArrowRight' })
-    fireEvent.keyDown(slider, { key: 'ArrowRight' })
-
-    const tip = await screen.findByRole('tooltip')
-    expect(tip.textContent).not.toContain('Download')
-    expect(tip.textContent).not.toContain('Upload')
-  })
-})
-
-/**
- * The `BandStrip` silent-drop class, in this kind's shape. An unresolvable pane key left the pane
- * AND its axis unrendered — which on a chart whose point is that idle and unmeasured must stay
- * distinguishable reads as "that half measured nothing".
- */
-describe('MirroredBars — an unresolvable key can never read as a measured zero', () => {
-  test('a pane key naming no `series` entry throws instead of hiding the pane', () => {
-    expect(() => renderChart({ up: { key: 'uplaod', format: (v) => `${v}u`, ticks: 2 } })).toThrow(
-      /up.key "uplaod" names no `series` entry \(known: down, up, absent\)/,
-    )
-  })
-
-  test('it throws in production too — a pane key is a PROP, so a typo is always a wiring error', () => {
-    const previous = process.env['NODE_ENV']
-    process.env['NODE_ENV'] = 'production'
-    try {
-      expect(() =>
-        renderChart({ down: { key: 'donw', format: (v) => `${v}d`, ticks: 2 } }),
-      ).toThrow(/down.key "donw"/)
-    } finally {
-      if (previous === undefined) delete process.env['NODE_ENV']
-      else process.env['NODE_ENV'] = previous
-    }
-  })
-
-  test('`absentState` naming no `series` entry throws rather than hatching in an unnamed neutral', () => {
-    expect(() => renderChart({ absentState: 'ghost' })).toThrow(
-      /absentState "ghost" names no `series` entry/,
-    )
-  })
-
-  test('a resolvable absentState still draws the hatch in that entry’s colour', () => {
-    const { container } = renderChart({ absentState: 'absent' })
-    expect(container.querySelector('pattern line')?.getAttribute('stroke')).toBe(
-      'color-mix(in srgb, #555 70%, transparent)',
-    )
-  })
-})

package/src/charts/kinds/MultiLine.test.tsx

@@ -1,218 +0,0 @@
-/**
- * `MultiLine` — the `strokeOpacity` wiring: `dimOpacity(s) * (s.strokeOpacity ?? 1)`. SSR harness
- * (no hover needed), same pattern as `CartesianChart.test.tsx`'s `nice` assertions.
- */
-import { fireEvent, render, screen } from '@testing-library/react'
-import { describe, expect, test } from 'bun:test'
-import { renderToStaticMarkup } from 'react-dom/server'
-import { ChartCursorScope } from '../cursor/scope'
-import { CartesianChart } from '../primitives/CartesianChart'
-import { MultiLine } from './MultiLine'
-import type { ChartSeries } from '../series'
-
-type Row = { date: string; v: number }
-
-const rows: Row[] = [
-  { date: '2026-08-01', v: 10 },
-  { date: '2026-08-02', v: 12 },
-]
-
-describe('MultiLine — series.strokeOpacity dims the plotted stroke', () => {
-  test('the line path carries the configured stroke-opacity attribute', () => {
-    const series: ChartSeries<Row>[] = [
-      {
-        key: 'v',
-        label: 'V',
-        color: '#123456',
-        mark: 'line',
-        getValue: (d) => d.v,
-        strokeOpacity: 0.35,
-      },
-    ]
-
-    const html = renderToStaticMarkup(
-      <MultiLine<Row> data={rows} chartId="ml-opacity" getX={(d) => d.date} series={series} />,
-    )
-
-    expect(html).toContain('stroke="#123456"')
-    expect(html).toContain('stroke-opacity="0.35"')
-  })
-})
-
-describe('MultiLine — formatX', () => {
-  test('a custom formatX renders on the bottom axis instead of the default DD.MM', () => {
-    const series: ChartSeries<Row>[] = [
-      { key: 'v', label: 'V', color: '#111', mark: 'line', getValue: (d) => d.v },
-    ]
-    const html = renderToStaticMarkup(
-      <MultiLine<Row>
-        data={rows}
-        chartId="ml-formatx"
-        getX={(d) => d.date}
-        series={series}
-        formatX={(key) => `X:${key}`}
-      />,
-    )
-    expect(html).toContain('X:2026-08-01')
-    expect(html).not.toContain('>01.08<')
-  })
-})
-
-describe('MultiLine — getMarker fillOpacity/ring', () => {
-  test('ring: false omits the stroke; fillOpacity defaults 1 and honors an override', () => {
-    const series: ChartSeries<Row>[] = [
-      {
-        key: 'v',
-        label: 'V',
-        color: '#111',
-        mark: 'line',
-        getValue: (d) => d.v,
-        getMarker: (d) => (d.date === '2026-08-01' ? { ring: false, fillOpacity: 0.7 } : null),
-      },
-    ]
-    const html = renderToStaticMarkup(
-      <MultiLine<Row> data={rows} chartId="ml-marker-ring" getX={(d) => d.date} series={series} />,
-    )
-    expect(html).toContain('fill-opacity="0.7"')
-    expect(html).not.toContain('stroke-width="2"')
-  })
-
-  test('default marker keeps the punched-out ring and full opacity (unchanged rendering)', () => {
-    const series: ChartSeries<Row>[] = [
-      {
-        key: 'v',
-        label: 'V',
-        color: '#111',
-        mark: 'line',
-        getValue: (d) => d.v,
-        getMarker: (d) => (d.date === '2026-08-01' ? {} : null),
-      },
-    ]
-    const html = renderToStaticMarkup(
-      <MultiLine<Row>
-        data={rows}
-        chartId="ml-marker-default"
-        getX={(d) => d.date}
-        series={series}
-      />,
-    )
-    expect(html).toContain('stroke-width="2"')
-    expect(html).toContain('fill-opacity="1"')
-  })
-})
-
-describe('MultiLine — markerShape="star" honours getMarker ring/fillOpacity', () => {
-  test('ring: false omits the stroke; fillOpacity defaults 1 and honors an override', () => {
-    const series: ChartSeries<Row>[] = [
-      {
-        key: 'v',
-        label: 'V',
-        color: '#111',
-        mark: 'line',
-        getValue: (d) => d.v,
-        getMarker: (d) => (d.date === '2026-08-01' ? { ring: false, fillOpacity: 0.7 } : null),
-      },
-    ]
-    const html = renderToStaticMarkup(
-      <MultiLine<Row>
-        data={rows}
-        chartId="ml-star-ring"
-        getX={(d) => d.date}
-        series={series}
-        markerShape="star"
-      />,
-    )
-    expect(html).toContain('fill-opacity="0.7"')
-    expect(html).not.toContain('stroke-width="1.5"')
-  })
-
-  test('default marker keeps the punched-out ring and full opacity (unchanged rendering)', () => {
-    const series: ChartSeries<Row>[] = [
-      {
-        key: 'v',
-        label: 'V',
-        color: '#111',
-        mark: 'line',
-        getValue: (d) => d.v,
-        getMarker: (d) => (d.date === '2026-08-01' ? {} : null),
-      },
-    ]
-    const html = renderToStaticMarkup(
-      <MultiLine<Row>
-        data={rows}
-        chartId="ml-star-default"
-        getX={(d) => d.date}
-        series={series}
-        markerShape="star"
-      />,
-    )
-    expect(html).toContain('stroke-width="1.5"')
-    expect(html).toContain('fill-opacity="1"')
-  })
-})
-
-describe('MultiLine — cursorResolution threads through to sibling resolution', () => {
-  // Daily calendar Aug 01–14 (a plain CartesianChart driver) alongside a MultiLine sibling folded
-  // into 2 weekly buckets keyed by each week's leading day (Aug 01, Aug 08) — parity with
-  // `Bars.test.tsx`'s equivalent block. Proves the prop reaches THIS kind, not just
-  // `CartesianChart` (a kind dropping the forward would silently fall back to 'nearest').
-  const dailyRows: Row[] = Array.from({ length: 14 }, (_, i) => ({
-    date: `2026-08-${String(i + 1).padStart(2, '0')}`,
-    v: i,
-  }))
-  const foldedRows: Row[] = [
-    { date: '2026-08-01', v: 0 },
-    { date: '2026-08-08', v: 1 },
-  ]
-  const dailySeries: ChartSeries<Row>[] = [
-    { key: 'v', label: 'V', color: '#111', mark: 'line', getValue: (d) => d.v },
-  ]
-  const foldedSeries: ChartSeries<Row>[] = [
-    { key: 'v', label: 'V', color: '#111', mark: 'line', getValue: (d) => d.v },
-  ]
-
-  function renderPair(cursorResolution?: 'leading') {
-    render(
-      <ChartCursorScope>
-        <CartesianChart<Row>
-          data={dailyRows}
-          chartId="ml-daily"
-          getX={(d) => d.date}
-          series={dailySeries}
-          ariaLabel="Daily"
-        >
-          {() => null}
-        </CartesianChart>
-        <MultiLine<Row>
-          data={foldedRows}
-          chartId="ml-folded"
-          getX={(d) => d.date}
-          series={foldedSeries}
-          ariaLabel="Folded"
-          {...(cursorResolution !== undefined && { cursorResolution })}
-        />
-      </ChartCursorScope>,
-    )
-  }
-
-  // Drives the daily chart to Aug 05 — the back half of the Aug 01–07 bucket (midpoint Aug 04) —
-  // via 5 keyboard ArrowRights from an unfocused slider (1st press lands on index 0).
-  function driveDailyToAug05() {
-    const dailySlider = screen.getByRole('slider', { name: 'Daily' })
-    for (let i = 0; i < 5; i++) fireEvent.keyDown(dailySlider, { key: 'ArrowRight' })
-  }
-
-  test("cursorResolution='leading' resolves the back-half day to the bucket it's INSIDE, not the following one", () => {
-    renderPair('leading')
-    driveDailyToAug05()
-    const foldedSlider = screen.getByRole('slider', { name: 'Folded' })
-    expect(foldedSlider.getAttribute('aria-valuetext')).toBe('01.08')
-  })
-
-  test("without the prop (default 'nearest'), the same daily hover lands on the FOLLOWING bucket instead", () => {
-    renderPair()
-    driveDailyToAug05()
-    const foldedSlider = screen.getByRole('slider', { name: 'Folded' })
-    expect(foldedSlider.getAttribute('aria-valuetext')).toBe('08.08')
-  })
-})

package/src/charts/kinds/StackedArea.test.tsx

@@ -1,114 +0,0 @@
-/**
- * `StackedArea` — the `formatX` seam forwarded to `CartesianChart` (parity with the other
- * `CartesianChart`-composing kinds). SSR harness, no hover needed.
- */
-import { fireEvent, render, screen } from '@testing-library/react'
-import { describe, expect, test } from 'bun:test'
-import { renderToStaticMarkup } from 'react-dom/server'
-import { ChartCursorScope } from '../cursor/scope'
-import { CartesianChart } from '../primitives/CartesianChart'
-import { StackedArea } from './StackedArea'
-import type { ChartSeries } from '../series'
-
-type Row = { date: string; a: number; b: number }
-
-const rows: Row[] = [
-  { date: '2026-08-01', a: 10, b: 4 },
-  { date: '2026-08-02', a: 12, b: 6 },
-]
-
-const series: ChartSeries<Row>[] = [
-  { key: 'a', label: 'A', color: '#111', mark: 'area', getValue: (d) => d.a },
-  { key: 'b', label: 'B', color: '#222', mark: 'area', getValue: (d) => d.b },
-]
-
-describe('StackedArea — formatX', () => {
-  test('a custom formatX renders on the bottom axis instead of the default DD.MM', () => {
-    const html = renderToStaticMarkup(
-      <StackedArea<Row>
-        data={rows}
-        chartId="sa-formatx"
-        getX={(d) => d.date}
-        series={series}
-        formatX={(key) => `X:${key}`}
-      />,
-    )
-    expect(html).toContain('X:2026-08-01')
-    expect(html).not.toContain('>01.08<')
-  })
-
-  test('omitting formatX keeps the default DD.MM rendering', () => {
-    const html = renderToStaticMarkup(
-      <StackedArea<Row> data={rows} chartId="sa-default" getX={(d) => d.date} series={series} />,
-    )
-    expect(html).toContain('>01.08<')
-  })
-})
-
-describe('StackedArea — cursorResolution threads through to sibling resolution', () => {
-  // Daily calendar Aug 01–14 (a plain CartesianChart driver) alongside a StackedArea sibling
-  // folded into 2 weekly buckets keyed by each week's leading day (Aug 01, Aug 08) — parity with
-  // `Bars.test.tsx`'s equivalent block. Proves the prop reaches THIS kind, not just
-  // `CartesianChart` (a kind dropping the forward would silently fall back to 'nearest').
-  type DailyRow = { date: string; v: number }
-
-  const dailyRows: DailyRow[] = Array.from({ length: 14 }, (_, i) => ({
-    date: `2026-08-${String(i + 1).padStart(2, '0')}`,
-    v: i,
-  }))
-  const foldedRows: Row[] = [
-    { date: '2026-08-01', a: 0, b: 0 },
-    { date: '2026-08-08', a: 1, b: 1 },
-  ]
-  const dailySeries: ChartSeries<DailyRow>[] = [
-    { key: 'v', label: 'V', color: '#111', mark: 'line', getValue: (d) => d.v },
-  ]
-  const foldedSeries: ChartSeries<Row>[] = [
-    { key: 'a', label: 'A', color: '#111', mark: 'area', getValue: (d) => d.a },
-  ]
-
-  function renderPair(cursorResolution?: 'leading') {
-    render(
-      <ChartCursorScope>
-        <CartesianChart<DailyRow>
-          data={dailyRows}
-          chartId="sa-daily"
-          getX={(d) => d.date}
-          series={dailySeries}
-          ariaLabel="Daily"
-        >
-          {() => null}
-        </CartesianChart>
-        <StackedArea<Row>
-          data={foldedRows}
-          chartId="sa-folded"
-          getX={(d) => d.date}
-          series={foldedSeries}
-          ariaLabel="Folded"
-          {...(cursorResolution !== undefined && { cursorResolution })}
-        />
-      </ChartCursorScope>,
-    )
-  }
-
-  // Drives the daily chart to Aug 05 — the back half of the Aug 01–07 bucket (midpoint Aug 04) —
-  // via 5 keyboard ArrowRights from an unfocused slider (1st press lands on index 0).
-  function driveDailyToAug05() {
-    const dailySlider = screen.getByRole('slider', { name: 'Daily' })
-    for (let i = 0; i < 5; i++) fireEvent.keyDown(dailySlider, { key: 'ArrowRight' })
-  }
-
-  test("cursorResolution='leading' resolves the back-half day to the bucket it's INSIDE, not the following one", () => {
-    renderPair('leading')
-    driveDailyToAug05()
-    const foldedSlider = screen.getByRole('slider', { name: 'Folded' })
-    expect(foldedSlider.getAttribute('aria-valuetext')).toBe('01.08')
-  })
-
-  test("without the prop (default 'nearest'), the same daily hover lands on the FOLLOWING bucket instead", () => {
-    renderPair()
-    driveDailyToAug05()
-    const foldedSlider = screen.getByRole('slider', { name: 'Folded' })
-    expect(foldedSlider.getAttribute('aria-valuetext')).toBe('08.08')
-  })
-})