diff --git a/package.json b/package.json index b5bd3086914b1..0285913f1ffa9 100644 --- a/package.json +++ b/package.json @@ -104,7 +104,7 @@ "@babel/core": "7.4.5", "@babel/polyfill": "7.4.4", "@babel/register": "7.4.4", - "@elastic/charts": "^7.2.1", + "@elastic/charts": "^8.1.0", "@elastic/datemath": "5.0.2", "@elastic/eui": "12.4.0", "@elastic/filesaver": "1.1.2", diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/config_panel_wrapper.tsx b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/config_panel_wrapper.tsx index 2bca6c670c770..eb269909a7d6a 100644 --- a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/config_panel_wrapper.tsx +++ b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/config_panel_wrapper.tsx @@ -83,15 +83,17 @@ export const ConfigPanelWrapper = memo(function ConfigPanelWrapper(props: Config }} /> {props.activeVisualizationId && props.visualizationState !== null && ( - +
+ +
)} ); diff --git a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/index.scss b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/index.scss index 455d47f47ea74..e64b357982ce9 100644 --- a/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/index.scss +++ b/x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/index.scss @@ -106,4 +106,8 @@ font-size: 1.2em; } +.lnsConfigPanelWrapper { + padding: $euiSize 0; +} + @import './suggestion_panel.scss'; \ No newline at end of file diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.tsx index 226a584504757..7fd888cc276a8 100644 --- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.tsx +++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/dimension_panel.tsx @@ -106,6 +106,7 @@ export const IndexPatternDimensionPanel = memo(function IndexPatternDimensionPan data-test-subj="indexPattern-dimensionPopover-remove" iconType="cross" iconSize="s" + size="s" color="danger" aria-label={i18n.translate('xpack.lens.indexPattern.removeColumnLabel', { defaultMessage: 'Remove', diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/popover_editor.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/popover_editor.tsx index de6259db5324c..31b73bef386f9 100644 --- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/popover_editor.tsx +++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/popover_editor.tsx @@ -161,6 +161,7 @@ export function PopoverEditor(props: PopoverEditorProps) { data-test-subj="indexPattern-configure-dimension" onClick={() => setPopoverOpen(true)} iconType="plusInCircle" + size="s" /> ) } diff --git a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern.tsx b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern.tsx index 87a85d37ec1d2..2bbb536231ab2 100644 --- a/x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern.tsx +++ b/x-pack/legacy/plugins/lens/public/indexpattern_plugin/indexpattern.tsx @@ -8,6 +8,7 @@ import _ from 'lodash'; import React from 'react'; import { render } from 'react-dom'; import { I18nProvider } from '@kbn/i18n/react'; +import { EuiText } from '@elastic/eui'; import { DatasourceDimensionPanelProps, DatasourceDataPanelProps, @@ -338,7 +339,9 @@ export function getIndexPatternDatasource({ renderLayerPanel: (domElement: Element, props: DatasourceLayerPanelProps) => { render( - {state.indexPatterns[state.layers[props.layerId].indexPatternId].title} + + {state.indexPatterns[state.layers[props.layerId].indexPatternId].title} + , domElement ); diff --git a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/__snapshots__/xy_expression.test.tsx.snap b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/__snapshots__/xy_expression.test.tsx.snap index 5eda0db6d6c40..004ecd3d6ee90 100644 --- a/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/__snapshots__/xy_expression.test.tsx.snap +++ b/x-pack/legacy/plugins/lens/public/xy_visualization_plugin/__snapshots__/xy_expression.test.tsx.snap @@ -47,12 +47,14 @@ exports[`xy_expression XYChart component it renders area 1`] = ` } stackAccessors={Array []} xAccessor="c" + xScaleType="linear" yAccessors={ Array [ "Label A", "Label B", ] } + yScaleType="linear" /> `; @@ -104,12 +106,14 @@ exports[`xy_expression XYChart component it renders bar 1`] = ` } stackAccessors={Array []} xAccessor="c" + xScaleType="linear" yAccessors={ Array [ "Label A", "Label B", ] } + yScaleType="linear" /> `; @@ -161,12 +165,14 @@ exports[`xy_expression XYChart component it renders horizontal bar 1`] = ` } stackAccessors={Array []} xAccessor="c" + xScaleType="linear" yAccessors={ Array [ "Label A", "Label B", ] } + yScaleType="linear" /> `; @@ -218,12 +224,14 @@ exports[`xy_expression XYChart component it renders line 1`] = ` } stackAccessors={Array []} xAccessor="c" + xScaleType="linear" yAccessors={ Array [ "Label A", "Label B", ] } + yScaleType="linear" /> `; @@ -279,12 +287,14 @@ exports[`xy_expression XYChart component it renders stacked area 1`] = ` ] } xAccessor="c" + xScaleType="linear" yAccessors={ Array [ "Label A", "Label B", ] } + yScaleType="linear" /> `; @@ -340,12 +350,14 @@ exports[`xy_expression XYChart component it renders stacked bar 1`] = ` ] } xAccessor="c" + xScaleType="linear" yAccessors={ Array [ "Label A", "Label B", ] } + yScaleType="linear" /> `; @@ -401,12 +413,14 @@ exports[`xy_expression XYChart component it renders stacked horizontal bar 1`] = ] } xAccessor="c" + xScaleType="linear" yAccessors={ Array [ "Label A", "Label B", ] } + yScaleType="linear" /> `; 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 8d4433421d8c9..e27bcbf9c1d6f 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,6 +5,9 @@ Object { "chain": Array [ Object { "arguments": Object { + "isHorizontal": Array [ + false, + ], "layers": Array [ Object { "chain": Array [ @@ -23,15 +26,9 @@ Object { "layerId": Array [ "first", ], - "position": Array [ - "bottom", - ], "seriesType": Array [ "area", ], - "showGridlines": Array [ - true, - ], "splitAccessor": Array [ "d", ], 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 cec80c9dbed96..2405b0a0d9ea1 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 @@ -71,6 +71,7 @@ export const buildExpression = ( arguments: { xTitle: [xTitle], yTitle: [yTitle], + isHorizontal: [state.isHorizontal], legend: [ { type: 'expression', @@ -109,8 +110,6 @@ export const buildExpression = ( layerId: [layer.layerId], title: [layer.title], - showGridlines: [layer.showGridlines], - position: [layer.position], hide: [Boolean(layer.hide)], xAccessor: [layer.xAccessor], 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 90579747e6862..c5650fde3ddac 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 @@ -51,8 +51,6 @@ export const legendConfig: ExpressionFunction< interface AxisConfig { title: string; - showGridlines: boolean; - position: Position; hide?: boolean; } @@ -61,15 +59,6 @@ const axisConfig: { [key in keyof AxisConfig]: ArgumentType } = types: ['string'], help: 'The axis title', }, - showGridlines: { - types: ['boolean'], - help: 'Show / hide axis grid lines.', - }, - position: { - types: ['string'], - options: [Position.Top, Position.Right, Position.Bottom, Position.Left], - help: 'The position of the axis', - }, hide: { types: ['boolean'], default: false, @@ -137,15 +126,7 @@ export const layerConfig: ExpressionFunction< }, seriesType: { types: ['string'], - options: [ - 'bar', - 'line', - 'area', - 'horizontal_bar', - 'bar_stacked', - 'area_stacked', - 'horizontal_bar_stacked', - ], + options: ['bar', 'line', 'area', 'bar_stacked', 'area_stacked'], help: 'The type of chart to display.', }, splitAccessor: { @@ -171,14 +152,7 @@ export const layerConfig: ExpressionFunction< }, }; -export type SeriesType = - | 'bar' - | 'horizontal_bar' - | 'line' - | 'area' - | 'bar_stacked' - | 'horizontal_bar_stacked' - | 'area_stacked'; +export type SeriesType = 'bar' | 'line' | 'area' | 'bar_stacked' | 'area_stacked'; export type LayerConfig = AxisConfig & { layerId: string; @@ -198,12 +172,14 @@ export interface XYArgs { yTitle: string; legend: LegendConfig; layers: LayerArgs[]; + isHorizontal: boolean; } // Persisted parts of the state export interface XYState { legend: LegendConfig; layers: LayerConfig[]; + isHorizontal: boolean; } export type State = XYState; 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 15fcec52cbfca..66f37db0ae080 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 from 'react'; +import React, { FormEvent } from 'react'; import { ReactWrapper } from 'enzyme'; import { mountWithIntl as mount } from 'test_utils/enzyme_helpers'; import { EuiButtonGroupProps } from '@elastic/eui'; @@ -15,6 +15,7 @@ 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'); @@ -26,14 +27,13 @@ describe('XYConfigPanel', () => { function testState(): State { return { legend: { isVisible: true, position: Position.Right }, + isHorizontal: false, layers: [ { seriesType: 'bar', layerId: 'first', splitAccessor: 'baz', xAccessor: 'foo', - position: Position.Bottom, - showGridlines: true, title: 'X', accessors: ['bar'], }, @@ -48,6 +48,15 @@ describe('XYConfigPanel', () => { .props(); } + function openComponentPopover(component: ReactWrapper, layerId: string) { + component + .find(`[data-test-subj="lnsXY_layer_${layerId}"]`) + .first() + .find(`[data-test-subj="lnsXY_layer_advanced"]`) + .first() + .simulate('click'); + } + beforeEach(() => { frame = createMockFramePublicAPI(); frame.datasourceLayers = { @@ -61,6 +70,36 @@ describe('XYConfigPanel', () => { test.skip('allows toggling the y axis gridlines', () => {}); test.skip('allows toggling the x axis gridlines', () => {}); + test('puts the horizontal toggle in a popover', () => { + const state = testState(); + const setState = jest.fn(); + const component = mount( + + ); + + component + .find(`[data-test-subj="lnsXY_chart_settings"]`) + .first() + .simulate('click'); + + act(() => { + component + .find('[data-test-subj="lnsXY_chart_horizontal"]') + .first() + .prop('onChange')!({} as FormEvent); + }); + + expect(setState).toHaveBeenCalledWith({ + ...state, + isHorizontal: true, + }); + }); + test('enables stacked chart types even when there is no split series', () => { const state = testState(); const component = mount( @@ -72,6 +111,8 @@ describe('XYConfigPanel', () => { /> ); + openComponentPopover(component, 'first'); + const options = component .find('[data-test-subj="lnsXY_seriesType"]') .first() @@ -81,10 +122,8 @@ describe('XYConfigPanel', () => { 'line', 'area', 'bar', - 'horizontal_bar', 'area_stacked', 'bar_stacked', - 'horizontal_bar_stacked', ]); expect(options.filter(({ isDisabled }) => isDisabled).map(({ id }) => id)).toEqual([]); @@ -171,6 +210,8 @@ describe('XYConfigPanel', () => { /> ); + openComponentPopover(component, 'first'); + const onRemove = component .find('[data-test-subj="lensXY_yDimensionPanel"]') .first() @@ -267,6 +308,8 @@ describe('XYConfigPanel', () => { /> ); + openComponentPopover(component, 'first'); + component .find('[data-test-subj="lnsXY_layer_remove"]') .first() 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 14d1523df6ec9..94ff2df9e123b 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 @@ -4,18 +4,22 @@ * you may not use this file except in compliance with the Elastic License. */ -import React from 'react'; +import React, { useState } from 'react'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; -import { Position } from '@elastic/charts'; import { EuiButton, EuiButtonGroup, + EuiFlexGroup, + EuiFlexItem, EuiForm, EuiFormRow, EuiPanel, + EuiPopover, IconType, EuiButtonIcon, + EuiIcon, + EuiSwitch, } from '@elastic/eui'; import { State, SeriesType, LayerConfig } from './types'; import { VisualizationProps } from '../types'; @@ -45,13 +49,6 @@ export const chartTypeIcons: Array<{ id: SeriesType; label: string; iconType: Ic }), iconType: 'visBarVertical', }, - { - id: 'horizontal_bar', - label: i18n.translate('xpack.lens.xyVisualization.horizontalBarChartLabel', { - defaultMessage: 'Horizontal Bar', - }), - iconType: 'visBarHorizontal', - }, { id: 'area_stacked', label: i18n.translate('xpack.lens.xyVisualization.stackedAreaChartLabel', { @@ -66,13 +63,6 @@ export const chartTypeIcons: Array<{ id: SeriesType; label: string; iconType: Ic }), iconType: 'visBarVertical', }, - { - id: 'horizontal_bar_stacked', - label: i18n.translate('xpack.lens.xyVisualization.stackedHorizontalBarChartLabel', { - defaultMessage: 'Stacked Horizontal Bar', - }), - iconType: 'visBarHorizontal', - }, ]; type UnwrapArray = T extends Array ? P : T; @@ -94,67 +84,157 @@ function newLayerState(layerId: string): LayerConfig { seriesType: 'bar_stacked', accessors: [generateId()], title: '', - showGridlines: false, - position: Position.Left, splitAccessor: generateId(), }; } +interface LocalState { + isChartOptionsOpen: boolean; + openLayerId: string | null; +} + export function XYConfigPanel(props: VisualizationProps) { const { state, setState, frame } = props; + const [localState, setLocalState] = useState({ + isChartOptionsOpen: false, + openLayerId: null, + } as LocalState); + return ( - {state.layers.map((layer, index) => ( - - - + + { + setLocalState({ ...localState, isChartOptionsOpen: false }); + }} + button={ + <> - { - frame.removeLayer(layer.layerId); - setState({ ...state, layers: state.layers.filter(l => l !== layer) }); + setLocalState({ ...localState, isChartOptionsOpen: true }); }} - aria-label={i18n.translate('xpack.lens.xyChart.removeLayer', { - defaultMessage: 'Remove layer', - })} - /> - + > + + - - - + <> + + { - setState( - updateLayer(state, { ...layer, seriesType: seriesType as SeriesType }, index) - ); + checked={state.isHorizontal} + onChange={() => { + setState({ + ...state, + isHorizontal: !state.isHorizontal, + }); }} - isIconOnly + data-test-subj="lnsXY_chart_horizontal" /> + + + + + {state.layers.map((layer, index) => ( + + + + + { + setLocalState({ ...localState, openLayerId: null }); + }} + button={ + { + setLocalState({ ...localState, openLayerId: layer.layerId }); + }} + /> + } + > + <> + + { + setState( + updateLayer( + state, + { ...layer, seriesType: seriesType as SeriesType }, + index + ) + ); + }} + isIconOnly + /> + + + { + frame.removeLayer(layer.layerId); + setState({ ...state, layers: state.layers.filter(l => l !== layer) }); + }} + > + + + + + + + + icon.id === layer.seriesType)!.iconType} + /> + + + + + + ) { { setState({ 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 aaa748cf0bb12..b21b3229efd57 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 @@ -4,7 +4,7 @@ * you may not use this file except in compliance with the Elastic License. */ -import { AreaSeries, BarSeries, Position, LineSeries, Settings } from '@elastic/charts'; +import { AreaSeries, BarSeries, Position, LineSeries, Settings, ScaleType } from '@elastic/charts'; import { xyChart, XYChart } from './xy_expression'; import { LensMultiTable } from '../types'; import React from 'react'; @@ -26,6 +26,7 @@ function sampleArgs() { const args: XYArgs = { xTitle: '', yTitle: '', + isHorizontal: false, legend: { isVisible: false, position: Position.Top, @@ -36,8 +37,6 @@ function sampleArgs() { seriesType: 'line', xAccessor: 'c', accessors: ['a', 'b'], - position: Position.Left, - showGridlines: false, title: 'A and B', splitAccessor: 'd', columnToLabel: '{"a": "Label A", "b": "Label B", "d": "Label D"}', @@ -68,8 +67,6 @@ describe('xy_expression', () => { seriesType: 'line', xAccessor: 'c', accessors: ['a', 'b'], - position: Position.Left, - showGridlines: false, title: 'A and B', splitAccessor: 'd', }; @@ -136,11 +133,12 @@ describe('xy_expression', () => { const component = shallow( ); expect(component).toMatchSnapshot(); expect(component.find(BarSeries)).toHaveLength(1); + expect(component.find(Settings).prop('rotation')).toEqual(90); }); test('it renders stacked bar', () => { @@ -174,7 +172,11 @@ describe('xy_expression', () => { const component = shallow( ); expect(component).toMatchSnapshot(); @@ -199,5 +201,30 @@ describe('xy_expression', () => { const component = shallow(); expect(component.find(LineSeries).prop('yAccessors')).toEqual(['Label A', 'Label B']); }); + + test('it indicates a linear scale for a numeric X axis', () => { + const { data, args } = sampleArgs(); + + const component = shallow(); + expect(component.find(LineSeries).prop('xScaleType')).toEqual(ScaleType.Linear); + }); + + test('it indicates an ordinal scale for a string X axis', () => { + const { args } = sampleArgs(); + + const data: LensMultiTable = { + type: 'lens_multitable', + tables: { + first: { + type: 'kibana_datatable', + columns: [{ id: 'a', name: 'a' }, { id: 'b', name: 'b' }, { id: 'c', name: 'c' }], + rows: [{ a: 1, b: 2, c: 'Hello' }, { a: 6, b: 5, c: 'World' }], + }, + }, + }; + + const component = shallow(); + expect(component.find(LineSeries).prop('xScaleType')).toEqual(ScaleType.Ordinal); + }); }); }); 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 2e6b00d3ec506..de122bcb0dd24 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 @@ -16,6 +16,7 @@ import { AreaSeries, BarSeries, Position, + ScaleType, } from '@elastic/charts'; import { ExpressionFunction } from 'src/legacy/core_plugins/interpreter/types'; import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiText, IconType } from '@elastic/eui'; @@ -58,6 +59,10 @@ 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'], @@ -96,7 +101,7 @@ function getIconForSeriesType(seriesType: SeriesType): IconType { } export function XYChart({ data, args }: XYChartProps) { - const { legend, layers } = args; + const { legend, layers, isHorizontal } = args; if (Object.values(data.tables).every(table => table.rows.length === 0)) { const icon: IconType = layers.length > 0 ? getIconForSeriesType(layers[0].seriesType) : 'bar'; @@ -123,7 +128,7 @@ export function XYChart({ data, args }: XYChartProps) { showLegend={legend.isVisible} legendPosition={legend.position} showLegendDisplayValue={false} - rotation={layers.some(({ seriesType }) => seriesType.includes('horizontal')) ? 90 : 0} + rotation={isHorizontal ? 90 : 0} /> @@ -176,14 +181,14 @@ export function XYChart({ data, args }: XYChartProps) { xAccessor, yAccessors, data: rows, + xScaleType: + typeof rows[0][xAccessor] === 'number' ? ScaleType.Linear : ScaleType.Ordinal, + yScaleType: ScaleType.Linear, }; return seriesType === 'line' ? ( - ) : seriesType === 'bar' || - seriesType === 'bar_stacked' || - seriesType === 'horizontal_bar' || - seriesType === 'horizontal_bar_stacked' ? ( + ) : seriesType === 'bar' || seriesType === 'bar_stacked' ? ( ) : ( 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 eeffcfd0036fe..54015633baeac 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 @@ -102,6 +102,7 @@ function getSuggestion( const preposition = isDate ? 'over' : 'of'; const title = `${yTitle} ${preposition} ${xTitle}`; const state: State = { + isHorizontal: false, legend: currentState ? currentState.legend : { isVisible: true, position: Position.Right }, layers: [ ...(currentState ? currentState.layers.filter(layer => layer.layerId !== layerId) : []), @@ -111,8 +112,6 @@ function getSuggestion( seriesType: splitBy && isDate ? 'line' : 'bar', splitAccessor: splitBy && isDate ? splitBy.columnId : generateId(), accessors: yValues.map(col => col.columnId), - position: Position.Left, - showGridlines: false, title: yTitle, }, ], 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 060f645717ee4..d8854764ff898 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 @@ -16,14 +16,13 @@ jest.mock('../id_generator'); function exampleState(): State { return { + isHorizontal: false, legend: { position: Position.Bottom, isVisible: true }, layers: [ { layerId: 'first', seriesType: 'area', splitAccessor: 'd', - position: Position.Bottom, - showGridlines: true, title: 'Baz', xAccessor: 'a', accessors: ['b', 'c'], @@ -49,6 +48,7 @@ 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 35825dbc228db..437c993a5dae4 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 @@ -22,6 +22,7 @@ export const xyVisualization: Visualization = { return ( state || { title: 'Empty XY Chart', + isHorizontal: false, legend: { isVisible: true, position: Position.Right }, layers: [ { diff --git a/yarn.lock b/yarn.lock index 3f81e8c25633c..0ceda39ec3688 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1584,10 +1584,10 @@ debug "^3.1.0" lodash.once "^4.1.1" -"@elastic/charts@^7.2.1": - version "7.2.1" - resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-7.2.1.tgz#75e6ed23ebb4014ea1df8ee232905352525ddfca" - integrity sha512-cRvuRkZkMIYFjEJ3igPb3Uqv+aYJnoC+ZYkPdoCHHoiw4Dlwdl3xQVuzJECWoE1oZDcFq/MKjOFFTtFDjm57Ug== +"@elastic/charts@^8.1.0": + version "8.1.1" + resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-8.1.1.tgz#5b5897cf79aa384ce8bab6f14a7ea8c1f4095077" + integrity sha512-XjypIoWWtdJM3uHQydbEz5JkbXQ34nOMCQzry1p3t+J00o0U03qAyii1/TUn+Zohriis8ta7wnWD8nuwgfI3Iw== dependencies: "@types/d3-shape" "^1.3.1" "@types/luxon" "^1.11.1"