@carto/ps-react-ui 4.7.0 → 4.8.0

package/src/widgets-v2/range/skeleton.test.tsx

@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/react'
+import { RangeSkeleton } from './skeleton'
+
+describe('<RangeSkeleton>', () => {
+  it('renders without crashing', () => {
+    const { container } = render(<RangeSkeleton />)
+    expect(
+      container.querySelectorAll('.MuiSkeleton-root').length,
+    ).toBeGreaterThan(0)
+  })
+
+  it('scales with count', () => {
+    const { container } = render(<RangeSkeleton count={2} />)
+    expect(container.firstChild).not.toBeNull()
+  })
+})

package/src/widgets-v2/range/skeleton.tsx

@@ -0,0 +1,47 @@
+import { Box, Skeleton } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+
+const styles = {
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 3,
+    py: 1,
+  },
+  item: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 1.5,
+  },
+  track: { height: 32 },
+  inputsRow: {
+    display: 'flex',
+    gap: 2,
+  },
+  input: { flex: 1, height: 40 },
+} satisfies Record<string, SxProps<Theme>>
+
+export interface RangeSkeletonProps {
+  count?: number
+}
+
+/**
+ * Loading placeholder for the Range widget. Renders `count` rows, each
+ * matching the slider-then-inputs layout of {@link RangeUI} so the layout
+ * doesn't jump when data resolves.
+ */
+export function RangeSkeleton({ count = 1 }: RangeSkeletonProps) {
+  return (
+    <Box sx={styles.root}>
+      {Array.from({ length: count }).map((_, i) => (
+        <Box key={`item-${i}`} sx={styles.item}>
+          <Skeleton variant='rectangular' sx={styles.track} />
+          <Box sx={styles.inputsRow}>
+            <Skeleton variant='rectangular' sx={styles.input} />
+            <Skeleton variant='rectangular' sx={styles.input} />
+          </Box>
+        </Box>
+      ))}
+    </Box>
+  )
+}

package/src/widgets-v2/range/style.ts

@@ -0,0 +1,41 @@
+import type { SxProps, Theme } from '@mui/material'
+
+export const styles = {
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 3,
+    py: 1,
+  },
+  item: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 1.5,
+  },
+  sliderContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 1,
+    px: 1,
+  },
+  slider: {
+    width: '100%',
+    '&.Mui-disabled': {
+      color: (theme: Theme) => theme.palette.text.disabled,
+    },
+  },
+  inputsRow: {
+    display: 'flex',
+    gap: 2,
+    alignItems: 'center',
+  },
+  input: {
+    flex: 1,
+    '& .MuiInputBase-input': {
+      textAlign: 'center',
+    },
+  },
+  note: {
+    color: 'text.secondary',
+  },
+} satisfies Record<string, SxProps<Theme>>

package/src/widgets-v2/range/types.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react'
+
+/**
+ * A single two-thumb range entry. Renders as an MUI `<Slider>` with editable
+ * `min` / `max` text inputs below, mirroring the Range v1 widget UX.
+ */
+export interface RangeDataItem {
+  /** Lower bound of the slider track. */
+  min: number
+  /** Upper bound of the slider track. */
+  max: number
+  /**
+   * Current selected range `[low, high]`. When omitted, defaults to
+   * `[min, max]` — i.e. the full track. The consumer owns this value and
+   * updates it in response to `onChange`.
+   */
+  value?: readonly [number, number]
+  /** Step granularity (default `1`). */
+  step?: number
+  /**
+   * Tick marks. Pass `true` to enable MUI's auto-marks (one per `step`); pass
+   * an array for explicit marks; omit for no marks.
+   */
+  marks?: boolean | readonly { value: number; label?: string }[]
+  /** Disable user interaction for this row (slider + inputs). */
+  disabled?: boolean
+  /** Override the slider's track / thumb colour (any CSS / MUI palette path). */
+  color?: string
+  /** Optional caption rendered below the inputs row. */
+  note?: ReactNode
+}
+
+/** Range widget data — one or more two-thumb entries rendered stacked. */
+export type RangeWidgetData = readonly RangeDataItem[]
+
+/** The shape `onChange` reports — always a `[low, high]` tuple. */
+export type RangeItemValue = readonly [number, number]

package/src/widgets-v2/scatterplot/download.test.ts

@@ -0,0 +1,71 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { createScatterplotDownloadConfig } from './download'
+import type { ScatterplotWidgetData } from './types'
+
+const data: ScatterplotWidgetData = [
+  [
+    [1, 10],
+    [2, 20],
+  ],
+  [[3, 30]],
+]
+
+let csvText = ''
+
+beforeEach(() => {
+  csvText = ''
+  vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:mock')
+  vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => undefined)
+  const RealBlob = global.Blob
+  vi.stubGlobal(
+    'Blob',
+    class extends RealBlob {
+      constructor(parts: BlobPart[], opts?: BlobPropertyBag) {
+        csvText = typeof parts[0] === 'string' ? parts[0] : ''
+        super(parts, opts)
+      }
+    },
+  )
+})
+
+describe('createScatterplotDownloadConfig', () => {
+  it('CSV-only by default', () => {
+    expect(
+      createScatterplotDownloadConfig({
+        filename: 's',
+        getData: () => data,
+      }).map((i) => i.id),
+    ).toEqual(['csv'])
+  })
+
+  it('prepends PNG when getCaptureEl is provided', () => {
+    const items = createScatterplotDownloadConfig({
+      filename: 's',
+      getData: () => data,
+      getCaptureEl: () => document.createElement('div'),
+    })
+    expect(items.map((i) => i.id)).toEqual(['png', 'csv'])
+  })
+
+  it('CSV resolve writes series × point rows with default names', async () => {
+    const items = createScatterplotDownloadConfig({
+      filename: 's',
+      getData: () => data,
+    })
+    const handle = await items.find((i) => i.id === 'csv')!.resolve()
+    expect(handle.filename).toBe('s.csv')
+    expect(csvText).toBe(
+      'series,x,y\nseries_1,1,10\nseries_1,2,20\nseries_2,3,30',
+    )
+  })
+
+  it('CSV honours supplied seriesNames', async () => {
+    const items = createScatterplotDownloadConfig({
+      filename: 's',
+      getData: () => data,
+      seriesNames: ['A', 'B'],
+    })
+    await items.find((i) => i.id === 'csv')!.resolve()
+    expect(csvText.split('\n')[1]).toBe('A,1,10')
+  })
+})

package/src/widgets-v2/scatterplot/download.ts

@@ -0,0 +1,54 @@
+import {
+  buildPngDownloadItem,
+  downloadToCSV,
+  type DownloadItem,
+} from '../actions/download'
+import type { ScatterplotWidgetData } from './types'
+
+/**
+ * Download menu items for the Scatterplot widget. Always includes a CSV
+ * item with `series, x, y` columns (one row per point). When
+ * `getCaptureEl` is supplied, prepends a PNG item that rasterises the
+ * captured element via `html2canvas`.
+ */
+export function createScatterplotDownloadConfig(args: {
+  filename: string
+  getData: () => ScatterplotWidgetData
+  seriesNames?: readonly string[]
+  getCaptureEl?: () => HTMLElement | null
+  pngPixelRatio?: number
+  pngBackgroundColor?: string | null
+}): DownloadItem[] {
+  const items: DownloadItem[] = []
+  if (args.getCaptureEl) {
+    items.push(
+      buildPngDownloadItem({
+        filename: args.filename,
+        getCaptureEl: args.getCaptureEl,
+        pixelRatio: args.pngPixelRatio,
+        backgroundColor: args.pngBackgroundColor,
+      }),
+    )
+  }
+  items.push({
+    id: 'csv',
+    label: 'Download as CSV',
+    resolve: () => {
+      const data = args.getData()
+      const rows: unknown[][] = [['series', 'x', 'y']]
+      for (const [i, series] of data.entries()) {
+        const seriesName = args.seriesNames?.[i] ?? `series_${i + 1}`
+        for (const [x, y] of series) {
+          rows.push([seriesName, x, y])
+        }
+      }
+      const handle = downloadToCSV(rows)
+      return Promise.resolve({
+        url: handle.url,
+        filename: `${args.filename}.csv`,
+        revoke: handle.revoke,
+      })
+    },
+  })
+  return items
+}

package/src/widgets-v2/scatterplot/index.ts

@@ -0,0 +1,11 @@
+export { scatterplotOptions, createScatterplotOptionFactory } from './options'
+export { ScatterplotSkeleton, type ScatterplotSkeletonProps } from './skeleton'
+export { createScatterplotDownloadConfig } from './download'
+export { toRelativeScatterplotData } from './transforms'
+export type {
+  ScatterplotDatum,
+  ScatterplotWidgetData,
+  ScatterplotOptionsInput,
+  ScatterplotOptionFactoryInput,
+  ScatterplotEChartsOption,
+} from './types'

package/src/widgets-v2/scatterplot/options.test.ts

@@ -0,0 +1,399 @@
+import { describe, it, expect } from 'vitest'
+import { createTheme, type Theme } from '@mui/material'
+import { createScatterplotOptionFactory, scatterplotOptions } from './options'
+
+const theme = createTheme() as unknown as Theme
+
+describe('scatterplotOptions (structural)', () => {
+  it('uses value axes on both x and y (not category)', () => {
+    const out = scatterplotOptions({ theme })
+    expect((out.xAxis as { type: string }).type).toBe('value')
+    expect((out.yAxis as { type: string }).type).toBe('value')
+  })
+
+  it('returns no series and no dataset (data-agnostic structural option)', () => {
+    const out = scatterplotOptions({ theme })
+    expect(out.series).toBeUndefined()
+    expect(out.dataset).toBeUndefined()
+  })
+
+  it("uses tooltip trigger 'item' (per-point), not 'axis'", () => {
+    const out = scatterplotOptions({ theme })
+    expect((out.tooltip as { trigger: string }).trigger).toBe('item')
+  })
+
+  it('wires a dark themed tooltip (grey[900] background, function position + formatter)', () => {
+    const out = scatterplotOptions({ theme })
+    const tooltip = out.tooltip as {
+      backgroundColor?: string
+      borderWidth?: number
+      textStyle?: { color?: string }
+      position?: unknown
+      formatter?: unknown
+    }
+    expect(tooltip.backgroundColor).toBe(theme.palette.grey[900])
+    expect(tooltip.borderWidth).toBe(0)
+    expect(tooltip.textStyle?.color).toBe(theme.palette.common.white)
+    expect(typeof tooltip.position).toBe('function')
+    expect(typeof tooltip.formatter).toBe('function')
+  })
+
+  it('passes xFormatter to x-axis label and yFormatter to y-axis label', () => {
+    const xFmt = (n: number): string => `x:${n}`
+    const yFmt = (n: number): string => `y:${n}`
+    const out = scatterplotOptions({
+      theme,
+      xFormatter: xFmt,
+      yFormatter: yFmt,
+    })
+    const xAxis = out.xAxis as { axisLabel?: { formatter?: unknown } }
+    const yAxis = out.yAxis as { axisLabel?: { formatter?: unknown } }
+    expect(xAxis.axisLabel?.formatter).toBe(xFmt)
+    expect(yAxis.axisLabel?.formatter).toBe(yFmt)
+  })
+
+  it('polishes both axes the same way (no axisLine, no axisTick, splitLine color set)', () => {
+    const out = scatterplotOptions({ theme })
+    const xAxis = out.xAxis as {
+      axisLine?: { show?: boolean }
+      axisTick?: { show?: boolean }
+      splitLine?: { lineStyle?: { color?: string } }
+    }
+    const yAxis = out.yAxis as {
+      axisLine?: { show?: boolean }
+      axisTick?: { show?: boolean }
+      splitLine?: { lineStyle?: { color?: string } }
+    }
+    expect(xAxis.axisLine?.show).toBe(false)
+    expect(xAxis.axisTick?.show).toBe(false)
+    expect(xAxis.splitLine?.lineStyle?.color).toBeDefined()
+    expect(yAxis.axisLine?.show).toBe(false)
+    expect(yAxis.axisTick?.show).toBe(false)
+    expect(yAxis.splitLine?.lineStyle?.color).toBeDefined()
+  })
+
+  it('wires a structural legend (show:false), toggled on by the merger for multi-series', () => {
+    const out = scatterplotOptions({ theme })
+    const legend = out.legend as { show?: boolean } | undefined
+    expect(legend).toBeDefined()
+    expect(legend?.show).toBe(false)
+  })
+
+  it('uses the qualitative.bold + secondary palette like bar/histogram/pie', () => {
+    const out = scatterplotOptions({ theme })
+    const colors = out.color as readonly string[]
+    expect(Array.isArray(colors)).toBe(true)
+    expect(colors[0]).toBe(theme.palette.secondary.main)
+  })
+
+  it('sets axisPointer.lineStyle.color from grey[400]', () => {
+    const out = scatterplotOptions({ theme })
+    const ap = out.axisPointer as { lineStyle?: { color?: string } } | undefined
+    expect(ap?.lineStyle?.color).toBe(theme.palette.grey[400])
+  })
+})
+
+describe('createScatterplotOptionFactory', () => {
+  it('builds one dataset per series with the data array as source', () => {
+    const merge = createScatterplotOptionFactory({ theme })
+    const data = [
+      [
+        [1, 2],
+        [3, 4],
+      ],
+    ] as const
+    const out = merge({}, data) as { dataset: { source: unknown[] }[] }
+    expect(out.dataset).toHaveLength(1)
+    expect(out.dataset[0]?.source).toBe(data[0])
+  })
+
+  it('uses positional encoding (x: 0, y: 1) and type=scatter, datasetIndex per series', () => {
+    const merge = createScatterplotOptionFactory({ theme })
+    const out = merge({}, [[[1, 2]], [[3, 4]]]) as {
+      series: {
+        type: string
+        datasetIndex: number
+        encode: { x: number; y: number }
+        symbolSize: number
+      }[]
+    }
+    expect(out.series[0]).toMatchObject({
+      type: 'scatter',
+      datasetIndex: 0,
+      encode: { x: 0, y: 1 },
+    })
+    expect(out.series[1]).toMatchObject({
+      type: 'scatter',
+      datasetIndex: 1,
+      encode: { x: 0, y: 1 },
+    })
+  })
+
+  it('uses default symbolSize=8', () => {
+    const merge = createScatterplotOptionFactory({ theme })
+    const out = merge({}, [[[1, 2]]]) as { series: { symbolSize: number }[] }
+    expect(out.series[0]?.symbolSize).toBe(8)
+  })
+
+  it('respects a custom symbolSize', () => {
+    const merge = createScatterplotOptionFactory({ theme, symbolSize: 14 })
+    const out = merge({}, [[[1, 2]]]) as { series: { symbolSize: number }[] }
+    expect(out.series[0]?.symbolSize).toBe(14)
+  })
+
+  it('toggles legend.show off for single-series, on for multi-series', () => {
+    const merge = createScatterplotOptionFactory({ theme })
+    const single = merge({}, [[[1, 2]]]) as { legend: { show: boolean } }
+    const multi = merge({}, [[[1, 2]], [[3, 4]]]) as {
+      legend: { show: boolean }
+    }
+    expect(single.legend.show).toBe(false)
+    expect(multi.legend.show).toBe(true)
+  })
+
+  it('uses seriesNames for series.name when provided', () => {
+    const merge = createScatterplotOptionFactory({
+      theme,
+      seriesNames: ['Group A', 'Group B'],
+    })
+    const out = merge({}, [[[1, 2]], [[3, 4]]]) as {
+      series: { name: string }[]
+    }
+    expect(out.series[0]?.name).toBe('Group A')
+    expect(out.series[1]?.name).toBe('Group B')
+  })
+
+  it('falls back to `Series N` naming when seriesNames is missing', () => {
+    const merge = createScatterplotOptionFactory({ theme })
+    const out = merge({}, [[[1, 2]], [[3, 4]]]) as {
+      series: { name: string }[]
+    }
+    expect(out.series[0]?.name).toBe('Series 1')
+    expect(out.series[1]?.name).toBe('Series 2')
+  })
+
+  it('emits emphasis.focus="series" on every series', () => {
+    const merge = createScatterplotOptionFactory({ theme })
+    const out = merge({}, [[[1, 2]], [[3, 4]]]) as {
+      series: { emphasis: { focus: string } }[]
+    }
+    expect(out.series[0]?.emphasis?.focus).toBe('series')
+    expect(out.series[1]?.emphasis?.focus).toBe('series')
+  })
+
+  it('frames the chart with niceNum-rounded x/y bounds (data: [[1,47],[2,3]] → max y=50)', () => {
+    const merge = createScatterplotOptionFactory({ theme })
+    const out = merge({}, [
+      [
+        [1, 47],
+        [2, 3],
+      ],
+    ]) as {
+      xAxis: { min: number; max: number }
+      yAxis: { min: number; max: number }
+    }
+    // niceNum(47) === 50, niceNum(2) === 2 (or rounded up to small nice
+    // number — both x.min and y.min clamp to 0 since data is non-negative).
+    expect(out.yAxis.max).toBe(50)
+    expect(out.xAxis.max).toBeGreaterThanOrEqual(2)
+    expect(out.xAxis.min).toBe(0)
+    expect(out.yAxis.min).toBe(0)
+  })
+
+  it('always emits itemStyle.color as a callback (passthrough when no selection)', () => {
+    const merge = createScatterplotOptionFactory({ theme })
+    const out = merge({}, [[[1, 2]]]) as {
+      series: { itemStyle: { color: unknown } }[]
+    }
+    expect(typeof out.series[0]?.itemStyle?.color).toBe('function')
+  })
+
+  it('keeps itemStyle.color callable when a selection is active (dim path)', () => {
+    const merge = createScatterplotOptionFactory({ theme, selection: ['0:0'] })
+    const out = merge({}, [
+      [
+        [1, 2],
+        [3, 4],
+      ],
+    ]) as {
+      series: { itemStyle: { color: unknown } }[]
+    }
+    expect(typeof out.series[0]?.itemStyle?.color).toBe('function')
+  })
+
+  it('returns empty dataset/series for empty data', () => {
+    const merge = createScatterplotOptionFactory({ theme })
+    const out = merge({}, []) as { dataset: unknown[]; series: unknown[] }
+    expect(out.dataset).toEqual([])
+    expect(out.series).toEqual([])
+  })
+
+  it('applies ctx.formatter to the y-axis label (RelativeData path)', () => {
+    const merge = createScatterplotOptionFactory({ theme })
+    const pct = (v: number) => `${v}%`
+    const out = merge({}, [[[1, 25]]], { formatter: pct }) as {
+      yAxis: { axisLabel: { formatter?: unknown } }
+    }
+    expect(out.yAxis.axisLabel.formatter).toBe(pct)
+  })
+
+  it('rebuilds the tooltip formatter when ctx.formatter is provided', () => {
+    const merge = createScatterplotOptionFactory({ theme })
+    const pct = (v: number) => `${v}%`
+    const out = merge(
+      { tooltip: { formatter: () => 'structural' } },
+      [[[1, 25]]],
+      { formatter: pct },
+    ) as { tooltip: { formatter: unknown } }
+    expect(typeof out.tooltip.formatter).toBe('function')
+    // Different identity from the structural formatter — the merger
+    // built a new closure that uses pct for y.
+    expect(out.tooltip.formatter).not.toBe(
+      ((arg: { tooltip: { formatter: unknown } }) => arg.tooltip.formatter)({
+        tooltip: { formatter: () => 'structural' },
+      }),
+    )
+  })
+
+  it('keeps the structural tooltip formatter when ctx.formatter is absent', () => {
+    const structural = () => 'structural'
+    const merge = createScatterplotOptionFactory({ theme })
+    const out = merge({ tooltip: { formatter: structural } }, [[[1, 25]]]) as {
+      tooltip: { formatter: unknown }
+    }
+    expect(out.tooltip.formatter).toBe(structural)
+  })
+
+  describe('tooltip formatters', () => {
+    type ItemFormatter = (
+      params: unknown,
+      ticket?: unknown,
+      callback?: unknown,
+    ) => string
+    const baseItem = {
+      seriesName: '2024',
+      marker: '<i></i>',
+      name: 'p1',
+      value: [3, 7] as [number, number],
+    } as const
+
+    it('structural formatter renders (x, y) using the structural formatters', () => {
+      const out = scatterplotOptions({
+        theme,
+        xFormatter: (n) => `x${n}`,
+        yFormatter: (n) => `y${n}`,
+      })
+      const fmt = (out.tooltip as { formatter: ItemFormatter }).formatter
+      const html = fmt(baseItem)
+      expect(html).toContain('x3')
+      expect(html).toContain('y7')
+    })
+
+    it('structural formatter falls back to String() when no x/y formatter is supplied', () => {
+      const out = scatterplotOptions({ theme })
+      const fmt = (out.tooltip as { formatter: ItemFormatter }).formatter
+      const html = fmt(baseItem)
+      expect(html).toContain('3')
+      expect(html).toContain('7')
+    })
+
+    it('reactive formatter applies ctx.formatter for y but keeps the structural xFormatter for x', () => {
+      const merge = createScatterplotOptionFactory({
+        theme,
+        xFormatter: (n) => `x${n}`,
+      })
+      const out = merge({}, [[[3, 7]]], {
+        formatter: (n) => `${n}%`,
+      }) as { tooltip: { formatter: ItemFormatter } }
+      const html = out.tooltip.formatter(baseItem)
+      expect(html).toContain('x3')
+      expect(html).toContain('7%')
+    })
+
+    it('reactive formatter renders empty x/y when the value tuple is missing', () => {
+      const merge = createScatterplotOptionFactory({ theme })
+      const out = merge({}, [[[3, 7]]], {
+        formatter: (n) => `${n}!`,
+      }) as { tooltip: { formatter: ItemFormatter } }
+      const html = out.tooltip.formatter({
+        ...baseItem,
+        value: undefined as unknown as [number, number],
+      })
+      // No numeric values to format, but the name template still emits the parens.
+      expect(html).toContain('(')
+    })
+  })
+
+  it('reserves grid.bottom for a dataZoom slider (ZoomToggle layout)', () => {
+    const merge = createScatterplotOptionFactory({ theme })
+    const baseline = merge({}, [[[1, 2]]]) as {
+      grid: { bottom: number }
+    }
+    const withZoom = merge(
+      { dataZoom: [{ type: 'inside' }, { type: 'slider' }] },
+      [[[1, 2]]],
+    ) as { grid: { bottom: number }; dataZoom: unknown[] }
+    expect(withZoom.dataZoom).toBeDefined()
+    expect(withZoom.grid.bottom).toBeGreaterThan(baseline.grid.bottom)
+  })
+
+  it('lifts the slider above the legend row when both are present', () => {
+    const merge = createScatterplotOptionFactory({ theme })
+    const out = merge({ dataZoom: [{ type: 'inside' }, { type: 'slider' }] }, [
+      [[1, 2]],
+      [[3, 4]],
+    ]) as {
+      dataZoom: ({ type: string; bottom?: number } | undefined)[]
+    }
+    const slider = out.dataZoom.find((dz) => dz?.type === 'slider')
+    expect(slider?.bottom).toBeDefined()
+    expect(typeof slider?.bottom).toBe('number')
+  })
+
+  it('reserves grid.right for a y-axis slider (2D zoom layout)', () => {
+    const merge = createScatterplotOptionFactory({ theme })
+    const baseline = merge({}, [[[1, 2]]]) as {
+      grid: { right: number }
+    }
+    const withYZoom = merge(
+      {
+        dataZoom: [
+          { type: 'inside', yAxisIndex: [0] },
+          { type: 'slider', yAxisIndex: [0] },
+        ],
+      },
+      [[[1, 2]]],
+    ) as { grid: { right: number; bottom: number }; dataZoom: unknown[] }
+    expect(withYZoom.grid.right).toBeGreaterThan(baseline.grid.right)
+  })
+
+  it('reserves grid.bottom AND grid.right when both x- and y-sliders are present', () => {
+    const merge = createScatterplotOptionFactory({ theme })
+    const out = merge(
+      {
+        dataZoom: [
+          { type: 'inside', xAxisIndex: [0] },
+          { type: 'inside', yAxisIndex: [0] },
+          { type: 'slider', xAxisIndex: [0] },
+          { type: 'slider', yAxisIndex: [0] },
+        ],
+      },
+      [[[1, 2]]],
+    ) as { grid: { right: number; bottom: number } }
+    expect(out.grid.bottom).toBeGreaterThan(24)
+    expect(out.grid.right).toBeGreaterThan(8)
+  })
+
+  it('does not reserve grid space for inside-only dataZoom (no sliders)', () => {
+    const merge = createScatterplotOptionFactory({ theme })
+    const baseline = merge({}, [[[1, 2]]]) as {
+      grid: { right: number; bottom: number }
+    }
+    const insideOnly = merge(
+      { dataZoom: [{ type: 'inside', xAxisIndex: [0] }] },
+      [[[1, 2]]],
+    ) as { grid: { right: number; bottom: number } }
+    expect(insideOnly.grid.bottom).toBe(baseline.grid.bottom)
+    expect(insideOnly.grid.right).toBe(baseline.grid.right)
+  })
+})