LG-4770: Fix duplicate tooltip in remounted chart groups (#2635)

* Cleanup group on unmount

* Changeset

* Fix and add to tests

Author: tsck

Diff for: .changeset/fuzzy-moons-sneeze.md

@@ -0,0 +1,5 @@
+---
+'@lg-charts/core': patch
+---
+
+Fixes duplicate tooltip bug in remounted chart groups

Diff for: charts/core/src/Chart/hooks/useChart.spec.ts

@@ -13,6 +13,7 @@ jest.mock('../../Echart', () => ({
   useEchart: jest.fn(() => ({
     ready: false,
     addToGroup: jest.fn(),
+    removeFromGroup: jest.fn(),
     setupZoomSelect: jest.fn(),
     on: jest.fn(),
   })),
@@ -32,6 +33,7 @@ describe('@lg-echarts/core/hooks/useChart', () => {
     (useEchart as jest.Mock).mockReturnValue({
       ready: false,
       addToGroup: jest.fn(),
+      removeFromGroup: jest.fn(),
       setupZoomSelect: jest.fn(),
       on: jest.fn(),
     });
@@ -46,6 +48,7 @@ describe('@lg-echarts/core/hooks/useChart', () => {
     (useEchart as jest.Mock).mockReturnValue({
       ready: true,
       addToGroup: jest.fn(),
+      removeFromGroup: jest.fn(),
       setupZoomSelect: jest.fn(),
       on: jest.fn(),
     });
@@ -62,6 +65,7 @@ describe('@lg-echarts/core/hooks/useChart', () => {
     (useEchart as jest.Mock).mockReturnValue({
       ready: true,
       addToGroup: jest.fn(),
+      removeFromGroup: jest.fn(),
       setupZoomSelect,
       on: jest.fn(),
     });
@@ -87,6 +91,7 @@ describe('@lg-echarts/core/hooks/useChart', () => {
     (useEchart as jest.Mock).mockReturnValue({
       ready: true,
       addToGroup: jest.fn(),
+      removeFromGroup: jest.fn(),
       setupZoomSelect: jest.fn(),
       on,
     });
@@ -113,6 +118,7 @@ describe('@lg-echarts/core/hooks/useChart', () => {
     const mockEchartInstance = {
       ready: true,
       addToGroup: jest.fn(),
+      removeFromGroup: jest.fn(),
       setupZoomSelect: jest.fn(),
       on: jest.fn(),
     };
@@ -126,4 +132,44 @@ describe('@lg-echarts/core/hooks/useChart', () => {
       ref: expect.any(Function),
     });
   });
+
+  test('should call `addToGroup` when `groupId` is present', async () => {
+    const { useEchart } = require('../../Echart');
+    const addToGroup = jest.fn();
+
+    (useEchart as jest.Mock).mockReturnValue({
+      ready: true,
+      addToGroup,
+      removeFromGroup: jest.fn(),
+      setupZoomSelect: jest.fn(),
+      on: jest.fn(),
+    });
+
+    const groupId = 'test-group';
+
+    renderHook(() => useChart({ theme: 'dark', groupId }));
+
+    expect(addToGroup).toHaveBeenCalledWith(groupId);
+  });
+
+  test('should call `removeFromGroup` on unmount if `groupId` is present', async () => {
+    const { useEchart } = require('../../Echart');
+    const removeFromGroup = jest.fn();
+
+    (useEchart as jest.Mock).mockReturnValue({
+      ready: true,
+      addToGroup: jest.fn(),
+      removeFromGroup,
+      setupZoomSelect: jest.fn(),
+      on: jest.fn(),
+    });
+
+    const groupId = 'test-group';
+
+    const { unmount } = renderHook(() => useChart({ theme: 'dark', groupId }));
+
+    unmount();
+
+    expect(removeFromGroup).toHaveBeenCalled();
+  });
 });

Diff for: charts/core/src/Chart/hooks/useChart.ts

@@ -42,6 +42,10 @@ export function useChart({
       if (groupId) {
         echart.addToGroup(groupId);
       }
+
+      return () => {
+        echart.removeFromGroup();
+      };
     }
   }, [echart.ready, groupId]);
 

Diff for: charts/core/src/Echart/useEchart.ts

@@ -104,8 +104,10 @@ export function useEchart({
     withInstanceCheck((groupId: string) => {
       // echartsCoreRef.current should exist if instance does, but checking for extra safety
       if (echartsCoreRef.current) {
-        (echartsInstance as EChartsType).group = groupId;
-        echartsCoreRef.current.connect(groupId);
+        if ((echartsInstance as EChartsType).group !== groupId) {
+          (echartsInstance as EChartsType).group = groupId;
+          echartsCoreRef.current.connect(groupId);
+        }
       }
     }),
     [echartsCoreRef.current, echartsInstance],