@carto/ps-react-ui 4.3.6 → 4.3.7

package/src/widgets/actions/stack-toggle/stack-toggle.test.tsx

@@ -39,14 +39,17 @@ describe('StackToggle', () => {
     expect(button).toBeTruthy()
   })
 
-  test('toggles to stacked mode and updates widget store', () => {
+  test('toggles to stacked mode and updates tool config', () => {
     render(<StackToggle id={widgetId} />)
 
     const button = screen.getByRole('button')
     fireEvent.click(button)
 
     const widget = useWidgetStore.getState().getWidget(widgetId)
-    expect((widget as { isStacked?: boolean })?.isStacked).toBe(true)
+    const tool = widget?.registeredTools?.find(
+      (t) => t.id === STACK_TOGGLE_TOOL_ID,
+    )
+    expect(tool?.config?.stacked).toBe(true)
   })
 
   test('toggles back to unstacked mode', () => {
@@ -61,7 +64,10 @@ describe('StackToggle', () => {
     fireEvent.click(button)
 
     const widget = useWidgetStore.getState().getWidget(widgetId)
-    expect((widget as { isStacked?: boolean })?.isStacked).toBe(false)
+    const tool = widget?.registeredTools?.find(
+      (t) => t.id === STACK_TOGGLE_TOOL_ID,
+    )
+    expect(tool?.config?.stacked).toBe(false)
   })
 
   test('has active state when in stacked mode', () => {
@@ -99,18 +105,24 @@ describe('StackToggle', () => {
     expect(button).toBeTruthy()
   })
 
-  test('initializes store with default values on mount', () => {
+  test('initializes tool config with default values on mount', () => {
     render(<StackToggle id={widgetId} />)
 
     const widget = useWidgetStore.getState().getWidget(widgetId)
-    expect((widget as { isStacked?: boolean })?.isStacked).toBe(false)
+    const tool = widget?.registeredTools?.find(
+      (t) => t.id === STACK_TOGGLE_TOOL_ID,
+    )
+    expect(tool?.config?.stacked).toBe(false)
   })
 
-  test('initializes store with stacked values when defaultIsStacked is true', () => {
+  test('initializes tool config with stacked values when defaultIsStacked is true', () => {
     render(<StackToggle id={widgetId} defaultIsStacked />)
 
     const widget = useWidgetStore.getState().getWidget(widgetId)
-    expect((widget as { isStacked?: boolean })?.isStacked).toBe(true)
+    const tool = widget?.registeredTools?.find(
+      (t) => t.id === STACK_TOGGLE_TOOL_ID,
+    )
+    expect(tool?.config?.stacked).toBe(true)
   })
 
   test('applies stack to EChart series via config pipeline when toggling to stacked', async () => {
@@ -279,7 +291,6 @@ describe('StackToggle', () => {
   test('config tool re-applies stack when config pipeline re-runs', async () => {
     // Start with stacked widget
     useWidgetStore.getState().setWidget(widgetId, {
-      isStacked: true,
       option: {
         series: [
           { name: 'Series 1', type: 'bar', stack: DEFAULT_STACK_GROUP },
@@ -313,7 +324,6 @@ describe('StackToggle', () => {
   test('config tool does not apply stack when unstacked and pipeline re-runs', async () => {
     // Start with unstacked widget
     useWidgetStore.getState().setWidget(widgetId, {
-      isStacked: false,
       option: {
         series: [
           { name: 'Series 1', type: 'bar' },

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

@@ -1,7 +1,7 @@
 import { IconButton } from '@mui/material'
 import { useCallback, useEffect, useMemo } from 'react'
 import { useWidgetStore } from '../../stores/widget-store'
-import type { StackToggleProps, StackToggleState } from './types'
+import type { StackToggleProps } from './types'
 import { actionButtonStyles } from '../shared/styles'
 import { Tooltip } from '../../../components'
 import { GroupedBarChartIcon } from './grouped-bar-chart-icon'
@@ -34,14 +34,17 @@ export function StackToggle({
   Icon,
   IconButtonProps,
 }: StackToggleProps) {
-  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 storeIsStacked = useWidgetStore(
-    useShallow((state) => state.getWidget<StackToggleState>(id)?.isStacked),
+  const stackTool = useWidgetStore(
+    useShallow((state) => {
+      const tools = state.getWidget(id)?.registeredTools ?? []
+      return tools.find((tool) => tool.id === STACK_TOGGLE_TOOL_ID)
+    }),
   )
 
   const option = useWidgetStore(
@@ -61,15 +64,25 @@ export function StackToggle({
 
   // If series already has stack defined, default to stacked=true
   const effectiveDefaultIsStacked = hasStackInSeries || defaultIsStacked
-  const isStacked = storeIsStacked ?? effectiveDefaultIsStacked
+  const isStacked =
+    (stackTool?.config?.stacked as boolean | undefined) ??
+    effectiveDefaultIsStacked
 
   // Register config tool on mount
   useEffect(() => {
+    const existingTool = getWidget(id)?.registeredTools?.find(
+      (tool) => tool.id === STACK_TOGGLE_TOOL_ID,
+    )
+
+    const initialStacked =
+      (existingTool?.config?.stacked as boolean | undefined) ??
+      effectiveDefaultIsStacked
+
     registerTool(id, {
       id: STACK_TOGGLE_TOOL_ID,
       type: 'config',
       order: 10,
-      enabled: isStacked && hasMultiSeries,
+      enabled: initialStacked && hasMultiSeries,
       fn: (currentConfig, toolConfig) => {
         const config = currentConfig as Record<string, unknown>
         const option = config.option as EchartOptionsProps | undefined
@@ -90,26 +103,23 @@ export function StackToggle({
 
         return { ...config, option: { ...option, series: updatedSeries } }
       },
-      config: { stacked: isStacked },
+      config: { stacked: initialStacked },
     })
     return () => unregisterTool(id, STACK_TOGGLE_TOOL_ID)
-  }, [id, registerTool, unregisterTool, isStacked, hasMultiSeries])
-
-  // Sync tool enabled/config when state changes
-  useEffect(() => {
-    setToolEnabled(id, STACK_TOGGLE_TOOL_ID, isStacked && hasMultiSeries)
-    updateToolConfig(id, STACK_TOGGLE_TOOL_ID, { stacked: isStacked })
-  }, [id, isStacked, hasMultiSeries, setToolEnabled, updateToolConfig])
-
-  // Initialize store with default value only if not already configured
-  useEffect(() => {
-    if (storeIsStacked !== undefined) return
-    setWidget(id, { isStacked: effectiveDefaultIsStacked })
-  }, [effectiveDefaultIsStacked, id, setWidget, storeIsStacked])
+  }, [
+    id,
+    registerTool,
+    unregisterTool,
+    effectiveDefaultIsStacked,
+    hasMultiSeries,
+    getWidget,
+  ])
 
   const handleToggle = useCallback(() => {
-    setWidget(id, { isStacked: !isStacked })
-  }, [isStacked, id, setWidget])
+    const newStacked = !isStacked
+    setToolEnabled(id, STACK_TOGGLE_TOOL_ID, newStacked && hasMultiSeries)
+    updateToolConfig(id, STACK_TOGGLE_TOOL_ID, { stacked: newStacked })
+  }, [isStacked, hasMultiSeries, id, setToolEnabled, updateToolConfig])
 
   const tooltipLabel = isStacked
     ? (labels?.unstacked ?? 'Disable stacking')

package/src/widgets/actions/stack-toggle/types.ts

@@ -1,7 +1,5 @@
 import type { IconButtonProps } from '@mui/material'
 import type { ReactNode } from 'react'
-import type { BaseWidgetState } from '../../stores/types'
-
 export interface StackToggleProps {
   /** Widget ID to update stack configuration in the widget store */
   id: string
@@ -21,9 +19,3 @@ export interface StackToggleProps {
   /** Custom icon to display */
   Icon?: ReactNode
 }
-
-export type StackToggleState<T = unknown> = BaseWidgetState<
-  T & {
-    isStacked?: boolean
-  }
->

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

@@ -5,11 +5,10 @@ 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'
 
@@ -45,143 +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 zoomStart = useWidgetStore(
-    useShallow((state) => {
-      const widget = state.getWidget<ZoomState>(id)
-      return widget?.zoomStart ?? defaultZoomStart
-    }),
-  )
+  const zoom = zoomTool?.enabled ?? defaultZoom
+  const zoomStart =
+    (zoomTool?.config?.start as number | undefined) ?? defaultZoomStart
+  const zoomEnd =
+    (zoomTool?.config?.end as number | undefined) ?? defaultZoomEnd
 
-  const zoomEnd = useWidgetStore(
-    useShallow((state) => {
-      const widget = state.getWidget<ZoomState>(id)
-      return widget?.zoomEnd ?? 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,
+        })
+      }
+    },
+    [id, setToolEnabled, updateToolConfig],
   )
 
   // Register config tool on mount
   useEffect(() => {
+    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: zoom,
+      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 },
+          {
+            inside: true,
+            xSlider: true,
+            ySlider: false,
+            bottomOffset: legendBottomOffset,
+          },
           theme,
         )
-        return { ...config, option: { ...option, ...zoomConfig } }
+
+        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,
       },
-      config: { enabled: zoom, start: zoomStart, end: zoomEnd },
     })
     return () => unregisterTool(id, ZOOM_TOGGLE_TOOL_ID)
-  }, [id, registerTool, unregisterTool, zoom, theme, zoomStart, zoomEnd])
-
-  // Sync tool enabled/config when state changes
-  useEffect(() => {
-    setToolEnabled(id, ZOOM_TOGGLE_TOOL_ID, zoom)
-    updateToolConfig(id, ZOOM_TOGGLE_TOOL_ID, {
-      enabled: zoom,
-      start: zoomStart,
-      end: zoomEnd,
-    })
-  }, [id, zoom, zoomStart, zoomEnd, setToolEnabled, updateToolConfig])
-
-  // Initialize zoom state from defaults only if not already set
-  useEffect(() => {
-    const existingState = getWidget<ZoomState>(id)
-
-    if (existingState?.zoom) return
-
-    setWidget<ZoomState>(id, {
-      zoom: existingState?.zoom ?? defaultZoom,
-      zoomStart: existingState?.zoomStart ?? defaultZoomStart,
-      zoomEnd: existingState?.zoomEnd ?? defaultZoomEnd,
-    })
-  }, [defaultZoom, defaultZoomEnd, defaultZoomStart, getWidget, id, setWidget])
-
-  // Cleanup: disable zoom when component unmounts
-  useEffect(() => {
-    return () => {
-      setWidget<ZoomState>(id, { zoom: false })
-    }
-  }, [id, setWidget])
+  }, [
+    defaultZoom,
+    defaultZoomEnd,
+    defaultZoomStart,
+    getWidget,
+    handleDataZoom,
+    id,
+    registerTool,
+    theme,
+    unregisterTool,
+  ])
 
   const handleToggle = () => {
     const newZoom = !zoom
-    const existingState = getWidget<ZoomState>(id)
-
-    setWidget<ZoomState>(id, {
-      zoom: newZoom,
-      zoomStart: newZoom ? (existingState?.zoomStart ?? defaultZoomStart) : 0,
-      zoomEnd: 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 = () => {
-    setWidget<ZoomState>(id, {
-      zoom: true,
-      zoomStart: defaultZoomStart,
-      zoomEnd: 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) {
-        setWidget<ZoomState>(id, {
-          zoom: true,
-          zoomStart: start,
-          zoomEnd: end,
-        })
-      }
-    },
-    [id, setWidget],
-  )
-
-  // 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,
     })
   })