TimeSeriesWidget: fix echarts props update, to keep state of control …

…when clicking (#865)
CartoDB · Apr 22, 2024 · 1a8d8e2 · 1a8d8e2
1 parent 520d255
commit 1a8d8e2
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## Not released
 
+- TimeSeriesWidget: fix echarts props update, to keep state of control when clicking [#865](https://github.com/CartoDB/carto-react/pull/865)
 - TimeSeriesWidget: support removing series in mounted widget [#863](https://github.com/CartoDB/carto-react/pull/863)
 
 ## 3.0.0
@@ -12,6 +13,10 @@
 
 ## 2.5
 
+### 2.5.3 (2024-04-18)
+
+- TimeSeriesWidget: support removing series in mounted widget [#863](https://github.com/CartoDB/carto-react/pull/863)
+
 ### 2.5.2 (2024-04-10)
 
 -  configurable timeseries y axis [#861](https://github.com/CartoDB/carto-react/pull/861)

diff --git a/packages/react-ui/src/custom-components/echarts-for-react/index.js b/packages/react-ui/src/custom-components/echarts-for-react/index.js
@@ -49,6 +49,20 @@ export default class ReactEcharts extends _ReactEcharts {
     }
   }
 
+  updateEChartsOption() {
+    const { option, lazyUpdate, showLoading, loadingOption = null } = this.props;
+    const echartInstance = this.getEchartsInstance();
+
+    echartInstance.setOption(option, { replaceMerge: ['series'], lazyUpdate });
+
+    if (showLoading) {
+      echartInstance.showLoading(loadingOption);
+    } else {
+      echartInstance.hideLoading();
+    }
+    return echartInstance;
+  }
+
   offEvents(instance, events) {
     if (!events) return;
     // loop and off

diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/components/TimeSeriesChart.js
@@ -197,6 +197,7 @@ export default function TimeSeriesChart({
             : theme.palette.action.disabledBackground;
 
         return {
+          id: String(i),
           name,
           markLine: i === 0 ? markLine : undefined,
           markArea: i === 0 ? markArea : undefined,
@@ -293,7 +294,6 @@ export default function TimeSeriesChart({
   return (
     <ReactEcharts
       option={options}
-      notMerge
       onEvents={onEvents}
       onChartReady={onChartReady}
       style={{ height }}

diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/hooks/useTimeSeriesInteractivity.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/hooks/useTimeSeriesInteractivity.js
@@ -6,6 +6,9 @@ import { findItemIndexByTime } from '../utils/utilities';
 const events = {};
 let initialTimeWindow = null;
 
+// we identify series by their index and stringify it
+const seriesFinder = { seriesId: '0' };
+
 export default function useTimeSeriesInteractivity({
   echartsInstance,
   data,
@@ -28,7 +31,7 @@ export default function useTimeSeriesInteractivity({
   const updateTimelineByCoordinate = useCallback(
     (params) => {
       if (echartsInstance) {
-        const [x] = echartsInstance.convertFromPixel({ seriesIndex: 0 }, [
+        const [x] = echartsInstance.convertFromPixel(seriesFinder, [
           params.offsetX,
           params.offsetY
         ]);
@@ -87,7 +90,7 @@ export default function useTimeSeriesInteractivity({
 
       // Move markArea
       if (timeWindow.length === 2) {
-        const [x] = echartsInstance.convertFromPixel({ seriesIndex: 0 }, [
+        const [x] = echartsInstance.convertFromPixel(seriesFinder, [
           params.offsetX,
           params.offsetY
         ]);
@@ -101,7 +104,7 @@ export default function useTimeSeriesInteractivity({
 
       if (echartsInstance) {
         setIsMarkAreaSelected(true);
-        const [x] = echartsInstance.convertFromPixel({ seriesIndex: 0 }, [
+        const [x] = echartsInstance.convertFromPixel(seriesFinder, [
           params.offsetX,
           params.offsetY
         ]);
@@ -125,7 +128,7 @@ export default function useTimeSeriesInteractivity({
       }
 
       if (isMarkAreaSelected && echartsInstance) {
-        const [x] = echartsInstance.convertFromPixel({ seriesIndex: 0 }, [
+        const [x] = echartsInstance.convertFromPixel(seriesFinder, [
           params.offsetX,
           params.offsetY
         ]);
@@ -164,7 +167,7 @@ export default function useTimeSeriesInteractivity({
       }
 
       if (isMarkAreaMoving && echartsInstance) {
-        const [x] = echartsInstance.convertFromPixel({ seriesIndex: 0 }, [
+        const [x] = echartsInstance.convertFromPixel(seriesFinder, [
           params.offsetX,
           params.offsetY
         ]);