From 3709de64d614533571da8e190e751c51f3484073 Mon Sep 17 00:00:00 2001 From: Joe Reuter Date: Wed, 22 Jul 2020 12:14:59 +0200 Subject: [PATCH] [Lens] Legend config (#70619) --- .../workspace_panel_wrapper.tsx | 2 +- .../pie_visualization/pie_visualization.tsx | 6 +- .../pie_visualization/register_expression.tsx | 6 + .../render_function.test.tsx | 7 + .../pie_visualization/render_function.tsx | 3 + .../pie_visualization/settings_widget.scss | 3 - .../pie_visualization/settings_widget.tsx | 230 -------------- .../public/pie_visualization/to_expression.ts | 1 + .../public/pie_visualization/toolbar.scss | 3 + .../lens/public/pie_visualization/toolbar.tsx | 281 ++++++++++++++++++ .../lens/public/pie_visualization/types.ts | 1 + .../__snapshots__/to_expression.test.ts.snap | 1 + .../public/xy_visualization/to_expression.ts | 3 + .../lens/public/xy_visualization/types.ts | 16 + .../xy_visualization/xy_config_panel.tsx | 94 ++++++ .../xy_visualization/xy_expression.test.tsx | 67 +++++ .../public/xy_visualization/xy_expression.tsx | 6 +- .../translations/translations/ja-JP.json | 6 +- .../translations/translations/zh-CN.json | 6 +- 19 files changed, 498 insertions(+), 244 deletions(-) delete mode 100644 x-pack/plugins/lens/public/pie_visualization/settings_widget.scss delete mode 100644 x-pack/plugins/lens/public/pie_visualization/settings_widget.tsx create mode 100644 x-pack/plugins/lens/public/pie_visualization/toolbar.scss create mode 100644 x-pack/plugins/lens/public/pie_visualization/toolbar.tsx diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx index f6e15002ca66..411488abce77 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx @@ -63,7 +63,7 @@ export function WorkspacePanelWrapper({ clearStagedPreview: false, }); }, - [dispatch] + [dispatch, activeVisualization] ); return ( <> diff --git a/x-pack/plugins/lens/public/pie_visualization/pie_visualization.tsx b/x-pack/plugins/lens/public/pie_visualization/pie_visualization.tsx index 4f0c081d8be0..369ab28293fb 100644 --- a/x-pack/plugins/lens/public/pie_visualization/pie_visualization.tsx +++ b/x-pack/plugins/lens/public/pie_visualization/pie_visualization.tsx @@ -13,7 +13,7 @@ import { toExpression, toPreviewExpression } from './to_expression'; import { LayerState, PieVisualizationState } from './types'; import { suggestions } from './suggestions'; import { CHART_NAMES, MAX_PIE_BUCKETS, MAX_TREEMAP_BUCKETS } from './constants'; -import { SettingsWidget } from './settings_widget'; +import { PieToolbar } from './toolbar'; function newLayerState(layerId: string): LayerState { return { @@ -204,10 +204,10 @@ export const pieVisualization: Visualization - + , domElement ); diff --git a/x-pack/plugins/lens/public/pie_visualization/register_expression.tsx b/x-pack/plugins/lens/public/pie_visualization/register_expression.tsx index cea84db8b279..89d93ab79233 100644 --- a/x-pack/plugins/lens/public/pie_visualization/register_expression.tsx +++ b/x-pack/plugins/lens/public/pie_visualization/register_expression.tsx @@ -7,6 +7,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import { i18n } from '@kbn/i18n'; +import { Position } from '@elastic/charts'; import { I18nProvider } from '@kbn/i18n/react'; import { IInterpreterRenderHandlers, @@ -73,6 +74,11 @@ export const pie: ExpressionFunctionDefinition< types: ['boolean'], help: '', }, + legendPosition: { + types: ['string'], + options: [Position.Top, Position.Right, Position.Bottom, Position.Left], + help: '', + }, percentDecimals: { types: ['number'], help: '', diff --git a/x-pack/plugins/lens/public/pie_visualization/render_function.test.tsx b/x-pack/plugins/lens/public/pie_visualization/render_function.test.tsx index cfbeb27efb3d..38ef44a2fef1 100644 --- a/x-pack/plugins/lens/public/pie_visualization/render_function.test.tsx +++ b/x-pack/plugins/lens/public/pie_visualization/render_function.test.tsx @@ -65,6 +65,13 @@ describe('PieVisualization component', () => { }; } + test('it shows legend on correct side', () => { + const component = shallow( + + ); + expect(component.find(Settings).prop('legendPosition')).toEqual('top'); + }); + test('it shows legend for 2 groups using default legendDisplay', () => { const component = shallow(); expect(component.find(Settings).prop('showLegend')).toEqual(true); diff --git a/x-pack/plugins/lens/public/pie_visualization/render_function.tsx b/x-pack/plugins/lens/public/pie_visualization/render_function.tsx index f349cc4dfd64..79986986b217 100644 --- a/x-pack/plugins/lens/public/pie_visualization/render_function.tsx +++ b/x-pack/plugins/lens/public/pie_visualization/render_function.tsx @@ -22,6 +22,7 @@ import { PartitionFillLabel, RecursivePartial, LayerValue, + Position, } from '@elastic/charts'; import { FormatFactory, LensFilterEvent } from '../types'; import { VisualizationContainer } from '../visualization_container'; @@ -55,6 +56,7 @@ export function PieComponent( numberDisplay, categoryDisplay, legendDisplay, + legendPosition, nestedLegend, percentDecimals, hideLabels, @@ -237,6 +239,7 @@ export function PieComponent( (legendDisplay === 'show' || (legendDisplay === 'default' && columnGroups.length > 1 && shape !== 'treemap')) } + legendPosition={legendPosition || Position.Right} legendMaxDepth={nestedLegend ? undefined : 1 /* Color is based only on first layer */} onElementClick={(args) => { const context = getFilterContext( diff --git a/x-pack/plugins/lens/public/pie_visualization/settings_widget.scss b/x-pack/plugins/lens/public/pie_visualization/settings_widget.scss deleted file mode 100644 index 4fa328d8a904..000000000000 --- a/x-pack/plugins/lens/public/pie_visualization/settings_widget.scss +++ /dev/null @@ -1,3 +0,0 @@ -.lnsPieSettingsWidget { - min-width: $euiSizeXL * 10; -} diff --git a/x-pack/plugins/lens/public/pie_visualization/settings_widget.tsx b/x-pack/plugins/lens/public/pie_visualization/settings_widget.tsx deleted file mode 100644 index e5fde12f74b4..000000000000 --- a/x-pack/plugins/lens/public/pie_visualization/settings_widget.tsx +++ /dev/null @@ -1,230 +0,0 @@ -/* - * 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 React from 'react'; -import { i18n } from '@kbn/i18n'; -import { - EuiForm, - EuiFormRow, - EuiSuperSelect, - EuiRange, - EuiSwitch, - EuiHorizontalRule, - EuiSpacer, - EuiButtonGroup, -} from '@elastic/eui'; -import { DEFAULT_PERCENT_DECIMALS } from './constants'; -import { PieVisualizationState, SharedLayerState } from './types'; -import { VisualizationLayerWidgetProps } from '../types'; -import './settings_widget.scss'; - -const numberOptions: Array<{ value: SharedLayerState['numberDisplay']; inputDisplay: string }> = [ - { - value: 'hidden', - inputDisplay: i18n.translate('xpack.lens.pieChart.hiddenNumbersLabel', { - defaultMessage: 'Hide from chart', - }), - }, - { - value: 'percent', - inputDisplay: i18n.translate('xpack.lens.pieChart.showPercentValuesLabel', { - defaultMessage: 'Show percent', - }), - }, - { - value: 'value', - inputDisplay: i18n.translate('xpack.lens.pieChart.showFormatterValuesLabel', { - defaultMessage: 'Show value', - }), - }, -]; - -const categoryOptions: Array<{ - value: SharedLayerState['categoryDisplay']; - inputDisplay: string; -}> = [ - { - value: 'default', - inputDisplay: i18n.translate('xpack.lens.pieChart.showCategoriesLabel', { - defaultMessage: 'Inside or outside', - }), - }, - { - value: 'inside', - inputDisplay: i18n.translate('xpack.lens.pieChart.fitInsideOnlyLabel', { - defaultMessage: 'Inside only', - }), - }, - { - value: 'hide', - inputDisplay: i18n.translate('xpack.lens.pieChart.categoriesInLegendLabel', { - defaultMessage: 'Hide labels', - }), - }, -]; - -const categoryOptionsTreemap: Array<{ - value: SharedLayerState['categoryDisplay']; - inputDisplay: string; -}> = [ - { - value: 'default', - inputDisplay: i18n.translate('xpack.lens.pieChart.showTreemapCategoriesLabel', { - defaultMessage: 'Show labels', - }), - }, - { - value: 'hide', - inputDisplay: i18n.translate('xpack.lens.pieChart.categoriesInLegendLabel', { - defaultMessage: 'Hide labels', - }), - }, -]; - -const legendOptions: Array<{ - value: SharedLayerState['legendDisplay']; - label: string; - id: string; -}> = [ - { - id: 'pieLegendDisplay-default', - value: 'default', - label: i18n.translate('xpack.lens.pieChart.defaultLegendLabel', { - defaultMessage: 'auto', - }), - }, - { - id: 'pieLegendDisplay-show', - value: 'show', - label: i18n.translate('xpack.lens.pieChart.alwaysShowLegendLabel', { - defaultMessage: 'show', - }), - }, - { - id: 'pieLegendDisplay-hide', - value: 'hide', - label: i18n.translate('xpack.lens.pieChart.hideLegendLabel', { - defaultMessage: 'hide', - }), - }, -]; - -export function SettingsWidget(props: VisualizationLayerWidgetProps) { - const { state, setState } = props; - const layer = state.layers[0]; - if (!layer) { - return null; - } - - return ( - - - { - setState({ - ...state, - layers: [{ ...layer, categoryDisplay: option }], - }); - }} - /> - - - { - setState({ - ...state, - layers: [{ ...layer, numberDisplay: option }], - }); - }} - /> - - - - { - setState({ - ...state, - layers: [{ ...layer, percentDecimals: Number(e.currentTarget.value) }], - }); - }} - /> - - - -
- value === layer.legendDisplay)!.id} - onChange={(optionId) => { - setState({ - ...state, - layers: [ - { - ...layer, - legendDisplay: legendOptions.find(({ id }) => id === optionId)!.value, - }, - ], - }); - }} - buttonSize="compressed" - isFullWidth - /> - - - { - setState({ ...state, layers: [{ ...layer, nestedLegend: !layer.nestedLegend }] }); - }} - /> -
- - - ); -} diff --git a/x-pack/plugins/lens/public/pie_visualization/to_expression.ts b/x-pack/plugins/lens/public/pie_visualization/to_expression.ts index cf9d311dfd50..fbc47e8bfb00 100644 --- a/x-pack/plugins/lens/public/pie_visualization/to_expression.ts +++ b/x-pack/plugins/lens/public/pie_visualization/to_expression.ts @@ -41,6 +41,7 @@ function expressionHelper( numberDisplay: [layer.numberDisplay], categoryDisplay: [layer.categoryDisplay], legendDisplay: [layer.legendDisplay], + legendPosition: [layer.legendPosition || 'right'], percentDecimals: [layer.percentDecimals ?? DEFAULT_PERCENT_DECIMALS], nestedLegend: [!!layer.nestedLegend], }, diff --git a/x-pack/plugins/lens/public/pie_visualization/toolbar.scss b/x-pack/plugins/lens/public/pie_visualization/toolbar.scss new file mode 100644 index 000000000000..3cfbe6480c61 --- /dev/null +++ b/x-pack/plugins/lens/public/pie_visualization/toolbar.scss @@ -0,0 +1,3 @@ +.lnsPieToolbar__popover { + width: $euiFormMaxWidth; +} diff --git a/x-pack/plugins/lens/public/pie_visualization/toolbar.tsx b/x-pack/plugins/lens/public/pie_visualization/toolbar.tsx new file mode 100644 index 000000000000..9c3d0d0f3481 --- /dev/null +++ b/x-pack/plugins/lens/public/pie_visualization/toolbar.tsx @@ -0,0 +1,281 @@ +/* + * 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 './toolbar.scss'; +import React, { useState } from 'react'; +import { i18n } from '@kbn/i18n'; +import { + EuiFlexGroup, + EuiFlexItem, + EuiPopover, + EuiSelect, + EuiFormRow, + EuiSuperSelect, + EuiRange, + EuiSwitch, + EuiHorizontalRule, + EuiSpacer, + EuiButtonGroup, +} from '@elastic/eui'; +import { Position } from '@elastic/charts'; +import { DEFAULT_PERCENT_DECIMALS } from './constants'; +import { PieVisualizationState, SharedLayerState } from './types'; +import { VisualizationToolbarProps } from '../types'; +import { ToolbarButton } from '../toolbar_button'; + +const numberOptions: Array<{ value: SharedLayerState['numberDisplay']; inputDisplay: string }> = [ + { + value: 'hidden', + inputDisplay: i18n.translate('xpack.lens.pieChart.hiddenNumbersLabel', { + defaultMessage: 'Hide from chart', + }), + }, + { + value: 'percent', + inputDisplay: i18n.translate('xpack.lens.pieChart.showPercentValuesLabel', { + defaultMessage: 'Show percent', + }), + }, + { + value: 'value', + inputDisplay: i18n.translate('xpack.lens.pieChart.showFormatterValuesLabel', { + defaultMessage: 'Show value', + }), + }, +]; + +const categoryOptions: Array<{ + value: SharedLayerState['categoryDisplay']; + inputDisplay: string; +}> = [ + { + value: 'default', + inputDisplay: i18n.translate('xpack.lens.pieChart.showCategoriesLabel', { + defaultMessage: 'Inside or outside', + }), + }, + { + value: 'inside', + inputDisplay: i18n.translate('xpack.lens.pieChart.fitInsideOnlyLabel', { + defaultMessage: 'Inside only', + }), + }, + { + value: 'hide', + inputDisplay: i18n.translate('xpack.lens.pieChart.categoriesInLegendLabel', { + defaultMessage: 'Hide labels', + }), + }, +]; + +const categoryOptionsTreemap: Array<{ + value: SharedLayerState['categoryDisplay']; + inputDisplay: string; +}> = [ + { + value: 'default', + inputDisplay: i18n.translate('xpack.lens.pieChart.showTreemapCategoriesLabel', { + defaultMessage: 'Show labels', + }), + }, + { + value: 'hide', + inputDisplay: i18n.translate('xpack.lens.pieChart.categoriesInLegendLabel', { + defaultMessage: 'Hide labels', + }), + }, +]; + +const legendOptions: Array<{ + value: SharedLayerState['legendDisplay']; + label: string; + id: string; +}> = [ + { + id: 'pieLegendDisplay-default', + value: 'default', + label: i18n.translate('xpack.lens.pieChart.legendVisibility.auto', { + defaultMessage: 'auto', + }), + }, + { + id: 'pieLegendDisplay-show', + value: 'show', + label: i18n.translate('xpack.lens.pieChart.legendVisibility.show', { + defaultMessage: 'show', + }), + }, + { + id: 'pieLegendDisplay-hide', + value: 'hide', + label: i18n.translate('xpack.lens.pieChart.legendVisibility.hide', { + defaultMessage: 'hide', + }), + }, +]; + +export function PieToolbar(props: VisualizationToolbarProps) { + const [open, setOpen] = useState(false); + const { state, setState } = props; + const layer = state.layers[0]; + if (!layer) { + return null; + } + return ( + + + { + setOpen(!open); + }} + > + {i18n.translate('xpack.lens.pieChart.settingsLabel', { defaultMessage: 'Settings' })} + + } + isOpen={open} + closePopover={() => { + setOpen(false); + }} + anchorPosition="downRight" + > + + { + setState({ + ...state, + layers: [{ ...layer, categoryDisplay: option }], + }); + }} + /> + + + { + setState({ + ...state, + layers: [{ ...layer, numberDisplay: option }], + }); + }} + /> + + + + { + setState({ + ...state, + layers: [{ ...layer, percentDecimals: Number(e.currentTarget.value) }], + }); + }} + /> + + + +
+ value === layer.legendDisplay)!.id} + onChange={(optionId) => { + setState({ + ...state, + layers: [ + { + ...layer, + legendDisplay: legendOptions.find(({ id }) => id === optionId)!.value, + }, + ], + }); + }} + buttonSize="compressed" + isFullWidth + /> + + + { + setState({ ...state, layers: [{ ...layer, nestedLegend: !layer.nestedLegend }] }); + }} + /> +
+ + + { + setState({ + ...state, + layers: [{ ...layer, legendPosition: e.target.value as Position }], + }); + }} + /> + + + + + ); +} diff --git a/x-pack/plugins/lens/public/pie_visualization/types.ts b/x-pack/plugins/lens/public/pie_visualization/types.ts index 60b656424864..74156bce2ea7 100644 --- a/x-pack/plugins/lens/public/pie_visualization/types.ts +++ b/x-pack/plugins/lens/public/pie_visualization/types.ts @@ -13,6 +13,7 @@ export interface SharedLayerState { numberDisplay: 'hidden' | 'percent' | 'value'; categoryDisplay: 'default' | 'inside' | 'hide'; legendDisplay: 'default' | 'show' | 'hide'; + legendPosition?: 'left' | 'right' | 'top' | 'bottom'; nestedLegend?: boolean; percentDecimals?: number; } 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 d7d76bdd1f44..b5783803b803 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,7 @@ Object { "position": Array [ "bottom", ], + "showSingleSeries": Array [], }, "function": "lens_xy_legendConfig", "type": "function", 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 3b9406cedd49..b17704b38cde 100644 --- a/x-pack/plugins/lens/public/xy_visualization/to_expression.ts +++ b/x-pack/plugins/lens/public/xy_visualization/to_expression.ts @@ -127,6 +127,9 @@ export const buildExpression = ( function: 'lens_xy_legendConfig', arguments: { isVisible: [state.legend.isVisible], + showSingleSeries: state.legend.showSingleSeries + ? [state.legend.showSingleSeries] + : [], position: [state.legend.position], }, }, diff --git a/x-pack/plugins/lens/public/xy_visualization/types.ts b/x-pack/plugins/lens/public/xy_visualization/types.ts index 08f29c65b26d..605119535d1f 100644 --- a/x-pack/plugins/lens/public/xy_visualization/types.ts +++ b/x-pack/plugins/lens/public/xy_visualization/types.ts @@ -19,8 +19,18 @@ import { VisualizationType } from '../index'; import { FittingFunction } from './fitting_functions'; export interface LegendConfig { + /** + * Flag whether the legend should be shown. If there is just a single series, it will be hidden + */ isVisible: boolean; + /** + * Position of the legend relative to the chart + */ position: Position; + /** + * Flag whether the legend should be shown even with just a single series + */ + showSingleSeries?: boolean; } type LegendConfigResult = LegendConfig & { type: 'lens_xy_legendConfig' }; @@ -50,6 +60,12 @@ export const legendConfig: ExpressionFunctionDefinition< defaultMessage: 'Specifies the legend position.', }), }, + showSingleSeries: { + types: ['boolean'], + help: i18n.translate('xpack.lens.xyChart.showSingleSeries.help', { + defaultMessage: 'Specifies whether a legend with just a single entry should be shown', + }), + }, }, fn: function fn(input: unknown, args: LegendConfig) { return { 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 d22b3ec0a44a..59c4b393df46 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 @@ -7,6 +7,7 @@ import './xy_config_panel.scss'; import React, { useState } from 'react'; import { i18n } from '@kbn/i18n'; +import { Position } from '@elastic/charts'; import { debounce } from 'lodash'; import { EuiButtonGroup, @@ -16,12 +17,14 @@ import { EuiFormRow, EuiPopover, EuiText, + EuiSelect, htmlIdGenerator, EuiForm, EuiColorPicker, EuiColorPickerProps, EuiToolTip, EuiIcon, + EuiHorizontalRule, } from '@elastic/eui'; import { VisualizationLayerWidgetProps, @@ -46,6 +49,30 @@ function updateLayer(state: State, layer: UnwrapArray, index: n }; } +const legendOptions: Array<{ id: string; value: 'auto' | 'show' | 'hide'; label: string }> = [ + { + id: `xy_legend_auto`, + value: 'auto', + label: i18n.translate('xpack.lens.xyChart.legendVisibility.auto', { + defaultMessage: 'auto', + }), + }, + { + id: `xy_legend_show`, + value: 'show', + label: i18n.translate('xpack.lens.xyChart.legendVisibility.show', { + defaultMessage: 'show', + }), + }, + { + id: `xy_legend_hide`, + value: 'hide', + label: i18n.translate('xpack.lens.xyChart.legendVisibility.hide', { + defaultMessage: 'hide', + }), + }, +]; + export function LayerContextMenu(props: VisualizationLayerWidgetProps) { const { state, layerId } = props; const horizontalOnly = isHorizontalChart(state.layers); @@ -95,6 +122,12 @@ export function XyToolbar(props: VisualizationToolbarProps) { const hasNonBarSeries = props.state?.layers.some( (layer) => layer.seriesType === 'line' || layer.seriesType === 'area' ); + const legendMode = + props.state?.legend.isVisible && !props.state?.legend.showSingleSeries + ? 'auto' + : !props.state?.legend.isVisible + ? 'hide' + : 'show'; return ( @@ -157,6 +190,67 @@ export function XyToolbar(props: VisualizationToolbarProps) { /> + + + value === legendMode)!.id} + onChange={(optionId) => { + const newMode = legendOptions.find(({ id }) => id === optionId)!.value; + if (newMode === 'auto') { + props.setState({ + ...props.state, + legend: { ...props.state.legend, isVisible: true, showSingleSeries: false }, + }); + } else if (newMode === 'show') { + props.setState({ + ...props.state, + legend: { ...props.state.legend, isVisible: true, showSingleSeries: true }, + }); + } else if (newMode === 'hide') { + props.setState({ + ...props.state, + legend: { ...props.state.legend, isVisible: false, showSingleSeries: false }, + }); + } + }} + /> + + + { + props.setState({ + ...props.state, + legend: { ...props.state.legend, position: e.target.value as Position }, + }); + }} + /> + diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_expression.test.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_expression.test.tsx index b7a50b3af640..c880cbb641e5 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_expression.test.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/xy_expression.test.tsx @@ -1556,6 +1556,73 @@ describe('xy_expression', () => { expect(component.find(Settings).prop('showLegend')).toEqual(true); }); + test('it should always show legend if showSingleSeries is set', () => { + const { data, args } = sampleArgs(); + + const component = shallow( + + ); + + expect(component.find(Settings).prop('showLegend')).toEqual(true); + }); + + test('it not show legend if isVisible is set to false', () => { + const { data, args } = sampleArgs(); + + const component = shallow( + + ); + + expect(component.find(Settings).prop('showLegend')).toEqual(false); + }); + + test('it should show legend on right side', () => { + const { data, args } = sampleArgs(); + + const component = shallow( + + ); + + expect(component.find(Settings).prop('legendPosition')).toEqual('top'); + }); + test('it should apply the fitting function to all non-bar series', () => { const data: LensMultiTable = { type: 'lens_multitable', diff --git a/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx b/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx index 3ab12aa0879b..871b626d6256 100644 --- a/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx +++ b/x-pack/plugins/lens/public/xy_visualization/xy_expression.tsx @@ -282,7 +282,11 @@ export function XYChart({ return (