@carto/ps-react-ui 4.20.1 → 4.21.1

package/src/components/responsive-drawer/responsive-drawer.test.tsx

@@ -10,8 +10,8 @@ const theme = createTheme()
 describe('ResponsiveDrawer', () => {
   const mockOnChangeCollapsed = vi.fn()
 
-  // A real anchor element: the desktop Popover only opens when `ref != null`
-  // (the open-by-default guard), and positioning needs a DOM node.
+  // A real anchor element: the desktop Popover only opens when the anchor is
+  // non-null (the open-by-default guard), and positioning needs a DOM node.
   let anchor: HTMLElement
 
   const defaultProps = {
@@ -32,10 +32,20 @@ describe('ResponsiveDrawer', () => {
     anchor.remove()
   })
 
+  test('accepts the anchor through the deprecated `ref` alias', () => {
+    render(
+      <ThemeProvider theme={theme}>
+        <ResponsiveDrawer ref={anchor} {...defaultProps} />
+      </ThemeProvider>,
+    )
+
+    expect(screen.getByTestId('drawer-content')).toBeDefined()
+  })
+
   test('renders in desktop mode when isMobile is false', () => {
     const { container } = render(
       <ThemeProvider theme={theme}>
-        <ResponsiveDrawer ref={anchor} {...defaultProps} />
+        <ResponsiveDrawer anchorEl={anchor} {...defaultProps} />
       </ThemeProvider>,
     )
 
@@ -50,12 +60,12 @@ describe('ResponsiveDrawer', () => {
     expect(presentationElements.length).toBe(0)
   })
 
-  test('does not open the desktop popover until the anchor ref resolves', () => {
-    // Open-by-default guard: collapsed=false but ref=null → stays closed so the
-    // popover never renders with a null anchorEl.
+  test('does not open the desktop popover until the anchor resolves', () => {
+    // Open-by-default guard: collapsed=false but anchorEl=null → stays closed so
+    // the popover never renders with a null anchorEl.
     render(
       <ThemeProvider theme={theme}>
-        <ResponsiveDrawer ref={null} {...defaultProps} />
+        <ResponsiveDrawer anchorEl={null} {...defaultProps} />
       </ThemeProvider>,
     )
     expect(screen.queryByTestId('drawer-content')).toBeNull()
@@ -64,7 +74,7 @@ describe('ResponsiveDrawer', () => {
   test('renders in mobile mode when isMobile is true', () => {
     render(
       <ThemeProvider theme={theme}>
-        <ResponsiveDrawer ref={anchor} {...defaultProps} isMobile={true} />
+        <ResponsiveDrawer anchorEl={anchor} {...defaultProps} isMobile={true} />
       </ThemeProvider>,
     )
 
@@ -82,7 +92,11 @@ describe('ResponsiveDrawer', () => {
   test('hides content when collapsed is true in desktop mode', () => {
     render(
       <ThemeProvider theme={theme}>
-        <ResponsiveDrawer ref={anchor} {...defaultProps} collapsed={true} />
+        <ResponsiveDrawer
+          anchorEl={anchor}
+          {...defaultProps}
+          collapsed={true}
+        />
       </ThemeProvider>,
     )
 
@@ -94,7 +108,7 @@ describe('ResponsiveDrawer', () => {
   test('closes drawer when clicking outside in mobile mode', () => {
     const { container } = render(
       <ThemeProvider theme={theme}>
-        <ResponsiveDrawer ref={anchor} {...defaultProps} isMobile={true} />
+        <ResponsiveDrawer anchorEl={anchor} {...defaultProps} isMobile={true} />
       </ThemeProvider>,
     )
 
@@ -119,7 +133,7 @@ describe('ResponsiveDrawer', () => {
         render(
           <ThemeProvider theme={theme}>
             <ResponsiveDrawer
-              ref={anchor}
+              anchorEl={anchor}
               {...defaultProps}
               position={position}
             />
@@ -132,7 +146,7 @@ describe('ResponsiveDrawer', () => {
   test('modal (default): renders an (invisible) backdrop', () => {
     render(
       <ThemeProvider theme={theme}>
-        <ResponsiveDrawer ref={anchor} {...defaultProps} />
+        <ResponsiveDrawer anchorEl={anchor} {...defaultProps} />
       </ThemeProvider>,
     )
     // The popover portals to document.body, so query the whole document.
@@ -145,7 +159,7 @@ describe('ResponsiveDrawer', () => {
       render(
         <ThemeProvider theme={theme}>
           <ResponsiveDrawer
-            ref={anchor}
+            anchorEl={anchor}
             {...defaultProps}
             slotProps={slotProps}
           />
@@ -157,7 +171,7 @@ describe('ResponsiveDrawer', () => {
   test('defaults to portaling into document.body when container is omitted', () => {
     render(
       <ThemeProvider theme={theme}>
-        <ResponsiveDrawer ref={anchor} {...defaultProps} />
+        <ResponsiveDrawer anchorEl={anchor} {...defaultProps} />
       </ThemeProvider>,
     )
     const content = screen.getByTestId('drawer-content')
@@ -172,7 +186,7 @@ describe('ResponsiveDrawer', () => {
       render(
         <ThemeProvider theme={theme}>
           <ResponsiveDrawer
-            ref={anchor}
+            anchorEl={anchor}
             {...defaultProps}
             container={customContainer}
           />
@@ -197,7 +211,7 @@ describe('ResponsiveDrawer', () => {
       render(
         <ThemeProvider theme={theme}>
           <ResponsiveDrawer
-            ref={anchor}
+            anchorEl={anchor}
             {...defaultProps}
             container={customContainer}
           />
@@ -225,7 +239,7 @@ describe('ResponsiveDrawer', () => {
   test('leaves paper maxHeight unset when no container is given', () => {
     render(
       <ThemeProvider theme={theme}>
-        <ResponsiveDrawer ref={anchor} {...defaultProps} />
+        <ResponsiveDrawer anchorEl={anchor} {...defaultProps} />
       </ThemeProvider>,
     )
     const paper = document.querySelector<HTMLElement>('.MuiPopover-paper')!
@@ -247,7 +261,7 @@ describe('ResponsiveDrawer', () => {
       render(
         <ThemeProvider theme={theme}>
           <ResponsiveDrawer
-            ref={anchor}
+            anchorEl={anchor}
             {...defaultProps}
             container={customContainer}
           />
@@ -271,7 +285,7 @@ describe('ResponsiveDrawer', () => {
       render(
         <ThemeProvider theme={theme}>
           <ResponsiveDrawer
-            ref={anchor}
+            anchorEl={anchor}
             {...defaultProps}
             container={customContainer}
             slotProps={
@@ -297,7 +311,7 @@ describe('ResponsiveDrawer', () => {
       render(
         <ThemeProvider theme={theme}>
           <ResponsiveDrawer
-            ref={anchor}
+            anchorEl={anchor}
             {...defaultProps}
             sx={{ zIndex: 9999 }}
           />
@@ -311,7 +325,7 @@ describe('ResponsiveDrawer', () => {
   test('non-modal: renders no backdrop', () => {
     render(
       <ThemeProvider theme={theme}>
-        <ResponsiveDrawer ref={anchor} {...defaultProps} modal={false} />
+        <ResponsiveDrawer anchorEl={anchor} {...defaultProps} modal={false} />
       </ThemeProvider>,
     )
     expect(document.querySelector('.MuiBackdrop-root')).toBeNull()
@@ -322,7 +336,7 @@ describe('ResponsiveDrawer', () => {
   test('non-modal: Escape does not close the panel', () => {
     render(
       <ThemeProvider theme={theme}>
-        <ResponsiveDrawer ref={anchor} {...defaultProps} modal={false} />
+        <ResponsiveDrawer anchorEl={anchor} {...defaultProps} modal={false} />
       </ThemeProvider>,
     )
     // Fire on a node inside the Modal root so it reaches the Modal's key handler.
@@ -336,7 +350,7 @@ describe('ResponsiveDrawer', () => {
   test('modal (default): Escape closes the panel', () => {
     render(
       <ThemeProvider theme={theme}>
-        <ResponsiveDrawer ref={anchor} {...defaultProps} />
+        <ResponsiveDrawer anchorEl={anchor} {...defaultProps} />
       </ThemeProvider>,
     )
     fireEvent.keyDown(screen.getByTestId('drawer-content'), {

package/src/components/responsive-drawer/responsive-drawer.tsx

@@ -14,10 +14,7 @@ import {
 } from 'react'
 
 type ResponsiveDrawerPosition =
-  | 'top-left'
-  | 'top-right'
-  | 'bottom-left'
-  | 'bottom-right'
+  'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
 
 /** Placement of the panel relative to its anchor (desktop popover only). */
 export type ResponsiveDrawerPlacement = 'side' | 'overlay'
@@ -59,6 +56,7 @@ export function ResponsiveDrawer<
     slotProps?: PopoverProps['slotProps']
   },
 >({
+  anchorEl,
   ref,
   children,
   collapsed,
@@ -72,8 +70,15 @@ export function ResponsiveDrawer<
   placement = 'side',
 }: Required<Pick<T, 'collapsed' | 'onChangeCollapsed' | 'position'>> &
   Pick<PopoverProps, 'slotProps' | 'sx' | 'container'> & {
-    ref: HTMLElement | null
-    isMobile: boolean
+    /** Element the desktop popover is anchored to. */
+    anchorEl?: HTMLElement | null
+    /**
+     * @deprecated Use `anchorEl`. A JSX prop named `ref` is non-reactive under
+     * the React Compiler, so a state-held anchor stays frozen at its initial
+     * `null` and the popover never opens. Removed in the next major.
+     */
+    ref?: HTMLElement | null
+    isMobile?: boolean
     children: ReactNode
     /**
      * When `false`, the desktop popover is **non-modal**: no backdrop, clicks
@@ -91,6 +96,8 @@ export function ResponsiveDrawer<
     placement?: ResponsiveDrawerPlacement
   }) {
   // Popover position is frozen on open — re-measure on content resize (callback ref: portal mounts after open).
+  const anchor = anchorEl ?? ref ?? null
+
   const popoverActions = useRef<PopoverActions>(null)
   const observerRef = useRef<ResizeObserver | null>(null)
   const observeContent = useCallback((el: HTMLDivElement | null) => {
@@ -191,8 +198,8 @@ export function ResponsiveDrawer<
       action={popoverActions}
       sx={sx}
       container={container}
-      anchorEl={ref}
-      open={!collapsed && ref != null}
+      anchorEl={anchor}
+      open={!collapsed && anchor != null}
       onClose={modal ? () => onChangeCollapsed(true) : undefined}
       hideBackdrop={!modal}
       disableScrollLock={!modal}

package/src/legend/components/legend-row/legend-row.test.tsx

@@ -177,6 +177,25 @@ describe('<LegendRow> composition', () => {
     // …and the note renders exactly once, after all variables.
     expect(screen.getAllByText('One note for the whole layer.')).toHaveLength(1)
   })
+
+  // These render with no ThemeProvider, i.e. MUI's default theme, whose
+  // defaultVariantMapping has no `caption` entry and falls back to a `span`.
+  // An inline box ignores the line-height, so the type must not depend on a
+  // theme-level variantMapping to come out as a block.
+  it('renders the note and the subtitle as blocks, not inline', () => {
+    renderRow('boxes', [
+      {
+        id: 'a',
+        name: 'A',
+        subtitle: 'Zoom 0-12',
+        helperText: 'A note.',
+        variables: [cat],
+      },
+    ])
+
+    expect(screen.getByText('A note.').tagName).toBe('P')
+    expect(screen.getByText('Zoom 0-12').tagName).toBe('P')
+  })
 })
 
 describe('<LegendRow> grouped (inside Legend.Group)', () => {

package/src/legend/components/legend-row/legend-row.tsx

@@ -112,7 +112,11 @@ export function LegendRow({ layerId, children }: LegendRowProps) {
               )}
             </Box>
             {layer.subtitle && !effectivelyCollapsed && (
-              <Typography variant='caption' color='text.secondary'>
+              <Typography
+                variant='caption'
+                color='text.secondary'
+                component='p'
+              >
                 {layer.subtitle}
               </Typography>
             )}
@@ -136,7 +140,16 @@ export function LegendRow({ layerId, children }: LegendRowProps) {
           {layer.helperText && (
             <Box sx={[styles.footer, inGroup && styles.footerGrouped]}>
               {typeof layer.helperText === 'string' ? (
-                <Typography variant='caption' color='text.secondary'>
+                // `component` is load-bearing: MUI's defaultVariantMapping has
+                // no entry for `caption`, so it falls back to a `span` and the
+                // line-height stops governing the box. Meridian maps it to `p`
+                // by theme, which makes the box type depend on the consumer's
+                // theme rather than on this component.
+                <Typography
+                  variant='caption'
+                  color='text.secondary'
+                  component='p'
+                >
                   {layer.helperText}
                 </Typography>
               ) : (

package/src/widgets/table/components/pagination-actions.tsx

@@ -1,8 +1,8 @@
 import { Box, IconButton } from '@mui/material'
-import FirstPageIcon from '@mui/icons-material/FirstPage'
-import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft'
-import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight'
-import LastPageIcon from '@mui/icons-material/LastPage'
+import { FirstPage as FirstPageIcon } from '@mui/icons-material'
+import { KeyboardArrowLeft } from '@mui/icons-material'
+import { KeyboardArrowRight } from '@mui/icons-material'
+import { LastPage as LastPageIcon } from '@mui/icons-material'
 import type { PaginationActionsProps } from '../types'
 
 /**

package/src/widgets/utils/chart-config/option-builders.ts

@@ -79,7 +79,11 @@ export function buildGridConfig(hasLegend: boolean, theme: Theme) {
  * @param theme - MUI theme providing the typography token and palette
  * @returns `{ fontSize, fontFamily, color }` for an ECharts `axisLabel`
  */
-export function buildAxisLabelStyle(theme: Theme) {
+export function buildAxisLabelStyle(theme: Theme): {
+  fontSize: string | number | undefined
+  fontFamily: string | undefined
+  color: string
+} {
   return {
     fontSize: theme.typography.overlineDelicate?.fontSize,
     fontFamily: theme.typography.overlineDelicate?.fontFamily,

package/src/widgets-v2/pie/options.test.ts

@@ -391,6 +391,73 @@ describe('createPieOptionFactory — single-series (donut)', () => {
     ).toBe('')
   })
 
+  it('label formatter renders EVERY slice when the label is moved off the centre (e.g. PDF outside labels)', () => {
+    // `position: 'center'` stacks every label on one anchor, so only the
+    // max-valued slice draws. An override that gives each slice its own
+    // anchor must label them all — otherwise a PDF/report export shows a
+    // single value and orphan leader lines for the rest.
+    const merge = createPieOptionFactory({ theme })
+    const out = merge(
+      {
+        series: [
+          {
+            type: 'pie' as const,
+            label: { show: true, position: 'outside' },
+          },
+        ] as unknown as never,
+      },
+      [
+        [
+          { name: 'A', value: 10 },
+          { name: 'B', value: 25 },
+        ],
+      ],
+    ) as {
+      series: { label: { formatter: (p: Record<string, unknown>) => string } }[]
+    }
+    const fmt = out.series[0]!.label.formatter
+    expect(
+      fmt({
+        name: 'A',
+        encode: { value: [1] },
+        data: { name: 'A', value: 10 },
+      }),
+    ).toBe('{c|10}\n{b|A}')
+    expect(
+      fmt({
+        name: 'B',
+        encode: { value: [1] },
+        data: { name: 'B', value: 25 },
+      }),
+    ).toBe('{c|25}\n{b|B}')
+  })
+
+  it('keeps the blank-line spacer for centre labels and drops it for off-centre ones', () => {
+    const data = [[{ name: 'A', value: 10 }]]
+    const params = {
+      name: 'A',
+      encode: { value: [1] },
+      data: { name: 'A', value: 10 },
+    }
+    interface Out {
+      series: { label: { formatter: (p: Record<string, unknown>) => string } }[]
+    }
+    const centered = createPieOptionFactory({ theme })(
+      {},
+      data,
+    ) as unknown as Out
+    const outside = createPieOptionFactory({ theme })(
+      {
+        series: [
+          { type: 'pie' as const, label: { position: 'inside' } },
+        ] as unknown as never,
+      },
+      data,
+    ) as unknown as Out
+    expect(centered.series[0]!.label.formatter(params)).toBe('{c|10}\n\n{b|A}')
+    expect(outside.series[0]!.label.formatter(params)).toBe('{c|10}\n{b|A}')
+  })
+
   it('label formatter treats an explicit empty selection as no selection (renders the true max, not blank)', () => {
     const merge = createPieOptionFactory({ theme, selection: [] })
     const out = merge({}, [[{ name: 'A', value: 10 }]]) as {

package/src/widgets-v2/pie/options.ts

@@ -246,6 +246,21 @@ function buildSingleSeriesPieFusion(
       : echarts.color.modifyAlpha(base, 0.15)
   }
 
+  // ECharts anchors EVERY slice's `position: 'center'` label at the same
+  // point, so at most one of them can ever be legible — the donut design
+  // leans into that (one KPI inside the ring) and picks a single slice
+  // below. A consumer that moves the labels off the centre gives each
+  // slice its own anchor (`'outside'` with leader lines is what the PDF
+  // export uses, `'inside'` / `'insideTop'` … likewise), and there the
+  // single-label rule is simply wrong: every slice must render its own
+  // label. Read the position off the structural template, which already
+  // carries the consumer's `optionsOverride`.
+  const templateLabelPosition = (
+    broadcastTemplate as { label?: { position?: unknown } }
+  ).label?.position
+  const isCenterLabel =
+    templateLabelPosition === undefined || templateLabelPosition === 'center'
+
   // Which slice renders the centre value+name: the greatest value among
   // the *included* slices (all of them when there's no active
   // selection), computed locally — no query round-trip. Only that one
@@ -254,7 +269,8 @@ function buildSingleSeriesPieFusion(
   // `typeof value === 'number'` participates — if every included slice's
   // value is non-numeric, `centerMaxName` stays `undefined` and no slice
   // matches it in `labelTextFormatter` below, so the chart renders with no
-  // centre label at all (graceful no-op, not a crash).
+  // centre label at all (graceful no-op, not a crash). Skipped entirely
+  // for off-centre labels, where every slice labels itself.
   const centerData = seriesArr[0] ?? []
   let centerMaxName: string | number | undefined
   let centerMaxValue = -Infinity
@@ -266,13 +282,14 @@ function buildSingleSeriesPieFusion(
     }
   }
 
-  // Center label formatter — lives in the merger because it reads
+  // Slice label formatter — lives in the merger because it reads
   // reactive `formatter` / `labelFormatter` from ctx. The rich tags
   // `{c|…}` and `{b|…}` reference the rich styles baked into the
   // structural label template.
   const labelTextFormatter = (params: CallbackDataParams): string => {
     const { name } = params
-    if (name == null || name !== centerMaxName) return ''
+    if (name == null) return ''
+    if (isCenterLabel && name !== centerMaxName) return ''
     const encodeIndex = params.encode?.value?.[0]
     if (encodeIndex === undefined) return ''
     const value = (Object.values(params.data ?? {}) as unknown[]).at(
@@ -292,7 +309,13 @@ function buildSingleSeriesPieFusion(
     const formattedName = labelFormatter
       ? String(labelFormatter(name ?? ''))
       : String(name ?? '')
-    return `{c|${formattedValue}}\n\n{b|${formattedName}}`
+    // The blank line is what separates the big centre KPI from its
+    // caption. Off-centre labels sit next to their own slice and are
+    // laid out against their neighbours, so the spacer only inflates
+    // each label's bounding box — enough, with a hidden `{b|…}` block,
+    // to make ECharts drop colliding labels altogether.
+    const separator = isCenterLabel ? '\n\n' : '\n'
+    return `{c|${formattedValue}}${separator}{b|${formattedName}}`
   }
 
   return {

package/src/widgets-v2/selection-summary/selection-summary.test.tsx

@@ -1,6 +1,6 @@
 import { describe, it, expect, vi } from 'vitest'
 import { fireEvent, render, screen } from '@testing-library/react'
-import StarIcon from '@mui/icons-material/Star'
+import { Star as StarIcon } from '@mui/icons-material'
 import { SelectionSummary } from './selection-summary'
 
 describe('<SelectionSummary>', () => {

package/src/widgets-v2/toolbox/toolbox.test.tsx

@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react'
 import { describe, it, expect } from 'vitest'
 import { fireEvent, render, screen } from '@testing-library/react'
 import { IconButton } from '@mui/material'
-import StarIcon from '@mui/icons-material/Star'
+import { Star as StarIcon } from '@mui/icons-material'
 import { Toolbox } from './toolbox'
 
 function makeChildren(n: number) {

package/dist/chart-config-BGt7wkK7.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"chart-config-BGt7wkK7.js","names":["Theme","LegendComponentOption","CallbackDataParams","TopLevelFormatterParams","niceNum","value","absValue","Math","abs","base","pow","floor","log10","rounded","ceil","buildLegendConfig","hasLegend","labelFormatter","show","icon","const","left","bottom","orient","type","formatter","name","String","buildGridConfig","theme","parseInt","spacing","buildAxisLabelStyle","fontSize","typography","overlineDelicate","fontFamily","color","palette","black","text","secondary","createTooltipPositioner","point","_params","_dom","_rect","size","contentSize","viewSize","position","top","Record","right","createAxisLabelFormatter","undefined","applyXAxisFormatter","xAxis","xAxisIsObject","Array","isArray","xAxisTyped","axisLabel","axisFormatter","applyYAxisFormatter","yAxis","yAxisIsObject","yAxisTyped","createTooltipFormatter","callback","item","items","seriesName","marker","params","tooltip","values","map","showMargin","length","marginStyle","formattedValues","join","buildSeriesLabelConfig","encodeKey","label","encodeIndex","encode","dimName","dimensionNames","row","buildHistogramSeriesLabelConfig","downloadToCSV","downloadToPNG","DownloadItem","ConfigProps","createChartDownloadConfig","csvModifier","data","TData","refUI","modifier","rows"],"sources":["../src/widgets/utils/chart-config/option-builders.ts","../src/widgets/utils/chart-config/download-config.ts"],"sourcesContent":["import type { Theme } from '@mui/material'\nimport type { LegendComponentOption } from 'echarts'\nimport type {\n  CallbackDataParams,\n  TopLevelFormatterParams,\n} from 'echarts/types/dist/shared'\n\n/**\n * Shared EChart configuration builders for chart widgets\n */\n\n/**\n * Rounds a value up to the nearest \"nice\" number.\n * A nice number is a multiple of 10^floor(log10(value)).\n *\n * Examples: 547 → 600, 200 → 200, 1200 → 2000, 18 → 20, 5 → 5, -547 → -500\n */\nexport function niceNum(value: number): number {\n  if (value === 0) return 0\n  const absValue = Math.abs(value)\n  const base = Math.pow(10, Math.floor(Math.log10(absValue)))\n  const rounded = Math.ceil(absValue / base) * base\n  return value < 0 ? -rounded : rounded\n}\n\n/**\n * Builds standard legend configuration for chart widgets\n *\n * @param params - Legend configuration parameters\n * @param params.hasLegend - Whether to show the legend\n * @param params.labelFormatter - Optional formatter for legend item names\n * @returns Legend configuration object\n */\nexport function buildLegendConfig({\n  hasLegend,\n  labelFormatter,\n}: {\n  hasLegend: boolean\n  labelFormatter?: (value: string | number) => string | number\n}): LegendComponentOption {\n  return {\n    show: hasLegend,\n    icon: 'circle' as const,\n    left: 0,\n    bottom: 0,\n    orient: 'horizontal',\n    type: 'scroll',\n    ...(labelFormatter && {\n      formatter: (name: string) => String(labelFormatter(name)),\n    }),\n  }\n}\n\n/**\n * Builds standard grid configuration with legend-aware spacing\n *\n * @param hasLegend - Whether the chart has a legend\n * @param theme - MUI theme for spacing\n * @param additionalConfig - Additional grid configuration to merge\n * @returns Grid configuration object\n */\nexport function buildGridConfig(hasLegend: boolean, theme: Theme) {\n  return {\n    ...(!hasLegend && { bottom: parseInt(theme.spacing(3)) }),\n    ...(hasLegend && { bottom: parseInt(theme.spacing(7)) }),\n  }\n}\n\n/**\n * Builds the shared axis-label text style for chart widgets, matching the\n * design's \"Overline (Delicate)\" token (Inter, 10px) in the secondary text\n * colour (`rgba(44,48,50,0.6)`). Spread into an ECharts `axisLabel` for both\n * x and y axes so every chart's labels stay consistent.\n *\n * Note: the token's `letterSpacing` and `textTransform: uppercase` are not\n * representable in ECharts canvas text, so only font size/family/colour are\n * applied.\n *\n * @param theme - MUI theme providing the typography token and palette\n * @returns `{ fontSize, fontFamily, color }` for an ECharts `axisLabel`\n */\nexport function buildAxisLabelStyle(theme: Theme) {\n  return {\n    fontSize: theme.typography.overlineDelicate?.fontSize,\n    fontFamily: theme.typography.overlineDelicate?.fontFamily,\n    color: theme.palette.black?.[60] ?? theme.palette.text.secondary,\n  }\n}\n\n/**\n * Creates a tooltip position calculator that handles overflow\n * Used by bar, histogram, and scatterplot widgets\n *\n * @param theme - MUI theme for spacing\n * @returns Tooltip position function\n */\nexport function createTooltipPositioner(theme: Theme) {\n  return function (\n    point: [number, number],\n    _params: unknown,\n    _dom: unknown,\n    _rect: unknown,\n    size: { contentSize: [number, number]; viewSize: [number, number] },\n  ) {\n    const position = { top: parseInt(theme.spacing(0.5)) } as Record<\n      string,\n      number\n    >\n\n    // Position tooltip left or right based on available space\n    if (size.contentSize[0] < size.viewSize[0] - point[0]) {\n      position.left = point[0]\n    } else {\n      position.right = size.viewSize[0] - point[0]\n    }\n\n    return position\n  }\n}\n\n/**\n * Creates an axis label formatter for ECharts\n * Used to format numeric axis labels with a widget formatter\n *\n * @param formatter - Optional formatter function from widget config\n * @returns Axis label formatter function or undefined\n */\nexport function createAxisLabelFormatter(\n  formatter?: (value: number) => string,\n) {\n  if (!formatter) return undefined\n  return (value: number) => formatter(value)\n}\n\n/**\n * Applies labelFormatter to xAxis configuration\n * Applies to any xAxis regardless of axis type (category, value, etc.)\n *\n * @param xAxis - Existing xAxis configuration\n * @param labelFormatter - Optional labelFormatter function from widget config\n * @returns Updated xAxis configuration\n */\nexport function applyXAxisFormatter(\n  xAxis: unknown,\n  formatter?: (value: string | number) => string | number,\n) {\n  const xAxisIsObject = xAxis && !Array.isArray(xAxis)\n  const xAxisTyped = xAxis as { type?: string; axisLabel?: unknown }\n\n  const axisFormatter =\n    formatter && xAxisIsObject\n      ? (value: string | number) => String(formatter(value))\n      : undefined\n\n  return {\n    ...xAxisTyped,\n    axisLabel: {\n      ...(typeof xAxisTyped.axisLabel === 'object' && xAxisTyped.axisLabel\n        ? xAxisTyped.axisLabel\n        : {}),\n      formatter: axisFormatter,\n    },\n  }\n}\n\n/**\n * Applies formatter to yAxis configuration\n * Only applies to single axis objects (not arrays) with type 'value'\n *\n * @param yAxis - Existing yAxis configuration\n * @param formatter - Optional formatter function from widget config\n * @returns Updated yAxis configuration or undefined if no changes needed\n */\nexport function applyYAxisFormatter(\n  yAxis: unknown,\n  formatter?: (value: number) => string,\n) {\n  let axisFormatter = createAxisLabelFormatter(formatter)\n\n  const yAxisIsObject = yAxis && !Array.isArray(yAxis)\n  const yAxisTyped = yAxis as { type?: string; axisLabel?: unknown }\n\n  if (!yAxisIsObject || yAxisTyped.type !== 'value') {\n    axisFormatter = undefined\n  }\n\n  return {\n    ...yAxisTyped,\n    axisLabel: {\n      ...(typeof yAxisTyped.axisLabel === 'object' && yAxisTyped.axisLabel\n        ? yAxisTyped.axisLabel\n        : {}),\n      formatter: axisFormatter,\n    },\n  }\n}\n\n/**\n * Creates a tooltip formatter for ECharts\n * Formats numeric values in tooltip using widget formatter\n * Handles both axis trigger (array) and item trigger (object) modes\n *\n * @param formatter - Optional formatter function from widget config\n * @returns Tooltip formatter function or undefined\n */\nexport function createTooltipFormatter(\n  callback: (\n    item: CallbackDataParams,\n    items: CallbackDataParams[],\n  ) => {\n    name: string\n    seriesName: string\n    marker: string\n    value: string | number\n  },\n) {\n  return (params: TopLevelFormatterParams) => {\n    // Handle both array (axis trigger) and object (item trigger)\n    const items = Array.isArray(params) ? params : [params]\n\n    const tooltip = (name: string, callback: string) =>\n      `<div style=\"margin: 0px 0 0;line-height:1;\">${name ? `<div style=\"font-size:11px;color:#FFFFFF;font-weight:400;line-height:1; margin-bottom: 10px\">${name}</div>` : ''}<div style=\"margin: 0;line-height:1;\">${callback}</div><div style=\"clear:both\"></div></div>`\n\n    const values = items.map((item) => {\n      const { name, seriesName, marker, value } = callback(item, items)\n      return {\n        name,\n        seriesName,\n        marker,\n        value,\n      }\n    })\n\n    const name = values[0]?.name ?? ''\n    // Show margin if name exists or there are multiple items\n    const showMargin = name || items.length > 1\n    const marginStyle = showMargin\n      ? 'margin: 10px 0 0;line-height:1;'\n      : 'margin: 0;line-height:1;'\n\n    const formattedValues = values.map(\n      ({ seriesName, marker, value }) =>\n        `<div style=\"${marginStyle}\"><div style=\"margin: 0px 0 0;line-height:1;\">${marker}${seriesName ? `<span style=\"font-size:11px;color:#FFFFFF;font-weight:400;margin-left:2px;margin-right:10px\">${seriesName}</span>` : ''}<span style=\"float:right;margin-left:10px;font-size:11px;color:#FFFFFF;font-weight:900\">${value}</span></div></div>`,\n    )\n\n    return tooltip(name, formattedValues.join(''))\n  }\n}\n\n/**\n * Builds a series `label` config that applies formatter to the data value\n * extracted from a dataset row using ECharts encode/dimensionNames.\n *\n * Does not set `show` — labels remain hidden by default per ECharts defaults.\n *\n * @param formatter - Optional numeric value formatter\n * @param encodeKey - The encode dimension key to extract ('y' for vertical charts, 'x' for horizontal)\n */\nexport function buildSeriesLabelConfig(\n  formatter?: (value: number) => string,\n  encodeKey = 'y',\n): { label: { formatter: (params: CallbackDataParams) => string } } | object {\n  if (!formatter) return {}\n\n  return {\n    label: {\n      formatter: (params: CallbackDataParams) => {\n        const encodeIndex = params.encode?.[encodeKey]?.[0]\n        if (encodeIndex === undefined) return ''\n        const dimName = params.dimensionNames?.[encodeIndex]\n        const row = params.value as Record<string, string | number>\n        const value = dimName ? row[dimName] : undefined\n        return typeof value === 'number'\n          ? formatter(value)\n          : String(value ?? '')\n      },\n    },\n  }\n}\n\n/**\n * Builds a series `label` config that applies formatter to a raw numeric value.\n * Used by histogram where series data is number[] (not datasets).\n *\n * Does not set `show` — labels remain hidden by default per ECharts defaults.\n *\n * @param formatter - Optional numeric value formatter\n */\nexport function buildHistogramSeriesLabelConfig(\n  formatter?: (value: number) => string,\n): { label: { formatter: (params: CallbackDataParams) => string } } | object {\n  if (!formatter) return {}\n\n  return {\n    label: {\n      formatter: (params: CallbackDataParams) => {\n        const value = params.value as number\n        return typeof value === 'number'\n          ? formatter(value)\n          : String(value ?? '')\n      },\n    },\n  }\n}\n","import { downloadToCSV, downloadToPNG, type DownloadItem } from '../../actions'\nimport type { ConfigProps } from '../../loader/types'\n\nexport function createChartDownloadConfig<TData>(\n  csvModifier: (data: TData) => string[][],\n) {\n  return function ({ refUI }: ConfigProps): DownloadItem<TData>[] {\n    return [\n      {\n        ...downloadToPNG,\n        modifier: () => downloadToPNG.modifier(refUI),\n      },\n      {\n        ...downloadToCSV,\n        modifier: async (data) => {\n          const rows = csvModifier(data)\n          return downloadToCSV.modifier(rows)\n        },\n      },\n    ]\n  }\n}\n"],"mappings":";;AAiBA,SAAgBI,EAAQC,GAAuB;CAC7C,IAAIA,MAAU,GAAG,OAAO;CACxB,IAAMC,IAAWC,KAAKC,IAAIH,CAAK,GACzBI,IAAgB,MAAIF,KAAKI,MAAMJ,KAAKK,MAAMN,CAAQ,CAAC,GACnDO,IAAUN,KAAKO,KAAKR,IAAWG,CAAI,IAAIA;CAC7C,OAAOJ,IAAQ,IAAI,CAACQ,IAAUA;AAChC;AAUA,SAAgBE,EAAkB,EAChCC,cACAC,qBAIwB;CACxB,OAAO;EACLC,MAAMF;EACNG,MAAM;EACNE,MAAM;EACNC,QAAQ;EACRC,QAAQ;EACRC,MAAM;EACN,GAAIP,KAAkB,EACpBQ,YAAYC,MAAiBC,OAAOV,EAAeS,CAAI,CAAC,EAC1D;CACF;AACF;AAUA,SAAgBE,EAAgBZ,GAAoBa,GAAc;CAChE,OAAO;EACL,GAAI,CAACb,KAAa,EAAEM,QAAQQ,SAASD,EAAME,QAAQ,CAAC,CAAC,EAAE;EACvD,GAAIf,KAAa,EAAEM,QAAQQ,SAASD,EAAME,QAAQ,CAAC,CAAC,EAAE;CACxD;AACF;AAeA,SAAgBC,EAAoBH,GAAc;CAChD,OAAO;EACLI,UAAUJ,EAAMK,WAAWC,kBAAkBF;EAC7CG,YAAYP,EAAMK,WAAWC,kBAAkBC;EAC/CC,OAAOR,EAAMS,QAAQC,QAAQ,OAAOV,EAAMS,QAAQE,KAAKC;CACzD;AACF;AASA,SAAgBC,EAAwBb,GAAc;CACpD,OAAO,SACLc,GACAC,GACAC,GACAC,GACAC,GACA;EACA,IAAMG,IAAW,EAAEC,KAAKrB,SAASD,EAAME,QAAQ,EAAG,CAAC,EAAE;EAYrD,OANIgB,EAAKC,YAAY,KAAKD,EAAKE,SAAS,KAAKN,EAAM,KACjDO,EAAS7B,OAAOsB,EAAM,KAEtBO,EAASG,QAAQN,EAAKE,SAAS,KAAKN,EAAM,IAGrCO;CACT;AACF;AASA,SAAgBI,EACd7B,GACA;CACKA,OACL,QAAQpB,MAAkBoB,EAAUpB,CAAK;AAC3C;AAUA,SAAgBmD,EACdC,GACAhC,GACA;CACA,IAAMiC,IAAgBD,KAAS,CAACE,MAAMC,QAAQH,CAAK,GAC7CI,IAAaJ,GAEbM,IACJtC,KAAaiC,KACRrD,MAA2BsB,OAAOF,EAAUpB,CAAK,CAAC,IACnDkD,KAAAA;CAEN,OAAO;EACL,GAAGM;EACHC,WAAW;GACT,GAAI,OAAOD,EAAWC,aAAc,YAAYD,EAAWC,YACvDD,EAAWC,YACX,CAAC;GACLrC,WAAWsC;EACb;CACF;AACF;AAUA,SAAgBC,EACdC,GACAxC,GACA;CACA,IAAIsC,IAAgBT,EAAyB7B,CAAS,GAEhDyC,IAAgBD,KAAS,CAACN,MAAMC,QAAQK,CAAK,GAC7CE,IAAaF;CAMnB,QAJI,CAACC,KAAiBC,EAAW3C,SAAS,aACxCuC,IAAgBR,KAAAA,IAGX;EACL,GAAGY;EACHL,WAAW;GACT,GAAI,OAAOK,EAAWL,aAAc,YAAYK,EAAWL,YACvDK,EAAWL,YACX,CAAC;GACLrC,WAAWsC;EACb;CACF;AACF;AAUA,SAAgBK,EACdC,GASA;CACA,QAAQK,MAAoC;EAE1C,IAAMH,IAAQZ,MAAMC,QAAQc,CAAM,IAAIA,IAAS,CAACA,CAAM,GAEhDC,KAAWjD,GAAc2C,MAC7B,+CAA+C3C,IAAO,gGAAgGA,EAAI,UAAW,GAAE,wCAAyC2C,EAAQ,6CAEpNO,IAASL,EAAMM,KAAKP,MAAS;GACjC,IAAM,EAAE5C,SAAM8C,eAAYC,WAAQpE,aAAUgE,EAASC,GAAMC,CAAK;GAChE,OAAO;IACL7C;IACA8C;IACAC;IACApE;GACF;EACF,CAAC,GAEKqB,IAAOkD,EAAO,EAAE,EAAElD,QAAQ,IAG1BsD,IADatD,KAAQ6C,EAAMQ,SAAS,IAEtC,oCACA;EAOJ,OAAOJ,EAAQjD,GALSkD,EAAOC,KAC5B,EAAEL,eAAYC,WAAQpE,eACrB,eAAe2E,EAAW,gDAAiDP,IAASD,IAAa,gGAAgGA,EAAU,WAAY,GAAE,0FAA2FnE,EAAK,oBAGxS4E,CAAAA,CAAgBC,KAAK,EAAE,CAAC;CAC/C;AACF;AAWA,SAAgBC,EACd1D,GACA2D,IAAY,KAC+D;CAG3E,OAFK3D,IAEE,EACL4D,OAAO,EACL5D,YAAYiD,MAA+B;EACzC,IAAMY,IAAcZ,EAAOa,SAASH,EAAU,GAAG;EACjD,IAAIE,MAAgB/B,KAAAA,GAAW,OAAO;EACtC,IAAMiC,IAAUd,EAAOe,iBAAiBH,IAClCI,IAAMhB,EAAOrE,OACbA,IAAQmF,IAAUE,EAAIF,KAAWjC,KAAAA;EACvC,OAAO,OAAOlD,KAAU,WACpBoB,EAAUpB,CAAK,IACfsB,OAAOtB,KAAS,EAAE;CACxB,EACF,EACF,IAfuB,CAAC;AAgB1B;AAUA,SAAgBsF,EACdlE,GAC2E;CAG3E,OAFKA,IAEE,EACL4D,OAAO,EACL5D,YAAYiD,MAA+B;EACzC,IAAMrE,IAAQqE,EAAOrE;EACrB,OAAO,OAAOA,KAAU,WACpBoB,EAAUpB,CAAK,IACfsB,OAAOtB,KAAS,EAAE;CACxB,EACF,EACF,IAXuB,CAAC;AAY1B;;;AC5SA,SAAgB2F,EACdC,GACA;CACA,OAAO,SAAU,EAAEG,YAA6C;EAC9D,OAAO,CACL;GACE,GAAGP;GACHQ,gBAAgBR,EAAcQ,SAASD,CAAK;EAC9C,GACA;GACE,GAAGR;GACHS,UAAU,OAAOH,MAAS;IACxB,IAAMI,IAAOL,EAAYC,CAAI;IAC7B,OAAON,EAAcS,SAASC,CAAI;GACpC;EACF,CAAC;CAEL;AACF"}