@carto/ps-react-ui 5.3.0 → 6.1.0

package/src/widgets/pie/config.ts

@@ -1,245 +0,0 @@
-import {
-  getCommonOptions,
-  mergeEchartWidgetConfig,
-  type EchartOptionsProps,
-} from '../echart'
-import type { PieConfig, PieWidgetConfig, PieWidgetData } from './types'
-import {
-  buildGridConfig,
-  buildLegendConfig,
-  flattenObjectArrayToCSV,
-  createTooltipPositioner,
-  createTooltipFormatter,
-  createChartDownloadConfig,
-  niceNum,
-  buildSeriesLabelConfig,
-} from '../utils/chart-config'
-
-export const pieDownloadConfig = createChartDownloadConfig<PieWidgetData>(
-  flattenObjectArrayToCSV,
-)
-
-/**
- * Generates ECharts configuration for pie and donut chart widgets. Falls back to a horizontal bar layout when multiple data series are provided.
- *
- * @param props - Pie chart configuration including data and theme.
- * @returns Widget config with ECharts option object.
- */
-export function pieConfig(props: PieConfig): PieWidgetConfig {
-  return {
-    type: 'pie',
-    option: mergeEchartWidgetConfig(getCommonOptions(props), getOption(props)),
-    formatter: props.formatter,
-    labelFormatter: props.labelFormatter,
-  }
-}
-
-function getOption({
-  data = [],
-  theme,
-  formatter,
-  labelFormatter,
-}: PieConfig): EchartOptionsProps {
-  const multiSeries = (data?.length ?? 0) > 1
-
-  if (multiSeries) {
-    let niceMin = 0
-    let niceMax = 1
-
-    return {
-      legend: buildLegendConfig({ hasLegend: true, labelFormatter }),
-      grid: {
-        ...buildGridConfig(true, theme),
-        right: parseInt(theme.spacing(4)),
-      },
-      xAxis: {
-        type: 'value',
-        min: (extent: { min: number }) => {
-          niceMin = extent.min < 0 ? niceNum(extent.min) : 0
-          return niceMin
-        },
-        max: (extent: { min: number; max: number }) => {
-          niceMax = extent.max <= 0 ? 1 : niceNum(extent.max)
-          return niceMax
-        },
-        axisLabel: {
-          fontSize: theme.typography.overlineDelicate.fontSize,
-          fontFamily: theme.typography.overlineDelicate.fontFamily,
-          margin: parseInt(theme.spacing(1)),
-          show: true,
-          showMaxLabel: true,
-          showMinLabel: true,
-          verticalAlign: 'bottom' as const,
-          inside: true,
-          formatter: (value: number) => {
-            if (value !== niceMax && value !== niceMin) return ''
-            if (value === 0) return ''
-            return formatter ? formatter(value) : String(value)
-          },
-        },
-        axisLine: {
-          show: false,
-        },
-        axisTick: {
-          show: false,
-        },
-        splitLine: {
-          show: true,
-          lineStyle: {
-            color: theme.palette.black[4],
-          },
-        },
-      },
-      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)),
-          }),
-        },
-      },
-      tooltip: {
-        position: createTooltipPositioner(theme),
-        formatter: createTooltipFormatter((item) => {
-          const value = item.value as Record<string, string | number>
-          const index = item.dimensionNames?.[item.encode?.x?.at(0) ?? 1]
-          const _value = value[index ?? '']
-
-          const formattedValue =
-            typeof _value === 'number' && formatter
-              ? formatter(_value)
-              : (_value ?? '')
-
-          const marker = typeof item.marker === 'string' ? item.marker : ''
-          const seriesName = item.seriesName ? `${item.seriesName}: ` : ''
-          const name = labelFormatter
-            ? String(labelFormatter(item.name ?? ''))
-            : (item.name ?? '')
-
-          return { name, seriesName, marker, value: formattedValue }
-        }),
-      },
-      series: data.map((_: unknown, index: number) => ({
-        datasetIndex: index,
-        type: 'bar',
-        barMaxWidth: 100,
-        emphasis: {
-          focus: 'series',
-        },
-        ...buildSeriesLabelConfig(formatter, 'x'),
-      })),
-    }
-  }
-
-  const hasLegend = true
-
-  return {
-    legend: buildLegendConfig({ hasLegend, labelFormatter }),
-    grid: {
-      ...buildGridConfig(hasLegend, theme),
-      left: 0,
-      top: 0,
-      right: 0,
-    },
-    xAxis: {
-      show: false,
-    },
-    yAxis: {
-      show: false,
-    },
-    tooltip: {
-      trigger: 'item',
-      formatter: createTooltipFormatter((item) => {
-        const value =
-          item.value &&
-          typeof item.value === 'object' &&
-          !Array.isArray(item.value)
-            ? (Object.values(item.value) as (string | number)[])
-            : []
-        const index = item.encode?.value?.at(0)
-        const _value = value[index ?? 0]
-
-        const formattedValue =
-          typeof _value === 'number' && formatter
-            ? formatter(_value)
-            : (_value ?? '')
-
-        const marker = typeof item.marker === 'string' ? item.marker : ''
-        const seriesName = item.seriesName ? `${item.seriesName}: ` : ''
-        const name = labelFormatter
-          ? String(labelFormatter(item.name ?? ''))
-          : (item.name ?? '')
-
-        return {
-          name: seriesName,
-          seriesName: name,
-          marker,
-          value: formattedValue,
-        }
-      }),
-    },
-    color: Object.values(theme.palette.qualitative.bold),
-    series: data.map((_: unknown, index: number) => ({
-      datasetIndex: index,
-      type: 'pie',
-      colorBy: 'data',
-      radius: ['74%', '90%'],
-      avoidLabelOverlap: true,
-      selectedOffset: 0,
-      bottom: parseInt(theme.spacing(4)),
-
-      label: {
-        show: true,
-        position: 'center',
-        formatter: (params) => {
-          const { name } = params
-          const encodeIndex = params.encode?.value?.[0]
-          if (encodeIndex === undefined) {
-            return ''
-          }
-
-          const value = Object.values(params.data ?? {}).at(encodeIndex) as
-            number | string
-
-          const formattedValue =
-            typeof value === 'number' && formatter
-              ? formatter(value)
-              : (value ?? '')
-
-          const nameFormatted = labelFormatter
-            ? String(labelFormatter(name ?? ''))
-            : (name ?? '')
-
-          return `{c|${formattedValue}}\n\n{b|${nameFormatted}}`
-        },
-        rich: {
-          b: {
-            fontSize: 16,
-            fontWeight: 'normal',
-            lineHeight: 20,
-          },
-          c: {
-            fontSize: 28,
-            fontWeight: 'bold',
-            lineHeight: 27,
-          },
-        },
-      },
-      emphasis: {
-        disabled: true,
-      },
-      itemStyle: {
-        borderColor: theme.palette.background.paper,
-        borderWidth: 1,
-      },
-    })),
-  } as EchartOptionsProps
-}

package/src/widgets/pie/style.ts

@@ -1,8 +0,0 @@
-import type { SxProps, Theme } from '@mui/material'
-import { baseSkeletonStyles } from '../utils/skeleton'
-
-export const styles = {
-  skeleton: {
-    graph: baseSkeletonStyles.graph,
-  },
-} satisfies Record<string, SxProps<Theme>>

package/src/widgets/range/components/range-item.test.tsx

@@ -1,243 +0,0 @@
-/**
- * Tests for RangeItem — covers the slider + dual text-input branches that
- * the existing range-ui tests don't reach.
- *
- * Uses the same widget-action harness pattern established by
- * zoom-toggle/brush-toggle: clear the widget store between tests, seed the
- * Range data via widgetStoreActions, render under a CARTO-extended MUI theme.
- */
-import { describe, it, expect, beforeEach, vi } from 'vitest'
-import { render, screen, fireEvent } from '@testing-library/react'
-import { ThemeProvider, createTheme } from '@mui/material/styles'
-import { useWidgetStore, widgetStoreActions } from '../../stores/widget-store'
-import { RangeItem } from './range-item'
-import type { RangeWidgetState } from '../types'
-
-const theme = createTheme({
-  palette: {
-    common: { white: '#ffffff', black: '#000000' },
-    secondary: { main: '#3366ff' },
-    // @ts-expect-error - `black` is a CARTO-specific MUI palette extension
-    black: { 60: 'rgba(0,0,0,0.6)' },
-  },
-})
-
-function renderWithTheme(ui: React.ReactElement) {
-  return render(<ThemeProvider theme={theme}>{ui}</ThemeProvider>)
-}
-
-beforeEach(() => {
-  useWidgetStore.getState().clearWidgets()
-})
-
-function seedRange(
-  id: string,
-  item: Partial<RangeWidgetState['data'][number]>,
-  extras: Partial<RangeWidgetState> = {},
-) {
-  widgetStoreActions.setWidget(id, {
-    data: [{ min: 0, max: 100, ...item }],
-    ...extras,
-  } as unknown as Partial<RangeWidgetState>)
-}
-
-describe('RangeItem early-return guard', () => {
-  it('returns null when the data item does not exist', () => {
-    // No widget set → no item at index 0
-    const { container } = renderWithTheme(<RangeItem id='r-empty' index={0} />)
-    expect(container.firstChild).toBeNull()
-  })
-
-  it('returns null when index is out of bounds', () => {
-    seedRange('r-oob', { min: 0, max: 10 })
-    const { container } = renderWithTheme(<RangeItem id='r-oob' index={5} />)
-    expect(container.firstChild).toBeNull()
-  })
-})
-
-describe('RangeItem default value computation', () => {
-  it('uses [min, max] when item.value is undefined', () => {
-    seedRange('r-def', { min: 5, max: 25 })
-    renderWithTheme(<RangeItem id='r-def' index={0} />)
-    // Both min and max input fields render with the default values
-    expect(screen.getByLabelText('Minimum value')).toBeDefined()
-    expect(screen.getByLabelText('Maximum value')).toBeDefined()
-  })
-
-  it('uses item.value when provided', () => {
-    seedRange('r-val', { min: 0, max: 100, value: [20, 80] })
-    renderWithTheme(<RangeItem id='r-val' index={0} />)
-    expect(screen.getByLabelText('Minimum value')).toBeDefined()
-    expect(screen.getByLabelText('Maximum value')).toBeDefined()
-  })
-})
-
-describe('RangeItem text-input interactions', () => {
-  it('focusing the min input enters editing state for min', () => {
-    seedRange('r-min', { min: 0, max: 100, value: [10, 90] })
-    renderWithTheme(<RangeItem id='r-min' index={0} />)
-    const minInput = screen.getByLabelText('Minimum value')
-    fireEvent.focus(minInput, { target: { name: 'min' } })
-    // After focus, the input should be in editing mode (the displayed value
-    // switches from formatted to raw). We assert via the input being focusable.
-    expect(minInput).toBeDefined()
-  })
-
-  it('changing min input updates the widget store', () => {
-    const onChange = vi.fn()
-    seedRange('r-chg-min', { min: 0, max: 100, value: [10, 90] }, { onChange })
-    renderWithTheme(<RangeItem id='r-chg-min' index={0} />)
-    const minInput = screen.getByLabelText('Minimum value')
-    fireEvent.focus(minInput, { target: { name: 'min' } })
-    fireEvent.blur(minInput, { target: { name: 'min', value: '25' } })
-    const widget = widgetStoreActions.getWidget<RangeWidgetState>('r-chg-min')
-    expect(widget?.data[0]?.value).toEqual([25, 90])
-    expect(onChange).toHaveBeenCalled()
-  })
-
-  it('changing max input updates the widget store', () => {
-    seedRange('r-chg-max', { min: 0, max: 100, value: [10, 90] })
-    renderWithTheme(<RangeItem id='r-chg-max' index={0} />)
-    const maxInput = screen.getByLabelText('Maximum value')
-    fireEvent.focus(maxInput, { target: { name: 'max' } })
-    fireEvent.blur(maxInput, { target: { name: 'max', value: '50' } })
-    const widget = widgetStoreActions.getWidget<RangeWidgetState>('r-chg-max')
-    expect(widget?.data[0]?.value).toEqual([10, 50])
-  })
-
-  it('clamps min input to [item.min, currentValue[1]]', () => {
-    seedRange('r-clamp-min', { min: 0, max: 100, value: [50, 60] })
-    renderWithTheme(<RangeItem id='r-clamp-min' index={0} />)
-    const minInput = screen.getByLabelText('Minimum value')
-    fireEvent.focus(minInput, { target: { name: 'min' } })
-    // Try to set min to 999 (well above max-of-range) — should clamp to 60
-    fireEvent.blur(minInput, { target: { name: 'min', value: '999' } })
-    const widget = widgetStoreActions.getWidget<RangeWidgetState>('r-clamp-min')
-    expect(widget?.data[0]?.value?.[0]).toBe(60)
-  })
-
-  it('clamps max input to [currentValue[0], item.max]', () => {
-    seedRange('r-clamp-max', { min: 0, max: 100, value: [30, 70] })
-    renderWithTheme(<RangeItem id='r-clamp-max' index={0} />)
-    const maxInput = screen.getByLabelText('Maximum value')
-    fireEvent.focus(maxInput, { target: { name: 'max' } })
-    fireEvent.blur(maxInput, { target: { name: 'max', value: '-50' } })
-    const widget = widgetStoreActions.getWidget<RangeWidgetState>('r-clamp-max')
-    expect(widget?.data[0]?.value?.[1]).toBe(30)
-  })
-
-  it('falls back to item.min/max when parseFloat returns NaN', () => {
-    seedRange('r-nan', { min: 5, max: 95, value: [20, 80] })
-    renderWithTheme(<RangeItem id='r-nan' index={0} />)
-    const minInput = screen.getByLabelText('Minimum value')
-    fireEvent.focus(minInput, { target: { name: 'min' } })
-    fireEvent.blur(minInput, { target: { name: 'min', value: 'not-a-number' } })
-    const widget = widgetStoreActions.getWidget<RangeWidgetState>('r-nan')
-    // parseFloat('not-a-number') is NaN → falls back to item.min (5)
-    expect(widget?.data[0]?.value?.[0]).toBe(5)
-  })
-
-  it('Enter key commits the input and blurs', () => {
-    seedRange('r-enter', { min: 0, max: 100, value: [10, 90] })
-    renderWithTheme(<RangeItem id='r-enter' index={0} />)
-    const minInput = screen.getByLabelText('Minimum value')
-    fireEvent.focus(minInput, { target: { name: 'min' } })
-    fireEvent.keyDown(minInput, {
-      key: 'Enter',
-      target: { name: 'min', value: '15' },
-    })
-    // No throw on Enter handling
-    expect(minInput).toBeDefined()
-  })
-
-  it('non-Enter key does not commit', () => {
-    seedRange('r-other', { min: 0, max: 100, value: [10, 90] })
-    renderWithTheme(<RangeItem id='r-other' index={0} />)
-    const minInput = screen.getByLabelText('Minimum value')
-    fireEvent.focus(minInput, { target: { name: 'min' } })
-    fireEvent.keyDown(minInput, { key: 'a', target: { name: 'min' } })
-    // No state change beyond focus
-    expect(minInput).toBeDefined()
-  })
-})
-
-describe('RangeItem slider interactions', () => {
-  it('handles slider change with an array value (updates store + onChange)', () => {
-    const onChange = vi.fn()
-    seedRange('r-slider', { min: 0, max: 100, value: [10, 90] }, { onChange })
-    renderWithTheme(<RangeItem id='r-slider' index={0} />)
-
-    // The MUI Slider renders thumbs as elements with role="slider"; simulate
-    // a value change by calling the onChange we wired up via the widget store.
-    // We can also just directly trigger setWidget the way the handler would.
-    // Simpler path: simulate by re-triggering through the widget data.
-    const widget = widgetStoreActions.getWidget<RangeWidgetState>('r-slider')
-    expect(widget?.data[0]?.value).toEqual([10, 90])
-  })
-
-  it('handleSliderChange does nothing when newValue is not an array (defensive guard)', () => {
-    // The Slider only ever emits arrays for a two-thumb config, but the
-    // handler defensively checks Array.isArray. We can't easily trigger
-    // this from the DOM, but we can confirm the component renders without
-    // throwing — the branch is hit indirectly during other tests that
-    // exercise the slider.
-    seedRange('r-defensive', { min: 0, max: 100 })
-    expect(() =>
-      renderWithTheme(<RangeItem id='r-defensive' index={0} />),
-    ).not.toThrow()
-  })
-})
-
-describe('RangeItem optional props branches', () => {
-  it('applies the `color` style when item.color is provided', () => {
-    seedRange('r-color', { min: 0, max: 100, color: '#ff0000' })
-    expect(() =>
-      renderWithTheme(<RangeItem id='r-color' index={0} />),
-    ).not.toThrow()
-  })
-
-  it('skips the color style when item.color is undefined', () => {
-    seedRange('r-no-color', { min: 0, max: 100 })
-    expect(() =>
-      renderWithTheme(<RangeItem id='r-no-color' index={0} />),
-    ).not.toThrow()
-  })
-
-  it('respects item.disabled', () => {
-    seedRange('r-disabled', { min: 0, max: 100, disabled: true })
-    renderWithTheme(<RangeItem id='r-disabled' index={0} />)
-    const input = screen.getByLabelText('Minimum value')
-    expect(
-      (input as HTMLInputElement).disabled ||
-        input.getAttribute('disabled') !== null,
-    ).toBe(true)
-  })
-
-  it('uses defaultFormatter when no formatter is provided', () => {
-    seedRange('r-no-fmt', { min: 0, max: 100, value: [10, 90] })
-    expect(() =>
-      renderWithTheme(<RangeItem id='r-no-fmt' index={0} />),
-    ).not.toThrow()
-  })
-
-  it('uses a custom formatter when provided', () => {
-    seedRange(
-      'r-fmt',
-      { min: 0, max: 100, value: [10, 90] },
-      { formatter: (v: number) => `$${v}` },
-    )
-    expect(() =>
-      renderWithTheme(<RangeItem id='r-fmt' index={0} />),
-    ).not.toThrow()
-  })
-
-  it('works without an onChange callback (`?.` short-circuit)', () => {
-    seedRange('r-nocb', { min: 0, max: 100, value: [10, 90] })
-    renderWithTheme(<RangeItem id='r-nocb' index={0} />)
-    const minInput = screen.getByLabelText('Minimum value')
-    fireEvent.focus(minInput, { target: { name: 'min' } })
-    expect(() =>
-      fireEvent.blur(minInput, { target: { name: 'min', value: '20' } }),
-    ).not.toThrow()
-  })
-})