@carto/ps-react-ui 4.3.6 → 4.3.8

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

@@ -1,9 +1,11 @@
-import { useEffect } from 'react'
+import { useEffect, useRef, useSyncExternalStore } from 'react'
 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,
@@ -12,6 +14,20 @@ export function WidgetLoader<T extends Record<string, unknown> = Record<string,
     (state) => state.executeConfigPipeline,
   )
 
+  const registeredTools = useSyncExternalStore(
+    useWidgetStore.subscribe,
+    () => useWidgetStore.getState().widgets[props.id]?.registeredTools,
+  )
+
+  const dataRef = useRef(props.data)
+  const configRef = useRef(props.config)
+  const isMountedRef = useRef(false)
+
+  useEffect(() => {
+    dataRef.current = props.data
+    configRef.current = props.config
+  })
+
   // Split into 3 effects for metadata and 1 for data pipeline:
   // Each property that can be modified independently gets its own effect to avoid
   // accidentally resetting other properties.
@@ -50,31 +66,18 @@ export function WidgetLoader<T extends Record<string, unknown> = Record<string,
     void executeToolPipeline(props.id, props.data)
   }, [props.id, props.data, executeToolPipeline])
 
-  // Effect 5: Re-execute pipelines when tool state changes (enabled/config)
+  // Effect 5: Re-execute pipelines when registered tools change
   useEffect(() => {
-    let prevTools = useWidgetStore.getState().widgets[props.id]?.registeredTools
-
-    const unsubscribe = useWidgetStore.subscribe((state) => {
-      const currentTools = state.widgets[props.id]?.registeredTools
-
-      // Only re-execute if tools array changed
-      if (currentTools !== prevTools) {
-        prevTools = currentTools
-        void executeToolPipeline(props.id, props.data)
-        if (props.config) {
-          void executeConfigPipeline(props.id, props.config)
-        }
-      }
-    })
+    if (!isMountedRef.current) {
+      isMountedRef.current = true
+      return
+    }
 
-    return unsubscribe
-  }, [
-    props.id,
-    props.data,
-    props.config,
-    executeToolPipeline,
-    executeConfigPipeline,
-  ])
+    void executeToolPipeline(props.id, dataRef.current)
+    if (configRef.current) {
+      void executeConfigPipeline(props.id, configRef.current)
+    }
+  }, [registeredTools, props.id, 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 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) {

package/src/widgets/table/hooks/use-pagination.ts

@@ -48,19 +48,39 @@ export function usePagination<T extends TableRow>(
   // Get store actions and state
   const setWidget = useWidgetStore((state) => state.setWidget)
   const getWidget = useWidgetStore((state) => state.getWidget)
-  const paginationState = useWidgetStore(
-    useShallow((state) => {
-      const widget = state.widgets[widgetId] as TableWidgetState | undefined
-      return {
-        paginationEnabled: !!widget?.pagination,
-        page: widget?.pagination?.page ?? DEFAULT_PAGE,
-        rowsPerPage: widget?.pagination?.rowsPerPage ?? DEFAULT_ROWS_PER_PAGE,
-        rowsPerPageOptions:
-          widget?.pagination?.rowsPerPageOptions ??
-          DEFAULT_ROWS_PER_PAGE_OPTIONS,
-        total: widget?.pagination?.total ?? data.length,
-      }
-    }),
+  const paginationEnabled = useWidgetStore(
+    useShallow(
+      (state) =>
+        !!(state.widgets[widgetId] as TableWidgetState | undefined)?.pagination,
+    ),
+  )
+  const page = useWidgetStore(
+    useShallow(
+      (state) =>
+        (state.widgets[widgetId] as TableWidgetState | undefined)?.pagination
+          ?.page ?? DEFAULT_PAGE,
+    ),
+  )
+  const rowsPerPage = useWidgetStore(
+    useShallow(
+      (state) =>
+        (state.widgets[widgetId] as TableWidgetState | undefined)?.pagination
+          ?.rowsPerPage ?? DEFAULT_ROWS_PER_PAGE,
+    ),
+  )
+  const rowsPerPageOptions = useWidgetStore(
+    useShallow(
+      (state) =>
+        (state.widgets[widgetId] as TableWidgetState | undefined)?.pagination
+          ?.rowsPerPageOptions ?? DEFAULT_ROWS_PER_PAGE_OPTIONS,
+    ),
+  )
+  const total = useWidgetStore(
+    useShallow(
+      (state) =>
+        (state.widgets[widgetId] as TableWidgetState | undefined)?.pagination
+          ?.total ?? data.length,
+    ),
   )
 
   const mode = useWidgetStore(
@@ -71,10 +91,7 @@ export function usePagination<T extends TableRow>(
   )
 
   // Calculate max page
-  const maxPage = Math.max(
-    0,
-    Math.ceil(paginationState.total / (paginationState?.rowsPerPage ?? 1)) - 1,
-  )
+  const maxPage = Math.max(0, Math.ceil(total / (rowsPerPage ?? 1)) - 1)
 
   // Set page with bounds checking
   const setPage = useCallback(
@@ -118,32 +135,24 @@ export function usePagination<T extends TableRow>(
   // Navigation helpers
   const goToFirstPage = useCallback(() => setPage(0), [setPage])
   const goToLastPage = useCallback(() => setPage(maxPage), [setPage, maxPage])
-  const goToNextPage = useCallback(
-    () => setPage(paginationState.page + 1),
-    [setPage, paginationState.page],
-  )
-  const goToPreviousPage = useCallback(
-    () => setPage(paginationState.page - 1),
-    [setPage, paginationState.page],
-  )
+  const goToNextPage = useCallback(() => setPage(page + 1), [setPage, page])
+  const goToPreviousPage = useCallback(() => setPage(page - 1), [setPage, page])
 
   // Paginated data for local mode
   const paginatedData = useMemo(() => {
-    if (mode === 'remote' || !paginationState.paginationEnabled) {
+    if (mode === 'remote' || !paginationEnabled) {
       // For remote mode, data is already paginated from server
       return data
     }
-    return paginateData(data, paginationState.page, paginationState.rowsPerPage)
-  }, [
-    data,
-    mode,
-    paginationState.page,
-    paginationState.paginationEnabled,
-    paginationState.rowsPerPage,
-  ])
+    return paginateData(data, page, rowsPerPage)
+  }, [data, mode, page, paginationEnabled, rowsPerPage])
 
   return {
-    ...paginationState,
+    paginationEnabled,
+    page,
+    rowsPerPage,
+    rowsPerPageOptions,
+    total,
     paginatedData,
     setPage,
     setRowsPerPage,