Skip to content

Commit

Permalink
Aligns the y axis settings on horizontal mode (elastic#77585) (elasti…
Browse files Browse the repository at this point in the history
  • Loading branch information
stratoula authored Sep 18, 2020
1 parent b484269 commit 1567be9
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 13 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ export const ToolbarPopover: React.FunctionComponent<ToolbarPopoverProps> = ({
onClick={() => {
setOpen(!open);
}}
title={title}
hasArrow={false}
isDisabled={isDisabled}
groupPosition={groupPosition}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 changes: 33 additions & 12 deletions x-pack/plugins/lens/public/xy_visualization/xy_config_panel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand Down Expand Up @@ -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
}
Expand Down Expand Up @@ -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) ||
Expand Down Expand Up @@ -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}`}
Expand Down

0 comments on commit 1567be9

Please sign in to comment.