Merge e86203c into 129caf0

CartoDB · Apr 22, 2024 · 9d37381 · 9d37381
2 parents 129caf0 + e86203c
commit 9d37381
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,10 @@
 
 ## 2.5
 
+### 2.5.4 (2024-04-22)
+
+- TimeSeriesWidget: fix echarts props update, to keep state of control when clicking [#865](https://github.com/CartoDB/carto-react/pull/865)
+
 ### 2.5.3 (2024-04-18)
 
 - TimeSeriesWidget: support removing series in mounted widget [#863](https://github.com/CartoDB/carto-react/pull/863)

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
         ]);