@carto/ps-react-ui 4.7.1 → 4.8.0

package/src/widgets-v2/wrapper/style.ts

@@ -0,0 +1,134 @@
+import type { SxProps, Theme } from '@mui/material'
+
+export const styles = {
+  root: {
+    position: 'relative',
+    width: '100%',
+    minWidth: 0,
+    bgcolor: 'background.paper',
+    border: '1px solid',
+    borderColor: 'divider',
+    borderRadius: 1,
+    overflow: 'hidden',
+    // MUI Accordion ships its own collapsed-state divider rules; clear them
+    // so they don't fight our card border.
+    '&::before': { display: 'none' },
+
+    // Hover-fade actions (v1 parity). Direct children of
+    // `.widget-wrapper-actions` are dimmed by default on fine-pointer devices
+    // and fade in on hover; an action carrying the `.active` class stays
+    // full-opacity even outside hover. Coarse-pointer devices show actions
+    // always.
+    //
+    // The class must sit on the action element itself
+    // (`<IconButton className='active'>`). v2 does NOT wrap each action in
+    // an extra container the way v1 does, so the `> *` selector lands on the
+    // action button directly — `&:has(.active)` would only match if the
+    // class were on a descendant, which is never the case here.
+    '& .widget-wrapper-actions > *': {
+      opacity: 1,
+      transition: ({ transitions }: Theme) =>
+        transitions.create('opacity', {
+          duration: transitions.duration.standard,
+          easing: transitions.easing.easeInOut,
+        }),
+      '@media (hover: hover)': {
+        opacity: 0,
+      },
+      '&.active': {
+        opacity: 1,
+      },
+    },
+    '&:hover .widget-wrapper-actions > *': {
+      opacity: 1,
+    },
+    '&[data-collapsed="true"] .widget-wrapper-actions > *': {
+      opacity: 0,
+      pointerEvents: 'none',
+      '&.active': {
+        opacity: 1,
+      },
+    },
+
+    // Disabled state — only block interaction; keep visuals unchanged.
+    // MUI's default `.Mui-disabled` rules dim the AccordionSummary's color
+    // and add a faded background; we override them so the wrapper looks
+    // identical to its enabled form. The single behavioral change is
+    // `pointer-events: none`, which propagates to every descendant.
+    '&.Mui-disabled': {
+      pointerEvents: 'none',
+      bgcolor: 'background.paper',
+      '& .MuiAccordionSummary-root.Mui-disabled': {
+        opacity: 1,
+        color: 'inherit',
+        backgroundColor: 'transparent',
+      },
+      '& .MuiAccordionSummary-expandIconWrapper': {
+        display: 'none',
+      },
+    },
+  },
+  loading: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: ({ spacing }: Theme) => spacing(0.35),
+    zIndex: 1,
+  },
+  summary: {
+    minHeight: ({ spacing }: Theme) => spacing(7),
+    '& .MuiAccordionSummary-content': {
+      gap: ({ spacing }: Theme) => spacing(0.5),
+      paddingInlineEnd: ({ spacing }: Theme) => spacing(0.75),
+      alignItems: 'center',
+    },
+  },
+  titleCell: {
+    flexGrow: 1,
+    flexShrink: 1,
+    minWidth: 0,
+    display: 'flex',
+    alignItems: 'center',
+    minHeight: ({ spacing }: Theme) => spacing(3),
+  },
+  titleText: {
+    minWidth: 0,
+    wordBreak: 'break-word',
+    overflow: 'hidden',
+    display: '-webkit-box',
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: 'vertical',
+  },
+  actions: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 0.5,
+    justifyContent: 'flex-end',
+    flexShrink: 0,
+    '& > *': {
+      pointerEvents: 'auto',
+    },
+  },
+  options: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 0.5,
+    flexShrink: 0,
+  },
+  detail: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: ({ spacing }: Theme) => spacing(1),
+    paddingTop: ({ spacing }: Theme) => spacing(0.5),
+  },
+  content: {
+    minWidth: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 1,
+  },
+  footer: {
+    pt: 1,
+  },
+} satisfies Record<string, SxProps<Theme>>

package/src/widgets-v2/wrapper/widget-actions.test.tsx

@@ -0,0 +1,52 @@
+import { describe, it, expect, vi } from 'vitest'
+import { fireEvent, render } from '@testing-library/react'
+import { Actions, Options } from './widget-actions'
+
+describe('<Actions>', () => {
+  it('renders children and applies the widget-wrapper-actions class', () => {
+    const { container, getByText } = render(
+      <Actions>
+        <button>act</button>
+      </Actions>,
+    )
+    expect(getByText('act')).toBeTruthy()
+    expect(container.querySelector('.widget-wrapper-actions')).not.toBeNull()
+  })
+
+  it('stops click propagation', () => {
+    const onWrapperClick = vi.fn()
+    const { getByText } = render(
+      <button type='button' onClick={onWrapperClick}>
+        <Actions>
+          <span>btn</span>
+        </Actions>
+      </button>,
+    )
+    fireEvent.click(getByText('btn'))
+    expect(onWrapperClick).not.toHaveBeenCalled()
+  })
+})
+
+describe('<Options>', () => {
+  it('renders children', () => {
+    const { getByText } = render(
+      <Options>
+        <span>opt</span>
+      </Options>,
+    )
+    expect(getByText('opt')).toBeTruthy()
+  })
+
+  it('stops click propagation', () => {
+    const onWrapperClick = vi.fn()
+    const { getByText } = render(
+      <button type='button' onClick={onWrapperClick}>
+        <Options>
+          <span>opt</span>
+        </Options>
+      </button>,
+    )
+    fireEvent.click(getByText('opt'))
+    expect(onWrapperClick).not.toHaveBeenCalled()
+  })
+})

package/src/widgets-v2/wrapper/widget-actions.tsx

@@ -0,0 +1,43 @@
+import { Box, type SxProps, type Theme } from '@mui/material'
+import type { ReactNode } from 'react'
+import { styles } from './style'
+
+export interface ActionsProps {
+  sx?: SxProps<Theme>
+  children: ReactNode
+}
+
+/**
+ * Slot for the wrapper header's right-side action buttons. The
+ * `widget-wrapper-actions` className activates the hover-fade CSS rule on
+ * `<Wrapper>`: action children fade in on hover (always visible on coarse-
+ * pointer devices), and stay full-opacity when a descendant is marked with
+ * `.active` — typically applied by toggled actions.
+ *
+ * The container also stops click propagation so interacting with an action
+ * doesn't toggle the wrapper's collapse.
+ */
+export function Actions({ sx, children }: ActionsProps) {
+  return (
+    <Box
+      className='widget-wrapper-actions'
+      onClick={(e) => e.stopPropagation()}
+      sx={{ ...styles.actions, ...sx }}
+    >
+      {children}
+    </Box>
+  )
+}
+
+export interface OptionsProps {
+  sx?: SxProps<Theme>
+  children: ReactNode
+}
+
+export function Options({ sx, children }: OptionsProps) {
+  return (
+    <Box onClick={(e) => e.stopPropagation()} sx={{ ...styles.options, ...sx }}>
+      {children}
+    </Box>
+  )
+}

package/src/widgets-v2/wrapper/widget-content.test.tsx

@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest'
+import { render } from '@testing-library/react'
+import { Content, Footer } from './widget-content'
+
+describe('<Content>', () => {
+  it('renders children inside a data-slot=content box', () => {
+    const { getByText, container } = render(
+      <Content>
+        <span>body</span>
+      </Content>,
+    )
+    expect(getByText('body')).toBeTruthy()
+    expect(container.querySelector('[data-slot="content"]')).not.toBeNull()
+  })
+})
+
+describe('<Footer>', () => {
+  it('renders children inside a data-slot=footer box', () => {
+    const { getByText, container } = render(
+      <Footer>
+        <span>foot</span>
+      </Footer>,
+    )
+    expect(getByText('foot')).toBeTruthy()
+    expect(container.querySelector('[data-slot="footer"]')).not.toBeNull()
+  })
+})

package/src/widgets-v2/wrapper/widget-content.tsx

@@ -0,0 +1,29 @@
+import { Box, type SxProps, type Theme } from '@mui/material'
+import type { ReactNode } from 'react'
+import { styles } from './style'
+
+export interface ContentProps {
+  sx?: SxProps<Theme>
+  children: ReactNode
+}
+
+export function Content({ sx, children }: ContentProps) {
+  return (
+    <Box data-slot='content' sx={{ ...styles.content, ...sx }}>
+      {children}
+    </Box>
+  )
+}
+
+export interface FooterProps {
+  sx?: SxProps<Theme>
+  children: ReactNode
+}
+
+export function Footer({ sx, children }: FooterProps) {
+  return (
+    <Box data-slot='footer' sx={{ ...styles.footer, ...sx }}>
+      {children}
+    </Box>
+  )
+}

package/src/widgets-v2/wrapper/widget-wrapper.test.tsx

@@ -0,0 +1,159 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { Provider } from '../provider/widget-provider'
+import { clearAllWidgetStores } from '../stores'
+import { Wrapper } from './widget-wrapper'
+import { Actions } from './widget-actions'
+import { Content } from './widget-content'
+
+beforeEach(() => clearAllWidgetStores())
+afterEach(() => clearAllWidgetStores())
+
+function withProvider(id: string, ui: React.ReactNode, isFetching = false) {
+  return (
+    <Provider id={id} data={[]} isFetching={isFetching}>
+      {ui}
+    </Provider>
+  )
+}
+
+describe('<Wrapper>', () => {
+  it('renders the title', () => {
+    render(
+      withProvider(
+        'wrap-1',
+        <Wrapper title='Sales'>
+          <Content>body</Content>
+        </Wrapper>,
+      ),
+    )
+    expect(screen.getByText('Sales')).toBeTruthy()
+  })
+
+  it('renders Content children when expanded', () => {
+    render(
+      withProvider(
+        'wrap-2',
+        <Wrapper title='t'>
+          <Content>
+            <div data-testid='body'>body</div>
+          </Content>
+        </Wrapper>,
+      ),
+    )
+    expect(screen.getByTestId('body')).toBeTruthy()
+  })
+
+  it('keeps Content mounted but visually hidden when collapsed', () => {
+    // Accordion uses MUI <Collapse>, which animates the parent via height/visibility.
+    // Children stay mounted (the Collapse keeps `keepMounted` semantics by default).
+    render(
+      withProvider(
+        'wrap-3',
+        <Wrapper title='t' defaultCollapsed>
+          <Content>
+            <div data-testid='body'>body</div>
+          </Content>
+        </Wrapper>,
+      ),
+    )
+    expect(screen.getByTestId('body')).toBeTruthy()
+    // Find the AccordionDetails ancestor and confirm aria-hidden / inert reflects collapsed.
+    const root = screen.getByText('t').closest('.MuiAccordion-root')
+    expect(root?.getAttribute('data-collapsed')).toBe('true')
+  })
+
+  it('toggles via the chevron icon button — header summary owns the click', () => {
+    render(
+      withProvider(
+        'wrap-4',
+        <Wrapper title='t'>
+          <Content>body</Content>
+        </Wrapper>,
+      ),
+    )
+    const summary = screen.getByRole('button', { name: 'Collapse' })
+    expect(summary.getAttribute('aria-expanded')).toBe('true')
+    fireEvent.click(summary)
+    expect(
+      screen
+        .getByRole('button', { name: 'Expand' })
+        .getAttribute('aria-expanded'),
+    ).toBe('false')
+  })
+
+  it('honors custom collapse/expand labels on the summary', () => {
+    render(
+      withProvider(
+        'wrap-5',
+        <Wrapper title='t' labels={{ collapse: 'Hide', expand: 'Show' }}>
+          <Content>body</Content>
+        </Wrapper>,
+      ),
+    )
+    expect(screen.getByRole('button', { name: 'Hide' })).toBeTruthy()
+    fireEvent.click(screen.getByRole('button', { name: 'Hide' }))
+    expect(screen.getByRole('button', { name: 'Show' })).toBeTruthy()
+  })
+
+  it('renders <Actions> children inside the summary row, not the details panel', () => {
+    render(
+      withProvider(
+        'wrap-6',
+        <Wrapper title='t'>
+          <Actions>
+            <button data-testid='action-btn'>A</button>
+          </Actions>
+          <Content>
+            <div data-testid='body-content'>body</div>
+          </Content>
+        </Wrapper>,
+      ),
+    )
+    const actionBtn = screen.getByTestId('action-btn')
+    const bodyContent = screen.getByTestId('body-content')
+    // The action lives inside the AccordionSummary, the body inside AccordionDetails.
+    expect(actionBtn.closest('.MuiAccordionSummary-root')).not.toBeNull()
+    expect(bodyContent.closest('.MuiAccordionDetails-root')).not.toBeNull()
+  })
+
+  it('shows a LinearProgress at the top when the store reports isFetching', () => {
+    render(
+      withProvider(
+        'wrap-7',
+        <Wrapper title='t'>
+          <Content>body</Content>
+        </Wrapper>,
+        true,
+      ),
+    )
+    expect(screen.getByRole('progressbar')).toBeTruthy()
+  })
+
+  it('hides the LinearProgress when isFetching is false', () => {
+    render(
+      withProvider(
+        'wrap-8',
+        <Wrapper title='t'>
+          <Content>body</Content>
+        </Wrapper>,
+        false,
+      ),
+    )
+    expect(screen.queryByRole('progressbar')).toBeNull()
+  })
+
+  it('applies disabled styling without removing children', () => {
+    render(
+      withProvider(
+        'wrap-9',
+        <Wrapper title='t' disabled>
+          <Content>
+            <div data-testid='body'>body</div>
+          </Content>
+        </Wrapper>,
+      ),
+    )
+    expect(screen.getByTestId('body')).toBeTruthy()
+  })
+})

package/src/widgets-v2/wrapper/widget-wrapper.tsx

@@ -0,0 +1,178 @@
+import {
+  Children,
+  isValidElement,
+  useCallback,
+  useState,
+  type ComponentType,
+  type ReactElement,
+  type ReactNode,
+} from 'react'
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Box,
+  LinearProgress,
+  Typography,
+  type SvgIconProps,
+  type SxProps,
+  type Theme,
+} from '@mui/material'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import { SmartTooltip } from '../../components/smart-tooltip/smart-tooltip'
+import { useWidget, useWidgetId } from '../stores'
+import { Actions, Options } from './widget-actions'
+import { styles } from './style'
+import { DEFAULT_WRAPPER_LABELS, type WrapperLabels } from './labels'
+
+export interface WrapperProps {
+  title: string
+  /**
+   * Controlled collapsed state. When supplied, the wrapper is fully
+   * controlled — the consumer is responsible for updating it via
+   * `onCollapseChange`. Leave undefined to use the uncontrolled mode,
+   * which seeds internal state from `defaultCollapsed`.
+   */
+  collapsed?: boolean
+  /**
+   * Fires whenever the user interacts to toggle the wrapper, with the
+   * NEXT collapsed value. Called for both controlled and uncontrolled
+   * usage — consumers can subscribe to user-driven toggles even when
+   * letting the wrapper manage its own state.
+   */
+  onCollapseChange?: (collapsed: boolean) => void
+  /**
+   * Initial collapsed state when the wrapper is uncontrolled (i.e.
+   * `collapsed` is undefined). Ignored when `collapsed` is supplied.
+   */
+  defaultCollapsed?: boolean
+  disabled?: boolean
+  labels?: Partial<WrapperLabels>
+  /**
+   * Icon shown at the right edge of the summary row. Accordion rotates it
+   * 180° automatically when the wrapper expands. Default: `ExpandMoreIcon`.
+   */
+  expandIcon?: ComponentType<SvgIconProps>
+  iconProps?: SvgIconProps
+  sx?: SxProps<Theme>
+  children: ReactNode
+}
+
+/**
+ * Widget shell — title + collapsible body, built on MUI `<Accordion>` for
+ * native click-to-toggle on the summary header and a smooth open/close
+ * transition. UX matches v1 `<WrapperUI>`:
+ *
+ *   • hover-fade action buttons (always visible on coarse-pointer devices)
+ *   • multi-line title clamp (`WebkitLineClamp: 2`, word-break) + SmartTooltip
+ *     when the text overflows
+ *   • top-edge `<LinearProgress>` driven by the widget store's `isFetching`
+ *   • chevron at the right end (rotated by Accordion based on expanded state)
+ *
+ * Children are partitioned by component identity: `<Actions>` and `<Options>`
+ * render inside the summary row; everything else (`<Content>`, `<Footer>`,
+ * loose nodes) renders inside the details panel.
+ */
+export function Wrapper({
+  title,
+  collapsed,
+  onCollapseChange,
+  defaultCollapsed = false,
+  disabled = false,
+  labels,
+  expandIcon: ExpandIcon = ExpandMoreIcon,
+  iconProps,
+  sx,
+  children,
+}: WrapperProps) {
+  const id = useWidgetId()
+  const isFetching = useWidget(id, (s) => s.isFetching)
+  // Controlled vs uncontrolled: when the consumer passes `collapsed`, they
+  // own the state; otherwise we keep an internal copy seeded from
+  // `defaultCollapsed`. `internalCollapsed` is still tracked in controlled
+  // mode so a consumer can drop the controlled prop later without losing
+  // the last-known position.
+  const isControlled = collapsed !== undefined
+  const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed)
+  const effectiveCollapsed = isControlled ? collapsed : internalCollapsed
+  const handleAccordionToggle = useCallback(
+    (_: unknown, expanded: boolean) => {
+      const next = !expanded
+      onCollapseChange?.(next)
+      setInternalCollapsed(next)
+    },
+    [onCollapseChange],
+  )
+  const _labels = { ...DEFAULT_WRAPPER_LABELS, ...labels }
+
+  const { summary: summarySlots, details: detailsSlots } =
+    partitionChildren(children)
+
+  const ariaLabel = effectiveCollapsed ? _labels.expand : _labels.collapse
+
+  return (
+    <Accordion
+      data-collapsed={effectiveCollapsed ? 'true' : undefined}
+      expanded={!effectiveCollapsed}
+      onChange={handleAccordionToggle}
+      disabled={disabled}
+      disableGutters
+      elevation={0}
+      square
+      sx={{ ...styles.root, ...sx }}
+    >
+      {isFetching ? (
+        <LinearProgress sx={styles.loading} color='primary' />
+      ) : null}
+
+      <AccordionSummary
+        expandIcon={<ExpandIcon fontSize='small' {...iconProps} />}
+        aria-label={ariaLabel}
+        sx={styles.summary}
+      >
+        <SmartTooltip title={title}>
+          {({ ref }) => (
+            <Box sx={styles.titleCell}>
+              <Typography
+                ref={ref}
+                variant='subtitle1'
+                sx={styles.titleText}
+                textTransform='none'
+              >
+                {title}
+              </Typography>
+            </Box>
+          )}
+        </SmartTooltip>
+        {summarySlots}
+      </AccordionSummary>
+      <AccordionDetails sx={styles.detail}>{detailsSlots}</AccordionDetails>
+    </Accordion>
+  )
+}
+
+/**
+ * Splits children by component identity: `<Actions>` and `<Options>` belong
+ * in the summary row, everything else in the details panel. Identity
+ * comparison works because both slot components are imported from the same
+ * module that consumers use.
+ */
+function partitionChildren(children: ReactNode): {
+  summary: ReactNode[]
+  details: ReactNode[]
+} {
+  const summary: ReactNode[] = []
+  const details: ReactNode[] = []
+  for (const child of Children.toArray(children)) {
+    if (isSlot(child, Actions) || isSlot(child, Options)) {
+      summary.push(child)
+    } else {
+      details.push(child)
+    }
+  }
+  return { summary, details }
+}
+
+function isSlot(node: ReactNode, type: unknown): node is ReactElement {
+  return isValidElement(node) && node.type === type
+}

package/dist/styles-BYTyKQFP.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles-BYTyKQFP.js","sources":["../src/widgets/utils/chart-config/option-builders.ts","../src/widgets/utils/skeleton/styles.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 * 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 type { Theme } from '@mui/material'\n\n/**\n * Base skeleton styles shared across all chart widgets\n */\nexport const baseSkeletonStyles = {\n  graph: {\n    /**\n     * Common container style for chart widget skeletons\n     */\n    container: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      flexDirection: 'column',\n      gap: ({ spacing }: Theme) => spacing(1),\n      height: ({ spacing }: Theme) => spacing(38),\n    },\n  },\n} as const\n"],"names":["niceNum","value","absValue","Math","abs","base","pow","floor","log10","rounded","ceil","buildLegendConfig","hasLegend","labelFormatter","show","icon","left","bottom","orient","type","formatter","name","String","buildGridConfig","theme","parseInt","spacing","createTooltipPositioner","point","_params","_dom","_rect","size","position","top","contentSize","viewSize","right","createAxisLabelFormatter","applyXAxisFormatter","xAxis","xAxisIsObject","Array","isArray","xAxisTyped","axisFormatter","undefined","axisLabel","applyYAxisFormatter","yAxis","yAxisIsObject","yAxisTyped","createTooltipFormatter","callback","params","items","tooltip","values","map","item","seriesName","marker","marginStyle","length","formattedValues","join","buildSeriesLabelConfig","encodeKey","label","encodeIndex","encode","dimName","dimensionNames","row","buildHistogramSeriesLabelConfig","baseSkeletonStyles","graph","container","display","alignItems","justifyContent","flexDirection","gap","height"],"mappings":"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"}