fix: groupable echarts

awslabs · Sep 27, 2023 · d704292 · d704292
1 parent 2e47a3c
commit d704292
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/packages/react-components/src/components/chart/hooks/useTrendCursorsEvents.ts b/packages/react-components/src/components/chart/hooks/useTrendCursorsEvents.ts
@@ -43,6 +43,9 @@ const useTrendCursorsEvents = ({
   const onContextMenuRef = useRef(onContextMenu);
   const visualizationRef = useRef(visualization);
 
+  const seriesDep = JSON.stringify(series);
+  const graphicDep = JSON.stringify(graphic);
+
   // these properties will be updated in every render so that the event handlers below is not re-rendered everytime
   useEffect(() => {
     seriesRef.current = series;
@@ -52,7 +55,7 @@ const useTrendCursorsEvents = ({
     sizeRef.current = size;
     setGraphicRef.current = setGraphic;
     visualizationRef.current = visualization;
-  }, [series, size, isInCursorAddMode, setGraphic, isInSyncMode, graphic, visualization]);
+  }, [seriesDep, size, isInCursorAddMode, setGraphic, isInSyncMode, graphicDep, visualization]);
 
   // shared add function between the context menu and on click action
   const addNewTrendCursor = ({ posX, ignoreHotKey }: { posX: number; ignoreHotKey: boolean }) => {

diff --git a/packages/react-components/src/hooks/useECharts/useGroupableEchart.ts b/packages/react-components/src/hooks/useECharts/useGroupableEchart.ts
@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import type { ECharts } from 'echarts';
+import { connect, disconnect, type ECharts } from 'echarts';
 
 /**
  * hook to update a group on an echarts instance
@@ -12,6 +12,8 @@ export const useGroupableEChart = (chartRef: React.MutableRefObject<ECharts | nu
   useEffect(() => {
     if (groupId && chartRef.current) {
       chartRef.current.group = groupId;
+      disconnect(groupId);
+      connect(groupId);
     }
   }, [groupId]);
 };