@carto/ps-react-ui 4.3.5 → 4.3.7

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,11 +3,16 @@ import type { WidgetLoaderProps } from './types'
 import { useWidgetStore } from '../stores/widget-store'
 import type { WrapperState } from '../wrapper'
 
-export function WidgetLoader<T>(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,
   )
+  const executeConfigPipeline = useWidgetStore(
+    (state) => state.executeConfigPipeline,
+  )
 
   // Split into 3 effects for metadata and 1 for data pipeline:
   // Each property that can be modified independently gets its own effect to avoid
@@ -35,21 +40,19 @@ export function WidgetLoader<T>(props: WidgetLoaderProps<T>) {
     })
   }, [props.id, props.isLoading, props.isFetching, props.error, setWidget])
 
-  // Effect 3: Config updates
+  // Effect 3: Config updates — run through config pipeline
   useEffect(() => {
     if (props.config) {
-      setWidget<WrapperState>(props.id, {
-        ...props.config,
-      })
+      void executeConfigPipeline(props.id, props.config)
     }
-  }, [props.id, props.config, setWidget])
+  }, [props.id, props.config, executeConfigPipeline])
 
   // Effect 4: Execute tool pipeline when props.data changes
   useEffect(() => {
     void executeToolPipeline(props.id, props.data)
   }, [props.id, props.data, executeToolPipeline])
 
-  // Effect 5: Re-execute pipeline when tool state changes (enabled/config)
+  // Effect 5: Re-execute pipelines when tool state changes (enabled/config)
   useEffect(() => {
     let prevTools = useWidgetStore.getState().widgets[props.id]?.registeredTools
 
@@ -60,11 +63,20 @@ export function WidgetLoader<T>(props: WidgetLoaderProps<T>) {
       if (currentTools !== prevTools) {
         prevTools = currentTools
         void executeToolPipeline(props.id, props.data)
+        if (props.config) {
+          void executeConfigPipeline(props.id, props.config)
+        }
       }
     })
 
     return unsubscribe
-  }, [props.id, props.data, executeToolPipeline])
+  }, [
+    props.id,
+    props.data,
+    props.config,
+    executeToolPipeline,
+    executeConfigPipeline,
+  ])
 
   return props.children
 }

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 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/index.ts

@@ -1,6 +1,7 @@
 export { useWidgetStore } from './widget-store'
 export type {
   BaseWidgetState,
+  ToolType,
   WidgetsStoreProps,
   WidgetState,
   WidgetStore,

package/src/widgets/stores/types.ts

@@ -1,5 +1,12 @@
 import type { RefObject } from 'react'
 
+/**
+ * Tool type determines which pipeline a tool participates in.
+ * - 'data': transforms widget data (default)
+ * - 'config': transforms widget config/option
+ */
+export type ToolType = 'data' | 'config'
+
 export interface WidgetsStoreProps {
   /** Unique identifier for the widget */
   id: string
@@ -77,6 +84,8 @@ export interface ToolRegistration {
   fn: ToolTransformFunction
   /** Whether tool is currently enabled */
   enabled: boolean
+  /** 'data' (default) transforms data, 'config' transforms widget config/option */
+  type?: ToolType
   /** Tool-specific configuration */
   config?: Record<string, unknown>
   /**
@@ -184,6 +193,14 @@ export interface WidgetStoreActions {
    * @param sourceData - Original data to transform
    */
   executeToolPipeline: (widgetId: string, sourceData: unknown) => Promise<void>
+
+  /**
+   * Execute the config transformation pipeline
+   * Applies config-type tools to the base config, then sets the result on the widget
+   * @param widgetId - Widget ID
+   * @param baseConfig - Base config to transform
+   */
+  executeConfigPipeline: (widgetId: string, baseConfig: object) => Promise<void>
 }
 
 /**

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

@@ -465,6 +465,147 @@ describe('WidgetStore', () => {
     })
   })
 
+  describe('Config Tool Pipeline', () => {
+    const widgetId = 'test-widget-config'
+
+    beforeEach(() => {
+      useWidgetStore.getState().clearWidgets()
+    })
+
+    it('executes config tools and sets transformed config', async () => {
+      useWidgetStore.getState().setWidget(widgetId, {
+        type: 'bar',
+        isLoading: false,
+      })
+
+      const configTool: import('./types').ToolRegistration = {
+        id: 'stack-tool',
+        type: 'config',
+        order: 10,
+        enabled: true,
+        fn: (config) => {
+          const c = config as Record<string, unknown>
+          const option = c.option as { series?: { name: string }[] }
+          const series = option?.series ?? []
+          return {
+            ...c,
+            option: {
+              ...option,
+              series: series.map((s) => ({ ...s, stack: 'group' })),
+            },
+          }
+        },
+      }
+
+      useWidgetStore.getState().registerTool(widgetId, configTool)
+
+      await useWidgetStore.getState().executeConfigPipeline(widgetId, {
+        option: {
+          series: [{ name: 'Series 1' }, { name: 'Series 2' }],
+        },
+      })
+
+      const widget = useWidgetStore.getState().getWidget(widgetId)
+      const option = (widget as { option?: { series?: { stack?: string }[] } })
+        ?.option
+      expect(option?.series?.[0]?.stack).toBe('group')
+      expect(option?.series?.[1]?.stack).toBe('group')
+    })
+
+    it('passes base config through when no config tools registered', async () => {
+      useWidgetStore.getState().setWidget(widgetId, {
+        type: 'bar',
+        isLoading: false,
+      })
+
+      await useWidgetStore.getState().executeConfigPipeline(widgetId, {
+        option: { series: [{ name: 'Series 1' }] },
+      })
+
+      const widget = useWidgetStore.getState().getWidget(widgetId)
+      const option = (widget as { option?: { series?: { name: string }[] } })
+        ?.option
+      expect(option?.series?.[0]?.name).toBe('Series 1')
+    })
+
+    it('does not include config tools in data pipeline', async () => {
+      const executionOrder: string[] = []
+
+      useWidgetStore.getState().setWidget(widgetId, {
+        type: 'bar',
+        isLoading: false,
+      })
+
+      const dataTool: import('./types').ToolRegistration = {
+        id: 'data-tool',
+        type: 'data',
+        order: 10,
+        enabled: true,
+        fn: (data) => {
+          executionOrder.push('data-tool')
+          return data
+        },
+      }
+
+      const configTool: import('./types').ToolRegistration = {
+        id: 'config-tool',
+        type: 'config',
+        order: 10,
+        enabled: true,
+        fn: (config) => {
+          executionOrder.push('config-tool')
+          return config
+        },
+      }
+
+      useWidgetStore.getState().registerTool(widgetId, dataTool)
+      useWidgetStore.getState().registerTool(widgetId, configTool)
+
+      await useWidgetStore.getState().executeToolPipeline(widgetId, {})
+
+      expect(executionOrder).toEqual(['data-tool'])
+      expect(executionOrder).not.toContain('config-tool')
+    })
+
+    it('respects disables across tool types', async () => {
+      const executionOrder: string[] = []
+
+      useWidgetStore.getState().setWidget(widgetId, {
+        type: 'bar',
+        isLoading: false,
+      })
+
+      const configTool: import('./types').ToolRegistration = {
+        id: 'config-tool',
+        type: 'config',
+        order: 10,
+        enabled: true,
+        fn: (config) => {
+          executionOrder.push('config-tool')
+          return config
+        },
+      }
+
+      const disablerTool: import('./types').ToolRegistration = {
+        id: 'disabler',
+        type: 'data',
+        order: 10,
+        enabled: true,
+        fn: (data) => data,
+        disables: ['config-tool'],
+      }
+
+      useWidgetStore.getState().registerTool(widgetId, configTool)
+      useWidgetStore.getState().registerTool(widgetId, disablerTool)
+
+      await useWidgetStore.getState().executeConfigPipeline(widgetId, {
+        option: {},
+      })
+
+      expect(executionOrder).not.toContain('config-tool')
+    })
+  })
+
   describe('Tool Dependency Management', () => {
     const widgetId = 'test-widget-deps'