@carto/ps-react-ui 4.3.6 → 4.3.7

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} />
   )
 }
 

package/src/widgets/echart/types.ts

@@ -5,14 +5,12 @@ import type { Ref } from 'react'
 import { theme as CartoTheme } from '@carto/meridian-ds/theme'
 
 export type EchartOptionsProps = EChartsOption
-export type EchartReplaceMerge = string[]
 
 export interface EchartUIProps {
   id: string
   option: EchartOptionsProps
   className?: string
   init?: echarts.EChartsInitOpts
-  replaceMerge?: EchartReplaceMerge
   style?: React.CSSProperties
   ref?: Ref<echarts.ECharts>
   onEvents?: Record<string, Parameters<echarts.ECharts['on']>[2]>
@@ -28,7 +26,6 @@ export type EchartWidgetState = BaseWidgetState<{
   option: EchartUIProps['option']
   onEvents?: EchartUIProps['onEvents']
   init?: EchartUIProps['init']
-  replaceMerge?: EchartReplaceMerge
 }>
 
 export interface EchartWidgetOptionProps<D> {
@@ -41,5 +38,4 @@ export interface EchartWidgetProps {
   type: string
   option: EchartUIProps['option']
   onEvents?: EchartUIProps['onEvents']
-  replaceMerge?: EchartReplaceMerge
 }

package/src/widgets/echart/utils.ts

@@ -35,12 +35,14 @@ export function getEChartZoomConfig(
     ySlider = false,
     showSliders = true,
     xAxisLabelFormatter,
+    bottomOffset = 0,
   } = {} as {
     inside?: boolean
     xSlider?: boolean
     ySlider?: boolean
     showSliders?: boolean
     xAxisLabelFormatter?: (value: number) => string
+    bottomOffset?: number
   },
   theme?: Theme,
 ) {
@@ -72,7 +74,7 @@ export function getEChartZoomConfig(
         throttle: 0,
         type: 'slider',
         xAxisIndex: [0],
-        bottom: 0,
+        bottom: bottomOffset,
         height: parseInt(theme?.spacing?.(4) ?? '32'),
         show: zoom && showSliders,
         zoomLock: !zoom,

package/src/widgets/error/error.tsx

@@ -3,28 +3,31 @@ import { useWidgetStore } from '../stores/widget-store'
 import { useShallow } from 'zustand/shallow'
 import type { WidgetErrorProps } from './types'
 
-export function WidgetError({ id, children }: WidgetErrorProps) {
-  const widget = useWidgetStore(
-    useShallow((state) => {
-      const w = state.widgets[id]
-      return {
-        isLoading: w?.isLoading,
-        isFetching: w?.isFetching,
-        error: w?.error,
-      }
-    }),
+export function WidgetError({
+  id,
+  children,
+  title: titleProp,
+  description,
+}: WidgetErrorProps) {
+  const isLoading = useWidgetStore(
+    useShallow((state) => state.widgets[id]?.isLoading),
   )
+  const isFetching = useWidgetStore(
+    useShallow((state) => state.widgets[id]?.isFetching),
+  )
+  const error = useWidgetStore(useShallow((state) => state.widgets[id]?.error))
 
   // Don't show error during loading/fetching states
-  if (widget?.isLoading || widget?.isFetching) {
+  if (isLoading || isFetching) {
     return children
   }
 
   // Show error UI if error exists
-  if (widget?.error) {
-    const errorTitle = widget.error.title ?? 'Error'
+  if (error) {
+    const errorTitle = titleProp ?? error.title ?? 'Error'
     const errorMessage =
-      widget.error.message ??
+      description ??
+      error.message ??
       'An error occurred while loading the widget. Please try again.'
 
     return (

package/src/widgets/error/types.ts

@@ -11,4 +11,14 @@ export interface WidgetErrorProps {
    * Children to render when no error exists
    */
   children: ReactNode
+
+  /**
+   * Override error title
+   */
+  title?: string
+
+  /**
+   * Override error description/message
+   */
+  description?: string
 }

package/src/widgets/formula/components/value.tsx

@@ -6,20 +6,20 @@ import { useShallow } from 'zustand/shallow'
 const defaultFormatter = (value: number) => value.toString()
 
 export function Value({ id, index = 0, ...props }: ValueProps) {
-  const {
-    value,
-    color,
-    formatter = defaultFormatter,
-  } = useWidgetStore(
-    useShallow((state) => {
-      const widget = state.getWidget<FormulaWidgetState>(id)
-      return {
-        value: widget?.data?.[index]?.value,
-        color: widget?.data?.[index]?.color,
-        formatter: widget?.formatter,
-      }
-    }),
+  const value = useWidgetStore(
+    useShallow(
+      (state) => state.getWidget<FormulaWidgetState>(id)?.data?.[index]?.value,
+    ),
   )
+  const color = useWidgetStore(
+    useShallow(
+      (state) => state.getWidget<FormulaWidgetState>(id)?.data?.[index]?.color,
+    ),
+  )
+  const formatter =
+    useWidgetStore(
+      useShallow((state) => state.getWidget<FormulaWidgetState>(id)?.formatter),
+    ) ?? defaultFormatter
 
   return (
     <Item TypographyProps={{ color }} {...props}>

package/src/widgets/histogram/config.ts

@@ -14,7 +14,7 @@ import {
   buildGridConfig,
   createTooltipPositioner,
   createTooltipFormatter,
-  applyYAxisFormatter,
+  niceNum,
 } from '../_shared/chart-config'
 import { downloadToCSV, downloadToPNG, type DownloadItem } from '../actions'
 import type { ConfigProps } from '../loader/types'
@@ -49,33 +49,7 @@ function getOption({
 }: HistogramConfig): EchartOptionsProps {
   const hasLegend = (data?.length ?? 0) > 1
 
-  const yAxis = {
-    type: 'value' as const,
-    showMaxLabel: true,
-    showMinLabel: true,
-    splitNumber: 1,
-    axisLabel: {
-      fontSize: theme.typography.overlineDelicate.fontSize,
-      fontFamily: theme.typography.overlineDelicate.fontFamily,
-      margin: parseInt(theme.spacing(1)),
-      show: true,
-      showMaxLabel: true,
-      showMinLabel: true,
-      verticalAlign: 'bottom' as const,
-    },
-    axisLine: {
-      show: false,
-    },
-    axisTick: {
-      show: false,
-    },
-    splitLine: {
-      show: true,
-      lineStyle: {
-        color: theme.palette.black[4],
-      },
-    },
-  }
+  let niceMax = 1
 
   return {
     legend: buildLegendConfig(hasLegend),
@@ -110,7 +84,40 @@ function getOption({
         },
       },
     },
-    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: true,
+        verticalAlign: 'bottom' as const,
+        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/loader/loader.tsx

@@ -3,7 +3,9 @@ import type { WidgetLoaderProps } from './types'
 import { useWidgetStore } from '../stores/widget-store'
 import type { WrapperState } from '../wrapper'
 
-export function WidgetLoader<T extends Record<string, unknown> = Record<string, unknown>>(props: WidgetLoaderProps<T>) {
+export function WidgetLoader<T extends object = Record<string, unknown>>(
+  props: WidgetLoaderProps<T>,
+) {
   const setWidget = useWidgetStore((state) => state.setWidget)
   const executeToolPipeline = useWidgetStore(
     (state) => state.executeToolPipeline,

package/src/widgets/loader/types.ts

@@ -1,7 +1,9 @@
 import type { ReactNode } from 'react'
 import type { WidgetsStoreProps, WidgetState } from '../stores/types'
 
-export interface WidgetLoaderProps<T extends Record<string, unknown> = Record<string, unknown>> extends WidgetsStoreProps {
+export interface WidgetLoaderProps<
+  T extends object = Record<string, unknown>,
+> extends WidgetsStoreProps {
   children: ReactNode
   config?: T
 }

package/src/widgets/no-data/no-data.tsx

@@ -45,25 +45,22 @@ export function WidgetNoData({
   isEmpty = defaultIsEmpty,
 }: WidgetNoDataProps) {
   // Subscribe to widget store with selective subscription for optimal performance
-  const widget = useWidgetStore(
-    useShallow((state) => {
-      const w = state.widgets[id]
-      return {
-        isLoading: w?.isLoading,
-        isFetching: w?.isFetching,
-        data: w?.data,
-      }
-    }),
+  const isLoading = useWidgetStore(
+    useShallow((state) => state.widgets[id]?.isLoading),
   )
+  const isFetching = useWidgetStore(
+    useShallow((state) => state.widgets[id]?.isFetching),
+  )
+  const data = useWidgetStore(useShallow((state) => state.widgets[id]?.data))
 
   // If loading or fetching, show children
   // SkeletonLoader handles loading state, this allows proper composition
-  if (widget?.isLoading || widget?.isFetching) {
+  if (isLoading || isFetching) {
     return children
   }
 
   // Check if data is empty
-  if (isEmpty(widget?.data)) {
+  if (isEmpty(data)) {
     return (
       <Box sx={styles.root}>
         <Typography variant='body2' color='text.primary'>

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

@@ -10,20 +10,16 @@ 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 item = useWidgetStore(
+    useShallow((state) => state.getWidget<RangeWidgetState>(id)?.data[index]),
+  )
+  const onChange = useWidgetStore(
+    useShallow((state) => state.getWidget<RangeWidgetState>(id)?.onChange),
   )
+  const formatter =
+    useWidgetStore(
+      useShallow((state) => state.getWidget<RangeWidgetState>(id)?.formatter),
+    ) ?? defaultFormatter
   const getWidget = useWidgetStore((store) => store.getWidget)
   const setWidget = useWidgetStore((store) => store.setWidget)
 

package/src/widgets/spread/components/max-value.tsx

@@ -6,20 +6,20 @@ import { useShallow } from 'zustand/shallow'
 const defaultFormatter = (value: number) => value.toString()
 
 export function MaxValue({ id, index = 0, ...props }: ValueProps) {
-  const {
-    max,
-    color,
-    formatter = defaultFormatter,
-  } = useWidgetStore(
-    useShallow((state) => {
-      const widget = state.getWidget<SpreadWidgetState>(id)
-      return {
-        max: widget?.data[index]?.max,
-        color: widget?.data[index]?.color,
-        formatter: widget?.formatter,
-      }
-    }),
+  const max = useWidgetStore(
+    useShallow(
+      (state) => state.getWidget<SpreadWidgetState>(id)?.data[index]?.max,
+    ),
   )
+  const color = useWidgetStore(
+    useShallow(
+      (state) => state.getWidget<SpreadWidgetState>(id)?.data[index]?.color,
+    ),
+  )
+  const formatter =
+    useWidgetStore(
+      useShallow((state) => state.getWidget<SpreadWidgetState>(id)?.formatter),
+    ) ?? defaultFormatter
 
   return (
     <Item TypographyProps={{ color }} {...props}>

package/src/widgets/spread/components/min-value.tsx

@@ -6,20 +6,20 @@ import { useShallow } from 'zustand/shallow'
 const defaultFormatter = (value: number) => value.toString()
 
 export function MinValue({ id, index = 0, ...props }: ValueProps) {
-  const {
-    min,
-    color,
-    formatter = defaultFormatter,
-  } = useWidgetStore(
-    useShallow((state) => {
-      const widget = state.getWidget<SpreadWidgetState>(id)
-      return {
-        min: widget?.data[index]?.min,
-        color: widget?.data[index]?.color,
-        formatter: widget?.formatter,
-      }
-    }),
+  const min = useWidgetStore(
+    useShallow(
+      (state) => state.getWidget<SpreadWidgetState>(id)?.data[index]?.min,
+    ),
   )
+  const color = useWidgetStore(
+    useShallow(
+      (state) => state.getWidget<SpreadWidgetState>(id)?.data[index]?.color,
+    ),
+  )
+  const formatter =
+    useWidgetStore(
+      useShallow((state) => state.getWidget<SpreadWidgetState>(id)?.formatter),
+    ) ?? defaultFormatter
 
   return (
     <Item TypographyProps={{ color }} {...props}>

package/src/widgets/stores/types.ts

@@ -200,10 +200,7 @@ export interface WidgetStoreActions {
    * @param widgetId - Widget ID
    * @param baseConfig - Base config to transform
    */
-  executeConfigPipeline: (
-    widgetId: string,
-    baseConfig: Record<string, unknown>,
-  ) => Promise<void>
+  executeConfigPipeline: (widgetId: string, baseConfig: object) => Promise<void>
 }
 
 /**

package/src/widgets/stores/widget-store.ts

@@ -243,10 +243,7 @@ export const useWidgetStore = create<WidgetStore>()((set, get) => ({
     }
   },
 
-  executeConfigPipeline: async (
-    widgetId: string,
-    baseConfig: Record<string, unknown>,
-  ) => {
+  executeConfigPipeline: async (widgetId: string, baseConfig: object) => {
     const widget = get().widgets[widgetId]
     if (!widget) return
 
@@ -272,29 +269,6 @@ export const useWidgetStore = create<WidgetStore>()((set, get) => ({
       )
       .sort((a, b) => a.order - b.order)
 
-    // If no config tools, just set the base config directly
-    if (sortedTools.length === 0) {
-      set((state) => {
-        const currentWidget = state.widgets[widgetId]
-        if (!currentWidget) return state
-
-        return {
-          widgets: {
-            ...state.widgets,
-            [widgetId]: {
-              ...currentWidget,
-              ...baseConfig,
-            },
-          },
-        }
-      })
-
-      if (activeConfigPipelines.get(widgetId) === currentExecution) {
-        activeConfigPipelines.delete(widgetId)
-      }
-      return
-    }
-
     // Chain config tools
     let transformedConfig: unknown = baseConfig
     for (const tool of sortedTools) {