@carto/ps-react-ui 4.3.4 → 4.3.5

package/dist/types/widgets/echart/echart-ui.d.ts

@@ -1,2 +1,2 @@
 import { EchartUIProps } from './types';
-export declare function EchartUI({ id, ref, init, option, className, style, onEvents, }: EchartUIProps): import("react/jsx-runtime").JSX.Element;
+export declare function EchartUI(props: EchartUIProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/widgets/echart/types.d.ts

@@ -4,11 +4,13 @@ import { Ref } from 'react';
 import { theme as CartoTheme } from '@carto/meridian-ds/theme';
 import type * as echarts from 'echarts';
 export type EchartOptionsProps = EChartsOption;
+export type EchartReplaceMerge = string[];
 export interface EchartUIProps {
     id: string;
     option: EchartOptionsProps;
     className?: string;
     init?: echarts.EChartsInitOpts;
+    replaceMerge?: EchartReplaceMerge;
     style?: React.CSSProperties;
     ref?: Ref<echarts.ECharts>;
     onEvents?: Record<string, Parameters<echarts.ECharts['on']>[2]>;
@@ -21,6 +23,7 @@ export type EchartWidgetState = BaseWidgetState<{
     option: EchartUIProps['option'];
     onEvents?: EchartUIProps['onEvents'];
     init?: EchartUIProps['init'];
+    replaceMerge?: EchartReplaceMerge;
 }>;
 export interface EchartWidgetOptionProps<D> {
     data?: D;
@@ -31,4 +34,5 @@ export interface EchartWidgetProps {
     type: string;
     option: EchartUIProps['option'];
     onEvents?: EchartUIProps['onEvents'];
+    replaceMerge?: EchartReplaceMerge;
 }

package/dist/widgets/echart.js

@@ -1,115 +1,126 @@
-import { jsx as y } from "react/jsx-runtime";
-import { c as W } from "react/compiler-runtime";
-import { useRef as x, useImperativeHandle as I, useEffect as S } from "react";
+import { jsx as W } from "react/jsx-runtime";
+import { c as j } from "react/compiler-runtime";
+import { useRef as A, useImperativeHandle as U, useEffect as S } from "react";
 import * as k from "echarts";
-import { u as U } from "../use-widget-ref-B0aNCANx.js";
-import { u as Z } from "../widget-store-CB6Trp_0.js";
-import { useShallow as $ } from "zustand/shallow";
-import { g as M } from "../options-D9wflre6.js";
-import { g as Q, a as T, b as V, m as X } from "../utils-D3-eQyDR.js";
+import { u as D } from "../use-widget-ref-B0aNCANx.js";
+import { u as L } from "../widget-store-CB6Trp_0.js";
+import { useShallow as Z } from "zustand/shallow";
+import { g as X } from "../options-D9wflre6.js";
+import { g as ee, a as te, b as re, m as ne } from "../utils-D3-eQyDR.js";
+const $ = ["dataset", "series"];
 function B(r) {
-  const t = W(20), {
+  const e = j(23), {
     id: c,
-    ref: i,
+    ref: n,
     init: l,
-    option: u,
-    className: o,
-    style: f,
-    onEvents: d
-  } = r, e = U(c), n = x(null), a = x(null);
-  let m, s;
-  t[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (m = () => n.current, s = [], t[0] = m, t[1] = s) : (m = t[0], s = t[1]), I(i, m, s);
-  let h, v;
-  t[2] !== e || t[3] !== l ? (h = () => {
-    if (e.current)
-      return n.current = k.init(e.current, null, {
+    option: a,
+    className: s,
+    style: u,
+    onEvents: f
+  } = r, p = r;
+  let d;
+  e[0] !== p.replaceMerge ? (d = F(p.replaceMerge), e[0] = p.replaceMerge, e[1] = d) : d = e[1];
+  const g = d, t = D(c), i = A(null), o = A(null);
+  let E, h;
+  e[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (E = () => i.current, h = [], e[2] = E, e[3] = h) : (E = e[2], h = e[3]), U(n, E, h);
+  let v, C;
+  e[4] !== t || e[5] !== l ? (v = () => {
+    if (t.current)
+      return i.current = k.init(t.current, null, {
         renderer: "svg",
         height: 304,
         ...l
       }), () => {
-        n.current?.dispose(), n.current = null;
+        i.current?.dispose(), i.current = null;
       };
-  }, v = [e, l], t[2] = e, t[3] = l, t[4] = h, t[5] = v) : (h = t[4], v = t[5]), S(h, v);
-  let E, p;
-  t[6] !== u ? (E = () => {
-    n.current?.setOption(u, {
-      lazyUpdate: !0
-    });
-  }, p = [u], t[6] = u, t[7] = E, t[8] = p) : (E = t[7], p = t[8]), S(E, p);
-  let C, b;
-  t[9] !== e ? (C = () => {
-    const g = () => {
-      n.current?.resize();
+  }, C = [t, l], e[4] = t, e[5] = l, e[6] = v, e[7] = C) : (v = e[6], C = e[7]), S(v, C);
+  let M, R;
+  e[8] !== a || e[9] !== g ? (M = () => {
+    const m = {
+      lazyUpdate: !0,
+      replaceMerge: g ?? $
     };
-    return a.current = new ResizeObserver(g), a.current.observe(e.current), () => {
-      a.current?.disconnect(), a.current = null;
+    i.current?.setOption(a, m);
+  }, R = [a, g], e[8] = a, e[9] = g, e[10] = M, e[11] = R) : (M = e[10], R = e[11]), S(M, R);
+  let b, y;
+  e[12] !== t ? (b = () => {
+    const m = () => {
+      i.current?.resize();
     };
-  }, b = [e], t[9] = e, t[10] = C, t[11] = b) : (C = t[10], b = t[11]), S(C, b);
-  let O, R;
-  t[12] !== d ? (R = () => {
-    const g = {
-      ...d ?? {}
+    return o.current = new ResizeObserver(m), o.current.observe(t.current), () => {
+      o.current?.disconnect(), o.current = null;
     };
-    return g.click || (g.mousemove = () => {
-      n.current?.getZr().setCursorStyle("default");
-    }), Object.entries(g).forEach((_) => {
-      const [w, j] = _;
-      n.current?.on(w, j);
+  }, y = [t], e[12] = t, e[13] = b, e[14] = y) : (b = e[13], y = e[14]), S(b, y);
+  let O, _;
+  e[15] !== f ? (O = () => {
+    const m = {
+      ...f ?? {}
+    };
+    return m.click || (m.mousemove = () => {
+      i.current?.getZr().setCursorStyle("default");
+    }), Object.entries(m).forEach((w) => {
+      const [x, I] = w;
+      i.current?.on(x, I);
     }), () => {
-      Object.entries(g).forEach((_) => {
-        const [w] = _;
-        n.current?.off(w);
+      Object.entries(m).forEach((w) => {
+        const [x] = w;
+        i.current?.off(x);
       });
     };
-  }, O = [d], t[12] = d, t[13] = O, t[14] = R) : (O = t[13], R = t[14]), S(R, O);
+  }, _ = [f], e[15] = f, e[16] = O, e[17] = _) : (O = e[16], _ = e[17]), S(O, _);
   let z;
-  return t[15] !== e || t[16] !== o || t[17] !== c || t[18] !== f ? (z = /* @__PURE__ */ y("div", { id: c, ref: e, style: f, className: o }), t[15] = e, t[16] = o, t[17] = c, t[18] = f, t[19] = z) : z = t[19], z;
+  return e[18] !== t || e[19] !== s || e[20] !== c || e[21] !== u ? (z = /* @__PURE__ */ W("div", { id: c, ref: t, style: u, className: s }), e[18] = t, e[19] = s, e[20] = c, e[21] = u, e[22] = z) : z = e[22], z;
+}
+function F(r) {
+  if (Array.isArray(r))
+    return r.filter((e) => typeof e == "string");
 }
-function J(r) {
-  const t = W(14);
+function K(r) {
+  const e = j(15);
   let c;
-  t[0] !== r.id ? (c = (m) => {
-    const s = m.getWidget(r.id);
+  e[0] !== r.id ? (c = (i) => {
+    const o = i.getWidget(r.id);
     return {
-      id: s?.id,
-      data: s?.data,
-      option: s?.option,
-      onEvents: s?.onEvents,
-      init: s?.init
+      id: o?.id,
+      data: o?.data,
+      option: o?.option,
+      onEvents: o?.onEvents,
+      init: o?.init,
+      replaceMerge: o?.replaceMerge
     };
-  }, t[0] = r.id, t[1] = c) : c = t[1];
-  const i = Z($(c));
+  }, e[0] = r.id, e[1] = c) : c = e[1];
+  const n = L(Z(c));
   let l;
-  t[2] !== i.data ? (l = D(i.data), t[2] = i.data, t[3] = l) : l = t[3];
-  const u = l;
-  if (!i.id)
+  e[2] !== n.data ? (l = G(n.data), e[2] = n.data, e[3] = l) : l = e[3];
+  const a = l;
+  if (!n.id)
     return null;
-  let o;
-  t[4] !== u ? (o = u && {
-    dataset: u
-  }, t[4] = u, t[5] = o) : o = t[5];
-  let f;
-  t[6] !== o || t[7] !== i.option ? (f = {
-    ...i.option,
-    ...o
-  }, t[6] = o, t[7] = i.option, t[8] = f) : f = t[8];
-  const d = f, e = i.onEvents, n = i.init;
-  let a;
-  return t[9] !== n || t[10] !== e || t[11] !== d || t[12] !== r.id ? (a = /* @__PURE__ */ y(B, { id: r.id, option: d, onEvents: e, init: n }), t[9] = n, t[10] = e, t[11] = d, t[12] = r.id, t[13] = a) : a = t[13], a;
+  let s;
+  e[4] !== a ? (s = a && {
+    dataset: a
+  }, e[4] = a, e[5] = s) : s = e[5];
+  let u;
+  e[6] !== s || e[7] !== n.option ? (u = {
+    ...n.option,
+    ...s
+  }, e[6] = s, e[7] = n.option, e[8] = u) : u = e[8];
+  const f = u, p = n.onEvents, d = n.init, g = n.replaceMerge;
+  let t;
+  return e[9] !== d || e[10] !== p || e[11] !== f || e[12] !== r.id || e[13] !== g ? (t = /* @__PURE__ */ W(B, { id: r.id, option: f, onEvents: p, init: d, replaceMerge: g }), e[9] = d, e[10] = p, e[11] = f, e[12] = r.id, e[13] = g, e[14] = t) : t = e[14], t;
 }
-function D(r) {
+function G(r) {
   if (!(!r || r.length === 0))
-    return r.map((t) => ({
-      source: t
+    return r.map((e) => ({
+      source: e
     }));
 }
 export {
-  J as Echart,
+  K as Echart,
   B as EchartUI,
-  M as getCommonOptions,
-  Q as getEChartBrushConfig,
-  T as getEChartStackConfig,
-  V as getEChartZoomConfig,
-  X as mergeEchartWidgetConfig
+  X as getCommonOptions,
+  ee as getEChartBrushConfig,
+  te as getEChartStackConfig,
+  re as getEChartZoomConfig,
+  ne as mergeEchartWidgetConfig
 };
 //# sourceMappingURL=echart.js.map

package/dist/widgets/echart.js.map

@@ -1 +1 @@
-{"version":3,"file":"echart.js","sources":["../../src/widgets/echart/echart-ui.tsx","../../src/widgets/echart/echart.tsx"],"sourcesContent":["import { useEffect, useRef, useImperativeHandle } from 'react'\nimport * as echarts from 'echarts'\nimport type { EchartUIProps } from './types'\nimport { useWidgetRef } from '../../hooks'\n\nexport function EchartUI({\n  id,\n  ref,\n  init,\n  option,\n  className,\n  style,\n  onEvents,\n}: EchartUIProps) {\n  const chartRef = useWidgetRef<HTMLDivElement>(id)\n  const chartInstance = useRef<echarts.ECharts>(null)\n  const resizeObserverRef = useRef<ResizeObserver | null>(null)\n\n  useImperativeHandle(ref, () => chartInstance.current!, [])\n\n  useEffect(() => {\n    if (!chartRef.current) return\n\n    chartInstance.current = echarts.init(chartRef.current, null, {\n      renderer: 'svg',\n      height: 304,\n      ...init,\n    })\n    // Cleanup function\n    return () => {\n      chartInstance.current?.dispose()\n      chartInstance.current = null\n    }\n  }, [chartRef, init])\n\n  // Update chart when options change\n  useEffect(() => {\n    chartInstance.current?.setOption(option, {\n      lazyUpdate: true,\n      // notMerge: true,\n    })\n  }, [option])\n\n  // Handle resize using ResizeObserver\n  useEffect(() => {\n    const handleResize = () => {\n      chartInstance.current?.resize()\n    }\n\n    resizeObserverRef.current = new ResizeObserver(handleResize)\n    resizeObserverRef.current.observe(chartRef.current!)\n\n    return () => {\n      resizeObserverRef.current?.disconnect()\n      resizeObserverRef.current = null\n    }\n  }, [chartRef])\n\n  useEffect(() => {\n    const _onEvents = { ...(onEvents ?? {}) }\n    if (!_onEvents.click) {\n      _onEvents.mousemove = () => {\n        chartInstance.current?.getZr().setCursorStyle('default')\n      }\n    }\n\n    // Attach event listeners\n    Object.entries(_onEvents).forEach(([event, handler]) => {\n      chartInstance.current?.on(event, handler)\n    })\n    // Cleanup function to remove event listeners\n    return () => {\n      Object.entries(_onEvents).forEach(([event]) => {\n        chartInstance.current?.off(event)\n      })\n    }\n  }, [onEvents])\n\n  return <div id={id} ref={chartRef} style={style} className={className} />\n}\n","import type {\n  EchartProps,\n  EchartWidgetState,\n  EchartWidgetData,\n  EchartOptionsProps,\n} from './types'\nimport { EchartUI } from './echart-ui'\nimport { useWidgetStore } from '../stores/widget-store'\nimport { useShallow } from 'zustand/shallow'\nimport { useMemo } from 'react'\n\nexport function Echart(props: EchartProps) {\n  const widget = useWidgetStore(\n    useShallow((state) => {\n      const widget = state.getWidget<EchartWidgetState>(props.id)\n      return {\n        id: widget?.id,\n        data: widget?.data as EchartWidgetData | undefined,\n        option: widget?.option,\n        onEvents: widget?.onEvents,\n        init: widget?.init,\n      }\n    }),\n  )\n\n  // Memoize dataset transformation to avoid re-computing on every render\n  const dataset = useMemo(() => buildDataset(widget.data), [widget.data])\n\n  if (!widget.id) {\n    return null\n  }\n  const option: EchartOptionsProps = {\n    ...widget.option,\n    ...(dataset && { dataset }),\n  }\n\n  const onEvents = widget.onEvents\n  const init = widget.init\n\n  return (\n    <EchartUI id={props.id} option={option} onEvents={onEvents} init={init} />\n  )\n}\n\n/**\n * Builds the dataset configuration from widget data\n * @param data - The widget data array\n * @returns The dataset configuration for ECharts\n */\nfunction buildDataset(\n  data: EchartWidgetData | undefined,\n): EchartOptionsProps['dataset'] {\n  if (!data || data.length === 0) {\n    return undefined\n  }\n\n  return data.map((d) => ({\n    source: d,\n  }))\n}\n"],"names":["EchartUI","t0","$","_c","id","ref","init","option","className","style","onEvents","chartRef","useWidgetRef","chartInstance","useRef","resizeObserverRef","t1","t2","Symbol","for","current","useImperativeHandle","t3","t4","echarts","renderer","height","dispose","useEffect","t5","t6","setOption","lazyUpdate","t7","t8","handleResize","resize","ResizeObserver","observe","disconnect","t10","t9","_onEvents","click","mousemove","getZr","setCursorStyle","Object","entries","forEach","t11","event","handler","on","t12","event_0","off","Echart","props","state","widget","getWidget","data","widget_0","useWidgetStore","useShallow","buildDataset","dataset","length","map","d","source"],"mappings":"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"}
+{"version":3,"file":"echart.js","sources":["../../src/widgets/echart/echart-ui.tsx","../../src/widgets/echart/echart.tsx"],"sourcesContent":["import { useEffect, useRef, useImperativeHandle } from 'react'\nimport * as echarts from 'echarts'\nimport type { EchartUIProps } from './types'\nimport { useWidgetRef } from '../../hooks'\n\nconst DEFAULT_REPLACE_MERGE: string[] = ['dataset', 'series']\n\nexport function EchartUI(props: EchartUIProps) {\n  const { id, ref, init, option, className, style, onEvents } = props\n  const replaceMerge = toReplaceMerge(\n    (props as { replaceMerge?: unknown }).replaceMerge,\n  )\n\n  const chartRef = useWidgetRef<HTMLDivElement>(id)\n  const chartInstance = useRef<echarts.ECharts>(null)\n  const resizeObserverRef = useRef<ResizeObserver | null>(null)\n\n  useImperativeHandle(ref, () => chartInstance.current!, [])\n\n  useEffect(() => {\n    if (!chartRef.current) return\n\n    chartInstance.current = echarts.init(chartRef.current, null, {\n      renderer: 'svg',\n      height: 304,\n      ...init,\n    })\n    // Cleanup function\n    return () => {\n      chartInstance.current?.dispose()\n      chartInstance.current = null\n    }\n  }, [chartRef, init])\n\n  // Update chart when options change\n  useEffect(() => {\n    const setOptionConfig = {\n      lazyUpdate: true,\n      replaceMerge: replaceMerge ?? DEFAULT_REPLACE_MERGE,\n    }\n\n    chartInstance.current?.setOption(\n      option,\n      setOptionConfig as Parameters<echarts.ECharts['setOption']>[1],\n    )\n  }, [option, replaceMerge])\n\n  // Handle resize using ResizeObserver\n  useEffect(() => {\n    const handleResize = () => {\n      chartInstance.current?.resize()\n    }\n\n    resizeObserverRef.current = new ResizeObserver(handleResize)\n    resizeObserverRef.current.observe(chartRef.current!)\n\n    return () => {\n      resizeObserverRef.current?.disconnect()\n      resizeObserverRef.current = null\n    }\n  }, [chartRef])\n\n  useEffect(() => {\n    const _onEvents = { ...(onEvents ?? {}) }\n    if (!_onEvents.click) {\n      _onEvents.mousemove = () => {\n        chartInstance.current?.getZr().setCursorStyle('default')\n      }\n    }\n\n    // Attach event listeners\n    Object.entries(_onEvents).forEach(([event, handler]) => {\n      chartInstance.current?.on(event, handler)\n    })\n    // Cleanup function to remove event listeners\n    return () => {\n      Object.entries(_onEvents).forEach(([event]) => {\n        chartInstance.current?.off(event)\n      })\n    }\n  }, [onEvents])\n\n  return <div id={id} ref={chartRef} style={style} className={className} />\n}\n\nfunction toReplaceMerge(value: unknown): string[] | undefined {\n  if (!Array.isArray(value)) {\n    return undefined\n  }\n\n  return value.filter((item): item is string => typeof item === 'string')\n}\n","import type {\n  EchartProps,\n  EchartWidgetState,\n  EchartWidgetData,\n  EchartOptionsProps,\n} from './types'\nimport { EchartUI } from './echart-ui'\nimport { useWidgetStore } from '../stores/widget-store'\nimport { useShallow } from 'zustand/shallow'\nimport { useMemo } from 'react'\n\nexport function Echart(props: EchartProps) {\n  const widget = useWidgetStore(\n    useShallow((state) => {\n      const widget = state.getWidget<EchartWidgetState>(props.id)\n      return {\n        id: widget?.id,\n        data: widget?.data as EchartWidgetData | undefined,\n        option: widget?.option,\n        onEvents: widget?.onEvents,\n        init: widget?.init,\n        replaceMerge: widget?.replaceMerge,\n      }\n    }),\n  )\n\n  // Memoize dataset transformation to avoid re-computing on every render\n  const dataset = useMemo(() => buildDataset(widget.data), [widget.data])\n\n  if (!widget.id) {\n    return null\n  }\n  const option: EchartOptionsProps = {\n    ...widget.option,\n    ...(dataset && { dataset }),\n  }\n\n  const onEvents = widget.onEvents\n  const init = widget.init\n  const replaceMerge = widget.replaceMerge\n\n  return (\n    <EchartUI\n      id={props.id}\n      option={option}\n      onEvents={onEvents}\n      init={init}\n      replaceMerge={replaceMerge}\n    />\n  )\n}\n\n/**\n * Builds the dataset configuration from widget data\n * @param data - The widget data array\n * @returns The dataset configuration for ECharts\n */\nfunction buildDataset(\n  data: EchartWidgetData | undefined,\n): EchartOptionsProps['dataset'] {\n  if (!data || data.length === 0) {\n    return undefined\n  }\n\n  return data.map((d) => ({\n    source: d,\n  }))\n}\n"],"names":["DEFAULT_REPLACE_MERGE","EchartUI","props","$","_c","id","ref","init","option","className","style","onEvents","t0","t1","replaceMerge","toReplaceMerge","chartRef","useWidgetRef","chartInstance","useRef","resizeObserverRef","t2","t3","Symbol","for","current","useImperativeHandle","t4","t5","echarts","renderer","height","dispose","useEffect","t6","t7","setOptionConfig","lazyUpdate","setOption","t8","t9","handleResize","resize","ResizeObserver","observe","disconnect","t10","t11","_onEvents","click","mousemove","getZr","setCursorStyle","Object","entries","forEach","t12","event","handler","on","t13","event_0","off","value","Array","isArray","filter","item","Echart","state","widget","getWidget","data","widget_0","useWidgetStore","useShallow","buildDataset","dataset","jsx","length","map","d","source"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/ps-react-ui",
-  "version": "4.3.4",
+  "version": "4.3.5",
   "description": "CARTO's Professional Service React Material library",
   "type": "module",
   "devDependencies": {

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

@@ -175,6 +175,7 @@ describe('EchartUI', () => {
 
     expect(mockChart.setOption).toHaveBeenCalledWith(basicOption, {
       lazyUpdate: true,
+      replaceMerge: ['dataset', 'series'],
     })
   })
 
@@ -199,6 +200,22 @@ describe('EchartUI', () => {
 
     expect(mockChart.setOption).toHaveBeenCalledWith(newOption, {
       lazyUpdate: true,
+      replaceMerge: ['dataset', 'series'],
+    })
+  })
+
+  test('uses provided replaceMerge values', () => {
+    render(
+      <EchartUI
+        {...defaultProps}
+        option={basicOption}
+        replaceMerge={['series']}
+      />,
+    )
+
+    expect(mockChart.setOption).toHaveBeenCalledWith(basicOption, {
+      lazyUpdate: true,
+      replaceMerge: ['series'],
     })
   })
 
@@ -479,6 +496,7 @@ describe('EchartUI', () => {
 
     expect(mockChart.setOption).toHaveBeenCalledWith(complexOption, {
       lazyUpdate: true,
+      replaceMerge: ['dataset', 'series'],
     })
   })
 

package/src/widgets/echart/echart-ui.tsx

@@ -3,15 +3,14 @@ import * as echarts from 'echarts'
 import type { EchartUIProps } from './types'
 import { useWidgetRef } from '../../hooks'
 
-export function EchartUI({
-  id,
-  ref,
-  init,
-  option,
-  className,
-  style,
-  onEvents,
-}: EchartUIProps) {
+const DEFAULT_REPLACE_MERGE: string[] = ['dataset', 'series']
+
+export function EchartUI(props: EchartUIProps) {
+  const { id, ref, init, option, className, style, onEvents } = props
+  const replaceMerge = toReplaceMerge(
+    (props as { replaceMerge?: unknown }).replaceMerge,
+  )
+
   const chartRef = useWidgetRef<HTMLDivElement>(id)
   const chartInstance = useRef<echarts.ECharts>(null)
   const resizeObserverRef = useRef<ResizeObserver | null>(null)
@@ -35,11 +34,16 @@ export function EchartUI({
 
   // Update chart when options change
   useEffect(() => {
-    chartInstance.current?.setOption(option, {
+    const setOptionConfig = {
       lazyUpdate: true,
-      // notMerge: true,
-    })
-  }, [option])
+      replaceMerge: replaceMerge ?? DEFAULT_REPLACE_MERGE,
+    }
+
+    chartInstance.current?.setOption(
+      option,
+      setOptionConfig as Parameters<echarts.ECharts['setOption']>[1],
+    )
+  }, [option, replaceMerge])
 
   // Handle resize using ResizeObserver
   useEffect(() => {
@@ -78,3 +82,11 @@ export function EchartUI({
 
   return <div id={id} ref={chartRef} style={style} className={className} />
 }
+
+function toReplaceMerge(value: unknown): string[] | undefined {
+  if (!Array.isArray(value)) {
+    return undefined
+  }
+
+  return value.filter((item): item is string => typeof item === 'string')
+}

package/src/widgets/echart/echart.test.tsx

@@ -184,6 +184,7 @@ describe('Echart', () => {
       }),
       {
         lazyUpdate: true,
+        replaceMerge: ['dataset', 'series'],
       },
     )
   })
@@ -276,6 +277,7 @@ describe('Echart', () => {
 
     expect(mockChart.setOption).toHaveBeenCalledWith(basicOption, {
       lazyUpdate: true,
+      replaceMerge: ['dataset', 'series'],
     })
 
     const newOption: EChartsOption = {
@@ -297,6 +299,7 @@ describe('Echart', () => {
 
     expect(mockChart.setOption).toHaveBeenCalledWith(newOption, {
       lazyUpdate: true,
+      replaceMerge: ['dataset', 'series'],
     })
   })
 
@@ -364,6 +367,7 @@ describe('Echart', () => {
 
     expect(mockChart.setOption).toHaveBeenCalledWith(complexOption, {
       lazyUpdate: true,
+      replaceMerge: ['dataset', 'series'],
     })
   })
 
@@ -400,6 +404,7 @@ describe('Echart', () => {
     )
     expect(mockChart.setOption).toHaveBeenCalledWith(basicOption, {
       lazyUpdate: true,
+      replaceMerge: ['dataset', 'series'],
     })
     expect(mockChart.on).toHaveBeenCalledWith('click', clickHandler)
   })
@@ -442,6 +447,7 @@ describe('Echart', () => {
 
     expect(mockChart.setOption).toHaveBeenCalledWith(emptyOption, {
       lazyUpdate: true,
+      replaceMerge: ['dataset', 'series'],
     })
   })
 
@@ -464,6 +470,7 @@ describe('Echart', () => {
       }),
       {
         lazyUpdate: true,
+        replaceMerge: ['dataset', 'series'],
       },
     )
   })
@@ -509,6 +516,7 @@ describe('Echart', () => {
 
     expect(mockChart.setOption).toHaveBeenCalledWith(basicOption, {
       lazyUpdate: true,
+      replaceMerge: ['dataset', 'series'],
     })
 
     rerender(<Echart id='chart-b' />)
@@ -517,10 +525,27 @@ describe('Echart', () => {
       { series: [{ type: 'line', data: [1, 2, 3] }] },
       {
         lazyUpdate: true,
+        replaceMerge: ['dataset', 'series'],
       },
     )
   })
 
+  test('passes replaceMerge from widget to EchartUI', () => {
+    useWidgetStore.getState().setWidget('test-echart', {
+      id: 'test-echart',
+      type: 'echart',
+      option: basicOption,
+      replaceMerge: ['series'],
+    } as EchartWidgetState)
+
+    render(<Echart id='test-echart' />)
+
+    expect(mockChart.setOption).toHaveBeenCalledWith(basicOption, {
+      lazyUpdate: true,
+      replaceMerge: ['series'],
+    })
+  })
+
   test('disposes chart when component unmounts', () => {
     useWidgetStore.getState().setWidget('test-echart', {
       id: 'test-echart',

package/src/widgets/echart/echart.tsx

@@ -19,6 +19,7 @@ export function Echart(props: EchartProps) {
         option: widget?.option,
         onEvents: widget?.onEvents,
         init: widget?.init,
+        replaceMerge: widget?.replaceMerge,
       }
     }),
   )
@@ -36,9 +37,16 @@ export function Echart(props: EchartProps) {
 
   const onEvents = widget.onEvents
   const init = widget.init
+  const replaceMerge = widget.replaceMerge
 
   return (
-    <EchartUI id={props.id} option={option} onEvents={onEvents} init={init} />
+    <EchartUI
+      id={props.id}
+      option={option}
+      onEvents={onEvents}
+      init={init}
+      replaceMerge={replaceMerge}
+    />
   )
 }
 

package/src/widgets/echart/types.ts

@@ -5,12 +5,14 @@ import type { Ref } from 'react'
 import { theme as CartoTheme } from '@carto/meridian-ds/theme'
 
 export type EchartOptionsProps = EChartsOption
+export type EchartReplaceMerge = string[]
 
 export interface EchartUIProps {
   id: string
   option: EchartOptionsProps
   className?: string
   init?: echarts.EChartsInitOpts
+  replaceMerge?: EchartReplaceMerge
   style?: React.CSSProperties
   ref?: Ref<echarts.ECharts>
   onEvents?: Record<string, Parameters<echarts.ECharts['on']>[2]>
@@ -26,6 +28,7 @@ export type EchartWidgetState = BaseWidgetState<{
   option: EchartUIProps['option']
   onEvents?: EchartUIProps['onEvents']
   init?: EchartUIProps['init']
+  replaceMerge?: EchartReplaceMerge
 }>
 
 export interface EchartWidgetOptionProps<D> {
@@ -38,4 +41,5 @@ export interface EchartWidgetProps {
   type: string
   option: EchartUIProps['option']
   onEvents?: EchartUIProps['onEvents']
+  replaceMerge?: EchartReplaceMerge
 }