feat(legend/series): add hover interaction on legend items

src/components/_legend.scss

@@ -48,7 +48,7 @@ $euiChartLegendMaxHeight: $euiSize * 4 + $euiSize;
   top: 0;
   bottom: 0;
   left: 0;
-  width: $euiChartLegendMaxWidth;  
+  width: $euiChartLegendMaxWidth;
   order: 1;
   .euiChartLegend__listItem {
     min-width: 100%;
@@ -58,7 +58,7 @@ $euiChartLegendMaxHeight: $euiSize * 4 + $euiSize;
   top: 0;
   bottom: 0;
   right: 0;
-  width: $euiChartLegendMaxWidth;  
+  width: $euiChartLegendMaxWidth;
   .euiChartLegend__listItem {
     min-width: 100%;
   }
@@ -93,4 +93,9 @@ $euiChartLegendMaxHeight: $euiSize * 4 + $euiSize;
 .euiChartLegendListItem__title {
   width: $euiChartLegendMaxWidth - 4 * $euiSize;
   max-width: $euiChartLegendMaxWidth - 4 * $euiSize;
+}
+.euiChartLegendList__item {
+  &:hover {
+    text-decoration: underline;
+  }
 }

src/components/legend.tsx

@@ -4,7 +4,6 @@ import {
   EuiFlexItem,
   EuiIcon,
   EuiText,
-  EuiToolTip,
 } from '@elastic/eui';
 import classNames from 'classnames';
 import { inject, observer } from 'mobx-react';
@@ -86,8 +85,15 @@ class LegendComponent extends React.Component<ReactiveChartProps> {
             responsive={false}
           >
             {legendItems.map((item, index) => {
+              const legendItemProps = {
+                key: index,
+                className: 'euiChartLegendList__item',
+                onMouseEnter: this.onLegendItemMouseover(index),
+                onMouseLeave: this.onLegendItemMouseout,
+              };
+
               return (
-                <EuiFlexItem key={index} className="euiChartLegendList__item">
+                <EuiFlexItem {...legendItemProps}>
                   <LegendElement color={item.color} label={item.label} />
                 </EuiFlexItem>
               );
@@ -97,6 +103,14 @@ class LegendComponent extends React.Component<ReactiveChartProps> {
       </div>
     );
   }
+
+  private onLegendItemMouseover = (legendItemIndex: number) => () => {
+    this.props.chartStore!.onLegendItemOver(legendItemIndex);
+  }
+
+  private onLegendItemMouseout = () => {
+    this.props.chartStore!.onLegendItemOut();
+  }
 }
 function LegendElement({ color, label }: Partial<LegendItem>) {
   return (
@@ -105,13 +119,11 @@ function LegendElement({ color, label }: Partial<LegendItem>) {
         <EuiIcon type="dot" color={color} />
       </EuiFlexItem>
       <EuiFlexItem grow={false}>
-        <EuiToolTip position="right" content={<EuiText size="xs">{label}</EuiText>}>
-          <EuiFlexItem grow={true} className="euiChartLegendListItem__title">
-            <EuiText size="xs" className="eui-textTruncate">
-              {label}
-            </EuiText>
-          </EuiFlexItem>
-        </EuiToolTip>
+        <EuiFlexItem grow={true} className="euiChartLegendListItem__title" title={label}>
+          <EuiText size="xs" className="eui-textTruncate">
+            {label}
+          </EuiText>
+        </EuiFlexItem>
       </EuiFlexItem>
     </EuiFlexGroup>
   );

src/components/react_canvas/area_geometries.tsx

@@ -3,7 +3,8 @@ import { IAction } from 'mobx';
 import React from 'react';
 import { Circle, Group, Path } from 'react-konva';
 import { animated, Spring } from 'react-spring/konva';
-import { AreaGeometry, GeometryValue, PointGeometry } from '../../lib/series/rendering';
+import { LegendItem } from '../../lib/series/legend';
+import { AreaGeometry, GeometryValue, getGeometryStyle, PointGeometry } from '../../lib/series/rendering';
 import { AreaSeriesStyle } from '../../lib/themes/theme';
 import { ElementClickListener, TooltipData } from '../../state/chart_state';
 
@@ -15,14 +16,15 @@ interface AreaGeometriesDataProps {
   onElementClick?: ElementClickListener;
   onElementOver: ((tooltip: TooltipData) => void) & IAction;
   onElementOut: (() => void) & IAction;
+  highlightedLegendItem: LegendItem | null;
 }
 interface AreaGeometriesDataState {
   overPoint?: PointGeometry;
 }
 export class AreaGeometries extends React.PureComponent<
   AreaGeometriesDataProps,
   AreaGeometriesDataState
-> {
+  > {
   static defaultProps: Partial<AreaGeometriesDataProps> = {
     animated: false,
     num: 1,
@@ -131,10 +133,14 @@ export class AreaGeometries extends React.PureComponent<
       );
     });
   }
+
   private renderAreaGeoms = (): JSX.Element[] => {
     const { areas } = this.props;
     return areas.map((glyph, i) => {
-      const { area, color, transform } = glyph;
+      const { area, color, transform, geometryId } = glyph;
+
+      const geometryStyle = getGeometryStyle(geometryId, this.props.highlightedLegendItem);
+
       if (this.props.animated) {
         return (
           <Group key={`area-group-${i}`} x={transform.x}>
@@ -145,8 +151,9 @@ export class AreaGeometries extends React.PureComponent<
                   data={props.area}
                   fill={color}
                   listening={false}
-                  // areaCap="round"
-                  // areaJoin="round"
+                  {...geometryStyle}
+                // areaCap="round"
+                // areaJoin="round"
                 />
               )}
             </Spring>
@@ -159,8 +166,9 @@ export class AreaGeometries extends React.PureComponent<
             data={area}
             fill={color}
             listening={false}
-            // areaCap="round"
-            // areaJoin="round"
+            {...geometryStyle}
+          // areaCap="round"
+          // areaJoin="round"
           />
         );
       }

src/components/react_canvas/bar_geometries.tsx

@@ -3,7 +3,8 @@ import { IAction } from 'mobx';
 import React from 'react';
 import { Group, Rect } from 'react-konva';
 import { animated, Spring } from 'react-spring/konva';
-import { BarGeometry, GeometryValue } from '../../lib/series/rendering';
+import { LegendItem } from '../../lib/series/legend';
+import { BarGeometry, GeometryValue, getGeometryStyle } from '../../lib/series/rendering';
 import { ElementClickListener, TooltipData } from '../../state/chart_state';
 
 interface BarGeometriesDataProps {
@@ -12,14 +13,15 @@ interface BarGeometriesDataProps {
   onElementClick?: ElementClickListener;
   onElementOver: ((tooltip: TooltipData) => void) & IAction;
   onElementOut: (() => void) & IAction;
+  highlightedLegendItem: LegendItem | null;
 }
 interface BarGeometriesDataState {
   overBar?: BarGeometry;
 }
 export class BarGeometries extends React.PureComponent<
   BarGeometriesDataProps,
   BarGeometriesDataState
-> {
+  > {
   static defaultProps: Partial<BarGeometriesDataProps> = {
     animated: false,
   };
@@ -70,14 +72,22 @@ export class BarGeometries extends React.PureComponent<
     });
     onElementOut();
   }
+
   private renderBarGeoms = (bars: BarGeometry[]): JSX.Element[] => {
     const { overBar } = this.state;
     return bars.map((bar, i) => {
       const { x, y, width, height, color, value } = bar;
-      let opacity = 1;
-      if (overBar && overBar !== bar) {
-        opacity = 0.6;
-      }
+
+      // Properties to determine if we need to highlight individual bars depending on hover state
+      const hasGeometryHover = overBar != null;
+      const hasHighlight = overBar === bar;
+      const individualHighlight = {
+        hasGeometryHover,
+        hasHighlight,
+      };
+
+      const geometryStyle = getGeometryStyle(bar.geometryId, this.props.highlightedLegendItem, individualHighlight);
+
       if (this.props.animated) {
         return (
           <Group key={i}>
@@ -91,11 +101,11 @@ export class BarGeometries extends React.PureComponent<
                   height={props.height}
                   fill={color}
                   strokeWidth={0}
-                  opacity={opacity}
                   perfectDrawEnabled={true}
                   onMouseOver={this.onOverBar(bar)}
                   onMouseLeave={this.onOutBar}
                   onClick={this.onElementClick(value)}
+                  {...geometryStyle}
                 />
               )}
             </Spring>
@@ -111,11 +121,11 @@ export class BarGeometries extends React.PureComponent<
             height={height}
             fill={color}
             strokeWidth={0}
-            opacity={opacity}
             perfectDrawEnabled={false}
             onMouseOver={this.onOverBar(bar)}
             onMouseLeave={this.onOutBar}
             onClick={this.onElementClick(bar.value)}
+            {...geometryStyle}
           />
         );
       }

src/components/react_canvas/line_geometries.tsx

@@ -3,7 +3,8 @@ import { IAction } from 'mobx';
 import React from 'react';
 import { Circle, Group, Path } from 'react-konva';
 import { animated, Spring } from 'react-spring/konva';
-import { GeometryValue, LineGeometry, PointGeometry } from '../../lib/series/rendering';
+import { LegendItem } from '../../lib/series/legend';
+import { GeometryValue, getGeometryStyle, LineGeometry, PointGeometry } from '../../lib/series/rendering';
 import { LineSeriesStyle } from '../../lib/themes/theme';
 import { ElementClickListener, TooltipData } from '../../state/chart_state';
 
@@ -14,14 +15,15 @@ interface LineGeometriesDataProps {
   onElementClick?: ElementClickListener;
   onElementOver: ((tooltip: TooltipData) => void) & IAction;
   onElementOut: (() => void) & IAction;
+  highlightedLegendItem: LegendItem | null;
 }
 interface LineGeometriesDataState {
   overPoint?: PointGeometry;
 }
 export class LineGeometries extends React.PureComponent<
   LineGeometriesDataProps,
   LineGeometriesDataState
-> {
+  > {
   static defaultProps: Partial<LineGeometriesDataProps> = {
     animated: false,
   };
@@ -129,10 +131,14 @@ export class LineGeometries extends React.PureComponent<
       );
     });
   }
+
   private renderLineGeoms = (): JSX.Element[] => {
     const { style, lines } = this.props;
     return lines.map((glyph, i) => {
-      const { line, color, transform } = glyph;
+      const { line, color, transform, geometryId } = glyph;
+
+      const geometryStyle = getGeometryStyle(geometryId, this.props.highlightedLegendItem);
+
       if (this.props.animated) {
         return (
           <Group key={i} x={transform.x}>
@@ -146,6 +152,7 @@ export class LineGeometries extends React.PureComponent<
                   listening={false}
                   lineCap="round"
                   lineJoin="round"
+                  {...geometryStyle}
                 />
               )}
             </Spring>
@@ -161,6 +168,7 @@ export class LineGeometries extends React.PureComponent<
             listening={false}
             lineCap="round"
             lineJoin="round"
+            {...geometryStyle}
           />
         );
       }

src/components/react_canvas/reactive_chart.tsx

@@ -71,13 +71,16 @@ class Chart extends React.Component<ReactiveChartProps, ReactiveChartState> {
     if (!geometries) {
       return;
     }
+    const highlightedLegendItem = this.getHighlightedLegendItem();
+
     return (
       <BarGeometries
         animated={canDataBeAnimated}
         bars={geometries.bars}
         onElementOver={onOverElement}
         onElementOut={onOutElement}
         onElementClick={onElementClickListener}
+        highlightedLegendItem={highlightedLegendItem}
       />
     );
   }
@@ -93,6 +96,9 @@ class Chart extends React.Component<ReactiveChartProps, ReactiveChartState> {
     if (!geometries) {
       return;
     }
+
+    const highlightedLegendItem = this.getHighlightedLegendItem();
+
     return (
       <LineGeometries
         animated={canDataBeAnimated}
@@ -101,6 +107,7 @@ class Chart extends React.Component<ReactiveChartProps, ReactiveChartState> {
         onElementOver={onOverElement}
         onElementOut={onOutElement}
         onElementClick={onElementClickListener}
+        highlightedLegendItem={highlightedLegendItem}
       />
     );
   }
@@ -116,6 +123,9 @@ class Chart extends React.Component<ReactiveChartProps, ReactiveChartState> {
     if (!geometries) {
       return;
     }
+
+    const highlightedLegendItem = this.getHighlightedLegendItem();
+
     return (
       <AreaGeometries
         animated={canDataBeAnimated}
@@ -124,6 +134,7 @@ class Chart extends React.Component<ReactiveChartProps, ReactiveChartState> {
         onElementOver={onOverElement}
         onElementOut={onOutElement}
         onElementClick={onElementClickListener}
+        highlightedLegendItem={highlightedLegendItem}
       />
     );
   }
@@ -353,6 +364,10 @@ class Chart extends React.Component<ReactiveChartProps, ReactiveChartState> {
       />
     );
   }
+
+  private getHighlightedLegendItem = () => {
+    return this.props.chartStore!.highlightedLegendItem.get();
+  }
 }
 
 export const ReactiveChart = inject('chartStore')(observer(Chart));