@carto/ps-react-ui 4.4.2 → 4.5.0

package/src/widgets/actions/searcher/searcher.tsx

@@ -1,7 +1,8 @@
 import { TextField, InputAdornment, IconButton } from '@mui/material'
 import { ClearOutlined, SearchOutlined } from '@mui/icons-material'
 import { useEffect, useRef, useCallback } from 'react'
-import { useWidgetStore } from '../../stores/widget-store'
+import { widgetStoreActions } from '../../stores/widget-store'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 import type { SearcherProps, SearcherFilterFn, SearcherState } from './types'
 import type { EchartWidgetData } from '../../echart/types'
 import { LOCK_SELECTION_TOOL_ID } from '../lock-selection/lock-selection'
@@ -41,30 +42,24 @@ export function Searcher({
   const debounceTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
 
   // Read enabled state and search text from widget store
-  const widgetState = useWidgetStore((state) =>
-    state.getWidget<SearcherState>(id),
-  )
-  const enabled = widgetState?.isSearchEnabled ?? false
-  const searchText = widgetState?.searchText ?? ''
+  const { enabled, searchText } = useWidgetSelector(id, (w) => ({
+    enabled: (w as SearcherState | undefined)?.isSearchEnabled ?? false,
+    searchText: (w as SearcherState | undefined)?.searchText ?? '',
+  }))
   const prevEnabledRef = useRef(enabled)
 
   const filter = filterFn ?? defaultFilterFn
 
-  const setWidget = useWidgetStore((state) => state.setWidget)
-  const registerTool = useWidgetStore((state) => state.registerTool)
-  const unregisterTool = useWidgetStore((state) => state.unregisterTool)
-  const updateToolConfig = useWidgetStore((state) => state.updateToolConfig)
-
   const setSearchText = useCallback(
     (text: string) => {
-      setWidget(id, { searchText: text })
+      widgetStoreActions.setWidget(id, { searchText: text })
     },
-    [id, setWidget],
+    [id],
   )
 
-  // Register tool on mount
+  // Register tool with all reactive deps — store's no-op detection handles performance
   useEffect(() => {
-    registerTool(id, {
+    widgetStoreActions.registerTool(id, {
       id: SEARCHER_TOOL_ID,
       order,
       enabled,
@@ -81,8 +76,8 @@ export function Searcher({
       disables: [LOCK_SELECTION_TOOL_ID],
     })
 
-    return () => unregisterTool(id, SEARCHER_TOOL_ID)
-  }, [id, order, filter, registerTool, unregisterTool, enabled, searchText])
+    return () => widgetStoreActions.unregisterTool(id, SEARCHER_TOOL_ID)
+  }, [id, order, enabled, searchText, filter])
 
   // Update config when search text changes (debounced)
   const debouncedUpdateConfig = useCallback(
@@ -91,10 +86,12 @@ export function Searcher({
         clearTimeout(debounceTimeoutRef.current)
       }
       debounceTimeoutRef.current = setTimeout(() => {
-        updateToolConfig(id, SEARCHER_TOOL_ID, { searchText: text })
+        widgetStoreActions.updateToolConfig(id, SEARCHER_TOOL_ID, {
+          searchText: text,
+        })
       }, debounceDelay)
     },
-    [id, updateToolConfig, debounceDelay],
+    [id, debounceDelay],
   )
 
   // Auto-focus when enabled becomes true
@@ -127,11 +124,13 @@ export function Searcher({
 
   const handleClear = useCallback(() => {
     setSearchText('')
-    updateToolConfig(id, SEARCHER_TOOL_ID, { searchText: '' })
+    widgetStoreActions.updateToolConfig(id, SEARCHER_TOOL_ID, {
+      searchText: '',
+    })
     if (inputRef.current) {
       inputRef.current.focus()
     }
-  }, [id, setSearchText, updateToolConfig])
+  }, [id, setSearchText])
 
   if (!enabled) {
     return null

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

@@ -1,6 +1,6 @@
 import { IconButton } from '@mui/material'
 import { useCallback, useEffect, useMemo } from 'react'
-import { useWidgetStore } from '../../stores/widget-store'
+import { widgetStoreActions } from '../../stores/widget-store'
 import type { StackToggleProps, StackToggleState } from './types'
 import { actionButtonStyles } from '../shared/styles'
 import { Tooltip } from '../../../components'
@@ -9,7 +9,7 @@ import { getEChartStackConfig } from '../../echart/utils'
 import { DEFAULT_STACK_GROUP } from '../../echart/const'
 import type { EchartWidgetState } from '../../echart/types'
 import type { EchartOptionsProps } from '../../echart/types'
-import { useShallow } from 'zustand/shallow'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 
 export const STACK_TOGGLE_TOOL_ID = 'stack-toggle'
 
@@ -34,16 +34,10 @@ export function StackToggle({
   Icon,
   IconButtonProps,
 }: StackToggleProps) {
-  const setWidget = useWidgetStore((state) => state.setWidget)
-  const registerTool = useWidgetStore((state) => state.registerTool)
-  const unregisterTool = useWidgetStore((state) => state.unregisterTool)
-  const storeIsStacked = useWidgetStore(
-    useShallow((state) => state.getWidget<StackToggleState>(id)?.isStacked),
-  )
-
-  const option = useWidgetStore(
-    useShallow((state) => state.getWidget<EchartWidgetState>(id)?.option),
-  )
+  const { storeIsStacked, option } = useWidgetSelector(id, (w) => ({
+    storeIsStacked: (w as StackToggleState | undefined)?.isStacked,
+    option: (w as EchartWidgetState | undefined)?.option,
+  }))
 
   const { hasMultiSeries, hasStackInSeries } = useMemo(() => {
     if (!option) return { hasMultiSeries: false, hasStackInSeries: false }
@@ -60,14 +54,14 @@ export function StackToggle({
   const effectiveDefaultIsStacked = hasStackInSeries || defaultIsStacked
   const isStacked = storeIsStacked ?? effectiveDefaultIsStacked
 
-  // Register config tool on mount
+  // Register config tool with all reactive deps — store's no-op detection handles performance
   useEffect(() => {
-    registerTool(id, {
+    widgetStoreActions.registerTool(id, {
       id: STACK_TOGGLE_TOOL_ID,
       type: 'config',
       order: 10,
       enabled: isStacked && hasMultiSeries,
-      fn: (currentConfig) => {
+      fn: (currentConfig: unknown) => {
         const config = currentConfig as Record<string, unknown>
         const option = config.option as EchartOptionsProps | undefined
         if (!option) return currentConfig
@@ -87,18 +81,18 @@ export function StackToggle({
         return { ...config, option: { ...option, series: updatedSeries } }
       },
     })
-    return () => unregisterTool(id, STACK_TOGGLE_TOOL_ID)
-  }, [id, registerTool, unregisterTool, isStacked, hasMultiSeries])
+    return () => widgetStoreActions.unregisterTool(id, STACK_TOGGLE_TOOL_ID)
+  }, [id, isStacked, hasMultiSeries])
 
   // Initialize store with default value only if not already configured
   useEffect(() => {
     if (storeIsStacked !== undefined) return
-    setWidget(id, { isStacked: effectiveDefaultIsStacked })
-  }, [effectiveDefaultIsStacked, id, setWidget, storeIsStacked])
+    widgetStoreActions.setWidget(id, { isStacked: effectiveDefaultIsStacked })
+  }, [effectiveDefaultIsStacked, id, storeIsStacked])
 
   const handleToggle = useCallback(() => {
-    setWidget(id, { isStacked: !isStacked })
-  }, [isStacked, id, setWidget])
+    widgetStoreActions.setWidget(id, { isStacked: !isStacked })
+  }, [isStacked, id])
 
   const tooltipLabel = isStacked
     ? (labels?.unstacked ?? 'Disable stacking')

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

@@ -4,13 +4,13 @@ import {
   ZoomInOutlined,
 } from '@mui/icons-material'
 import { useEffect, useCallback } from 'react'
-import { useWidgetStore } from '../../stores/widget-store'
+import { widgetStoreActions } from '../../stores/widget-store'
 import type { ZoomToggleProps } from './types'
 import { styles } from './style'
 import { Tooltip } from '../../../components'
 import { getEChartZoomConfig } from '../../echart/utils'
 import type { EchartOptionsProps } from '../../echart/types'
-import { useShallow } from 'zustand/shallow'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
 
 export const ZOOM_TOGGLE_TOOL_ID = 'zoom-toggle'
 
@@ -44,24 +44,18 @@ export function ZoomToggle({
   IconButtonProps,
 }: ZoomToggleProps) {
   const theme = useTheme()
-  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 zoomTool = useWidgetStore(
-    useShallow((state) => {
-      const tools = state.getWidget(id)?.registeredTools ?? []
-      return tools.find((tool) => tool.id === ZOOM_TOGGLE_TOOL_ID)
-    }),
-  )
 
-  const zoom = zoomTool?.enabled ?? defaultZoom
-  const zoomStart =
-    (zoomTool?.config?.start as number | undefined) ?? defaultZoomStart
-  const zoomEnd =
-    (zoomTool?.config?.end as number | undefined) ?? defaultZoomEnd
+  const { zoom, zoomStart, zoomEnd } = useWidgetSelector(id, (w) => {
+    const zoomTool = w?.registeredTools?.find(
+      (tool) => tool.id === ZOOM_TOGGLE_TOOL_ID,
+    )
+    return {
+      zoom: zoomTool?.enabled ?? defaultZoom,
+      zoomStart:
+        (zoomTool?.config?.start as number | undefined) ?? defaultZoomStart,
+      zoomEnd: (zoomTool?.config?.end as number | undefined) ?? defaultZoomEnd,
+    }
+  })
 
   // Handle dataZoom event to update zoom range in tool config
   const handleDataZoom = useCallback(
@@ -79,21 +73,21 @@ export function ZoomToggle({
       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, {
+        widgetStoreActions.setToolEnabled(id, ZOOM_TOGGLE_TOOL_ID, true)
+        widgetStoreActions.updateToolConfig(id, ZOOM_TOGGLE_TOOL_ID, {
           start,
           end,
         })
       }
     },
-    [id, setToolEnabled, updateToolConfig],
+    [id],
   )
 
-  // Register config tool on mount
+  // Register config tool with all reactive deps — store's no-op detection handles performance
   useEffect(() => {
-    const existingTool = getWidget(id)?.registeredTools?.find(
-      (tool) => tool.id === ZOOM_TOGGLE_TOOL_ID,
-    )
+    const existingTool = widgetStoreActions
+      .getWidget(id)
+      ?.registeredTools?.find((tool) => tool.id === ZOOM_TOGGLE_TOOL_ID)
 
     const initialEnabled = existingTool?.enabled ?? defaultZoom
     const initialStart =
@@ -101,7 +95,7 @@ export function ZoomToggle({
     const initialEnd =
       (existingTool?.config?.end as number | undefined) ?? defaultZoomEnd
 
-    registerTool(id, {
+    widgetStoreActions.registerTool(id, {
       id: ZOOM_TOGGLE_TOOL_ID,
       type: 'config',
       order: 20,
@@ -160,31 +154,21 @@ export function ZoomToggle({
         end: initialEnd,
       },
     })
-    return () => unregisterTool(id, ZOOM_TOGGLE_TOOL_ID)
-  }, [
-    defaultZoom,
-    defaultZoomEnd,
-    defaultZoomStart,
-    getWidget,
-    handleDataZoom,
-    id,
-    registerTool,
-    theme,
-    unregisterTool,
-  ])
+    return () => widgetStoreActions.unregisterTool(id, ZOOM_TOGGLE_TOOL_ID)
+  }, [id, theme, handleDataZoom, defaultZoom, defaultZoomStart, defaultZoomEnd])
 
   const handleToggle = () => {
     const newZoom = !zoom
-    setToolEnabled(id, ZOOM_TOGGLE_TOOL_ID, newZoom)
-    updateToolConfig(id, ZOOM_TOGGLE_TOOL_ID, {
+    widgetStoreActions.setToolEnabled(id, ZOOM_TOGGLE_TOOL_ID, newZoom)
+    widgetStoreActions.updateToolConfig(id, ZOOM_TOGGLE_TOOL_ID, {
       start: newZoom ? zoomStart : 0,
       end: newZoom ? zoomEnd : 100,
     })
   }
 
   const handleReset = () => {
-    setToolEnabled(id, ZOOM_TOGGLE_TOOL_ID, true)
-    updateToolConfig(id, ZOOM_TOGGLE_TOOL_ID, {
+    widgetStoreActions.setToolEnabled(id, ZOOM_TOGGLE_TOOL_ID, true)
+    widgetStoreActions.updateToolConfig(id, ZOOM_TOGGLE_TOOL_ID, {
       start: defaultZoomStart,
       end: defaultZoomEnd,
     })

package/src/widgets/bar/config.ts

@@ -11,6 +11,7 @@ import {
   createTooltipPositioner,
   createTooltipFormatter,
   createChartDownloadConfig,
+  applyXAxisFormatter,
   niceNum,
 } from '../utils/chart-config'
 
@@ -29,6 +30,7 @@ export function barConfig(props: BarConfig): BarWidgetConfig {
     type: 'bar',
     option: mergeEchartWidgetConfig(getCommonOptions(props), getOption(props)),
     formatter: props.formatter,
+    labelFormatter: props.labelFormatter,
   }
 }
 
@@ -36,6 +38,7 @@ function getOption({
   data = [],
   theme,
   formatter,
+  labelFormatter,
 }: BarConfig): EchartOptionsProps {
   const hasLegend = (data?.length ?? 0) > 1
 
@@ -43,21 +46,24 @@ function getOption({
   let niceMax = 1
 
   return {
-    legend: buildLegendConfig(hasLegend),
+    legend: buildLegendConfig({ hasLegend, labelFormatter }),
     grid: buildGridConfig(hasLegend, theme),
-    xAxis: {
-      type: 'category',
-      axisLine: {
-        show: false,
-      },
-      axisTick: {
-        show: false,
-      },
-      axisLabel: {
-        padding: [parseInt(theme.spacing(0.5)), 0, 0, 0],
-        margin: 0,
+    xAxis: applyXAxisFormatter(
+      {
+        type: 'category',
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          padding: [parseInt(theme.spacing(0.5)), 0, 0, 0],
+          margin: 0,
+        },
       },
-    },
+      labelFormatter,
+    ),
     yAxis: {
       type: 'value' as const,
       min: (extent: { min: number }) => {
@@ -110,7 +116,9 @@ function getOption({
 
         const marker = typeof item.marker === 'string' ? item.marker : ''
         const seriesName = item.seriesName ? `${item.seriesName}: ` : ''
-        const name = item.name ?? ''
+        const name = labelFormatter
+          ? String(labelFormatter(item.name ?? ''))
+          : (item.name ?? '')
 
         return { name, seriesName, marker, value: formattedValue }
       }),

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

@@ -1,5 +1,5 @@
 import { Box, useTheme } from '@mui/material'
-import { useWidgetStore } from '../stores/widget-store'
+import { useWidgetSelector } from '../stores/use-widget-selector'
 import { styles } from './style'
 import type { CategoryUIProps, CategoryWidgetState } from './types'
 import {
@@ -8,41 +8,43 @@ import {
   CategoryRowOther,
   CategoryLegend,
 } from './components'
-import { useShallow } from 'zustand/shallow'
 import { useState } from 'react'
-import { defaultFormatter } from '../utils/formatter'
+import { defaultFormatter, defaultLabelFormatter } from '../utils/formatter'
 
 /**
  * Renders a category widget displaying horizontal bars for categorical data with support for single and multi-series layouts, selection, and overflow grouping.
  */
 export function CategoryUI({ id }: CategoryUIProps) {
   const theme = useTheme()
-  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),
-  )
+
+  // Single consolidated subscription instead of 9 separate ones.
+  const {
+    _formatter,
+    _labelFormatter,
+    _series,
+    data,
+    maxItems,
+    labels,
+    onRowClick,
+    selected,
+    max,
+  } = useWidgetSelector(id, (w) => {
+    const cw = w as CategoryWidgetState | undefined
+    return {
+      _formatter: cw?.formatter,
+      _labelFormatter: cw?.labelFormatter,
+      _series: cw?.series,
+      data: cw?.data,
+      maxItems: cw?.maxItems,
+      labels: cw?.labels,
+      onRowClick: cw?.onRowClick,
+      selected: cw?.selected,
+      max: cw?.max,
+    }
+  })
 
   const formatter = _formatter ?? defaultFormatter
+  const labelFormatter = _labelFormatter ?? defaultLabelFormatter
   const series = _series ?? []
 
   const [maxHeight] = useState<string | number | undefined>(
@@ -100,6 +102,7 @@ export function CategoryUI({ id }: CategoryUIProps) {
                 maxValue={maxValue}
                 colors={colors}
                 formatter={formatter}
+                labelFormatter={labelFormatter}
                 onClick={onRowClick}
                 selected={selected?.(item.name) ?? true}
               />
@@ -113,6 +116,7 @@ export function CategoryUI({ id }: CategoryUIProps) {
                 maxValue={maxValue}
                 color={colors[0]!}
                 formatter={formatter}
+                labelFormatter={labelFormatter}
                 onClick={onRowClick}
               />
             ))}

package/src/widgets/category/components/category-row-multi.tsx

@@ -9,6 +9,7 @@ export interface CategoryRowMultiProps {
   maxValue: number
   colors: string[]
   formatter: NonNullable<CategoryWidgetConfig['formatter']>
+  labelFormatter?: CategoryWidgetConfig['labelFormatter']
   onClick?: CategoryWidgetConfig['onRowClick']
   selected?: boolean
 }
@@ -22,6 +23,7 @@ export function CategoryRowMulti({
   maxValue,
   colors,
   formatter,
+  labelFormatter,
   onClick,
   selected = true,
 }: CategoryRowMultiProps) {
@@ -30,10 +32,12 @@ export function CategoryRowMulti({
 
   return (
     <Box sx={rowStyle} onClick={handleClick}>
-      <Typography sx={styles.rowLabel}>{name}</Typography>
+      <Typography sx={styles.rowLabel}>
+        {labelFormatter ? labelFormatter(name) : name}
+      </Typography>
       <Box sx={styles.barContainer}>
         {values.map((value, index) => (
-          <Box key={`${name}-${value}`} sx={styles.multiBarRow}>
+          <Box key={`${name}-${value}-${index}`} sx={styles.multiBarRow}>
             <Box sx={styles.multiBarContainer}>
               <CategoryBar
                 value={value}

package/src/widgets/category/components/category-row-single.tsx

@@ -9,6 +9,7 @@ export interface CategoryRowSingleProps {
   maxValue: number
   color: string
   formatter: NonNullable<CategoryWidgetConfig['formatter']>
+  labelFormatter?: CategoryWidgetConfig['labelFormatter']
   onClick?: CategoryWidgetConfig['onRowClick']
   selected?: boolean
 }
@@ -22,6 +23,7 @@ export function CategoryRowSingle({
   maxValue,
   color,
   formatter,
+  labelFormatter,
   onClick,
   selected = true,
 }: CategoryRowSingleProps) {
@@ -36,7 +38,9 @@ export function CategoryRowSingle({
   return (
     <Box sx={rowStyle} onClick={handleClick}>
       <Box sx={styles.rowHeader}>
-        <Typography sx={styles.rowLabel}>{name}</Typography>
+        <Typography sx={styles.rowLabel}>
+          {labelFormatter ? labelFormatter(name) : name}
+        </Typography>
         <Typography sx={styles.rowValue}>{formatter(value)}</Typography>
       </Box>
       <CategoryBar

package/src/widgets/category/types.ts

@@ -29,6 +29,7 @@ export type CategoryWidgetState = BaseWidgetState<
 
 export interface CategoryWidgetConfig {
   formatter?: (value: number) => string
+  labelFormatter?: (value: string | number) => string | number
   series?: CategorySeriesConfig[]
   maxItems?: number
   labels?: CategoryLabels

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

@@ -3,6 +3,7 @@ import { render } from '@testing-library/react'
 import { EchartUI } from './echart-ui'
 import type { EChartsOption } from 'echarts'
 import * as echarts from 'echarts'
+import { resetSharedResizeObserver } from './shared-resize-observer'
 
 // Mock echarts module
 vi.mock('echarts', () => {
@@ -36,6 +37,7 @@ describe('EchartUI', () => {
     disconnect: ReturnType<typeof vi.fn>
     unobserve: ReturnType<typeof vi.fn>
   }
+  let resizeObserverCallback: ResizeObserverCallback | undefined
 
   const defaultProps = {
     id: 'test-echart',
@@ -73,6 +75,9 @@ describe('EchartUI', () => {
       mockChart as unknown as echarts.ECharts,
     )
 
+    // Reset the shared observer so each test gets a fresh one using the mock
+    resetSharedResizeObserver()
+
     // Mock ResizeObserver
     mockResizeObserver = {
       observe: vi.fn(),
@@ -80,7 +85,12 @@ describe('EchartUI', () => {
       unobserve: vi.fn(),
     }
 
+    resizeObserverCallback = undefined
+
     global.ResizeObserver = class {
+      constructor(callback: ResizeObserverCallback) {
+        resizeObserverCallback = callback
+      }
       observe = mockResizeObserver.observe
       disconnect = mockResizeObserver.disconnect
       unobserve = mockResizeObserver.unobserve
@@ -245,32 +255,26 @@ describe('EchartUI', () => {
     )
   })
 
-  test('disconnects ResizeObserver on unmount', () => {
+  test('unobserves element from shared ResizeObserver on unmount', () => {
     const { unmount } = render(
       <EchartUI {...defaultProps} option={basicOption} />,
     )
 
     unmount()
 
-    expect(mockResizeObserver.disconnect).toHaveBeenCalled()
+    // The shared observer calls unobserve() for the specific element, not disconnect()
+    expect(mockResizeObserver.unobserve).toHaveBeenCalled()
   })
 
   test('calls resize on chart when ResizeObserver triggers', () => {
-    let resizeCallback: ResizeObserverCallback
-
-    global.ResizeObserver = class {
-      constructor(callback: ResizeObserverCallback) {
-        resizeCallback = callback
-      }
-      observe = mockResizeObserver.observe
-      disconnect = mockResizeObserver.disconnect
-      unobserve = mockResizeObserver.unobserve
-    } as unknown as typeof ResizeObserver
-
     render(<EchartUI {...defaultProps} option={basicOption} />)
 
-    // Trigger resize callback
-    resizeCallback!([], mockResizeObserver as unknown as ResizeObserver)
+    // Trigger the shared observer's callback with a mock entry targeting the chart element
+    const chartElement = document.getElementById(defaultProps.id)!
+    const entries: ResizeObserverEntry[] = [
+      { target: chartElement } as unknown as ResizeObserverEntry,
+    ]
+    resizeObserverCallback!(entries, {} as ResizeObserver)
 
     expect(mockChart.resize).toHaveBeenCalled()
   })
@@ -517,6 +521,6 @@ describe('EchartUI', () => {
     unmount()
 
     expect(mockChart.dispose).toHaveBeenCalled()
-    expect(mockResizeObserver.disconnect).toHaveBeenCalled()
+    expect(mockResizeObserver.unobserve).toHaveBeenCalled()
   })
 })

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

@@ -2,6 +2,7 @@ import { useEffect, useRef, useImperativeHandle } from 'react'
 import * as echarts from 'echarts'
 import type { EchartUIProps } from './types'
 import { useWidgetRef } from '../../hooks'
+import { observeResize } from './shared-resize-observer'
 
 /**
  * Presentational component that initializes and manages an Apache ECharts instance.
@@ -16,7 +17,6 @@ export function EchartUI(props: EchartUIProps) {
   const { ref: chartRef, instance: chartInstanceRef } =
     useWidgetRef<HTMLDivElement>(id)
   const chartInstance = useRef<echarts.ECharts>(null)
-  const resizeObserverRef = useRef<ResizeObserver | null>(null)
 
   useImperativeHandle(ref, () => chartInstance.current!, [])
 
@@ -45,19 +45,13 @@ export function EchartUI(props: EchartUIProps) {
     })
   }, [option])
 
-  // Handle resize using ResizeObserver
+  // Handle resize using shared ResizeObserver (single instance for all charts)
   useEffect(() => {
-    const handleResize = () => {
-      chartInstance.current?.resize()
-    }
-
-    resizeObserverRef.current = new ResizeObserver(handleResize)
-    resizeObserverRef.current.observe(chartRef.current!)
+    if (!chartRef.current) return
 
-    return () => {
-      resizeObserverRef.current?.disconnect()
-      resizeObserverRef.current = null
-    }
+    return observeResize(chartRef.current, () => {
+      chartInstance.current?.resize()
+    })
   }, [chartRef])
 
   useEffect(() => {