refactor: decouple tooltip from XY chart

src/components/legend/_legend_item.scss

@@ -10,7 +10,7 @@ $legendItemVerticalPadding: $echLegendRowGap / 2;
   width: 100%;
 
   &:hover {
-    .echLegendItem__title {
+    .echLegendItem__label {
       text-decoration: underline;
     }
   }
@@ -27,7 +27,7 @@ $legendItemVerticalPadding: $echLegendRowGap / 2;
     }
   }
 
-  &__title {
+  &__label {
     @include euiFontSizeXS;
     @include euiTextTruncate;
     flex: 1 1 auto;
@@ -37,17 +37,13 @@ $legendItemVerticalPadding: $echLegendRowGap / 2;
     }
   }
 
-  &__title--selected {
-    text-decoration: underline;
-  }
-
-  &__title--hasClickListener {
+  &__label--hasClickListener {
     &:hover {
       cursor: pointer;
     }
   }
 
-  &__displayValue {
+  &__extra {
     @include euiFontSizeXS;
     text-align: right;
     margin-left: $euiSizeXS;

src/components/legend/legend.test.tsx

@@ -42,7 +42,7 @@ describe('Legend', () => {
   it('shall render the all the series names without the data value', () => {
     const wrapper = mount(
       <Chart>
-        <Settings showLegend showLegendDisplayValue={false} />
+        <Settings showLegend showLegendExtra={false} />
         <BarSeries
           id="areas"
           name="area"
@@ -127,7 +127,7 @@ describe('Legend', () => {
     expect(legendItems).toHaveLength(4);
     legendItems.forEach((legendItem, i) => {
       // the click is only enabled on the title
-      legendItem.find('.echLegendItem__title').simulate('click');
+      legendItem.find('.echLegendItem__label').simulate('click');
       expect(onLegendItemClick).toBeCalledTimes(i + 1);
     });
   });

src/components/legend/legend.tsx

@@ -138,19 +138,18 @@ class LegendComponent extends React.Component<LegendProps> {
     }
     const { key, displayValue, banded } = item;
     const { legendItemTooltipValues, settings } = this.props;
-    const { showLegendDisplayValue, legendPosition } = settings;
+    const { showLegendExtra, legendPosition } = settings;
     const legendValues = this.getLegendValues(legendItemTooltipValues, key, banded);
     return legendValues.map((value, index) => {
       const yAccessor: BandedAccessorType = index === 0 ? BandedAccessorType.Y1 : BandedAccessorType.Y0;
       return (
         <LegendListItem
-          {...item}
-          label={getItemLabel(item, yAccessor)}
           key={`${key}-${yAccessor}`}
-          legendItem={item}
-          displayValue={value !== '' ? value : displayValue.formatted[yAccessor]}
-          showLegendDisplayValue={showLegendDisplayValue}
           legendPosition={legendPosition}
+          legendItem={item}
+          label={getItemLabel(item, yAccessor)}
+          extra={value !== '' ? value : displayValue.formatted[yAccessor]}
+          showExtra={showLegendExtra}
           toggleDeselectSeriesAction={this.props.onToggleDeselectSeriesAction}
           legendItemOutAction={this.props.onLegendItemOutAction}
           legendItemOverAction={this.props.onLegendItemOverAction}

src/components/legend/legend_item.tsx

@@ -9,12 +9,11 @@ import { Position } from '../../utils/commons';
 import { XYChartSeriesIdentifier } from '../../chart_types/xy_chart/utils/series';
 
 interface LegendItemProps {
-  selectedLegendItem?: LegendItem | null;
   legendItem: LegendItem;
-  displayValue: string;
+  extra: string;
   label?: string;
   legendPosition: Position;
-  showLegendDisplayValue: boolean;
+  showExtra: boolean;
   onLegendItemClickListener?: LegendItemListener;
   onLegendItemOutListener?: BasicListener;
   onLegendItemOverListener?: LegendItemListener;
@@ -24,45 +23,41 @@ interface LegendItemProps {
 }
 
 /**
- * Create a div for the the displayed value
- * @param displayValue
+ * Create a div for the extra text
+ * @param extra
  * @param isSeriesVisible
  */
-function renderDisplayValue(displayValue: string, isSeriesVisible: boolean | undefined) {
-  const displayValueClassNames = classNames('echLegendItem__displayValue', {
-    ['echLegendItem__displayValue--hidden']: !isSeriesVisible,
+function renderExtra(extra: string, isSeriesVisible: boolean | undefined) {
+  const extraClassNames = classNames('echLegendItem__extra', {
+    ['echLegendItem__extra--hidden']: !isSeriesVisible,
   });
   return (
-    <div className={displayValueClassNames} title={displayValue}>
-      {displayValue}
+    <div className={extraClassNames} title={extra}>
+      {extra}
     </div>
   );
 }
 
 /**
- * Create a div for the title
- * @param title
- * @param onTitleClick
- * @param hasTitleClickListener
- * @param isSelected
- * @param showLegendDisplayValue
+ * Create a div for the label
+ * @param label
+ * @param onLabelClick
+ * @param hasLabelClickListener
  */
-function renderTitle(
-  title: string,
-  onTitleClick: (event: React.MouseEvent<Element, MouseEvent>) => void,
-  hasTitleClickListener: boolean,
-  isSelected: boolean,
-  showLegendDisplayValue: boolean,
+function renderLabel(
+  onLabelClick: (event: React.MouseEvent<Element, MouseEvent>) => void,
+  hasLabelClickListener: boolean,
+  label?: string,
 ) {
-  // TODO add contextual menu panel on click
-  const titleClassNames = classNames('echLegendItem__title', {
-    ['echLegendItem__title--hasClickListener']: hasTitleClickListener,
-    ['echLegendItem__title--selected']: isSelected,
-    ['echLegendItem__title--hasDisplayValue']: showLegendDisplayValue,
+  if (!label) {
+    return null;
+  }
+  const labelClassNames = classNames('echLegendItem__label', {
+    ['echLegendItem__label--hasClickListener']: hasLabelClickListener,
   });
   return (
-    <div className={titleClassNames} title={title} onClick={onTitleClick}>
-      {title}
+    <div className={labelClassNames} title={label} onClick={onLabelClick}>
+      {label}
     </div>
   );
 }
@@ -72,7 +67,10 @@ function renderTitle(
  * @param color
  * @param isSeriesVisible
  */
-function renderColor(color: string, isSeriesVisible = true) {
+function renderColor(color?: string, isSeriesVisible = true) {
+  if (!color) {
+    return null;
+  }
   // TODO add color picker
   if (isSeriesVisible) {
     return (
@@ -97,24 +95,26 @@ export class LegendListItem extends React.Component<LegendItemProps> {
   }
 
   render() {
-    const { displayValue, legendItem, legendPosition, label } = this.props;
+    const { extra, legendItem, legendPosition, label, showExtra, onLegendItemClickListener } = this.props;
     const { color, isSeriesVisible, seriesIdentifier, isLegendItemVisible } = legendItem;
-    const onTitleClick = this.onVisibilityClick(seriesIdentifier);
 
-    const { showLegendDisplayValue, selectedLegendItem, onLegendItemClickListener } = this.props;
-    const isSelected =
-      selectedLegendItem == null ? false : selectedLegendItem.seriesIdentifier.key === seriesIdentifier.key;
-    const hasTitleClickListener = Boolean(onLegendItemClickListener);
-    const itemClasses = classNames('echLegendItem', `echLegendItem--${legendPosition}`, {
+    const onLabelClick = this.onVisibilityClick(seriesIdentifier);
+    const hasLabelClickListener = Boolean(onLegendItemClickListener);
+
+    const itemClassNames = classNames('echLegendItem', `echLegendItem--${legendPosition}`, {
       'echLegendItem-isHidden': !isSeriesVisible,
-      'echLegendItem__displayValue--hidden': !isLegendItemVisible,
+      'echLegendItem__extra--hidden': !isLegendItemVisible,
     });
 
     return (
-      <div className={itemClasses} onMouseEnter={this.onLegendItemMouseOver} onMouseLeave={this.onLegendItemMouseOut}>
-        {color && renderColor(color, isSeriesVisible)}
-        {label && renderTitle(label, onTitleClick, hasTitleClickListener, isSelected, showLegendDisplayValue)}
-        {showLegendDisplayValue && renderDisplayValue(displayValue, isSeriesVisible)}
+      <div
+        className={itemClassNames}
+        onMouseEnter={this.onLegendItemMouseOver}
+        onMouseLeave={this.onLegendItemMouseOut}
+      >
+        {renderColor(color, isSeriesVisible)}
+        {renderLabel(onLabelClick, hasLabelClickListener, label)}
+        {showExtra && renderExtra(extra, isSeriesVisible)}
       </div>
     );
   }

src/mocks/specs/specs.ts

@@ -149,7 +149,7 @@ export class MockGlobalSpec {
       snap: true,
     },
     legendPosition: Position.Right,
-    showLegendDisplayValue: true,
+    showLegendExtra: true,
     hideDuplicateAxes: false,
     theme: LIGHT_THEME,
   };

src/specs/settings.test.tsx

@@ -68,7 +68,7 @@ describe('Settings spec component', () => {
           snap: false,
         },
         legendPosition: Position.Bottom,
-        showLegendDisplayValue: false,
+        showLegendExtra: false,
         debug: true,
         xDomain: { min: 0, max: 10 },
       },
@@ -84,7 +84,7 @@ describe('Settings spec component', () => {
       snap: false,
     });
     expect(settingSpec.legendPosition).toBe(Position.Bottom);
-    expect(settingSpec.showLegendDisplayValue).toEqual(false);
+    expect(settingSpec.showLegendExtra).toEqual(false);
     expect(settingSpec.debug).toBe(true);
     expect(settingSpec.xDomain).toEqual({ min: 0, max: 10 });
   });
@@ -176,7 +176,7 @@ describe('Settings spec component', () => {
         snap: false,
       },
       legendPosition: Position.Bottom,
-      showLegendDisplayValue: false,
+      showLegendExtra: false,
       hideDuplicateAxes: false,
       debug: true,
       xDomain: { min: 0, max: 10 },

src/specs/settings.tsx

@@ -90,7 +90,10 @@ export interface SettingsSpec extends Spec {
   tooltip: TooltipType | TooltipProps;
   debug: boolean;
   legendPosition: Position;
-  showLegendDisplayValue: boolean;
+  /**
+   * Show an extra parameter on each legend item defined by the chart type
+   */
+  showLegendExtra: boolean;
   /**
    * Removes duplicate axes
    *
@@ -123,7 +126,7 @@ export type DefaultSettingsProps =
   | 'showLegend'
   | 'debug'
   | 'tooltip'
-  | 'showLegendDisplayValue'
+  | 'showLegendExtra'
   | 'theme'
   | 'legendPosition'
   | 'hideDuplicateAxes';
@@ -155,7 +158,7 @@ export const DEFAULT_SETTINGS_SPEC: SettingsSpec = {
     snap: DEFAULT_TOOLTIP_SNAP,
   },
   legendPosition: Position.Right,
-  showLegendDisplayValue: true,
+  showLegendExtra: true,
   hideDuplicateAxes: false,
   theme: LIGHT_THEME,
 };

src/state/selectors/get_legend_size.ts

@@ -15,18 +15,18 @@ const legendItemLabelsSelector = createCachedSelector(
   [getSettingsSpecSelector, getLegendItemsSelector],
   (settings, legendItems): string[] => {
     const labels: string[] = [];
-    const { showLegendDisplayValue } = settings;
+    const { showLegendExtra } = settings;
     legendItems.forEach((item) => {
       const labelY1 = getItemLabel(item, 'y1');
       if (item.displayValue.formatted.y1 !== null) {
-        labels.push(`${labelY1}${showLegendDisplayValue ? item.displayValue.formatted.y1 : ''}`);
+        labels.push(`${labelY1}${showLegendExtra ? item.displayValue.formatted.y1 : ''}`);
       } else {
         labels.push(labelY1);
       }
       if (item.banded) {
         const labelY0 = getItemLabel(item, 'y0');
         if (item.displayValue.formatted.y0 !== null) {
-          labels.push(`${labelY0}${showLegendDisplayValue ? item.displayValue.formatted.y0 : ''}`);
+          labels.push(`${labelY0}${showLegendExtra ? item.displayValue.formatted.y0 : ''}`);
         } else {
           labels.push(labelY0);
         }
@@ -68,7 +68,7 @@ export const getLegendSizeSelector = createCachedSelector(
     );
 
     bboxCalculator.destroy();
-    const { showLegend, showLegendDisplayValue, legendPosition } = settings;
+    const { showLegend, showLegendExtra: showLegendDisplayValue, legendPosition } = settings;
     const {
       legend: { verticalWidth, spacingBuffer },
     } = theme;

stories/legend.tsx

@@ -264,7 +264,7 @@ export const displayValuesInLegendElements = () => {
   });
   return (
     <Chart className={'story-chart'}>
-      <Settings showLegend={true} legendPosition={legendPosition} showLegendDisplayValue={showLegendDisplayValue} />
+      <Settings showLegend={true} legendPosition={legendPosition} showLegendExtra={showLegendDisplayValue} />
       <Axis id={getAxisId('bottom')} position={Position.Bottom} title={'Bottom axis'} showOverlappingTicks={true} />
       <Axis
         id={getAxisId('left2')}