@carto/ps-react-ui 4.3.3 → 4.3.5

package/src/widgets/range/range-ui.test.tsx

@@ -0,0 +1,203 @@
+import { describe, test, expect, beforeEach, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { RangeUI } from './range-ui'
+import { useWidgetStore } from '../stores/widget-store'
+import type { RangeWidgetState } from './types'
+
+describe('RangeUI', () => {
+  beforeEach(() => {
+    useWidgetStore.getState().clearWidgets()
+  })
+
+  test('returns null when widget does not exist', () => {
+    const { container } = render(<RangeUI id='non-existent' />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  test('renders with single range item', () => {
+    useWidgetStore.getState().setWidget<RangeWidgetState>('test-range', {
+      type: 'range',
+      data: [{ min: 0, max: 100, value: [20, 80] }],
+    })
+
+    render(<RangeUI id='test-range' />)
+
+    const inputs = screen.getAllByRole('textbox')
+    expect(inputs).toHaveLength(2)
+    expect((inputs[0] as HTMLInputElement).value).toBe('20')
+    expect((inputs[1] as HTMLInputElement).value).toBe('80')
+  })
+
+  test('renders with multiple range items', () => {
+    useWidgetStore.getState().setWidget<RangeWidgetState>('test-range', {
+      type: 'range',
+      data: [
+        { min: 0, max: 100, value: [20, 80] },
+        { min: 0, max: 50, value: [10, 40] },
+      ],
+    })
+
+    render(<RangeUI id='test-range' />)
+
+    const inputs = screen.getAllByRole('textbox')
+    expect(inputs).toHaveLength(4)
+    expect((inputs[0] as HTMLInputElement).value).toBe('20')
+    expect((inputs[1] as HTMLInputElement).value).toBe('80')
+    expect((inputs[2] as HTMLInputElement).value).toBe('10')
+    expect((inputs[3] as HTMLInputElement).value).toBe('40')
+  })
+
+  test('uses formatter when provided', () => {
+    useWidgetStore.getState().setWidget<RangeWidgetState>('test-range', {
+      type: 'range',
+      data: [{ min: 0, max: 100, value: [20, 80] }],
+      formatter: (val: number) => `$${val}`,
+    })
+
+    render(<RangeUI id='test-range' />)
+
+    const inputs = screen.getAllByRole('textbox')
+    expect((inputs[0] as HTMLInputElement).value).toBe('$20')
+    expect((inputs[1] as HTMLInputElement).value).toBe('$80')
+  })
+
+  test('handles onChange callback', () => {
+    const onChange = vi.fn()
+    useWidgetStore.getState().setWidget<RangeWidgetState>('test-range', {
+      type: 'range',
+      data: [{ min: 0, max: 100, value: [20, 80] }],
+      onChange,
+    })
+
+    render(<RangeUI id='test-range' />)
+
+    const minInput = screen.getAllByRole('textbox')[0]
+    fireEvent.change(minInput!, { target: { value: '30' } })
+    fireEvent.blur(minInput!)
+
+    expect(onChange).toHaveBeenCalledWith([30, 80], 0)
+  })
+
+  test('renders disabled state', () => {
+    useWidgetStore.getState().setWidget<RangeWidgetState>('test-range', {
+      type: 'range',
+      data: [{ min: 0, max: 100, disabled: true }],
+    })
+
+    render(<RangeUI id='test-range' />)
+
+    const inputs = screen.getAllByRole('textbox')
+    expect((inputs[0] as HTMLInputElement).disabled).toBe(true)
+    expect((inputs[1] as HTMLInputElement).disabled).toBe(true)
+  })
+
+  test('handles empty data array', () => {
+    useWidgetStore.getState().setWidget<RangeWidgetState>('test-range', {
+      type: 'range',
+      data: [],
+    })
+
+    const { container } = render(<RangeUI id='test-range' />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  test('handles undefined data', () => {
+    useWidgetStore.getState().setWidget<RangeWidgetState>('test-range', {
+      type: 'range',
+    })
+
+    const { container } = render(<RangeUI id='test-range' />)
+    expect(container.firstChild).toBeNull()
+  })
+
+  test('uses default min/max when value is not provided', () => {
+    useWidgetStore.getState().setWidget<RangeWidgetState>('test-range', {
+      type: 'range',
+      data: [{ min: 10, max: 90 }],
+    })
+
+    render(<RangeUI id='test-range' />)
+
+    const inputs = screen.getAllByRole('textbox')
+    expect((inputs[0] as HTMLInputElement).value).toBe('10')
+    expect((inputs[1] as HTMLInputElement).value).toBe('90')
+  })
+
+  test('validates min input on blur', () => {
+    const onChange = vi.fn()
+    useWidgetStore.getState().setWidget<RangeWidgetState>('test-range', {
+      type: 'range',
+      data: [{ min: 0, max: 100, value: [20, 80] }],
+      onChange,
+    })
+
+    render(<RangeUI id='test-range' />)
+
+    const minInput = screen.getAllByRole('textbox')[0]
+
+    // Try to set min higher than max
+    fireEvent.change(minInput!, { target: { value: '90' } })
+    fireEvent.blur(minInput!)
+
+    // Should clamp to max value
+    expect(onChange).toHaveBeenCalledWith([80, 80], 0)
+  })
+
+  test('validates max input on blur', () => {
+    const onChange = vi.fn()
+    useWidgetStore.getState().setWidget<RangeWidgetState>('test-range', {
+      type: 'range',
+      data: [{ min: 0, max: 100, value: [20, 80] }],
+      onChange,
+    })
+
+    render(<RangeUI id='test-range' />)
+
+    const maxInput = screen.getAllByRole('textbox')[1]
+
+    // Try to set max lower than min
+    fireEvent.change(maxInput!, { target: { value: '10' } })
+    fireEvent.blur(maxInput!)
+
+    // Should clamp to min value
+    expect(onChange).toHaveBeenCalledWith([20, 20], 0)
+  })
+
+  test('updates when widget data changes', () => {
+    useWidgetStore.getState().setWidget<RangeWidgetState>('test-range', {
+      type: 'range',
+      data: [{ min: 0, max: 100, value: [20, 80] }],
+    })
+
+    const { rerender } = render(<RangeUI id='test-range' />)
+
+    let inputs = screen.getAllByRole('textbox')
+    expect((inputs[0] as HTMLInputElement).value).toBe('20')
+    expect((inputs[1] as HTMLInputElement).value).toBe('80')
+
+    useWidgetStore.getState().setWidget<RangeWidgetState>('test-range', {
+      data: [{ min: 0, max: 100, value: [30, 70] }],
+    })
+
+    rerender(<RangeUI id='test-range' />)
+
+    inputs = screen.getAllByRole('textbox')
+    expect((inputs[0] as HTMLInputElement).value).toBe('30')
+    expect((inputs[1] as HTMLInputElement).value).toBe('70')
+  })
+
+  test('handles widget removal gracefully', () => {
+    useWidgetStore.getState().setWidget<RangeWidgetState>('test-range', {
+      type: 'range',
+      data: [{ min: 0, max: 100 }],
+    })
+
+    const { container, rerender } = render(<RangeUI id='test-range' />)
+    expect(container.firstChild).toBeTruthy()
+
+    useWidgetStore.getState().removeWidget('test-range')
+
+    rerender(<RangeUI id='test-range' />)
+    expect(container.firstChild).toBeNull()
+  })
+})

package/src/widgets/range/range-ui.tsx

@@ -0,0 +1,11 @@
+import type { RangeUIProps } from './types'
+import { Row } from '../formula/components/row'
+import { RangeItem } from './components/range-item'
+
+export function RangeUI(props: RangeUIProps) {
+  return (
+    <Row id={props.id}>
+      {({ index }) => <RangeItem id={props.id} index={index} />}
+    </Row>
+  )
+}

package/src/widgets/range/serializer.test.ts

@@ -0,0 +1,70 @@
+import { describe, test, expect } from 'vitest'
+import { sanitizeRangeDataItem, sanitizeRangeDataItems } from './serializer'
+import type { RangeDataItem } from './types'
+
+describe('sanitizeRangeDataItem', () => {
+  test('preserves all other properties', () => {
+    const item: RangeDataItem = {
+      min: 10,
+      max: 90,
+      value: [20, 80],
+      step: 5,
+      marks: true,
+      disabled: true,
+      color: '#FF0000',
+    }
+
+    const sanitized = sanitizeRangeDataItem(item)
+
+    expect(sanitized.min).toBe(10)
+    expect(sanitized.max).toBe(90)
+    expect(sanitized.value).toEqual([20, 80])
+    expect(sanitized.step).toBe(5)
+    expect(sanitized.marks).toBe(true)
+    expect(sanitized.disabled).toBe(true)
+    expect(sanitized.color).toBe('#FF0000')
+  })
+})
+
+describe('sanitizeRangeDataItems', () => {
+  test('sanitizes array of items', () => {
+    const items: RangeDataItem[] = [{ min: 10, max: 90 }]
+
+    const sanitized = sanitizeRangeDataItems(items)
+
+    expect(sanitized).toHaveLength(1)
+  })
+
+  test('handles undefined input', () => {
+    const sanitized = sanitizeRangeDataItems(undefined)
+
+    expect(sanitized).toBeUndefined()
+  })
+
+  test('handles empty array', () => {
+    const sanitized = sanitizeRangeDataItems([])
+
+    expect(sanitized).toEqual([])
+  })
+
+  test('preserves all item properties', () => {
+    const items: RangeDataItem[] = [
+      {
+        min: 0,
+        max: 100,
+        value: [25, 75],
+        step: 10,
+        marks: [
+          { value: 0, label: '0' },
+          { value: 100, label: '100' },
+        ],
+        disabled: false,
+        color: '#00FF00',
+      },
+    ]
+
+    const sanitized = sanitizeRangeDataItems(items)
+
+    expect(sanitized![0]).toEqual(items[0])
+  })
+})

package/src/widgets/range/serializer.ts

@@ -0,0 +1,27 @@
+import type { RangeDataItem } from './types'
+
+/**
+ * Sanitizes RangeDataItem by converting ReactNode note values to undefined.
+ * This ensures only string values are stored in the widget state.
+ *
+ * @param item - The RangeDataItem to sanitize
+ * @returns A new RangeDataItem with ReactNode note values converted to undefined
+ */
+export function sanitizeRangeDataItem(item: RangeDataItem): RangeDataItem {
+  return {
+    ...item,
+    note: typeof item.note === 'string' ? item.note : undefined,
+  }
+}
+
+/**
+ * Sanitizes an array of RangeDataItems by converting ReactNode note values to undefined.
+ *
+ * @param items - Array of RangeDataItems to sanitize
+ * @returns A new array with sanitized RangeDataItems
+ */
+export function sanitizeRangeDataItems(
+  items: RangeDataItem[] | undefined,
+): RangeDataItem[] | undefined {
+  return items?.map(sanitizeRangeDataItem)
+}

package/src/widgets/range/skeleton.tsx

@@ -0,0 +1,14 @@
+import { Box, Skeleton } from '@mui/material'
+import { styles } from './style'
+
+export function RangeSkeleton() {
+  return (
+    <Box sx={styles.rangeItem} aria-label='Range skeleton'>
+      <Skeleton width='100%' height={32} />
+      <Box sx={styles.inputsRow}>
+        <Skeleton width='100%' height={40} />
+        <Skeleton width='100%' height={40} />
+      </Box>
+    </Box>
+  )
+}

package/src/widgets/range/style.ts

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

package/src/widgets/range/types.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react'
+import type { BaseWidgetState, WidgetsStoreProps } from '../stores/types'
+import type { WrapperState } from '../wrapper/types'
+import type { DownloadItem } from '../actions/download/types'
+
+export interface RangeUIProps {
+  id: WidgetsStoreProps['id']
+}
+
+export interface RangeDataItem {
+  min: number
+  max: number
+  value?: number[]
+  step?: number
+  marks?: boolean | { value: number; label?: string }[]
+  disabled?: boolean
+  color?: string
+  note?: string | ReactNode
+}
+
+export interface RangeItemProps {
+  id: WidgetsStoreProps['id']
+  index: number
+}
+
+export type RangeWidgetData = RangeDataItem[]
+
+export type RangeWidgetState = BaseWidgetState<
+  WrapperState<RangeWidgetConfig>
+> & {
+  data: RangeWidgetData
+}
+
+export interface RangeWidgetConfig {
+  formatter?: (value: number) => string
+  onChange?: (value: number[], index: number) => void
+}
+
+export type RangeDownloadConfig = DownloadItem<RangeWidgetData>[]

package/src/widgets/scatterplot/config.ts

@@ -0,0 +1,138 @@
+import {
+  getCommonOptions,
+  mergeEchartWidgetConfig,
+  type EchartOptionsProps,
+} from '../echart'
+import type {
+  ScatterplotConfig,
+  ScatterplotWidgetConfig,
+  ScatterplotWidgetData,
+} from './types'
+import {
+  scatterplotDataToCSV,
+  buildLegendConfig,
+  createTooltipFormatter,
+  applyYAxisFormatter,
+} from '../_shared/chart-config'
+import { downloadToCSV, downloadToPNG, type DownloadItem } from '../actions'
+import type { ConfigProps } from '../loader/types'
+
+export function scatterplotDownloadConfig({
+  refUI,
+}: ConfigProps): DownloadItem<ScatterplotWidgetData>[] {
+  return [
+    {
+      ...downloadToPNG,
+      modifier: () => downloadToPNG.modifier(refUI),
+    },
+    {
+      ...downloadToCSV,
+      modifier: async (data) => {
+        const rows = scatterplotDataToCSV(data)
+        return downloadToCSV.modifier(rows)
+      },
+    },
+  ]
+}
+
+export function scatterplotConfig(
+  props: ScatterplotConfig,
+): ScatterplotWidgetConfig {
+  return {
+    type: 'scatterplot',
+    option: mergeEchartWidgetConfig(getCommonOptions(props), getOption(props)),
+  }
+}
+
+function getOption({
+  data = [],
+  theme,
+  formatter,
+}: ScatterplotConfig): EchartOptionsProps {
+  const hasLegend = data.length > 1
+
+  const xAxis = {
+    type: 'value' as const,
+    axisLine: { show: false },
+    axisTick: { show: false },
+    axisLabel: {
+      fontSize: theme.typography.overlineDelicate.fontSize,
+      fontFamily: theme.typography.overlineDelicate.fontFamily,
+      showMinLabel: true,
+      showMaxLabel: true,
+      hideOverlap: true,
+      padding: [
+        parseInt(theme.spacing(0.5)),
+        parseInt(theme.spacing(0.5)),
+        0,
+        parseInt(theme.spacing(0.5)),
+      ],
+      color: theme.palette.black[60],
+    },
+    splitLine: {
+      show: true,
+      lineStyle: { color: theme.palette.black[4] },
+    },
+  }
+
+  const yAxis = {
+    type: 'value' as const,
+    axisLabel: {
+      fontSize: theme.typography.overlineDelicate.fontSize,
+      fontFamily: theme.typography.overlineDelicate.fontFamily,
+      inside: false,
+      padding: [
+        0,
+        0,
+        parseInt(theme.spacing(1.25)),
+        parseInt(theme.spacing(3.25)),
+      ],
+      margin: 0,
+      show: true,
+      showMaxLabel: true,
+      showMinLabel: false,
+      align: 'right',
+      verticalAlign: 'bottom',
+    },
+    axisLine: { show: false },
+    axisTick: { show: false },
+    splitLine: {
+      show: true,
+      lineStyle: { color: theme.palette.black[4] },
+    },
+  }
+
+  return {
+    legend: buildLegendConfig(hasLegend),
+    grid: {
+      ...(!hasLegend && { bottom: parseInt(theme.spacing(1)) }),
+      ...(hasLegend && { bottom: parseInt(theme.spacing(10)) }),
+    },
+    xAxis,
+    yAxis: applyYAxisFormatter(yAxis, formatter),
+    tooltip: {
+      trigger: 'item',
+      // position: createTooltipPositioner(theme),
+      formatter: createTooltipFormatter((item) => {
+        const value = item.value as Record<string, string | number>
+        const index = item.encode?.y?.at(0)
+        const _value = value[index ?? '']
+
+        const formattedValue =
+          typeof _value === 'number' && formatter
+            ? formatter(_value)
+            : (_value ?? '')
+        const marker = typeof item.marker === 'string' ? item.marker : ''
+        const name = item.seriesName ?? ''
+
+        return { name, seriesName: '', marker, value: formattedValue }
+      }),
+    },
+    color: Object.values(theme.palette.qualitative.bold),
+    series: data.map((_: unknown, index: number) => ({
+      datasetIndex: index,
+      type: 'scatter',
+      symbolSize: 8,
+    })),
+  } as EchartOptionsProps
+}

package/src/widgets/scatterplot/index.ts

@@ -0,0 +1,8 @@
+export type {
+  ScatterplotWidgetData,
+  ScatterplotWidgetState,
+  ScatterplotWidgetConfig,
+  ScatterplotConfig,
+} from './types'
+export { scatterplotConfig, scatterplotDownloadConfig } from './config'
+export { ScatterplotSkeleton } from './skeleton'

package/src/widgets/scatterplot/skeleton.tsx

@@ -0,0 +1,59 @@
+import { Box, Skeleton } from '@mui/material'
+import { styles } from './style'
+
+const SCATTER_POINTS = [
+  { left: '20%', top: '62%' },
+  { left: '26%', top: '70%' },
+  { left: '29%', top: '73%' },
+  { left: '38%', top: '63%' },
+  { left: '41%', top: '68%' },
+  { left: '47%', top: '62%' },
+  { left: '53%', top: '49%' },
+  { left: '56%', top: '55%' },
+  { left: '65%', top: '37%' },
+  { left: '68%', top: '43%' },
+  { left: '77%', top: '59%' },
+  { left: '25%', top: '30%' },
+  { left: '60%', top: '70%' },
+  { left: '10%', top: '55%' },
+  { left: '40%', top: '40%' },
+]
+
+export function ScatterplotSkeleton() {
+  return (
+    <Box sx={styles.skeleton.graph.container}>
+      {SCATTER_POINTS.map((point, index) => (
+        <Skeleton
+          key={index}
+          variant='circular'
+          width={12}
+          height={12}
+          sx={{
+            position: 'absolute',
+            top: point.top,
+            left: point.left,
+            transform: 'translate(-50%, -50%)',
+          }}
+        />
+      ))}
+      {/* Legend */}
+      <Box sx={styles.skeleton.legend}>
+        {Array(2)
+          .fill(0)
+          .map((_, i) => (
+            <Box
+              key={i}
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: ({ spacing }) => spacing(1.5),
+              }}
+            >
+              <Skeleton variant='circular' width={8} height={8} />
+              <Skeleton width={48} height={8} />
+            </Box>
+          ))}
+      </Box>
+    </Box>
+  )
+}

package/src/widgets/scatterplot/style.ts

@@ -0,0 +1,21 @@
+import type { SxProps, Theme } from '@mui/material'
+import { baseSkeletonStyles } from '../_shared/skeleton'
+
+export const styles = {
+  skeleton: {
+    graph: {
+      container: {
+        ...baseSkeletonStyles.graph.container,
+        position: 'relative',
+      },
+    },
+    legend: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: ({ spacing }) => spacing(2),
+      height: ({ spacing }) => spacing(5),
+      position: 'absolute',
+      bottom: 0,
+    },
+  },
+} satisfies Record<string, SxProps<Theme>>

package/src/widgets/scatterplot/types.ts

@@ -0,0 +1,17 @@
+import type { EchartWidgetState } from '../echart'
+import type {
+  EchartWidgetOptionProps,
+  EchartWidgetProps,
+} from '../echart/types'
+import type { ConfigProps } from '../loader'
+
+export type ScatterplotWidgetData = [number, number][][]
+
+export type ScatterplotWidgetState = EchartWidgetState
+
+export type ScatterplotWidgetConfig = EchartWidgetProps & {
+  type: 'scatterplot'
+}
+
+export type ScatterplotConfig = ConfigProps &
+  EchartWidgetOptionProps<ScatterplotWidgetData>

package/src/widgets/selection-summary/index.ts

@@ -0,0 +1,6 @@
+export { WidgetSelectionSummary } from './selection-summary'
+
+export type {
+  WidgetSelectionSummaryProps,
+  SelectionSummaryLabels,
+} from './types'