diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/__snapshots__/xy_visualization.test.ts.snap b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/__snapshots__/xy_visualization.test.ts.snap
index 12902f548e45b..76af8328673ad 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/__snapshots__/xy_visualization.test.ts.snap
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/__snapshots__/xy_visualization.test.ts.snap
@@ -5,9 +5,6 @@ Object {
"chain": Array [
Object {
"arguments": Object {
- "isHorizontal": Array [
- false,
- ],
"layers": Array [
Object {
"chain": Array [
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/state_helpers.ts b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/state_helpers.ts
new file mode 100644
index 0000000000000..eb7fd688bab5a
--- /dev/null
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/state_helpers.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
+import { SeriesType, visualizationTypes } from './types';
+
+export function isHorizontalSeries(seriesType: SeriesType) {
+ return seriesType === 'bar_horizontal' || seriesType === 'bar_horizontal_stacked';
+}
+
+export function isHorizontalChart(layers: Array<{ seriesType: SeriesType }>) {
+ return layers.every(l => isHorizontalSeries(l.seriesType));
+}
+
+export function getIconForSeries(type: SeriesType): EuiIconType {
+ const definition = visualizationTypes.find(t => t.id === type);
+
+ if (!definition) {
+ throw new Error(`Unknown series type ${type}`);
+ }
+
+ return (definition.icon as EuiIconType) || 'empty';
+}
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/to_expression.ts b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/to_expression.ts
index ff5f7eb08f2db..f0e932d14f281 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/to_expression.ts
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/to_expression.ts
@@ -131,7 +131,6 @@ export const buildExpression = (
arguments: {
xTitle: [xTitle],
yTitle: [yTitle],
- isHorizontal: [state.isHorizontal],
legend: [
{
type: 'expression',
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/types.ts b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/types.ts
index 742cc36be4ea6..28f72f60c3a2d 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/types.ts
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/types.ts
@@ -175,7 +175,14 @@ export const layerConfig: ExpressionFunction<
},
};
-export type SeriesType = 'bar' | 'line' | 'area' | 'bar_stacked' | 'area_stacked';
+export type SeriesType =
+ | 'bar'
+ | 'bar_horizontal'
+ | 'line'
+ | 'area'
+ | 'bar_stacked'
+ | 'bar_horizontal_stacked'
+ | 'area_stacked';
export interface LayerConfig {
hide?: boolean;
@@ -199,7 +206,6 @@ export interface XYArgs {
yTitle: string;
legend: LegendConfig;
layers: LayerArgs[];
- isHorizontal: boolean;
}
// Persisted parts of the state
@@ -207,7 +213,6 @@ export interface XYState {
preferredSeriesType: SeriesType;
legend: LegendConfig;
layers: LayerConfig[];
- isHorizontal: boolean;
}
export type State = XYState;
@@ -221,13 +226,27 @@ export const visualizationTypes: VisualizationType[] = [
defaultMessage: 'Bar',
}),
},
+ {
+ id: 'bar_horizontal',
+ icon: 'visBarHorizontal',
+ label: i18n.translate('xpack.lens.xyVisualization.barHorizontalLabel', {
+ defaultMessage: 'Horizontal Bar',
+ }),
+ },
{
id: 'bar_stacked',
icon: 'visBarVertical',
- label: i18n.translate('xpack.lens.xyVisualization.stackedBarLabel', {
+ label: i18n.translate('xpack.lens.xyVisualization.stackedBar', {
defaultMessage: 'Stacked Bar',
}),
},
+ {
+ id: 'bar_horizontal_stacked',
+ icon: 'visBarHorizontal',
+ label: i18n.translate('xpack.lens.xyVisualization.stackedBarHorizontalLabel', {
+ defaultMessage: 'Stacked Horizontal Bar',
+ }),
+ },
{
id: 'line',
icon: 'visLine',
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_config_panel.test.tsx b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_config_panel.test.tsx
index ad08b8949f3b9..5cdf1031a22b0 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_config_panel.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_config_panel.test.tsx
@@ -4,7 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
-import React, { FormEvent } from 'react';
+import React from 'react';
import { ReactWrapper } from 'enzyme';
import { mountWithIntl as mount } from 'test_utils/enzyme_helpers';
import { EuiButtonGroupProps } from '@elastic/eui';
@@ -15,7 +15,6 @@ import { Position } from '@elastic/charts';
import { NativeRendererProps } from '../native_renderer';
import { generateId } from '../id_generator';
import { createMockFramePublicAPI, createMockDatasource } from '../editor_frame_plugin/mocks';
-import { act } from 'react-test-renderer';
jest.mock('../id_generator');
@@ -28,7 +27,6 @@ describe('XYConfigPanel', () => {
return {
legend: { isVisible: true, position: Position.Right },
preferredSeriesType: 'bar',
- isHorizontal: false,
layers: [
{
seriesType: 'bar',
@@ -64,50 +62,48 @@ describe('XYConfigPanel', () => {
};
});
- test.skip('toggles axis position when going from horizontal bar to any other type', () => {});
test.skip('allows toggling of legend visibility', () => {});
test.skip('allows changing legend position', () => {});
test.skip('allows toggling the y axis gridlines', () => {});
test.skip('allows toggling the x axis gridlines', () => {});
- test('puts the horizontal toggle in a popover', () => {
+ test('enables stacked chart types even when there is no split series', () => {
const state = testState();
- const setState = jest.fn();
const component = mount(
);
- component
- .find(`[data-test-subj="lnsXY_chart_settings"]`)
+ openComponentPopover(component, 'first');
+
+ const options = component
+ .find('[data-test-subj="lnsXY_seriesType"]')
.first()
- .simulate('click');
+ .prop('options') as EuiButtonGroupProps['options'];
- act(() => {
- component
- .find('[data-test-subj="lnsXY_chart_horizontal"]')
- .first()
- .prop('onChange')!({} as FormEvent);
- });
+ expect(options!.map(({ id }) => id)).toEqual([
+ 'bar',
+ 'bar_stacked',
+ 'line',
+ 'area',
+ 'area_stacked',
+ ]);
- expect(setState).toHaveBeenCalledWith({
- ...state,
- isHorizontal: true,
- });
+ expect(options!.filter(({ isDisabled }) => isDisabled).map(({ id }) => id)).toEqual([]);
});
- test('enables stacked chart types even when there is no split series', () => {
+ test('shows only horizontal bar options when in horizontal mode', () => {
const state = testState();
const component = mount(
);
@@ -118,14 +114,7 @@ describe('XYConfigPanel', () => {
.first()
.prop('options') as EuiButtonGroupProps['options'];
- expect(options!.map(({ id }) => id)).toEqual([
- 'bar',
- 'bar_stacked',
- 'line',
- 'area',
- 'area_stacked',
- ]);
-
+ expect(options!.map(({ id }) => id)).toEqual(['bar_horizontal', 'bar_horizontal_stacked']);
expect(options!.filter(({ isDisabled }) => isDisabled).map(({ id }) => id)).toEqual([]);
});
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_config_panel.tsx b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_config_panel.tsx
index 7170a41a16880..e268c099ddc24 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_config_panel.tsx
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_config_panel.tsx
@@ -17,7 +17,6 @@ import {
EuiPanel,
EuiButtonIcon,
EuiPopover,
- EuiSwitch,
EuiSpacer,
EuiButtonEmpty,
EuiPopoverFooter,
@@ -27,6 +26,7 @@ import { VisualizationProps, OperationMetadata } from '../types';
import { NativeRenderer } from '../native_renderer';
import { MultiColumnEditor } from '../multi_column_editor';
import { generateId } from '../id_generator';
+import { isHorizontalChart, isHorizontalSeries } from './state_helpers';
const isNumericMetric = (op: OperationMetadata) => !op.isBucketed && op.dataType === 'number';
const isBucketed = (op: OperationMetadata) => op.isBucketed;
@@ -55,10 +55,12 @@ function newLayerState(seriesType: SeriesType, layerId: string): LayerConfig {
function LayerSettings({
layer,
+ horizontalOnly,
setSeriesType,
removeLayer,
}: {
layer: LayerConfig;
+ horizontalOnly: boolean;
setSeriesType: (seriesType: SeriesType) => void;
removeLayer: () => void;
}) {
@@ -96,10 +98,12 @@ function LayerSettings({
name="chartType"
className="eui-displayInlineBlock"
data-test-subj="lnsXY_seriesType"
- options={visualizationTypes.map(t => ({
- ...t,
- iconType: t.icon || 'empty',
- }))}
+ options={visualizationTypes
+ .filter(t => isHorizontalSeries(t.id as SeriesType) === horizontalOnly)
+ .map(t => ({
+ ...t,
+ iconType: t.icon || 'empty',
+ }))}
idSelected={layer.seriesType}
onChange={seriesType => setSeriesType(seriesType as SeriesType)}
isIconOnly
@@ -124,44 +128,10 @@ function LayerSettings({
export function XYConfigPanel(props: VisualizationProps) {
const { state, setState, frame } = props;
- const [isChartOptionsOpen, setIsChartOptionsOpen] = useState(false);
+ const horizontalOnly = isHorizontalChart(state.layers);
return (
- setIsChartOptionsOpen(false)}
- button={
- setIsChartOptionsOpen(!isChartOptionsOpen)}
- aria-label={i18n.translate('xpack.lens.xyChart.chartSettings', {
- defaultMessage: 'Chart Settings',
- })}
- title={i18n.translate('xpack.lens.xyChart.chartSettings', {
- defaultMessage: 'Chart Settings',
- })}
- />
- }
- >
- {
- setState({
- ...state,
- isHorizontal: !state.isHorizontal,
- });
- }}
- data-test-subj="lnsXY_chart_horizontal"
- />
-
-
{state.layers.map((layer, index) => (
) {
setState(updateLayer(state, { ...layer, seriesType }, index))
}
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_expression.test.tsx b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_expression.test.tsx
index 0ac286c7bb83c..8770ee5b5e1c9 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_expression.test.tsx
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_expression.test.tsx
@@ -35,7 +35,6 @@ function sampleArgs() {
const args: XYArgs = {
xTitle: '',
yTitle: '',
- isHorizontal: false,
legend: {
isVisible: false,
position: Position.Top,
@@ -161,7 +160,7 @@ describe('xy_expression', () => {
const component = shallow(
@@ -208,8 +207,7 @@ describe('xy_expression', () => {
data={data}
args={{
...args,
- isHorizontal: true,
- layers: [{ ...args.layers[0], seriesType: 'bar_stacked' }],
+ layers: [{ ...args.layers[0], seriesType: 'bar_horizontal_stacked' }],
}}
formatFactory={getFormatSpy}
timeZone="UTC"
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_expression.tsx b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_expression.tsx
index e559cdd514bc6..43452ff432767 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_expression.tsx
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_expression.tsx
@@ -27,6 +27,7 @@ import { IInterpreterRenderFunction } from '../../../../../../src/legacy/core_pl
import { LensMultiTable } from '../types';
import { XYArgs, SeriesType, visualizationTypes } from './types';
import { VisualizationContainer } from '../visualization_container';
+import { isHorizontalChart } from './state_helpers';
export interface XYChartProps {
data: LensMultiTable;
@@ -75,10 +76,6 @@ export const xyChart: ExpressionFunction<'lens_xy_chart', LensMultiTable, XYArgs
help: 'Layers of visual series',
multi: true,
},
- isHorizontal: {
- types: ['boolean'],
- help: 'Render horizontally',
- },
},
context: {
types: ['lens_multitable'],
@@ -140,7 +137,7 @@ export function XYChartReportable(props: XYChartRenderProps) {
}
export function XYChart({ data, args, formatFactory, timeZone }: XYChartRenderProps) {
- const { legend, layers, isHorizontal } = args;
+ const { legend, layers } = args;
if (Object.values(data.tables).every(table => table.rows.length === 0)) {
const icon: IconType = layers.length > 0 ? getIconForSeriesType(layers[0].seriesType) : 'bar';
@@ -176,18 +173,20 @@ export function XYChart({ data, args, formatFactory, timeZone }: XYChartRenderPr
}
}
+ const shouldRotate = isHorizontalChart(layers);
+
return (
- ) : seriesType === 'bar' || seriesType === 'bar_stacked' ? (
+ ) : seriesType === 'bar' ||
+ seriesType === 'bar_stacked' ||
+ seriesType === 'bar_horizontal' ||
+ seriesType === 'bar_horizontal_stacked' ? (
) : (
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_suggestions.test.ts b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_suggestions.test.ts
index ed44c74123316..a205fe433106a 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_suggestions.test.ts
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_suggestions.test.ts
@@ -199,7 +199,6 @@ describe('xy_suggestions', () => {
changeType: 'reduced',
},
state: {
- isHorizontal: false,
legend: { isVisible: true, position: 'bottom' },
preferredSeriesType: 'bar',
layers: [
@@ -235,7 +234,6 @@ describe('xy_suggestions', () => {
test('only makes a seriesType suggestion for unchanged table without split', () => {
(generateId as jest.Mock).mockReturnValueOnce('dummyCol');
const currentState: XYState = {
- isHorizontal: false,
legend: { isVisible: true, position: 'bottom' },
preferredSeriesType: 'bar',
layers: [
@@ -270,7 +268,6 @@ describe('xy_suggestions', () => {
test('suggests seriesType and stacking when there is a split', () => {
const currentState: XYState = {
- isHorizontal: false,
legend: { isVisible: true, position: 'bottom' },
preferredSeriesType: 'bar',
layers: [
@@ -311,7 +308,6 @@ describe('xy_suggestions', () => {
test('suggests a flipped chart for unchanged table and existing bar chart on ordinal x axis', () => {
(generateId as jest.Mock).mockReturnValueOnce('dummyCol');
const currentState: XYState = {
- isHorizontal: false,
legend: { isVisible: true, position: 'bottom' },
preferredSeriesType: 'bar',
layers: [
@@ -335,16 +331,13 @@ describe('xy_suggestions', () => {
});
expect(rest).toHaveLength(0);
- expect(suggestion.state).toEqual({
- ...currentState,
- isHorizontal: true,
- });
+ expect(suggestion.state.preferredSeriesType).toEqual('bar_horizontal');
+ expect(suggestion.state.layers.every(l => l.seriesType === 'bar_horizontal')).toBeTruthy();
expect(suggestion.title).toEqual('Flip');
});
test('suggests stacking for unchanged table that has a split', () => {
const currentState: XYState = {
- isHorizontal: false,
legend: { isVisible: true, position: 'bottom' },
preferredSeriesType: 'bar',
layers: [
@@ -379,7 +372,6 @@ describe('xy_suggestions', () => {
test('keeps column to dimension mappings on extended tables', () => {
const currentState: XYState = {
- isHorizontal: false,
legend: { isVisible: true, position: 'bottom' },
preferredSeriesType: 'bar',
layers: [
@@ -418,7 +410,6 @@ describe('xy_suggestions', () => {
test('overwrites column to dimension mappings if a date dimension is added', () => {
(generateId as jest.Mock).mockReturnValueOnce('dummyCol');
const currentState: XYState = {
- isHorizontal: false,
legend: { isVisible: true, position: 'bottom' },
preferredSeriesType: 'bar',
layers: [
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_suggestions.ts b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_suggestions.ts
index 2f28e20ebd274..7c7e9caddd31b 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_suggestions.ts
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_suggestions.ts
@@ -7,7 +7,6 @@
import { i18n } from '@kbn/i18n';
import { partition } from 'lodash';
import { Position } from '@elastic/charts';
-import { EuiIconType } from '@elastic/eui/src/components/icon/icon';
import {
SuggestionRequest,
VisualizationSuggestion,
@@ -17,6 +16,7 @@ import {
} from '../types';
import { State, SeriesType, XYState } from './types';
import { generateId } from '../id_generator';
+import { getIconForSeries } from './state_helpers';
const columnSortOrder = {
date: 0,
@@ -26,21 +26,6 @@ const columnSortOrder = {
number: 4,
};
-function getIconForSeries(type: SeriesType): EuiIconType {
- switch (type) {
- case 'area':
- case 'area_stacked':
- return 'visArea';
- case 'bar':
- case 'bar_stacked':
- return 'visBarVertical';
- case 'line':
- return 'visLine';
- default:
- throw new Error('unknown series type');
- }
-}
-
/**
* Generate suggestions for the xy chart.
*
@@ -163,10 +148,8 @@ function getSuggestionsForLayer(
): VisualizationSuggestion | Array> {
const title = getSuggestionTitle(yValues, xValue, tableLabel);
const seriesType: SeriesType = getSeriesType(currentState, layerId, xValue, changeType);
- const isHorizontal = currentState ? currentState.isHorizontal : false;
const options = {
- isHorizontal,
currentState,
seriesType,
layerId,
@@ -186,14 +169,18 @@ function getSuggestionsForLayer(
const sameStateSuggestions: Array> = [];
// if current state is using the same data, suggest same chart with different presentational configuration
-
if (seriesType !== 'line' && xValue.operation.scale === 'ordinal') {
// flip between horizontal/vertical for ordinal scales
sameStateSuggestions.push(
buildSuggestion({
...options,
title: i18n.translate('xpack.lens.xySuggestions.flipTitle', { defaultMessage: 'Flip' }),
- isHorizontal: !options.isHorizontal,
+ seriesType:
+ seriesType === 'bar_horizontal'
+ ? 'bar'
+ : seriesType === 'bar_horizontal_stacked'
+ ? 'bar_stacked'
+ : 'bar_horizontal',
})
);
} else {
@@ -328,7 +315,6 @@ function getSuggestionTitle(
}
function buildSuggestion({
- isHorizontal,
currentState,
seriesType,
layerId,
@@ -339,7 +325,6 @@ function buildSuggestion({
xValue,
}: {
currentState: XYState | undefined;
- isHorizontal: boolean;
seriesType: SeriesType;
title: string;
yValues: TableSuggestionColumn[];
@@ -358,7 +343,6 @@ function buildSuggestion({
};
const state: State = {
- isHorizontal,
legend: currentState ? currentState.legend : { isVisible: true, position: Position.Right },
preferredSeriesType: seriesType,
layers: [
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_visualization.test.ts b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_visualization.test.ts
index 8bc7b0c9116f7..5cd0791ae3da9 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_visualization.test.ts
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_visualization.test.ts
@@ -7,7 +7,7 @@
import { xyVisualization } from './xy_visualization';
import { Position } from '@elastic/charts';
import { Operation } from '../types';
-import { State } from './types';
+import { State, SeriesType } from './types';
import { createMockDatasource, createMockFramePublicAPI } from '../editor_frame_plugin/mocks';
import { generateId } from '../id_generator';
import { Ast } from '@kbn/interpreter/target/common';
@@ -16,7 +16,6 @@ jest.mock('../id_generator');
function exampleState(): State {
return {
- isHorizontal: false,
legend: { position: Position.Bottom, isVisible: true },
preferredSeriesType: 'bar',
layers: [
@@ -32,6 +31,51 @@ function exampleState(): State {
}
describe('xy_visualization', () => {
+ describe('getDescription', () => {
+ function mixedState(...types: SeriesType[]) {
+ const state = exampleState();
+ return {
+ ...state,
+ layers: types.map((t, i) => ({
+ ...state.layers[0],
+ layerId: `layer_${i}`,
+ seriesType: t,
+ })),
+ };
+ }
+
+ it('should show mixed xy chart when multilple series types', () => {
+ const desc = xyVisualization.getDescription(mixedState('bar', 'line'));
+
+ expect(desc.label).toEqual('Mixed XY Chart');
+ });
+
+ it('should show mixed horizontal bar chart when multiple horizontal bar types', () => {
+ const desc = xyVisualization.getDescription(
+ mixedState('bar_horizontal', 'bar_horizontal_stacked')
+ );
+
+ expect(desc.label).toEqual('Mixed Horizontal Bar Chart');
+ });
+
+ it('should show bar chart when bar only', () => {
+ const desc = xyVisualization.getDescription(mixedState('bar_horizontal', 'bar_horizontal'));
+
+ expect(desc.label).toEqual('Horizontal Bar Chart');
+ });
+
+ it('should show the chart description if not mixed', () => {
+ expect(xyVisualization.getDescription(mixedState('area')).label).toEqual('Area Chart');
+ expect(xyVisualization.getDescription(mixedState('line')).label).toEqual('Line Chart');
+ expect(xyVisualization.getDescription(mixedState('area_stacked')).label).toEqual(
+ 'Stacked Area Chart'
+ );
+ expect(xyVisualization.getDescription(mixedState('bar_horizontal_stacked')).label).toEqual(
+ 'Stacked Horizontal Bar Chart'
+ );
+ });
+ });
+
describe('#initialize', () => {
it('loads default state', () => {
(generateId as jest.Mock)
@@ -48,7 +92,6 @@ describe('xy_visualization', () => {
expect(initialState).toMatchInlineSnapshot(`
Object {
- "isHorizontal": false,
"layers": Array [
Object {
"accessors": Array [
diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_visualization.tsx b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_visualization.tsx
index 69cb93bb1903d..29c5e5d5e4297 100644
--- a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_visualization.tsx
+++ b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_visualization.tsx
@@ -16,6 +16,7 @@ import { Visualization } from '../types';
import { State, PersistableState, SeriesType, visualizationTypes } from './types';
import { toExpression, toPreviewExpression } from './to_expression';
import { generateId } from '../id_generator';
+import { isHorizontalChart } from './state_helpers';
const defaultIcon = 'visBarVertical';
const defaultSeriesType = 'bar_stacked';
@@ -25,7 +26,7 @@ function getDescription(state?: State) {
return {
icon: defaultIcon,
label: i18n.translate('xpack.lens.xyVisualization.xyLabel', {
- defaultMessage: 'XY Chart',
+ defaultMessage: 'XY',
}),
};
}
@@ -42,8 +43,12 @@ function getDescription(state?: State) {
label:
seriesTypes.length === 1
? visualizationType.label
+ : isHorizontalChart(state.layers)
+ ? i18n.translate('xpack.lens.xyVisualization.mixedBarHorizontalLabel', {
+ defaultMessage: 'Mixed Horizontal Bar',
+ })
: i18n.translate('xpack.lens.xyVisualization.mixedLabel', {
- defaultMessage: 'Mixed XY Chart',
+ defaultMessage: 'Mixed XY',
}),
};
}
@@ -55,9 +60,14 @@ export const xyVisualization: Visualization = {
getDescription(state) {
const { icon, label } = getDescription(state);
+ const chartLabel = i18n.translate('xpack.lens.xyVisualization.chartLabel', {
+ defaultMessage: '{label} Chart',
+ values: { label },
+ });
+
return {
icon: icon || defaultIcon,
- label,
+ label: chartLabel,
};
},
@@ -75,7 +85,6 @@ export const xyVisualization: Visualization = {
return (
state || {
title: 'Empty XY Chart',
- isHorizontal: false,
legend: { isVisible: true, position: Position.Right },
preferredSeriesType: defaultSeriesType,
layers: [
diff --git a/x-pack/test/functional/es_archives/lens/reporting/data.json.gz b/x-pack/test/functional/es_archives/lens/reporting/data.json.gz
index b59717330488a..93ceaf3d8f6f5 100644
Binary files a/x-pack/test/functional/es_archives/lens/reporting/data.json.gz and b/x-pack/test/functional/es_archives/lens/reporting/data.json.gz differ