[8.x] [Lens] Use AxisLabelOrientationSelector in xy axis settings (elastic#208002) (elastic#210166)

kibanamachine · mariairiartef · web-flow · commit b25012dcc4b6 · 2025-02-07T14:21:07.000+01:00
# Backport This will backport the following commits from `main` to `8.x`: - [[Lens] Use AxisLabelOrientationSelector in xy axis settings (elastic#208002)](elastic#208002)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Maria Iriarte <106958839+mariairiartef@users.noreply.github.com>
diff --git a/x-pack/platform/plugins/private/translations/translations/fr-FR.json b/x-pack/platform/plugins/private/translations/translations/fr-FR.json
@@ -27008,10 +27008,6 @@
     "xpack.lens.xyChart.annotations.saveAnnotationGroupToLibrary.successToastTitle": "\"{title}\" enregistré",
     "xpack.lens.xyChart.annotations.unlinkFromLibrary": "Dissocier de la bibliothèque",
     "xpack.lens.xyChart.annotations.unlinksFromLibrary": "Enregistre le groupe d’annotations en tant que partie de l’objet Lens enregistré",
-    "xpack.lens.xyChart.axisOrientation.angled": "En angle",
-    "xpack.lens.xyChart.axisOrientation.horizontal": "Horizontal",
-    "xpack.lens.xyChart.axisOrientation.label": "Orientation",
-    "xpack.lens.xyChart.axisOrientation.vertical": "Vertical",
     "xpack.lens.xyChart.axisSide.auto": "Auto",
     "xpack.lens.xyChart.axisSide.bottom": "Bas",
     "xpack.lens.xyChart.axisSide.label": "Côté de l'axe",
diff --git a/x-pack/platform/plugins/private/translations/translations/ja-JP.json b/x-pack/platform/plugins/private/translations/translations/ja-JP.json
@@ -26870,10 +26870,6 @@
     "xpack.lens.xyChart.annotations.saveAnnotationGroupToLibrary.successToastTitle": "\"{title}\"が保存されました",
     "xpack.lens.xyChart.annotations.unlinkFromLibrary": "ライブラリからのリンクを解除",
     "xpack.lens.xyChart.annotations.unlinksFromLibrary": "注釈グループをLens保存済みオブジェクトの一部として保存します",
-    "xpack.lens.xyChart.axisOrientation.angled": "傾斜",
-    "xpack.lens.xyChart.axisOrientation.horizontal": "横",
-    "xpack.lens.xyChart.axisOrientation.label": "向き",
-    "xpack.lens.xyChart.axisOrientation.vertical": "縦",
     "xpack.lens.xyChart.axisSide.auto": "自動",
     "xpack.lens.xyChart.axisSide.bottom": "一番下",
     "xpack.lens.xyChart.axisSide.label": "軸側",
diff --git a/x-pack/platform/plugins/private/translations/translations/zh-CN.json b/x-pack/platform/plugins/private/translations/translations/zh-CN.json
@@ -26955,10 +26955,6 @@
     "xpack.lens.xyChart.annotations.saveAnnotationGroupToLibrary.successToastTitle": "已保存“{title}”",
     "xpack.lens.xyChart.annotations.unlinkFromLibrary": "取消与库的链接",
     "xpack.lens.xyChart.annotations.unlinksFromLibrary": "将标注组另存为 Lens 已保存对象的一部分",
-    "xpack.lens.xyChart.axisOrientation.angled": "带角度",
-    "xpack.lens.xyChart.axisOrientation.horizontal": "水平",
-    "xpack.lens.xyChart.axisOrientation.label": "方向",
-    "xpack.lens.xyChart.axisOrientation.vertical": "垂直",
     "xpack.lens.xyChart.axisSide.auto": "自动",
     "xpack.lens.xyChart.axisSide.bottom": "底部",
     "xpack.lens.xyChart.axisSide.label": "轴侧",
diff --git a/x-pack/platform/plugins/shared/lens/public/shared_components/axis/orientation/axis_label_orientation_selector.tsx b/x-pack/platform/plugins/shared/lens/public/shared_components/axis/orientation/axis_label_orientation_selector.tsx
@@ -8,8 +8,7 @@
 import React from 'react';
 import { EuiFormRow, EuiButtonGroup } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-
-type AxesSettingsConfigKeys = 'x' | 'yRight' | 'yLeft';
+import type { AxesSettingsConfigKeys } from '../types';
 
 export const allowedOrientations = [0, -45, -90] as const;
 export type Orientation = (typeof allowedOrientations)[number];
diff --git a/x-pack/platform/plugins/shared/lens/public/shared_components/axis/ticks/axis_ticks_settings.tsx b/x-pack/platform/plugins/shared/lens/public/shared_components/axis/ticks/axis_ticks_settings.tsx
@@ -8,9 +8,7 @@
 import React, { useCallback } from 'react';
 import { EuiSwitch, EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
-import type { AxesSettingsConfig } from '../../../visualizations/xy/types';
-
-type AxesSettingsConfigKeys = keyof AxesSettingsConfig;
+import type { AxesSettingsConfigKeys } from '../types';
 
 export interface AxisTicksSettingsProps {
   /**
diff --git a/x-pack/platform/plugins/shared/lens/public/shared_components/axis/title/toolbar_title_settings.tsx b/x-pack/platform/plugins/shared/lens/public/shared_components/axis/title/toolbar_title_settings.tsx
@@ -9,7 +9,7 @@ import React, { useCallback, useMemo } from 'react';
 import { EuiSpacer, EuiFormRow } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { useDebouncedValue } from '@kbn/visualization-utils';
-import type { AxesSettingsConfig } from '../../../visualizations/xy/types';
+import type { AxesSettingsConfig } from '@kbn/visualizations-plugin/common';
 import { type LabelMode, VisLabel } from '../..';
 
 type SettingsConfigKeys = keyof AxesSettingsConfig | 'legend';
diff --git a/x-pack/platform/plugins/shared/lens/public/shared_components/axis/types.ts b/x-pack/platform/plugins/shared/lens/public/shared_components/axis/types.ts
@@ -0,0 +1,10 @@
+/*
+ * 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 type { AxesSettingsConfig } from '@kbn/visualizations-plugin/common';
+
+export type AxesSettingsConfigKeys = keyof AxesSettingsConfig;
diff --git a/x-pack/platform/plugins/shared/lens/public/shared_components/index.ts b/x-pack/platform/plugins/shared/lens/public/shared_components/index.ts
@@ -30,3 +30,4 @@ export { AxisLabelOrientationSelector } from './axis/orientation/axis_label_orie
 export * from './static_header';
 export * from './vis_label';
 export { ExperimentalBadge } from './experimental_badge';
+export type { AxesSettingsConfigKeys } from './axis/types';
diff --git a/x-pack/platform/plugins/shared/lens/public/visualizations/xy/types.ts b/x-pack/platform/plugins/shared/lens/public/visualizations/xy/types.ts
@@ -34,6 +34,7 @@ import {
   IconChartBarPercentage,
   IconChartBarHorizontal,
 } from '@kbn/chart-icons';
+import type { AxesSettingsConfig } from '@kbn/visualizations-plugin/common';
 
 import { CollapseFunction } from '../../../common/expressions';
 import type { VisualizationType } from '../../types';
@@ -63,11 +64,6 @@ export const defaultSeriesType = SeriesTypes.BAR_STACKED;
 
 export type YAxisMode = $Values<typeof YAxisModes>;
 export type SeriesType = $Values<typeof SeriesTypes>;
-export interface AxesSettingsConfig {
-  x: boolean;
-  yRight: boolean;
-  yLeft: boolean;
-}
 
 export interface AxisConfig extends Omit<YAxisConfig, 'extent'> {
   extent?: AxisExtentConfig;
diff --git a/x-pack/platform/plugins/shared/lens/public/visualizations/xy/xy_config_panel/axis_settings_popover.test.tsx b/x-pack/platform/plugins/shared/lens/public/visualizations/xy/xy_config_panel/axis_settings_popover.test.tsx
@@ -62,7 +62,6 @@ describe('AxesSettingsPopover', () => {
 
     return {
       renderer: renderResult,
-      orientation: new EuiButtonGroupTestHarness('lnsXY_axisOrientation_groups'),
       bounds: new EuiButtonGroupTestHarness('lnsXY_axisBounds_groups'),
     };
   };
@@ -86,28 +85,33 @@ describe('AxesSettingsPopover', () => {
   });
 
   it('should have selected the horizontal option on the orientation group', async () => {
-    const result = await renderAxisSettingsPopover({
+    await renderAxisSettingsPopover({
       useMultilayerTimeAxis: false,
       areTickLabelsVisible: true,
     });
-    expect(result.orientation.selected).not.toBeChecked();
+    const orientationGroup = screen.getByRole('group', { name: /orientation/i });
+    const pressedButton = within(orientationGroup).getByRole('button', { pressed: true });
+    expect(pressedButton.title).toBe('Horizontal');
   });
 
   it('should have called the setOrientation function on orientation button group change', async () => {
-    const result = await renderAxisSettingsPopover({
+    await renderAxisSettingsPopover({
       useMultilayerTimeAxis: false,
       areTickLabelsVisible: true,
     });
-    result.orientation.select('Angled');
-    expect(defaultProps.setOrientation).toHaveBeenCalled();
+    const orientationGroup = screen.getByRole('group', { name: /orientation/i });
+    fireEvent.click(within(orientationGroup).getByRole('button', { name: /angled/i }));
+    expect(defaultProps.setOrientation).toBeCalledTimes(1);
+    expect(defaultProps.setOrientation).toBeCalledWith(defaultProps.axis, -45);
   });
 
   it('should hide the orientation group if the tickLabels are set to not visible', async () => {
-    const result = await renderAxisSettingsPopover({
+    await renderAxisSettingsPopover({
       useMultilayerTimeAxis: false,
       areTickLabelsVisible: false,
     });
-    expect(result.orientation.self).not.toBeInTheDocument();
+    const orientationGroup = screen.queryByRole('group', { name: /orientation/i });
+    expect(orientationGroup).not.toBeInTheDocument();
   });
 
   it('hides the endzone visibility switch if no setter is passed in', async () => {
diff --git a/x-pack/platform/plugins/shared/lens/public/visualizations/xy/xy_config_panel/axis_settings_popover.tsx b/x-pack/platform/plugins/shared/lens/public/visualizations/xy/xy_config_panel/axis_settings_popover.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { useCallback } from 'react';
-import { EuiSwitch, IconType, EuiFormRow, EuiButtonGroup, EuiSelect } from '@elastic/eui';
+import { EuiSwitch, IconType, EuiFormRow, EuiSelect } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { isEqual } from 'lodash';
 import { AxisExtentConfig, YScaleType } from '@kbn/expression-xy-plugin/common';
@@ -24,15 +24,15 @@ import {
   ToolbarTitleSettings,
   AxisBoundsControl,
   AxisTicksSettings,
+  AxisLabelOrientationSelector,
+  allowedOrientations,
 } from '../../../shared_components';
-import { XYLayerConfig, AxesSettingsConfig } from '../types';
-
+import type { Orientation, AxesSettingsConfigKeys } from '../../../shared_components';
+import { XYLayerConfig } from '../types';
 import './axis_settings_popover.scss';
 import { validateExtent } from '../../../shared_components/axis/extent/helpers';
 import { getBounds } from '../../../shared_components/axis/extent/axis_extent_settings';
 
-type AxesSettingsConfigKeys = keyof AxesSettingsConfig;
-
 export interface AxisSettingsPopoverProps {
   /**
    * Determines the axis
@@ -186,33 +186,6 @@ 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',
-    }),
-  },
-];
 
 export const AxisSettingsPopover: React.FunctionComponent<AxisSettingsPopoverProps> = ({
   layers,
@@ -305,30 +278,17 @@ export const AxisSettingsPopover: React.FunctionComponent<AxisSettingsPopoverPro
         isAxisLabelVisible={areTickLabelsVisible}
       />
       {!useMultilayerTimeAxis && areTickLabelsVisible && (
-        <EuiFormRow
-          display="columnCompressed"
-          fullWidth
-          label={i18n.translate('xpack.lens.xyChart.axisOrientation.label', {
-            defaultMessage: 'Orientation',
-          })}
-        >
-          <EuiButtonGroup
-            isFullWidth
-            legend={i18n.translate('xpack.lens.xyChart.axisOrientation.label', {
-              defaultMessage: 'Orientation',
-            })}
-            data-test-subj="lnsXY_axisOrientation_groups"
-            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>
+        <AxisLabelOrientationSelector
+          axis={axis}
+          selectedLabelOrientation={
+            allowedOrientations.includes(orientation as Orientation)
+              ? (orientation as Orientation)
+              : 0 // Default to 0 if the value is not valid
+          }
+          setLabelOrientation={(newOrientation) => {
+            setOrientation(axis, newOrientation);
+          }}
+        />
       )}
       {setEndzoneVisibility && (
         <EuiFormRow
diff --git a/x-pack/platform/plugins/shared/lens/public/visualizations/xy/xy_config_panel/index.tsx b/x-pack/platform/plugins/shared/lens/public/visualizations/xy/xy_config_panel/index.tsx
@@ -11,10 +11,11 @@ import { LegendValue, Position, ScaleType } from '@elastic/charts';
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { AxisExtentConfig, YScaleType } from '@kbn/expression-xy-plugin/common';
 import { TooltipWrapper } from '@kbn/visualization-utils';
-import { LegendSize, XYLegendValue } from '@kbn/visualizations-plugin/common/constants';
+import { LegendSize } from '@kbn/visualizations-plugin/common/constants';
+import type { AxesSettingsConfig, XYLegendValue } from '@kbn/visualizations-plugin/common';
 import type { LegendSettingsPopoverProps } from '../../../shared_components/legend/legend_settings_popover';
 import type { VisualizationToolbarProps, FramePublicAPI } from '../../../types';
-import { State, XYState, AxesSettingsConfig } from '../types';
+import { State, XYState } from '../types';
 import { hasBarSeries, isHorizontalChart } from '../state_helpers';
 import { hasNumericHistogramDimension, LegendSettingsPopover } from '../../../shared_components';
 import { AxisSettingsPopover } from './axis_settings_popover';
@@ -24,9 +25,9 @@ import { TextPopover } from './titles_and_text_popover';
 import { getScaleType } from '../to_expression';
 import { getDefaultVisualValuesForLayer } from '../../../shared_components/datasource_default_values';
 import { getDataLayers } from '../visualization_helpers';
+import type { AxesSettingsConfigKeys } from '../../../shared_components';
 
 type UnwrapArray<T> = T extends Array<infer P> ? P : T;
-type AxesSettingsConfigKeys = keyof AxesSettingsConfig;
 
 export function updateLayer(
   state: State,
