Aligns the y axis settings on horizontal mode (#77585) (#77781)

elastic · Sep 18, 2020 · 1567be9 · 1567be9
1 parent b484269
commit 1567be9
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 13 deletions.
diff --git a/x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx b/x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx
@@ -56,6 +56,7 @@ export const ToolbarPopover: React.FunctionComponent<ToolbarPopoverProps> = ({
             onClick={() => {
               setOpen(!open);
             }}
+            title={title}
             hasArrow={false}
             isDisabled={isDisabled}
             groupPosition={groupPosition}

diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import { mountWithIntl as mount, shallowWithIntl as shallow } from 'test_utils/enzyme_helpers';
 import { EuiButtonGroupProps, EuiSuperSelect, EuiButtonGroup } from '@elastic/eui';
-import { LayerContextMenu, XyToolbar } from './xy_config_panel';
+import { LayerContextMenu, XyToolbar, DimensionEditor } from './xy_config_panel';
 import { ToolbarPopover } from '../shared_components';
 import { AxisSettingsPopover } from './axis_settings_popover';
 import { FramePublicAPI } from '../types';
@@ -171,4 +171,48 @@ describe('XY Config panels', () => {
       expect(component.find(AxisSettingsPopover).length).toEqual(3);
     });
   });
+
+  describe('Dimension Editor', () => {
+    test('shows the correct axis side options when in horizontal mode', () => {
+      const state = testState();
+      const component = mount(
+        <DimensionEditor
+          layerId={state.layers[0].layerId}
+          frame={frame}
+          setState={jest.fn()}
+          accessor="bar"
+          groupId="left"
+          state={{ ...state, layers: [{ ...state.layers[0], seriesType: 'bar_horizontal' }] }}
+        />
+      );
+
+      const options = component
+        .find(EuiButtonGroup)
+        .first()
+        .prop('options') as EuiButtonGroupProps['options'];
+
+      expect(options!.map(({ label }) => label)).toEqual(['Auto', 'Bottom', 'Top']);
+    });
+
+    test('shows the default axis side options when not in horizontal mode', () => {
+      const state = testState();
+      const component = mount(
+        <DimensionEditor
+          layerId={state.layers[0].layerId}
+          frame={frame}
+          setState={jest.fn()}
+          accessor="bar"
+          groupId="left"
+          state={state}
+        />
+      );
+
+      const options = component
+        .find(EuiButtonGroup)
+        .first()
+        .prop('options') as EuiButtonGroupProps['options'];
+
+      expect(options!.map(({ label }) => label)).toEqual(['Auto', 'Left', 'Right']);
+    });
+  });
 });
diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx
@@ -274,9 +274,15 @@ export function XyToolbar(props: VisualizationToolbarProps<State>) {
       <EuiFlexItem>
         <EuiFlexGroup gutterSize="none" responsive={false}>
           <TooltipWrapper
-            tooltipContent={i18n.translate('xpack.lens.xyChart.leftAxisDisabledHelpText', {
-              defaultMessage: 'This setting only applies when left axis is enabled.',
-            })}
+            tooltipContent={
+              shouldRotate
+                ? i18n.translate('xpack.lens.xyChart.bottomAxisDisabledHelpText', {
+                    defaultMessage: 'This setting only applies when bottom axis is enabled.',
+                  })
+                : i18n.translate('xpack.lens.xyChart.leftAxisDisabledHelpText', {
+                    defaultMessage: 'This setting only applies when left axis is enabled.',
+                  })
+            }
             condition={
               Object.keys(axisGroups.find((group) => group.groupId === 'left') || {}).length === 0
             }
@@ -310,9 +316,15 @@ export function XyToolbar(props: VisualizationToolbarProps<State>) {
             toggleAxisTitleVisibility={onAxisTitlesVisibilitySettingsChange}
           />
           <TooltipWrapper
-            tooltipContent={i18n.translate('xpack.lens.xyChart.rightAxisDisabledHelpText', {
-              defaultMessage: 'This setting only applies when right axis is enabled.',
-            })}
+            tooltipContent={
+              shouldRotate
+                ? i18n.translate('xpack.lens.xyChart.topAxisDisabledHelpText', {
+                    defaultMessage: 'This setting only applies when top axis is enabled.',
+                  })
+                : i18n.translate('xpack.lens.xyChart.rightAxisDisabledHelpText', {
+                    defaultMessage: 'This setting only applies when right axis is enabled.',
+                  })
+            }
             condition={
               Object.keys(axisGroups.find((group) => group.groupId === 'right') || {}).length === 0
             }
@@ -345,6 +357,7 @@ export function DimensionEditor(props: VisualizationDimensionEditorProps<State>)
   const { state, setState, layerId, accessor } = props;
   const index = state.layers.findIndex((l) => l.layerId === layerId);
   const layer = state.layers[index];
+  const isHorizontal = isHorizontalChart(state.layers);
   const axisMode =
     (layer.yConfig &&
       layer.yConfig?.find((yAxisConfig) => yAxisConfig.forAccessor === accessor)?.axisMode) ||
@@ -377,15 +390,23 @@ export function DimensionEditor(props: VisualizationDimensionEditorProps<State>)
             },
             {
               id: `${idPrefix}left`,
-              label: i18n.translate('xpack.lens.xyChart.axisSide.left', {
-                defaultMessage: 'Left',
-              }),
+              label: isHorizontal
+                ? i18n.translate('xpack.lens.xyChart.axisSide.bottom', {
+                    defaultMessage: 'Bottom',
+                  })
+                : i18n.translate('xpack.lens.xyChart.axisSide.left', {
+                    defaultMessage: 'Left',
+                  }),
             },
             {
               id: `${idPrefix}right`,
-              label: i18n.translate('xpack.lens.xyChart.axisSide.right', {
-                defaultMessage: 'Right',
-              }),
+              label: isHorizontal
+                ? i18n.translate('xpack.lens.xyChart.axisSide.top', {
+                    defaultMessage: 'Top',
+                  })
+                : i18n.translate('xpack.lens.xyChart.axisSide.right', {
+                    defaultMessage: 'Right',
+                  }),
             },
           ]}
           idSelected={`${idPrefix}${axisMode}`}