[Lens] Make horizontal bar chart a first-class chart

x-pack/legacy/plugins/lens/public/xy_visualization_plugin/state_helpers.ts

@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { SeriesType, visualizationTypes } from './types';
+
+export function isHorizontalSeries(seriesType: SeriesType) {
+  return seriesType === 'bar_horizontal' || seriesType === 'bar_horizontal_stacked';
+}
+
+export function isHorizontalChart(layers: Array<{ seriesType: SeriesType }>) {
+  return layers.every(l => isHorizontalSeries(l.seriesType));
+}
+
+export function getIconForSeries(type: SeriesType): EuiIconType {
+  const definition = visualizationTypes.find(t => t.id === type);
+
+  if (!definition) {
+    throw new Error(`Unknown series type ${type}`);
+  }
+
+  return (definition.icon as EuiIconType) || 'empty';
+}

x-pack/legacy/plugins/lens/public/xy_visualization_plugin/to_expression.ts

@@ -131,7 +131,6 @@ export const buildExpression = (
       arguments: {
         xTitle: [xTitle],
         yTitle: [yTitle],
-        isHorizontal: [state.isHorizontal],
         legend: [
           {
             type: 'expression',

x-pack/legacy/plugins/lens/public/xy_visualization_plugin/types.ts

@@ -175,7 +175,14 @@ export const layerConfig: ExpressionFunction<
   },
 };
 
-export type SeriesType = 'bar' | 'line' | 'area' | 'bar_stacked' | 'area_stacked';
+export type SeriesType =
+  | 'bar'
+  | 'bar_horizontal'
+  | 'line'
+  | 'area'
+  | 'bar_stacked'
+  | 'bar_horizontal_stacked'
+  | 'area_stacked';
 
 export interface LayerConfig {
   hide?: boolean;
@@ -199,15 +206,13 @@ export interface XYArgs {
   yTitle: string;
   legend: LegendConfig;
   layers: LayerArgs[];
-  isHorizontal: boolean;
 }
 
 // Persisted parts of the state
 export interface XYState {
   preferredSeriesType: SeriesType;
   legend: LegendConfig;
   layers: LayerConfig[];
-  isHorizontal: boolean;
 }
 
 export type State = XYState;
@@ -221,13 +226,27 @@ export const visualizationTypes: VisualizationType[] = [
       defaultMessage: 'Bar',
     }),
   },
+  {
+    id: 'bar_horizontal',
+    icon: 'visBarHorizontal',
+    label: i18n.translate('xpack.lens.xyVisualization.barHorizontalLabel', {
+      defaultMessage: 'Horizontal Bar',
+    }),
+  },
   {
     id: 'bar_stacked',
     icon: 'visBarVertical',
-    label: i18n.translate('xpack.lens.xyVisualization.stackedBarLabel', {
+    label: i18n.translate('xpack.lens.xyVisualization.stackedBar', {
       defaultMessage: 'Stacked Bar',
     }),
   },
+  {
+    id: 'bar_horizontal_stacked',
+    icon: 'visBarHorizontal',
+    label: i18n.translate('xpack.lens.xyVisualization.stackedBarHorizontalLabel', {
+      defaultMessage: 'Stacked Horizontal Bar',
+    }),
+  },
   {
     id: 'line',
     icon: 'visLine',

x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_config_panel.test.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FormEvent } from 'react';
+import React from 'react';
 import { ReactWrapper } from 'enzyme';
 import { mountWithIntl as mount } from 'test_utils/enzyme_helpers';
 import { EuiButtonGroupProps } from '@elastic/eui';
@@ -15,7 +15,6 @@ import { Position } from '@elastic/charts';
 import { NativeRendererProps } from '../native_renderer';
 import { generateId } from '../id_generator';
 import { createMockFramePublicAPI, createMockDatasource } from '../editor_frame_plugin/mocks';
-import { act } from 'react-test-renderer';
 
 jest.mock('../id_generator');
 
@@ -28,7 +27,6 @@ describe('XYConfigPanel', () => {
     return {
       legend: { isVisible: true, position: Position.Right },
       preferredSeriesType: 'bar',
-      isHorizontal: false,
       layers: [
         {
           seriesType: 'bar',
@@ -64,50 +62,48 @@ describe('XYConfigPanel', () => {
     };
   });
 
-  test.skip('toggles axis position when going from horizontal bar to any other type', () => {});
   test.skip('allows toggling of legend visibility', () => {});
   test.skip('allows changing legend position', () => {});
   test.skip('allows toggling the y axis gridlines', () => {});
   test.skip('allows toggling the x axis gridlines', () => {});
 
-  test('puts the horizontal toggle in a popover', () => {
+  test('enables stacked chart types even when there is no split series', () => {
     const state = testState();
-    const setState = jest.fn();
     const component = mount(
       <XYConfigPanel
         dragDropContext={dragDropContext}
         frame={frame}
-        setState={setState}
-        state={state}
+        setState={jest.fn()}
+        state={{ ...state, layers: [{ ...state.layers[0], xAccessor: 'shazm' }] }}
       />
     );
 
-    component
-      .find(`[data-test-subj="lnsXY_chart_settings"]`)
+    openComponentPopover(component, 'first');
+
+    const options = component
+      .find('[data-test-subj="lnsXY_seriesType"]')
       .first()
-      .simulate('click');
+      .prop('options') as EuiButtonGroupProps['options'];
 
-    act(() => {
-      component
-        .find('[data-test-subj="lnsXY_chart_horizontal"]')
-        .first()
-        .prop('onChange')!({} as FormEvent);
-    });
+    expect(options!.map(({ id }) => id)).toEqual([
+      'bar',
+      'bar_stacked',
+      'line',
+      'area',
+      'area_stacked',
+    ]);
 
-    expect(setState).toHaveBeenCalledWith({
-      ...state,
-      isHorizontal: true,
-    });
+    expect(options!.filter(({ isDisabled }) => isDisabled).map(({ id }) => id)).toEqual([]);
   });
 
-  test('enables stacked chart types even when there is no split series', () => {
+  test('shows only horizontal bar options when in horizontal mode', () => {
     const state = testState();
     const component = mount(
       <XYConfigPanel
         dragDropContext={dragDropContext}
         frame={frame}
         setState={jest.fn()}
-        state={{ ...state, layers: [{ ...state.layers[0], xAccessor: 'shazm' }] }}
+        state={{ ...state, layers: [{ ...state.layers[0], seriesType: 'bar_horizontal' }] }}
       />
     );
 
@@ -118,14 +114,7 @@ describe('XYConfigPanel', () => {
       .first()
       .prop('options') as EuiButtonGroupProps['options'];
 
-    expect(options!.map(({ id }) => id)).toEqual([
-      'bar',
-      'bar_stacked',
-      'line',
-      'area',
-      'area_stacked',
-    ]);
-
+    expect(options!.map(({ id }) => id)).toEqual(['bar_horizontal', 'bar_horizontal_stacked']);
     expect(options!.filter(({ isDisabled }) => isDisabled).map(({ id }) => id)).toEqual([]);
   });
 

x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_config_panel.tsx

@@ -17,7 +17,6 @@ import {
   EuiPanel,
   EuiButtonIcon,
   EuiPopover,
-  EuiSwitch,
   EuiSpacer,
   EuiButtonEmpty,
   EuiPopoverFooter,
@@ -27,6 +26,7 @@ import { VisualizationProps, OperationMetadata } from '../types';
 import { NativeRenderer } from '../native_renderer';
 import { MultiColumnEditor } from '../multi_column_editor';
 import { generateId } from '../id_generator';
+import { isHorizontalChart, isHorizontalSeries } from './state_helpers';
 
 const isNumericMetric = (op: OperationMetadata) => !op.isBucketed && op.dataType === 'number';
 const isBucketed = (op: OperationMetadata) => op.isBucketed;
@@ -55,10 +55,12 @@ function newLayerState(seriesType: SeriesType, layerId: string): LayerConfig {
 
 function LayerSettings({
   layer,
+  horizontalOnly,
   setSeriesType,
   removeLayer,
 }: {
   layer: LayerConfig;
+  horizontalOnly: boolean;
   setSeriesType: (seriesType: SeriesType) => void;
   removeLayer: () => void;
 }) {
@@ -96,10 +98,12 @@ function LayerSettings({
           name="chartType"
           className="eui-displayInlineBlock"
           data-test-subj="lnsXY_seriesType"
-          options={visualizationTypes.map(t => ({
-            ...t,
-            iconType: t.icon || 'empty',
-          }))}
+          options={visualizationTypes
+            .filter(t => isHorizontalSeries(t.id as SeriesType) === horizontalOnly)
+            .map(t => ({
+              ...t,
+              iconType: t.icon || 'empty',
+            }))}
           idSelected={layer.seriesType}
           onChange={seriesType => setSeriesType(seriesType as SeriesType)}
           isIconOnly
@@ -124,44 +128,10 @@ function LayerSettings({
 
 export function XYConfigPanel(props: VisualizationProps<State>) {
   const { state, setState, frame } = props;
-  const [isChartOptionsOpen, setIsChartOptionsOpen] = useState(false);
+  const horizontalOnly = isHorizontalChart(state.layers);
 
   return (
     <EuiForm className="lnsConfigPanel">
-      <EuiPopover
-        id="lnsXY_chartConfig"
-        isOpen={isChartOptionsOpen}
-        closePopover={() => setIsChartOptionsOpen(false)}
-        button={
-          <EuiButtonIcon
-            iconType="gear"
-            size="s"
-            data-test-subj="lnsXY_chart_settings"
-            onClick={() => setIsChartOptionsOpen(!isChartOptionsOpen)}
-            aria-label={i18n.translate('xpack.lens.xyChart.chartSettings', {
-              defaultMessage: 'Chart Settings',
-            })}
-            title={i18n.translate('xpack.lens.xyChart.chartSettings', {
-              defaultMessage: 'Chart Settings',
-            })}
-          />
-        }
-      >
-        <EuiSwitch
-          label={i18n.translate('xpack.lens.xyChart.isHorizontalSwitch', {
-            defaultMessage: 'Rotate chart 90º',
-          })}
-          checked={state.isHorizontal}
-          onChange={() => {
-            setState({
-              ...state,
-              isHorizontal: !state.isHorizontal,
-            });
-          }}
-          data-test-subj="lnsXY_chart_horizontal"
-        />
-      </EuiPopover>
-
       {state.layers.map((layer, index) => (
         <EuiPanel
           className="lnsConfigPanel__panel"
@@ -173,6 +143,7 @@ export function XYConfigPanel(props: VisualizationProps<State>) {
             <EuiFlexItem grow={false}>
               <LayerSettings
                 layer={layer}
+                horizontalOnly={horizontalOnly}
                 setSeriesType={seriesType =>
                   setState(updateLayer(state, { ...layer, seriesType }, index))
                 }

x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_expression.test.tsx

@@ -35,7 +35,6 @@ function sampleArgs() {
   const args: XYArgs = {
     xTitle: '',
     yTitle: '',
-    isHorizontal: false,
     legend: {
       isVisible: false,
       position: Position.Top,
@@ -161,7 +160,7 @@ describe('xy_expression', () => {
       const component = shallow(
         <XYChart
           data={data}
-          args={{ ...args, isHorizontal: true, layers: [{ ...args.layers[0], seriesType: 'bar' }] }}
+          args={{ ...args, layers: [{ ...args.layers[0], seriesType: 'bar_horizontal' }] }}
           formatFactory={getFormatSpy}
           timeZone="UTC"
         />
@@ -208,8 +207,7 @@ describe('xy_expression', () => {
           data={data}
           args={{
             ...args,
-            isHorizontal: true,
-            layers: [{ ...args.layers[0], seriesType: 'bar_stacked' }],
+            layers: [{ ...args.layers[0], seriesType: 'bar_horizontal_stacked' }],
           }}
           formatFactory={getFormatSpy}
           timeZone="UTC"