[Lens] Allows the users to change the axis orientation (#106369)

* [Lens] Allows the users to change the axis orientation

* Disable orientation if ticklabels are off

Co-authored-by: Kibana Machine <[email protected]>

x-pack/plugins/lens/common/expressions/xy_chart/index.ts

@@ -14,3 +14,4 @@ export * from './series_type';
 export * from './tick_labels_config';
 export * from './xy_args';
 export * from './xy_chart';
+export * from './labels_orientation_config';

x-pack/plugins/lens/common/expressions/xy_chart/labels_orientation_config.ts

@@ -0,0 +1,60 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { i18n } from '@kbn/i18n';
+import type { ExpressionFunctionDefinition } from '../../../../../../src/plugins/expressions/common';
+
+export interface LabelsOrientationConfig {
+  x: number;
+  yLeft: number;
+  yRight: number;
+}
+
+export type LabelsOrientationConfigResult = LabelsOrientationConfig & {
+  type: 'lens_xy_labelsOrientationConfig';
+};
+
+export const labelsOrientationConfig: ExpressionFunctionDefinition<
+  'lens_xy_labelsOrientationConfig',
+  null,
+  LabelsOrientationConfig,
+  LabelsOrientationConfigResult
+> = {
+  name: 'lens_xy_labelsOrientationConfig',
+  aliases: [],
+  type: 'lens_xy_labelsOrientationConfig',
+  help: `Configure the xy chart's tick labels orientation`,
+  inputTypes: ['null'],
+  args: {
+    x: {
+      types: ['number'],
+      options: [0, -90, -45],
+      help: i18n.translate('xpack.lens.xyChart.xAxisLabelsOrientation.help', {
+        defaultMessage: 'Specifies the labels orientation of the x-axis.',
+      }),
+    },
+    yLeft: {
+      types: ['number'],
+      options: [0, -90, -45],
+      help: i18n.translate('xpack.lens.xyChart.yLeftAxisLabelsOrientation.help', {
+        defaultMessage: 'Specifies the labels orientation of the left y-axis.',
+      }),
+    },
+    yRight: {
+      types: ['number'],
+      options: [0, -90, -45],
+      help: i18n.translate('xpack.lens.xyChart.yRightAxisLabelsOrientation.help', {
+        defaultMessage: 'Specifies the labels orientation of the right y-axis.',
+      }),
+    },
+  },
+  fn: function fn(input: unknown, args: LabelsOrientationConfig) {
+    return {
+      type: 'lens_xy_labelsOrientationConfig',
+      ...args,
+    };
+  },
+};

x-pack/plugins/lens/common/expressions/xy_chart/xy_args.ts

@@ -11,6 +11,7 @@ import type { GridlinesConfigResult } from './grid_lines_config';
 import type { LayerArgs } from './layer_config';
 import type { LegendConfigResult } from './legend_config';
 import type { TickLabelsConfigResult } from './tick_labels_config';
+import type { LabelsOrientationConfigResult } from './labels_orientation_config';
 
 export type ValueLabelConfig = 'hide' | 'inside' | 'outside';
 
@@ -32,6 +33,7 @@ export interface XYArgs {
   axisTitlesVisibilitySettings?: AxisTitlesVisibilityConfigResult;
   tickLabelsVisibilitySettings?: TickLabelsConfigResult;
   gridlinesVisibilitySettings?: GridlinesConfigResult;
+  labelsOrientation?: LabelsOrientationConfigResult;
   curveType?: XYCurveType;
   fillOpacity?: number;
   hideEndzones?: boolean;

x-pack/plugins/lens/common/expressions/xy_chart/xy_chart.ts

@@ -97,6 +97,12 @@ export const xyChart: ExpressionFunctionDefinition<
         defaultMessage: 'Show x and y axes tick labels',
       }),
     },
+    labelsOrientation: {
+      types: ['lens_xy_labelsOrientationConfig'],
+      help: i18n.translate('xpack.lens.xyChart.labelsOrientation.help', {
+        defaultMessage: 'Defines the rotation of the axis labels',
+      }),
+    },
     gridlinesVisibilitySettings: {
       types: ['lens_xy_gridlinesConfig'],
       help: i18n.translate('xpack.lens.xyChart.gridlinesSettings.help', {

x-pack/plugins/lens/public/xy_visualization/axis_settings_popover.test.tsx

@@ -34,6 +34,8 @@ describe('Axes Settings', () => {
       toggleGridlinesVisibility: jest.fn(),
       hasBarOrAreaOnAxis: false,
       hasPercentageAxis: false,
+      orientation: 0,
+      setOrientation: jest.fn(),
     };
   });
 
@@ -82,6 +84,28 @@ describe('Axes Settings', () => {
     );
   });
 
+  it('has selected the horizontal option on the orientation group', () => {
+    const component = shallow(<AxisSettingsPopover {...props} />);
+    expect(
+      component.find('[data-test-subj="lnsXY_axisOrientation_groups"]').prop('idSelected')
+    ).toEqual('xy_axis_orientation_horizontal');
+  });
+
+  it('should have called the setOrientation function on orientation button group change', () => {
+    const component = shallow(<AxisSettingsPopover {...props} />);
+    component
+      .find('[data-test-subj="lnsXY_axisOrientation_groups"]')
+      .simulate('change', 'xy_axis_orientation_angled');
+    expect(props.setOrientation).toHaveBeenCalled();
+  });
+
+  it('should disable the orientation group if the tickLabels are set to not visible', () => {
+    const component = shallow(<AxisSettingsPopover {...props} areTickLabelsVisible={false} />);
+    expect(
+      component.find('[data-test-subj="lnsXY_axisOrientation_groups"]').prop('isDisabled')
+    ).toEqual(true);
+  });
+
   it('hides the endzone visibility flag if no setter is passed in', () => {
     const component = shallow(<AxisSettingsPopover {...props} />);
     expect(component.find('[data-test-subj="lnsshowEndzones"]').length).toBe(0);

x-pack/plugins/lens/public/xy_visualization/axis_settings_popover.tsx

@@ -57,6 +57,14 @@ export interface AxisSettingsPopoverProps {
    * Determines if the ticklabels of the axis are visible
    */
   areTickLabelsVisible: boolean;
+  /**
+   * Determines the axis labels orientation
+   */
+  orientation: number;
+  /**
+   * Callback on orientation option change
+   */
+  setOrientation: (axis: AxesSettingsConfigKeys, orientation: number) => void;
   /**
    * Toggles the axis tickLabels visibility
    */
@@ -151,6 +159,33 @@ const popoverConfig = (
       };
   }
 };
+const axisOrientationOptions: Array<{
+  id: string;
+  value: 0 | -90 | -45;
+  label: string;
+}> = [
+  {
+    id: 'xy_axis_orientation_horizontal',
+    value: 0,
+    label: i18n.translate('xpack.lens.xyChart.axisOrientation.horizontal', {
+      defaultMessage: 'Horizontal',
+    }),
+  },
+  {
+    id: 'xy_axis_orientation_vertical',
+    value: -90,
+    label: i18n.translate('xpack.lens.xyChart.axisOrientation.vertical', {
+      defaultMessage: 'Vertical',
+    }),
+  },
+  {
+    id: 'xy_axis_orientation_angled',
+    value: -45,
+    label: i18n.translate('xpack.lens.xyChart.axisOrientation.angled', {
+      defaultMessage: 'Angled',
+    }),
+  },
+];
 
 const noop = () => {};
 const idPrefix = htmlIdGenerator()();
@@ -165,6 +200,8 @@ export const AxisSettingsPopover: React.FunctionComponent<AxisSettingsPopoverPro
   areTickLabelsVisible,
   areGridlinesVisible,
   isAxisTitleVisible,
+  orientation,
+  setOrientation,
   toggleAxisTitleVisibility,
   setEndzoneVisibility,
   endzonesVisible,
@@ -257,6 +294,16 @@ export const AxisSettingsPopover: React.FunctionComponent<AxisSettingsPopoverPro
         })}
       />
       <EuiSpacer size="m" />
+      <EuiSwitch
+        compressed
+        data-test-subj={`lnsshow${axis}AxisGridlines`}
+        label={i18n.translate('xpack.lens.xyChart.Gridlines', {
+          defaultMessage: 'Gridlines',
+        })}
+        onChange={() => toggleGridlinesVisibility(axis)}
+        checked={areGridlinesVisible}
+      />
+      <EuiSpacer size="m" />
       <EuiSwitch
         compressed
         data-test-subj={`lnsshow${axis}AxisTickLabels`}
@@ -266,16 +313,31 @@ export const AxisSettingsPopover: React.FunctionComponent<AxisSettingsPopoverPro
         onChange={() => toggleTickLabelsVisibility(axis)}
         checked={areTickLabelsVisible}
       />
-      <EuiSpacer size="m" />
-      <EuiSwitch
-        compressed
-        data-test-subj={`lnsshow${axis}AxisGridlines`}
-        label={i18n.translate('xpack.lens.xyChart.Gridlines', {
-          defaultMessage: 'Gridlines',
+      <EuiSpacer size="s" />
+      <EuiFormRow
+        display="rowCompressed"
+        fullWidth
+        label={i18n.translate('xpack.lens.xyChart.axisOrientation.label', {
+          defaultMessage: 'Orientation',
         })}
-        onChange={() => toggleGridlinesVisibility(axis)}
-        checked={areGridlinesVisible}
-      />
+      >
+        <EuiButtonGroup
+          isFullWidth
+          legend={i18n.translate('xpack.lens.xyChart.axisOrientation.label', {
+            defaultMessage: 'Orientation',
+          })}
+          data-test-subj="lnsXY_axisOrientation_groups"
+          name="axisOrientation"
+          isDisabled={!areTickLabelsVisible}
+          buttonSize="compressed"
+          options={axisOrientationOptions}
+          idSelected={axisOrientationOptions.find(({ value }) => value === orientation)!.id}
+          onChange={(optionId) => {
+            const newOrientation = axisOrientationOptions.find(({ id }) => id === optionId)!.value;
+            setOrientation(axis, newOrientation);
+          }}
+        />
+      </EuiFormRow>
       {setEndzoneVisibility && (
         <>
           <EuiSpacer size="m" />