Release 2.5.4 (#866)

* TimeSeriesWidget: fix echarts props update, to keep state of control when clicking (#865)

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)

lerna.json

@@ -3,5 +3,5 @@
     "packages/*"
   ],
   "npmClient": "yarn",
-  "version": "2.5.3"
+  "version": "2.5.4"
 }

packages/react-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-api",
-  "version": "2.5.3",
+  "version": "2.5.4",
   "description": "CARTO for React - Api",
   "author": "CARTO Dev Team",
   "keywords": [

packages/react-auth/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-auth",
-  "version": "2.5.3",
+  "version": "2.5.4",
   "description": "CARTO for React - Auth",
   "author": "CARTO Dev Team",
   "keywords": [

packages/react-basemaps/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-basemaps",
-  "version": "2.5.3",
+  "version": "2.5.4",
   "description": "CARTO for React - Basemaps",
   "keywords": [
     "carto",

packages/react-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-core",
-  "version": "2.5.3",
+  "version": "2.5.4",
   "description": "CARTO for React - Core",
   "author": "CARTO Dev Team",
   "keywords": [

packages/react-redux/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-redux",
-  "version": "2.5.3",
+  "version": "2.5.4",
   "description": "CARTO for React - Redux",
   "author": "CARTO Dev Team",
   "keywords": [

packages/react-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-ui",
-  "version": "2.5.3",
+  "version": "2.5.4",
   "description": "CARTO for React - UI",
   "author": "CARTO Dev Team",
   "keywords": [

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

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 }}

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

packages/react-widgets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-widgets",
-  "version": "2.5.3",
+  "version": "2.5.4",
   "description": "CARTO for React - Widgets",
   "author": "CARTO Dev Team",
   "keywords": [

packages/react-workers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/react-workers",
-  "version": "2.5.3",
+  "version": "2.5.4",
   "description": "CARTO for React - Workers",
   "author": "CARTO Dev Team",
   "keywords": [
@@ -66,7 +66,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.13.9",
-    "@carto/react-core": "^2.5.3",
+    "@carto/react-core": "^2.5.4",
     "@turf/bbox-polygon": "^6.3.0",
     "@turf/boolean-intersects": "^6.3.0",
     "@turf/boolean-within": "^6.3.0",