From 999e81c511f50f9b2717169e27a6c807fe284eef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Velarde?= <victor.velarde@gmail.com>
Date: Wed, 14 Jun 2023 19:59:06 +0200
Subject: [PATCH] Fix histogram zr handler (#709)

---
 CHANGELOG.md                                              | 2 ++
 .../src/widgets/HistogramWidgetUI/HistogramWidgetUI.js    | 4 ++--
 .../HistogramWidgetUI/useHistogramInteractivity.js        | 8 ++++----
 .../hooks/useTimeSeriesInteractivity.js                   | 6 +++---
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5084aa0a7..e41f617b8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,8 @@
 
 ## Not released
 
+- Fix HistogramWidget breaking onZr events after adding skeleton [#709](https://github.com/CartoDB/carto-react/pull/709)
+
 ## 2.0
 
 ### 2.0.8 (2023-06-13)
diff --git a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js
index b7647af2d..d7f4df1d7 100644
--- a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js
+++ b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js
@@ -305,8 +305,8 @@ HistogramWidgetUI.defaultProps = {
 HistogramWidgetUI.propTypes = {
   data: PropTypes.arrayOf(PropTypes.number).isRequired,
   ticks: PropTypes.arrayOf(PropTypes.number).isRequired,
-  min: PropTypes.number.isRequired,
-  max: PropTypes.number.isRequired,
+  min: PropTypes.number,
+  max: PropTypes.number,
   tooltip: PropTypes.bool,
   tooltipFormatter: PropTypes.func,
   xAxisFormatter: PropTypes.func,
diff --git a/packages/react-ui/src/widgets/HistogramWidgetUI/useHistogramInteractivity.js b/packages/react-ui/src/widgets/HistogramWidgetUI/useHistogramInteractivity.js
index 7c6c59369..2df36f49c 100644
--- a/packages/react-ui/src/widgets/HistogramWidgetUI/useHistogramInteractivity.js
+++ b/packages/react-ui/src/widgets/HistogramWidgetUI/useHistogramInteractivity.js
@@ -29,7 +29,7 @@ export default function useHistogramInteractivity({
     }
 
     function mouseMoveEvent(params) {
-      if (initialTimeWindow !== null) {
+      if (echartsInstance && initialTimeWindow !== null) {
         const [x] = echartsInstance.convertFromPixel({ seriesIndex: 0 }, [
           params.offsetX,
           params.offsetY
@@ -42,7 +42,7 @@ export default function useHistogramInteractivity({
       }
     }
 
-    if (filterable) {
+    if (echartsInstance && filterable) {
       const mouseDownCleanUp = addEventWithCleanUp(zr, 'mousedown', mouseDownEvent);
       const mouseMoveCleanUp = addEventWithCleanUp(zr, 'mousemove', mouseMoveEvent);
 
@@ -75,7 +75,7 @@ export default function useHistogramInteractivity({
       initialTimeWindow = null;
     }
 
-    if (filterable) {
+    if (echartsInstance && filterable) {
       return addEventWithCleanUp(zr, 'mouseup', mouseUpEvent);
     }
   }, [zr, echartsInstance, markArea, data, onSelectedBarsChange, filterable]);
@@ -114,7 +114,7 @@ export default function useHistogramInteractivity({
 
 // Aux
 function addEventWithCleanUp(zr, eventKey, event) {
-  if (zr) {
+  if (zr && zr.handler) {
     events[eventKey] = event;
     zr.on(eventKey, event);
 
diff --git a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/hooks/useTimeSeriesInteractivity.js b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/hooks/useTimeSeriesInteractivity.js
index f2a101f53..3ac2363f0 100644
--- a/packages/react-ui/src/widgets/TimeSeriesWidgetUI/hooks/useTimeSeriesInteractivity.js
+++ b/packages/react-ui/src/widgets/TimeSeriesWidgetUI/hooks/useTimeSeriesInteractivity.js
@@ -120,7 +120,7 @@ export default function useTimeSeriesInteractivity({ echartsInstance, data }) {
         updateCursor('grabbing');
       }
 
-      if (isMarkAreaSelected) {
+      if (isMarkAreaSelected && echartsInstance) {
         const [x] = echartsInstance.convertFromPixel({ seriesIndex: 0 }, [
           params.offsetX,
           params.offsetY
@@ -159,7 +159,7 @@ export default function useTimeSeriesInteractivity({ echartsInstance, data }) {
         }
       }
 
-      if (isMarkAreaMoving) {
+      if (isMarkAreaMoving && echartsInstance) {
         const [x] = echartsInstance.convertFromPixel({ seriesIndex: 0 }, [
           params.offsetX,
           params.offsetY
@@ -242,7 +242,7 @@ export default function useTimeSeriesInteractivity({ echartsInstance, data }) {
 
 // Aux
 function addEventWithCleanUp(zr, eventKey, event) {
-  if (zr) {
+  if (zr && zr.handler) {
     events[eventKey] = event;
     zr.on(eventKey, event);