@carto/ps-react-ui 6.1.1 → 6.3.0

package/dist/zoom-toggle-MmLjMTEw.js.map

@@ -1 +1 @@
-{"version":3,"file":"zoom-toggle-MmLjMTEw.js","names":["Icon = ZoomInIcon","{\n  initialEnabled = false,\n  labels,\n  icon: Icon = ZoomInIcon,\n  iconProps,\n  axes,\n}: ZoomToggleProps","initialEnabled = false","{ ...DEFAULT_ZOOM_TOGGLE_LABELS, ...labels }","axes ? axes.includes('x') : true","axes ? axes.includes('y') : false","createAddZoom(theme, { axes: resolved })","useMemo(() => {\n    const resolved: ZoomAxis[] = []\n    if (includeX) resolved.push('x')\n    if (includeY) resolved.push('y')\n    return createAddZoom(theme, { axes: resolved })\n  }, [theme, includeX, includeY])","{ initialEnabled }","() => {\n    if (enabled) {\n      // About to disable — clear the dataZoom component on the live\n      // instance so the slider disappears immediately.\n      getEchartInstance(id)?.setOption({}, { replaceMerge: ['dataZoom'] })\n    }\n    toggle()\n  }","useCallback(() => {\n    if (enabled) {\n      // About to disable — clear the dataZoom component on the live\n      // instance so the slider disappears immediately.\n      getEchartInstance(id)?.setOption({}, { replaceMerge: ['dataZoom'] })\n    }\n    toggle()\n  }, [enabled, toggle, id])","{ ...styles.toggle, ...(enabled && styles.toggleActive) }","enabled && styles.toggleActive","<Icon fontSize='small' {...iconProps} />","<IconButton\n        size='small'\n        aria-label={tooltip}\n        aria-pressed={enabled}\n        onClick={handleToggle}\n        className={enabled ? 'active' : undefined}\n        sx={{ ...styles.toggle, ...(enabled && styles.toggleActive) }}\n      >\n        <Icon fontSize='small' {...iconProps} />\n      </IconButton>","enabled ? 'active' : undefined","<Tooltip title={tooltip}>\n      <IconButton\n        size='small'\n        aria-label={tooltip}\n        aria-pressed={enabled}\n        onClick={handleToggle}\n        className={enabled ? 'active' : undefined}\n        sx={{ ...styles.toggle, ...(enabled && styles.toggleActive) }}\n      >\n        <Icon fontSize='small' {...iconProps} />\n      </IconButton>\n    </Tooltip>"],"sources":["../src/widgets/actions/zoom-toggle/transforms.ts","../src/widgets/actions/zoom-toggle/labels.ts","../src/widgets/actions/zoom-toggle/style.ts","../src/widgets/actions/zoom-toggle/zoom-toggle.tsx"],"sourcesContent":["import type { Theme } from '@mui/material'\n\n/**\n * v1's slider handle — 9×36 SVG with a white pill body, secondary-colored\n * stroke, and three grip lines. Inlined as a data URL so the chart can\n * render it without a network fetch.\n */\nconst SLIDER_HANDLE_ICON =\n  'image://data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSIzNiIgdmlld0JveD0iMCAwIDkgMzYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjAuNSIgeT0iLTAuNSIgd2lkdGg9IjgiIGhlaWdodD0iMTgiIHJ4PSI0IiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDI3KSIgZmlsbD0id2hpdGUiIHN0cm9rZT0iIzM1OEJFNyIvPgo8cmVjdCB3aWR0aD0iMyIgaGVpZ2h0PSIyIiByeD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMyAyMykiIGZpbGw9IiMzNThCRTciLz4KPHJlY3Qgd2lkdGg9IjMiIGhlaWdodD0iMiIgcng9IjEiIHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDMgMTkpIiBmaWxsPSIjMzU4QkU3Ii8+CjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHJ4PSIxIiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAzIDE1KSIgZmlsbD0iIzM1OEJFNyIvPgo8L3N2Zz4='\n\nconst SLIDER_HEIGHT = 32\nconst SLIDER_BOTTOM = 0\n\n/** Which chart axis (or axes) zoom applies to. */\nexport type ZoomAxis = 'x' | 'y'\n\nexport interface CreateAddZoomOptions {\n  /**\n   * Axes to enable zoom on. Default `['x']` (matches bar / histogram /\n   * timeseries — horizontal pan/zoom on the category axis). Pass\n   * `['x', 'y']` for a scatterplot-style 2D zoom (mouse-wheel scales both\n   * axes; a horizontal slider sits at the bottom for x-range and a\n   * vertical slider sits on the right for y-range).\n   */\n  axes?: readonly ZoomAxis[]\n}\n\n/**\n * Theme-bound zoom config transform: adds one inside `dataZoom`\n * (mouse-wheel + drag) per axis plus a styled slider per axis with the\n * v1 chrome (blue-tinted filler, secondary-color data preview, white\n * pill handles, CARTO typography). The x-slider is horizontal at the\n * bottom; the y-slider is vertical on the right.\n *\n * Returned function has stable identity for a given theme + axes\n * combination; pair with `useMemo` at the call site.\n *\n * **No `start` / `end`** are emitted: ECharts defaults to `0–100` on the\n * first `setOption` and then keeps the runtime slider state across\n * subsequent merges (no `replaceMerge` for `dataZoom`). Re-running the\n * transform on data/formatter/RelativeData updates therefore preserves the\n * user's dragged range instead of snapping it back.\n */\nexport function createAddZoom(\n  theme: Theme,\n  options: CreateAddZoomOptions = {},\n): (option: unknown) => unknown {\n  const axes = options.axes ?? ['x']\n  const includeX = axes.includes('x')\n  const includeY = axes.includes('y')\n  const sliderStyles = getZoomSliderStyles(theme)\n  const baseSliderProps = {\n    throttle: 0,\n    showDetail: false,\n    brushSelect: false,\n    moveHandleSize: 8,\n    handleSize: '100%',\n    ...sliderStyles,\n  }\n  return (option: unknown): unknown => {\n    if (option == null || typeof option !== 'object') return option\n    const cfg = option as Record<string, unknown>\n    const dataZoom: object[] = []\n    if (includeX) {\n      dataZoom.push({ type: 'inside', xAxisIndex: [0], throttle: 0 })\n    }\n    if (includeY) {\n      dataZoom.push({ type: 'inside', yAxisIndex: [0], throttle: 0 })\n    }\n    if (includeX) {\n      dataZoom.push({\n        type: 'slider',\n        xAxisIndex: [0],\n        height: SLIDER_HEIGHT,\n        bottom: SLIDER_BOTTOM,\n        handleIcon: SLIDER_HANDLE_ICON,\n        ...baseSliderProps,\n      })\n    }\n    if (includeY) {\n      // Vertical slider — `width` is its thickness, `right` pins it to\n      // the right edge. We omit `handleIcon` so ECharts renders its\n      // default vertical handle (the inline SVG is shaped for a\n      // horizontal slider and looks wrong when rotated).\n      dataZoom.push({\n        type: 'slider',\n        yAxisIndex: [0],\n        width: SLIDER_HEIGHT,\n        right: SLIDER_BOTTOM,\n        ...baseSliderProps,\n      })\n    }\n    return { ...cfg, dataZoom }\n  }\n}\n\n/**\n * Back-compat untyped transform — produces the bare `dataZoom` config from\n * the original v2 implementation. Use {@link createAddZoom} when a theme is\n * available so the slider matches the v1 styling.\n *\n * `start` / `end` are intentionally omitted so ECharts preserves the user's\n * runtime range across subsequent `setOption` merges (see {@link createAddZoom}).\n */\nexport const addZoom = (option: unknown): unknown => {\n  if (option == null || typeof option !== 'object') return option\n  const cfg = option as Record<string, unknown>\n  return {\n    ...cfg,\n    dataZoom: [\n      { type: 'inside' },\n      {\n        type: 'slider',\n        height: SLIDER_HEIGHT,\n        bottom: SLIDER_BOTTOM,\n      },\n    ],\n  }\n}\n\n/** Style block matching v1's `getEChartZoomSliderStyles`. */\nfunction getZoomSliderStyles(theme: Theme) {\n  const secondary = theme.palette.secondary?.main ?? '#358BE7'\n  return {\n    fillerColor: 'rgba(53, 139, 231, 0.25)',\n    borderColor: 'rgba(53, 139, 231, 0.3)',\n    borderWidth: 0.5,\n    backgroundColor: 'transparent',\n    borderRadius: 4,\n    dataBackground: {\n      lineStyle: { opacity: 0 },\n      areaStyle: { opacity: 1, color: secondary },\n    },\n    selectedDataBackground: {\n      lineStyle: { opacity: 0 },\n      areaStyle: { opacity: 1, color: secondary },\n    },\n    handleStyle: {\n      color: theme.palette.common?.white ?? '#fff',\n      borderColor: 'rgba(3, 111, 226, 0.08)',\n      borderWidth: 1,\n      shadowBlur: 3,\n      shadowColor: 'rgba(0, 0, 0, 0.1)',\n      shadowOffsetX: 0,\n      shadowOffsetY: 1,\n    },\n    textStyle: {\n      color: theme.palette.black?.[60] ?? theme.palette.text?.primary,\n      fontSize: parseInt(\n        (theme.typography.overlineDelicate?.fontSize as string | undefined) ??\n          '11',\n      ),\n      fontFamily:\n        theme.typography.overlineDelicate?.fontFamily ??\n        theme.typography.caption?.fontFamily,\n    },\n  }\n}\n\n/**\n * Visual layout constants used by the data-fusion mergers (bar, histogram,\n * timeseries) when laying out the slider against the legend / grid.\n */\nexport const ZOOM_LAYOUT = {\n  /** Slider height in px (matches `createAddZoom` output). */\n  sliderHeight: SLIDER_HEIGHT,\n  /** Vertical gap between chart grid and the slider. */\n  sliderGap: 8,\n  /** Slider `bottom` when a legend is shown — sits above the legend row. */\n  sliderBottomWithLegend: 28,\n} as const\n","export interface ZoomToggleLabels {\n  on: string\n  off: string\n}\n\nexport const DEFAULT_ZOOM_TOGGLE_LABELS: ZoomToggleLabels = {\n  on: 'Disable zoom',\n  off: 'Enable zoom',\n}\n","import type { SxProps, Theme } from '@mui/material'\n\nexport const styles = {\n  toggle: {\n    p: 0.5,\n    '& .MuiSvgIcon-root': { fontSize: 20 },\n  },\n  toggleActive: {\n    background: (theme: Theme) => theme.palette.primary.relatedLight,\n  },\n} satisfies Record<string, SxProps<Theme>>\n","import { useCallback, useMemo, type ComponentType } from 'react'\nimport { IconButton, useTheme, type SvgIconProps } from '@mui/material'\nimport { ZoomIn as ZoomInIcon } from '@mui/icons-material'\nimport { Tooltip } from '../../../components'\nimport {\n  getEchartInstance,\n  useSingleTransform,\n  useWidgetId,\n} from '../../stores'\nimport { createAddZoom, type ZoomAxis } from './transforms'\nimport { DEFAULT_ZOOM_TOGGLE_LABELS, type ZoomToggleLabels } from './labels'\nimport { styles } from './style'\n\nconst ZOOM_DESCRIPTOR = {\n  id: 'zoom-toggle',\n  type: 'config' as const,\n  order: 20,\n}\n\nexport interface ZoomToggleProps {\n  initialEnabled?: boolean\n  labels?: Partial<ZoomToggleLabels>\n  icon?: ComponentType<SvgIconProps>\n  iconProps?: SvgIconProps\n  /**\n   * Which axes the zoom controls. Default `['x']` — matches bar /\n   * histogram / timeseries (horizontal pan on the category axis). Pass\n   * `['x', 'y']` for 2D zoom on a scatterplot-style chart (mouse-wheel\n   * scales both axes; horizontal slider at bottom + vertical slider on\n   * the right).\n   */\n  axes?: readonly ZoomAxis[]\n}\n\n/**\n * Toggle a `dataZoom` slider + wheel-zoom on the chart. The transform is\n * theme-bound so the slider gets v1's CARTO chrome (blue-tinted filler,\n * secondary-color preview, white pill handles).\n *\n * `dataZoom` is intentionally NOT in `replaceMergeKeys` — ECharts merges\n * subsequent `setOption` calls so the user's dragged range survives\n * unrelated re-renders (data updates, formatter swaps, RelativeData toggles).\n *\n * On disable the transform is unregistered, but ECharts' merge semantics\n * would otherwise *keep* the live `dataZoom` component visible. To remove\n * the slider immediately we issue a one-shot\n * `setOption({}, { replaceMerge: ['dataZoom'] })` against the live chart\n * instance via {@link getEchartInstance} — this bypasses the pipeline so\n * unrelated transforms aren't disturbed.\n */\nexport function ZoomToggle({\n  initialEnabled = false,\n  labels,\n  icon: Icon = ZoomInIcon,\n  iconProps,\n  axes,\n}: ZoomToggleProps) {\n  const id = useWidgetId()\n  const theme = useTheme()\n  const _labels = { ...DEFAULT_ZOOM_TOGGLE_LABELS, ...labels }\n  // Reduce `axes` to two structural booleans before memoizing so the memo\n  // depends on stable primitive values, not an array reference (callers\n  // typically pass an inline `axes={['x', 'y']}` literal that changes\n  // identity each render). Default — no `axes` prop — is x-axis only,\n  // matching `createAddZoom`'s default.\n  const includeX = axes ? axes.includes('x') : true\n  const includeY = axes ? axes.includes('y') : false\n  const transform = useMemo(() => {\n    const resolved: ZoomAxis[] = []\n    if (includeX) resolved.push('x')\n    if (includeY) resolved.push('y')\n    return createAddZoom(theme, { axes: resolved })\n  }, [theme, includeX, includeY])\n  const { enabled, toggle } = useSingleTransform(\n    id,\n    ZOOM_DESCRIPTOR,\n    transform,\n    { initialEnabled },\n  )\n\n  const handleToggle = useCallback(() => {\n    if (enabled) {\n      // About to disable — clear the dataZoom component on the live\n      // instance so the slider disappears immediately.\n      getEchartInstance(id)?.setOption({}, { replaceMerge: ['dataZoom'] })\n    }\n    toggle()\n  }, [enabled, toggle, id])\n\n  const tooltip = enabled ? _labels.on : _labels.off\n\n  return (\n    <Tooltip title={tooltip}>\n      <IconButton\n        size='small'\n        aria-label={tooltip}\n        aria-pressed={enabled}\n        onClick={handleToggle}\n        className={enabled ? 'active' : undefined}\n        sx={{ ...styles.toggle, ...(enabled && styles.toggleActive) }}\n      >\n        <Icon fontSize='small' {...iconProps} />\n      </IconButton>\n    </Tooltip>\n  )\n}\n"],"mappings":";;;;;;;;AAOA,IAAM,IACJ,8pBAEI,IAAgB,IAChB,IAAgB;AAgCtB,SAAgB,EACd,GACA,IAAgC,CAAC,GACH;CAC9B,IAAM,IAAO,EAAQ,QAAQ,CAAC,GAAG,GAC3B,IAAW,EAAK,SAAS,GAAG,GAC5B,IAAW,EAAK,SAAS,GAAG,GAE5B,IAAkB;EACtB,UAAU;EACV,YAAY;EACZ,aAAa;EACb,gBAAgB;EAChB,YAAY;EACZ,GAPmB,EAAoB,CAOpC;CACL;CACA,QAAQ,MAA6B;EACnC,IAAsB,OAAO,KAAW,aAApC,GAA8C,OAAO;EACzD,IAAM,IAAM,GACN,IAAqB,CAAC;EA8B5B,OA7BI,KACF,EAAS,KAAK;GAAE,MAAM;GAAU,YAAY,CAAC,CAAC;GAAG,UAAU;EAAE,CAAC,GAE5D,KACF,EAAS,KAAK;GAAE,MAAM;GAAU,YAAY,CAAC,CAAC;GAAG,UAAU;EAAE,CAAC,GAE5D,KACF,EAAS,KAAK;GACZ,MAAM;GACN,YAAY,CAAC,CAAC;GACd,QAAQ;GACR,QAAQ;GACR,YAAY;GACZ,GAAG;EACL,CAAC,GAEC,KAKF,EAAS,KAAK;GACZ,MAAM;GACN,YAAY,CAAC,CAAC;GACd,OAAO;GACP,OAAO;GACP,GAAG;EACL,CAAC,GAEI;GAAE,GAAG;GAAK;EAAS;CAC5B;AACF;AAUA,IAAa,KAAW,MACA,OAAO,KAAW,aAApC,IAAqD,IAElD;CACL,GAAG;CACH,UAAU,CACR,EAAE,MAAM,SAAS,GACjB;EACE,MAAM;EACN,QAAQ;EACR,QAAQ;CACV,CACF;AACF;AAIF,SAAS,EAAoB,GAAc;CACzC,IAAM,IAAY,EAAM,QAAQ,WAAW,QAAQ;CACnD,OAAO;EACL,aAAa;EACb,aAAa;EACb,aAAa;EACb,iBAAiB;EACjB,cAAc;EACd,gBAAgB;GACd,WAAW,EAAE,SAAS,EAAE;GACxB,WAAW;IAAE,SAAS;IAAG,OAAO;GAAU;EAC5C;EACA,wBAAwB;GACtB,WAAW,EAAE,SAAS,EAAE;GACxB,WAAW;IAAE,SAAS;IAAG,OAAO;GAAU;EAC5C;EACA,aAAa;GACX,OAAO,EAAM,QAAQ,QAAQ,SAAS;GACtC,aAAa;GACb,aAAa;GACb,YAAY;GACZ,aAAa;GACb,eAAe;GACf,eAAe;EACjB;EACA,WAAW;GACT,OAAO,EAAM,QAAQ,QAAQ,OAAO,EAAM,QAAQ,MAAM;GACxD,UAAU,SACP,EAAM,WAAW,kBAAkB,YAClC,IACJ;GACA,YACE,EAAM,WAAW,kBAAkB,cACnC,EAAM,WAAW,SAAS;EAC9B;CACF;AACF;AAMA,IAAa,IAAc;CAEzB,cAAc;CAEd,WAAW;CAEX,wBAAwB;AAC1B,GCrKa,IAA+C;CAC1D,IAAI;CACJ,KAAK;AACP,GCNa,IAAS;CACpB,QAAQ;EACN,GAAG;EACH,sBAAsB,EAAE,UAAU,GAAG;CACvC;CACA,cAAc,EACZ,aAAa,MAAiB,EAAM,QAAQ,QAAQ,aACtD;AACF,GCGM,IAAkB;CACtB,IAAI;CACJ,MAAM;CACN,OAAO;AACT;AAiCA,SAAgB,EAAA,GAMI;gBANO,EACzB,gBAAA,GACA,WACA,MAAMA,GACN,cACA,YALyBC,GACzB,IAAA,MAAA,KAAA,KAAAC,GAEM,IAAA,MAAA,KAAA,IAAO,IAAPF,GAIA,IAAK,EAAY,GACjB,IAAQ,EAAS,GACPG;CAAoC,AAAA,EAAA,OAAA,gBAApC,IAAA;EAAE,GAAG;EAA4B,GAAG;CAAO,GAAP,EAAA,KAAA;CAApD,IAAM,IAAUA,GAMCC;0BAAO,IAAA,MAAA,EAAK,SAAS,GAAG,GAAxB,EAAA,KAAA;CAAjB,IAAM,IAAWA,GACAC;0BAAO,IAAA,IAAA,EAAK,SAAS,GAAG,IAAI,IAA5B,EAAA,KAAA;CAAjB,IAAM,IAAWA,GAKRC;CAFH,IAAA,EAAA,OAAA,KAAA,EAAA,OACA,KAAA,EAAA,OACiB,GAAA;EAHrB,IAAM,IAAuB,CAAC;EAC1B,KAAU,EAAS,KAAK,GAAG,GAC3B,KAAU,EAAS,KAAK,GAAG,GACxB,IAAA,EAAc,GAAO,EAAE,MAAM,EAAS,CAAC,GAF1C,EAAA,KAAA,GACA,EAAA,KAAA,GACiB,EAAA,KAAA;;CAJvB,IAAM,IAAYC,GAUhBC;CAAE,AAAA,EAAA,QAAA,iBAAF,IAAA,EAAE,kBAAe,GAAf,EAAA,MAAA;CAJJ,IAAM,EAAE,YAAS,cAAW,EAC1B,GACA,GACA,GACAA,CACF,GAEiCC;CAC3B,AAAA,EAAA,QAAA,KAAA,EAAA,QAGgB,KAAA,EAAA,QAEpB,KAN+B,UAAM;EAMrC,AALI,KAGF,EAAkB,CAAE,CAAC,EAAE,UAAU,CAAC,GAAG,EAAE,cAAc,CAAC,UAAU,EAAE,CAAC,GAErE,EAAO;CACT,GANM,EAAA,MAAA,GAGgB,EAAA,MAAA,GAEpB,EAAA,MAAA;CANF,IAAM,IAAeC,GASf,IAAU,IAAU,EAAQ,KAAK,EAAQ,KAS9B,IAAA,IAAU,WAAW,KAAA,GACJ,IAAA,KAAW,EAAO,cAA1CC;CAAwBC,AAAAA,EAAAA,QAAAA,iBAAxB,IAAA;EAAE,GAAG,EAAO;EAAQ,GAAIA;CAAgC,GAAhCA,EAAAA,MAAAA;CAE5BC,IAAAA;CAAC,AAAA,EAAA,QAAA,KAAA,EAAA,QAA0B,KAA3B,IAAA,kBAAC,GAAD;EAAM,UAAS;EAAQ,GAAI;CAAY,CAAA,GAAtC,EAAA,MAAA,GAA0B,EAAA,MAAA;CAR7BC,IAAAA;CAGgB,AAAA,EAAA,QAAA,KAAA,EAAA,QACL,KAAA,EAAA,QAELH,KAAAA,EAAAA,QAEJE,KAAAA,EAAAA,QAHWE,KAAAA,EAAAA,QAHC,KAFd,IAAA,kBAAC,GAAD;EACE,MAAK;EACL,cAAY;EACZ,gBAAc;EACd,SAAS;EACT,WAAWA;EACX,IAAIJ;EAEJE,UAAAA;CACU,CAAA,GANI,EAAA,MAAA,GACL,EAAA,MAAA,GAELF,EAAAA,MAAAA,GAEJE,EAAAA,MAAAA,GAHWE,EAAAA,MAAAA,GAHC,EAAA,MAAA;CAHhBC,IAAAA;CADF,OAEIF,EAAAA,QAAAA,KAAAA,EAAAA,QADc,KAAhB,IAAA,kBAAC,GAAD;EAAS,OAAO;EACdA,UAAAA;CAUO,CAAA,GAVPA,EAAAA,MAAAA,GADc,EAAA,MAAA,2BAAhBE;AAaJ"}
+{"version":3,"file":"zoom-toggle-MmLjMTEw.js","names":["cfg","Icon = ZoomInIcon","{\n  initialEnabled = false,\n  labels,\n  icon: Icon = ZoomInIcon,\n  iconProps,\n  axes,\n}: ZoomToggleProps","initialEnabled = false","{ ...DEFAULT_ZOOM_TOGGLE_LABELS, ...labels }","axes ? axes.includes('x') : true","axes ? axes.includes('y') : false","createAddZoom(theme, { axes: resolved })","useMemo(() => {\n    const resolved: ZoomAxis[] = []\n    if (includeX) resolved.push('x')\n    if (includeY) resolved.push('y')\n    return createAddZoom(theme, { axes: resolved })\n  }, [theme, includeX, includeY])","{ initialEnabled }","() => {\n    if (enabled) {\n      // About to disable — clear the dataZoom component on the live\n      // instance so the slider disappears immediately.\n      getEchartInstance(id)?.setOption({}, { replaceMerge: ['dataZoom'] })\n    }\n    toggle()\n  }","useCallback(() => {\n    if (enabled) {\n      // About to disable — clear the dataZoom component on the live\n      // instance so the slider disappears immediately.\n      getEchartInstance(id)?.setOption({}, { replaceMerge: ['dataZoom'] })\n    }\n    toggle()\n  }, [enabled, toggle, id])","{ ...styles.toggle, ...(enabled && styles.toggleActive) }","enabled && styles.toggleActive","<Icon fontSize='small' {...iconProps} />","<IconButton\n        size='small'\n        aria-label={tooltip}\n        aria-pressed={enabled}\n        onClick={handleToggle}\n        className={enabled ? 'active' : undefined}\n        sx={{ ...styles.toggle, ...(enabled && styles.toggleActive) }}\n      >\n        <Icon fontSize='small' {...iconProps} />\n      </IconButton>","enabled ? 'active' : undefined","<Tooltip title={tooltip}>\n      <IconButton\n        size='small'\n        aria-label={tooltip}\n        aria-pressed={enabled}\n        onClick={handleToggle}\n        className={enabled ? 'active' : undefined}\n        sx={{ ...styles.toggle, ...(enabled && styles.toggleActive) }}\n      >\n        <Icon fontSize='small' {...iconProps} />\n      </IconButton>\n    </Tooltip>","_c","ZoomInIcon","Tooltip","Tooltip$1","useWidgetId","getEchartInstance","useSingleTransform","SLIDER_HANDLE_ICON","SLIDER_HEIGHT","SLIDER_BOTTOM","createAddZoom","axes","options","includeX","includeY","baseSliderProps","getZoomSliderStyles","theme","option","cfg","dataZoom","addZoom","secondary","ZOOM_LAYOUT","DEFAULT_ZOOM_TOGGLE_LABELS","styles","ZOOM_DESCRIPTOR","ZoomToggle","$","c","t1","t2","t0","initialEnabled","Icon","ZoomIn","id","useTheme","t3","labels","_labels","t4","t5","t6","resolved","transform","t7","t8","enabled","toggle","handleToggle","tooltip","t9","t10","t11","t12","iconProps","t13","IconButton","t14"],"sources":["../src/widgets/actions/zoom-toggle/transforms.ts","../src/widgets/actions/zoom-toggle/labels.ts","../src/widgets/actions/zoom-toggle/style.ts","../src/widgets/actions/zoom-toggle/zoom-toggle.tsx"],"sourcesContent":["import type { Theme } from '@mui/material'\n\n/**\n * v1's slider handle — 9×36 SVG with a white pill body, secondary-colored\n * stroke, and three grip lines. Inlined as a data URL so the chart can\n * render it without a network fetch.\n */\nconst SLIDER_HANDLE_ICON =\n  'image://data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOSIgaGVpZ2h0PSIzNiIgdmlld0JveD0iMCAwIDkgMzYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHg9IjAuNSIgeT0iLTAuNSIgd2lkdGg9IjgiIGhlaWdodD0iMTgiIHJ4PSI0IiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDI3KSIgZmlsbD0id2hpdGUiIHN0cm9rZT0iIzM1OEJFNyIvPgo8cmVjdCB3aWR0aD0iMyIgaGVpZ2h0PSIyIiByeD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgLTEgMyAyMykiIGZpbGw9IiMzNThCRTciLz4KPHJlY3Qgd2lkdGg9IjMiIGhlaWdodD0iMiIgcng9IjEiIHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIDMgMTkpIiBmaWxsPSIjMzU4QkU3Ii8+CjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjIiIHJ4PSIxIiB0cmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAzIDE1KSIgZmlsbD0iIzM1OEJFNyIvPgo8L3N2Zz4='\n\nconst SLIDER_HEIGHT = 32\nconst SLIDER_BOTTOM = 0\n\n/** Which chart axis (or axes) zoom applies to. */\nexport type ZoomAxis = 'x' | 'y'\n\nexport interface CreateAddZoomOptions {\n  /**\n   * Axes to enable zoom on. Default `['x']` (matches bar / histogram /\n   * timeseries — horizontal pan/zoom on the category axis). Pass\n   * `['x', 'y']` for a scatterplot-style 2D zoom (mouse-wheel scales both\n   * axes; a horizontal slider sits at the bottom for x-range and a\n   * vertical slider sits on the right for y-range).\n   */\n  axes?: readonly ZoomAxis[]\n}\n\n/**\n * Theme-bound zoom config transform: adds one inside `dataZoom`\n * (mouse-wheel + drag) per axis plus a styled slider per axis with the\n * v1 chrome (blue-tinted filler, secondary-color data preview, white\n * pill handles, CARTO typography). The x-slider is horizontal at the\n * bottom; the y-slider is vertical on the right.\n *\n * Returned function has stable identity for a given theme + axes\n * combination; pair with `useMemo` at the call site.\n *\n * **No `start` / `end`** are emitted: ECharts defaults to `0–100` on the\n * first `setOption` and then keeps the runtime slider state across\n * subsequent merges (no `replaceMerge` for `dataZoom`). Re-running the\n * transform on data/formatter/RelativeData updates therefore preserves the\n * user's dragged range instead of snapping it back.\n */\nexport function createAddZoom(\n  theme: Theme,\n  options: CreateAddZoomOptions = {},\n): (option: unknown) => unknown {\n  const axes = options.axes ?? ['x']\n  const includeX = axes.includes('x')\n  const includeY = axes.includes('y')\n  const sliderStyles = getZoomSliderStyles(theme)\n  const baseSliderProps = {\n    throttle: 0,\n    showDetail: false,\n    brushSelect: false,\n    moveHandleSize: 8,\n    handleSize: '100%',\n    ...sliderStyles,\n  }\n  return (option: unknown): unknown => {\n    if (option == null || typeof option !== 'object') return option\n    const cfg = option as Record<string, unknown>\n    const dataZoom: object[] = []\n    if (includeX) {\n      dataZoom.push({ type: 'inside', xAxisIndex: [0], throttle: 0 })\n    }\n    if (includeY) {\n      dataZoom.push({ type: 'inside', yAxisIndex: [0], throttle: 0 })\n    }\n    if (includeX) {\n      dataZoom.push({\n        type: 'slider',\n        xAxisIndex: [0],\n        height: SLIDER_HEIGHT,\n        bottom: SLIDER_BOTTOM,\n        handleIcon: SLIDER_HANDLE_ICON,\n        ...baseSliderProps,\n      })\n    }\n    if (includeY) {\n      // Vertical slider — `width` is its thickness, `right` pins it to\n      // the right edge. We omit `handleIcon` so ECharts renders its\n      // default vertical handle (the inline SVG is shaped for a\n      // horizontal slider and looks wrong when rotated).\n      dataZoom.push({\n        type: 'slider',\n        yAxisIndex: [0],\n        width: SLIDER_HEIGHT,\n        right: SLIDER_BOTTOM,\n        ...baseSliderProps,\n      })\n    }\n    return { ...cfg, dataZoom }\n  }\n}\n\n/**\n * Back-compat untyped transform — produces the bare `dataZoom` config from\n * the original v2 implementation. Use {@link createAddZoom} when a theme is\n * available so the slider matches the v1 styling.\n *\n * `start` / `end` are intentionally omitted so ECharts preserves the user's\n * runtime range across subsequent `setOption` merges (see {@link createAddZoom}).\n */\nexport const addZoom = (option: unknown): unknown => {\n  if (option == null || typeof option !== 'object') return option\n  const cfg = option as Record<string, unknown>\n  return {\n    ...cfg,\n    dataZoom: [\n      { type: 'inside' },\n      {\n        type: 'slider',\n        height: SLIDER_HEIGHT,\n        bottom: SLIDER_BOTTOM,\n      },\n    ],\n  }\n}\n\n/** Style block matching v1's `getEChartZoomSliderStyles`. */\nfunction getZoomSliderStyles(theme: Theme) {\n  const secondary = theme.palette.secondary?.main ?? '#358BE7'\n  return {\n    fillerColor: 'rgba(53, 139, 231, 0.25)',\n    borderColor: 'rgba(53, 139, 231, 0.3)',\n    borderWidth: 0.5,\n    backgroundColor: 'transparent',\n    borderRadius: 4,\n    dataBackground: {\n      lineStyle: { opacity: 0 },\n      areaStyle: { opacity: 1, color: secondary },\n    },\n    selectedDataBackground: {\n      lineStyle: { opacity: 0 },\n      areaStyle: { opacity: 1, color: secondary },\n    },\n    handleStyle: {\n      color: theme.palette.common?.white ?? '#fff',\n      borderColor: 'rgba(3, 111, 226, 0.08)',\n      borderWidth: 1,\n      shadowBlur: 3,\n      shadowColor: 'rgba(0, 0, 0, 0.1)',\n      shadowOffsetX: 0,\n      shadowOffsetY: 1,\n    },\n    textStyle: {\n      color: theme.palette.black?.[60] ?? theme.palette.text?.primary,\n      fontSize: parseInt(\n        (theme.typography.overlineDelicate?.fontSize as string | undefined) ??\n          '11',\n      ),\n      fontFamily:\n        theme.typography.overlineDelicate?.fontFamily ??\n        theme.typography.caption?.fontFamily,\n    },\n  }\n}\n\n/**\n * Visual layout constants used by the data-fusion mergers (bar, histogram,\n * timeseries) when laying out the slider against the legend / grid.\n */\nexport const ZOOM_LAYOUT = {\n  /** Slider height in px (matches `createAddZoom` output). */\n  sliderHeight: SLIDER_HEIGHT,\n  /** Vertical gap between chart grid and the slider. */\n  sliderGap: 8,\n  /** Slider `bottom` when a legend is shown — sits above the legend row. */\n  sliderBottomWithLegend: 28,\n} as const\n","export interface ZoomToggleLabels {\n  on: string\n  off: string\n}\n\nexport const DEFAULT_ZOOM_TOGGLE_LABELS: ZoomToggleLabels = {\n  on: 'Disable zoom',\n  off: 'Enable zoom',\n}\n","import type { SxProps, Theme } from '@mui/material'\n\nexport const styles = {\n  toggle: {\n    p: 0.5,\n    '& .MuiSvgIcon-root': { fontSize: 20 },\n  },\n  toggleActive: {\n    background: (theme: Theme) => theme.palette.primary.relatedLight,\n  },\n} satisfies Record<string, SxProps<Theme>>\n","import { useCallback, useMemo, type ComponentType } from 'react'\nimport { IconButton, useTheme, type SvgIconProps } from '@mui/material'\nimport { ZoomIn as ZoomInIcon } from '@mui/icons-material'\nimport { Tooltip } from '../../../components'\nimport {\n  getEchartInstance,\n  useSingleTransform,\n  useWidgetId,\n} from '../../stores'\nimport { createAddZoom, type ZoomAxis } from './transforms'\nimport { DEFAULT_ZOOM_TOGGLE_LABELS, type ZoomToggleLabels } from './labels'\nimport { styles } from './style'\n\nconst ZOOM_DESCRIPTOR = {\n  id: 'zoom-toggle',\n  type: 'config' as const,\n  order: 20,\n}\n\nexport interface ZoomToggleProps {\n  initialEnabled?: boolean\n  labels?: Partial<ZoomToggleLabels>\n  icon?: ComponentType<SvgIconProps>\n  iconProps?: SvgIconProps\n  /**\n   * Which axes the zoom controls. Default `['x']` — matches bar /\n   * histogram / timeseries (horizontal pan on the category axis). Pass\n   * `['x', 'y']` for 2D zoom on a scatterplot-style chart (mouse-wheel\n   * scales both axes; horizontal slider at bottom + vertical slider on\n   * the right).\n   */\n  axes?: readonly ZoomAxis[]\n}\n\n/**\n * Toggle a `dataZoom` slider + wheel-zoom on the chart. The transform is\n * theme-bound so the slider gets v1's CARTO chrome (blue-tinted filler,\n * secondary-color preview, white pill handles).\n *\n * `dataZoom` is intentionally NOT in `replaceMergeKeys` — ECharts merges\n * subsequent `setOption` calls so the user's dragged range survives\n * unrelated re-renders (data updates, formatter swaps, RelativeData toggles).\n *\n * On disable the transform is unregistered, but ECharts' merge semantics\n * would otherwise *keep* the live `dataZoom` component visible. To remove\n * the slider immediately we issue a one-shot\n * `setOption({}, { replaceMerge: ['dataZoom'] })` against the live chart\n * instance via {@link getEchartInstance} — this bypasses the pipeline so\n * unrelated transforms aren't disturbed.\n */\nexport function ZoomToggle({\n  initialEnabled = false,\n  labels,\n  icon: Icon = ZoomInIcon,\n  iconProps,\n  axes,\n}: ZoomToggleProps) {\n  const id = useWidgetId()\n  const theme = useTheme()\n  const _labels = { ...DEFAULT_ZOOM_TOGGLE_LABELS, ...labels }\n  // Reduce `axes` to two structural booleans before memoizing so the memo\n  // depends on stable primitive values, not an array reference (callers\n  // typically pass an inline `axes={['x', 'y']}` literal that changes\n  // identity each render). Default — no `axes` prop — is x-axis only,\n  // matching `createAddZoom`'s default.\n  const includeX = axes ? axes.includes('x') : true\n  const includeY = axes ? axes.includes('y') : false\n  const transform = useMemo(() => {\n    const resolved: ZoomAxis[] = []\n    if (includeX) resolved.push('x')\n    if (includeY) resolved.push('y')\n    return createAddZoom(theme, { axes: resolved })\n  }, [theme, includeX, includeY])\n  const { enabled, toggle } = useSingleTransform(\n    id,\n    ZOOM_DESCRIPTOR,\n    transform,\n    { initialEnabled },\n  )\n\n  const handleToggle = useCallback(() => {\n    if (enabled) {\n      // About to disable — clear the dataZoom component on the live\n      // instance so the slider disappears immediately.\n      getEchartInstance(id)?.setOption({}, { replaceMerge: ['dataZoom'] })\n    }\n    toggle()\n  }, [enabled, toggle, id])\n\n  const tooltip = enabled ? _labels.on : _labels.off\n\n  return (\n    <Tooltip title={tooltip}>\n      <IconButton\n        size='small'\n        aria-label={tooltip}\n        aria-pressed={enabled}\n        onClick={handleToggle}\n        className={enabled ? 'active' : undefined}\n        sx={{ ...styles.toggle, ...(enabled && styles.toggleActive) }}\n      >\n        <Icon fontSize='small' {...iconProps} />\n      </IconButton>\n    </Tooltip>\n  )\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/ps-react-ui",
-  "version": "6.1.1",
+  "version": "6.3.0",
   "description": "CARTO's Professional Service React Material library",
   "type": "module",
   "devDependencies": {
@@ -12,7 +12,7 @@
     "@mui/icons-material": "9.4.0",
     "@mui/material": "9.4.0",
     "@mui/system": "9.4.0",
-    "@mui/x-date-pickers": "9.13.0",
+    "@mui/x-date-pickers": "9.14.0",
     "@types/jscodeshift": "^17.3.0",
     "echarts": "6.1.0",
     "html2canvas": "1.4.1",

package/src/widgets/actions/fullscreen/fullscreen-store.test.tsx

@@ -130,26 +130,90 @@ describe('<FullScreen.Slot> — the dialog runs on its own store', () => {
   // Legend / dataZoom / brush live in the chart instance, not the store.
   // The Slot moves them through the instance registry, so Widget.Echart
   // doesn't need to know about fullscreen.
+  const fakeChart = (option: object, brushAreas?: unknown[]) =>
+    ({
+      getOption: vi.fn(() => option),
+      setOption: vi.fn(),
+      dispatchAction: vi.fn(),
+      getModel: () => ({
+        getComponent: (type: string) =>
+          type === 'brush' ? { areas: brushAreas } : undefined,
+      }),
+      isDisposed: () => false,
+    }) as unknown as ECharts & {
+      setOption: ReturnType<typeof vi.fn>
+      dispatchAction: ReturnType<typeof vi.fn>
+    }
+
   it('starts the dialog chart from the card chart and hands it back on close', async () => {
-    const fakeChart = (option: object) =>
-      ({
-        getOption: vi.fn(() => option),
-        setOption: vi.fn(),
-        dispatchAction: vi.fn(),
-        isDisposed: () => false,
-      }) as unknown as ECharts & {
-        setOption: ReturnType<typeof vi.fn>
-      }
-    const card = fakeChart({ from: 'card' })
-    const dialog = fakeChart({ from: 'dialog' })
+    const cardOption = {
+      series: [{ type: 'bar' }],
+      xAxis: [{ type: 'category' }],
+      legend: [{ selected: { a: true, b: false } }],
+      dataZoom: [{ start: 10, end: 60 }],
+    }
+    const card = fakeChart(cardOption)
+    const dialog = fakeChart({
+      legend: [{ selected: { a: false, b: true } }],
+      dataZoom: [{ start: 20, end: 80 }],
+    })
+    render(<Widget />)
+    act(() => setEchartInstance('w', card))
+
+    // The empty dialog chart takes the whole option, so the view state has
+    // the card's axes and series to land on.
+    fireEvent.click(screen.getByLabelText('OpenT'))
+    act(() => setEchartInstance(dialogId, dialog))
+    expect(dialog.setOption).toHaveBeenCalledWith(cardOption)
+
+    await close()
+    expect(card.setOption).toHaveBeenCalledWith({
+      legend: [{ selected: { a: false, b: true } }],
+      dataZoom: [{ start: 20, end: 80 }],
+    })
+  })
+
+  // The dialog often renders with its own styling (bigger axis labels,
+  // value labels on the series). Copying the whole option back would leave
+  // that styling on the card after closing.
+  it('hands back only the view state, not the dialog styling', async () => {
+    const card = fakeChart({ series: [{ type: 'bar' }] })
+    const dialog = fakeChart({
+      series: [{ type: 'bar', label: { show: true, rotate: 90 } }],
+      xAxis: [{ axisLabel: { fontSize: 13 } }],
+      dataZoom: [{ start: 0, end: 50, startValue: 3, endValue: 9 }],
+    })
+    render(<Widget />)
+    act(() => setEchartInstance('w', card))
+    fireEvent.click(screen.getByLabelText('OpenT'))
+    act(() => setEchartInstance(dialogId, dialog))
+
+    await close()
+    expect(card.setOption).toHaveBeenCalledWith({
+      dataZoom: [{ start: 0, end: 50, startValue: 3, endValue: 9 }],
+    })
+  })
+
+  // Brush areas aren't in getOption(); they travel through the brush action.
+  it('starts the dialog chart with the card brush areas and hands them back on close', async () => {
+    const cardAreas = [{ brushType: 'lineX', coordRange: [1, 3] }]
+    const dialogAreas = [{ brushType: 'lineX', coordRange: [4, 7] }]
+    const card = fakeChart({}, cardAreas)
+    const dialog = fakeChart({}, dialogAreas)
     render(<Widget />)
     act(() => setEchartInstance('w', card))
 
     fireEvent.click(screen.getByLabelText('OpenT'))
     act(() => setEchartInstance(dialogId, dialog))
-    expect(dialog.setOption).toHaveBeenCalledWith({ from: 'card' })
+    expect(dialog.dispatchAction).toHaveBeenCalledWith({
+      type: 'brush',
+      areas: cardAreas,
+    })
 
     await close()
-    expect(card.setOption).toHaveBeenCalledWith({ from: 'dialog' })
+    expect(card.dispatchAction).toHaveBeenCalledWith({
+      type: 'brush',
+      areas: dialogAreas,
+    })
   })
 })

package/src/widgets/actions/fullscreen/fullscreen.tsx

@@ -312,15 +312,17 @@ function DialogStore({
     const unsubscribe = subscribeEchartInstance(dialogId, (chart) => {
       // Published from inside the chart's init, before its first
       // setOption, so the dialog's own option merges on top of the copy.
+      // The empty chart takes the card's whole option: the legend, dataZoom
+      // and brush areas need the card's components (axes, brush) to land on.
       const card = liveChart(sourceId)
-      if (chart && card) copyChartState(card, chart)
+      if (chart && card) copyChartState(card, chart, card.getOption())
       dialogChart = chart
     })
     return () => {
       unsubscribe()
       const card = liveChart(sourceId)
       if (card && dialogChart && !dialogChart.isDisposed()) {
-        copyChartState(dialogChart, card)
+        copyChartState(dialogChart, card, viewState(dialogChart))
       }
     }
   }, [dialogId, sourceId])
@@ -340,10 +342,15 @@ function liveChart(id: string): ECharts | null {
 /**
  * Put on `chart` what `peer` is showing: the legend selection, the dataZoom
  * window and any drawn brush areas, which live in the ECharts instance
- * rather than the widget store.
+ * rather than the widget store. `option` is what of `peer`'s option to merge
+ * into `chart`.
  */
-function copyChartState(peer: ECharts, chart: ECharts): void {
-  chart.setOption(peer.getOption())
+function copyChartState(
+  peer: ECharts,
+  chart: ECharts,
+  option: Parameters<ECharts['setOption']>[0],
+): void {
+  chart.setOption(option)
   // The pointer was over `peer`, not `chart`: drop the tooltip and axis
   // pointer that came along, or they'd stay drawn until the next hover.
   chart.dispatchAction({ type: 'hideTip' })
@@ -363,6 +370,42 @@ function copyChartState(peer: ECharts, chart: ECharts): void {
   if (areas?.length) chart.dispatchAction({ type: 'brush', areas })
 }
 
+interface ViewStateOption {
+  // setOption takes an indexed option.
+  [key: string]: unknown
+  legend?: { selected?: Record<string, boolean> }[]
+  dataZoom?: Record<string, unknown>[]
+}
+
+const ZOOM_WINDOW_KEYS = ['start', 'end', 'startValue', 'endValue'] as const
+
+/**
+ * The part of `peer`'s option that is user view state. Only this goes back
+ * to the card on close: the dialog's full option also carries its own
+ * styling (value labels, bigger axis text), and merging it into the card
+ * would leave that styling behind once the dialog closes.
+ */
+function viewState(peer: ECharts): ViewStateOption {
+  const { legend, dataZoom } = peer.getOption() as ViewStateOption
+  const state: ViewStateOption = {}
+  if (legend?.some((l) => l.selected)) {
+    state.legend = legend.map((l) =>
+      l.selected ? { selected: l.selected } : {},
+    )
+  }
+  if (dataZoom?.length) {
+    state.dataZoom = dataZoom.map((zoom) =>
+      Object.fromEntries(
+        ZOOM_WINDOW_KEYS.filter((k) => zoom[k] !== undefined).map((k) => [
+          k,
+          zoom[k],
+        ]),
+      ),
+    )
+  }
+  return state
+}
+
 /**
  * Merge a caller's `paperSx` over the default paper.
  *

package/src/widgets/bar/options.test.ts

@@ -1,4 +1,5 @@
 import { describe, it, expect } from 'vitest'
+import * as echarts from 'echarts'
 import { createTheme, type Theme } from '@mui/material'
 import { barOptions, createBarOptionFactory } from './options'
 
@@ -359,3 +360,108 @@ describe('createBarOptionFactory', () => {
     expect(html).toContain('[ITEM:A]')
   })
 })
+
+describe('createBarOptionFactory — per-item colour', () => {
+  interface Out {
+    series: { itemStyle: { color: (p: unknown) => string } }[]
+  }
+  const data = [
+    [
+      { name: 'A', value: 1, color: '#00ff00' },
+      { name: 'B', value: -2 },
+    ],
+  ]
+  const dim = (c: string) => echarts.color.modifyAlpha(c, 0.15)
+
+  it('datum colour wins over the series colour', () => {
+    const merge = createBarOptionFactory({
+      theme,
+      series: [{ name: 'S', color: '#0000ff' }],
+    })
+    const out = merge({}, data) as Out
+    const colorFn = out.series[0]!.itemStyle.color
+    expect(colorFn({ dataIndex: 0, color: '#0000ff', name: 'A' })).toBe(
+      '#00ff00',
+    )
+    expect(colorFn({ dataIndex: 1, color: '#0000ff', name: 'B' })).toBe(
+      '#0000ff',
+    )
+  })
+
+  it('uses a string template itemStyle.color from optionsOverride', () => {
+    const factory = createBarOptionFactory({
+      theme,
+      series: [{ name: 'S', color: '#0000ff' }],
+      optionsOverride: {
+        series: [{ type: 'bar', itemStyle: { color: '#123456' } }],
+      },
+    })
+    const out = factory(factory(undefined, undefined), data) as Out
+    const colorFn = out.series[0]!.itemStyle.color
+    expect(colorFn({ dataIndex: 0, color: '#0000ff', name: 'A' })).toBe(
+      '#00ff00',
+    )
+    expect(colorFn({ dataIndex: 1, color: '#0000ff', name: 'B' })).toBe(
+      '#123456',
+    )
+  })
+
+  it('calls a function template itemStyle.color with the ECharts params', () => {
+    const merge = createBarOptionFactory({ theme })
+    const out = merge(
+      {
+        series: [
+          {
+            type: 'bar',
+            itemStyle: {
+              color: (p: { dataIndex: number }) =>
+                p.dataIndex === 1 ? '#ff0000' : '#00ff00',
+            },
+          },
+        ],
+      },
+      [
+        [
+          { name: 'A', value: 1 },
+          { name: 'B', value: -2 },
+        ],
+      ],
+    ) as Out
+    const colorFn = out.series[0]!.itemStyle.color
+    expect(colorFn({ dataIndex: 0, color: '#abc', name: 'A' })).toBe('#00ff00')
+    expect(colorFn({ dataIndex: 1, color: '#abc', name: 'B' })).toBe('#ff0000')
+  })
+
+  it('resolves theme palette paths on the datum colour', () => {
+    const merge = createBarOptionFactory({ theme })
+    const out = merge({}, [[{ name: 'A', value: 1, color: 'primary.main' }]])
+    const colorFn = (out as Out).series[0]!.itemStyle.color
+    expect(colorFn({ dataIndex: 0, color: '#abc', name: 'A' })).toBe(
+      theme.palette.primary.main,
+    )
+  })
+
+  it('dims both datum and template colours outside the selection', () => {
+    const merge = createBarOptionFactory({ theme, selection: ['Z'] })
+    const out = merge(
+      { series: [{ type: 'bar', itemStyle: { color: '#123456' } }] },
+      data,
+    ) as Out
+    const colorFn = out.series[0]!.itemStyle.color
+    expect(colorFn({ dataIndex: 0, color: '#abc', name: 'A' })).toBe(
+      dim('#00ff00'),
+    )
+    expect(colorFn({ dataIndex: 1, color: '#abc', name: 'B' })).toBe(
+      dim('#123456'),
+    )
+  })
+
+  it('keeps the series / palette colour when no item colour is given', () => {
+    const merge = createBarOptionFactory({ theme, selection: ['Z'] })
+    const out = merge({}, [[{ name: 'A', value: 1 }]]) as Out
+    const colorFn = out.series[0]!.itemStyle.color
+    expect(colorFn({ dataIndex: 0, color: '#abcdef', name: 'A' })).toBe(
+      dim('#abcdef'),
+    )
+  })
+})

package/src/widgets/bar/options.ts

@@ -12,6 +12,7 @@ import {
 import { ZOOM_LAYOUT } from '../actions/zoom-toggle'
 import type { OptionFactory } from '../echart'
 import { mergeOptions, resolveThemeColor } from '../utils'
+import { createItemColorResolver } from '../utils/item-color'
 import { positionDataZoomForLegend } from '../utils/data-zoom-layout'
 import type {
   BarEChartsOption,
@@ -234,10 +235,12 @@ export function createBarOptionFactory(
       : baseBottom
 
     // When a selection is active, dim non-selected bars by routing the
-    // resolved palette color through `modifyAlpha`. Per-row `itemStyle` on
+    // item's base colour through `modifyAlpha`. Per-row `itemStyle` on
     // dataset object-rows is silently ignored when `series.encode` is in
     // play — the callback approach is the standard ECharts pattern for
-    // per-data styling derived from a dataset.
+    // per-data styling derived from a dataset. The base colour is the
+    // datum's `color`, else the template's `itemStyle.color`, else the
+    // series colour / palette (`params.color`).
     //
     // We *always* emit `itemStyle.color` (a passthrough when nothing is
     // selected), not conditionally — dropping the key between renders
@@ -245,22 +248,30 @@ export function createBarOptionFactory(
     // and bars would stay dimmed forever after an external clear. Always
     // emitting lets normal merge swap the callback in place, no
     // `replaceMerge` and no entry-animation flash on selection on/off.
-    const dimItemStyle = {
-      color: (params: CallbackDataParams) => {
-        const base = params.color as string
-        if (!selectionSet) return base
-        const datum = params.value as { name?: string | number } | undefined
-        const name = datum?.name ?? params.name
-        return name != null && selectionSet.has(name)
-          ? base
-          : echarts.color.modifyAlpha(base, 0.15)
-      },
+    const makeDimItemStyle = (datums: readonly object[], template: unknown) => {
+      const baseColor = createItemColorResolver({
+        theme,
+        datums,
+        template,
+        fallback: (params) => params.color as string,
+      })
+      return {
+        color: (params: CallbackDataParams) => {
+          const base = baseColor(params)
+          if (!selectionSet) return base
+          const datum = params.value as { name?: string | number } | undefined
+          const name = datum?.name ?? params.name
+          return name != null && selectionSet.has(name)
+            ? base
+            : echarts.color.modifyAlpha(base, 0.15)
+        },
+      }
     }
 
     return {
       ...option,
       dataset: seriesArr.map((s) => ({ source: s as readonly object[] })),
-      series: seriesArr.map((_, i) => {
+      series: seriesArr.map((s, i) => {
         const template =
           (seriesTemplates[i] as object | undefined) ??
           (broadcastTemplate as object)
@@ -277,7 +288,7 @@ export function createBarOptionFactory(
           encode: { x: 'name', y: 'value' },
           barMaxWidth: 100,
           emphasis: { focus: 'series' },
-          itemStyle: dimItemStyle,
+          itemStyle: makeDimItemStyle(s, template),
           ...(overrideColor ? { color: overrideColor } : {}),
         }
       }),

package/src/widgets/bar/types.ts

@@ -6,6 +6,12 @@ import type { WidgetSeries } from '../types'
 export interface BarDatum {
   name: string | number
   value: number
+  /**
+   * Optional colour for this item (CSS colour or theme palette path such as
+   * `'primary.main'`). Wins over the template's `itemStyle.color` and the
+   * series colour; selection dimming still applies on top.
+   */
+  color?: string
 }
 
 /** v2 bar widget data shape: array of series, each a flat list of `{name, value}`. */

package/src/widgets/category/category-ui.test.tsx

@@ -925,4 +925,143 @@ describe('<CategoryUI>', () => {
       fills.forEach((f) => expect(f.style.backgroundColor).toBe(DIM))
     })
   })
+
+  // ── Signed values ──────────────────────────────────────────────────
+  describe('negative values', () => {
+    const MIXED = [
+      [
+        { name: 'Income', value: 0.8 },
+        { name: 'Transit', value: -0.4 },
+        { name: 'Size', value: 0 },
+      ],
+    ]
+    const fills = (c: HTMLElement) =>
+      Array.from(c.querySelectorAll<HTMLElement>('[data-bar-fill="true"]'))
+    const ticks = (c: HTMLElement) =>
+      Array.from(c.querySelectorAll<HTMLElement>('[data-zero-tick="true"]'))
+
+    it('centres the zero with a symmetric domain and keeps the series color', () => {
+      const { container } = render(<CategoryUI data={MIXED} />)
+      const [income, transit, size] = fills(container)
+      expect([income!.style.left, income!.style.width]).toEqual(['50%', '50%'])
+      expect([transit!.style.left, transit!.style.width]).toEqual([
+        '25%',
+        '25%',
+      ])
+      expect(size!.style.width).toBe('0%')
+      expect(transit!.style.backgroundColor).toBe(income!.style.backgroundColor)
+    })
+
+    it('marks the zero with one tick per bar, none on "Others"', () => {
+      const { container } = render(<CategoryUI data={MIXED} maxItems={2} />)
+      expect(ticks(container).map((t) => t.style.left)).toEqual(['50%', '50%'])
+      expect(screen.getByText('Others')).toBeTruthy()
+    })
+
+    it('draws one zero line per multi-series row, spanning every bar', () => {
+      const { container } = render(
+        <CategoryUI
+          data={[
+            [
+              { name: 'A', value: 1 },
+              { name: 'B', value: 2 },
+            ],
+            [
+              { name: 'A', value: -1 },
+              { name: 'B', value: 0.5 },
+            ],
+            [
+              { name: 'A', value: 0 },
+              { name: 'B', value: -2 },
+            ],
+          ]}
+        />,
+      )
+      const t = ticks(container)
+      expect(t).toHaveLength(2)
+      expect(t[0]!.style.left).toBe('50%')
+      expect(t[0]!.parentElement!.style.gridRow).toBe('2 / span 3')
+    })
+
+    it.each([
+      ['positive-only', [1, 2]],
+      ['negative-only', [-1, -2]],
+      ['all-zero', [0, 0]],
+    ])('draws no zero tick for %s data', (_, values) => {
+      const { container } = render(
+        <CategoryUI
+          data={[values.map((value, i) => ({ name: `R${i}`, value }))]}
+        />,
+      )
+      expect(ticks(container)).toHaveLength(0)
+    })
+
+    it('hangs negative-only bars from the right edge', () => {
+      const { container } = render(
+        <CategoryUI
+          data={[
+            [
+              { name: 'A', value: -2 },
+              { name: 'B', value: -1 },
+            ],
+          ]}
+        />,
+      )
+      const [a, b] = fills(container)
+      expect([a!.style.left, a!.style.width]).toEqual(['0%', '100%'])
+      expect([b!.style.left, b!.style.width]).toEqual(['50%', '50%'])
+    })
+
+    it('treats maxOverride as a magnitude for signed data', () => {
+      const { container } = render(
+        <CategoryUI data={MIXED} maxOverride={1.6} />,
+      )
+      const [income, transit] = fills(container)
+      // domain [-1.6, 1.6]
+      expect([income!.style.left, income!.style.width]).toEqual(['50%', '25%'])
+      expect(transit!.style.width).toBe('12.5%')
+    })
+
+    it('minOverride pins the zero even when the data has no negatives', () => {
+      const { container } = render(
+        <CategoryUI data={[[{ name: 'A', value: 1 }]]} minOverride={-1} />,
+      )
+      expect(fills(container)[0]!.style.left).toBe('50%')
+      expect(ticks(container)).toHaveLength(1)
+    })
+
+    it('prefixes U+2212 itself and hands the formatter |v|', () => {
+      const formatter = vi.fn((n: number) => `$${n}`)
+      render(
+        <CategoryUI
+          data={[
+            [
+              { name: 'A', value: -0.5 },
+              { name: 'B', value: -0 },
+              { name: 'C', value: 0 },
+            ],
+          ]}
+          formatter={formatter}
+        />,
+      )
+      expect(screen.getByText('\u2212$0.5')).toBeTruthy()
+      expect(screen.getAllByText('$0')).toHaveLength(2)
+      formatter.mock.calls.forEach(([n]) => expect(n).toBeGreaterThanOrEqual(0))
+    })
+
+    it('stacked mode diverges around the shared zero and shows the signed total', () => {
+      const { container } = render(
+        <CategoryUI
+          stacked
+          data={[[{ name: 'A', value: 3 }], [{ name: 'A', value: -1 }]]}
+        />,
+      )
+      const [pos, neg] = fills(container)
+      // zero at 50%, longer side (3) fills its half
+      expect([pos!.style.left, pos!.style.width]).toEqual(['50%', '50%'])
+      expect(parseFloat(neg!.style.left)).toBeCloseTo(50 - 50 / 3)
+      expect(screen.getByText('2')).toBeTruthy()
+      expect(screen.getByText('Series 2: \u22121')).toBeTruthy()
+    })
+  })
 })