maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Stratoula Kalafateli 2020-09-17 18:38:43 +03:00 committed by GitHub
parent 4bf0932500
commit 3cf41674f5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 79 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
x-pack/plugins/lens/public/shared_components/toolbar_popover.tsx
View file

@ -56,6 +56,7 @@ export const ToolbarPopover: React.FunctionComponent<ToolbarPopoverProps> = ({
onClick={() => {
setOpen(!open);
}}
title={title}
hasArrow={false}
isDisabled={isDisabled}
groupPosition={groupPosition}

46
x-pack/plugins/lens/public/xy_visualization/xy_config_panel.test.tsx
View file

@ -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']);
});
});
});

45
x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx
View file

@ -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}`}