From dbdc290f00b41d22ffb50bde84ebc65a93aae135 Mon Sep 17 00:00:00 2001 From: shahzad31 Date: Mon, 31 Jan 2022 15:27:35 +0100 Subject: [PATCH 01/15] Add lens config options --- .../expressions/metric_chart/metric_chart.ts | 18 +++++ .../common/expressions/metric_chart/types.ts | 3 + .../metric_visualization/auto_scale.tsx | 14 +++- .../metric_visualization/expression.scss | 74 ++++++++++++++++++- .../metric_visualization/expression.tsx | 29 ++++++-- .../metric_config_panel/index.tsx | 35 +++++++++ .../metric_config_panel/title_aize_option.tsx | 58 +++++++++++++++ .../title_align_option.tsx | 62 ++++++++++++++++ .../title_position_option.tsx | 56 ++++++++++++++ .../visual_options_popover.tsx | 42 +++++++++++ .../metric_visualization/visualization.tsx | 15 ++++ 11 files changed, 397 insertions(+), 9 deletions(-) create mode 100644 x-pack/plugins/lens/public/metric_visualization/metric_config_panel/index.tsx create mode 100644 x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_aize_option.tsx create mode 100644 x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_align_option.tsx create mode 100644 x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx create mode 100644 x-pack/plugins/lens/public/metric_visualization/metric_config_panel/visual_options_popover.tsx diff --git a/x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts b/x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts index 4a79644d7fe54..95135a5c570c2 100644 --- a/x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts +++ b/x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts @@ -38,6 +38,24 @@ export const metricChart: ExpressionFunctionDefinition< defaultMessage: 'The chart title.', }), }, + titleSize: { + types: ['string'], + help: i18n.translate('xpack.lens.metric.titleSize.help', { + defaultMessage: 'The chart title size.', + }), + }, + titlePosition: { + types: ['string'], + help: i18n.translate('xpack.lens.metric.titlePosition.help', { + defaultMessage: 'The chart title position.', + }), + }, + titleAlignPosition: { + types: ['string'], + help: i18n.translate('xpack.lens.metric.titleAlignPosition.help', { + defaultMessage: 'The chart title align position.', + }), + }, description: { types: ['string'], help: '', diff --git a/x-pack/plugins/lens/common/expressions/metric_chart/types.ts b/x-pack/plugins/lens/common/expressions/metric_chart/types.ts index 8a52506a83ec8..b4507789fc85d 100644 --- a/x-pack/plugins/lens/common/expressions/metric_chart/types.ts +++ b/x-pack/plugins/lens/common/expressions/metric_chart/types.ts @@ -18,6 +18,9 @@ export interface MetricState { layerType: LayerType; colorMode?: ColorMode; palette?: PaletteOutput; + titlePosition?: string; + titleSize?: string; + titleAlignPosition?: string; } export interface MetricConfig extends Omit { diff --git a/x-pack/plugins/lens/public/metric_visualization/auto_scale.tsx b/x-pack/plugins/lens/public/metric_visualization/auto_scale.tsx index 9047937093134..72fb0b5202384 100644 --- a/x-pack/plugins/lens/public/metric_visualization/auto_scale.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/auto_scale.tsx @@ -7,11 +7,15 @@ import React from 'react'; import { throttle } from 'lodash'; +import classNames from 'classnames'; import { EuiResizeObserver } from '@elastic/eui'; interface Props extends React.HTMLAttributes { children: React.ReactNode | React.ReactNode[]; minScale?: number; + titleSize?: string; + titlePosition?: string; + titleAlignPosition?: string; } interface State { @@ -56,7 +60,8 @@ export class AutoScale extends React.Component { }; render() { - const { children, minScale, ...rest } = this.props; + const { children, minScale, titleSize, titleAlignPosition, titlePosition, ...rest } = + this.props; const { scale } = this.state; const style = this.props.style || {}; @@ -85,6 +90,13 @@ export class AutoScale extends React.Component { style={{ transform: `scale(${scale})`, }} + className={classNames('lnsMetricExpression_title_container', { + rowDirection: ['left', 'right'].includes(titlePosition ?? ''), + alignStart: ['left', 'top'].includes(titleAlignPosition ?? ''), + alignEnd: ['right', 'bottom'].includes(titleAlignPosition ?? ''), + alignCenter: ['center', 'middle'].includes(titleAlignPosition ?? ''), + [`titleSize${(titleSize ?? 'xl').toUpperCase()}`]: true, + })} > {children} diff --git a/x-pack/plugins/lens/public/metric_visualization/expression.scss b/x-pack/plugins/lens/public/metric_visualization/expression.scss index bf72015637356..c407d3bba1be9 100644 --- a/x-pack/plugins/lens/public/metric_visualization/expression.scss +++ b/x-pack/plugins/lens/public/metric_visualization/expression.scss @@ -11,11 +11,81 @@ font-size: $euiSizeXXL * 2; font-weight: $euiFontWeightSemiBold; border-radius: $euiBorderRadius; - padding: 0 $euiSize; } .lnsMetricExpression__title { font-size: $euiSizeXL; color: $euiTextColor; + &.reversOrder { + order: 1; + } } -} \ No newline at end of file + + .lnsMetricExpression_title_container { + display: flex; + align-items: center; + flex-direction: column; + &.rowDirection { + flex-direction: row; + } + &.alignStart { + align-items: start; + } + &.alignEnd { + align-items: end; + } + &.alignCenter { + align-items: center; + } + &.titleSizeXS { + .lnsMetricExpression__title { + font-size: $euiSizeXS; + } + .lnsMetricExpression__value { + font-size: $euiSizeS * 2; + } + } + &.titleSizeS { + .lnsMetricExpression__title { + font-size: $euiSizeS * 1.5; + font-weight: 700; + } + .lnsMetricExpression__value { + font-size: $euiSizeM * 2.25; + } + } + &.titleSizeM { + .lnsMetricExpression__title { + font-size: $euiSizeM * 1.5; + } + .lnsMetricExpression__value { + font-size: $euiSizeL * 2; + } + } + &.titleSizeL { + .lnsMetricExpression__title { + font-size: $euiSizeL; + } + .lnsMetricExpression__value { + font-size: $euiSizeXL * 2; + } + } + &.titleSizeXL { + .lnsMetricExpression__title { + font-size: $euiSizeXL; + } + .lnsMetricExpression__value { + font-size: $euiSizeXXL * 2; + } + } + + &.titleSizeXXL { + .lnsMetricExpression__title { + font-size: $euiSizeXXL; + } + .lnsMetricExpression__value { + font-size: $euiSizeXXL * 3; + } + } + } +} diff --git a/x-pack/plugins/lens/public/metric_visualization/expression.tsx b/x-pack/plugins/lens/public/metric_visualization/expression.tsx index d84abcc0b1005..4267a55c700e2 100644 --- a/x-pack/plugins/lens/public/metric_visualization/expression.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/expression.tsx @@ -9,6 +9,7 @@ import './expression.scss'; import { I18nProvider } from '@kbn/i18n-react'; import React from 'react'; import ReactDOM from 'react-dom'; +import classNames from 'classnames'; import { IUiSettingsClient, ThemeServiceStart } from 'kibana/public'; import { KibanaThemeProvider } from '../../../../../src/plugins/kibana_react/public'; import type { @@ -109,7 +110,16 @@ export function MetricChart({ formatFactory, uiSettings, }: MetricChartProps & { formatFactory: FormatFactory; uiSettings: IUiSettingsClient }) { - const { metricTitle, accessor, mode, colorMode, palette } = args; + const { + metricTitle, + accessor, + mode, + colorMode, + palette, + titlePosition, + titleAlignPosition, + titleSize, + } = args; const firstTable = Object.values(data.tables)[0]; const getEmptyState = () => ( @@ -144,19 +154,26 @@ export function MetricChart({ return ( - -
- {value} -
+ {mode === 'full' && (
{metricTitle}
)} +
+ {value} +
); diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/index.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/index.tsx new file mode 100644 index 0000000000000..bdce858fde9c8 --- /dev/null +++ b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/index.tsx @@ -0,0 +1,35 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React, { memo } from 'react'; +import { EuiFlexGroup, EuiFlexItem, htmlIdGenerator } from '@elastic/eui'; +import type { VisualizationToolbarProps } from '../../types'; + +import { VisualOptionsPopover } from './visual_options_popover'; +import { MetricState } from '../../../common/expressions'; + +export const MetricToolbar = memo(function MetricToolbar( + props: VisualizationToolbarProps +) { + const { state, setState, frame } = props; + + return ( + + + + + + + + ); +}); + +export const idPrefix = htmlIdGenerator()(); diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_aize_option.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_aize_option.tsx new file mode 100644 index 0000000000000..446c33edbde53 --- /dev/null +++ b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_aize_option.tsx @@ -0,0 +1,58 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { i18n } from '@kbn/i18n'; +import { EuiFormRow, EuiSuperSelect } from '@elastic/eui'; +import { MetricState } from '../../../common/expressions'; + +export interface TitlePositionProps { + state: MetricState; + setState: (newState: MetricState) => void; +} + +const titleSizes = [ + { id: 'xs', label: 'XS' }, + { id: 's', label: 'S' }, + { id: 'm', label: 'M' }, + { id: 'l', label: 'L' }, + { id: 'xl', label: 'XL' }, + { id: 'xxl', label: 'XXL' }, +]; + +export const TitleSizeOptions: React.FC = ({ state, setState }) => { + return ( + + {i18n.translate('xpack.lens.metricChart.titleSizeLabel', { + defaultMessage: 'Title size', + })} + + } + > + { + return { + value: position.id, + dropdownDisplay: position.label, + inputDisplay: position.label, + }; + })} + valueOfSelected={state.titleSize ?? 'xl'} + onChange={(value) => { + setState({ ...state, titleSize: value }); + }} + itemLayoutAlign="top" + hasDividers + /> + + ); +}; diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_align_option.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_align_option.tsx new file mode 100644 index 0000000000000..7511301f9c497 --- /dev/null +++ b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_align_option.tsx @@ -0,0 +1,62 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { i18n } from '@kbn/i18n'; +import { EuiFormRow, EuiSuperSelect } from '@elastic/eui'; +import { MetricState } from '../../../common/expressions'; + +export interface TitlePositionProps { + state: MetricState; + setState: (newState: MetricState) => void; +} + +const titleAlignPositions = [ + { id: 'top', label: 'Top', direction: 'column' }, + { id: 'bottom', label: 'Bottom', direction: 'column' }, + { id: 'middle', label: 'Middle', direction: 'column' }, + { id: 'left', label: 'Left', direction: 'row' }, + { id: 'right', label: 'Right', direction: 'row' }, + { id: 'center', label: 'Center', direction: 'row' }, +]; + +export const TitleAlignOptions: React.FC = ({ state, setState }) => { + const direction = ['top', 'bottom'].includes(state.titlePosition ?? 'top') ? 'column' : 'row'; + + return ( + + {i18n.translate('xpack.lens.metricChart.titleAlignLabel', { + defaultMessage: 'Title align', + })} + + } + > + pos.direction !== direction) + .map((position) => { + return { + value: position.id, + dropdownDisplay: position.label, + inputDisplay: position.label, + }; + })} + valueOfSelected={state.titleAlignPosition ?? 'center'} + onChange={(value) => { + setState({ ...state, titleAlignPosition: value }); + }} + itemLayoutAlign="top" + hasDividers + /> + + ); +}; diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx new file mode 100644 index 0000000000000..f3b00edbaf4e9 --- /dev/null +++ b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx @@ -0,0 +1,56 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { i18n } from '@kbn/i18n'; +import { EuiFormRow, EuiSuperSelect } from '@elastic/eui'; +import { MetricState } from '../../../common/expressions'; + +export interface TitlePositionProps { + state: MetricState; + setState: (newState: MetricState) => void; +} + +const titlePositions = [ + { id: 'top', label: 'Top' }, + { id: 'bottom', label: 'Bottom' }, + { id: 'left', label: 'Left' }, + { id: 'right', label: 'Right' }, +]; + +export const TitlePositionOptions: React.FC = ({ state, setState }) => { + return ( + + {i18n.translate('xpack.lens.metricChart.titlePositionLabel', { + defaultMessage: 'Title position', + })} + + } + > + { + return { + value: position.id, + dropdownDisplay: position.label, + inputDisplay: position.label, + }; + })} + valueOfSelected={state.titlePosition ?? 'top'} + onChange={(value) => { + setState({ ...state, titlePosition: value }); + }} + itemLayoutAlign="top" + hasDividers + /> + + ); +}; diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/visual_options_popover.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/visual_options_popover.tsx new file mode 100644 index 0000000000000..e6dd937d55b0c --- /dev/null +++ b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/visual_options_popover.tsx @@ -0,0 +1,42 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { i18n } from '@kbn/i18n'; +import { EuiHorizontalRule } from '@elastic/eui'; +import { ToolbarPopover, TooltipWrapper } from '../../shared_components'; +import { TitlePositionOptions } from './title_position_option'; +import { FramePublicAPI } from '../../types'; +import { MetricState } from '../../../common/expressions'; +import { TitleAlignOptions } from './title_align_option'; +import { TitleSizeOptions } from './title_aize_option'; + +export interface VisualOptionsPopoverProps { + state: MetricState; + setState: (newState: MetricState) => void; + datasourceLayers: FramePublicAPI['datasourceLayers']; +} + +export const VisualOptionsPopover: React.FC = ({ state, setState }) => { + return ( + + + + + + + + + ); +}; diff --git a/x-pack/plugins/lens/public/metric_visualization/visualization.tsx b/x-pack/plugins/lens/public/metric_visualization/visualization.tsx index 19d5a9c7e340a..8352057bad69a 100644 --- a/x-pack/plugins/lens/public/metric_visualization/visualization.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/visualization.tsx @@ -21,6 +21,7 @@ import type { MetricConfig, MetricState } from '../../common/expressions'; import { layerTypes } from '../../common'; import { CUSTOM_PALETTE, shiftPalette } from '../shared_components'; import { MetricDimensionEditor } from './dimension_editor'; +import { MetricToolbar } from './metric_config_panel'; const toExpression = ( paletteService: PaletteRegistry, @@ -59,6 +60,9 @@ const toExpression = ( function: 'lens_metric_chart', arguments: { title: [attributes?.title || ''], + titleSize: [state?.titleSize || ''], + titlePosition: [state?.titlePosition || 'top'], + titleAlignPosition: [state?.titleAlignPosition || 'center'], description: [attributes?.description || ''], metricTitle: [operation?.label || ''], accessor: [state.accessor], @@ -189,6 +193,17 @@ export const getMetricVisualization = ({ return { ...prevState, accessor: undefined, colorMode: ColorMode.None, palette: undefined }; }, + renderToolbar(domElement, props) { + render( + + + + + , + domElement + ); + }, + renderDimensionEditor(domElement, props) { render( From 932545d5e651c1ff399c6ba44651fec316613b74 Mon Sep 17 00:00:00 2001 From: shahzad31 Date: Tue, 1 Feb 2022 12:29:21 +0100 Subject: [PATCH 02/15] wip --- .../metric_config_panel/visual_options_popover.tsx | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/visual_options_popover.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/visual_options_popover.tsx index e6dd937d55b0c..06a9103039d51 100644 --- a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/visual_options_popover.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/visual_options_popover.tsx @@ -23,10 +23,15 @@ export interface VisualOptionsPopoverProps { export const VisualOptionsPopover: React.FC = ({ state, setState }) => { return ( - + Date: Tue, 1 Feb 2022 14:22:32 +0100 Subject: [PATCH 03/15] Pr feedback --- .../expressions/metric_chart/metric_chart.ts | 6 +- .../common/expressions/metric_chart/types.ts | 2 +- .../metric_visualization/auto_scale.tsx | 9 +- .../metric_visualization/expression.scss | 33 ++++--- .../metric_visualization/expression.tsx | 6 +- ...ver.tsx => appearance_options_popover.tsx} | 15 ++-- .../metric_config_panel/index.tsx | 4 +- .../metric_config_panel/size_options.tsx | 88 +++++++++++++++++++ .../metric_config_panel/title_aize_option.tsx | 58 ------------ .../title_align_option.tsx | 3 - .../title_position_option.tsx | 2 - .../metric_visualization/visualization.tsx | 2 +- 12 files changed, 126 insertions(+), 102 deletions(-) rename x-pack/plugins/lens/public/metric_visualization/metric_config_panel/{visual_options_popover.tsx => appearance_options_popover.tsx} (77%) create mode 100644 x-pack/plugins/lens/public/metric_visualization/metric_config_panel/size_options.tsx delete mode 100644 x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_aize_option.tsx diff --git a/x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts b/x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts index 95135a5c570c2..dc057a01ec07c 100644 --- a/x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts +++ b/x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts @@ -38,10 +38,10 @@ export const metricChart: ExpressionFunctionDefinition< defaultMessage: 'The chart title.', }), }, - titleSize: { + size: { types: ['string'], - help: i18n.translate('xpack.lens.metric.titleSize.help', { - defaultMessage: 'The chart title size.', + help: i18n.translate('xpack.lens.metric.size.help', { + defaultMessage: 'The chart size.', }), }, titlePosition: { diff --git a/x-pack/plugins/lens/common/expressions/metric_chart/types.ts b/x-pack/plugins/lens/common/expressions/metric_chart/types.ts index b4507789fc85d..479c4058fd1e2 100644 --- a/x-pack/plugins/lens/common/expressions/metric_chart/types.ts +++ b/x-pack/plugins/lens/common/expressions/metric_chart/types.ts @@ -19,7 +19,7 @@ export interface MetricState { colorMode?: ColorMode; palette?: PaletteOutput; titlePosition?: string; - titleSize?: string; + size?: string; titleAlignPosition?: string; } diff --git a/x-pack/plugins/lens/public/metric_visualization/auto_scale.tsx b/x-pack/plugins/lens/public/metric_visualization/auto_scale.tsx index 72fb0b5202384..885586490176f 100644 --- a/x-pack/plugins/lens/public/metric_visualization/auto_scale.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/auto_scale.tsx @@ -13,7 +13,7 @@ import { EuiResizeObserver } from '@elastic/eui'; interface Props extends React.HTMLAttributes { children: React.ReactNode | React.ReactNode[]; minScale?: number; - titleSize?: string; + size?: string; titlePosition?: string; titleAlignPosition?: string; } @@ -60,8 +60,7 @@ export class AutoScale extends React.Component { }; render() { - const { children, minScale, titleSize, titleAlignPosition, titlePosition, ...rest } = - this.props; + const { children, minScale, size, titleAlignPosition, titlePosition, ...rest } = this.props; const { scale } = this.state; const style = this.props.style || {}; @@ -90,12 +89,12 @@ export class AutoScale extends React.Component { style={{ transform: `scale(${scale})`, }} - className={classNames('lnsMetricExpression_title_container', { + className={classNames('lnsMetricExpression_container_scale', { rowDirection: ['left', 'right'].includes(titlePosition ?? ''), alignStart: ['left', 'top'].includes(titleAlignPosition ?? ''), alignEnd: ['right', 'bottom'].includes(titleAlignPosition ?? ''), alignCenter: ['center', 'middle'].includes(titleAlignPosition ?? ''), - [`titleSize${(titleSize ?? 'xl').toUpperCase()}`]: true, + [`titleSize${(size ?? 'xl').toUpperCase()}`]: true, })} > {children} diff --git a/x-pack/plugins/lens/public/metric_visualization/expression.scss b/x-pack/plugins/lens/public/metric_visualization/expression.scss index c407d3bba1be9..7522bbeb9f210 100644 --- a/x-pack/plugins/lens/public/metric_visualization/expression.scss +++ b/x-pack/plugins/lens/public/metric_visualization/expression.scss @@ -8,20 +8,20 @@ text-align: center; .lnsMetricExpression__value { - font-size: $euiSizeXXL * 2; + font-size: $euiFontSizeXXL * 2; font-weight: $euiFontWeightSemiBold; border-radius: $euiBorderRadius; } .lnsMetricExpression__title { - font-size: $euiSizeXL; + font-size: $euiFontSizeXXL; color: $euiTextColor; - &.reversOrder { + &.reverseOrder { order: 1; } } - .lnsMetricExpression_title_container { + .lnsMetricExpression_container_scale { display: flex; align-items: center; flex-direction: column; @@ -39,52 +39,51 @@ } &.titleSizeXS { .lnsMetricExpression__title { - font-size: $euiSizeXS; + font-size: $euiFontSizeS; } .lnsMetricExpression__value { - font-size: $euiSizeS * 2; + font-size: $euiFontSizeXS * 2; } } &.titleSizeS { .lnsMetricExpression__title { - font-size: $euiSizeS * 1.5; - font-weight: 700; + font-size: $euiFontSizeS; } .lnsMetricExpression__value { - font-size: $euiSizeM * 2.25; + font-size: $euiFontSizeM * 2.25; } } &.titleSizeM { .lnsMetricExpression__title { - font-size: $euiSizeM * 1.5; + font-size: $euiFontSizeM; } .lnsMetricExpression__value { - font-size: $euiSizeL * 2; + font-size: $euiFontSizeL * 2; } } &.titleSizeL { .lnsMetricExpression__title { - font-size: $euiSizeL; + font-size: $euiFontSizeL; } .lnsMetricExpression__value { - font-size: $euiSizeXL * 2; + font-size: $euiFontSizeXL * 2; } } &.titleSizeXL { .lnsMetricExpression__title { - font-size: $euiSizeXL; + font-size: $euiFontSizeXL; } .lnsMetricExpression__value { - font-size: $euiSizeXXL * 2; + font-size: $euiFontSizeXXL * 2; } } &.titleSizeXXL { .lnsMetricExpression__title { - font-size: $euiSizeXXL; + font-size: $euiFontSizeXXL; } .lnsMetricExpression__value { - font-size: $euiSizeXXL * 3; + font-size: $euiFontSizeXXL * 3; } } } diff --git a/x-pack/plugins/lens/public/metric_visualization/expression.tsx b/x-pack/plugins/lens/public/metric_visualization/expression.tsx index 4267a55c700e2..b0c9712a396c1 100644 --- a/x-pack/plugins/lens/public/metric_visualization/expression.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/expression.tsx @@ -118,7 +118,7 @@ export function MetricChart({ palette, titlePosition, titleAlignPosition, - titleSize, + size, } = args; const firstTable = Object.values(data.tables)[0]; @@ -158,13 +158,13 @@ export function MetricChart({ key={value} titlePosition={titlePosition} titleAlignPosition={titleAlignPosition} - titleSize={titleSize} + size={size} > {mode === 'full' && (
diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/visual_options_popover.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/appearance_options_popover.tsx similarity index 77% rename from x-pack/plugins/lens/public/metric_visualization/metric_config_panel/visual_options_popover.tsx rename to x-pack/plugins/lens/public/metric_visualization/metric_config_panel/appearance_options_popover.tsx index 06a9103039d51..83ddb7cb5604a 100644 --- a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/visual_options_popover.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/appearance_options_popover.tsx @@ -7,13 +7,12 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiHorizontalRule } from '@elastic/eui'; import { ToolbarPopover, TooltipWrapper } from '../../shared_components'; import { TitlePositionOptions } from './title_position_option'; import { FramePublicAPI } from '../../types'; import { MetricState } from '../../../common/expressions'; import { TitleAlignOptions } from './title_align_option'; -import { TitleSizeOptions } from './title_aize_option'; +import { SizeOptions } from './size_options'; export interface VisualOptionsPopoverProps { state: MetricState; @@ -21,7 +20,10 @@ export interface VisualOptionsPopoverProps { datasourceLayers: FramePublicAPI['datasourceLayers']; } -export const VisualOptionsPopover: React.FC = ({ state, setState }) => { +export const AppearanceOptionsPopover: React.FC = ({ + state, + setState, +}) => { return ( = ({ stat defaultMessage: 'Appearance', })} type="visualOptions" - groupPosition="left" - buttonDataTestSubj="lnsVisualOptionsButton" + groupPosition="none" + buttonDataTestSubj="lnsMetricAppearanceButton" > - - + diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/index.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/index.tsx index bdce858fde9c8..5a6566a863a3d 100644 --- a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/index.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/index.tsx @@ -9,7 +9,7 @@ import React, { memo } from 'react'; import { EuiFlexGroup, EuiFlexItem, htmlIdGenerator } from '@elastic/eui'; import type { VisualizationToolbarProps } from '../../types'; -import { VisualOptionsPopover } from './visual_options_popover'; +import { AppearanceOptionsPopover } from './appearance_options_popover'; import { MetricState } from '../../../common/expressions'; export const MetricToolbar = memo(function MetricToolbar( @@ -21,7 +21,7 @@ export const MetricToolbar = memo(function MetricToolbar( - void; +} + +const titleSizes = [ + { + id: 'xs', + label: i18n.translate('xpack.lens.metricChart.metricSize.extraSmall', { + defaultMessage: 'Extra small', + }), + }, + { + id: 's', + label: i18n.translate('xpack.lens.metricChart.metricSize.small', { + defaultMessage: 'Small', + }), + }, + { + id: 'm', + label: i18n.translate('xpack.lens.metricChart.metricSize.medium', { + defaultMessage: 'Medium', + }), + }, + { + id: 'l', + label: i18n.translate('xpack.lens.metricChart.metricSize.large', { + defaultMessage: 'Large', + }), + }, + { + id: 'xl', + label: i18n.translate('xpack.lens.metricChart.metricSize.extraLarge', { + defaultMessage: 'Extra large', + }), + }, + { + id: 'xxl', + label: i18n.translate('xpack.lens.metricChart.metricSize.xxl', { + defaultMessage: 'Extra extra large', + }), + }, +]; + +export const SizeOptions: React.FC = ({ state, setState }) => { + return ( + + {i18n.translate('xpack.lens.metricChart.metricSizeLabel', { + defaultMessage: 'Size', + })} + + } + > + { + return { + value: position.id, + dropdownDisplay: position.label, + inputDisplay: position.label, + }; + })} + valueOfSelected={state.size ?? 'xl'} + onChange={(value) => { + setState({ ...state, size: value }); + }} + itemLayoutAlign="top" + hasDividers + /> + + ); +}; diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_aize_option.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_aize_option.tsx deleted file mode 100644 index 446c33edbde53..0000000000000 --- a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_aize_option.tsx +++ /dev/null @@ -1,58 +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 - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import React from 'react'; -import { i18n } from '@kbn/i18n'; -import { EuiFormRow, EuiSuperSelect } from '@elastic/eui'; -import { MetricState } from '../../../common/expressions'; - -export interface TitlePositionProps { - state: MetricState; - setState: (newState: MetricState) => void; -} - -const titleSizes = [ - { id: 'xs', label: 'XS' }, - { id: 's', label: 'S' }, - { id: 'm', label: 'M' }, - { id: 'l', label: 'L' }, - { id: 'xl', label: 'XL' }, - { id: 'xxl', label: 'XXL' }, -]; - -export const TitleSizeOptions: React.FC = ({ state, setState }) => { - return ( - - {i18n.translate('xpack.lens.metricChart.titleSizeLabel', { - defaultMessage: 'Title size', - })} - - } - > - { - return { - value: position.id, - dropdownDisplay: position.label, - inputDisplay: position.label, - }; - })} - valueOfSelected={state.titleSize ?? 'xl'} - onChange={(value) => { - setState({ ...state, titleSize: value }); - }} - itemLayoutAlign="top" - hasDividers - /> - - ); -}; diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_align_option.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_align_option.tsx index 7511301f9c497..df74913edcdc3 100644 --- a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_align_option.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_align_option.tsx @@ -16,9 +16,6 @@ export interface TitlePositionProps { } const titleAlignPositions = [ - { id: 'top', label: 'Top', direction: 'column' }, - { id: 'bottom', label: 'Bottom', direction: 'column' }, - { id: 'middle', label: 'Middle', direction: 'column' }, { id: 'left', label: 'Left', direction: 'row' }, { id: 'right', label: 'Right', direction: 'row' }, { id: 'center', label: 'Center', direction: 'row' }, diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx index f3b00edbaf4e9..10de526cc77ca 100644 --- a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx @@ -18,8 +18,6 @@ export interface TitlePositionProps { const titlePositions = [ { id: 'top', label: 'Top' }, { id: 'bottom', label: 'Bottom' }, - { id: 'left', label: 'Left' }, - { id: 'right', label: 'Right' }, ]; export const TitlePositionOptions: React.FC = ({ state, setState }) => { diff --git a/x-pack/plugins/lens/public/metric_visualization/visualization.tsx b/x-pack/plugins/lens/public/metric_visualization/visualization.tsx index 8352057bad69a..962330dd7438c 100644 --- a/x-pack/plugins/lens/public/metric_visualization/visualization.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/visualization.tsx @@ -60,7 +60,7 @@ const toExpression = ( function: 'lens_metric_chart', arguments: { title: [attributes?.title || ''], - titleSize: [state?.titleSize || ''], + size: [state?.size || ''], titlePosition: [state?.titlePosition || 'top'], titleAlignPosition: [state?.titleAlignPosition || 'center'], description: [attributes?.description || ''], From e1b26436ee28697114b3f2a7c05b0a02cf135953 Mon Sep 17 00:00:00 2001 From: shahzad31 Date: Tue, 1 Feb 2022 14:38:09 +0100 Subject: [PATCH 04/15] simplify align --- .../metric_config_panel/align_options.tsx | 67 +++++++++++++++++++ .../appearance_options_popover.tsx | 4 +- .../title_align_option.tsx | 59 ---------------- 3 files changed, 69 insertions(+), 61 deletions(-) create mode 100644 x-pack/plugins/lens/public/metric_visualization/metric_config_panel/align_options.tsx delete mode 100644 x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_align_option.tsx diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/align_options.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/align_options.tsx new file mode 100644 index 0000000000000..93316cbc573c3 --- /dev/null +++ b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/align_options.tsx @@ -0,0 +1,67 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { i18n } from '@kbn/i18n'; +import { EuiFormRow, EuiButtonGroup } from '@elastic/eui'; +import { MetricState } from '../../../common/expressions'; + +export interface TitlePositionProps { + state: MetricState; + setState: (newState: MetricState) => void; +} + +const alignButtonIcons = [ + { + id: `left`, + label: i18n.translate('xpack.lens.metricChart.alignLabel.left', { + defaultMessage: 'Align left', + }), + iconType: 'editorAlignLeft', + }, + { + id: `center`, + label: i18n.translate('xpack.lens.metricChart.alignLabel.center', { + defaultMessage: 'Align center', + }), + iconType: 'editorAlignCenter', + }, + { + id: `right`, + label: i18n.translate('xpack.lens.metricChart.alignLabel.right', { + defaultMessage: 'Align right', + }), + iconType: 'editorAlignRight', + }, +]; + +export const AlignOptions: React.FC = ({ state, setState }) => { + return ( + + {i18n.translate('xpack.lens.metricChart.titleAlignLabel', { + defaultMessage: 'Align', + })} + + } + > + { + setState({ ...state, titleAlignPosition: id }); + }} + isIconOnly + /> + + ); +}; diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/appearance_options_popover.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/appearance_options_popover.tsx index 83ddb7cb5604a..eb95392830af9 100644 --- a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/appearance_options_popover.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/appearance_options_popover.tsx @@ -11,7 +11,7 @@ import { ToolbarPopover, TooltipWrapper } from '../../shared_components'; import { TitlePositionOptions } from './title_position_option'; import { FramePublicAPI } from '../../types'; import { MetricState } from '../../../common/expressions'; -import { TitleAlignOptions } from './title_align_option'; +import { AlignOptions } from './align_options'; import { SizeOptions } from './size_options'; export interface VisualOptionsPopoverProps { @@ -39,9 +39,9 @@ export const AppearanceOptionsPopover: React.FC = ({ groupPosition="none" buttonDataTestSubj="lnsMetricAppearanceButton" > + - ); diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_align_option.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_align_option.tsx deleted file mode 100644 index df74913edcdc3..0000000000000 --- a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_align_option.tsx +++ /dev/null @@ -1,59 +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 - * 2.0; you may not use this file except in compliance with the Elastic License - * 2.0. - */ - -import React from 'react'; -import { i18n } from '@kbn/i18n'; -import { EuiFormRow, EuiSuperSelect } from '@elastic/eui'; -import { MetricState } from '../../../common/expressions'; - -export interface TitlePositionProps { - state: MetricState; - setState: (newState: MetricState) => void; -} - -const titleAlignPositions = [ - { id: 'left', label: 'Left', direction: 'row' }, - { id: 'right', label: 'Right', direction: 'row' }, - { id: 'center', label: 'Center', direction: 'row' }, -]; - -export const TitleAlignOptions: React.FC = ({ state, setState }) => { - const direction = ['top', 'bottom'].includes(state.titlePosition ?? 'top') ? 'column' : 'row'; - - return ( - - {i18n.translate('xpack.lens.metricChart.titleAlignLabel', { - defaultMessage: 'Title align', - })} - - } - > - pos.direction !== direction) - .map((position) => { - return { - value: position.id, - dropdownDisplay: position.label, - inputDisplay: position.label, - }; - })} - valueOfSelected={state.titleAlignPosition ?? 'center'} - onChange={(value) => { - setState({ ...state, titleAlignPosition: value }); - }} - itemLayoutAlign="top" - hasDividers - /> - - ); -}; From c1934ed635b14785649f30ffe32069ac1ab1752d Mon Sep 17 00:00:00 2001 From: shahzad31 Date: Tue, 1 Feb 2022 15:16:14 +0100 Subject: [PATCH 05/15] improve typing --- .../expressions/metric_chart/metric_chart.ts | 6 +++--- .../common/expressions/metric_chart/types.ts | 4 ++-- .../public/metric_visualization/auto_scale.tsx | 10 +++++----- .../public/metric_visualization/expression.tsx | 18 ++---------------- .../metric_config_panel/align_options.tsx | 4 ++-- .../metric_visualization/visualization.tsx | 2 +- 6 files changed, 15 insertions(+), 29 deletions(-) diff --git a/x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts b/x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts index dc057a01ec07c..7e94a9df092e7 100644 --- a/x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts +++ b/x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts @@ -50,10 +50,10 @@ export const metricChart: ExpressionFunctionDefinition< defaultMessage: 'The chart title position.', }), }, - titleAlignPosition: { + textAlign: { types: ['string'], - help: i18n.translate('xpack.lens.metric.titleAlignPosition.help', { - defaultMessage: 'The chart title align position.', + help: i18n.translate('xpack.lens.metric.textAlignPosition.help', { + defaultMessage: 'The chart text align position.', }), }, description: { diff --git a/x-pack/plugins/lens/common/expressions/metric_chart/types.ts b/x-pack/plugins/lens/common/expressions/metric_chart/types.ts index 479c4058fd1e2..00f7d7454061f 100644 --- a/x-pack/plugins/lens/common/expressions/metric_chart/types.ts +++ b/x-pack/plugins/lens/common/expressions/metric_chart/types.ts @@ -18,9 +18,9 @@ export interface MetricState { layerType: LayerType; colorMode?: ColorMode; palette?: PaletteOutput; - titlePosition?: string; + titlePosition?: 'top' | 'bottom'; size?: string; - titleAlignPosition?: string; + textAlign?: 'left' | 'right' | 'center'; } export interface MetricConfig extends Omit { diff --git a/x-pack/plugins/lens/public/metric_visualization/auto_scale.tsx b/x-pack/plugins/lens/public/metric_visualization/auto_scale.tsx index 885586490176f..d7f6f5fa6924e 100644 --- a/x-pack/plugins/lens/public/metric_visualization/auto_scale.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/auto_scale.tsx @@ -15,7 +15,7 @@ interface Props extends React.HTMLAttributes { minScale?: number; size?: string; titlePosition?: string; - titleAlignPosition?: string; + textAlign?: string; } interface State { @@ -60,7 +60,7 @@ export class AutoScale extends React.Component { }; render() { - const { children, minScale, size, titleAlignPosition, titlePosition, ...rest } = this.props; + const { children, minScale, size, textAlign, titlePosition, ...rest } = this.props; const { scale } = this.state; const style = this.props.style || {}; @@ -91,9 +91,9 @@ export class AutoScale extends React.Component { }} className={classNames('lnsMetricExpression_container_scale', { rowDirection: ['left', 'right'].includes(titlePosition ?? ''), - alignStart: ['left', 'top'].includes(titleAlignPosition ?? ''), - alignEnd: ['right', 'bottom'].includes(titleAlignPosition ?? ''), - alignCenter: ['center', 'middle'].includes(titleAlignPosition ?? ''), + alignStart: ['left', 'top'].includes(textAlign ?? ''), + alignEnd: ['right', 'bottom'].includes(textAlign ?? ''), + alignCenter: ['center', 'middle'].includes(textAlign ?? ''), [`titleSize${(size ?? 'xl').toUpperCase()}`]: true, })} > diff --git a/x-pack/plugins/lens/public/metric_visualization/expression.tsx b/x-pack/plugins/lens/public/metric_visualization/expression.tsx index b0c9712a396c1..c10e337126c46 100644 --- a/x-pack/plugins/lens/public/metric_visualization/expression.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/expression.tsx @@ -110,16 +110,7 @@ export function MetricChart({ formatFactory, uiSettings, }: MetricChartProps & { formatFactory: FormatFactory; uiSettings: IUiSettingsClient }) { - const { - metricTitle, - accessor, - mode, - colorMode, - palette, - titlePosition, - titleAlignPosition, - size, - } = args; + const { metricTitle, accessor, mode, colorMode, palette, titlePosition, textAlign, size } = args; const firstTable = Object.values(data.tables)[0]; const getEmptyState = () => ( @@ -154,12 +145,7 @@ export function MetricChart({ return ( - + {mode === 'full' && (
= ({ state, setState }) defaultMessage: 'Align', })} options={alignButtonIcons} - idSelected={state.titleAlignPosition ?? 'center'} + idSelected={state.textAlign ?? 'center'} onChange={(id) => { - setState({ ...state, titleAlignPosition: id }); + setState({ ...state, textAlign: id as MetricState['textAlign'] }); }} isIconOnly /> diff --git a/x-pack/plugins/lens/public/metric_visualization/visualization.tsx b/x-pack/plugins/lens/public/metric_visualization/visualization.tsx index 962330dd7438c..a3933ce1832b7 100644 --- a/x-pack/plugins/lens/public/metric_visualization/visualization.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/visualization.tsx @@ -62,7 +62,7 @@ const toExpression = ( title: [attributes?.title || ''], size: [state?.size || ''], titlePosition: [state?.titlePosition || 'top'], - titleAlignPosition: [state?.titleAlignPosition || 'center'], + textAlign: [state?.textAlign || 'center'], description: [attributes?.description || ''], metricTitle: [operation?.label || ''], accessor: [state.accessor], From b0aaec6b2219c5c3a75d287130ad6976993a53f0 Mon Sep 17 00:00:00 2001 From: shahzad31 Date: Tue, 1 Feb 2022 16:44:49 +0100 Subject: [PATCH 06/15] update typing --- .../metric_config_panel/title_position_option.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx index 10de526cc77ca..a1f5823f19ae6 100644 --- a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx @@ -44,7 +44,7 @@ export const TitlePositionOptions: React.FC = ({ state, setS })} valueOfSelected={state.titlePosition ?? 'top'} onChange={(value) => { - setState({ ...state, titlePosition: value }); + setState({ ...state, titlePosition: value as MetricState['titlePosition'] }); }} itemLayoutAlign="top" hasDividers From da64340c5745de8ab458f7a688c7d3e8c073cce4 Mon Sep 17 00:00:00 2001 From: shahzad31 Date: Thu, 3 Feb 2022 21:56:56 +0100 Subject: [PATCH 07/15] PR feedback --- .../expressions/metric_chart/metric_chart.ts | 8 +- .../metric_visualization/expression.scss | 2 +- .../metric_config_panel/align_options.tsx | 35 +++------ .../appearance_options_popover.tsx | 6 +- .../metric_config_panel/size_options.tsx | 77 +++++++++++-------- .../text_formatting_options.tsx | 43 +++++++++++ .../title_position_option.tsx | 19 ++--- 7 files changed, 111 insertions(+), 79 deletions(-) create mode 100644 x-pack/plugins/lens/public/metric_visualization/metric_config_panel/text_formatting_options.tsx diff --git a/x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts b/x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts index 7e94a9df092e7..98573157c19de 100644 --- a/x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts +++ b/x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts @@ -35,25 +35,25 @@ export const metricChart: ExpressionFunctionDefinition< title: { types: ['string'], help: i18n.translate('xpack.lens.metric.title.help', { - defaultMessage: 'The chart title.', + defaultMessage: 'The visualization title.', }), }, size: { types: ['string'], help: i18n.translate('xpack.lens.metric.size.help', { - defaultMessage: 'The chart size.', + defaultMessage: 'The visualization text size.', }), }, titlePosition: { types: ['string'], help: i18n.translate('xpack.lens.metric.titlePosition.help', { - defaultMessage: 'The chart title position.', + defaultMessage: 'The visualization title position.', }), }, textAlign: { types: ['string'], help: i18n.translate('xpack.lens.metric.textAlignPosition.help', { - defaultMessage: 'The chart text align position.', + defaultMessage: 'The visualization text alignment position.', }), }, description: { diff --git a/x-pack/plugins/lens/public/metric_visualization/expression.scss b/x-pack/plugins/lens/public/metric_visualization/expression.scss index 7522bbeb9f210..b8d22565a1122 100644 --- a/x-pack/plugins/lens/public/metric_visualization/expression.scss +++ b/x-pack/plugins/lens/public/metric_visualization/expression.scss @@ -39,7 +39,7 @@ } &.titleSizeXS { .lnsMetricExpression__title { - font-size: $euiFontSizeS; + font-size: $euiFontSizeXS; } .lnsMetricExpression__value { font-size: $euiFontSizeXS * 2; diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/align_options.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/align_options.tsx index 37974ae9a1877..3074c1fb9cb37 100644 --- a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/align_options.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/align_options.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiFormRow, EuiButtonGroup } from '@elastic/eui'; +import { EuiButtonGroup } from '@elastic/eui'; import { MetricState } from '../../../common/expressions'; export interface TitlePositionProps { @@ -41,27 +41,16 @@ const alignButtonIcons = [ export const AlignOptions: React.FC = ({ state, setState }) => { return ( - - {i18n.translate('xpack.lens.metricChart.titleAlignLabel', { - defaultMessage: 'Align', - })} - - } - > - { - setState({ ...state, textAlign: id as MetricState['textAlign'] }); - }} - isIconOnly - /> - + { + setState({ ...state, textAlign: id as MetricState['textAlign'] }); + }} + isIconOnly + /> ); }; diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/appearance_options_popover.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/appearance_options_popover.tsx index eb95392830af9..973c1e0eedf39 100644 --- a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/appearance_options_popover.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/appearance_options_popover.tsx @@ -11,8 +11,7 @@ import { ToolbarPopover, TooltipWrapper } from '../../shared_components'; import { TitlePositionOptions } from './title_position_option'; import { FramePublicAPI } from '../../types'; import { MetricState } from '../../../common/expressions'; -import { AlignOptions } from './align_options'; -import { SizeOptions } from './size_options'; +import { TextFormattingOptions } from './text_formatting_options'; export interface VisualOptionsPopoverProps { state: MetricState; @@ -39,8 +38,7 @@ export const AppearanceOptionsPopover: React.FC = ({ groupPosition="none" buttonDataTestSubj="lnsMetricAppearanceButton" > - - + diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/size_options.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/size_options.tsx index a01ae55a515dd..7047e9157c973 100644 --- a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/size_options.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/size_options.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiFormRow, EuiSuperSelect } from '@elastic/eui'; +import { EuiButtonIcon, EuiSuperSelect } from '@elastic/eui'; import { MetricState } from '../../../common/expressions'; export interface TitlePositionProps { @@ -19,70 +19,79 @@ const titleSizes = [ { id: 'xs', label: i18n.translate('xpack.lens.metricChart.metricSize.extraSmall', { - defaultMessage: 'Extra small', + defaultMessage: 'XS', }), }, { id: 's', label: i18n.translate('xpack.lens.metricChart.metricSize.small', { - defaultMessage: 'Small', + defaultMessage: 'S', }), }, { id: 'm', label: i18n.translate('xpack.lens.metricChart.metricSize.medium', { - defaultMessage: 'Medium', + defaultMessage: 'M', }), }, { id: 'l', label: i18n.translate('xpack.lens.metricChart.metricSize.large', { - defaultMessage: 'Large', + defaultMessage: 'L', }), }, { id: 'xl', label: i18n.translate('xpack.lens.metricChart.metricSize.extraLarge', { - defaultMessage: 'Extra large', + defaultMessage: 'XL', }), }, { id: 'xxl', label: i18n.translate('xpack.lens.metricChart.metricSize.xxl', { - defaultMessage: 'Extra extra large', + defaultMessage: 'XXL', }), }, ]; export const SizeOptions: React.FC = ({ state, setState }) => { + const currSizeIndex = titleSizes.findIndex((size) => size.id === (state.size || 'xl')); + + const changeSize = (change: number) => { + setState({ ...state, size: titleSizes[currSizeIndex + change].id }); + }; + return ( - - {i18n.translate('xpack.lens.metricChart.metricSizeLabel', { - defaultMessage: 'Size', - })} - + changeSize(1)} + isDisabled={currSizeIndex === titleSizes.length - 1} + /> + } + prepend={ + changeSize(-1)} + isDisabled={currSizeIndex === 0} + /> } - > - { - return { - value: position.id, - dropdownDisplay: position.label, - inputDisplay: position.label, - }; - })} - valueOfSelected={state.size ?? 'xl'} - onChange={(value) => { - setState({ ...state, size: value }); - }} - itemLayoutAlign="top" - hasDividers - /> - + data-test-subj="lnsMetricSizeSelect" + compressed + options={titleSizes.map((position) => { + return { + value: position.id, + dropdownDisplay: position.label, + inputDisplay: position.label, + }; + })} + valueOfSelected={state.size ?? 'xl'} + onChange={(value) => { + setState({ ...state, size: value }); + }} + itemLayoutAlign="top" + hasDividers + /> ); }; diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/text_formatting_options.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/text_formatting_options.tsx new file mode 100644 index 0000000000000..330a2d3b8221b --- /dev/null +++ b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/text_formatting_options.tsx @@ -0,0 +1,43 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { i18n } from '@kbn/i18n'; +import { EuiFormRow, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; +import { MetricState } from '../../../common/expressions'; +import { SizeOptions } from './size_options'; +import { AlignOptions } from './align_options'; + +export interface TitlePositionProps { + state: MetricState; + setState: (newState: MetricState) => void; +} + +export const TextFormattingOptions: React.FC = ({ state, setState }) => { + return ( + + {i18n.translate('xpack.lens.metricChart.titleAlignLabel', { + defaultMessage: 'Text formatting', + })} + + } + > + + + + + + + + + + ); +}; diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx index a1f5823f19ae6..a0eef5e938f6b 100644 --- a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { i18n } from '@kbn/i18n'; -import { EuiFormRow, EuiSuperSelect } from '@elastic/eui'; +import { EuiButtonGroup, EuiFormRow } from '@elastic/eui'; import { MetricState } from '../../../common/expressions'; export interface TitlePositionProps { @@ -32,22 +32,15 @@ export const TitlePositionOptions: React.FC = ({ state, setS } > - { - return { - value: position.id, - dropdownDisplay: position.label, - inputDisplay: position.label, - }; - })} - valueOfSelected={state.titlePosition ?? 'top'} + legend="This is a basic group" + options={titlePositions} + idSelected={state.titlePosition ?? 'top'} onChange={(value) => { setState({ ...state, titlePosition: value as MetricState['titlePosition'] }); }} - itemLayoutAlign="top" - hasDividers /> ); From 5ebd7187fe7ecd9b131836d77015b9964eccbc76 Mon Sep 17 00:00:00 2001 From: shahzad31 Date: Fri, 4 Feb 2022 10:00:18 +0100 Subject: [PATCH 08/15] Design PR feedback --- .../public/metric_visualization/auto_scale.tsx | 16 ++++++++-------- .../public/metric_visualization/expression.scss | 9 +++------ 2 files changed, 11 insertions(+), 14 deletions(-) diff --git a/x-pack/plugins/lens/public/metric_visualization/auto_scale.tsx b/x-pack/plugins/lens/public/metric_visualization/auto_scale.tsx index d7f6f5fa6924e..d3e3112a52586 100644 --- a/x-pack/plugins/lens/public/metric_visualization/auto_scale.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/auto_scale.tsx @@ -9,13 +9,14 @@ import React from 'react'; import { throttle } from 'lodash'; import classNames from 'classnames'; import { EuiResizeObserver } from '@elastic/eui'; +import { MetricState } from '../../common/expressions'; interface Props extends React.HTMLAttributes { children: React.ReactNode | React.ReactNode[]; minScale?: number; - size?: string; - titlePosition?: string; - textAlign?: string; + size?: MetricState['size']; + titlePosition?: MetricState['titlePosition']; + textAlign?: MetricState['textAlign']; } interface State { @@ -89,11 +90,10 @@ export class AutoScale extends React.Component { style={{ transform: `scale(${scale})`, }} - className={classNames('lnsMetricExpression_container_scale', { - rowDirection: ['left', 'right'].includes(titlePosition ?? ''), - alignStart: ['left', 'top'].includes(textAlign ?? ''), - alignEnd: ['right', 'bottom'].includes(textAlign ?? ''), - alignCenter: ['center', 'middle'].includes(textAlign ?? ''), + className={classNames('lnsMetricExpression__containerScale', { + alignLeft: textAlign === 'left', + alignRight: textAlign === 'right', + alignCenter: textAlign === 'center', [`titleSize${(size ?? 'xl').toUpperCase()}`]: true, })} > diff --git a/x-pack/plugins/lens/public/metric_visualization/expression.scss b/x-pack/plugins/lens/public/metric_visualization/expression.scss index b8d22565a1122..fdd22690207fa 100644 --- a/x-pack/plugins/lens/public/metric_visualization/expression.scss +++ b/x-pack/plugins/lens/public/metric_visualization/expression.scss @@ -21,17 +21,14 @@ } } - .lnsMetricExpression_container_scale { + .lnsMetricExpression__containerScale { display: flex; align-items: center; flex-direction: column; - &.rowDirection { - flex-direction: row; - } - &.alignStart { + &.alignLeft { align-items: start; } - &.alignEnd { + &.alignRight { align-items: end; } &.alignCenter { From 9384fa18d69189481eb55e7e329be1f7f4f04c13 Mon Sep 17 00:00:00 2001 From: shahzad31 Date: Tue, 8 Feb 2022 16:55:21 +0100 Subject: [PATCH 09/15] snapshot --- .../plugins/lens/public/metric_visualization/auto_scale.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/x-pack/plugins/lens/public/metric_visualization/auto_scale.test.tsx b/x-pack/plugins/lens/public/metric_visualization/auto_scale.test.tsx index b84ad685e81e6..14b3e3128e5f7 100644 --- a/x-pack/plugins/lens/public/metric_visualization/auto_scale.test.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/auto_scale.test.tsx @@ -53,6 +53,7 @@ describe('AutoScale', () => { style="display:flex;justify-content:center;align-items:center;max-width:100%;max-height:100%;overflow:hidden;line-height:1.5" >

From 3bfdf0be5ec7e87da4dfce3fcd4e0c2ce3c62003 Mon Sep 17 00:00:00 2001 From: shahzad31 Date: Wed, 9 Feb 2022 11:50:54 +0100 Subject: [PATCH 10/15] update snap --- .../metric_visualization/expression.test.tsx | 48 +++++++++---------- .../text_formatting_options.tsx | 2 +- .../visualization.test.ts | 9 ++++ 3 files changed, 34 insertions(+), 25 deletions(-) diff --git a/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx b/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx index 3ec2f4c285c4e..5d5369f4e62d0 100644 --- a/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/expression.test.tsx @@ -99,18 +99,18 @@ describe('metric_expression', () => { -
- 3 -
My fanci metric chart
+
+ 3 +
`); @@ -137,18 +137,18 @@ describe('metric_expression', () => { -
- last -
My fanci metric chart
+
+ last +
`); @@ -174,18 +174,18 @@ describe('metric_expression', () => { -
- 3 -
My fanci metric chart
+
+ 3 +
`); @@ -292,18 +292,18 @@ describe('metric_expression', () => { -
- 0 -
My fanci metric chart
+
+ 0 +
`); diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/text_formatting_options.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/text_formatting_options.tsx index 330a2d3b8221b..606b6aefe6a6d 100644 --- a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/text_formatting_options.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/text_formatting_options.tsx @@ -24,7 +24,7 @@ export const TextFormattingOptions: React.FC = ({ state, set display="columnCompressed" label={ <> - {i18n.translate('xpack.lens.metricChart.titleAlignLabel', { + {i18n.translate('xpack.lens.metricChart.textFormattingLabel', { defaultMessage: 'Text formatting', })} diff --git a/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts b/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts index bba08c1aa2442..8d169d88b36a9 100644 --- a/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts +++ b/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts @@ -300,9 +300,18 @@ describe('metric_visualization', () => { "full", ], "palette": Array [], + "size": Array [ + "", + ], + "textAlign": Array [ + "center", + ], "title": Array [ "", ], + "titlePosition": Array [ + "top", + ], }, "function": "lens_metric_chart", "type": "function", From 56c0bb48915349c9cbc1ef6fcb8013b75a459cdc Mon Sep 17 00:00:00 2001 From: shahzad31 Date: Fri, 11 Feb 2022 10:11:40 +0100 Subject: [PATCH 11/15] design suggestions --- .../metric_config_panel/align_options.tsx | 1 + .../metric_visualization/metric_config_panel/size_options.tsx | 1 + .../metric_config_panel/text_formatting_options.tsx | 4 ++-- .../metric_config_panel/title_position_option.tsx | 2 ++ 4 files changed, 6 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/align_options.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/align_options.tsx index 3074c1fb9cb37..d97aa08661005 100644 --- a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/align_options.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/align_options.tsx @@ -51,6 +51,7 @@ export const AlignOptions: React.FC = ({ state, setState }) setState({ ...state, textAlign: id as MetricState['textAlign'] }); }} isIconOnly + buttonSize="compressed" /> ); }; diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/size_options.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/size_options.tsx index 7047e9157c973..d33d72751a203 100644 --- a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/size_options.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/size_options.tsx @@ -92,6 +92,7 @@ export const SizeOptions: React.FC = ({ state, setState }) = }} itemLayoutAlign="top" hasDividers + fullWidth /> ); }; diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/text_formatting_options.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/text_formatting_options.tsx index 606b6aefe6a6d..9215d27ebb874 100644 --- a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/text_formatting_options.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/text_formatting_options.tsx @@ -30,11 +30,11 @@ export const TextFormattingOptions: React.FC = ({ state, set } > - + - + diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx index a0eef5e938f6b..6d8c41253dcf4 100644 --- a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx @@ -24,6 +24,7 @@ export const TitlePositionOptions: React.FC = ({ state, setS return ( {i18n.translate('xpack.lens.metricChart.titlePositionLabel', { @@ -41,6 +42,7 @@ export const TitlePositionOptions: React.FC = ({ state, setS onChange={(value) => { setState({ ...state, titlePosition: value as MetricState['titlePosition'] }); }} + buttonSize="compressed" /> ); From b139f93369592c7767ed69da644ebbdc8e1e2b0a Mon Sep 17 00:00:00 2001 From: Uladzislau Lasitsa Date: Tue, 15 Feb 2022 16:05:57 +0300 Subject: [PATCH 12/15] Use bottom as default position for title and some other small refactoring --- .../lens/common/expressions/metric_chart/metric_chart.ts | 3 +++ .../plugins/lens/public/metric_visualization/auto_scale.tsx | 2 +- .../metric_config_panel/title_position_option.tsx | 2 +- .../lens/public/metric_visualization/visualization.test.ts | 2 +- .../lens/public/metric_visualization/visualization.tsx | 4 ++-- 5 files changed, 8 insertions(+), 5 deletions(-) diff --git a/x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts b/x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts index 98573157c19de..f5808cee9d000 100644 --- a/x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts +++ b/x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts @@ -43,18 +43,21 @@ export const metricChart: ExpressionFunctionDefinition< help: i18n.translate('xpack.lens.metric.size.help', { defaultMessage: 'The visualization text size.', }), + default: 'xl', }, titlePosition: { types: ['string'], help: i18n.translate('xpack.lens.metric.titlePosition.help', { defaultMessage: 'The visualization title position.', }), + default: 'bottom', }, textAlign: { types: ['string'], help: i18n.translate('xpack.lens.metric.textAlignPosition.help', { defaultMessage: 'The visualization text alignment position.', }), + default: 'center', }, description: { types: ['string'], diff --git a/x-pack/plugins/lens/public/metric_visualization/auto_scale.tsx b/x-pack/plugins/lens/public/metric_visualization/auto_scale.tsx index d3e3112a52586..7e47405f9258a 100644 --- a/x-pack/plugins/lens/public/metric_visualization/auto_scale.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/auto_scale.tsx @@ -94,7 +94,7 @@ export class AutoScale extends React.Component { alignLeft: textAlign === 'left', alignRight: textAlign === 'right', alignCenter: textAlign === 'center', - [`titleSize${(size ?? 'xl').toUpperCase()}`]: true, + [`titleSize${size?.toUpperCase()}`]: Boolean(size), })} > {children} diff --git a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx index 6d8c41253dcf4..c35567bb69537 100644 --- a/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/metric_config_panel/title_position_option.tsx @@ -38,7 +38,7 @@ export const TitlePositionOptions: React.FC = ({ state, setS data-test-subj="lnsMissingValuesSelect" legend="This is a basic group" options={titlePositions} - idSelected={state.titlePosition ?? 'top'} + idSelected={state.titlePosition ?? 'bottom'} onChange={(value) => { setState({ ...state, titlePosition: value as MetricState['titlePosition'] }); }} diff --git a/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts b/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts index 8d169d88b36a9..281e4363df105 100644 --- a/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts +++ b/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts @@ -310,7 +310,7 @@ describe('metric_visualization', () => { "", ], "titlePosition": Array [ - "top", + "bottom", ], }, "function": "lens_metric_chart", diff --git a/x-pack/plugins/lens/public/metric_visualization/visualization.tsx b/x-pack/plugins/lens/public/metric_visualization/visualization.tsx index 41d92d18c5a60..ad8c6123562e6 100644 --- a/x-pack/plugins/lens/public/metric_visualization/visualization.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/visualization.tsx @@ -60,8 +60,8 @@ const toExpression = ( function: 'lens_metric_chart', arguments: { title: [attributes?.title || ''], - size: [state?.size || ''], - titlePosition: [state?.titlePosition || 'top'], + size: [state?.size || 'xl'], + titlePosition: [state?.titlePosition || 'bottom'], textAlign: [state?.textAlign || 'center'], description: [attributes?.description || ''], metricTitle: [operation?.label || ''], From e4d3b03894cd90e15d8bc4f17e9e99299cbf743d Mon Sep 17 00:00:00 2001 From: Uladzislau Lasitsa Date: Tue, 15 Feb 2022 17:32:02 +0300 Subject: [PATCH 13/15] Fix test --- .../lens/public/metric_visualization/visualization.test.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts b/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts index 281e4363df105..aacb4f8fc4dc7 100644 --- a/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts +++ b/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts @@ -298,10 +298,10 @@ describe('metric_visualization', () => { ], "mode": Array [ "full", - ], + ],s "palette": Array [], "size": Array [ - "", + "xl", ], "textAlign": Array [ "center", From cd89b4e7a31e18bd5f11a372902e8576118cfa6d Mon Sep 17 00:00:00 2001 From: Uladzislau Lasitsa Date: Tue, 15 Feb 2022 17:34:27 +0300 Subject: [PATCH 14/15] Fix shapshot --- .../lens/public/metric_visualization/visualization.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts b/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts index aacb4f8fc4dc7..fedd58f3b0807 100644 --- a/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts +++ b/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts @@ -298,7 +298,7 @@ describe('metric_visualization', () => { ], "mode": Array [ "full", - ],s + ], "palette": Array [], "size": Array [ "xl", From 8726fb80b2f8c98c341ff30b0e7c7f0bd033616f Mon Sep 17 00:00:00 2001 From: Uladzislau Lasitsa Date: Tue, 15 Feb 2022 18:59:22 +0300 Subject: [PATCH 15/15] Fix shapshot --- .../lens/public/metric_visualization/auto_scale.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/x-pack/plugins/lens/public/metric_visualization/auto_scale.test.tsx b/x-pack/plugins/lens/public/metric_visualization/auto_scale.test.tsx index 14b3e3128e5f7..b7584ffa9eb7e 100644 --- a/x-pack/plugins/lens/public/metric_visualization/auto_scale.test.tsx +++ b/x-pack/plugins/lens/public/metric_visualization/auto_scale.test.tsx @@ -53,7 +53,7 @@ describe('AutoScale', () => { style="display:flex;justify-content:center;align-items:center;max-width:100%;max-height:100%;overflow:hidden;line-height:1.5" >