@carto/ps-react-ui 5.0.0 → 6.0.0

package/src/widgets-v2/actions/searcher/searcher-toggle.tsx

@@ -1,91 +0,0 @@
-import { useCallback, type ComponentType } from 'react'
-import { IconButton, type SvgIconProps } from '@mui/material'
-import { Search as SearchIcon } from '@mui/icons-material'
-import { Tooltip } from '../../../components'
-import {
-  getWidgetStore,
-  useSingleTransform,
-  useWidget,
-  useWidgetId,
-} from '../../stores'
-import { filterBySearchText } from './filter'
-import { DEFAULT_SEARCHER_LABELS, type SearcherLabels } from './labels'
-import { styles } from './style'
-
-const SEARCHER_DESCRIPTOR = {
-  id: 'searcher',
-  type: 'data' as const,
-  order: 20,
-  disables: ['lock-selection'],
-}
-
-export interface SearcherToggleProps {
-  labels?: Partial<SearcherLabels>
-  icon?: ComponentType<SvgIconProps>
-  iconProps?: SvgIconProps
-  /**
-   * Whether the searcher transform is enabled on first mount. Defaults
-   * to `false` so the toggle renders un-pressed and the
-   * `filterBySearchText` transform stays dormant until the user clicks
-   * it. Set to `true` for search-first widgets where the input is the
-   * primary affordance.
-   */
-  initialEnabled?: boolean
-}
-
-export function SearcherToggle({
-  labels,
-  icon: Icon = SearchIcon,
-  iconProps,
-  initialEnabled = false,
-}: SearcherToggleProps) {
-  const id = useWidgetId()
-  const resolved = { ...DEFAULT_SEARCHER_LABELS, ...labels }
-  const text = useWidget(
-    id,
-    (s) => (s.transformStates.searcher?.searchText as string | undefined) ?? '',
-  )
-
-  // The transform fn closes over `text`. Memoize via useCallback so identity
-  // only changes when text changes, allowing useTransform to re-register.
-  const fn = useCallback(
-    (data: unknown) => filterBySearchText(data, text),
-    [text],
-  )
-
-  const { enabled, toggle } = useSingleTransform(id, SEARCHER_DESCRIPTOR, fn, {
-    initialEnabled,
-  })
-
-  return (
-    <Tooltip title={resolved.toggle}>
-      <IconButton
-        size='small'
-        aria-label={resolved.toggle}
-        aria-pressed={enabled}
-        onClick={toggle}
-        sx={{ ...styles.toggle, ...(enabled && styles.toggleActive) }}
-      >
-        <Icon fontSize='small' {...iconProps} />
-      </IconButton>
-    </Tooltip>
-  )
-}
-
-/**
- * Imperatively writes the search text into the widget store. Used by the
- * Searcher input to update text inside transformStates without going through
- * a re-rendered React subscription.
- */
-export function setSearcherText(widgetId: string, value: string): void {
-  getWidgetStore(widgetId).setState((s) => ({
-    transformStates: {
-      ...s.transformStates,
-      searcher: {
-        enabled: s.transformStates.searcher?.enabled ?? false,
-        ...s.transformStates.searcher,
-        searchText: value,
-      },
-    },
-  }))
-}

package/src/widgets-v2/actions/searcher/searcher.tsx

@@ -1,111 +0,0 @@
-import { useCallback, useMemo, useRef, useState } from 'react'
-import { IconButton, InputAdornment, TextField } from '@mui/material'
-import { Search as SearchIcon } from '@mui/icons-material'
-import { Clear as ClearIcon } from '@mui/icons-material'
-import { debounce } from '@carto/ps-utils'
-import { getWidgetStore, useWidget, useWidgetId } from '../../stores'
-import { setSearcherText } from './searcher-toggle'
-import { DEFAULT_SEARCHER_LABELS, type SearcherLabels } from './labels'
-import { styles } from './style'
-
-export interface SearcherProps {
-  labels?: Partial<SearcherLabels>
-  /** Debounce delay before the input value is written to the widget store. */
-  debounceMs?: number
-}
-
-const DEFAULT_DEBOUNCE = 300
-
-/**
- * Renders only when the matching `<SearcherToggle />` is enabled — drives the
- * `transformStates['searcher'].searchText` field via a debounced setter.
- */
-export function Searcher({
-  labels,
-  debounceMs = DEFAULT_DEBOUNCE,
-}: SearcherProps) {
-  const id = useWidgetId()
-  const resolved = { ...DEFAULT_SEARCHER_LABELS, ...labels }
-  const enabled = useWidget(
-    id,
-    (s) => s.transformStates.searcher?.enabled ?? false,
-  )
-
-  const inputRef = useRef<HTMLInputElement | null>(null)
-
-  // Hydrate from the store so re-toggling the input preserves any prior text.
-  const [local, setLocal] = useState<string>(
-    () =>
-      (getWidgetStore(id).getState().transformStates.searcher?.searchText as
-        string | undefined) ?? '',
-  )
-
-  const debouncedWrite = useMemo(
-    () =>
-      debounce(
-        (value: unknown) => setSearcherText(id, value as string),
-        debounceMs,
-      ),
-    [id, debounceMs],
-  )
-
-  const handleSearchTextChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      const value = e.target.value
-      setLocal(value)
-      debouncedWrite(value)
-    },
-    [debouncedWrite],
-  )
-
-  const handleClear = useCallback(() => {
-    setLocal('')
-    setSearcherText(id, '')
-    // Re-arm the debounced timer with '' so any pending stale write resolves
-    // to the cleared value rather than re-applying the previous text.
-    debouncedWrite('')
-    inputRef.current?.focus()
-  }, [id, debouncedWrite])
-
-  if (!enabled) return null
-
-  return (
-    <TextField
-      inputRef={inputRef}
-      size='small'
-      fullWidth
-      variant='filled'
-      placeholder={resolved.placeholder}
-      value={local}
-      onChange={handleSearchTextChange}
-      // The Searcher only mounts when the user explicitly toggles the
-      // SearcherToggle action — focusing the input on mount matches user
-      // intent, so the jsx-a11y/no-autofocus warning is the false-positive
-      // case (the rule targets unsolicited autofocus that disorients
-      // screen readers).
-      // eslint-disable-next-line
-      autoFocus
-      aria-label={resolved.placeholder}
-      sx={styles.input}
-      InputProps={{
-        startAdornment: (
-          <InputAdornment position='start'>
-            <SearchIcon fontSize='small' />
-          </InputAdornment>
-        ),
-        endAdornment: local ? (
-          <InputAdornment position='end'>
-            <IconButton
-              size='small'
-              edge='end'
-              aria-label={resolved.clearAriaLabel}
-              onClick={handleClear}
-            >
-              <ClearIcon fontSize='small' />
-            </IconButton>
-          </InputAdornment>
-        ) : null,
-      }}
-    />
-  )
-}

package/src/widgets-v2/actions/stack-toggle/stack-toggle.test.tsx

@@ -1,61 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach } from 'vitest'
-import { fireEvent, render, screen } from '@testing-library/react'
-import { Provider } from '../../provider/widget-provider'
-import { clearAllWidgetStores, getWidgetStore } from '../../stores'
-import { StackToggle } from './stack-toggle'
-
-beforeEach(() => clearAllWidgetStores())
-afterEach(() => clearAllWidgetStores())
-
-/**
- * Stack/Zoom/Brush share the same toggle wiring. This file is the exemplar.
- * The transforms themselves are tested in `transforms.test.ts` /
- * `…/zoom-toggle/transforms.test.ts` / `…/brush-toggle/transforms.test.ts`.
- */
-describe('<StackToggle>', () => {
-  it('starts disabled by default and uses the off-state label', () => {
-    render(
-      <Provider id='st1' data={[]}>
-        <StackToggle />
-      </Provider>,
-    )
-    const btn = screen.getByRole('button', { name: 'Stack series' })
-    expect(btn.getAttribute('aria-pressed')).toBe('false')
-  })
-
-  it('toggles aria-pressed and label on click', () => {
-    render(
-      <Provider id='st2' data={[]}>
-        <StackToggle />
-      </Provider>,
-    )
-    fireEvent.click(screen.getByRole('button', { name: 'Stack series' }))
-    const after = screen.getByRole('button', { name: 'Unstack series' })
-    expect(after.getAttribute('aria-pressed')).toBe('true')
-  })
-
-  it('persists the enabled flag on the widget store under transformStates', () => {
-    render(
-      <Provider id='st3' data={[]}>
-        <StackToggle />
-      </Provider>,
-    )
-    fireEvent.click(screen.getByRole('button', { name: 'Stack series' }))
-    expect(
-      getWidgetStore('st3').getState().transformStates['stack-toggle']?.enabled,
-    ).toBe(true)
-  })
-
-  it('initialEnabled=true mounts already-on', () => {
-    render(
-      <Provider id='st4' data={[]}>
-        <StackToggle initialEnabled />
-      </Provider>,
-    )
-    expect(
-      screen
-        .getByRole('button', { name: 'Unstack series' })
-        .getAttribute('aria-pressed'),
-    ).toBe('true')
-  })
-})

package/src/widgets-v2/actions/stack-toggle/stack-toggle.tsx

@@ -1,54 +0,0 @@
-import { type ComponentType } from 'react'
-import { IconButton, type SvgIconProps } from '@mui/material'
-import { StackedBarChart as StackedBarChartIcon } from '@mui/icons-material'
-import { Tooltip } from '../../../components'
-import { useSingleTransform, useWidgetId } from '../../stores'
-import { addStack } from './transforms'
-import { DEFAULT_STACK_TOGGLE_LABELS, type StackToggleLabels } from './labels'
-import { styles } from './style'
-
-const STACK_DESCRIPTOR = {
-  id: 'stack-toggle',
-  type: 'config' as const,
-  order: 30,
-}
-
-export interface StackToggleProps {
-  initialEnabled?: boolean
-  labels?: Partial<StackToggleLabels>
-  icon?: ComponentType<SvgIconProps>
-  iconProps?: SvgIconProps
-}
-
-export function StackToggle({
-  initialEnabled = false,
-  labels,
-  icon: Icon = StackedBarChartIcon,
-  iconProps,
-}: StackToggleProps) {
-  const id = useWidgetId()
-  const _labels = { ...DEFAULT_STACK_TOGGLE_LABELS, ...labels }
-  const { enabled, toggle } = useSingleTransform(
-    id,
-    STACK_DESCRIPTOR,
-    addStack,
-    {
-      initialEnabled,
-    },
-  )
-  const tooltip = enabled ? _labels.on : _labels.off
-
-  return (
-    <Tooltip title={tooltip}>
-      <IconButton
-        size='small'
-        aria-label={tooltip}
-        aria-pressed={enabled}
-        onClick={toggle}
-        sx={{ ...styles.toggle, ...(enabled && styles.toggleActive) }}
-      >
-        <Icon fontSize='small' {...iconProps} />
-      </IconButton>
-    </Tooltip>
-  )
-}

package/src/widgets-v2/actions/stack-toggle/style.ts

@@ -1,11 +0,0 @@
-import type { SxProps, Theme } from '@mui/material'
-
-export const styles = {
-  toggle: {
-    p: 0.5,
-    '& .MuiSvgIcon-root': { fontSize: 20 },
-  },
-  toggleActive: {
-    background: (theme: Theme) => theme.palette.primary.relatedLight,
-  },
-} satisfies Record<string, SxProps<Theme>>

package/src/widgets-v2/actions/zoom-toggle/style.ts

@@ -1,11 +0,0 @@
-import type { SxProps, Theme } from '@mui/material'
-
-export const styles = {
-  toggle: {
-    p: 0.5,
-    '& .MuiSvgIcon-root': { fontSize: 20 },
-  },
-  toggleActive: {
-    background: (theme: Theme) => theme.palette.primary.relatedLight,
-  },
-} satisfies Record<string, SxProps<Theme>>

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

@@ -1,107 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
-import { fireEvent, render, screen } from '@testing-library/react'
-import type { ECharts } from 'echarts'
-import { ZoomToggle } from './zoom-toggle'
-import { Provider } from '../../provider/widget-provider'
-import {
-  applyTransforms,
-  clearAllWidgetStores,
-  getWidgetStore,
-  setEchartInstance,
-} from '../../stores'
-
-beforeEach(() => clearAllWidgetStores())
-afterEach(() => clearAllWidgetStores())
-
-describe('<ZoomToggle>', () => {
-  it('starts disabled by default', () => {
-    render(
-      <Provider id='zt-1' data={[]}>
-        <ZoomToggle />
-      </Provider>,
-    )
-    const trigger = screen.getByLabelText('Enable zoom')
-    expect(trigger.getAttribute('aria-pressed')).toBe('false')
-  })
-
-  it('respects initialEnabled=true', () => {
-    render(
-      <Provider id='zt-2' data={[]}>
-        <ZoomToggle initialEnabled />
-      </Provider>,
-    )
-    expect(screen.getByLabelText('Disable zoom')).toBeTruthy()
-  })
-
-  it('clicking enables the transform — dataZoom appears in the post-pipeline option', () => {
-    render(
-      <Provider id='zt-3' data={[1]}>
-        <ZoomToggle />
-      </Provider>,
-    )
-    fireEvent.click(screen.getByLabelText('Enable zoom'))
-    // configTransforms now apply inside <Widget.Echart>; replay the
-    // pipeline locally over a blank structural option.
-    const configTransforms = getWidgetStore('zt-3').getState().configTransforms
-    const opts = applyTransforms({}, configTransforms) as {
-      dataZoom?: { type: string }[]
-    }
-    expect(opts.dataZoom).toBeTruthy()
-    expect(opts.dataZoom).toHaveLength(2)
-    expect(opts.dataZoom?.[0]?.type).toBe('inside')
-    expect(opts.dataZoom?.[1]?.type).toBe('slider')
-  })
-
-  it('clicking to disable issues a one-shot setOption({}, replaceMerge: ["dataZoom"]) on the live instance', () => {
-    const setOption = vi.fn()
-    const chart = { setOption } as unknown as ECharts
-    render(
-      <Provider id='zt-4' data={[1]}>
-        <ZoomToggle initialEnabled />
-      </Provider>,
-    )
-    setEchartInstance('zt-4', chart)
-    fireEvent.click(screen.getByLabelText('Disable zoom'))
-    expect(setOption).toHaveBeenCalledTimes(1)
-    expect(setOption).toHaveBeenCalledWith({}, { replaceMerge: ['dataZoom'] })
-  })
-
-  it('clicking to enable does NOT touch the live instance (no cleanup needed)', () => {
-    const setOption = vi.fn()
-    const chart = { setOption } as unknown as ECharts
-    render(
-      <Provider id='zt-5' data={[1]}>
-        <ZoomToggle />
-      </Provider>,
-    )
-    setEchartInstance('zt-5', chart)
-    fireEvent.click(screen.getByLabelText('Enable zoom'))
-    expect(setOption).not.toHaveBeenCalled()
-  })
-
-  it('rehydrates enabled state from transformStates on remount', () => {
-    const { unmount } = render(
-      <Provider id='zt-6' data={[1]} keepAlive>
-        <ZoomToggle />
-      </Provider>,
-    )
-    fireEvent.click(screen.getByLabelText('Enable zoom'))
-    unmount()
-    render(
-      <Provider id='zt-6' data={[1]} keepAlive>
-        <ZoomToggle />
-      </Provider>,
-    )
-    // Re-mounted with keepAlive — enabled survived.
-    expect(screen.getByLabelText('Disable zoom')).toBeTruthy()
-  })
-
-  it('honors custom labels', () => {
-    render(
-      <Provider id='zt-7' data={[]}>
-        <ZoomToggle labels={{ off: 'Pan & zoom', on: 'Stop pan & zoom' }} />
-      </Provider>,
-    )
-    expect(screen.getByLabelText('Pan & zoom')).toBeTruthy()
-  })
-})

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

@@ -1,106 +0,0 @@
-import { useCallback, useMemo, type ComponentType } from 'react'
-import { IconButton, useTheme, type SvgIconProps } from '@mui/material'
-import { ZoomIn as ZoomInIcon } from '@mui/icons-material'
-import { Tooltip } from '../../../components'
-import {
-  getEchartInstance,
-  useSingleTransform,
-  useWidgetId,
-} from '../../stores'
-import { createAddZoom, type ZoomAxis } from './transforms'
-import { DEFAULT_ZOOM_TOGGLE_LABELS, type ZoomToggleLabels } from './labels'
-import { styles } from './style'
-
-const ZOOM_DESCRIPTOR = {
-  id: 'zoom-toggle',
-  type: 'config' as const,
-  order: 20,
-}
-
-export interface ZoomToggleProps {
-  initialEnabled?: boolean
-  labels?: Partial<ZoomToggleLabels>
-  icon?: ComponentType<SvgIconProps>
-  iconProps?: SvgIconProps
-  /**
-   * Which axes the zoom controls. Default `['x']` — matches bar /
-   * histogram / timeseries (horizontal pan on the category axis). Pass
-   * `['x', 'y']` for 2D zoom on a scatterplot-style chart (mouse-wheel
-   * scales both axes; horizontal slider at bottom + vertical slider on
-   * the right).
-   */
-  axes?: readonly ZoomAxis[]
-}
-
-/**
- * Toggle a `dataZoom` slider + wheel-zoom on the chart. The transform is
- * theme-bound so the slider gets v1's CARTO chrome (blue-tinted filler,
- * secondary-color preview, white pill handles).
- *
- * `dataZoom` is intentionally NOT in `replaceMergeKeys` — ECharts merges
- * subsequent `setOption` calls so the user's dragged range survives
- * unrelated re-renders (data updates, formatter swaps, RelativeData toggles).
- *
- * On disable the transform is unregistered, but ECharts' merge semantics
- * would otherwise *keep* the live `dataZoom` component visible. To remove
- * the slider immediately we issue a one-shot
- * `setOption({}, { replaceMerge: ['dataZoom'] })` against the live chart
- * instance via {@link getEchartInstance} — this bypasses the pipeline so
- * unrelated transforms aren't disturbed.
- */
-export function ZoomToggle({
-  initialEnabled = false,
-  labels,
-  icon: Icon = ZoomInIcon,
-  iconProps,
-  axes,
-}: ZoomToggleProps) {
-  const id = useWidgetId()
-  const theme = useTheme()
-  const _labels = { ...DEFAULT_ZOOM_TOGGLE_LABELS, ...labels }
-  // Reduce `axes` to two structural booleans before memoizing so the memo
-  // depends on stable primitive values, not an array reference (callers
-  // typically pass an inline `axes={['x', 'y']}` literal that changes
-  // identity each render). Default — no `axes` prop — is x-axis only,
-  // matching `createAddZoom`'s default.
-  const includeX = axes ? axes.includes('x') : true
-  const includeY = axes ? axes.includes('y') : false
-  const transform = useMemo(() => {
-    const resolved: ZoomAxis[] = []
-    if (includeX) resolved.push('x')
-    if (includeY) resolved.push('y')
-    return createAddZoom(theme, { axes: resolved })
-  }, [theme, includeX, includeY])
-  const { enabled, toggle } = useSingleTransform(
-    id,
-    ZOOM_DESCRIPTOR,
-    transform,
-    { initialEnabled },
-  )
-
-  const handleToggle = useCallback(() => {
-    if (enabled) {
-      // About to disable — clear the dataZoom component on the live
-      // instance so the slider disappears immediately.
-      getEchartInstance(id)?.setOption({}, { replaceMerge: ['dataZoom'] })
-    }
-    toggle()
-  }, [enabled, toggle, id])
-
-  const tooltip = enabled ? _labels.on : _labels.off
-
-  return (
-    <Tooltip title={tooltip}>
-      <IconButton
-        size='small'
-        aria-label={tooltip}
-        aria-pressed={enabled}
-        onClick={handleToggle}
-        className={enabled ? 'active' : undefined}
-        sx={{ ...styles.toggle, ...(enabled && styles.toggleActive) }}
-      >
-        <Icon fontSize='small' {...iconProps} />
-      </IconButton>
-    </Tooltip>
-  )
-}

package/src/widgets-v2/bar/index.ts

@@ -1,10 +0,0 @@
-export { barOptions, createBarOptionFactory } from './options'
-export { BarSkeleton } from './skeleton'
-export { createBarDownloadConfig } from './download'
-export type {
-  BarDatum,
-  BarWidgetData,
-  BarOptionsInput,
-  BarOptionFactoryInput,
-  BarEChartsOption,
-} from './types'

package/src/widgets-v2/bar/skeleton.tsx

@@ -1,69 +0,0 @@
-import { Box, Skeleton, type SxProps, type Theme } from '@mui/material'
-
-const styles = {
-  container: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    flexDirection: 'column',
-    gap: ({ spacing }) => spacing(1),
-    height: ({ spacing }) => spacing(38),
-  },
-  grid: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    flex: '1 1 auto',
-    alignItems: 'flex-end',
-    width: '100%',
-  },
-  bar: {
-    flex: 1,
-    maxWidth: ({ spacing }) => spacing(12),
-    '& + &': {
-      marginLeft: ({ spacing }) => spacing(1),
-    },
-  },
-  legend: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: ({ spacing }) => spacing(2),
-    height: ({ spacing }) => spacing(5),
-  },
-  legendItem: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: ({ spacing }) => spacing(1.5),
-  },
-} satisfies Record<string, SxProps<Theme>>
-
-const BAR_HEIGHTS = ['20%', '40%', '60%', '20%', '80%'] as const
-
-/**
- * Loading state for the Bar widget. Mirrors a bar chart's silhouette — five
- * vertical bars at staggered heights anchored to the bottom, plus a legend
- * stub — so the skeleton reads as "a bar chart" rather than a generic list.
- */
-export function BarSkeleton() {
-  return (
-    <Box sx={styles.container}>
-      <Box sx={styles.grid}>
-        {BAR_HEIGHTS.map((height, i) => (
-          <Skeleton
-            key={`bar-${i}`}
-            sx={styles.bar}
-            variant='rectangular'
-            height={height}
-          />
-        ))}
-      </Box>
-      <Box sx={styles.legend}>
-        {[0, 1].map((i) => (
-          <Box key={`legend-${i}`} sx={styles.legendItem}>
-            <Skeleton variant='circular' width={8} height={8} />
-            <Skeleton width={48} height={8} />
-          </Box>
-        ))}
-      </Box>
-    </Box>
-  )
-}

package/src/widgets-v2/bar/types.ts

@@ -1,51 +0,0 @@
-import type { Theme } from '@mui/material'
-import type { EChartsOption } from 'echarts'
-import type { WidgetSeries } from '../types'
-
-/** A single category entry in a bar series. */
-export interface BarDatum {
-  name: string | number
-  value: number
-}
-
-/** v2 bar widget data shape: array of series, each a flat list of `{name, value}`. */
-export type BarWidgetData = readonly (readonly BarDatum[])[]
-
-/** Inputs to the structural-only {@link barOptions} builder. */
-export interface BarOptionsInput {
-  theme: Theme
-  formatter?: (value: number) => string
-  labelFormatter?: (value: string | number) => string | number
-}
-
-/**
- * Combined inputs for the option factory creator. Carries everything the
- * widget needs across BOTH phases — the structural-build (`theme`,
- * `formatter`, `labelFormatter`, `optionsOverride`) AND the data merge
- * (`series`, `selection`).
- */
-export interface BarOptionFactoryInput {
-  theme: Theme
-  formatter?: (value: number) => string
-  labelFormatter?: (value: string | number) => string | number
-  /**
-   * Per-series metadata — drives the legend, `series[i].name`, and
-   * (when `color` is set) per-series `itemStyle.color`. Paired with the
-   * data series by index.
-   */
-  series?: readonly WidgetSeries[]
-  /**
-   * When set, every datum whose `name` is **not** in this list renders dimmed
-   * (`itemStyle.opacity: 0.15`, matching `outOfBrush` styling). `null`/empty
-   * means "no selection active" — every bar is fully opaque.
-   */
-  selection?: readonly (string | number)[] | null
-  /**
-   * Consumer-supplied partial option merged into the structural option at
-   * structural-build time (via `mergeOptions`). Lets stories override pieces
-   * of the theme-aware base without forking the structural builder.
-   */
-  optionsOverride?: Partial<EChartsOption>
-}
-
-export type BarEChartsOption = EChartsOption