basalt-ui 1.30.2 → 1.31.0

package/src/charts/primitives/CartesianChart.tsx

@@ -4,21 +4,33 @@ import { scaleLinear, scaleLog, scalePoint } from '@visx/scale'
 import { useMemo, useRef, useState } from 'react'
 import type { ReactNode } from 'react'
 import type { BasaltProps } from '../../common/props'
-import { VX } from '../../tokens'
+import { VX, alpha } from '../../tokens'
 import type { ChartMargin } from '../../tokens'
+import { classifyDomain } from '../cursor/resolve'
 import type { CursorResolution } from '../cursor/resolve'
 import { useChartCursor } from '../hooks/useChartCursor'
 import { autoMargin, probeAxisLabels } from '../layout/auto-margin'
+import type { AutoMarginInput } from '../layout/auto-margin'
+import { END_LABEL_GAP, planEndLabels } from '../layout/end-labels'
 import { logTickValues, niceLogDomain } from '../layout/log-ticks'
 import { deriveLegend, deriveTooltipRows } from '../series'
 import type { ChartLegendConfig, ChartSeries } from '../series'
 import { padAutoLower, padAutoUpper } from '../utils/domain'
 import { fmtAxisDate } from '../utils/format'
-import { autoXLabelRotate, smartTicks, smartTicksEvery, xLabelPxFor } from '../utils/ticks'
-import { AxisBottomDate, AxisLeftNumeric, AxisRightNumeric } from './Axes'
+import { rotatedXLabelPx, smartTicks, smartTicksEvery, xLabelPxFor } from '../utils/ticks'
+import { AxisBottomDate, AxisLeftNumeric, AxisRightNumeric, TICK_FONT_FAMILY } from './Axes'
 import { ChartFrame, resolveLegend } from './ChartFrame'
 import type { ResponsiveChartHeight } from './ChartFrame'
-import { useChartTierMetrics } from './chart-tier'
+import {
+  compactNumber,
+  isTightClass,
+  planXLabels,
+  resolveMarginFloor,
+  resolveYPlacement,
+  shouldCompactYLabels,
+  yTickCount,
+} from './chart-layout'
+import { useChartContainerClass, useChartMetrics } from './chart-tier'
 import type { ChartState } from './ChartPending'
 import { ChartTooltipFloat, TooltipBody, TooltipHeader, TooltipRow } from './ChartTooltip'
 import { Crosshair, SeriesDot } from './Crosshair'
@@ -35,9 +47,11 @@ import type { ZoneSpec } from './ZoneRects'
 type ContinuousScale = ReturnType<typeof scaleLinear<number>> | ReturnType<typeof scaleLog<number>>
 type PointScale = ReturnType<typeof scalePoint<string>>
 
-const DEFAULT_TICKS = 5
 const DEFAULT_AUTO_PAD = 1.1
 
+/** Faint tint a dual-axis chart lays over its tick labels: the series colour, kept quiet. */
+const AXIS_TINT_ALPHA = 0.8
+
 /** One y-axis, fully described. Collapses the removed `yDomain` / `yAutoMaxFloor` / `yAutoMinCeil` /
  * `yAutoPad` / `numTicksY` / `formatYTick` prop soup into a single object per axis. */
 export type AxisConfig<T> = {
@@ -195,14 +209,15 @@ export type CartesianChartProps<T> = BasaltProps & {
    * bottom gutter deepens by the rotated label's projected height, measured like every other side
    * (`docs/CHARTS-SPEC.md` §1), so nothing clips.
    *
-   * This is the phone answer to a label too wide to repeat horizontally: rotating keeps every tick
-   * the axis would otherwise have to thin away — which is why, LEFT UNSET, it is now the phone
-   * tier's DEFAULT: below `VX.phoneChartWidth`, labels too wide to fit three ticks side by side
-   * auto-rotate to 45 (`autoXLabelRotate`). Nothing changes at desktop width, and nothing changes
-   * for a chart that already passes a value.
+   * This is the phone answer to a **categorical** axis whose labels are too wide to repeat
+   * horizontally: rotating keeps every tick the axis would otherwise have to thin away — which is
+   * why, LEFT UNSET, it is now the phone tier's DEFAULT for a band domain, below
+   * `CONTAINER_CLASSES.regular` (`planXLabels`). A time or number domain never auto-rotates (or
+   * wraps) — it thins instead, however narrow the plot. Nothing changes at desktop width, and
+   * nothing changes for a chart that already passes a value.
    *
    * **`0` is the opt-out** — "never rotate, thin the axis instead" — and is the only way to get
-   * the pre-tier behaviour back on a phone-width chart with very wide labels.
+   * the pre-tier behaviour back on a phone-width categorical chart with very wide labels.
    */
   xLabelRotate?: 0 | 45 | 90
   /** Value-range bands on the left scale, drawn behind the marks. */
@@ -321,6 +336,41 @@ export function resolveAxisDomain<T>(
   return [lower, upper]
 }
 
+/**
+ * Probe one y axis' labels. With no consumer `format`, labels over 4 chars switch to the compact
+ * number format (`12500` -> `12.5k`, ladder step 1); an explicit `format` is never touched.
+ */
+function probeYAxis(opts: {
+  domain: [number, number]
+  ticks: number
+  nice: boolean
+  scale: 'linear' | 'log' | undefined
+  format: ((v: number) => string) | undefined
+}): { labels: string[]; format: (v: number) => string } {
+  const { domain, ticks, nice, scale, format } = opts
+  const base = probeAxisLabels({
+    domain,
+    ticks,
+    nice,
+    ...(scale !== undefined && { scale }),
+    ...(format !== undefined && { format }),
+  })
+  if (format !== undefined || !shouldCompactYLabels(base.labels)) {
+    return base
+  }
+  const compact = (v: number): string => compactNumber(v) ?? base.format(v)
+  return {
+    labels: probeAxisLabels({
+      domain,
+      ticks,
+      nice,
+      format: compact,
+      ...(scale !== undefined && { scale }),
+    }).labels,
+    format: compact,
+  }
+}
+
 /**
  * One y-axis' real scale, built from its resolved domain — shared by the left and right axis so
  * the log branch (`scaleLog` + `nice` + the 1-2-5 tick override) is written and commented exactly
@@ -354,6 +404,49 @@ function buildYScale<T>(
   })
 }
 
+/**
+ * `tickLabelPx`'s resolver, split out of a two-deep ternary: a 45° label projects wider than its
+ * flat glyph box, so it measures through {@link rotatedXLabelPx} instead of the flat/wrapped
+ * numbers every other rotation uses; a wrapped flat label (`wrapWidth` set) uses ITS width, an
+ * unwrapped one the plain flat width. `rotate === 90` falls through to the flat/wrapped branch
+ * unchanged — `wrapWidth` is only ever set for `rotate === 0` (see its own definition), so a 90°
+ * axis always resolves to `flatLabelPx` here, matching the pre-split behaviour exactly.
+ */
+function resolveTickLabelPx(input: {
+  rotate: 0 | 45 | 90
+  wrapWidth: number | undefined
+  xLabels: string[]
+  axisFont: number
+  flatLabelPx: number
+  wrappedLabelPx: number
+}): number {
+  const { rotate, wrapWidth, xLabels, axisFont, flatLabelPx, wrappedLabelPx } = input
+  if (rotate === 45) return rotatedXLabelPx(xLabels, axisFont)
+  return wrapWidth === undefined ? flatLabelPx : wrappedLabelPx
+}
+
+/**
+ * `baseMargin`'s resolver, split out of the same two-deep ternary: an unrotated, unwrapped axis
+ * keeps the already-measured flat margin; wrapping re-measures for the extra line(s)
+ * (`bottomLines`); a 45° rotation reuses its own pre-measured margin ({@link rotated45Margin}); a
+ * 90° one measures fresh (no pre-measured twin exists for it, unlike 45°).
+ */
+function resolveBaseMargin(input: {
+  rotate: 0 | 45 | 90
+  wrapWidth: number | undefined
+  flatMargin: ChartMargin
+  rotated45Margin: ChartMargin
+  marginInput: AutoMarginInput
+  xPlanLines: number
+}): ChartMargin {
+  const { rotate, wrapWidth, flatMargin, rotated45Margin, marginInput, xPlanLines } = input
+  if (rotate === 45) return rotated45Margin
+  if (rotate === 90) return autoMargin({ ...marginInput, rotate })
+  return wrapWidth === undefined
+    ? flatMargin
+    : autoMargin({ ...marginInput, bottomLines: xPlanLines })
+}
+
 /**
  * The cartesian chart primitive — the rung that was missing between `ChartFrame` and raw visx
  * (`docs/CHARTS-SPEC.md` §2).
@@ -458,7 +551,7 @@ type CartesianPlotProps<T> = Omit<
   | 'className'
   | 'style'
 > & {
-  plot: { width: number; height: number; hidden: ReadonlySet<string> }
+  plot: { width: number; height: number; hidden: ReadonlySet<string>; legendInHeader: boolean }
   highlighted: string | null
   marginOverride?: Partial<ChartMargin>
 }
@@ -492,7 +585,9 @@ function CartesianPlot<T>({
   // The tier `ChartFrame` resolved from its own MEASURED width. Everything sized by it here is
   // the half a hook cannot reach: the tick font the margins are MEASURED at, and the margin
   // floors themselves (`docs/CHARTS-SPEC.md` §8).
-  const tier = useChartTierMetrics()
+  const tier = useChartMetrics()
+  const containerClass = useChartContainerClass()
+  const tight = isTightClass(containerClass)
 
   const visible = useMemo(() => series.filter((s) => !hidden.has(s.key)), [series, hidden])
   const leftSeries = useMemo(() => visible.filter((s) => s.axis !== 'right'), [visible])
@@ -526,17 +621,21 @@ function CartesianPlot<T>({
     [y2, data, rightSeries, rightBounds],
   )
 
-  const leftTicks = y?.ticks ?? DEFAULT_TICKS
-  const rightTicks = y2?.ticks ?? DEFAULT_TICKS
+  // Tick count is a law of the plot height (one per ~44px, 2 under `VX.minPlotHeight`), estimated
+  // from the token floors because the real margins depend on the labels these ticks produce. A
+  // consumer's `ticks` always wins.
+  const estimatedPlotHeight = plot.height - tier.margin.top - tier.margin.bottom
+  const leftTicks = y?.ticks ?? yTickCount(estimatedPlotHeight)
+  const rightTicks = y2?.ticks ?? yTickCount(estimatedPlotHeight)
 
   const { labels: leftLabels, format: leftFormat } = useMemo(
     () =>
-      probeAxisLabels({
+      probeYAxis({
         domain: leftDomain,
         ticks: leftTicks,
         nice: y?.nice ?? false,
-        ...(y?.scale !== undefined && { scale: y.scale }),
-        ...(y?.format !== undefined && { format: y.format }),
+        scale: y?.scale,
+        format: y?.format,
       }),
     [leftDomain, leftTicks, y?.format, y?.nice, y?.scale],
   )
@@ -545,18 +644,27 @@ function CartesianPlot<T>({
     () =>
       rightDomain === null
         ? { labels: [], format: (v: number) => String(v) }
-        : probeAxisLabels({
+        : probeYAxis({
             domain: rightDomain,
             ticks: rightTicks,
             nice: y2?.nice ?? false,
-            ...(y2?.scale !== undefined && { scale: y2.scale }),
-            ...(y2?.format !== undefined && { format: y2.format }),
+            scale: y2?.scale,
+            format: y2?.format,
           }),
     [rightDomain, rightTicks, y2?.format, y2?.nice, y2?.scale],
   )
 
   const xLabels = useMemo(() => keys.map(formatX), [keys, formatX])
 
+  // Ladder step 5: at compact/micro the y labels sit inside the plot (micro: no y axis), so the
+  // left gutter drops to its floor. An explicit `margin.left` means the consumer laid out an
+  // outside gutter — it keeps the outside axis. `CartesianChart` always has a left axis.
+  const yPlacement = resolveYPlacement(containerClass, { marginOverrideLeft: marginOverride?.left })
+  // A whitespace test misclassified any spaced date format ("Mar 01") as categorical, which then
+  // wrapped or rotated a time axis that should only ever thin (§ ladder step 4). Domain kind is
+  // the actual law: only a band (category) domain wraps or rotates; time and number domains thin.
+  const categorical = tight && classifyDomain(keys) === 'band'
+
   /** The horizontal room one x tick label needs: the widest string that could be painted, plus
    * breathing space to its neighbour. Feeds `smartTicks`, which otherwise thinned the axis by a
    * constant that knew nothing about the label. Measured at the tick font the axis will actually
@@ -567,14 +675,26 @@ function CartesianPlot<T>({
    * measured label can never differ between the one that DECIDES and the one that PAINTS. */
   const marginInput = useMemo(
     () => ({
-      left: leftLabels,
+      left: yPlacement === 'outside' ? leftLabels : [],
       right: rightLabels,
       bottom: xLabels,
       fontPx: tier.axisFont,
-      floor: tier.margin,
+      // An inside-placed y label paints IN the plot, so the left gutter it used to reserve
+      // (the phone tier's own margin floor) is dead space — only the inside-label floor applies.
+      floor: resolveMarginFloor(yPlacement, tier.margin),
+      anchorTerminals: tight,
       ...(marginOverride !== undefined && { override: marginOverride }),
     }),
-    [leftLabels, rightLabels, xLabels, tier.axisFont, tier.margin, marginOverride],
+    [
+      leftLabels,
+      rightLabels,
+      xLabels,
+      tier.axisFont,
+      tier.margin,
+      marginOverride,
+      tight,
+      yPlacement,
+    ],
   )
 
   /** The margin an UNROTATED axis resolves to. It is the final margin in every case except an
@@ -582,73 +702,122 @@ function CartesianPlot<T>({
    * deciding needs an `xMax`, and `xMax` needs a margin, so the unrotated pass breaks the loop. */
   const flatMargin = useMemo(() => autoMargin(marginInput), [marginInput])
 
-  /** And the margin a 45° axis would resolve to — the OTHER half of the decision. A rotated label
-   * reaches into the left gutter, so rotating spends plot width; `autoXLabelRotate` refuses the
-   * trade when what is left cannot hold three labels at their projected pitch, which is how block
-   * (f1) at 320 used to rotate itself into a clipped axis (§8). */
+  /** And the margin a 45° axis would resolve to — the OTHER half of the decision, needed only for
+   * a categorical (band) domain that still overflows once wrapped (`planXLabels`'s own rotate
+   * case). A rotated label reaches into the left gutter, so rotating spends plot width. */
   const rotated45Margin = useMemo(() => autoMargin({ ...marginInput, rotate: 45 }), [marginInput])
 
   // An explicit `xLabelRotate` always wins — including `0`, which is the documented "never rotate"
-  // opt-out. Only an unset one falls through to the phone tier's own default.
-  const rotate =
-    xLabelRotate ??
-    autoXLabelRotate({
-      tier: tier.tier,
-      xMax: Math.max(plot.width - flatMargin.left - flatMargin.right, 0),
-      labelPx: xLabelPx,
-      rotatedXMax: Math.max(plot.width - rotated45Margin.left - rotated45Margin.right, 0),
-    })
+  // opt-out. Only an unset one falls through to the domain-driven default: a categorical (band)
+  // axis wraps before it rotates, and rotates only when even wrapped it doesn't fit
+  // (`planXLabels`). A time or number domain never wraps or rotates — it only thins.
+  const flatXMax = Math.max(plot.width - flatMargin.left - flatMargin.right, 0)
+  const xPlan = useMemo(
+    () => planXLabels({ labels: xLabels, plotWidth: flatXMax, fontPx: tier.axisFont, categorical }),
+    [xLabels, flatXMax, tier.axisFont, categorical],
+  )
+  const rotate = xLabelRotate ?? (categorical ? xPlan.rotate : 0)
+  const wrapWidth = rotate === 0 && xPlan.wrap ? xPlan.wrapPx : undefined
+  // A 90° label is one line box wide, so the constant floor governs it; a 45° one projects wider.
+  const tickLabelPx = resolveTickLabelPx({
+    rotate,
+    wrapWidth,
+    xLabels,
+    axisFont: tier.axisFont,
+    flatLabelPx: xLabelPx,
+    wrappedLabelPx: xPlan.labelPx,
+  })
+
+  const baseMargin = useMemo(
+    () =>
+      resolveBaseMargin({
+        rotate,
+        wrapWidth,
+        flatMargin,
+        rotated45Margin,
+        marginInput,
+        xPlanLines: xPlan.lines,
+      }),
+    [flatMargin, rotated45Margin, marginInput, rotate, wrapWidth, xPlan.lines],
+  )
 
+  // End-of-line labels are planned FIRST, against the base margin: the right gutter is reserved
+  // only when the labels will actually draw. `yScale` depends on the plot height alone, so it is
+  // safe to build before the right margin is settled.
+  const yMax = Math.max(plot.height - baseMargin.top - baseMargin.bottom, 0)
+  const yScale = useMemo(
+    () => buildYScale(y, leftDomain, yMax, leftTicks),
+    [y, leftDomain, yMax, leftTicks],
+  )
+  const endPlan = useMemo(
+    () =>
+      planEndLabels({
+        containerClass,
+        hasY2: y2 !== undefined,
+        hasMarginRight: marginOverride?.right !== undefined,
+        hasHeaderLegend: plot.legendInHeader,
+        visible,
+        data,
+        yScale,
+        yMax,
+        fontPx: tier.axisFont,
+        plotWidth: plot.width - baseMargin.left - baseMargin.right,
+      }),
+    [
+      containerClass,
+      y2,
+      marginOverride?.right,
+      plot.legendInHeader,
+      visible,
+      data,
+      yScale,
+      yMax,
+      tier.axisFont,
+      plot.width,
+      baseMargin.left,
+      baseMargin.right,
+    ],
+  )
+  const endLabels = endPlan?.labels ?? []
   const margin = useMemo(
     () =>
-      rotate === 0
-        ? flatMargin
-        : rotate === 45
-          ? rotated45Margin
-          : autoMargin({ ...marginInput, rotate }),
-    [flatMargin, rotated45Margin, marginInput, rotate],
+      endPlan === null ? baseMargin : { ...baseMargin, right: baseMargin.right + endPlan.gutter },
+    [baseMargin, endPlan],
   )
 
   // ── Pass 2: the real scales, now that the plot rect is known ────────────────────────────────
   const xMax = Math.max(plot.width - margin.left - margin.right, 0)
-  const yMax = Math.max(plot.height - margin.top - margin.bottom, 0)
 
   const xScale = useMemo(
     () => scalePoint<string>({ domain: keys, range: [0, xMax], padding: 0.5 }),
     [keys, xMax],
   )
-  const yScale = useMemo(
-    () => buildYScale(y, leftDomain, yMax, leftTicks),
-    [y, leftDomain, yMax, leftTicks],
-  )
   const y2Scale = useMemo(
     () => (rightDomain === null ? null : buildYScale(y2, rightDomain, yMax, rightTicks)),
     [y2, rightDomain, yMax, rightTicks],
   )
 
   // Resolution order: explicit VALUES win, then an explicit COUNT, then as many as fit.
-  const tickValues = useMemo(
-    () =>
-      xTickValues !== undefined
-        ? [...xTickValues(keys, xMax)]
-        : xTicks === undefined
-          ? // A rotated label stacks diagonally instead of beside its neighbour, so its WIDTH no
-            // longer governs tick spacing — the constant floor takes over, exactly as before.
-            smartTicks(keys, xMax, rotate === 0 ? xLabelPx : undefined)
-          : smartTicksEvery(keys, xTicks),
-    [keys, xMax, xTicks, xTickValues, xLabelPx, rotate],
-  )
+  const tickValues = useMemo(() => {
+    if (xTickValues !== undefined) return [...xTickValues(keys, xMax)]
+    if (xTicks !== undefined) return smartTicksEvery(keys, xTicks)
+    // Micro: the two terminals only.
+    if (containerClass === 'micro')
+      return keys.length > 1 ? [keys[0]!, keys[keys.length - 1]!] : keys
+    return smartTicks(keys, xMax, rotate === 0 || rotate === 45 ? tickLabelPx : undefined, tight)
+  }, [keys, xMax, xTicks, xTickValues, tickLabelPx, rotate, containerClass, tight])
 
+  const svgRef = useRef<SVGSVGElement>(null)
   const cursor = useChartCursor<T>({
     data,
     chartId,
     getKey: getX,
     xScale,
     marginLeft: margin.left,
+    boundaryRef: svgRef,
     ...(cursorResolution !== undefined && { resolution: cursorResolution }),
   })
 
-  const svgRef = useRef<SVGSVGElement>(null)
   const tooltipEnabled = tooltip !== false
   const tooltipCfg = tooltip === false ? undefined : tooltip
   const point = cursor.point
@@ -668,6 +837,12 @@ function CartesianPlot<T>({
     [visible, leftFormat, rightFormat],
   )
 
+  // Dual axis with exactly one visible series per side: the tick labels carry that series' colour,
+  // so the axis says which line it reads. Any other split leaves both axes neutral.
+  const tintAxes = y2 !== undefined && leftSeries.length === 1 && rightSeries.length === 1
+  const leftTint = tintAxes ? alpha(leftSeries[0]!.color, AXIS_TINT_ALPHA) : undefined
+  const rightTint = tintAxes ? alpha(rightSeries[0]!.color, AXIS_TINT_ALPHA) : undefined
+
   const rows =
     tooltipEnabled && point !== null ? deriveTooltipRows(tooltipSeries, point, leftFormat) : []
 
@@ -679,8 +854,13 @@ function CartesianPlot<T>({
 
   // Anchored mode resolves the crosshair's plot-local x into viewport space; following mode uses
   // the pointer position `useChartCursor` already recorded. A follower render always anchors, since
-  // `follow`'s pointer-tracking path has no pointer to read on this chart.
-  const useAnchoredPosition = tooltipCfg?.follow === false || isFollowerRender
+  // `follow`'s pointer-tracking path has no pointer to read on this chart. An unset `follow` also
+  // anchors on touch (spec §5) — the readout would otherwise sit under the finger; an EXPLICIT
+  // `follow` (true or false) always wins over that default.
+  const useAnchoredPosition =
+    tooltipCfg?.follow === false ||
+    (tooltipCfg?.follow === undefined && cursor.isTouch) ||
+    isFollowerRender
   const anchorX = useAnchoredPosition && point !== null && cursorX !== null ? cursorX : null
   const svgRect = anchorX === null ? undefined : svgRef.current?.getBoundingClientRect()
   const tooltipAnchor =
@@ -704,7 +884,14 @@ function CartesianPlot<T>({
 
   return (
     <>
-      <svg ref={svgRef} width={plot.width} height={plot.height}>
+      <svg
+        ref={svgRef}
+        width={plot.width}
+        height={plot.height}
+        // `touch-action` on the plot `<svg>`, not the overlay `<rect>`: Chrome ignores it on an SVG
+        // child, so a horizontal scrub was claimed as a pan and cancelled (`R2C-2`).
+        style={{ touchAction: 'pan-y' }}
+      >
         <Group left={margin.left} top={margin.top}>
           {(y?.grid ?? true) && (
             <GridRows scale={yScale} width={xMax} stroke={VX.grid} numTicks={leftTicks} />
@@ -762,17 +949,22 @@ function CartesianPlot<T>({
             </>
           )}
 
-          <AxisLeftNumeric
-            scale={yScale}
-            numTicks={leftTicks}
-            tickFormat={(v) => leftFormat(Number(v))}
-          />
+          {yPlacement !== 'none' && (
+            <AxisLeftNumeric
+              scale={yScale}
+              numTicks={leftTicks}
+              tickFormat={(v) => leftFormat(Number(v))}
+              inside={yPlacement === 'inside'}
+              {...(leftTint !== undefined && { tickColor: leftTint })}
+            />
+          )}
           {y2Scale !== null && (
             <AxisRightNumeric
               scale={y2Scale}
               left={xMax}
               numTicks={rightTicks}
               tickFormat={(v) => rightFormat(Number(v))}
+              {...(rightTint !== undefined && { tickColor: rightTint })}
             />
           )}
           <AxisBottomDate
@@ -781,12 +973,34 @@ function CartesianPlot<T>({
             tickValues={tickValues}
             tickFormat={(v) => formatX(String(v))}
             {...(rotate !== 0 && { rotate })}
+            anchorTerminals={tight && rotate === 0}
+            {...(wrapWidth !== undefined && { wrapWidth })}
           />
 
+          {endLabels.map(({ series: s, y: labelY }) => (
+            <text
+              key={`end-${s.key}`}
+              x={xMax + END_LABEL_GAP}
+              y={labelY}
+              dy="0.35em"
+              fill={s.color}
+              fontFamily={TICK_FONT_FAMILY}
+              fontSize={tier.axisFont}
+              opacity={
+                highlighted === null || s.key === highlighted || s.parent === highlighted ? 1 : 0.25
+              }
+              pointerEvents="none"
+            >
+              {s.label}
+            </text>
+          ))}
+
           <HoverOverlay
             width={xMax}
             height={yMax}
             onMove={cursor.onPointerMove}
+            onDown={cursor.onPointerDown}
+            onUp={cursor.onPointerUp}
             onLeave={cursor.onPointerLeave}
             onKeyDown={cursor.onKeyDown}
             onBlur={cursor.onBlur}