@carto/ps-react-ui 4.3.5 → 4.3.7

package/src/widgets/actions/zoom-toggle/zoom-toggle.tsx

@@ -5,16 +5,21 @@ import {
 } from '@mui/icons-material'
 import { useEffect, useCallback } from 'react'
 import { useWidgetStore } from '../../stores/widget-store'
-import type { ZoomToggleProps, ZoomState } from './types'
+import type { ZoomToggleProps } from './types'
 import { styles } from './style'
 import { Tooltip } from '../../../components'
 import { getEChartZoomConfig } from '../../echart/utils'
-import type { EchartWidgetState } from '../../echart/types'
+import type { EchartOptionsProps } from '../../echart/types'
 import { useShallow } from 'zustand/shallow'
 
+export const ZOOM_TOGGLE_TOOL_ID = 'zoom-toggle'
+
 /**
  * Widget action to toggle EChart zoom functionality.
  *
+ * Registers as a config pipeline tool so that zoom configuration is automatically
+ * re-applied when the base config is updated (e.g., by WidgetLoader).
+ *
  * When zoom is active, displays an inline reset button to disable zoom.
  * Only intended for use in fullscreen ToolbarActions for bar and histogram widgets.
  *
@@ -39,117 +44,162 @@ export function ZoomToggle({
   IconButtonProps,
 }: ZoomToggleProps) {
   const theme = useTheme()
-  const setWidget = useWidgetStore((state) => state.setWidget)
   const getWidget = useWidgetStore((state) => state.getWidget)
+  const registerTool = useWidgetStore((state) => state.registerTool)
+  const unregisterTool = useWidgetStore((state) => state.unregisterTool)
+  const setToolEnabled = useWidgetStore((state) => state.setToolEnabled)
+  const updateToolConfig = useWidgetStore((state) => state.updateToolConfig)
 
-  const zoom = useWidgetStore(
+  const zoomTool = useWidgetStore(
     useShallow((state) => {
-      const widget = state.getWidget<ZoomState>(id)
-      return widget?.zoom ?? false
+      const tools = state.getWidget(id)?.registeredTools ?? []
+      return tools.find((tool) => tool.id === ZOOM_TOGGLE_TOOL_ID)
     }),
   )
 
-  const updateZoomOption = useCallback(
-    (enabled: boolean, start: number, end: number) => {
-      const zoomConfig = getEChartZoomConfig(
-        enabled,
-        { start, end },
-        { inside: true, xSlider: true, ySlider: false },
-        theme,
-      )
-      const currentOption = getWidget<EchartWidgetState>(id)?.option
-
-      setWidget<EchartWidgetState & ZoomState>(id, {
-        zoom: enabled,
-        zoomStart: start,
-        zoomEnd: end,
-        option: {
-          ...currentOption,
-          ...zoomConfig,
-        },
-      })
+  const zoom = zoomTool?.enabled ?? defaultZoom
+  const zoomStart =
+    (zoomTool?.config?.start as number | undefined) ?? defaultZoomStart
+  const zoomEnd =
+    (zoomTool?.config?.end as number | undefined) ?? defaultZoomEnd
+
+  // Handle dataZoom event to update zoom range in tool config
+  const handleDataZoom = useCallback(
+    (event: unknown) => {
+      const zoomEvent = event as {
+        start?: number
+        end?: number
+        batch?: {
+          start?: number
+          end?: number
+        }[]
+      }
+
+      const start = zoomEvent.start ?? zoomEvent.batch?.[0]?.start
+      const end = zoomEvent.end ?? zoomEvent.batch?.[0]?.end
+
+      if (start !== undefined && end !== undefined) {
+        setToolEnabled(id, ZOOM_TOGGLE_TOOL_ID, true)
+        updateToolConfig(id, ZOOM_TOGGLE_TOOL_ID, {
+          enabled: true,
+          start,
+          end,
+        })
+      }
     },
-    [getWidget, id, setWidget, theme],
+    [id, setToolEnabled, updateToolConfig],
   )
 
-  // Initialize zoom state from defaults only if not already set
+  // Register config tool on mount
   useEffect(() => {
-    const existingState = getWidget<ZoomState>(id)
-
-    if (existingState?.zoom) return
-
-    // Apply initial zoom config
-    updateZoomOption(
-      existingState?.zoom ?? defaultZoom,
-      existingState?.zoomStart ?? defaultZoomStart,
-      existingState?.zoomEnd ?? defaultZoomEnd,
+    const existingTool = getWidget(id)?.registeredTools?.find(
+      (tool) => tool.id === ZOOM_TOGGLE_TOOL_ID,
     )
+
+    const initialEnabled = existingTool?.enabled ?? defaultZoom
+    const initialStart =
+      (existingTool?.config?.start as number | undefined) ?? defaultZoomStart
+    const initialEnd =
+      (existingTool?.config?.end as number | undefined) ?? defaultZoomEnd
+
+    registerTool(id, {
+      id: ZOOM_TOGGLE_TOOL_ID,
+      type: 'config',
+      order: 20,
+      enabled: initialEnabled,
+      fn: (currentConfig, toolConfig) => {
+        const config = currentConfig as Record<string, unknown>
+        const option = config.option as EchartOptionsProps | undefined
+        const currentOnEvents =
+          (config.onEvents as Record<string, unknown> | undefined) ?? {}
+
+        const enabled = (toolConfig?.enabled as boolean) ?? false
+        const start = (toolConfig?.start as number) ?? 0
+        const end = (toolConfig?.end as number) ?? 100
+
+        const legend = option?.legend as { show?: boolean } | undefined
+        const hasLegend = legend?.show !== false && legend !== undefined
+
+        const sliderHeight = parseInt(theme?.spacing?.(4) ?? '32')
+        const sliderGap = 8
+        const legendBottomOffset = hasLegend ? 28 : 0
+
+        const zoomConfig = getEChartZoomConfig(
+          enabled,
+          { start, end },
+          {
+            inside: true,
+            xSlider: true,
+            ySlider: false,
+            bottomOffset: legendBottomOffset,
+          },
+          theme,
+        )
+
+        const grid = option?.grid as { bottom?: number | string } | undefined
+        const currentGridBottom =
+          typeof grid?.bottom === 'number'
+            ? grid.bottom
+            : parseInt(grid?.bottom ?? '24')
+
+        const gridBottom = enabled
+          ? currentGridBottom + sliderHeight + sliderGap
+          : currentGridBottom
+
+        const onEventsWithoutDataZoom = { ...currentOnEvents }
+        delete onEventsWithoutDataZoom.dataZoom
+        const onEvents = enabled
+          ? { ...currentOnEvents, dataZoom: handleDataZoom }
+          : onEventsWithoutDataZoom
+
+        return {
+          ...config,
+          option: {
+            ...option,
+            ...zoomConfig,
+            grid: { ...grid, bottom: gridBottom },
+          },
+          onEvents,
+        }
+      },
+      config: {
+        enabled: initialEnabled,
+        start: initialStart,
+        end: initialEnd,
+      },
+    })
+    return () => unregisterTool(id, ZOOM_TOGGLE_TOOL_ID)
   }, [
     defaultZoom,
     defaultZoomEnd,
     defaultZoomStart,
     getWidget,
+    handleDataZoom,
     id,
-    updateZoomOption,
+    registerTool,
+    theme,
+    unregisterTool,
   ])
 
-  // Cleanup: reset zoom when component unmounts
-  useEffect(() => {
-    return () => {
-      const existingState = getWidget<ZoomState>(id)
-      updateZoomOption(
-        false,
-        existingState?.zoomStart ?? 0,
-        existingState?.zoomEnd ?? 100,
-      )
-    }
-  }, [getWidget, id, updateZoomOption])
-
   const handleToggle = () => {
     const newZoom = !zoom
-
-    const existingState = getWidget<ZoomState>(id)
-
-    updateZoomOption(
-      newZoom,
-      newZoom ? (existingState?.zoomStart ?? defaultZoomStart) : 0,
-      newZoom ? (existingState?.zoomEnd ?? defaultZoomEnd) : 100,
-    )
+    setToolEnabled(id, ZOOM_TOGGLE_TOOL_ID, newZoom)
+    updateToolConfig(id, ZOOM_TOGGLE_TOOL_ID, {
+      enabled: newZoom,
+      start: newZoom ? zoomStart : 0,
+      end: newZoom ? zoomEnd : 100,
+    })
   }
 
   const handleReset = () => {
-    updateZoomOption(true, defaultZoomStart, defaultZoomEnd)
+    setToolEnabled(id, ZOOM_TOGGLE_TOOL_ID, true)
+    updateToolConfig(id, ZOOM_TOGGLE_TOOL_ID, {
+      enabled: true,
+      start: defaultZoomStart,
+      end: defaultZoomEnd,
+    })
   }
 
-  // Handle dataZoom event to update zoom range in store
-  const handleDataZoom = useCallback(
-    (event: unknown) => {
-      const zoomEvent = event as {
-        start: number
-        end: number
-      }
-
-      const start = zoomEvent.start
-      const end = zoomEvent.end
-
-      if (start !== undefined && end !== undefined) {
-        updateZoomOption(true, start, end)
-      }
-    },
-    [updateZoomOption],
-  )
-
-  // Register dataZoom event handler when zoom is enabled
-  useEffect(() => {
-    if (zoom) {
-      setWidget<EchartWidgetState>(id, {
-        onEvents: {
-          dataZoom: handleDataZoom,
-        },
-      })
-    }
-  }, [id, zoom, handleDataZoom, setWidget])
-
   const enableLabel = labels?.enable ?? 'Enable zoom'
   const disableLabel = labels?.disable ?? 'Disable zoom'
   const resetLabel = labels?.reset ?? 'Reset zoom'

package/src/widgets/bar/config.ts

@@ -10,7 +10,7 @@ import {
   buildGridConfig,
   createTooltipPositioner,
   createTooltipFormatter,
-  applyYAxisFormatter,
+  niceNum,
 } from '../_shared/chart-config'
 import { downloadToCSV, downloadToPNG, type DownloadItem } from '../actions'
 import type { ConfigProps } from '../loader/types'
@@ -47,32 +47,7 @@ function getOption({
 }: BarConfig): EchartOptionsProps {
   const hasLegend = (data?.length ?? 0) > 1
 
-  const yAxis = {
-    type: 'value' as const,
-    splitNumber: 1,
-    axisLabel: {
-      fontSize: theme.typography.overlineDelicate.fontSize,
-      fontFamily: theme.typography.overlineDelicate.fontFamily,
-      margin: parseInt(theme.spacing(1)),
-      show: true,
-      showMaxLabel: true,
-      showMinLabel: false,
-      verticalAlign: 'bottom' as const,
-      inside: true,
-    },
-    axisLine: {
-      show: false,
-    },
-    axisTick: {
-      show: false,
-    },
-    splitLine: {
-      show: true,
-      lineStyle: {
-        color: theme.palette.black[4],
-      },
-    },
-  }
+  let niceMax = 1
 
   return {
     legend: buildLegendConfig(hasLegend),
@@ -90,7 +65,41 @@ function getOption({
         margin: 0,
       },
     },
-    yAxis: applyYAxisFormatter(yAxis, formatter),
+    yAxis: {
+      type: 'value' as const,
+      min: 0,
+      max: (extent: { min: number; max: number }) => {
+        niceMax = extent.max <= 0 ? 1 : niceNum(extent.max)
+        return niceMax
+      },
+      splitNumber: 1,
+      axisLabel: {
+        fontSize: theme.typography.overlineDelicate.fontSize,
+        fontFamily: theme.typography.overlineDelicate.fontFamily,
+        margin: parseInt(theme.spacing(1)),
+        show: true,
+        showMaxLabel: true,
+        showMinLabel: false,
+        verticalAlign: 'bottom' as const,
+        inside: true,
+        formatter: (value: number) => {
+          if (value !== niceMax) return ''
+          return formatter ? formatter(value) : String(value)
+        },
+      },
+      axisLine: {
+        show: false,
+      },
+      axisTick: {
+        show: false,
+      },
+      splitLine: {
+        show: true,
+        lineStyle: {
+          color: theme.palette.black[4],
+        },
+      },
+    },
     tooltip: {
       position: createTooltipPositioner(theme),
       formatter: createTooltipFormatter((item) => {

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

@@ -15,30 +15,33 @@ const defaultFormatter = (value: number) => value.toString()
 
 export function CategoryUI({ id }: CategoryUIProps) {
   const theme = useTheme()
-  const widget = useWidgetStore(
-    useShallow((state) => {
-      const widget = state.getWidget<CategoryWidgetState>(id)
-      return {
-        formatter: widget?.formatter,
-        series: widget?.series,
-        data: widget?.data,
-        maxItems: widget?.maxItems,
-        labels: widget?.labels,
-        onRowClick: widget?.onRowClick,
-        selected: widget?.selected,
-        max: widget?.max,
-      }
-    }),
+  const _formatter = useWidgetStore(
+    useShallow((state) => state.getWidget<CategoryWidgetState>(id)?.formatter),
+  )
+  const _series = useWidgetStore(
+    useShallow((state) => state.getWidget<CategoryWidgetState>(id)?.series),
+  )
+  const data = useWidgetStore(
+    useShallow((state) => state.getWidget<CategoryWidgetState>(id)?.data),
+  )
+  const maxItems = useWidgetStore(
+    useShallow((state) => state.getWidget<CategoryWidgetState>(id)?.maxItems),
+  )
+  const labels = useWidgetStore(
+    useShallow((state) => state.getWidget<CategoryWidgetState>(id)?.labels),
+  )
+  const onRowClick = useWidgetStore(
+    useShallow((state) => state.getWidget<CategoryWidgetState>(id)?.onRowClick),
+  )
+  const selected = useWidgetStore(
+    useShallow((state) => state.getWidget<CategoryWidgetState>(id)?.selected),
+  )
+  const max = useWidgetStore(
+    useShallow((state) => state.getWidget<CategoryWidgetState>(id)?.max),
   )
 
-  const formatter = widget?.formatter ?? defaultFormatter
-  const series = widget?.series ?? []
-  const data = widget?.data
-  const maxItems = widget?.maxItems
-  const labels = widget?.labels
-  const onRowClick = widget?.onRowClick
-  const selected = widget?.selected
-  const max = widget?.max
+  const formatter = _formatter ?? defaultFormatter
+  const series = _series ?? []
 
   const [maxHeight] = useState<string | number | undefined>(
     maxItems ? 40 * (series.length || 1) * maxItems : undefined,

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

@@ -175,7 +175,7 @@ describe('EchartUI', () => {
 
     expect(mockChart.setOption).toHaveBeenCalledWith(basicOption, {
       lazyUpdate: true,
-      replaceMerge: ['dataset', 'series'],
+      notMerge: true,
     })
   })
 
@@ -200,22 +200,7 @@ describe('EchartUI', () => {
 
     expect(mockChart.setOption).toHaveBeenCalledWith(newOption, {
       lazyUpdate: true,
-      replaceMerge: ['dataset', 'series'],
-    })
-  })
-
-  test('uses provided replaceMerge values', () => {
-    render(
-      <EchartUI
-        {...defaultProps}
-        option={basicOption}
-        replaceMerge={['series']}
-      />,
-    )
-
-    expect(mockChart.setOption).toHaveBeenCalledWith(basicOption, {
-      lazyUpdate: true,
-      replaceMerge: ['series'],
+      notMerge: true,
     })
   })
 
@@ -496,7 +481,7 @@ describe('EchartUI', () => {
 
     expect(mockChart.setOption).toHaveBeenCalledWith(complexOption, {
       lazyUpdate: true,
-      replaceMerge: ['dataset', 'series'],
+      notMerge: true,
     })
   })
 

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

@@ -3,13 +3,8 @@ import * as echarts from 'echarts'
 import type { EchartUIProps } from './types'
 import { useWidgetRef } from '../../hooks'
 
-const DEFAULT_REPLACE_MERGE: string[] = ['dataset', 'series']
-
 export function EchartUI(props: EchartUIProps) {
   const { id, ref, init, option, className, style, onEvents } = props
-  const replaceMerge = toReplaceMerge(
-    (props as { replaceMerge?: unknown }).replaceMerge,
-  )
 
   const chartRef = useWidgetRef<HTMLDivElement>(id)
   const chartInstance = useRef<echarts.ECharts>(null)
@@ -34,16 +29,11 @@ export function EchartUI(props: EchartUIProps) {
 
   // Update chart when options change
   useEffect(() => {
-    const setOptionConfig = {
+    chartInstance.current?.setOption(option, {
       lazyUpdate: true,
-      replaceMerge: replaceMerge ?? DEFAULT_REPLACE_MERGE,
-    }
-
-    chartInstance.current?.setOption(
-      option,
-      setOptionConfig as Parameters<echarts.ECharts['setOption']>[1],
-    )
-  }, [option, replaceMerge])
+      notMerge: true,
+    })
+  }, [option])
 
   // Handle resize using ResizeObserver
   useEffect(() => {
@@ -82,11 +72,3 @@ export function EchartUI(props: EchartUIProps) {
 
   return <div id={id} ref={chartRef} style={style} className={className} />
 }
-
-function toReplaceMerge(value: unknown): string[] | undefined {
-  if (!Array.isArray(value)) {
-    return undefined
-  }
-
-  return value.filter((item): item is string => typeof item === 'string')
-}

package/src/widgets/echart/echart.test.tsx

@@ -184,7 +184,7 @@ describe('Echart', () => {
       }),
       {
         lazyUpdate: true,
-        replaceMerge: ['dataset', 'series'],
+        notMerge: true,
       },
     )
   })
@@ -277,7 +277,7 @@ describe('Echart', () => {
 
     expect(mockChart.setOption).toHaveBeenCalledWith(basicOption, {
       lazyUpdate: true,
-      replaceMerge: ['dataset', 'series'],
+      notMerge: true,
     })
 
     const newOption: EChartsOption = {
@@ -299,7 +299,7 @@ describe('Echart', () => {
 
     expect(mockChart.setOption).toHaveBeenCalledWith(newOption, {
       lazyUpdate: true,
-      replaceMerge: ['dataset', 'series'],
+      notMerge: true,
     })
   })
 
@@ -367,7 +367,7 @@ describe('Echart', () => {
 
     expect(mockChart.setOption).toHaveBeenCalledWith(complexOption, {
       lazyUpdate: true,
-      replaceMerge: ['dataset', 'series'],
+      notMerge: true,
     })
   })
 
@@ -404,7 +404,7 @@ describe('Echart', () => {
     )
     expect(mockChart.setOption).toHaveBeenCalledWith(basicOption, {
       lazyUpdate: true,
-      replaceMerge: ['dataset', 'series'],
+      notMerge: true,
     })
     expect(mockChart.on).toHaveBeenCalledWith('click', clickHandler)
   })
@@ -447,7 +447,7 @@ describe('Echart', () => {
 
     expect(mockChart.setOption).toHaveBeenCalledWith(emptyOption, {
       lazyUpdate: true,
-      replaceMerge: ['dataset', 'series'],
+      notMerge: true,
     })
   })
 
@@ -470,7 +470,7 @@ describe('Echart', () => {
       }),
       {
         lazyUpdate: true,
-        replaceMerge: ['dataset', 'series'],
+        notMerge: true,
       },
     )
   })
@@ -516,7 +516,7 @@ describe('Echart', () => {
 
     expect(mockChart.setOption).toHaveBeenCalledWith(basicOption, {
       lazyUpdate: true,
-      replaceMerge: ['dataset', 'series'],
+      notMerge: true,
     })
 
     rerender(<Echart id='chart-b' />)
@@ -525,27 +525,11 @@ describe('Echart', () => {
       { series: [{ type: 'line', data: [1, 2, 3] }] },
       {
         lazyUpdate: true,
-        replaceMerge: ['dataset', 'series'],
+        notMerge: true,
       },
     )
   })
 
-  test('passes replaceMerge from widget to EchartUI', () => {
-    useWidgetStore.getState().setWidget('test-echart', {
-      id: 'test-echart',
-      type: 'echart',
-      option: basicOption,
-      replaceMerge: ['series'],
-    } as EchartWidgetState)
-
-    render(<Echart id='test-echart' />)
-
-    expect(mockChart.setOption).toHaveBeenCalledWith(basicOption, {
-      lazyUpdate: true,
-      replaceMerge: ['series'],
-    })
-  })
-
   test('disposes chart when component unmounts', () => {
     useWidgetStore.getState().setWidget('test-echart', {
       id: 'test-echart',

package/src/widgets/echart/echart.tsx

@@ -10,43 +10,50 @@ import { useShallow } from 'zustand/shallow'
 import { useMemo } from 'react'
 
 export function Echart(props: EchartProps) {
-  const widget = useWidgetStore(
-    useShallow((state) => {
-      const widget = state.getWidget<EchartWidgetState>(props.id)
-      return {
-        id: widget?.id,
-        data: widget?.data as EchartWidgetData | undefined,
-        option: widget?.option,
-        onEvents: widget?.onEvents,
-        init: widget?.init,
-        replaceMerge: widget?.replaceMerge,
-      }
-    }),
+  const id = useWidgetStore(
+    (state) => state.getWidget<EchartWidgetState>(props.id)?.id,
+  )
+
+  const data = useWidgetStore(
+    useShallow(
+      (state) =>
+        state.getWidget<EchartWidgetState>(props.id)?.data as
+          | EchartWidgetData
+          | undefined,
+    ),
+  )
+
+  const widgetOption = useWidgetStore(
+    useShallow((state) => state.getWidget<EchartWidgetState>(props.id)?.option),
+  )
+
+  const onEvents = useWidgetStore(
+    useShallow(
+      (state) => state.getWidget<EchartWidgetState>(props.id)?.onEvents,
+    ),
+  )
+
+  const init = useWidgetStore(
+    (state) => state.getWidget<EchartWidgetState>(props.id)?.init,
   )
 
   // Memoize dataset transformation to avoid re-computing on every render
-  const dataset = useMemo(() => buildDataset(widget.data), [widget.data])
+  const dataset = useMemo(() => buildDataset(data), [data])
 
-  if (!widget.id) {
+  const option = useMemo<EchartOptionsProps>(
+    () => ({
+      ...widgetOption,
+      ...(dataset && { dataset }),
+    }),
+    [widgetOption, dataset],
+  )
+
+  if (!id) {
     return null
   }
-  const option: EchartOptionsProps = {
-    ...widget.option,
-    ...(dataset && { dataset }),
-  }
-
-  const onEvents = widget.onEvents
-  const init = widget.init
-  const replaceMerge = widget.replaceMerge
 
   return (
-    <EchartUI
-      id={props.id}
-      option={option}
-      onEvents={onEvents}
-      init={init}
-      replaceMerge={replaceMerge}
-    />
+    <EchartUI id={props.id} option={option} onEvents={onEvents} init={init} />
   )
 }