@carto/ps-react-ui 4.4.0-chat-ui.6 → 4.4.0-chat-ui.7

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

@@ -10,12 +10,12 @@ describe('WidgetNoData', () => {
     useWidgetStore.getState().clearWidgets()
   })
 
-  describe('when data is empty', () => {
+  describe('when sourceData is empty', () => {
     test('renders NoData UI with empty array', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: [],
+        sourceData: [],
       })
 
       render(
@@ -31,11 +31,11 @@ describe('WidgetNoData', () => {
       expect(screen.queryByText('Widget Content')).toBeNull()
     })
 
-    test('renders NoData UI with null data', () => {
+    test('renders NoData UI with null sourceData', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: null,
+        sourceData: null,
       })
 
       render(
@@ -48,11 +48,11 @@ describe('WidgetNoData', () => {
       expect(screen.queryByText('Widget Content')).toBeNull()
     })
 
-    test('renders NoData UI with undefined data', () => {
+    test('renders NoData UI with undefined sourceData', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: undefined,
+        sourceData: undefined,
       })
 
       render(
@@ -69,7 +69,7 @@ describe('WidgetNoData', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: [[], []],
+        sourceData: [[], []],
       })
 
       render(
@@ -86,7 +86,7 @@ describe('WidgetNoData', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: {},
+        sourceData: {},
       })
 
       render(
@@ -100,12 +100,12 @@ describe('WidgetNoData', () => {
     })
   })
 
-  describe('when data exists', () => {
-    test('renders children with array data', () => {
+  describe('when sourceData exists', () => {
+    test('renders children with array sourceData', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: [{ value: 1 }],
+        sourceData: [{ value: 1 }],
       })
 
       render(
@@ -118,11 +118,11 @@ describe('WidgetNoData', () => {
       expect(screen.queryByText('No data available')).toBeNull()
     })
 
-    test('renders children with object data', () => {
+    test('renders children with object sourceData', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: { content: 'Hello' },
+        sourceData: { content: 'Hello' },
       })
 
       render(
@@ -135,11 +135,11 @@ describe('WidgetNoData', () => {
       expect(screen.queryByText('No data available')).toBeNull()
     })
 
-    test('renders children with nested array data', () => {
+    test('renders children with nested array sourceData', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: [[{ name: 'A', value: 1 }]],
+        sourceData: [[{ name: 'A', value: 1 }]],
       })
 
       render(
@@ -152,11 +152,11 @@ describe('WidgetNoData', () => {
       expect(screen.queryByText('No data available')).toBeNull()
     })
 
-    test('renders children with primitive data (number)', () => {
+    test('renders children with primitive sourceData (number)', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: 0,
+        sourceData: 0,
       })
 
       render(
@@ -169,11 +169,11 @@ describe('WidgetNoData', () => {
       expect(screen.queryByText('No data available')).toBeNull()
     })
 
-    test('renders children with primitive data (string)', () => {
+    test('renders children with primitive sourceData (string)', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: 'test',
+        sourceData: 'test',
       })
 
       render(
@@ -186,11 +186,11 @@ describe('WidgetNoData', () => {
       expect(screen.queryByText('No data available')).toBeNull()
     })
 
-    test('renders children with primitive data (boolean)', () => {
+    test('renders children with primitive sourceData (boolean)', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: false,
+        sourceData: false,
       })
 
       render(
@@ -205,11 +205,10 @@ describe('WidgetNoData', () => {
   })
 
   describe('when loading or fetching', () => {
-    test('renders children when isLoading=true even if data is empty', () => {
+    test('renders children when isLoading=true even if sourceData is empty', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: true,
         isFetching: false,
-        data: [],
       })
 
       render(
@@ -222,11 +221,10 @@ describe('WidgetNoData', () => {
       expect(screen.queryByText('No data available')).toBeNull()
     })
 
-    test('renders children when isFetching=true even if data is empty', () => {
+    test('renders children when isFetching=true even if sourceData is empty', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: true,
-        data: [],
       })
 
       render(
@@ -243,7 +241,6 @@ describe('WidgetNoData', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: true,
         isFetching: true,
-        data: [],
       })
 
       render(
@@ -262,7 +259,7 @@ describe('WidgetNoData', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: [],
+        sourceData: [],
       })
 
       render(
@@ -279,7 +276,7 @@ describe('WidgetNoData', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: [],
+        sourceData: [],
       })
 
       render(
@@ -298,10 +295,10 @@ describe('WidgetNoData', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: { customField: 'value' },
+        sourceData: { customField: 'value' },
       })
 
-      // Custom isEmpty that treats this object as empty
+      // Custom isEmpty that treats this sourceData as empty
       const customIsEmpty = (data: unknown) => {
         const d = data as { customField: string }
         return d?.customField === 'value'
@@ -321,7 +318,7 @@ describe('WidgetNoData', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: [],
+        sourceData: [],
       })
 
       // Custom isEmpty that treats empty array as having data
@@ -352,12 +349,66 @@ describe('WidgetNoData', () => {
     })
   })
 
+  describe('sourceData vs pipeline-transformed data', () => {
+    test('renders children when sourceData has data but pipeline data is empty', () => {
+      useWidgetStore.getState().setWidget(widgetId, {
+        isLoading: false,
+        isFetching: false,
+        sourceData: [{ value: 1 }, { value: 2 }],
+        data: [], // pipeline filtered everything out
+      })
+
+      render(
+        <WidgetNoData id={widgetId}>
+          <div>Widget Content</div>
+        </WidgetNoData>,
+      )
+
+      // Should show children because sourceData is not empty
+      expect(screen.getByText('Widget Content')).toBeTruthy()
+      expect(screen.queryByText('No data available')).toBeNull()
+    })
+
+    test('renders NoData when both sourceData and data are empty', () => {
+      useWidgetStore.getState().setWidget(widgetId, {
+        isLoading: false,
+        isFetching: false,
+        sourceData: [],
+      })
+
+      render(
+        <WidgetNoData id={widgetId}>
+          <div>Widget Content</div>
+        </WidgetNoData>,
+      )
+
+      expect(screen.getByText('No data available')).toBeTruthy()
+      expect(screen.queryByText('Widget Content')).toBeNull()
+    })
+
+    test('renders NoData when sourceData is null (API returned nothing)', () => {
+      useWidgetStore.getState().setWidget(widgetId, {
+        isLoading: false,
+        isFetching: false,
+        sourceData: null,
+      })
+
+      render(
+        <WidgetNoData id={widgetId}>
+          <div>Widget Content</div>
+        </WidgetNoData>,
+      )
+
+      expect(screen.getByText('No data available')).toBeTruthy()
+      expect(screen.queryByText('Widget Content')).toBeNull()
+    })
+  })
+
   describe('reactivity to store changes', () => {
-    test('updates from NoData to content when data arrives', () => {
+    test('updates from NoData to content when sourceData arrives', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: [],
       })
 
       const { rerender } = render(
@@ -369,9 +420,9 @@ describe('WidgetNoData', () => {
       expect(screen.getByText('No data available')).toBeTruthy()
       expect(screen.queryByText('Widget Content')).toBeNull()
 
-      // Update with data
+      // Update with sourceData
       useWidgetStore.getState().setWidget(widgetId, {
-        data: [{ value: 1 }],
+        sourceData: [{ value: 1 }],
       })
 
       // Force rerender to pick up store changes
@@ -385,11 +436,11 @@ describe('WidgetNoData', () => {
       expect(screen.queryByText('No data available')).toBeNull()
     })
 
-    test('updates from content to NoData when data becomes empty', () => {
+    test('updates from content to NoData when sourceData becomes empty', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: [{ value: 1 }],
+        sourceData: [{ value: 1 }],
       })
 
       const { rerender } = render(
@@ -401,8 +452,8 @@ describe('WidgetNoData', () => {
       expect(screen.getByText('Widget Content')).toBeTruthy()
       expect(screen.queryByText('No data available')).toBeNull()
 
-      // Clear data
-      useWidgetStore.getState().setWidget(widgetId, { data: [] })
+      // Clear sourceData
+      useWidgetStore.getState().setWidget(widgetId, { sourceData: [] })
 
       // Force rerender to pick up store changes
       rerender(
@@ -419,7 +470,6 @@ describe('WidgetNoData', () => {
       useWidgetStore.getState().setWidget(widgetId, {
         isLoading: false,
         isFetching: false,
-        data: [],
       })
 
       const { rerender } = render(

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

@@ -1,14 +1,14 @@
 import { Box, Typography } from '@mui/material'
-import { useShallow } from 'zustand/shallow'
-import { useWidgetStore } from '../stores/widget-store'
+import { useWidgetSelector } from '../stores/use-widget-selector'
 import type { WidgetNoDataProps } from './types'
 import { styles } from './style'
 
 /**
  * NoData wrapper component that displays empty state UI when widget has no data
  *
- * Integrates with widget store to check loading/fetching state and data availability.
- * Works in conjunction with SkeletonLoader for complete loading/empty state handling.
+ * Integrates with widget store to check loading/fetching state and source data availability.
+ * Uses `sourceData` (pre-pipeline data) instead of `data` (post-pipeline) to distinguish
+ * "API returned nothing" from "pipeline tools filtered everything out".
  *
  * @example Basic usage
  * ```tsx
@@ -44,14 +44,13 @@ export function WidgetNoData({
   description = 'There are no results for the combination of filters applied to your data. Try tweaking your filters, or zoom and pan the map to adjust filters',
   isEmpty = defaultIsEmpty,
 }: WidgetNoDataProps) {
-  // Subscribe to widget store with selective subscription for optimal performance
-  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))
+  // Single consolidated subscription instead of 3 separate ones.
+  // Reads sourceData (pre-pipeline) to check emptiness, not data (post-pipeline).
+  const { isLoading, isFetching, sourceData } = useWidgetSelector(id, (w) => ({
+    isLoading: w?.isLoading,
+    isFetching: w?.isFetching,
+    sourceData: w?.sourceData,
+  }))
 
   // If loading or fetching, show children
   // SkeletonLoader handles loading state, this allows proper composition
@@ -60,7 +59,7 @@ export function WidgetNoData({
   }
 
   // Check if data is empty
-  if (isEmpty(data)) {
+  if (isEmpty(sourceData)) {
     return (
       <Box sx={styles.root}>
         <Typography variant='body2' color='text.primary'>

package/src/widgets/no-data/types.ts

@@ -59,7 +59,11 @@ export interface WidgetNoDataProps {
   description?: string
 
   /**
-   * Optional custom function to determine if data is empty
+   * Optional custom function to determine if source data is empty.
+   * Receives `sourceData` (pre-pipeline data from the API), not `data`
+   * (post-pipeline). This allows distinguishing "API returned nothing"
+   * from "pipeline tools filtered everything out".
+   *
    * If not provided, uses default isEmpty logic that handles:
    * - null/undefined → empty
    * - [] (empty array) → empty

package/src/widgets/note/note.tsx

@@ -37,6 +37,16 @@ const COMPONENTS: Components = {
   li: DEFAULT_P,
 }
 
+/**
+ * Displays text content with markdown support and automatic show more/less functionality for long content. Automatically detects content exceeding 3 lines and shows an expand/collapse button.
+ *
+ * @example
+ * ```tsx
+ * <WidgetNote>
+ *   {"**Important:** This data is from Q4 2024."}
+ * </WidgetNote>
+ * ```
+ */
 export function WidgetNote({
   children,
   labels = DEFAULT_LABELS,

package/src/widgets/pie/config.ts

@@ -8,33 +8,29 @@ import {
   buildGridConfig,
   buildLegendConfig,
   flattenObjectArrayToCSV,
+  createTooltipPositioner,
   createTooltipFormatter,
-} from '../_shared/chart-config'
-import { downloadToCSV, downloadToPNG, type DownloadItem } from '../actions'
-import type { ConfigProps } from '../loader/types'
-
-export function pieDownloadConfig({
-  refUI,
-}: ConfigProps): DownloadItem<PieWidgetData>[] {
-  return [
-    {
-      ...downloadToPNG,
-      modifier: () => downloadToPNG.modifier(refUI),
-    },
-    {
-      ...downloadToCSV,
-      modifier: async (data) => {
-        const rows = flattenObjectArrayToCSV(data)
-        return downloadToCSV.modifier(rows)
-      },
-    },
-  ]
-}
+  createChartDownloadConfig,
+  niceNum,
+  buildSeriesLabelConfig,
+} from '../utils/chart-config'
 
+export const pieDownloadConfig = createChartDownloadConfig<PieWidgetData>(
+  flattenObjectArrayToCSV,
+)
+
+/**
+ * Generates ECharts configuration for pie and donut chart widgets. Falls back to a horizontal bar layout when multiple data series are provided.
+ *
+ * @param props - Pie chart configuration including data and theme.
+ * @returns Widget config with ECharts option object.
+ */
 export function pieConfig(props: PieConfig): PieWidgetConfig {
   return {
     type: 'pie',
     option: mergeEchartWidgetConfig(getCommonOptions(props), getOption(props)),
+    formatter: props.formatter,
+    labelFormatter: props.labelFormatter,
   }
 }
 
@@ -42,26 +38,94 @@ function getOption({
   data = [],
   theme,
   formatter,
+  labelFormatter,
 }: PieConfig): EchartOptionsProps {
   const multiSeries = (data?.length ?? 0) > 1
 
   if (multiSeries) {
+    let niceMin = 0
+    let niceMax = 1
+
     return {
+      legend: buildLegendConfig({ hasLegend: true, labelFormatter }),
+      grid: {
+        ...buildGridConfig(true, theme),
+        right: parseInt(theme.spacing(4)),
+      },
       xAxis: {
         type: 'value',
-        show: true,
+        min: (extent: { min: number }) => {
+          niceMin = extent.min < 0 ? niceNum(extent.min) : 0
+          return niceMin
+        },
+        max: (extent: { min: number; max: number }) => {
+          niceMax = extent.max <= 0 ? 1 : niceNum(extent.max)
+          return niceMax
+        },
+        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,
+          inside: true,
+          formatter: (value: number) => {
+            if (value !== niceMax && value !== niceMin) return ''
+            if (value === 0) return ''
+            return formatter ? formatter(value) : String(value)
+          },
+        },
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: theme.palette.black[4],
+          },
+        },
       },
       yAxis: {
         type: 'category',
-        show: true,
-      },
-      legend: {
-        show: true,
-        bottom: 0,
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          padding: [parseInt(theme.spacing(0.5)), 0, 0, 0],
+          ...(labelFormatter && {
+            formatter: (value: string | number) =>
+              String(labelFormatter(value)),
+          }),
+        },
       },
-      grid: {
-        bottom: parseInt(theme.spacing(4)),
-        right: parseInt(theme.spacing(4)),
+      tooltip: {
+        position: createTooltipPositioner(theme),
+        formatter: createTooltipFormatter((item) => {
+          const value = item.value as Record<string, string | number>
+          const index = item.dimensionNames?.[item.encode?.x?.at(0) ?? 1]
+          const _value = value[index ?? '']
+
+          const formattedValue =
+            typeof _value === 'number' && formatter
+              ? formatter(_value)
+              : (_value ?? '')
+
+          const marker = typeof item.marker === 'string' ? item.marker : ''
+          const seriesName = item.seriesName ? `${item.seriesName}: ` : ''
+          const name = labelFormatter
+            ? String(labelFormatter(item.name ?? ''))
+            : (item.name ?? '')
+
+          return { name, seriesName, marker, value: formattedValue }
+        }),
       },
       series: data.map((_: unknown, index: number) => ({
         datasetIndex: index,
@@ -70,6 +134,7 @@ function getOption({
         emphasis: {
           focus: 'series',
         },
+        ...buildSeriesLabelConfig(formatter, 'x'),
       })),
     }
   }
@@ -77,7 +142,7 @@ function getOption({
   const hasLegend = true
 
   return {
-    legend: buildLegendConfig(hasLegend),
+    legend: buildLegendConfig({ hasLegend, labelFormatter }),
     grid: {
       ...buildGridConfig(hasLegend, theme),
       left: 0,
@@ -109,7 +174,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,
@@ -148,7 +215,9 @@ function getOption({
               ? formatter(value)
               : (value ?? '')
 
-          const nameFormatted = name
+          const nameFormatted = labelFormatter
+            ? String(labelFormatter(name ?? ''))
+            : (name ?? '')
 
           return `{c|${formattedValue}}\n\n{b|${nameFormatted}}`
         },

package/src/widgets/pie/style.ts

@@ -1,5 +1,5 @@
 import type { SxProps, Theme } from '@mui/material'
-import { baseSkeletonStyles } from '../_shared/skeleton'
+import { baseSkeletonStyles } from '../utils/skeleton'
 
 export const styles = {
   skeleton: {