basalt-ui 1.14.0 → 1.16.0

package/src/charts/kinds/Donut.tsx

@@ -1,10 +1,9 @@
 import { Group } from '@visx/group'
 import { Pie } from '@visx/shape'
-import { memo, useMemo } from 'react'
-import type { ReactNode } from 'react'
-import { ChartTooltip, TooltipBody, TooltipRow, useTooltipStyles } from '../primitives/ChartTooltip'
+import { memo, useMemo, useState } from 'react'
+import type { PointerEvent, ReactNode } from 'react'
+import { ChartTooltipFloat, TooltipBody, TooltipRow } from '../primitives/ChartTooltip'
 import { ChartFrame } from '../primitives/ChartFrame'
-import { useChartTooltip } from '../hooks/useChartTooltip'
 import { VX } from '../../tokens'
 import type { SeriesStyle } from '../series'
 import type { SeriesKey } from '../../register'
@@ -60,10 +59,11 @@ export type DonutProps<K extends string = SeriesKey> = {
 /**
  * Radial slice-share chart with a punched-out center label. Composes `ChartFrame` for a
  * categorical legend derived from the slices (one `SeriesStyle` per slice, `mark: 'bar'`) so the
- * legend can never drift from what's plotted. No crosshair — meaningless for a radial layout.
- * Hover stays local to the pie (dimming siblings on hover) rather than joining the shared
- * `HoverContext`: a date-keyed cursor has no counterpart on a donut, and cross-kind category sync
- * (donut ↔ bar, via the generalized key) is a distinct, deliberately deferred feature.
+ * legend can never drift from what's plotted — legend-hidden slices drop out of the ring, the
+ * center total, and the tooltip's "Share" row together (`docs/CHARTS-SPEC.md` §5). No crosshair —
+ * meaningless for a radial layout. Hover stays local to the pie (dimming siblings on hover) rather
+ * than joining the shared cursor: a date-keyed cursor has no counterpart on a donut, and cross-kind
+ * category sync (donut ↔ bar, via a generalized key) is a distinct, deliberately deferred feature.
  */
 function DonutInner<K extends string = SeriesKey>(props: DonutProps<K>) {
   const { data, height, colorForKey, seriesLabel = (k) => k, ariaLabel, isPending } = props
@@ -88,9 +88,12 @@ function DonutInner<K extends string = SeriesKey>(props: DonutProps<K>) {
 }
 
 type DonutPlotProps<K extends string = SeriesKey> = DonutProps<K> & {
-  plot: { width: number; height: number }
+  plot: { width: number; height: number; hidden: ReadonlySet<string> }
 }
 
+/** A hovered slice plus the viewport anchor `ChartTooltipFloat` positions against. */
+type DonutTip<K extends string> = { key: K; value: number; anchor: { x: number; y: number } }
+
 /** The measured plot — split from {@link DonutInner} so it only draws once `ChartFrame` has
  * resolved a non-empty plot rect (radius/center depend on the measured size). */
 function DonutPlot<K extends string = SeriesKey>(props: DonutPlotProps<K>) {
@@ -106,26 +109,31 @@ function DonutPlot<K extends string = SeriesKey>(props: DonutPlotProps<K>) {
     innerRatio = 0.6,
     padAngle = 0.01,
   } = props
-  const { width, height } = plot
+  const { width, height, hidden } = plot
 
-  const tooltipStyles = useTooltipStyles()
+  const [tip, setTip] = useState<DonutTip<K> | null>(null)
+  const hoveredKey = tip?.key ?? null
 
-  const { tip, show, hide, tooltipRef } = useChartTooltip<DonutDatum<K>>()
-  const hoveredKey = tip?.data.key ?? null
+  const visibleData = useMemo(() => data.filter((d) => !hidden.has(d.key)), [data, hidden])
 
   const radius = Math.min(width, height) / 2 - 4
   const innerRadius = radius * innerRatio
   const centerX = width / 2
   const centerY = height / 2
 
-  const total = useMemo(() => data.reduce((sum, d) => sum + d.value, 0), [data])
+  const total = useMemo(() => visibleData.reduce((sum, d) => sum + d.value, 0), [visibleData])
+
+  const show = (d: DonutDatum<K>, event: PointerEvent<SVGGElement>) => {
+    setTip({ key: d.key, value: d.value, anchor: { x: event.clientX, y: event.clientY } })
+  }
+  const hide = () => setTip(null)
 
   return (
     <div style={{ position: 'relative' }}>
       <svg width={width} height={height}>
         <Group left={centerX} top={centerY}>
           <Pie<DonutDatum<K>>
-            data={data}
+            data={visibleData}
             pieValue={(d) => d.value}
             pieSortValues={() => 0}
             outerRadius={radius}
@@ -210,24 +218,24 @@ function DonutPlot<K extends string = SeriesKey>(props: DonutPlotProps<K>) {
         </div>
       )}
 
-      <ChartTooltip tip={tip} tooltipRef={tooltipRef} styles={tooltipStyles}>
-        {tip && (
+      {tip !== null && (
+        <ChartTooltipFloat anchor={tip.anchor}>
           <TooltipBody>
             <TooltipRow
-              color={colorForKey(tip.data.key)}
-              label={seriesLabel(tip.data.key)}
-              value={formatValue(tip.data.value)}
+              color={colorForKey(tip.key)}
+              label={seriesLabel(tip.key)}
+              value={formatValue(tip.value)}
               shape="bar"
             />
             <TooltipRow
               color={VX.grid}
               label="Share"
-              value={`${total > 0 ? Math.round((tip.data.value / total) * 100) : 0}%`}
+              value={`${total > 0 ? Math.round((tip.value / total) * 100) : 0}%`}
               shape="bar"
             />
           </TooltipBody>
-        )}
-      </ChartTooltip>
+        </ChartTooltipFloat>
+      )}
     </div>
   )
 }

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

@@ -0,0 +1,131 @@
+/**
+ * `DualPanel` — the bottom-pane domain seam (`bottomYDomain`/`bottomMaxAbsFloor`) and `formatBar`
+ * (tooltip-row-only override, `formatBottom` keeps owning the ticks). Same SSR harness as
+ * `ChartFrame.test.tsx` for the axis-only assertions (no hover needed); the `formatBar` case needs
+ * a live cursor, so it uses the real DOM harness + the overlay's keyboard path (parity with
+ * `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 } from '@testing-library/react'
+import { describe, expect, test } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { DualPanel } from './DualPanel'
+import type { ChartSeries } from '../series'
+
+type Row = { date: string; v: number; bar: number }
+
+const rows: Row[] = [{ date: '2026-08-01', v: 10, bar: 0.02 }]
+
+const series: ChartSeries<Row>[] = [
+  { key: 'v', label: 'V', color: '#111', mark: 'line', getValue: (d) => d.v },
+]
+
+function renderStatic(bottomMaxAbsFloor?: number, bottomYDomain?: [number, number]): string {
+  return renderToStaticMarkup(
+    <DualPanel<Row>
+      data={rows}
+      chartId="dp-floor"
+      getX={(d) => d.date}
+      series={series}
+      getBar={(d) => d.bar}
+      barLabel="Bar"
+      barColorPositive="#0a0"
+      barColorNegative="#a00"
+      formatTop={(v) => String(v)}
+      formatBottom={(v) => v.toFixed(2)}
+      {...(bottomMaxAbsFloor !== undefined && { bottomMaxAbsFloor })}
+      {...(bottomYDomain !== undefined && { bottomYDomain })}
+    />,
+  )
+}
+
+describe('DualPanel — bottomMaxAbsFloor', () => {
+  test('floors the symmetric max-abs so a near-zero plateau does not amplify to full height', () => {
+    // The raw data's max abs is 0.02 — nowhere near the 0.5 floor, so "0.50" can only appear on
+    // the bottom axis once the floor widens the domain.
+    expect(renderStatic()).not.toContain('>0.50<')
+    expect(renderStatic(0.5)).toContain('>0.50<')
+  })
+})
+
+describe('DualPanel — per-point getMarker rendering', () => {
+  test('renders exactly one circle per non-null marker, honouring color/r overrides', () => {
+    const markerRows: Row[] = [
+      { date: '2026-08-01', v: 10, bar: 0.02 },
+      { date: '2026-08-02', v: 12, bar: 0.03 },
+      { date: '2026-08-03', v: 9, bar: 0.01 },
+    ]
+    const markerSeries: ChartSeries<Row>[] = [
+      {
+        key: 'v',
+        label: 'V',
+        color: '#111',
+        mark: 'line',
+        getValue: (d) => d.v,
+        getMarker: (d) =>
+          d.date === '2026-08-01'
+            ? { color: '#f00', r: 9 }
+            : d.date === '2026-08-03'
+              ? { r: 3 }
+              : null,
+      },
+    ]
+
+    const { container } = render(
+      <DualPanel<Row>
+        data={markerRows}
+        chartId="dp-markers"
+        getX={(d) => d.date}
+        series={markerSeries}
+        getBar={(d) => d.bar}
+        barLabel="Bar"
+        barColorPositive="#0a0"
+        barColorNegative="#a00"
+        formatTop={(v) => String(v)}
+        formatBottom={(v) => v.toFixed(2)}
+      />,
+    )
+
+    const circles = container.querySelectorAll('circle')
+    expect(circles).toHaveLength(2)
+    expect(circles[0]?.getAttribute('fill')).toBe('#f00')
+    expect(circles[0]?.getAttribute('r')).toBe('9')
+    // No color override on the second marker — falls back to the series color.
+    expect(circles[1]?.getAttribute('fill')).toBe('#111')
+    expect(circles[1]?.getAttribute('r')).toBe('3')
+  })
+})
+
+describe('DualPanel — fixed bottomYDomain ships verbatim (un-niced)', () => {
+  test('bottom axis ticks come from the pinned domain, not the computed max-abs', () => {
+    // Data's max abs is 0.02 — an auto domain would never produce a "5.00" tick. Pinning
+    // bottomYDomain to [-5, 5] must still paint it.
+    expect(renderStatic(undefined, [-5, 5])).toContain('>5.00<')
+    expect(renderStatic()).not.toContain('>5.00<')
+  })
+})
+
+describe('DualPanel — formatBar overrides only the tooltip row', () => {
+  test('the bar tooltip row reads formatBar, not formatBottom', async () => {
+    render(
+      <DualPanel<Row>
+        data={rows}
+        chartId="dp-formatbar"
+        getX={(d) => d.date}
+        series={series}
+        getBar={(d) => d.bar}
+        barLabel="Bar"
+        barColorPositive="#0a0"
+        barColorNegative="#a00"
+        formatTop={(v) => String(v)}
+        formatBottom={(v) => v.toFixed(2)}
+        formatBar={(v, d) => `${v.toFixed(3)} m/s (${d.date})`}
+      />,
+    )
+
+    const slider = screen.getByRole('slider')
+    fireEvent.keyDown(slider, { key: 'ArrowRight' })
+
+    expect(await screen.findByText('0.020 m/s (2026-08-01)')).toBeTruthy()
+  })
+})