feat(legend): hide legend item if hideLegendItem on series spec is tr…

…ue (#147)

src/components/_legend.scss

@@ -97,6 +97,10 @@ $elasticChartsLegendMaxHeight: $euiSize * 4;
       text-decoration: underline;
     }
   }
+
+  &.elasticChartsLegendList__item--hidden {
+    display: none;
+  }
 }
 
 .elasticChartsLegendListItem__title {

src/components/legend.tsx

@@ -68,18 +68,20 @@ class LegendComponent extends React.Component<ReactiveChartProps> {
             responsive={false}
           >
             {[...legendItems.values()].map((item) => {
+              const { color, label, isSeriesVisible, isLegendItemVisible } = item;
+
               const legendItemProps = {
                 key: item.key,
-                className: 'elasticChartsLegendList__item',
+                className: classNames('elasticChartsLegendList__item', {
+                  'elasticChartsLegendList__item--hidden': !isLegendItemVisible,
+                }),
                 onMouseEnter: this.onLegendItemMouseover(item.key),
                 onMouseLeave: this.onLegendItemMouseout,
               };
 
-              const { color, label, isVisible } = item;
-
               return (
                 <EuiFlexItem {...legendItemProps}>
-                  {this.renderLegendElement({ color, label, isVisible }, item.key)}
+                  {this.renderLegendElement({ color, label, isSeriesVisible }, item.key)}
                 </EuiFlexItem>
               );
             })}
@@ -98,10 +100,10 @@ class LegendComponent extends React.Component<ReactiveChartProps> {
   }
 
   private renderLegendElement = (
-    { color, label, isVisible }: Partial<LegendItem>,
+    { color, label, isSeriesVisible }: Partial<LegendItem>,
     legendItemKey: string,
   ) => {
-    const props = { color, label, isVisible, legendItemKey };
+    const props = { color, label, isSeriesVisible, legendItemKey };
 
     return <LegendElement {...props} />;
   }

src/components/legend_element.tsx

@@ -21,7 +21,7 @@ interface LegendElementProps {
   legendItemKey: string;
   color: string | undefined;
   label: string | undefined;
-  isVisible?: boolean;
+  isSeriesVisible?: boolean;
 }
 
 interface LegendElementState {
@@ -52,7 +52,7 @@ class LegendElementComponent extends React.Component<LegendElementProps, LegendE
 
   render() {
     const { legendItemKey } = this.props;
-    const { color, label, isVisible } = this.props;
+    const { color, label, isSeriesVisible } = this.props;
 
     const onTitleClick = this.onLegendTitleClick(legendItemKey);
 
@@ -88,7 +88,7 @@ class LegendElementComponent extends React.Component<LegendElementProps, LegendE
           </EuiPopover>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          {this.renderVisibilityButton(legendItemKey, isVisible)}
+          {this.renderVisibilityButton(legendItemKey, isSeriesVisible)}
         </EuiFlexItem>
         <EuiFlexItem grow={false} className={titleClassNames} onClick={onTitleClick}>
           <EuiPopover
@@ -156,8 +156,8 @@ class LegendElementComponent extends React.Component<LegendElementProps, LegendE
     }
   }
 
-  private renderVisibilityButton = (legendItemKey: string, isVisible: boolean = true) => {
-    const iconType = isVisible ? 'eye' : 'eyeClosed';
+  private renderVisibilityButton = (legendItemKey: string, isSeriesVisible: boolean = true) => {
+    const iconType = isSeriesVisible ? 'eye' : 'eyeClosed';
     return (
       <EuiButtonIcon
         onClick={this.onVisibilityClick(legendItemKey)}

src/lib/series/legend.test.ts

@@ -31,6 +31,7 @@ const spec1: BasicSeriesSpec = {
   yAccessors: ['y'],
   yScaleToDataExtent: false,
   data: [],
+  hideInLegend: false,
 };
 const spec2: BasicSeriesSpec = {
   id: getSpecId('spec2'),
@@ -42,6 +43,7 @@ const spec2: BasicSeriesSpec = {
   yAccessors: ['y'],
   yScaleToDataExtent: false,
   data: [],
+  hideInLegend: false,
 };
 
 describe('Legends', () => {
@@ -65,7 +67,8 @@ describe('Legends', () => {
         color: 'red',
         label: 'Spec 1 title',
         value: { colorValues: [], specId: 'spec1' },
-        isVisible: true,
+        isSeriesVisible: true,
+        isLegendItemVisible: true,
         key: 'colorSeries1a',
       },
     ];
@@ -80,14 +83,16 @@ describe('Legends', () => {
         color: 'red',
         label: 'Spec 1 title',
         value: { colorValues: [], specId: 'spec1' },
-        isVisible: true,
+        isSeriesVisible: true,
+        isLegendItemVisible: true,
         key: 'colorSeries1a',
       },
       {
         color: 'blue',
         label: 'a - b',
         value: { colorValues: ['a', 'b'], specId: 'spec1' },
-        isVisible: true,
+        isSeriesVisible: true,
+        isLegendItemVisible: true,
         key: 'colorSeries1b',
       },
     ];
@@ -102,14 +107,16 @@ describe('Legends', () => {
         color: 'red',
         label: 'Spec 1 title',
         value: { colorValues: [], specId: 'spec1' },
-        isVisible: true,
+        isSeriesVisible: true,
+        isLegendItemVisible: true,
         key: 'colorSeries1a',
       },
       {
         color: 'green',
         label: 'spec2',
         value: { colorValues: [], specId: 'spec2' },
-        isVisible: true,
+        isSeriesVisible: true,
+        isLegendItemVisible: true,
         key: 'colorSeries2a',
       },
     ];
@@ -129,7 +136,8 @@ describe('Legends', () => {
         color: 'violet',
         label: 'Spec 1 title',
         value: { colorValues: [], specId: 'spec1' },
-        isVisible: true,
+        isSeriesVisible: true,
+        isLegendItemVisible: true,
         key: 'colorSeries1a',
       },
     ];
@@ -146,9 +154,9 @@ describe('Legends', () => {
 
     const legend = computeLegend(seriesColor, emptyColorMap, specs, 'violet', deselectedDataSeries);
 
-    const visibility = [...legend.values()].map((item) => item.isVisible);
+    const visibility = [...legend.values()].map((item) => item.isSeriesVisible);
 
-    expect(visibility).toEqual([true, true, true, true]);
+    expect(visibility).toEqual([true, true, true]);
   });
   it('selectively sets series to visible when there are deselectedDataSeries items', () => {
     seriesColor.set('colorSeries1a', colorValues1a);
@@ -161,8 +169,8 @@ describe('Legends', () => {
 
     const legend = computeLegend(seriesColor, emptyColorMap, specs, 'violet', deselectedDataSeries);
 
-    const visibility = [...legend.values()].map((item) => item.isVisible);
-    expect(visibility).toEqual([false, false, true, true]);
+    const visibility = [...legend.values()].map((item) => item.isSeriesVisible);
+    expect(visibility).toEqual([false, false, true]);
   });
   it('returns the right series label for a color series', () => {
     let label = getSeriesColorLabel([], true);

src/lib/series/legend.ts

@@ -8,7 +8,8 @@ export interface LegendItem {
   color: string;
   label: string;
   value: DataSeriesColorsValues;
-  isVisible?: boolean;
+  isSeriesVisible?: boolean;
+  isLegendItemVisible?: boolean;
 }
 export function computeLegend(
   seriesColor: Map<string, DataSeriesColorsValues>,
@@ -24,20 +25,23 @@ export function computeLegend(
     const color = seriesColorMap.get(key) || defaultColor;
     const hasSingleSeries = seriesColor.size === 1;
     const label = getSeriesColorLabel(series.colorValues, hasSingleSeries, spec);
-    const isVisible = deselectedDataSeries
+    const isSeriesVisible = deselectedDataSeries
       ? findDataSeriesByColorValues(deselectedDataSeries, series) < 0
       : true;
 
-    if (!label) {
+    if (!label || !spec) {
       return;
     }
 
+    const { hideInLegend } = spec;
+
     legendItems.set(key, {
       key,
       color,
       label,
       value: series,
-      isVisible,
+      isSeriesVisible,
+      isLegendItemVisible: !hideInLegend,
     });
   });
   return legendItems;

src/lib/series/series.test.ts

@@ -181,6 +181,7 @@ describe('Series', () => {
       yAccessors: ['y'],
       yScaleToDataExtent: false,
       data: TestDataset.BARCHART_1Y0G,
+      hideInLegend: false,
     };
     const spec2: BasicSeriesSpec = {
       id: getSpecId('spec2'),
@@ -193,6 +194,7 @@ describe('Series', () => {
       stackAccessors: ['x'],
       yScaleToDataExtent: false,
       data: TestDataset.BARCHART_2Y0G,
+      hideInLegend: false,
     };
     seriesSpecs.set(spec1.id, spec1);
     seriesSpecs.set(spec2.id, spec2);
@@ -212,6 +214,7 @@ describe('Series', () => {
       yAccessors: ['y'],
       yScaleToDataExtent: false,
       data: TestDataset.BARCHART_1Y0G,
+      hideInLegend: false,
     };
     const spec2: BasicSeriesSpec = {
       id: getSpecId('spec2'),
@@ -224,6 +227,7 @@ describe('Series', () => {
       stackAccessors: ['x'],
       yScaleToDataExtent: false,
       data: TestDataset.BARCHART_2Y0G,
+      hideInLegend: false,
     };
     seriesSpecs.set(spec1.id, spec1);
     seriesSpecs.set(spec2.id, spec2);
@@ -245,6 +249,7 @@ describe('Series', () => {
       yAccessors: ['y'],
       yScaleToDataExtent: false,
       data: TestDataset.BARCHART_1Y0G,
+      hideInLegend: false,
     };
 
     const specs = new Map();
@@ -293,6 +298,7 @@ describe('Series', () => {
       stackAccessors: ['x'],
       yScaleToDataExtent: false,
       data: TestDataset.BARCHART_2Y0G,
+      hideInLegend: false,
     };
 
     seriesSpecs.set(splitSpec.id, splitSpec);

src/lib/series/specs.ts

@@ -39,6 +39,10 @@ export interface SeriesSpec {
   seriesType: 'bar' | 'line' | 'area' | 'basic';
   /** Custom colors for series */
   customSeriesColors?: CustomSeriesColorsMap;
+  /** If the series should appear in the legend
+   * @default false
+   */
+  hideInLegend?: boolean;
 }
 
 export type CustomSeriesColorsMap = Map<DataSeriesColorsValues, string>;

src/specs/area_series.tsx

@@ -16,6 +16,7 @@ export class AreaSeriesSpecComponent extends PureComponent<AreaSpecProps> {
     xAccessor: 'x',
     yAccessors: ['y'],
     yScaleToDataExtent: false,
+    hideInLegend: false,
   };
   componentDidMount() {
     const { chartStore, children, ...config } = this.props;

src/specs/bar_series.tsx

@@ -16,6 +16,7 @@ export class BarSeriesSpecComponent extends PureComponent<BarSpecProps> {
     xAccessor: 'x',
     yAccessors: ['y'],
     yScaleToDataExtent: false,
+    hideInLegend: false,
   };
   componentDidMount() {
     const { chartStore, children, ...config } = this.props;

src/specs/basic_series.tsx

@@ -16,6 +16,7 @@ export class BasicSeriesSpecComponent extends PureComponent<BasicSpecProps> {
     xAccessor: 'x',
     yAccessors: ['y'],
     yScaleToDataExtent: false,
+    hideInLegend: false,
   };
   componentDidMount() {
     const { chartStore, children, ...config } = this.props;

src/specs/line_series.tsx

@@ -16,6 +16,7 @@ export class LineSeriesSpecComponent extends PureComponent<LineSpecProps> {
     xAccessor: 'x',
     yAccessors: ['y'],
     yScaleToDataExtent: false,
+    hideInLegend: false,
   };
   componentDidMount() {
     const { chartStore, children, ...config } = this.props;

src/state/chart_state.test.ts

@@ -32,6 +32,7 @@ describe('Chart Store', () => {
     yAccessors: ['y'],
     xScaleType: ScaleType.Linear,
     yScaleType: ScaleType.Linear,
+    hideInLegend: false,
   };
 
   const firstLegendItem = {

src/state/test/interactions.test.ts

@@ -22,6 +22,7 @@ const ordinalBarSeries: BarSeriesSpec = {
   yAccessors: [1],
   xScaleType: ScaleType.Ordinal,
   yScaleType: ScaleType.Linear,
+  hideInLegend: false,
 };
 const linearBarSeries: BarSeriesSpec = {
   id: SPEC_ID,
@@ -33,6 +34,7 @@ const linearBarSeries: BarSeriesSpec = {
   yAccessors: [1],
   xScaleType: ScaleType.Linear,
   yScaleType: ScaleType.Linear,
+  hideInLegend: false,
 };
 const chartTop = 10;
 const chartLeft = 10;