@carto/ps-react-ui 5.0.0-widgets.9 → 5.0.0

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

@@ -0,0 +1,611 @@
+import type { Theme } from '@mui/material'
+import type { EChartsOption } from 'echarts'
+import * as echarts from 'echarts'
+import type { CallbackDataParams } from 'echarts/types/dist/shared'
+import {
+  buildGridConfig,
+  buildLegendConfig,
+  buildSeriesLabelConfig,
+  createTooltipFormatter,
+  createTooltipPositioner,
+  niceNum,
+} from '../../widgets/utils/chart-config'
+import type { OptionFactory, OptionFactoryContext } from '../echart'
+import { mergeOptions, resolveThemeColor } from '../utils'
+import type { WidgetSeries } from '../types'
+import type {
+  PieEChartsOption,
+  PieOptionFactoryInput,
+  PieOptionsInput,
+  PieWidgetData,
+} from './types'
+
+const DEFAULT_RADIUS: readonly [string, string] = ['58%', '74%']
+
+/**
+ * Builds the **structural** ECharts option for a pie / donut widget.
+ * Mirrors v1's pie look-and-feel: themed legend (`buildLegendConfig`),
+ * themed tooltip via `createTooltipPositioner` / `createTooltipFormatter`,
+ * `qualitative.bold` color palette, slice borders against the paper
+ * background, hover-emphasis disabled, and a centered rich-text label.
+ *
+ * Layered like Bar / Histogram:
+ *   - **Theme-aware bits** live here on a series template (slice border,
+ *     center-label rich style sizes, emphasis-disabled).
+ *   - **Reactive bits** (tooltip value formatter, center-label text,
+ *     selection-driven dim) are re-emitted by
+ *     {@link createPieOptionFactory} at fusion time so RelativeData's
+ *     percent override flows through.
+ */
+export function pieOptions({
+  theme,
+  formatter,
+  labelFormatter,
+}: PieOptionsInput): PieEChartsOption {
+  return {
+    legend: {
+      ...buildLegendConfig({ hasLegend: true, labelFormatter }),
+      // Pie reads better with a centered legend (the donut is radially
+      // symmetric — left-aligning the legend below it visually unbalances
+      // the chart). Override `buildLegendConfig`'s `type: 'scroll'` with
+      // `'plain'` so long category lists wrap to multiple rows instead
+      // of clipping the last visible item against the chart container.
+      // The wider `itemGap` gives chips breathing room in the typical
+      // 3–6 category case.
+      left: 'center',
+      type: 'scroll',
+      itemGap: 16,
+      // The legend is presentational only here — the pie has its own
+      // click-to-select affordance on the slices themselves, so legend
+      // clicks toggling series visibility would be a second, redundant/
+      // conflicting interaction model. Hover-highlight is disabled per
+      // series via `legendHoverLink` (ECharts has no legend-level knob
+      // for it).
+      selectedMode: false,
+    },
+    tooltip: {
+      // Pie uses item-trigger (no axis); the rest of the styling mirrors
+      // bar/histogram so the dashboard reads consistently — dark
+      // grey[900] bg, white caption-font text, padded, with the shared
+      // overflow-aware positioner.
+      trigger: 'item',
+      backgroundColor: theme.palette.grey[900],
+      borderWidth: 0,
+      padding: [parseInt(theme.spacing(1)), parseInt(theme.spacing(1))],
+      textStyle: {
+        color: theme.palette.common.white,
+        fontSize: 11,
+        fontFamily: theme.typography.caption.fontFamily,
+      },
+      position: createTooltipPositioner(theme),
+      formatter: buildPieTooltipFormatter(formatter, labelFormatter),
+    },
+    // V1 used `qualitative.bold` only (no `secondary.main` prefix) because
+    // pie slices are categorical — each slice deserves a distinct palette
+    // entry from the start, not a primary highlight.
+    color: Object.values(
+      (theme.palette as { qualitative?: { bold?: Record<string, string> } })
+        .qualitative?.bold ?? {},
+    ),
+    // Pie template. The merger spreads this into each per-data series it
+    // emits — borderColor / borderWidth / emphasis-disabled / label rich
+    // sizes all survive through.
+    series: [
+      {
+        type: 'pie',
+        colorBy: 'data',
+        avoidLabelOverlap: true,
+        selectedOffset: 0,
+        legendHoverLink: false,
+        emphasis: { disabled: true },
+        itemStyle: {
+          borderColor: theme.palette.background.paper,
+          borderWidth: 1,
+        },
+        label: {
+          show: true,
+          position: 'center',
+          rich: {
+            b: { fontSize: 16, fontWeight: 'normal', lineHeight: 20 },
+            c: { fontSize: 28, fontWeight: 'bold', lineHeight: 27 },
+          },
+        },
+      },
+    ],
+  }
+}
+
+/**
+ * Returns the pie widget's {@link OptionFactory} — one closure that owns
+ * BOTH phases of option construction:
+ *
+ *   - **Structural phase** (`option == null`) — builds the theme-aware
+ *     structural option via {@link pieOptions}, optionally merging the
+ *     consumer-supplied `optionsOverride` on top. Called once by Provider
+ *     to seed `rawOptions` in the store.
+ *   - **Merge phase** (`option != null`) — fuses post-pipeline `state.data`
+ *     (`PieWidgetData`) into the option via the dataset API. Single-series
+ *     → donut (one dataset, `series[i].encode = { itemName: 'name', value: 'value' }`).
+ *     Multi-series → horizontal-bar fallback (mirrors v1 pie). Reactive
+ *     formatters from `ctx` drive the tooltip + center label at fusion
+ *     time so RelativeData's percent formatter flows through without a
+ *     structural rebuild.
+ */
+export function createPieOptionFactory(
+  options: PieOptionFactoryInput,
+): OptionFactory {
+  const { theme, formatter, labelFormatter, optionsOverride, series } = options
+  const radius = options.radius ?? DEFAULT_RADIUS
+  const selection = options.selection
+  // An explicit `[]` (deselected down to zero via chart clicks) is treated
+  // the same as no selection: the pie has no bar/histogram-style "nothing
+  // selected" affordance, so dimming every slice would just look broken —
+  // it renders fully active, same as the no-interaction state.
+  const selectionSet =
+    selection === undefined || selection === null || selection.length === 0
+      ? null
+      : new Set<string | number>(selection)
+  return (option, data, ctx) => {
+    if (option == null) {
+      const structural = pieOptions({ theme, formatter, labelFormatter })
+      return optionsOverride
+        ? (mergeOptions(
+            structural as unknown as Record<string, unknown>,
+            optionsOverride as Partial<Record<string, unknown>>,
+          ) as EChartsOption)
+        : structural
+    }
+
+    const seriesArr = Array.isArray(data) ? (data as PieWidgetData) : []
+    if (seriesArr.length === 0) {
+      return { ...option, dataset: [], series: [] }
+    }
+    if (seriesArr.length > 1) {
+      return buildMultiSeriesBarFusion(
+        option,
+        seriesArr,
+        theme,
+        series,
+        ctx,
+        selectionSet,
+      )
+    }
+    return buildSingleSeriesPieFusion(
+      option,
+      seriesArr,
+      radius,
+      series,
+      ctx,
+      selectionSet,
+    )
+  }
+}
+
+/**
+ * Single-series donut fusion. Spreads the structural pie series template
+ * into per-data series with center/radius/encoding, wires the reactive
+ * center-label / tooltip formatters and the per-data palette-aware
+ * selection-dim callback.
+ */
+function buildSingleSeriesPieFusion(
+  option: EChartsOption,
+  seriesArr: PieWidgetData,
+  radius: readonly [string, string],
+  series: readonly WidgetSeries[] | undefined,
+  ctx: OptionFactoryContext | undefined,
+  selectionSet: Set<string | number> | null,
+): EChartsOption {
+  const seriesTemplates = Array.isArray(option.series) ? option.series : []
+  const broadcastTemplate = seriesTemplates[0] ?? {}
+  const baseTooltip =
+    typeof option.tooltip === 'object' && !Array.isArray(option.tooltip)
+      ? option.tooltip
+      : {}
+  const baseLegend =
+    typeof option.legend === 'object' && !Array.isArray(option.legend)
+      ? option.legend
+      : {}
+  const formatter = ctx?.formatter
+  const labelFormatter = ctx?.labelFormatter
+
+  // Pie wants `colorBy: 'data'` — each slice draws from the option's
+  // `color` palette by data index. But installing an `itemStyle.color`
+  // callback disables ECharts' automatic per-data cycling, and
+  // `params.color` collapses to the series color (so every slice goes
+  // the same color). We re-implement the per-data palette resolution
+  // here so the multicolor look survives selection-driven dimming.
+  const palette = Array.isArray(option.color)
+    ? (option.color as readonly (string | undefined)[])
+    : []
+  const resolvePaletteColor = (params: CallbackDataParams): string => {
+    const swatch =
+      palette.length > 0
+        ? palette[params.dataIndex % palette.length]
+        : undefined
+    return swatch ?? (params.color as string)
+  }
+
+  // Always emit `itemStyle.color` (passthrough when nothing is selected),
+  // not conditionally — same anti-stale-callback rationale as bar /
+  // histogram. The slice border + width come from the structural
+  // template's `itemStyle` and survive via the spread below.
+  //
+  // `selectionSet` is the *included* set, same direct semantics as
+  // bar/histogram/timeseries (no ADR-014 exclusion inversion). Dim a slice
+  // when its name is NOT in the set. `selectionSet` is never a non-null
+  // empty Set — the collapse above (`selection.length === 0 → null`) rules
+  // that out — so there's no "dim everything" case here, unlike a widget
+  // that gives `[]` its own "selected down to nothing" meaning.
+  const colorFn = (params: CallbackDataParams): string => {
+    const base = resolvePaletteColor(params)
+    if (!selectionSet) return base
+    const datum = params.value as { name?: string | number } | undefined
+    const name = datum?.name ?? params.name
+    return name != null && selectionSet.has(name)
+      ? base
+      : echarts.color.modifyAlpha(base, 0.15)
+  }
+
+  // ECharts anchors EVERY slice's `position: 'center'` label at the same
+  // point, so at most one of them can ever be legible — the donut design
+  // leans into that (one KPI inside the ring) and picks a single slice
+  // below. A consumer that moves the labels off the centre gives each
+  // slice its own anchor (`'outside'` with leader lines is what the PDF
+  // export uses, `'inside'` / `'insideTop'` … likewise), and there the
+  // single-label rule is simply wrong: every slice must render its own
+  // label. Read the position off the structural template, which already
+  // carries the consumer's `optionsOverride`.
+  const templateLabelPosition = (
+    broadcastTemplate as { label?: { position?: unknown } }
+  ).label?.position
+  const isCenterLabel =
+    templateLabelPosition === undefined || templateLabelPosition === 'center'
+
+  // Which slice renders the centre value+name: the greatest value among
+  // the *included* slices (all of them when there's no active
+  // selection), computed locally — no query round-trip. Only that one
+  // slice's formatter call returns text; every other slice returns ''
+  // so exactly one label ever renders at the shared centre anchor. Only
+  // `typeof value === 'number'` participates — if every included slice's
+  // value is non-numeric, `centerMaxName` stays `undefined` and no slice
+  // matches it in `labelTextFormatter` below, so the chart renders with no
+  // centre label at all (graceful no-op, not a crash). Skipped entirely
+  // for off-centre labels, where every slice labels itself.
+  const centerData = seriesArr[0] ?? []
+  let centerMaxName: string | number | undefined
+  let centerMaxValue = -Infinity
+  for (const d of centerData) {
+    if (selectionSet && !selectionSet.has(d.name)) continue
+    if (typeof d.value === 'number' && d.value > centerMaxValue) {
+      centerMaxValue = d.value
+      centerMaxName = d.name
+    }
+  }
+
+  // Slice label formatter — lives in the merger because it reads
+  // reactive `formatter` / `labelFormatter` from ctx. The rich tags
+  // `{c|…}` and `{b|…}` reference the rich styles baked into the
+  // structural label template.
+  const labelTextFormatter = (params: CallbackDataParams): string => {
+    const { name } = params
+    if (name == null) return ''
+    if (isCenterLabel && name !== centerMaxName) return ''
+    const encodeIndex = params.encode?.value?.[0]
+    if (encodeIndex === undefined) return ''
+    const value = (Object.values(params.data ?? {}) as unknown[]).at(
+      encodeIndex,
+    )
+    // `value` here is the resolved dataset cell — for pie data it's a
+    // `string | number` primitive. Anything else is a misuse we won't
+    // dress up with `String(...)` (would render "[object Object]").
+    const formattedValue =
+      typeof value === 'number'
+        ? formatter
+          ? formatter(value)
+          : String(value)
+        : typeof value === 'string'
+          ? value
+          : ''
+    const formattedName = labelFormatter
+      ? String(labelFormatter(name ?? ''))
+      : String(name ?? '')
+    // The blank line is what separates the big centre KPI from its
+    // caption. Off-centre labels sit next to their own slice and are
+    // laid out against their neighbours, so the spacer only inflates
+    // each label's bounding box — enough, with a hidden `{b|…}` block,
+    // to make ECharts drop colliding labels altogether.
+    const separator = isCenterLabel ? '\n\n' : '\n'
+    return `{c|${formattedValue}}${separator}{b|${formattedName}}`
+  }
+
+  return {
+    ...option,
+    dataset: seriesArr.map((s) => ({ source: s as readonly object[] })),
+    series: seriesArr.map((_, i) => {
+      const template =
+        (seriesTemplates[i] as object | undefined) ??
+        (broadcastTemplate as object)
+      const templateObj = typeof template === 'object' ? template : {}
+      const templateLabel = (templateObj as { label?: object }).label ?? {}
+      const templateItemStyle =
+        (templateObj as { itemStyle?: object }).itemStyle ?? {}
+      return {
+        ...templateObj,
+        type: 'pie' as const,
+        legendHoverLink: false,
+        datasetIndex: i,
+        name: series?.[i]?.name ?? `Series ${i + 1}`,
+        radius: [...radius],
+        // Lift the donut up so the bottom-anchored legend has the
+        // vertical real estate to wrap to multiple rows for long
+        // category lists — at exactly `50%` the bottom slices crowd
+        // the chips and `type: 'plain'` legends can't expand upward
+        // without overlapping the donut.
+        center: ['50%', '38%'] as [string, string],
+        encode: { itemName: 'name', value: 'value' },
+        label: {
+          ...templateLabel,
+          formatter: labelTextFormatter,
+        },
+        itemStyle: {
+          ...templateItemStyle,
+          color: colorFn,
+        },
+      }
+    }),
+    // Legend always shows for pie (mirrors v1) — slice names drive the
+    // entries, so even a single donut benefits from a category list.
+    //
+    // Exclusion is conveyed purely via `colorFn`/`labelTextFormatter`
+    // dimming above, never via the legend's `selected` map: for a pie
+    // series, ECharts treats `legend.selected[name] = false` as "remove
+    // this data point," which recomputes every remaining slice's angle —
+    // the excluded slice disappears instead of rendering dimmed. Forcing
+    // every name to `true` on every render also overrides ECharts' own
+    // internal toggle state from a native legend click (which flips a
+    // name to `false` and hides it before our `legendselectchanged`
+    // handler gets a chance to react), so a legend click never leaves a
+    // slice structurally removed — only the color/label dimming reflects
+    // exclusion, and it stays in sync with the slice itself since both
+    // read `selectionSet` on the same render.
+    legend: {
+      ...baseLegend,
+      show: true,
+      selectedMode: false,
+      selected: Object.fromEntries(
+        (seriesArr[0] ?? []).map((d) => [String(d.name), true]),
+      ),
+    },
+    tooltip: {
+      ...baseTooltip,
+      formatter: buildPieTooltipFormatter(formatter, labelFormatter),
+    },
+  }
+}
+
+/**
+ * Multi-series horizontal-bar fusion. Mirrors v1 pie's "pie data with
+ * >1 series collapses into a horizontal bar chart" behavior — side-by-
+ * side donuts don't read well when you're comparing the same categories
+ * across cohorts, so swap to a value-on-x / category-on-y bar layout.
+ *
+ * Pie data shape is identical to bar's (`{ name, value }[][]`), so the
+ * same dataset feeds either layout without transformation.
+ */
+function buildMultiSeriesBarFusion(
+  option: EChartsOption,
+  seriesArr: PieWidgetData,
+  theme: Theme,
+  series: readonly WidgetSeries[] | undefined,
+  ctx: OptionFactoryContext | undefined,
+  selectionSet: Set<string | number> | null,
+): EChartsOption {
+  const baseTooltip =
+    typeof option.tooltip === 'object' && !Array.isArray(option.tooltip)
+      ? option.tooltip
+      : {}
+  const baseLegend =
+    typeof option.legend === 'object' && !Array.isArray(option.legend)
+      ? option.legend
+      : {}
+  const baseGrid =
+    typeof option.grid === 'object' && !Array.isArray(option.grid)
+      ? option.grid
+      : {}
+  const formatter = ctx?.formatter
+  const labelFormatter = ctx?.labelFormatter
+
+  const { niceMinVal, niceMaxVal } = computeNiceBounds(seriesArr)
+
+  // Per-series palette — multi-series bars take one color per series
+  // (not per-data, unlike donut slices). Same anti-stale-callback rule:
+  // always emit the callback so a transition to/from a selection
+  // replaces the previous closure cleanly.
+  const palette = Array.isArray(option.color)
+    ? (option.color as readonly (string | undefined)[])
+    : []
+  const barColorFn = (params: CallbackDataParams): string => {
+    const seriesIdx = params.seriesIndex ?? 0
+    const seriesSwatch =
+      palette.length > 0 ? palette[seriesIdx % palette.length] : undefined
+    const base = (seriesSwatch ?? params.color) as string
+    if (!selectionSet) return base
+    const datum = params.value as { name?: string | number } | undefined
+    const name = datum?.name ?? params.name
+    return name != null && selectionSet.has(name)
+      ? base
+      : echarts.color.modifyAlpha(base, 0.15)
+  }
+
+  return {
+    ...option,
+    dataset: seriesArr.map((s) => ({ source: s as readonly object[] })),
+    grid: {
+      ...baseGrid,
+      ...buildGridConfig(true, theme),
+      right: parseInt(theme.spacing(4)),
+      containLabel: true,
+    },
+    // Drop pie-specific structural keys that shouldn't render in the
+    // bar fallback. ECharts ignores undefined keys, so this is a clean
+    // override.
+    series: seriesArr.map((_, i) => {
+      const overrideColor = resolveThemeColor(theme, series?.[i]?.color)
+      return {
+        datasetIndex: i,
+        type: 'bar' as const,
+        name: series?.[i]?.name ?? `Series ${i + 1}`,
+        barMaxWidth: 100,
+        legendHoverLink: false,
+        emphasis: { focus: 'series' },
+        ...buildSeriesLabelConfig(formatter, 'x'),
+        itemStyle: { color: barColorFn },
+        ...(overrideColor ? { color: overrideColor } : {}),
+      }
+    }),
+    xAxis: {
+      type: 'value',
+      // Closures over the pre-computed nice bounds — ECharts calls them
+      // once per render to resolve the axis extents.
+      min: () => niceMinVal,
+      max: () => niceMaxVal,
+      axisLine: { show: false },
+      axisTick: { show: false },
+      splitLine: {
+        show: true,
+        lineStyle: { color: theme.palette.black?.[4] ?? theme.palette.divider },
+      },
+      // Value labels render BELOW the axis line (default placement),
+      // NOT inside the plot. Bar/histogram use `inside: true` +
+      // `verticalAlign: 'bottom'` for their *vertical* y-axis where the
+      // axis is the left wall — labels inside read like grid annotations.
+      // A horizontal bar chart's value axis is the x-axis, and `inside`
+      // there pushes the max label *behind* the bar (it visually
+      // disappears once a bar reaches the right edge). Use the default
+      // below-the-axis placement so the rounded extents stay readable.
+      axisLabel: {
+        fontSize: theme.typography.overlineDelicate?.fontSize,
+        fontFamily: theme.typography.overlineDelicate?.fontFamily,
+        margin: parseInt(theme.spacing(1)),
+        showMaxLabel: true,
+        showMinLabel: true,
+        formatter: (value: number) => {
+          if (value !== niceMaxVal && value !== niceMinVal) return ''
+          if (value === 0) return ''
+          return formatter ? formatter(value) : String(value)
+        },
+      },
+    },
+    yAxis: {
+      type: 'category',
+      axisLine: { show: false },
+      axisTick: { show: false },
+      axisLabel: {
+        padding: [parseInt(theme.spacing(0.5)), 0, 0, 0],
+        ...(labelFormatter && {
+          formatter: (value: string | number) => String(labelFormatter(value)),
+        }),
+      },
+    },
+    // Mirrors the donut branch's `selected` reset above — `selectedMode:
+    // false` blocks the native legend click that would otherwise undo an
+    // ECharts-internal toggle, so without forcing every entry back to
+    // `true` here a prior native toggle (from before `selectedMode` took
+    // effect, or a stale `keepAlive` instance) would stay hidden forever
+    // with no way to restore it.
+    legend: {
+      ...baseLegend,
+      show: true,
+      selectedMode: false,
+      selected: Object.fromEntries(
+        seriesArr.map((_, i) => [series?.[i]?.name ?? `Series ${i + 1}`, true]),
+      ),
+    },
+    tooltip: {
+      ...baseTooltip,
+      trigger: 'axis',
+      formatter: buildHorizontalBarTooltipFormatter(formatter, labelFormatter),
+    },
+  } as EChartsOption
+}
+
+/**
+ * Tooltip formatter for the horizontal-bar fallback. Reads the value by
+ * `encode.x` dimension index (v1 parity) so it stays robust to
+ * downstream changes that rename dataset columns.
+ */
+function buildHorizontalBarTooltipFormatter(
+  formatter: ((value: number) => string) | undefined,
+  labelFormatter: ((value: string | number) => string | number) | undefined,
+) {
+  return createTooltipFormatter((item) => {
+    const encodeIndex = item.encode?.x?.at(0)
+    const dimName =
+      encodeIndex !== undefined ? item.dimensionNames?.[encodeIndex] : undefined
+    const row =
+      item.value && typeof item.value === 'object' && !Array.isArray(item.value)
+        ? (item.value as Record<string, string | number>)
+        : undefined
+    const raw = dimName && row ? row[dimName] : undefined
+    const formattedValue =
+      typeof raw === 'number' && formatter ? formatter(raw) : (raw ?? '')
+    const marker = typeof item.marker === 'string' ? item.marker : ''
+    const seriesName = item.seriesName ? `${item.seriesName}: ` : ''
+    const name = labelFormatter
+      ? String(labelFormatter(item.name ?? ''))
+      : String(item.name ?? '')
+    return { name, seriesName, marker, value: formattedValue }
+  })
+}
+
+/**
+ * Min/max bounds over every datum's `.value` across all series. Used by
+ * the horizontal-bar fallback's x-axis label formatter so we only render
+ * labels at the rounded extents (matches v1 + bar / histogram).
+ */
+function computeNiceBounds(seriesArr: PieWidgetData): {
+  niceMinVal: number
+  niceMaxVal: number
+} {
+  let min = 0
+  let max = -Infinity
+  for (const series of seriesArr) {
+    for (const d of series) {
+      if (typeof d?.value !== 'number' || !Number.isFinite(d.value)) continue
+      if (d.value < min) min = d.value
+      if (d.value > max) max = d.value
+    }
+  }
+  return {
+    niceMinVal: min < 0 ? niceNum(min) : 0,
+    niceMaxVal: max <= 0 ? 1 : niceNum(max),
+  }
+}
+
+/**
+ * Tooltip formatter for pie slices. `item.value` is the dataset row
+ * object (e.g. `{ name: 'A', value: 10 }`); we pull the value by
+ * `encode.value`'s dimension index, formatted via the reactive `formatter`
+ * if present. Slice name passes through `labelFormatter`.
+ */
+function buildPieTooltipFormatter(
+  formatter: ((value: number) => string) | undefined,
+  labelFormatter: ((value: string | number) => string | number) | undefined,
+) {
+  return createTooltipFormatter((item) => {
+    const encodeIndex = item.encode?.value?.at(0) ?? 1
+    const values =
+      item.value && typeof item.value === 'object' && !Array.isArray(item.value)
+        ? (Object.values(item.value) as (string | number)[])
+        : []
+    const raw = values[encodeIndex]
+    const formattedValue =
+      typeof raw === 'number' && formatter ? formatter(raw) : (raw ?? '')
+    const marker = typeof item.marker === 'string' ? item.marker : ''
+    const seriesName = item.seriesName ? `${item.seriesName}: ` : ''
+    const name = labelFormatter
+      ? String(labelFormatter(item.name ?? ''))
+      : String(item.name ?? '')
+    return { name, seriesName, marker, value: formattedValue }
+  })
+}

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

@@ -0,0 +1,20 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/react'
+import { PieSkeleton } from './skeleton'
+
+describe('<PieSkeleton>', () => {
+  it('renders the default single-donut skeleton', () => {
+    const { container } = render(<PieSkeleton />)
+    expect(
+      container.querySelectorAll('.MuiSkeleton-root').length,
+    ).toBeGreaterThan(0)
+  })
+
+  it('accepts count but always renders a single donut', () => {
+    const single = render(<PieSkeleton count={1} />)
+    const many = render(<PieSkeleton count={3} />)
+    const skeletonCount = (c: HTMLElement) =>
+      c.querySelectorAll('.MuiSkeleton-root').length
+    expect(skeletonCount(many.container)).toBe(skeletonCount(single.container))
+  })
+})