@carto/ps-react-ui 4.3.3 → 4.3.5

package/src/widgets/pie/config.ts

@@ -0,0 +1,177 @@
+import {
+  getCommonOptions,
+  mergeEchartWidgetConfig,
+  type EchartOptionsProps,
+} from '../echart'
+import type { PieConfig, PieWidgetConfig, PieWidgetData } from './types'
+import {
+  buildGridConfig,
+  buildLegendConfig,
+  flattenObjectArrayToCSV,
+  createTooltipFormatter,
+} from '../_shared/chart-config'
+import { downloadToCSV, downloadToPNG, type DownloadItem } from '../actions'
+import type { ConfigProps } from '../loader/types'
+
+export function pieDownloadConfig({
+  refUI,
+}: ConfigProps): DownloadItem<PieWidgetData>[] {
+  return [
+    {
+      ...downloadToPNG,
+      modifier: () => downloadToPNG.modifier(refUI),
+    },
+    {
+      ...downloadToCSV,
+      modifier: async (data) => {
+        const rows = flattenObjectArrayToCSV(data)
+        return downloadToCSV.modifier(rows)
+      },
+    },
+  ]
+}
+
+export function pieConfig(props: PieConfig): PieWidgetConfig {
+  return {
+    type: 'pie',
+    option: mergeEchartWidgetConfig(getCommonOptions(props), getOption(props)),
+  }
+}
+
+function getOption({
+  data = [],
+  theme,
+  formatter,
+}: PieConfig): EchartOptionsProps {
+  const multiSeries = (data?.length ?? 0) > 1
+
+  if (multiSeries) {
+    return {
+      xAxis: {
+        type: 'value',
+        show: true,
+      },
+      yAxis: {
+        type: 'category',
+        show: true,
+      },
+      legend: {
+        show: true,
+        bottom: 0,
+      },
+      grid: {
+        bottom: parseInt(theme.spacing(4)),
+        right: parseInt(theme.spacing(4)),
+      },
+      series: data.map((_: unknown, index: number) => ({
+        datasetIndex: index,
+        type: 'bar',
+        barMaxWidth: 100,
+        emphasis: {
+          focus: 'series',
+        },
+      })),
+    }
+  }
+
+  const hasLegend = true
+
+  return {
+    legend: buildLegendConfig(hasLegend),
+    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 = 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 = 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/index.ts

@@ -0,0 +1,8 @@
+export type {
+  PieWidgetData,
+  PieWidgetState,
+  PieWidgetConfig,
+  PieConfig,
+} from './types'
+export { pieConfig, pieDownloadConfig } from './config'
+export { PieSkeleton } from './skeleton'

package/src/widgets/pie/skeleton.tsx

@@ -0,0 +1,70 @@
+import { Box, Skeleton } from '@mui/material'
+import { styles } from './style'
+
+const GUTTER = 32
+const SIZE = 294 - GUTTER
+const INNER_SIZE = SIZE - GUTTER
+
+export function PieSkeleton() {
+  return (
+    <Box sx={styles.skeleton.graph.container}>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          position: 'relative',
+        }}
+      >
+        <Skeleton variant='circular' width={SIZE} height={SIZE} />
+        <Skeleton
+          sx={{
+            position: 'absolute',
+            zIndex: 1,
+          }}
+          variant='circular'
+          width={INNER_SIZE}
+          height={INNER_SIZE}
+        />
+        <Box
+          sx={{
+            position: 'absolute',
+            zIndex: 2,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: ({ spacing }) => spacing(1),
+          }}
+        >
+          <Skeleton height={24} width={72} />
+          <Skeleton height={8} width={48} />
+        </Box>
+      </Box>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: ({ spacing }) => spacing(2),
+          height: ({ spacing }) => spacing(5),
+        }}
+      >
+        {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/pie/style.ts

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

package/src/widgets/pie/types.ts

@@ -0,0 +1,16 @@
+import type { EchartWidgetData, EchartWidgetState } from '../echart'
+import type {
+  EchartWidgetOptionProps,
+  EchartWidgetProps,
+} from '../echart/types'
+import type { ConfigProps } from '../loader'
+
+export type PieWidgetData = EchartWidgetData
+
+export type PieWidgetState = EchartWidgetState
+
+export type PieWidgetConfig = EchartWidgetProps & {
+  type: 'pie'
+}
+
+export type PieConfig = ConfigProps & EchartWidgetOptionProps<PieWidgetData>

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

@@ -0,0 +1,213 @@
+import { Box, Slider, TextField } from '@mui/material'
+import { useState, useMemo, type FocusEvent, type KeyboardEvent } from 'react'
+import { useWidgetStore } from '../../stores/widget-store'
+import type { RangeItemProps, RangeWidgetState } from '../types'
+import { styles } from '../style'
+import { useShallow } from 'zustand/shallow'
+
+type EditingState = '' | 'min' | 'max'
+
+const defaultFormatter = (value: number) => value.toString()
+
+export function RangeItem({ id, index }: RangeItemProps) {
+  const {
+    item,
+    onChange,
+    formatter = defaultFormatter,
+  } = useWidgetStore(
+    useShallow((state) => {
+      const widget = state.getWidget<RangeWidgetState>(id)
+      return {
+        item: widget?.data[index],
+        onChange: widget?.onChange,
+        formatter: widget?.formatter,
+      }
+    }),
+  )
+  const getWidget = useWidgetStore((store) => store.getWidget)
+  const setWidget = useWidgetStore((store) => store.setWidget)
+
+  const currentValue = useMemo(
+    () => (item ? (item.value ?? [item.min, item.max]) : [0, 0]),
+    [item],
+  )
+
+  // Local state for input values - track if user is editing
+  const [isEditing, setIsEditing] = useState<EditingState>('')
+
+  if (!item) return null
+
+  const handleSliderChange = (_: Event, newValue: number | number[]) => {
+    if (Array.isArray(newValue)) {
+      const [min, max] = newValue
+      const data = getWidget<RangeWidgetState>(id)?.data ?? []
+
+      data[index] = {
+        ...item,
+        value: newValue,
+      }
+
+      setWidget(id, {
+        data,
+      })
+
+      onChange?.([min!, max!], index)
+    }
+  }
+
+  const handleInputFocus = (e: FocusEvent<HTMLInputElement>) => {
+    setIsEditing(e.target.name as EditingState)
+  }
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target
+
+    let newValue: [number, number]
+    if (name === 'min') {
+      newValue = [
+        Math.min(
+          Math.max(item.min, parseFloat(value) || item.min),
+          currentValue[1]!,
+        ),
+        currentValue[1] ?? 0,
+      ]
+    } else {
+      newValue = [
+        currentValue[0] ?? 0,
+        Math.max(
+          Math.min(item.max, parseFloat(value) || item.max),
+          currentValue[0]!,
+        ),
+      ]
+    }
+
+    const data = getWidget<RangeWidgetState>(id)?.data ?? []
+
+    setWidget(id, {
+      data: data.map((d: RangeWidgetState['data'][number], i: number) =>
+        i === index
+          ? {
+              ...d,
+              value: newValue,
+            }
+          : d,
+      ),
+    })
+
+    onChange?.([newValue[0], newValue[1]], index)
+  }
+
+  const handleInputBlur = (e: FocusEvent<HTMLInputElement>) => {
+    setIsEditing('')
+    handleInputChange(e)
+  }
+
+  const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      handleInputBlur(event as unknown as FocusEvent<HTMLInputElement>)
+      event.currentTarget.blur()
+    }
+  }
+
+  return (
+    <Box sx={styles.rangeItem}>
+      <Box sx={styles.sliderContainer}>
+        <Slider
+          value={currentValue}
+          onChange={handleSliderChange}
+          valueLabelDisplay='auto'
+          valueLabelFormat={formatter}
+          min={item.min}
+          max={item.max}
+          step={item.step}
+          marks={item.marks}
+          disabled={item.disabled}
+          sx={{
+            ...styles.slider,
+            ...(item.color && {
+              color: item.color,
+            }),
+          }}
+        />
+      </Box>
+
+      <Box sx={styles.inputsRow}>
+        <Input
+          key={`min-${currentValue[0]}`}
+          isEditing={isEditing}
+          name='min'
+          value={currentValue[0] ?? 0}
+          formatter={formatter}
+          onFocus={handleInputFocus}
+          onBlur={handleInputBlur}
+          onKeyDown={handleInputKeyDown}
+          disabled={item.disabled}
+          inputProps={{
+            'aria-label': 'Minimum value',
+          }}
+        />
+        <Input
+          key={`max-${currentValue[1]}`}
+          isEditing={isEditing}
+          name='max'
+          value={currentValue[1] ?? 0}
+          formatter={formatter}
+          onFocus={handleInputFocus}
+          onBlur={handleInputBlur}
+          onKeyDown={handleInputKeyDown}
+          disabled={item.disabled}
+          inputProps={{
+            'aria-label': 'Maximum value',
+          }}
+        />
+      </Box>
+    </Box>
+  )
+}
+
+function Input({
+  isEditing,
+  name,
+  disabled,
+  value,
+  formatter,
+  onFocus: onFocus,
+  onBlur: onBlur,
+  onKeyDown: onKeyDown,
+  inputProps,
+}: {
+  isEditing: EditingState
+  name: 'min' | 'max'
+  disabled?: boolean
+  value: number
+  formatter: (value: number) => string
+  onFocus: (e: FocusEvent<HTMLInputElement>) => void
+  onBlur: (e: FocusEvent<HTMLInputElement>) => void
+  onKeyDown: (e: KeyboardEvent<HTMLInputElement>) => void
+  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
+}) {
+  const [currentValue, setCurrentValue] = useState<string>(String(value))
+
+  // Compute display values when not editing
+  const displayMinValue = useMemo(
+    () => formatter(Number(currentValue)),
+    [currentValue, formatter],
+  )
+
+  return (
+    <TextField
+      name={name}
+      value={isEditing === name ? currentValue : displayMinValue}
+      onChange={(e) => {
+        setCurrentValue(e.target.value)
+      }}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      onKeyDown={onKeyDown}
+      disabled={disabled}
+      size='small'
+      sx={styles.input}
+      inputProps={inputProps}
+    />
+  )
+}

package/src/widgets/range/config.ts

@@ -0,0 +1,10 @@
+import type { RangeWidgetConfig } from './types'
+
+export interface RangeConfigProps {
+  formatter?: (value: number) => string
+  onChange?: (value: number[], index: number) => void
+}
+
+export function rangeConfig(): RangeWidgetConfig {
+  return {}
+}

package/src/widgets/range/index.ts

@@ -0,0 +1,16 @@
+export { RangeUI } from './range-ui'
+export { RangeSkeleton } from './skeleton'
+export { rangeConfig } from './config'
+export { RangeItem } from './components/range-item'
+
+export type {
+  RangeWidgetState,
+  RangeWidgetConfig,
+  RangeDownloadConfig,
+  RangeUIProps,
+  RangeDataItem,
+  RangeWidgetData,
+  RangeItemProps,
+} from './types'
+
+export { sanitizeRangeDataItem, sanitizeRangeDataItems } from './serializer'