From ac7c83ac6ad62c1582d29c33585e63d2fd8637b4 Mon Sep 17 00:00:00 2001 From: Stratoula Kalafateli Date: Wed, 21 Jul 2021 12:20:24 +0300 Subject: [PATCH] [Lens] Allows the users to change the axis orientation --- .../__snapshots__/expression.test.tsx.snap | 14 ++++ .../__snapshots__/to_expression.test.ts.snap | 22 ++++++ .../axis_settings_popover.test.tsx | 17 ++++ .../axis_settings_popover.tsx | 79 ++++++++++++++++--- .../xy_visualization/expression.test.tsx | 77 ++++++++++++++++++ .../public/xy_visualization/expression.tsx | 17 ++++ .../lens/public/xy_visualization/index.ts | 2 + .../xy_visualization/to_expression.test.ts | 30 +++++++ .../public/xy_visualization/to_expression.ts | 16 ++++ .../lens/public/xy_visualization/types.ts | 54 +++++++++++++ .../xy_visualization/xy_config_panel.tsx | 25 ++++++ .../xy_visualization/xy_suggestions.test.ts | 5 ++ .../public/xy_visualization/xy_suggestions.ts | 5 ++ 13 files changed, 354 insertions(+), 9 deletions(-) diff --git a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap index 26fe4dc72921d..54bb3efd75b39 100644 --- a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap +++ b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/expression.test.tsx.snap @@ -51,6 +51,7 @@ exports[`xy_expression XYChart component it renders area 1`] = ` "visible": true, }, "tickLabel": Object { + "rotation": 0, "visible": true, }, } @@ -81,6 +82,7 @@ exports[`xy_expression XYChart component it renders area 1`] = ` "visible": true, }, "tickLabel": Object { + "rotation": -90, "visible": false, }, } @@ -266,6 +268,7 @@ exports[`xy_expression XYChart component it renders bar 1`] = ` "visible": true, }, "tickLabel": Object { + "rotation": 0, "visible": true, }, } @@ -296,6 +299,7 @@ exports[`xy_expression XYChart component it renders bar 1`] = ` "visible": true, }, "tickLabel": Object { + "rotation": -90, "visible": false, }, } @@ -493,6 +497,7 @@ exports[`xy_expression XYChart component it renders horizontal bar 1`] = ` "visible": true, }, "tickLabel": Object { + "rotation": 0, "visible": true, }, } @@ -523,6 +528,7 @@ exports[`xy_expression XYChart component it renders horizontal bar 1`] = ` "visible": true, }, "tickLabel": Object { + "rotation": -90, "visible": false, }, } @@ -720,6 +726,7 @@ exports[`xy_expression XYChart component it renders line 1`] = ` "visible": true, }, "tickLabel": Object { + "rotation": 0, "visible": true, }, } @@ -750,6 +757,7 @@ exports[`xy_expression XYChart component it renders line 1`] = ` "visible": true, }, "tickLabel": Object { + "rotation": -90, "visible": false, }, } @@ -935,6 +943,7 @@ exports[`xy_expression XYChart component it renders stacked area 1`] = ` "visible": true, }, "tickLabel": Object { + "rotation": 0, "visible": true, }, } @@ -965,6 +974,7 @@ exports[`xy_expression XYChart component it renders stacked area 1`] = ` "visible": true, }, "tickLabel": Object { + "rotation": -90, "visible": false, }, } @@ -1158,6 +1168,7 @@ exports[`xy_expression XYChart component it renders stacked bar 1`] = ` "visible": true, }, "tickLabel": Object { + "rotation": 0, "visible": true, }, } @@ -1188,6 +1199,7 @@ exports[`xy_expression XYChart component it renders stacked bar 1`] = ` "visible": true, }, "tickLabel": Object { + "rotation": -90, "visible": false, }, } @@ -1393,6 +1405,7 @@ exports[`xy_expression XYChart component it renders stacked horizontal bar 1`] = "visible": true, }, "tickLabel": Object { + "rotation": 0, "visible": true, }, } @@ -1423,6 +1436,7 @@ exports[`xy_expression XYChart component it renders stacked horizontal bar 1`] = "visible": true, }, "tickLabel": Object { + "rotation": -90, "visible": false, }, } diff --git a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap index bcf54c6696ee0..3bd0e9354c158 100644 --- a/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap +++ b/x-pack/plugins/lens/public/xy_visualization/__snapshots__/to_expression.test.ts.snap @@ -64,6 +64,28 @@ Object { "hideEndzones": Array [ true, ], + "labelsOrientation": Array [ + Object { + "chain": Array [ + Object { + "arguments": Object { + "x": Array [ + 0, + ], + "yLeft": Array [ + -90, + ], + "yRight": Array [ + -45, + ], + }, + "function": "lens_xy_labelsOrientationConfig", + "type": "function", + }, + ], + "type": "expression", + }, + ], "layers": Array [ Object { "chain": Array [ diff --git a/x-pack/plugins/lens/public/xy_visualization/axis_settings_popover.test.tsx b/x-pack/plugins/lens/public/xy_visualization/axis_settings_popover.test.tsx index 2e5fdf8493e24..11dc6efad01e0 100644 --- a/x-pack/plugins/lens/public/xy_visualization/axis_settings_popover.test.tsx +++ b/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,21 @@ describe('Axes Settings', () => { ); }); + it('has selected the horizontal option on the orientation group', () => { + const component = shallow(); + 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(); + component + .find('[data-test-subj="lnsXY_axisOrientation_groups"]') + .simulate('change', 'xy_axis_orientation_angled'); + expect(props.setOrientation).toHaveBeenCalled(); + }); + it('hides the endzone visibility flag if no setter is passed in', () => { const component = shallow(); expect(component.find('[data-test-subj="lnsshowEndzones"]').length).toBe(0); diff --git a/x-pack/plugins/lens/public/xy_visualization/axis_settings_popover.tsx b/x-pack/plugins/lens/public/xy_visualization/axis_settings_popover.tsx index a0d1dae2145d5..a2d65e92ebcdc 100644 --- a/x-pack/plugins/lens/public/xy_visualization/axis_settings_popover.tsx +++ b/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 + toggleGridlinesVisibility(axis)} + checked={areGridlinesVisible} + /> + toggleTickLabelsVisibility(axis)} checked={areTickLabelsVisible} /> - - + toggleGridlinesVisibility(axis)} - checked={areGridlinesVisible} - /> + > + value === orientation)!.id} + onChange={(optionId) => { + const newOrientation = axisOrientationOptions.find(({ id }) => id === optionId)!.value; + setOrientation(axis, newOrientation); + }} + /> + {setEndzoneVisibility && ( <> diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx index b018e62f1fd8f..e2066584f66b6 100644 --- a/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/expression.test.tsx @@ -42,6 +42,8 @@ import { AxesSettingsConfig, tickLabelsConfig, gridlinesConfig, + labelsOrientationConfig, + LabelsOrientationConfig, } from './types'; import { createMockExecutionContext } from '../../../../../src/plugins/expressions/common/mocks'; import { mountWithIntl } from '@kbn/test/jest'; @@ -287,6 +289,12 @@ const createArgsWithLayers = (layers: LayerArgs[] = [sampleLayer]): XYArgs => ({ yLeft: false, yRight: false, }, + labelsOrientation: { + type: 'lens_xy_labelsOrientationConfig', + x: 0, + yLeft: -90, + yRight: -45, + }, yLeftExtent: { mode: 'full', type: 'lens_xy_axisExtentConfig', @@ -371,6 +379,21 @@ describe('xy_expression', () => { }); }); + test('labelsOrientationConfig produces the correct arguments', () => { + const args: LabelsOrientationConfig = { + x: 0, + yLeft: -90, + yRight: -45, + }; + + const result = labelsOrientationConfig.fn(null, args, createMockExecutionContext()); + + expect(result).toEqual({ + type: 'lens_xy_labelsOrientationConfig', + ...args, + }); + }); + test('gridlinesConfig produces the correct arguments', () => { const args: AxesSettingsConfig = { x: true, @@ -1945,6 +1968,27 @@ describe('xy_expression', () => { }); }); + test('it should set the tickLabel orientation on the x axis', () => { + const { data, args } = sampleArgs(); + + args.labelsOrientation = { + x: -45, + yLeft: 0, + yRight: -90, + type: 'lens_xy_labelsOrientationConfig', + }; + + const instance = shallow(); + + const axisStyle = instance.find(Axis).first().prop('style'); + + expect(axisStyle).toMatchObject({ + tickLabel: { + rotation: -45, + }, + }); + }); + test('it should set the tickLabel visibility on the y axis if the tick labels is hidden', () => { const { data, args } = sampleArgs(); @@ -1966,6 +2010,27 @@ describe('xy_expression', () => { }); }); + test('it should set the tickLabel orientation on the y axis', () => { + const { data, args } = sampleArgs(); + + args.labelsOrientation = { + x: -45, + yLeft: -90, + yRight: -90, + type: 'lens_xy_labelsOrientationConfig', + }; + + const instance = shallow(); + + const axisStyle = instance.find(Axis).at(1).prop('style'); + + expect(axisStyle).toMatchObject({ + tickLabel: { + rotation: -90, + }, + }); + }); + test('it should set the tickLabel visibility on the x axis if the tick labels is shown', () => { const { data, args } = sampleArgs(); @@ -2057,6 +2122,12 @@ describe('xy_expression', () => { yLeft: false, yRight: false, }, + labelsOrientation: { + type: 'lens_xy_labelsOrientationConfig', + x: 0, + yLeft: 0, + yRight: 0, + }, yLeftExtent: { mode: 'full', type: 'lens_xy_axisExtentConfig', @@ -2139,6 +2210,12 @@ describe('xy_expression', () => { yLeft: false, yRight: false, }, + labelsOrientation: { + type: 'lens_xy_labelsOrientationConfig', + x: 0, + yLeft: 0, + yRight: 0, + }, yLeftExtent: { mode: 'full', type: 'lens_xy_axisExtentConfig', diff --git a/x-pack/plugins/lens/public/xy_visualization/expression.tsx b/x-pack/plugins/lens/public/xy_visualization/expression.tsx index 7c767cd1d1b04..b6487fa448314 100644 --- a/x-pack/plugins/lens/public/xy_visualization/expression.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/expression.tsx @@ -180,6 +180,12 @@ export const xyChart: ExpressionFunctionDefinition< defaultMessage: 'Show x and y axes gridlines', }), }, + labelsOrientation: { + types: ['lens_xy_labelsOrientationConfig'], + help: i18n.translate('xpack.lens.xyChart.labelsOrientation.help', { + defaultMessage: 'Defines the orientation of x and y axes', + }), + }, axisTitlesVisibilitySettings: { types: ['lens_xy_axisTitlesVisibilityConfig'], help: i18n.translate('xpack.lens.xyChart.axisTitlesSettings.help', { @@ -425,6 +431,12 @@ export function XYChart({ yRight: true, }; + const labelsOrientation = args.labelsOrientation || { + x: 0, + yLeft: 0, + yRight: 0, + }; + const filteredBarLayers = filteredLayers.filter((layer) => layer.seriesType.includes('bar')); const chartHasMoreThanOneBarSeries = @@ -466,6 +478,10 @@ export function XYChart({ groupId === 'right' ? tickLabelsVisibilitySettings?.yRight : tickLabelsVisibilitySettings?.yLeft, + rotation: + groupId === 'right' + ? args.labelsOrientation?.yRight || 0 + : args.labelsOrientation?.yLeft || 0, }, axisTitle: { visible: @@ -664,6 +680,7 @@ export function XYChart({ style={{ tickLabel: { visible: tickLabelsVisibilitySettings?.x, + rotation: labelsOrientation?.x, }, axisTitle: { visible: axisTitlesVisibilitySettings.x, diff --git a/x-pack/plugins/lens/public/xy_visualization/index.ts b/x-pack/plugins/lens/public/xy_visualization/index.ts index f29d0f9280246..6263d941688a7 100644 --- a/x-pack/plugins/lens/public/xy_visualization/index.ts +++ b/x-pack/plugins/lens/public/xy_visualization/index.ts @@ -34,6 +34,7 @@ export class XyVisualization { gridlinesConfig, axisTitlesVisibilityConfig, axisExtentConfig, + labelsOrientationConfig, layerConfig, xyChart, getXyChartRenderer, @@ -45,6 +46,7 @@ export class XyVisualization { expressions.registerFunction(() => yAxisConfig); expressions.registerFunction(() => tickLabelsConfig); expressions.registerFunction(() => axisExtentConfig); + expressions.registerFunction(() => labelsOrientationConfig); expressions.registerFunction(() => gridlinesConfig); expressions.registerFunction(() => axisTitlesVisibilityConfig); expressions.registerFunction(() => layerConfig); diff --git a/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts b/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts index a7270bdf8f331..f43b633f4a716 100644 --- a/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts +++ b/x-pack/plugins/lens/public/xy_visualization/to_expression.test.ts @@ -50,6 +50,11 @@ describe('#toExpression', () => { preferredSeriesType: 'bar', fittingFunction: 'Carry', tickLabelsVisibilitySettings: { x: false, yLeft: true, yRight: true }, + labelsOrientation: { + x: 0, + yLeft: -90, + yRight: -45, + }, gridlinesVisibilitySettings: { x: false, yLeft: true, yRight: true }, hideEndzones: true, yRightExtent: { @@ -229,6 +234,31 @@ describe('#toExpression', () => { }); }); + it('should default the tick labels orientation settings to 0', () => { + const expression = xyVisualization.toExpression( + { + legend: { position: Position.Bottom, isVisible: true }, + valueLabels: 'hide', + preferredSeriesType: 'bar', + layers: [ + { + layerId: 'first', + seriesType: 'area', + splitAccessor: 'd', + xAccessor: 'a', + accessors: ['b', 'c'], + }, + ], + }, + frame.datasourceLayers + ) as Ast; + expect((expression.chain[0].arguments.labelsOrientation[0] as Ast).chain[0].arguments).toEqual({ + x: [0], + yLeft: [0], + yRight: [0], + }); + }); + it('should default the gridlines visibility settings to true', () => { const expression = xyVisualization.toExpression( { diff --git a/x-pack/plugins/lens/public/xy_visualization/to_expression.ts b/x-pack/plugins/lens/public/xy_visualization/to_expression.ts index c89a5e81e35d0..b2ecdc5179ad4 100644 --- a/x-pack/plugins/lens/public/xy_visualization/to_expression.ts +++ b/x-pack/plugins/lens/public/xy_visualization/to_expression.ts @@ -254,6 +254,22 @@ export const buildExpression = ( ], }, ], + labelsOrientation: [ + { + type: 'expression', + chain: [ + { + type: 'function', + function: 'lens_xy_labelsOrientationConfig', + arguments: { + x: [state?.labelsOrientation?.x ?? 0], + yLeft: [state?.labelsOrientation?.yLeft ?? 0], + yRight: [state?.labelsOrientation?.yRight ?? 0], + }, + }, + ], + }, + ], valueLabels: [state?.valueLabels || 'hide'], hideEndzones: [state?.hideEndzones || false], valuesInLegend: [state?.valuesInLegend || false], diff --git a/x-pack/plugins/lens/public/xy_visualization/types.ts b/x-pack/plugins/lens/public/xy_visualization/types.ts index 609622186af20..06192b236dee5 100644 --- a/x-pack/plugins/lens/public/xy_visualization/types.ts +++ b/x-pack/plugins/lens/public/xy_visualization/types.ts @@ -171,6 +171,58 @@ export const tickLabelsConfig: ExpressionFunctionDefinition< }, }; +export interface LabelsOrientationConfig { + x: number; + yLeft: number; + yRight: number; +} + +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, + }; + }, +}; + type GridlinesConfigResult = AxesSettingsConfig & { type: 'lens_xy_gridlinesConfig' }; export const gridlinesConfig: ExpressionFunctionDefinition< @@ -507,6 +559,7 @@ export interface XYArgs { }; tickLabelsVisibilitySettings?: AxesSettingsConfig & { type: 'lens_xy_tickLabelsConfig' }; gridlinesVisibilitySettings?: AxesSettingsConfig & { type: 'lens_xy_gridlinesConfig' }; + labelsOrientation?: LabelsOrientationConfig & { type: 'lens_xy_labelsOrientationConfig' }; curveType?: XYCurveType; fillOpacity?: number; hideEndzones?: boolean; @@ -530,6 +583,7 @@ export interface XYState { axisTitlesVisibilitySettings?: AxesSettingsConfig; tickLabelsVisibilitySettings?: AxesSettingsConfig; gridlinesVisibilitySettings?: AxesSettingsConfig; + labelsOrientation?: LabelsOrientationConfig; curveType?: XYCurveType; fillOpacity?: number; hideEndzones?: boolean; 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 index 3128527334553..d5d66cfda6029 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx @@ -223,6 +223,25 @@ export const XyToolbar = memo(function XyToolbar(props: VisualizationToolbarProp }); }; + const labelsOrientation = { + x: state?.labelsOrientation?.x ?? 0, + yLeft: state?.labelsOrientation?.yLeft ?? 0, + yRight: state?.labelsOrientation?.yRight ?? 0, + }; + + const onLabelsOrientationChange = (axis: AxesSettingsConfigKeys, orientation: number): void => { + const newLabelsOrientation = { + ...labelsOrientation, + ...{ + [axis]: orientation, + }, + }; + setState({ + ...state, + labelsOrientation: newLabelsOrientation, + }); + }; + const axisTitlesVisibilitySettings = { x: state?.axisTitlesVisibilitySettings?.x ?? true, yLeft: state?.axisTitlesVisibilitySettings?.yLeft ?? true, @@ -428,6 +447,8 @@ export const XyToolbar = memo(function XyToolbar(props: VisualizationToolbarProp isDisabled={ Object.keys(axisGroups.find((group) => group.groupId === 'left') || {}).length === 0 } + orientation={labelsOrientation.yLeft} + setOrientation={onLabelsOrientationChange} isAxisTitleVisible={axisTitlesVisibilitySettings.yLeft} toggleAxisTitleVisibility={onAxisTitlesVisibilitySettingsChange} extent={state?.yLeftExtent || { mode: 'full' }} @@ -446,6 +467,8 @@ export const XyToolbar = memo(function XyToolbar(props: VisualizationToolbarProp toggleTickLabelsVisibility={onTickLabelsVisibilitySettingsChange} areGridlinesVisible={gridlinesVisibilitySettings.x} toggleGridlinesVisibility={onGridlinesVisibilitySettingsChange} + orientation={labelsOrientation.x} + setOrientation={onLabelsOrientationChange} isAxisTitleVisible={axisTitlesVisibilitySettings.x} toggleAxisTitleVisibility={onAxisTitlesVisibilitySettingsChange} endzonesVisible={!state?.hideEndzones} @@ -480,6 +503,8 @@ export const XyToolbar = memo(function XyToolbar(props: VisualizationToolbarProp Object.keys(axisGroups.find((group) => group.groupId === 'right') || {}).length === 0 } + orientation={labelsOrientation.yRight} + setOrientation={onLabelsOrientationChange} hasPercentageAxis={hasPercentageAxis(axisGroups, 'right', state)} isAxisTitleVisible={axisTitlesVisibilitySettings.yRight} toggleAxisTitleVisibility={onAxisTitlesVisibilitySettingsChange} diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts index 277ca4467aeda..87165d64625e7 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts +++ b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.test.ts @@ -633,6 +633,7 @@ describe('xy_suggestions', () => { axisTitlesVisibilitySettings: { x: true, yLeft: true, yRight: true }, gridlinesVisibilitySettings: { x: true, yLeft: true, yRight: true }, tickLabelsVisibilitySettings: { x: true, yLeft: false, yRight: false }, + labelsOrientation: { x: 0, yLeft: -45, yRight: -45 }, preferredSeriesType: 'bar', layers: [ { @@ -675,6 +676,7 @@ describe('xy_suggestions', () => { axisTitlesVisibilitySettings: { x: true, yLeft: true, yRight: true }, gridlinesVisibilitySettings: { x: true, yLeft: true, yRight: true }, tickLabelsVisibilitySettings: { x: true, yLeft: false, yRight: false }, + labelsOrientation: { x: 0, yLeft: -45, yRight: -45 }, layers: [ { accessors: ['price', 'quantity'], @@ -790,6 +792,7 @@ describe('xy_suggestions', () => { axisTitlesVisibilitySettings: { x: true, yLeft: true, yRight: true }, gridlinesVisibilitySettings: { x: true, yLeft: true, yRight: true }, tickLabelsVisibilitySettings: { x: true, yLeft: false, yRight: false }, + labelsOrientation: { x: 0, yLeft: -45, yRight: -45 }, layers: [ { accessors: ['price', 'quantity'], @@ -833,6 +836,7 @@ describe('xy_suggestions', () => { axisTitlesVisibilitySettings: { x: true, yLeft: true, yRight: true }, gridlinesVisibilitySettings: { x: true, yLeft: true, yRight: true }, tickLabelsVisibilitySettings: { x: true, yLeft: false, yRight: false }, + labelsOrientation: { x: 0, yLeft: -45, yRight: -45 }, layers: [ { accessors: ['price'], @@ -877,6 +881,7 @@ describe('xy_suggestions', () => { axisTitlesVisibilitySettings: { x: true, yLeft: true, yRight: true }, gridlinesVisibilitySettings: { x: true, yLeft: true, yRight: true }, tickLabelsVisibilitySettings: { x: true, yLeft: false, yRight: false }, + labelsOrientation: { x: 0, yLeft: -45, yRight: -45 }, layers: [ { accessors: ['price', 'quantity'], diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts index a494d51f51681..511d9387e9c28 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts +++ b/x-pack/plugins/lens/public/xy_visualization/xy_suggestions.ts @@ -542,6 +542,11 @@ function buildSuggestion({ yLeft: true, yRight: true, }, + labelsOrientation: currentState?.labelsOrientation || { + x: 0, + yLeft: 0, + yRight: 0, + }, gridlinesVisibilitySettings: currentState?.gridlinesVisibilitySettings || { x: true, yLeft: true,