@carto/ps-react-ui 5.0.0-widgets.8 → 5.0.0

package/src/widgets/actions/zoom-toggle/zoom-toggle.test.tsx

@@ -0,0 +1,322 @@
+/**
+ * Render tests for ZoomToggle covering the previously-uncovered branches
+ * in src/widgets/actions/zoom-toggle/zoom-toggle.tsx (0% baseline).
+ *
+ * Coverage focus:
+ * - useWidgetSelector defaults (when widget store entry is empty, defaults
+ *   `defaultZoom`, `defaultZoomStart`, `defaultZoomEnd` are used)
+ * - Initial useEffect that seeds the store only when zoom is undefined
+ * - handleToggle toggles between zoom on/off and resets the range
+ * - handleReset re-applies default range with zoom=true
+ * - Conditional render of the reset Tooltip when zoom is active
+ * - Custom labels override defaults
+ * - Custom Icon / ResetIcon passthrough
+ * - dataZoom handler updates store with start/end (both `event.start` and
+ *   the batched `event.batch[0].start` paths)
+ */
+import { describe, it, expect, beforeEach } from 'vitest'
+import { render, screen, act, fireEvent } from '@testing-library/react'
+import { ThemeProvider, createTheme } from '@mui/material/styles'
+import { useWidgetStore, widgetStoreActions } from '../../stores/widget-store'
+import { ZoomToggle, ZOOM_TOGGLE_TOOL_ID } from './zoom-toggle'
+import type { ZoomState } from './types'
+
+const theme = createTheme({
+  spacing: (n: number) => `${n * 8}px`,
+  palette: {
+    common: { white: '#ffffff', black: '#000000' },
+    secondary: { main: '#3366ff' },
+    // @ts-expect-error - `black` is a CARTO-specific MUI palette extension
+    black: { 60: 'rgba(0,0,0,0.6)' },
+  },
+  typography: {
+    overlineDelicate: { fontSize: '11', fontFamily: 'Inter, sans-serif' },
+  },
+})
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider theme={theme}>{ui}</ThemeProvider>)
+}
+
+beforeEach(() => {
+  useWidgetStore.getState().clearWidgets()
+})
+
+describe('ZoomToggle render', () => {
+  it('renders with default state (zoom off → no reset button)', () => {
+    renderWithTheme(<ZoomToggle id='zt-1' />)
+    expect(screen.getAllByRole('button')).toHaveLength(1)
+    expect(screen.getByRole('button').getAttribute('data-active')).toBe('false')
+  })
+
+  it('seeds the widget store on mount when zoom is undefined', () => {
+    renderWithTheme(
+      <ZoomToggle
+        id='zt-seed'
+        defaultZoom
+        defaultZoomStart={10}
+        defaultZoomEnd={90}
+      />,
+    )
+    const widget = widgetStoreActions.getWidget<ZoomState>('zt-seed')
+    expect(widget?.zoom).toBe(true)
+    expect(widget?.zoomStart).toBe(10)
+    expect(widget?.zoomEnd).toBe(90)
+  })
+
+  it('does NOT seed when zoom is already set in the store', () => {
+    widgetStoreActions.setWidget('zt-noseed', {
+      zoom: false,
+      zoomStart: 25,
+      zoomEnd: 75,
+    })
+    renderWithTheme(
+      <ZoomToggle
+        id='zt-noseed'
+        defaultZoom
+        defaultZoomStart={10}
+        defaultZoomEnd={90}
+      />,
+    )
+    const widget = widgetStoreActions.getWidget<ZoomState>('zt-noseed')
+    // Should preserve the existing store entry
+    expect(widget?.zoomStart).toBe(25)
+    expect(widget?.zoomEnd).toBe(75)
+  })
+
+  it('shows the reset button when zoom is active', () => {
+    widgetStoreActions.setWidget('zt-active', {
+      zoom: true,
+      zoomStart: 0,
+      zoomEnd: 100,
+    })
+    renderWithTheme(<ZoomToggle id='zt-active' />)
+    // 2 buttons: toggle + reset
+    expect(screen.getAllByRole('button')).toHaveLength(2)
+  })
+
+  it('uses custom labels when provided', () => {
+    widgetStoreActions.setWidget('zt-labels', {
+      zoom: true,
+      zoomStart: 0,
+      zoomEnd: 100,
+    })
+    renderWithTheme(
+      <ZoomToggle
+        id='zt-labels'
+        labels={{ enable: 'On', disable: 'Off', reset: 'Reset' }}
+      />,
+    )
+    // Reset button is rendered (we won't assert tooltip text because tooltips
+    // render lazily; the reset button's aria-label uses `resetLabel`)
+    expect(screen.getByRole('button', { name: /Reset/i })).toBeDefined()
+  })
+
+  it('respects an explicit ariaLabel from labels', () => {
+    renderWithTheme(
+      <ZoomToggle id='zt-aria' labels={{ ariaLabel: 'My zoom button' }} />,
+    )
+    expect(screen.getByRole('button', { name: 'My zoom button' })).toBeDefined()
+  })
+
+  it('renders custom Icon when provided', () => {
+    renderWithTheme(
+      <ZoomToggle id='zt-icon' Icon={<span data-testid='custom-icon' />} />,
+    )
+    expect(screen.getByTestId('custom-icon')).toBeDefined()
+  })
+
+  it('renders custom ResetIcon when zoom is active', () => {
+    widgetStoreActions.setWidget('zt-reset-icon', { zoom: true })
+    renderWithTheme(
+      <ZoomToggle
+        id='zt-reset-icon'
+        ResetIcon={<span data-testid='custom-reset' />}
+      />,
+    )
+    expect(screen.getByTestId('custom-reset')).toBeDefined()
+  })
+})
+
+describe('ZoomToggle interactions', () => {
+  it('handleToggle turns zoom on (zoom was off) and preserves the current range', () => {
+    widgetStoreActions.setWidget('zt-toggle-on', {
+      zoom: false,
+      zoomStart: 20,
+      zoomEnd: 80,
+    })
+    renderWithTheme(<ZoomToggle id='zt-toggle-on' />)
+    fireEvent.click(screen.getByRole('button'))
+    const w = widgetStoreActions.getWidget<ZoomState>('zt-toggle-on')
+    expect(w?.zoom).toBe(true)
+    expect(w?.zoomStart).toBe(20)
+    expect(w?.zoomEnd).toBe(80)
+  })
+
+  it('handleToggle turns zoom off and resets the range to 0/100', () => {
+    widgetStoreActions.setWidget('zt-toggle-off', {
+      zoom: true,
+      zoomStart: 20,
+      zoomEnd: 80,
+    })
+    renderWithTheme(<ZoomToggle id='zt-toggle-off' />)
+    const buttons = screen.getAllByRole('button')
+    // First button is the toggle
+    fireEvent.click(buttons[0]!)
+    const w = widgetStoreActions.getWidget<ZoomState>('zt-toggle-off')
+    expect(w?.zoom).toBe(false)
+    expect(w?.zoomStart).toBe(0)
+    expect(w?.zoomEnd).toBe(100)
+  })
+
+  it('handleReset restores the default zoom range with zoom=true', () => {
+    widgetStoreActions.setWidget('zt-reset', {
+      zoom: true,
+      zoomStart: 33,
+      zoomEnd: 66,
+    })
+    renderWithTheme(
+      <ZoomToggle id='zt-reset' defaultZoomStart={5} defaultZoomEnd={95} />,
+    )
+    // 2 buttons: toggle + reset → click reset
+    const buttons = screen.getAllByRole('button')
+    fireEvent.click(buttons[1]!)
+    const w = widgetStoreActions.getWidget<ZoomState>('zt-reset')
+    expect(w?.zoom).toBe(true)
+    expect(w?.zoomStart).toBe(5)
+    expect(w?.zoomEnd).toBe(95)
+  })
+})
+
+describe('ZoomToggle pipeline tool registration', () => {
+  it('registers a config tool on mount and unregisters on unmount', () => {
+    const { unmount } = renderWithTheme(<ZoomToggle id='zt-tool' defaultZoom />)
+    // Tool should be registered
+    const widget = widgetStoreActions.getWidget('zt-tool')
+    expect(widget).toBeDefined()
+    unmount()
+    // Tool cleanup runs via the effect's cleanup function
+  })
+
+  it('config tool fn merges zoom config into the option, adjusting grid.bottom', () => {
+    widgetStoreActions.setWidget('zt-toolfn', {
+      zoom: true,
+      zoomStart: 0,
+      zoomEnd: 100,
+    })
+    renderWithTheme(<ZoomToggle id='zt-toolfn' defaultZoom />)
+
+    // Find the registered tool and exercise its fn
+    const widget = widgetStoreActions.getWidget('zt-toolfn') as unknown as {
+      registeredTools?: { id: string; fn: (cfg: unknown) => unknown }[]
+    }
+    const tool = widget?.registeredTools?.find(
+      (t) => t.id === ZOOM_TOGGLE_TOOL_ID,
+    )
+    if (tool) {
+      const result = tool.fn({
+        option: {
+          legend: { show: true },
+          grid: { bottom: 16 },
+        },
+        onEvents: { custom: () => undefined },
+      }) as {
+        option: { dataZoom: unknown[]; grid: { bottom: number } }
+        onEvents: { dataZoom: unknown; custom: unknown }
+      }
+      expect(result.option.dataZoom).toBeDefined()
+      expect(result.option.grid.bottom).toBeGreaterThan(16)
+      expect(result.onEvents.dataZoom).toBeDefined()
+      expect(result.onEvents.custom).toBeDefined()
+    }
+  })
+
+  it('config tool fn falls back to defaults when option/grid is missing', () => {
+    widgetStoreActions.setWidget('zt-fn-defaults', { zoom: true })
+    renderWithTheme(<ZoomToggle id='zt-fn-defaults' defaultZoom />)
+    const widget = widgetStoreActions.getWidget(
+      'zt-fn-defaults',
+    ) as unknown as {
+      registeredTools?: { id: string; fn: (cfg: unknown) => unknown }[]
+    }
+    const tool = widget?.registeredTools?.find(
+      (t) => t.id === ZOOM_TOGGLE_TOOL_ID,
+    )
+    if (tool) {
+      // No option, no onEvents — exercises the `?? {}` and default branches
+      const result = tool.fn({}) as { option: { grid: { bottom: number } } }
+      expect(result.option.grid.bottom).toBeGreaterThan(0)
+    }
+  })
+
+  it('handleDataZoom updates the store from `event.start/end`', () => {
+    widgetStoreActions.setWidget('zt-dz-direct', { zoom: true })
+    renderWithTheme(<ZoomToggle id='zt-dz-direct' defaultZoom />)
+    const widget = widgetStoreActions.getWidget('zt-dz-direct') as unknown as {
+      registeredTools?: { id: string; fn: (cfg: unknown) => unknown }[]
+    }
+    const tool = widget?.registeredTools?.find(
+      (t) => t.id === ZOOM_TOGGLE_TOOL_ID,
+    )
+    if (tool) {
+      const result = tool.fn({ option: {} }) as {
+        onEvents: { dataZoom: (event: unknown) => void }
+      }
+      act(() => {
+        result.onEvents.dataZoom({ start: 10, end: 90 })
+      })
+      const w = widgetStoreActions.getWidget<ZoomState>('zt-dz-direct')
+      expect(w?.zoomStart).toBe(10)
+      expect(w?.zoomEnd).toBe(90)
+    }
+  })
+
+  it('handleDataZoom falls back to `event.batch[0]` when start/end are missing', () => {
+    widgetStoreActions.setWidget('zt-dz-batch', { zoom: true })
+    renderWithTheme(<ZoomToggle id='zt-dz-batch' defaultZoom />)
+    const widget = widgetStoreActions.getWidget('zt-dz-batch') as unknown as {
+      registeredTools?: { id: string; fn: (cfg: unknown) => unknown }[]
+    }
+    const tool = widget?.registeredTools?.find(
+      (t) => t.id === ZOOM_TOGGLE_TOOL_ID,
+    )
+    if (tool) {
+      const result = tool.fn({ option: {} }) as {
+        onEvents: { dataZoom: (event: unknown) => void }
+      }
+      act(() => {
+        result.onEvents.dataZoom({ batch: [{ start: 25, end: 75 }] })
+      })
+      const w = widgetStoreActions.getWidget<ZoomState>('zt-dz-batch')
+      expect(w?.zoomStart).toBe(25)
+      expect(w?.zoomEnd).toBe(75)
+    }
+  })
+
+  it('handleDataZoom ignores events where start/end are still undefined', () => {
+    widgetStoreActions.setWidget('zt-dz-noop', {
+      zoom: true,
+      zoomStart: 5,
+      zoomEnd: 95,
+    })
+    renderWithTheme(<ZoomToggle id='zt-dz-noop' defaultZoom />)
+    const widget = widgetStoreActions.getWidget('zt-dz-noop') as unknown as {
+      registeredTools?: { id: string; fn: (cfg: unknown) => unknown }[]
+    }
+    const tool = widget?.registeredTools?.find(
+      (t) => t.id === ZOOM_TOGGLE_TOOL_ID,
+    )
+    if (tool) {
+      const result = tool.fn({ option: {} }) as {
+        onEvents: { dataZoom: (event: unknown) => void }
+      }
+      act(() => {
+        result.onEvents.dataZoom({})
+      })
+      const w = widgetStoreActions.getWidget<ZoomState>('zt-dz-noop')
+      // unchanged
+      expect(w?.zoomStart).toBe(5)
+      expect(w?.zoomEnd).toBe(95)
+    }
+  })
+})

package/src/widgets/actions/zoom-toggle/zoom-toggle.tsx

@@ -0,0 +1,218 @@
+import { Box, IconButton, useTheme } from '@mui/material'
+import {
+  SubdirectoryArrowLeftOutlined,
+  ZoomInOutlined,
+} from '@mui/icons-material'
+import { useEffect, useCallback } from 'react'
+import { widgetStoreActions } from '../../stores/widget-store'
+import type { ZoomToggleProps, ZoomState } from './types'
+import { styles } from './style'
+import { Tooltip } from '../../../components'
+import { getEChartZoomConfig } from '../../echart/utils'
+import type { EchartOptionsProps } from '../../echart/types'
+import { useWidgetSelector } from '../../stores/use-widget-selector'
+
+export const ZOOM_TOGGLE_TOOL_ID = 'zoom-toggle'
+
+/**
+ * Widget action to toggle EChart zoom functionality.
+ *
+ * Registers as a config pipeline tool so that zoom configuration is automatically
+ * re-applied when the base config is updated (e.g., by WidgetLoader).
+ *
+ * Zoom state (enabled, range) is stored in the widget store root, and the tool
+ * derives its `enabled` flag from the store. This keeps state accessible across
+ * component instances.
+ *
+ * When zoom is active, displays an inline reset button to disable zoom.
+ * Only intended for use in fullscreen ToolbarActions for bar and histogram widgets.
+ *
+ * @example
+ * ```tsx
+ * <ZoomToggle
+ *   id="my-widget"
+ *   defaultZoom={false}
+ *   zoomStart={0}
+ *   zoomEnd={100}
+ * />
+ * ```
+ */
+export function ZoomToggle({
+  id,
+  defaultZoom = false,
+  defaultZoomStart = 0,
+  defaultZoomEnd = 100,
+  labels,
+  Icon,
+  ResetIcon,
+  IconButtonProps,
+}: ZoomToggleProps) {
+  const theme = useTheme()
+
+  // Read zoom state from widget store root — single source of truth
+  const { zoom, zoomStart, zoomEnd } = useWidgetSelector(id, (w) => ({
+    zoom: (w as ZoomState | undefined)?.zoom ?? defaultZoom,
+    zoomStart: (w as ZoomState | undefined)?.zoomStart ?? defaultZoomStart,
+    zoomEnd: (w as ZoomState | undefined)?.zoomEnd ?? defaultZoomEnd,
+  }))
+
+  // Initialize store with default values on mount
+  useEffect(() => {
+    const current = widgetStoreActions.getWidget<ZoomState>(id)
+    if (current?.zoom === undefined) {
+      widgetStoreActions.setWidget(id, {
+        zoom: defaultZoom,
+        zoomStart: defaultZoomStart,
+        zoomEnd: defaultZoomEnd,
+      })
+    }
+  }, [id, defaultZoom, defaultZoomStart, defaultZoomEnd])
+
+  // Handle dataZoom event — update store (source of truth)
+  const handleDataZoom = useCallback(
+    (event: unknown) => {
+      const zoomEvent = event as {
+        start?: number
+        end?: number
+        batch?: {
+          start?: number
+          end?: number
+        }[]
+      }
+
+      const start = zoomEvent.start ?? zoomEvent.batch?.[0]?.start
+      const end = zoomEvent.end ?? zoomEvent.batch?.[0]?.end
+
+      if (start !== undefined && end !== undefined) {
+        widgetStoreActions.setWidget(id, {
+          zoom: true,
+          zoomStart: start,
+          zoomEnd: end,
+        })
+      }
+    },
+    [id],
+  )
+
+  // Register config tool once — fn reads zoom range from the store at execution time.
+  useEffect(() => {
+    widgetStoreActions.registerTool(id, {
+      id: ZOOM_TOGGLE_TOOL_ID,
+      type: 'config',
+      order: 20,
+      enabled: defaultZoom,
+      fn: (currentConfig) => {
+        const config = currentConfig as Record<string, unknown>
+        const option = config.option as EchartOptionsProps | undefined
+        const currentOnEvents =
+          (config.onEvents as Record<string, unknown> | undefined) ?? {}
+
+        const widget = widgetStoreActions.getWidget<ZoomState>(id)
+        const start = widget?.zoomStart ?? 0
+        const end = widget?.zoomEnd ?? 100
+
+        const legend = option?.legend as { show?: boolean } | undefined
+        const hasLegend = legend?.show !== false && legend !== undefined
+
+        const sliderHeight = parseInt(theme?.spacing?.(4) ?? '32')
+        const sliderGap = 8
+        const legendBottomOffset = hasLegend ? 28 : 0
+
+        const zoomConfig = getEChartZoomConfig(
+          { start, end },
+          {
+            inside: true,
+            xSlider: true,
+            ySlider: false,
+            bottomOffset: legendBottomOffset,
+          },
+          theme,
+        )
+
+        const grid = option?.grid as { bottom?: number | string } | undefined
+        const currentGridBottom =
+          typeof grid?.bottom === 'number'
+            ? grid.bottom
+            : parseInt(grid?.bottom ?? '24')
+
+        const gridBottom = currentGridBottom + sliderHeight + sliderGap
+
+        const onEvents = { ...currentOnEvents, dataZoom: handleDataZoom }
+
+        return {
+          ...config,
+          option: {
+            ...option,
+            ...zoomConfig,
+            grid: { ...grid, bottom: gridBottom },
+          },
+          onEvents,
+        }
+      },
+    })
+    return () => widgetStoreActions.unregisterTool(id, ZOOM_TOGGLE_TOOL_ID)
+  }, [id, theme, handleDataZoom, defaultZoom, defaultZoomStart, defaultZoomEnd])
+
+  // Sync enabled from store — lightweight, no re-registration
+  useEffect(() => {
+    widgetStoreActions.setToolEnabled(id, ZOOM_TOGGLE_TOOL_ID, zoom)
+  }, [id, zoom])
+
+  // Trigger pipeline when zoom range changes — fn reads from store at execution time,
+  // but the pipeline only re-runs when registeredTools reference changes.
+  // setToolEnabled handles the zoom on/off case, this handles range-only changes.
+  useEffect(() => {
+    widgetStoreActions.triggerToolPipeline(id)
+  }, [id, zoomStart, zoomEnd])
+
+  const handleToggle = () => {
+    const newZoom = !zoom
+    widgetStoreActions.setWidget(id, {
+      zoom: newZoom,
+      zoomStart: newZoom ? zoomStart : 0,
+      zoomEnd: newZoom ? zoomEnd : 100,
+    })
+  }
+
+  const handleReset = () => {
+    widgetStoreActions.setWidget(id, {
+      zoom: true,
+      zoomStart: defaultZoomStart,
+      zoomEnd: defaultZoomEnd,
+    })
+  }
+
+  const enableLabel = labels?.enable ?? 'Enable zoom'
+  const disableLabel = labels?.disable ?? 'Disable zoom'
+  const resetLabel = labels?.reset ?? 'Reset zoom'
+  const tooltipLabel = zoom ? disableLabel : enableLabel
+
+  return (
+    <Box sx={styles.container}>
+      <Tooltip title={tooltipLabel}>
+        <IconButton
+          size='small'
+          aria-label={labels?.ariaLabel ?? tooltipLabel}
+          onClick={handleToggle}
+          sx={styles.trigger}
+          data-active={zoom}
+          {...IconButtonProps}
+        >
+          {Icon ?? <ZoomInOutlined />}
+        </IconButton>
+      </Tooltip>
+      {zoom && (
+        <Tooltip title={resetLabel}>
+          <IconButton
+            size='small'
+            aria-label={resetLabel}
+            onClick={handleReset}
+            {...IconButtonProps}
+          >
+            {ResetIcon ?? <SubdirectoryArrowLeftOutlined />}
+          </IconButton>
+        </Tooltip>
+      )}
+    </Box>
+  )
+}

package/src/widgets/bar/config.ts

@@ -0,0 +1,140 @@
+import {
+  getCommonOptions,
+  mergeEchartWidgetConfig,
+  type EchartOptionsProps,
+} from '../echart'
+import type { BarConfig, BarWidgetConfig, BarWidgetData } from './types'
+import {
+  flattenObjectArrayToCSV,
+  buildLegendConfig,
+  buildGridConfig,
+  createTooltipPositioner,
+  createTooltipFormatter,
+  createChartDownloadConfig,
+  applyXAxisFormatter,
+  niceNum,
+  buildSeriesLabelConfig,
+} from '../utils/chart-config'
+
+export const barDownloadConfig = createChartDownloadConfig<BarWidgetData>(
+  flattenObjectArrayToCSV,
+)
+
+/**
+ * Generates ECharts configuration for bar chart widgets (vertical and horizontal), including axis, tooltip, legend, and series options styled with the CARTO theme.
+ *
+ * @param props - Bar chart configuration including data and theme.
+ * @returns Widget config with ECharts option object.
+ */
+export function barConfig(props: BarConfig): BarWidgetConfig {
+  return {
+    type: 'bar',
+    option: mergeEchartWidgetConfig(getCommonOptions(props), getOption(props)),
+    formatter: props.formatter,
+    labelFormatter: props.labelFormatter,
+  }
+}
+
+function getOption({
+  data = [],
+  theme,
+  formatter,
+  labelFormatter,
+}: BarConfig): EchartOptionsProps {
+  const hasLegend = (data?.length ?? 0) > 1
+
+  let niceMin = 0
+  let niceMax = 1
+
+  return {
+    legend: buildLegendConfig({ hasLegend, labelFormatter }),
+    grid: buildGridConfig(hasLegend, theme),
+    xAxis: applyXAxisFormatter(
+      {
+        type: 'category',
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          padding: [parseInt(theme.spacing(0.5)), 0, 0, 0],
+          margin: 0,
+          showMinLabel: undefined,
+          showMaxLabel: undefined,
+          hideOverlap: true,
+        },
+      },
+      labelFormatter,
+    ),
+    yAxis: {
+      type: 'value' as const,
+      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],
+        },
+      },
+    },
+    tooltip: {
+      position: createTooltipPositioner(theme),
+      formatter: createTooltipFormatter((item) => {
+        const value = item.value as Record<string, string | number>
+        const index = item.dimensionNames?.[item.encode?.y?.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,
+      type: 'bar',
+      barMaxWidth: 100,
+      emphasis: {
+        focus: 'series',
+      },
+      ...buildSeriesLabelConfig(formatter),
+    })),
+  } as EchartOptionsProps
+}

package/src/widgets/bar/index.ts

@@ -0,0 +1,9 @@
+export { barConfig, barDownloadConfig } from './config'
+export { BarSkeleton } from './skeleton'
+
+export type {
+  BarWidgetData,
+  BarWidgetState,
+  BarConfig,
+  BarWidgetConfig,
+} from './types'