basalt-ui 1.22.0 → 1.23.0

package/src/charts/kinds/BandStrip.tsx

@@ -0,0 +1,364 @@
+import { Group } from '@visx/group'
+import { memo, useMemo } from 'react'
+import type { ReactNode } from 'react'
+import { VX, alpha } from '../../tokens'
+import type { ChartMargin } from '../../tokens'
+import type { CursorResolution } from '../cursor/resolve'
+import { useBandPlot } from '../hooks/useBandPlot'
+import type { BandFold, BandTooltipConfig } from '../hooks/useBandPlot'
+import { AxisBottomDate } from '../primitives/Axes'
+import { ChartFrame, resolveLegend } from '../primitives/ChartFrame'
+import {
+  ChartTooltipFloat,
+  TooltipBody,
+  TooltipHeader,
+  TooltipRow,
+} from '../primitives/ChartTooltip'
+import { Crosshair } from '../primitives/Crosshair'
+import { HatchPattern, hatchFill, hatchSizeFor } from '../primitives/HatchPattern'
+import { HoverOverlay } from '../primitives/HoverOverlay'
+import type { ChartLegendConfig, SeriesStyle } from '../series'
+import { fmtAxisDate } from '../utils/format'
+
+/**
+ * A state a strip can draw. Extends `SeriesStyle` rather than `ChartSeries` because a band has no
+ * numeric value to plot — `formatValue` reads the datum directly.
+ */
+export type BandStripSeries<T> = SeriesStyle & {
+  /** The derived tooltip row's value for a band in this state. Omit for a state whose NAME is the
+   * whole reading ("Not measured"), which then renders as a label with an empty value. */
+  formatValue?: (d: T) => string
+}
+
+/** One drawn band — which state it is in, and the three ways a state can be qualified. */
+export type BandSpan = {
+  /**
+   * Series key naming this band's state: the tie to its legend entry, its fill, and its derived
+   * tooltip row. A key not present in `series` draws nothing — the loud failure is deliberate,
+   * since the alternative is a mark no legend entry accounts for.
+   */
+  state: string
+  /**
+   * Overrides the fill derived from the state's series entry — the seam for an intensity ramp
+   * WITHIN one state (5% loss vs 0.5% loss are the same state at different strengths). Build it
+   * with `alpha(VX.*, …)`, never a raw hex.
+   */
+  fill?: string
+  /**
+   * 0..1 of this band's width that no source sample covers, drawn hatched from the band's right.
+   *
+   * This is what a fold owes the reader. A 1-of-3-measured slot whose merge reports the one
+   * measured member's reading paints, without this, as a fully-measured band — a reading asserted
+   * over two slots that reported nothing either way.
+   */
+  absentFraction?: number
+  /**
+   * A shorter, inset bar drawn over the band — for a fact that must NOT be readable off the fill
+   * ramp (a renegotiation, a restart, a config change). Its colour comes from a `series` entry, so
+   * it cannot be drawn in a hue the legend does not name.
+   */
+  marker?: {
+    /** Series key naming the marker's colour. Defaults to the band's own `state`. */
+    state?: string
+    /** Vertical inset from the band's top and bottom, in px. Default 6. */
+    inset?: number
+  }
+}
+
+export type BandStripProps<T> = {
+  data: readonly T[]
+  /** Stable id — identifies this chart as the cursor's source. */
+  chartId: string
+  /** Extracts the x-domain key. On a band strip this is a SLOT START, so `cursorResolution`
+   * defaults to `'leading'` (see below) rather than `CartesianChart`'s `'nearest'`. */
+  getX: (d: T) => string
+  /** The states this strip can draw — the single source of truth for legend entries, band fills,
+   * and the derived tooltip row. */
+  series: readonly BandStripSeries<T>[]
+  /** Which state each datum is in. */
+  getBand: (d: T) => BandSpan
+  /** Fixed height in px, forwarded to `ChartFrame`. The band row gets whatever the measured
+   * margins and the measured legend band leave. Default 240. */
+  height?: number
+  /** Fill the parent flex/grid cell's measured height instead of a fixed one. */
+  fill?: boolean
+  /** X tick label formatter. Default `fmtAxisDate` (DD.MM). */
+  formatX?: (key: string) => string
+  /** Which keys get a tick. Default `smartTicks`. */
+  xTickValues?: (keys: readonly string[], plotWidth: number) => readonly string[]
+  /** Collapse adjacent data at widths where one band per datum sub-pixels. */
+  fold?: BandFold<T>
+  /**
+   * How a sibling's broadcast cursor key resolves against this strip's slots. Default
+   * `'leading'` — strict containment, "the slot that swallowed this key" — because a band IS a
+   * span keyed by its leading edge, and it stays correct at every fold width. `'nearest'` puts
+   * the crosshair one slot right for every source key in the back half of a slot.
+   */
+  cursorResolution?: CursorResolution
+  tooltip?: BandTooltipConfig<T> | false
+  legend?: ChartLegendConfig | false
+  /** Colour of the absence hatch. Names a `series` entry, so absence is legended like any other
+   * state — a hatched band is the one mark a reader cannot decode from an axis. Default
+   * `VX.neutral`, unnamed. */
+  absentState?: string
+  /** Per-side overrides of the measured margins — applied last. */
+  margin?: Partial<ChartMargin>
+  /** Accessible text alternative, forwarded to `ChartFrame` (+ `role="group"`) and to the
+   * focusable hover overlay's slider label. */
+  ariaLabel?: string
+  /** Forwarded to `ChartFrame` — see `ChartPending`'s JSDoc. */
+  isPending?: boolean
+}
+
+const DEFAULT_MARKER_INSET = 6
+
+/**
+ * A 1-D categorical band strip: one rect per slot over a shared x axis, no y dimension at all.
+ *
+ * `CartesianChart` cannot host this. It renders `AxisLeftNumeric` unconditionally, so composing it
+ * would draw a numeric axis over a chart that measures nothing vertically — and its `scalePoint` x
+ * scale has positions but no widths, which is the whole content of a strip. This is the
+ * non-single-plot escape `docs/CHARTS-SPEC.md` § "The contract" describes, assembled from the same
+ * parts every other chart gets (`ChartFrame`, `autoMargin`, `useChartCursor`, `ChartTooltipFloat`)
+ * via `useBandPlot`, never re-implemented.
+ *
+ * The three qualifications on {@link BandSpan} — `fill`, `absentFraction`, `marker` — are the ones
+ * a state strip cannot do without: an intensity ramp inside a state, the share of a folded slot
+ * nothing measured, and a fact that must not be read off the ramp.
+ */
+function BandStripInner<T>(props: BandStripProps<T>) {
+  const { series, chartId, height, fill, legend, ariaLabel, isPending } = props
+
+  return (
+    <ChartFrame
+      series={series}
+      chartId={chartId}
+      {...(height !== undefined && { height })}
+      {...(fill !== undefined && { fill })}
+      {...(ariaLabel !== undefined && { ariaLabel })}
+      {...(isPending !== undefined && { isPending })}
+      legend={resolveLegend(legend)}
+    >
+      {(plot) => <BandStripPlot {...props} plot={plot} />}
+    </ChartFrame>
+  )
+}
+
+type BandStripPlotProps<T> = BandStripProps<T> & {
+  plot: { width: number; height: number; hidden: ReadonlySet<string> }
+}
+
+/** The measured plot — split from {@link BandStripInner} so its scale/cursor hooks only run once
+ * `ChartFrame` has resolved a non-empty plot rect (parity with `DualPanel`). */
+function BandStripPlot<T>(props: BandStripPlotProps<T>) {
+  const {
+    data,
+    chartId,
+    getX,
+    series,
+    getBand,
+    formatX = fmtAxisDate,
+    xTickValues,
+    fold,
+    cursorResolution = 'leading',
+    tooltip,
+    absentState,
+    margin: marginOverride,
+    ariaLabel,
+    plot,
+  } = props
+
+  const { hidden } = plot
+  const styleByKey = useMemo(() => new Map(series.map((s) => [s.key, s])), [series])
+
+  const band = useBandPlot<T>({
+    data,
+    chartId,
+    getX,
+    formatX,
+    width: plot.width,
+    cursorResolution,
+    ...(fold !== undefined && { fold }),
+    ...(xTickValues !== undefined && { xTickValues }),
+    ...(marginOverride !== undefined && { margin: marginOverride }),
+    ...(tooltip !== undefined && { tooltip }),
+  })
+
+  const { bands, margin, plotWidth, scale, cursor, point, crosshairX, step, bandWidth } = band
+  const stripHeight = Math.max(plot.height - margin.top - margin.bottom, 1)
+  const hatchId = `${chartId}-band-absent`
+  const absentColor =
+    (absentState === undefined ? undefined : styleByKey.get(absentState)?.color) ?? VX.neutral
+
+  const rects = useMemo<ReactNode[]>(() => {
+    const out: ReactNode[] = []
+    bands.forEach((d, i) => {
+      const span = getBand(d)
+      const style = styleByKey.get(span.state)
+      if (style === undefined || hidden.has(span.state)) return
+      // Clamped AND finite-checked. `foldedFrom` is carried by the consumer's datum, so a
+      // 0/0 on an un-folded slot arrives here as NaN — which `Math.min`/`Math.max` propagate
+      // straight into `width="NaN"`, a band that silently fails to paint.
+      const absent = clampFraction(span.absentFraction)
+      const measuredWidth = bandWidth * (1 - absent)
+      const hatchWidth = bandWidth - measuredWidth
+      const x = i * step
+      const markerKey = span.marker?.state ?? span.state
+      const markerColor = styleByKey.get(markerKey)?.color
+      const inset = span.marker?.inset ?? DEFAULT_MARKER_INSET
+      out.push(
+        <g key={getX(d)}>
+          {measuredWidth > 0 && (
+            <rect
+              x={x}
+              y={0}
+              width={measuredWidth}
+              height={stripHeight}
+              rx={1}
+              fill={span.fill ?? alpha(style.color, style.fillOpacity ?? 1)}
+              pointerEvents="none"
+            />
+          )}
+          {hatchWidth > 0 && (
+            <rect
+              x={x + measuredWidth}
+              y={0}
+              width={hatchWidth}
+              height={stripHeight}
+              rx={1}
+              fill={hatchFill(hatchId)}
+              pointerEvents="none"
+            />
+          )}
+          {span.marker !== undefined && markerColor !== undefined && measuredWidth > 0 && (
+            <rect
+              x={x}
+              y={inset}
+              width={measuredWidth}
+              height={Math.max(stripHeight - 2 * inset, 2)}
+              rx={1}
+              fill={markerColor}
+              pointerEvents="none"
+            />
+          )}
+        </g>,
+      )
+    })
+    return out
+  }, [bands, getBand, getX, styleByKey, hidden, bandWidth, step, stripHeight, hatchId])
+
+  if (plotWidth <= 0 || bands.length === 0) return null
+
+  const cfg = tooltip === false ? undefined : tooltip
+  const badge = cfg?.label === undefined || point === null ? null : cfg.label(point)
+  const row = point === null ? null : deriveBandRow(getBand(point), styleByKey, hidden, point)
+
+  return (
+    <>
+      <svg ref={band.svgRef} width={plot.width} height={plot.height}>
+        <defs>
+          <HatchPattern
+            id={hatchId}
+            color={absentColor}
+            opacity={0.7}
+            size={hatchSizeFor(bandWidth)}
+          />
+        </defs>
+        {/* theme-allow-file basalt/hand-rolled-plot — a strip has ONE dimension: slots over a
+            category axis, no numeric y at all. `CartesianChart`'s contract is a single plot rect
+            with one or two numeric y axes and it renders `AxisLeftNumeric` unconditionally, so it
+            cannot express this shape. The plot is assembled here from the SAME parts every other
+            chart gets — `ChartFrame`, `autoMargin`, `useChartCursor`, `ChartTooltipFloat` — through
+            `useBandPlot`, which `MirroredBars` composes too rather than copying this file. */}
+        <Group left={margin.left} top={margin.top}>
+          {rects}
+
+          {crosshairX !== null && <Crosshair x={crosshairX} top={0} bottom={stripHeight} />}
+
+          <AxisBottomDate
+            top={stripHeight}
+            scale={scale}
+            tickValues={band.tickValues}
+            tickFormat={(v) => formatX(String(v))}
+          />
+
+          <HoverOverlay
+            width={plotWidth}
+            height={stripHeight}
+            onMove={cursor.onPointerMove}
+            onLeave={cursor.onPointerLeave}
+            onKeyDown={cursor.onKeyDown}
+            onBlur={cursor.onBlur}
+            valueMax={Math.max(bands.length - 1, 0)}
+            {...(point !== null && {
+              valueNow: bands.indexOf(point),
+              valueText: formatX(getX(point)),
+            })}
+            {...(ariaLabel !== undefined && { ariaLabel })}
+          />
+        </Group>
+      </svg>
+
+      {band.showTooltip && point !== null && (
+        <ChartTooltipFloat anchor={band.tooltipAnchor} ariaLive={band.ariaLive}>
+          <TooltipHeader
+            date={getX(point)}
+            {...(cfg?.formatHeader !== undefined && {
+              format: (key: string) => cfg.formatHeader?.(key, point) ?? key,
+            })}
+            {...(badge !== null && { label: badge.text, labelColor: badge.color })}
+          />
+          <TooltipBody>
+            {cfg?.prependRows?.(point, { hidden })}
+            {row !== null && (
+              <TooltipRow
+                color={row.color}
+                label={row.label}
+                value={row.value}
+                shape={row.shape}
+                dashed={row.dashed}
+              />
+            )}
+            {cfg?.extraRows?.(point, { hidden })}
+          </TooltipBody>
+        </ChartTooltipFloat>
+      )}
+    </>
+  )
+}
+
+/** A 0..1 share. Non-finite (a 0/0 fold count) reads as "nothing is absent" — the conservative
+ * end, since the alternative is a band that does not render at all. */
+function clampFraction(value: number | undefined): number {
+  if (value === undefined || !Number.isFinite(value)) return 0
+  return Math.min(Math.max(value, 0), 1)
+}
+
+/**
+ * The strip's one derived row: the hovered band's STATE, named and formatted by its own `series`
+ * entry. A strip cannot show a row for a state it does not draw, and cannot name a state the
+ * legend does not carry — the same guarantee `deriveTooltipRows` gives a cartesian chart, over a
+ * shape that has no numeric value to derive from.
+ */
+function deriveBandRow<T>(
+  span: BandSpan,
+  styleByKey: ReadonlyMap<string, BandStripSeries<T>>,
+  hidden: ReadonlySet<string>,
+  datum: T,
+): { color: string; label: string; value: string; shape: 'line' | 'bar'; dashed: boolean } | null {
+  const style = styleByKey.get(span.state)
+  if (style === undefined || style.tooltip === false || hidden.has(span.state)) return null
+  return {
+    color: style.color,
+    label: style.label,
+    value: style.formatValue?.(datum) ?? '',
+    shape: style.mark === 'line' ? 'line' : 'bar',
+    dashed: style.dash === 'dashed',
+  }
+}
+
+/**
+ * Hand-memoized: React Compiler does not process the shipped dist, so the hot kind is wrapped in
+ * `React.memo` to retain the auto-memoization it had as source (parity with `DualPanel`).
+ */
+export const BandStrip = memo(BandStripInner) as typeof BandStripInner

package/src/charts/kinds/Bars.tsx

@@ -107,8 +107,12 @@ export type BarsProps<T> = {
   /** Per-bar opacity override. Receives the data point + bar key. Default 0.85. */
   barOpacity?: (d: T, key: string) => number
 
-  /** X tick count override. Default: as many as fit. */
+  /** Exact number of x ticks. Default: as many as fit. Ignored when `xTickValues` is set. */
   xTicks?: number
+  /** Which domain keys get a tick, from the full key list and the resolved plot width. Takes
+   * precedence over `xTicks` — see `CartesianChartProps.xTickValues` for why a count is not
+   * always enough. */
+  xTickValues?: (keys: readonly string[], xMax: number) => readonly string[]
   /** X tick label formatter. Default `fmtAxisDate` (DD.MM). */
   formatX?: (key: string) => string
   /**
@@ -161,6 +165,7 @@ function BarsInner<T>(props: BarsProps<T>) {
     barLayout = 'stacked',
     barOpacity,
     xTicks,
+    xTickValues,
     formatX,
     cursorResolution,
     tooltip,
@@ -280,6 +285,7 @@ function BarsInner<T>(props: BarsProps<T>) {
       y={yConfig}
       {...(y2 !== undefined && { y2 })}
       {...(xTicks !== undefined && { xTicks })}
+      {...(xTickValues !== undefined && { xTickValues })}
       {...(formatX !== undefined && { formatX })}
       {...(cursorResolution !== undefined && { cursorResolution })}
       {...(zones !== undefined && { zones })}

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

@@ -6,7 +6,7 @@
  * `Bars.test.tsx`) — DualPanel has two `HoverOverlay`s sharing one cursor, but only the TOP one is
  * keyboard-focusable, so `getByRole('slider')` is unambiguous.
  */
-import { fireEvent, render, screen, within } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react'
 import { describe, expect, test } from 'bun:test'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { ChartCursorScope } from '../cursor/scope'
@@ -499,10 +499,16 @@ describe('DualPanel — onFollow (follower behaviour parity with CartesianChart)
   test('the follower tooltip is not aria-live; the source is', async () => {
     renderPair(true)
     fireEvent.keyDown(screen.getByRole('slider', { name: 'Source' }), { key: 'ArrowRight' })
-    await screen.findByText('V')
 
-    const tooltips = screen.getAllByRole('tooltip')
-    expect(tooltips).toHaveLength(2)
+    // The FOLLOWER anchors synchronously off its own svg rect; the SOURCE positions against
+    // `cursor.anchor`, which `useChartCursor` coalesces through `requestAnimationFrame` — one frame
+    // later. So waiting on the follower's 'V' is no barrier for the source tooltip. Wait for the
+    // PAIR, which is what's being asserted.
+    const tooltips = await waitFor(() => {
+      const found = screen.getAllByRole('tooltip')
+      expect(found).toHaveLength(2)
+      return found
+    })
     const sourceTooltip = tooltips.find((t) => within(t).queryByText('Shown') !== null)
     const followerTooltip = tooltips.find((t) => within(t).queryByText('V') !== null)
     expect(sourceTooltip?.getAttribute('aria-live')).toBe('polite')

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

@@ -0,0 +1,193 @@
+/**
+ * `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')
+  })
+})