fix(legend): disable fade of other charts when hiding an item (#446)

src/chart_types/xy_chart/store/chart_state.test.ts

@@ -321,6 +321,34 @@ describe('Chart Store', () => {
     expect(outListener.mock.calls.length).toBe(1);
   });
 
+  test('do nothing when mouseover an hidden series', () => {
+    const legendListener = jest.fn(
+      (): void => {
+        return;
+      },
+    );
+    store.setOnLegendItemOverListener(legendListener);
+
+    store.legendItems = new Map([[firstLegendItem.key, firstLegendItem], [secondLegendItem.key, secondLegendItem]]);
+    store.deselectedDataSeries = [];
+    store.highlightedLegendItemKey.set(null);
+
+    store.toggleSeriesVisibility(firstLegendItem.key);
+    expect(store.deselectedDataSeries).toEqual([firstLegendItem.value]);
+    expect(store.highlightedLegendItemKey.get()).toBe(null);
+    store.onLegendItemOver(firstLegendItem.key);
+    expect(store.highlightedLegendItemKey.get()).toBe(null);
+    store.onLegendItemOut();
+    store.toggleSeriesVisibility(firstLegendItem.key);
+    expect(store.highlightedLegendItemKey.get()).toEqual(firstLegendItem.key);
+    expect(store.deselectedDataSeries).toEqual([]);
+
+    store.onLegendItemOver(firstLegendItem.key);
+    expect(store.highlightedLegendItemKey.get()).toBe(firstLegendItem.key);
+
+    store.removeOnLegendItemOutListener();
+  });
+
   test('can respond to legend item click event', () => {
     const legendListener = jest.fn(
       (): void => {

src/chart_types/xy_chart/store/chart_state.ts

@@ -604,8 +604,13 @@ export class ChartStore {
   });
 
   onLegendItemOver = action((legendItemKey: string | null) => {
+    if (legendItemKey) {
+      const legendItem = this.legendItems.get(legendItemKey);
+      if (legendItem && findDataSeriesByColorValues(this.deselectedDataSeries, legendItem.value) > -1) {
+        return;
+      }
+    }
     this.highlightedLegendItemKey.set(legendItemKey);
-
     if (this.onLegendItemOverListener) {
       const currentLegendItem = this.highlightedLegendItem.get();
       const listenerData = currentLegendItem ? currentLegendItem.value : null;
@@ -667,11 +672,21 @@ export class ChartStore {
     }
   });
 
+  updateHighlightedLegendItemKey = action((legendItemKey: string, deselected: boolean) => {
+    if (deselected) {
+      this.highlightedLegendItemKey.set(null);
+    } else {
+      this.highlightedLegendItemKey.set(legendItemKey);
+    }
+  });
+
   toggleSeriesVisibility = action((legendItemKey: string) => {
     const legendItem = this.legendItems.get(legendItemKey);
 
     if (legendItem) {
       this.deselectedDataSeries = updateDeselectedDataSeries(this.deselectedDataSeries, legendItem.value);
+      const deselected = findDataSeriesByColorValues(this.deselectedDataSeries, legendItem.value) > -1;
+      this.updateHighlightedLegendItemKey(legendItemKey, deselected);
       this.computeChart();
     }
   });