@carto/ps-react-ui 4.7.0 → 4.8.0

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

@@ -0,0 +1,585 @@
+import { describe, it, expect } from 'vitest'
+import { createTheme, type Theme } from '@mui/material'
+import { createPieOptionFactory, pieOptions } from './options'
+
+const theme = createTheme() as unknown as Theme
+
+describe('pieOptions (structural)', () => {
+  it('returns no dataset and no axes (pies are radial)', () => {
+    const out = pieOptions({ theme })
+    expect(out.dataset).toBeUndefined()
+    expect(out.xAxis).toBeUndefined()
+    expect(out.yAxis).toBeUndefined()
+  })
+
+  it('emits a pie series template with v1 defaults (template only — no data yet)', () => {
+    const out = pieOptions({ theme }) as {
+      series: {
+        type: string
+        colorBy: string
+        avoidLabelOverlap: boolean
+        selectedOffset: number
+        emphasis: { disabled: boolean }
+        itemStyle: { borderColor: string; borderWidth: number }
+        label: { show: boolean; position: string; rich: Record<string, object> }
+      }[]
+    }
+    const template = out.series[0]!
+    expect(template.type).toBe('pie')
+    expect(template.colorBy).toBe('data')
+    expect(template.avoidLabelOverlap).toBe(true)
+    expect(template.selectedOffset).toBe(0)
+    expect(template.emphasis.disabled).toBe(true)
+    expect(template.itemStyle.borderColor).toBe(theme.palette.background.paper)
+    expect(template.itemStyle.borderWidth).toBe(1)
+    expect(template.label.show).toBe(true)
+    expect(template.label.position).toBe('center')
+    // Rich tags `{c|…}` (value) and `{b|…}` (name) match v1.
+    expect(template.label.rich.c).toBeDefined()
+    expect(template.label.rich.b).toBeDefined()
+  })
+
+  it('configures the tooltip with item-trigger, a positioner, and a formatter function', () => {
+    const out = pieOptions({ theme })
+    const tooltip = out.tooltip as {
+      trigger: string
+      position?: unknown
+      formatter?: unknown
+    }
+    expect(tooltip.trigger).toBe('item')
+    expect(typeof tooltip.position).toBe('function')
+    expect(typeof tooltip.formatter).toBe('function')
+  })
+
+  it('matches bar/histogram tooltip styling (dark bg, white caption text, no border, padded)', () => {
+    const out = pieOptions({ theme })
+    const tooltip = out.tooltip as {
+      backgroundColor?: string
+      borderWidth?: number
+      padding?: unknown
+      textStyle?: { color?: string; fontSize?: number; fontFamily?: string }
+    }
+    expect(tooltip.backgroundColor).toBe(theme.palette.grey[900])
+    expect(tooltip.borderWidth).toBe(0)
+    expect(Array.isArray(tooltip.padding)).toBe(true)
+    expect(tooltip.textStyle?.color).toBe(theme.palette.common.white)
+    expect(tooltip.textStyle?.fontSize).toBe(11)
+    expect(tooltip.textStyle?.fontFamily).toBe(
+      theme.typography.caption.fontFamily,
+    )
+  })
+
+  it('emits the v1 qualitative.bold color palette (no secondary prefix)', () => {
+    // The Theme created by createTheme() here doesn't include a
+    // `qualitative.bold`, so we fall through to `Object.values({})` = [].
+    // Assert the shape — `color` is always an array (possibly empty).
+    const out = pieOptions({ theme }) as { color?: unknown }
+    expect(Array.isArray(out.color)).toBe(true)
+  })
+
+  it('uses the legend builder so legend.show stays a boolean we can toggle', () => {
+    const out = pieOptions({ theme }) as { legend?: { show?: boolean } }
+    // `buildLegendConfig({ hasLegend: true })` sets show=true; the merger
+    // re-emits it as { ...baseLegend, show: true } at fusion time.
+    expect(out.legend?.show).toBe(true)
+  })
+})
+
+describe('createPieOptionFactory — single-series (donut)', () => {
+  it('builds one dataset, source identity preserved', () => {
+    const merge = createPieOptionFactory({ theme })
+    const data = [
+      [
+        { name: 'A', value: 10 },
+        { name: 'B', value: 20 },
+      ],
+    ]
+    const out = merge({}, data) as { dataset: { source: object[] }[] }
+    expect(out.dataset).toHaveLength(1)
+    expect(out.dataset[0]?.source).toBe(data[0])
+  })
+
+  it('emits a single pie series with positional encoding by name / value', () => {
+    const merge = createPieOptionFactory({ theme })
+    const out = merge({}, [[{ name: 'A', value: 10 }]]) as {
+      series: {
+        type: string
+        datasetIndex: number
+        encode: { itemName: string; value: string }
+      }[]
+    }
+    expect(out.series[0]).toMatchObject({
+      type: 'pie',
+      datasetIndex: 0,
+      encode: { itemName: 'name', value: 'value' },
+    })
+  })
+
+  it('uses the v2 default donut radius `["58%", "74%"]` (shrunk vs. v1 to free vertical room for a wrappable bottom legend)', () => {
+    const merge = createPieOptionFactory({ theme })
+    const out = merge({}, [[{ name: 'A', value: 1 }]]) as {
+      series: { radius: string[] }[]
+    }
+    expect(out.series[0]?.radius).toEqual(['58%', '74%'])
+  })
+
+  it('respects a custom radius', () => {
+    const merge = createPieOptionFactory({ theme, radius: ['0%', '70%'] })
+    const out = merge({}, [[{ name: 'A', value: 1 }]]) as {
+      series: { radius: string[] }[]
+    }
+    expect(out.series[0]?.radius).toEqual(['0%', '70%'])
+  })
+
+  it('centers the donut at 50% horizontally', () => {
+    const merge = createPieOptionFactory({ theme })
+    const out = merge({}, [[{ name: 'A', value: 1 }]]) as {
+      series: { center: [string, string] }[]
+    }
+    expect(out.series[0]?.center[0]).toBe('50%')
+  })
+
+  it('keeps legend.show = true (mirrors v1)', () => {
+    const merge = createPieOptionFactory({ theme })
+    const single = merge({}, [[{ name: 'A', value: 1 }]]) as {
+      legend?: { show?: boolean }
+    }
+    expect(single.legend?.show).toBe(true)
+  })
+
+  it('uses seriesNames[0] for the single series name when provided', () => {
+    const merge = createPieOptionFactory({ theme, seriesNames: ['2024'] })
+    const out = merge({}, [[{ name: 'A', value: 1 }]]) as {
+      series: { name: string }[]
+    }
+    expect(out.series[0]?.name).toBe('2024')
+  })
+
+  it('returns empty dataset/series for empty data', () => {
+    const merge = createPieOptionFactory({ theme })
+    const out = merge({}, []) as { dataset: unknown[]; series: unknown[] }
+    expect(out.dataset).toEqual([])
+    expect(out.series).toEqual([])
+  })
+
+  it('spreads the structural pie series template into the per-data series', () => {
+    const merge = createPieOptionFactory({ theme })
+    const baseTemplate = {
+      type: 'pie' as const,
+      colorBy: 'data',
+      emphasis: { disabled: true },
+      itemStyle: { borderColor: '#FFF', borderWidth: 1 },
+      label: { show: true, position: 'center' },
+    }
+    const out = merge(
+      // ECharts' `SeriesOption` is a tagged-union over every series type
+      // and our local object literal trips its narrowing — the merger
+      // treats `option.series` as `unknown[]` internally anyway.
+      { series: [baseTemplate] as unknown as never },
+      [[{ name: 'A', value: 1 }]],
+    ) as {
+      series: {
+        colorBy?: string
+        emphasis?: { disabled?: boolean }
+        itemStyle?: { borderColor?: string; borderWidth?: number }
+        label?: { show?: boolean; position?: string }
+      }[]
+    }
+    expect(out.series[0]?.colorBy).toBe('data')
+    expect(out.series[0]?.emphasis?.disabled).toBe(true)
+    expect(out.series[0]?.itemStyle?.borderColor).toBe('#FFF')
+    expect(out.series[0]?.itemStyle?.borderWidth).toBe(1)
+    expect(out.series[0]?.label?.position).toBe('center')
+    expect(out.series[0]?.label?.show).toBe(true)
+  })
+
+  it('emits a center-label formatter function (resolves rich text per slice)', () => {
+    const merge = createPieOptionFactory({ theme })
+    const out = merge({}, [[{ name: 'A', value: 10 }]]) as {
+      series: { label: { formatter: unknown } }[]
+    }
+    expect(typeof out.series[0]?.label.formatter).toBe('function')
+  })
+
+  it('always emits an itemStyle.color callback, whether or not a selection is set', () => {
+    const noSel = createPieOptionFactory({ theme })({}, [
+      [{ name: 'A', value: 1 }],
+    ]) as { series: { itemStyle: { color?: unknown } }[] }
+    const withSel = createPieOptionFactory({ theme, selection: ['A'] })({}, [
+      [{ name: 'A', value: 1 }],
+    ]) as { series: { itemStyle: { color?: unknown } }[] }
+    expect(typeof noSel.series[0]?.itemStyle.color).toBe('function')
+    expect(typeof withSel.series[0]?.itemStyle.color).toBe('function')
+  })
+
+  it('itemStyle.color resolves per-data palette entries (preserves colorBy:data even with callback)', () => {
+    // Installing an `itemStyle.color` callback disables ECharts' automatic
+    // per-data palette cycling — `params.color` collapses to the series
+    // color. The callback re-implements palette resolution against
+    // `option.color[params.dataIndex % palette.length]` so each slice
+    // still gets its own swatch.
+    const merge = createPieOptionFactory({ theme })
+    const out = merge({ color: ['#AAA', '#BBB', '#CCC'] }, [
+      [
+        { name: 'A', value: 1 },
+        { name: 'B', value: 2 },
+        { name: 'C', value: 3 },
+      ],
+    ]) as {
+      series: {
+        itemStyle: {
+          color: (p: {
+            dataIndex: number
+            color: string
+            value: object
+            name: string
+          }) => string
+        }
+      }[]
+    }
+    const colorFn = out.series[0]!.itemStyle.color
+    // The series-level fallback color (used when palette is missing) is
+    // distinct from any palette entry so we can detect it.
+    const seriesColor = '#DEAD00'
+    expect(
+      colorFn({
+        dataIndex: 0,
+        color: seriesColor,
+        value: { name: 'A', value: 1 },
+        name: 'A',
+      }),
+    ).toBe('#AAA')
+    expect(
+      colorFn({
+        dataIndex: 1,
+        color: seriesColor,
+        value: { name: 'B', value: 2 },
+        name: 'B',
+      }),
+    ).toBe('#BBB')
+    expect(
+      colorFn({
+        dataIndex: 2,
+        color: seriesColor,
+        value: { name: 'C', value: 3 },
+        name: 'C',
+      }),
+    ).toBe('#CCC')
+    // Cycles when dataIndex >= palette.length.
+    expect(
+      colorFn({
+        dataIndex: 3,
+        color: seriesColor,
+        value: { name: 'D', value: 4 },
+        name: 'D',
+      }),
+    ).toBe('#AAA')
+  })
+
+  it('itemStyle.color falls back to params.color when no palette is on the option', () => {
+    const merge = createPieOptionFactory({ theme })
+    const out = merge({}, [[{ name: 'A', value: 1 }]]) as {
+      series: {
+        itemStyle: {
+          color: (p: {
+            dataIndex: number
+            color: string
+            value: object
+            name: string
+          }) => string
+        }
+      }[]
+    }
+    expect(
+      out.series[0]!.itemStyle.color({
+        dataIndex: 0,
+        color: '#FACADE',
+        value: { name: 'A', value: 1 },
+        name: 'A',
+      }),
+    ).toBe('#FACADE')
+  })
+
+  it('re-emits tooltip.formatter at fusion time so RelativeData (ctx.formatter) flows through', () => {
+    const merge = createPieOptionFactory({ theme })
+    const out = merge(
+      { tooltip: { trigger: 'item' } },
+      [[{ name: 'A', value: 1 }]],
+      { formatter: (n: number) => `${n}%` },
+    ) as { tooltip?: { formatter?: unknown; trigger?: string } }
+    expect(out.tooltip?.trigger).toBe('item')
+    expect(typeof out.tooltip?.formatter).toBe('function')
+  })
+
+  describe('donut tooltip formatter', () => {
+    type ItemFormatter = (
+      params: unknown,
+      ticket?: unknown,
+      callback?: unknown,
+    ) => string
+    const SINGLE = [
+      [
+        { name: 'A', value: 12 },
+        { name: 'B', value: 3 },
+      ],
+    ]
+    const getFormatter = (ctx?: {
+      formatter?: (n: number) => string
+      labelFormatter?: (v: string | number) => string | number
+    }): ItemFormatter => {
+      const factory = createPieOptionFactory({ theme })
+      const out = factory({}, SINGLE, ctx) as {
+        tooltip: { formatter: ItemFormatter }
+      }
+      return out.tooltip.formatter
+    }
+    const baseItem = {
+      seriesName: 'Sales',
+      name: 'A',
+      marker: '<i></i>',
+      encode: { value: [1] },
+      value: { name: 'A', value: 12 },
+    } as const
+
+    it('renders name + formatted value for a slice', () => {
+      const fmt = getFormatter({ formatter: (n) => `${n}!` })
+      const html = fmt(baseItem)
+      expect(html).toContain('A')
+      expect(html).toContain('12!')
+    })
+
+    it('falls back to the default encode index (1) when encode is missing', () => {
+      const fmt = getFormatter()
+      const html = fmt({ ...baseItem, encode: undefined })
+      expect(html).toContain('12')
+    })
+
+    it('passes the slice name through labelFormatter', () => {
+      const fmt = getFormatter({
+        labelFormatter: (v) => `((${String(v)}))`,
+      })
+      expect(fmt(baseItem)).toContain('((A))')
+    })
+
+    it('renders an empty value when item.value is array-shaped (defensive guard)', () => {
+      const fmt = getFormatter()
+      const html = fmt({
+        ...baseItem,
+        value: [1, 2, 3] as unknown as { name: string; value: number },
+      })
+      // No value emitted (defensive `[]` fallback), but the name still appears.
+      expect(html).toContain('A')
+    })
+  })
+})
+
+describe('createPieOptionFactory — multi-series fallback (horizontal bar)', () => {
+  const MULTI = [
+    [
+      { name: 'A', value: 47 },
+      { name: 'B', value: 3 },
+    ],
+    [
+      { name: 'A', value: 20 },
+      { name: 'B', value: 10 },
+    ],
+  ]
+
+  it('emits bar series for every input series (no pie when multi-series)', () => {
+    const merge = createPieOptionFactory({ theme })
+    const out = merge({}, MULTI) as {
+      series: { type: string; datasetIndex: number }[]
+    }
+    expect(out.series).toHaveLength(2)
+    expect(out.series[0]?.type).toBe('bar')
+    expect(out.series[1]?.type).toBe('bar')
+    expect(out.series[0]?.datasetIndex).toBe(0)
+    expect(out.series[1]?.datasetIndex).toBe(1)
+  })
+
+  it('uses a value xAxis with callable niceNum closures (matches v1)', () => {
+    const merge = createPieOptionFactory({ theme })
+    const out = merge({}, MULTI) as {
+      xAxis: { type: string; min?: unknown; max?: unknown }
+    }
+    expect(out.xAxis.type).toBe('value')
+    expect(typeof out.xAxis.min).toBe('function')
+    expect(typeof out.xAxis.max).toBe('function')
+  })
+
+  it('uses a category yAxis', () => {
+    const merge = createPieOptionFactory({ theme })
+    const out = merge({}, MULTI) as { yAxis: { type: string } }
+    expect(out.yAxis.type).toBe('category')
+  })
+
+  it('resolves nice bounds on the value (x) axis — 47 → niceNum(47) === 50', () => {
+    const merge = createPieOptionFactory({ theme })
+    const out = merge({}, MULTI) as {
+      xAxis: { min: () => number; max: () => number }
+    }
+    // The closures honor the closed-over fused bounds, so calling them
+    // returns the actual niceMin/niceMax we resolve once per fusion.
+    expect(out.xAxis.min()).toBe(0)
+    expect(out.xAxis.max()).toBe(50)
+  })
+
+  it('grid carries the v1 right margin (theme.spacing(4))', () => {
+    const merge = createPieOptionFactory({ theme })
+    const out = merge({}, MULTI) as { grid: { right: number } }
+    expect(out.grid.right).toBe(parseInt(theme.spacing(4)))
+  })
+
+  it('tooltip is re-emitted with trigger="axis" and a function formatter', () => {
+    const merge = createPieOptionFactory({ theme })
+    const out = merge(
+      { tooltip: { trigger: 'item', backgroundColor: '#000' } },
+      MULTI,
+    ) as {
+      tooltip: {
+        trigger: string
+        backgroundColor?: string
+        formatter?: unknown
+      }
+    }
+    expect(out.tooltip.trigger).toBe('axis')
+    // Dark styling from baseTooltip survives the spread.
+    expect(out.tooltip.backgroundColor).toBe('#000')
+    expect(typeof out.tooltip.formatter).toBe('function')
+  })
+
+  it('each series carries barMaxWidth=100 and emphasis.focus="series" (v1 parity)', () => {
+    const merge = createPieOptionFactory({ theme })
+    const out = merge({}, MULTI) as {
+      series: { barMaxWidth: number; emphasis: { focus: string } }[]
+    }
+    expect(out.series[0]?.barMaxWidth).toBe(100)
+    expect(out.series[0]?.emphasis.focus).toBe('series')
+    expect(out.series[1]?.barMaxWidth).toBe(100)
+    expect(out.series[1]?.emphasis.focus).toBe('series')
+  })
+
+  it('itemStyle.color resolves per-SERIES palette (multi-series bar, not per-data)', () => {
+    const merge = createPieOptionFactory({ theme })
+    const out = merge({ color: ['#AAA', '#BBB', '#CCC'] }, MULTI) as {
+      series: {
+        itemStyle: {
+          color: (p: {
+            seriesIndex: number
+            dataIndex: number
+            color: string
+            value: object
+            name: string
+          }) => string
+        }
+      }[]
+    }
+    const series0Color = out.series[0]!.itemStyle.color
+    const series1Color = out.series[1]!.itemStyle.color
+    // Every data point in series 0 → palette[0]; every data point in
+    // series 1 → palette[1] (one swatch per series, not per slice).
+    expect(
+      series0Color({
+        seriesIndex: 0,
+        dataIndex: 0,
+        color: '#000',
+        value: { name: 'A', value: 47 },
+        name: 'A',
+      }),
+    ).toBe('#AAA')
+    expect(
+      series0Color({
+        seriesIndex: 0,
+        dataIndex: 1,
+        color: '#000',
+        value: { name: 'B', value: 3 },
+        name: 'B',
+      }),
+    ).toBe('#AAA')
+    expect(
+      series1Color({
+        seriesIndex: 1,
+        dataIndex: 0,
+        color: '#000',
+        value: { name: 'A', value: 20 },
+        name: 'A',
+      }),
+    ).toBe('#BBB')
+  })
+
+  it('uses seriesNames for series.name when provided', () => {
+    const merge = createPieOptionFactory({
+      theme,
+      seriesNames: ['2024', '2025'],
+    })
+    const out = merge({}, MULTI) as { series: { name: string }[] }
+    expect(out.series[0]?.name).toBe('2024')
+    expect(out.series[1]?.name).toBe('2025')
+  })
+
+  it('keeps legend.show = true (the bar layout still surfaces series in the legend)', () => {
+    const merge = createPieOptionFactory({ theme })
+    const out = merge({}, MULTI) as { legend?: { show?: boolean } }
+    expect(out.legend?.show).toBe(true)
+  })
+
+  describe('horizontal-bar tooltip formatter', () => {
+    type AxisFormatter = (
+      params: unknown,
+      ticket?: unknown,
+      callback?: unknown,
+    ) => string
+    const baseItem = {
+      seriesName: '2024',
+      marker: '<i></i>',
+      name: 'A',
+      encode: { x: [1] },
+      dimensionNames: ['name', 'value'],
+      value: { name: 'A', value: 47 },
+    } as const
+
+    const getFormatter = (ctx?: {
+      formatter?: (n: number) => string
+      labelFormatter?: (v: string | number) => string | number
+    }): AxisFormatter => {
+      const factory = createPieOptionFactory({ theme })
+      const out = factory({}, MULTI, ctx) as {
+        tooltip: { formatter: AxisFormatter }
+      }
+      return out.tooltip.formatter
+    }
+
+    it('emits the value via the dimension index pulled from encode.x', () => {
+      const fmt = getFormatter()
+      const html = fmt([baseItem])
+      expect(html).toContain('A')
+      expect(html).toContain('47')
+    })
+
+    it('applies the ctx formatter to numeric values', () => {
+      const fmt = getFormatter({ formatter: (n) => `$${n}` })
+      expect(fmt([baseItem])).toContain('$47')
+    })
+
+    it('applies labelFormatter to the name', () => {
+      const fmt = getFormatter({
+        labelFormatter: (v) => `[${String(v).toUpperCase()}]`,
+      })
+      expect(fmt([baseItem])).toContain('[A]')
+    })
+
+    it('renders a blank value when encode is missing', () => {
+      const fmt = getFormatter()
+      const html = fmt([{ ...baseItem, encode: undefined }])
+      // The name still renders even when the value is absent.
+      expect(html).toContain('A')
+    })
+
+    it('renders a blank seriesName prefix when seriesName is empty', () => {
+      const fmt = getFormatter()
+      const html = fmt([{ ...baseItem, seriesName: '' }])
+      expect(html).not.toContain('2024')
+      expect(html).toContain('A')
+    })
+  })
+})