feat(legend/series): set highlighted legend item to null on mouseout

addresses elastic#24
emmacunningham · Feb 8, 2019 · a063717 · a063717
1 parent 455a033
commit a063717
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/src/components/legend.tsx b/src/components/legend.tsx
@@ -90,6 +90,7 @@ class LegendComponent extends React.Component<ReactiveChartProps> {
                 key: index,
                 className: 'euiChartLegendList__item',
                 onMouseOver: this.onLegendItemMouseover(index),
+                onMouseOut: this.onLegendItemMouseout,
               };
 
               return (
@@ -107,6 +108,10 @@ class LegendComponent extends React.Component<ReactiveChartProps> {
   private onLegendItemMouseover = (legendItemIndex: number) => () => {
     this.props.chartStore!.updateHighlightedLegendItem(legendItemIndex);
   }
+
+  private onLegendItemMouseout = () => {
+    this.props.chartStore!.updateHighlightedLegendItem(null);
+  }
 }
 function LegendElement({ color, label }: Partial<LegendItem>) {
   return (

diff --git a/src/state/chart_state.ts b/src/state/chart_state.ts
@@ -230,7 +230,7 @@ export class ChartStore {
     return this.xScale.type !== ScaleType.Ordinal && Boolean(this.onBrushEndListener);
   }
 
-  updateHighlightedLegendItem(legendItemIndex: number) {
+  updateHighlightedLegendItem(legendItemIndex: number | null) {
     if (legendItemIndex !== this.highlightedLegendItemIndex) {
       this.highlightedLegendItemIndex = legendItemIndex;
       this.computeChart();