github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Lens] update default legend size to medium (#130336)

Browse source
This commit is contained in:
Andrew Tate 2022-05-10 08:03:05 -05:00 • committed by GitHub
parent 2a51a37bcb
commit 57597f7617
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
64 changed files with 835 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/plugins/chart_expressions/expression_heatmap/common/expression_functions/heatmap_legend.ts
View file

@ -8,6 +8,7 @@
import { Position } from '@elastic/charts';
import { i18n } from '@kbn/i18n';
import type { ExpressionFunctionDefinition } from '@kbn/expressions-plugin/common';
import { DEFAULT_LEGEND_SIZE, LegendSize } from '@kbn/visualizations-plugin/common/constants';
import { EXPRESSION_HEATMAP_LEGEND_NAME } from '../constants';
import { HeatmapLegendConfig, HeatmapLegendConfigResult } from '../types';
@ -52,10 +53,19 @@ export const heatmapLegendConfig: ExpressionFunctionDefinition<
}),
},
legendSize: {
types: ['number'],
types: ['string'],
default: DEFAULT_LEGEND_SIZE,
help: i18n.translate('expressionHeatmap.function.args.legendSize.help', {
defaultMessage: 'Specifies the legend size in pixels.',
defaultMessage: 'Specifies the legend size.',
}),
options: [
LegendSize.AUTO,
LegendSize.SMALL,
LegendSize.MEDIUM,
LegendSize.LARGE,
LegendSize.EXTRA_LARGE,
],
strict: true,
},
},
fn(input, args) {

3
src/plugins/chart_expressions/expression_heatmap/common/types/expression_functions.ts
View file

@ -15,6 +15,7 @@ import {
import { ExpressionValueVisDimension } from '@kbn/visualizations-plugin/common';
import { CustomPaletteState } from '@kbn/charts-plugin/common';
import { LegendSize } from '@kbn/visualizations-plugin/public';
import {
EXPRESSION_HEATMAP_NAME,
EXPRESSION_HEATMAP_LEGEND_NAME,
@ -43,7 +44,7 @@ export interface HeatmapLegendConfig {
* Exact legend width (vertical) or height (horizontal)
* Limited to max of 70% of the chart container dimension Vertical legends limited to min of 30% of computed width
*/
legendSize?: number;
legendSize?: LegendSize;
}
export type HeatmapLegendConfigResult = HeatmapLegendConfig & {

29
src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.test.tsx
View file

@ -17,6 +17,7 @@ import { findTestSubject } from '@elastic/eui/lib/test';
import { act } from 'react-dom/test-utils';
import { HeatmapRenderProps, HeatmapArguments } from '../../common';
import HeatmapComponent from './heatmap_component';
import { LegendSize } from '@kbn/visualizations-plugin/common';
jest.mock('@elastic/charts', () => {
const original = jest.requireActual('@elastic/charts');
@ -47,6 +48,7 @@ const args: HeatmapArguments = {
isVisible: true,
position: 'top',
type: 'heatmap_legend',
legendSize: LegendSize.SMALL,
},
gridConfig: {
isCellLabelVisible: true,
@ -119,6 +121,33 @@ describe('HeatmapComponent', function () {
expect(component.find(Settings).prop('legendPosition')).toEqual('top');
});
it('sets correct legend sizes', () => {
const component = shallowWithIntl(<HeatmapComponent {...wrapperProps} />);
expect(component.find(Settings).prop('legendSize')).toEqual(80);
component.setProps({
args: {
...args,
legend: {
...args.legend,
legendSize: LegendSize.AUTO,
},
},
});
expect(component.find(Settings).prop('legendSize')).toBeUndefined();
component.setProps({
args: {
...args,
legend: {
...args.legend,
legendSize: undefined,
},
},
});
expect(component.find(Settings).prop('legendSize')).toEqual(130);
});
it('renders the legend toggle component if uiState is set', async () => {
const component = mountWithIntl(<HeatmapComponent {...wrapperProps} />);
await actWithTimeout(async () => {

6
src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx
View file

@ -29,6 +29,10 @@ import {
getAccessorByDimension,
getFormatByAccessor,
} from '@kbn/visualizations-plugin/common/utils';
import {
DEFAULT_LEGEND_SIZE,
LegendSizeToPixels,
} from '@kbn/visualizations-plugin/common/constants';
import type { HeatmapRenderProps, FilterEvent, BrushEvent } from '../../common';
import { applyPaletteParams, findMinMaxByColumnId, getSortPredicate } from './helpers';
import {
@ -485,7 +489,7 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
onElementClick={interactive ? (onElementClick as ElementClickListener) : undefined}
showLegend={showLegend ?? args.legend.isVisible}
legendPosition={args.legend.position}
legendSize={args.legend.legendSize}
legendSize={LegendSizeToPixels[args.legend.legendSize ?? DEFAULT_LEGEND_SIZE]}
legendColorPicker={uiState ? LegendColorPickerWrapper : undefined}
debugState={window._echDebugStateFlag ?? false}
tooltip={tooltip}

2
src/plugins/chart_expressions/expression_partition_vis/common/expression_functions/__snapshots__/mosaic_vis_function.test.ts.snap generated
View file

@ -112,7 +112,7 @@ Object {
},
"legendDisplay": "show",
"legendPosition": "right",
"legendSize": undefined,
"legendSize": "medium",
"maxLegendLines": 2,
"metric": Object {
"accessor": 0,

4
src/plugins/chart_expressions/expression_partition_vis/common/expression_functions/__snapshots__/pie_vis_function.test.ts.snap generated
View file

@ -112,7 +112,7 @@ Object {
},
"legendDisplay": "show",
"legendPosition": "right",
"legendSize": undefined,
"legendSize": "small",
"maxLegendLines": 2,
"metric": Object {
"accessor": 0,
@ -246,7 +246,7 @@ Object {
},
"legendDisplay": "show",
"legendPosition": "right",
"legendSize": undefined,
"legendSize": "small",
"maxLegendLines": 2,
"metric": Object {
"accessor": 0,

2
src/plugins/chart_expressions/expression_partition_vis/common/expression_functions/__snapshots__/treemap_vis_function.test.ts.snap generated
View file

@ -112,7 +112,7 @@ Object {
},
"legendDisplay": "show",
"legendPosition": "right",
"legendSize": undefined,
"legendSize": "medium",
"maxLegendLines": 2,
"metric": Object {
"accessor": 0,

2
src/plugins/chart_expressions/expression_partition_vis/common/expression_functions/__snapshots__/waffle_vis_function.test.ts.snap generated
View file

@ -86,7 +86,7 @@ Object {
},
"legendDisplay": "show",
"legendPosition": "right",
"legendSize": undefined,
"legendSize": "medium",
"maxLegendLines": 2,
"metric": Object {
"accessor": 0,

2
src/plugins/chart_expressions/expression_partition_vis/common/expression_functions/i18n.ts
View file

@ -47,7 +47,7 @@ export const strings = {
}),
getLegendSizeArgHelp: () =>
i18n.translate('expressionPartitionVis.reusable.function.args.legendSizeHelpText', {
defaultMessage: 'Specifies the legend size in pixels',
defaultMessage: 'Specifies the legend size',
}),
getNestedLegendArgHelp: () =>
i18n.translate('expressionPartitionVis.reusable.function.args.nestedLegendHelpText', {

12
src/plugins/chart_expressions/expression_partition_vis/common/expression_functions/mosaic_vis_function.ts
View file

@ -8,6 +8,7 @@
import { Position } from '@elastic/charts';
import { prepareLogTable, validateAccessor } from '@kbn/visualizations-plugin/common/utils';
import { DEFAULT_LEGEND_SIZE, LegendSize } from '@kbn/visualizations-plugin/common/constants';
import { LegendDisplay, PartitionVisParams } from '../types/expression_renderers';
import { ChartTypes, MosaicVisExpressionFunctionDefinition } from '../types';
import {
@ -64,8 +65,17 @@ export const mosaicVisFunction = (): MosaicVisExpressionFunctionDefinition => ({
strict: true,
},
legendSize: {
types: ['number'],
types: ['string'],
default: DEFAULT_LEGEND_SIZE,
help: strings.getLegendSizeArgHelp(),
options: [
LegendSize.AUTO,
LegendSize.SMALL,
LegendSize.MEDIUM,
LegendSize.LARGE,
LegendSize.EXTRA_LARGE,
],
strict: true,
},
nestedLegend: {
types: ['boolean'],

3
src/plugins/chart_expressions/expression_partition_vis/common/expression_functions/pie_vis_function.test.ts
View file

@ -14,7 +14,7 @@ import {
ValueFormats,
LegendDisplay,
} from '../types/expression_renderers';
import { ExpressionValueVisDimension } from '@kbn/visualizations-plugin/common';
import { ExpressionValueVisDimension, LegendSize } from '@kbn/visualizations-plugin/common';
import { Datatable } from '@kbn/expressions-plugin/common/expression_types/specs';
import { pieVisFunction } from './pie_vis_function';
import { PARTITION_LABELS_VALUE } from '../constants';
@ -31,6 +31,7 @@ describe('interpreter/functions#pieVis', () => {
addTooltip: true,
legendDisplay: LegendDisplay.SHOW,
legendPosition: 'right',
legendSize: LegendSize.SMALL,
isDonut: true,
emptySizeRatio: EmptySizeRatios.SMALL,
nestedLegend: true,

12
src/plugins/chart_expressions/expression_partition_vis/common/expression_functions/pie_vis_function.ts
View file

@ -8,6 +8,7 @@
import { Position } from '@elastic/charts';
import { prepareLogTable, validateAccessor } from '@kbn/visualizations-plugin/common/utils';
import { DEFAULT_LEGEND_SIZE, LegendSize } from '@kbn/visualizations-plugin/common/constants';
import { EmptySizeRatios, LegendDisplay, PartitionVisParams } from '../types/expression_renderers';
import { ChartTypes, PieVisExpressionFunctionDefinition } from '../types';
import {
@ -64,8 +65,17 @@ export const pieVisFunction = (): PieVisExpressionFunctionDefinition => ({
strict: true,
},
legendSize: {
types: ['number'],
types: ['string'],
default: DEFAULT_LEGEND_SIZE,
help: strings.getLegendSizeArgHelp(),
options: [
LegendSize.AUTO,
LegendSize.SMALL,
LegendSize.MEDIUM,
LegendSize.LARGE,
LegendSize.EXTRA_LARGE,
],
strict: true,
},
nestedLegend: {
types: ['boolean'],

12
src/plugins/chart_expressions/expression_partition_vis/common/expression_functions/treemap_vis_function.ts
View file

@ -8,6 +8,7 @@
import { Position } from '@elastic/charts';
import { prepareLogTable, validateAccessor } from '@kbn/visualizations-plugin/common/utils';
import { DEFAULT_LEGEND_SIZE, LegendSize } from '@kbn/visualizations-plugin/common/constants';
import { LegendDisplay, PartitionVisParams } from '../types/expression_renderers';
import { ChartTypes, TreemapVisExpressionFunctionDefinition } from '../types';
import {
@ -64,8 +65,17 @@ export const treemapVisFunction = (): TreemapVisExpressionFunctionDefinition =>
strict: true,
},
legendSize: {
types: ['number'],
types: ['string'],
default: DEFAULT_LEGEND_SIZE,
help: strings.getLegendSizeArgHelp(),
options: [
LegendSize.AUTO,
LegendSize.SMALL,
LegendSize.MEDIUM,
LegendSize.LARGE,
LegendSize.EXTRA_LARGE,
],
strict: true,
},
nestedLegend: {
types: ['boolean'],

12
src/plugins/chart_expressions/expression_partition_vis/common/expression_functions/waffle_vis_function.ts
View file

@ -8,6 +8,7 @@
import { Position } from '@elastic/charts';
import { prepareLogTable, validateAccessor } from '@kbn/visualizations-plugin/common/utils';
import { DEFAULT_LEGEND_SIZE, LegendSize } from '@kbn/visualizations-plugin/common/constants';
import { LegendDisplay, PartitionVisParams } from '../types/expression_renderers';
import { ChartTypes, WaffleVisExpressionFunctionDefinition } from '../types';
import {
@ -63,8 +64,17 @@ export const waffleVisFunction = (): WaffleVisExpressionFunctionDefinition => ({
strict: true,
},
legendSize: {
types: ['number'],
types: ['string'],
default: DEFAULT_LEGEND_SIZE,
help: strings.getLegendSizeArgHelp(),
options: [
LegendSize.AUTO,
LegendSize.SMALL,
LegendSize.MEDIUM,
LegendSize.LARGE,
LegendSize.EXTRA_LARGE,
],
strict: true,
},
truncateLegend: {
types: ['boolean'],

3
src/plugins/chart_expressions/expression_partition_vis/common/types/expression_renderers.ts
View file

@ -11,6 +11,7 @@ import type { PaletteOutput } from '@kbn/coloring';
import { Datatable, DatatableColumn } from '@kbn/expressions-plugin/common';
import { SerializedFieldFormat } from '@kbn/field-formats-plugin/common';
import { ExpressionValueVisDimension } from '@kbn/visualizations-plugin/common';
import { LegendSize } from '@kbn/visualizations-plugin/public';
import { ChartTypes, ExpressionValuePartitionLabels } from './expression_functions';
export enum EmptySizeRatios {
@ -52,7 +53,7 @@ interface VisCommonParams {
legendPosition: Position;
truncateLegend: boolean;
maxLegendLines: number;
legendSize?: number;
legendSize?: LegendSize;
ariaLabel?: string;
}

5
src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap generated
View file

@ -247,6 +247,7 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = `
legendColorPicker={[Function]}
legendMaxDepth={1}
legendPosition="right"
legendSize={130}
onElementClick={[Function]}
onRenderChange={[Function]}
showLegend={true}
@ -674,6 +675,7 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] =
legendAction={[Function]}
legendColorPicker={[Function]}
legendPosition="right"
legendSize={130}
onElementClick={[Function]}
onRenderChange={[Function]}
showLegend={true}
@ -1054,6 +1056,7 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = `
legendColorPicker={[Function]}
legendMaxDepth={1}
legendPosition="right"
legendSize={130}
onElementClick={[Function]}
onRenderChange={[Function]}
showLegend={true}
@ -1465,6 +1468,7 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] =
legendAction={[Function]}
legendColorPicker={[Function]}
legendPosition="right"
legendSize={130}
onElementClick={[Function]}
onRenderChange={[Function]}
showLegend={true}
@ -1866,6 +1870,7 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] =
legendColorPicker={[Function]}
legendMaxDepth={1}
legendPosition="right"
legendSize={130}
onElementClick={[Function]}
onRenderChange={[Function]}
showLegend={true}

30
src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.test.tsx
View file

@ -25,6 +25,7 @@ import {
createMockWaffleParams,
} from '../mocks';
import { ChartTypes } from '../../common/types';
import { LegendSize } from '@kbn/visualizations-plugin/common';
jest.mock('@elastic/charts', () => {
const original = jest.requireActual('@elastic/charts');
@ -177,6 +178,35 @@ describe('PartitionVisComponent', function () {
expect(component.find(Settings).prop('legendMaxDepth')).toBeUndefined();
});
it('sets correct legend sizes', () => {
const component = shallow(
<PartitionVisComponent
{...wrapperProps}
visParams={{
...visParams,
legendSize: LegendSize.SMALL,
}}
/>
);
expect(component.find(Settings).prop('legendSize')).toEqual(80);
component.setProps({
visParams: {
...visParams,
legendSize: LegendSize.AUTO,
},
});
expect(component.find(Settings).prop('legendSize')).toBeUndefined();
component.setProps({
visParams: {
...visParams,
legendSize: undefined,
},
});
expect(component.find(Settings).prop('legendSize')).toEqual(130);
});
it('defaults on displaying the tooltip', () => {
const component = shallow(<PartitionVisComponent {...wrapperProps} />);
expect(component.find(Settings).prop('tooltip')).toStrictEqual({ type: TooltipType.Follow });

8
src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx
View file

@ -22,7 +22,11 @@ import {
import { useEuiTheme } from '@elastic/eui';
import type { PaletteRegistry } from '@kbn/coloring';
import { LegendToggle, ChartsPluginSetup } from '@kbn/charts-plugin/public';
import type { PersistedState } from '@kbn/visualizations-plugin/public';
import {
DEFAULT_LEGEND_SIZE,
LegendSizeToPixels,
} from '@kbn/visualizations-plugin/common/constants';
import { PersistedState } from '@kbn/visualizations-plugin/public';
import { getColumnByAccessor } from '@kbn/visualizations-plugin/common/utils';
import {
Datatable,
@ -387,7 +391,7 @@ const PartitionVisComponent = (props: PartitionVisComponentProps) => {
showLegend ?? shouldShowLegend(visType, visParams.legendDisplay, bucketColumns)
}
legendPosition={legendPosition}
legendSize={visParams.legendSize}
legendSize={LegendSizeToPixels[visParams.legendSize ?? DEFAULT_LEGEND_SIZE]}
legendMaxDepth={visParams.nestedLegend ? undefined : 1}
legendColorPicker={props.uiState ? LegendColorPickerWrapper : undefined}
flatLegend={flatLegend}

14
src/plugins/chart_expressions/expression_xy/common/expression_functions/legend_config.ts
View file

@ -8,6 +8,7 @@
import { HorizontalAlignment, Position, VerticalAlignment } from '@elastic/charts';
import { i18n } from '@kbn/i18n';
import { DEFAULT_LEGEND_SIZE, LegendSize } from '@kbn/visualizations-plugin/common/constants';
import { LEGEND_CONFIG } from '../constants';
import { LegendConfigFn } from '../types';
@ -85,10 +86,19 @@ export const legendConfigFunction: LegendConfigFn = {
}),
},
legendSize: {
types: ['number'],
types: ['string'],
default: DEFAULT_LEGEND_SIZE,
help: i18n.translate('expressionXY.legendConfig.legendSize.help', {
defaultMessage: 'Specifies the legend size in pixels.',
defaultMessage: 'Specifies the legend size.',
}),
options: [
LegendSize.AUTO,
LegendSize.SMALL,
LegendSize.MEDIUM,
LegendSize.LARGE,
LegendSize.EXTRA_LARGE,
],
strict: true,
},
},
async fn(input, args, handlers) {

3
src/plugins/chart_expressions/expression_xy/common/types/expression_functions.ts
View file

@ -10,6 +10,7 @@ import { HorizontalAlignment, Position, VerticalAlignment } from '@elastic/chart
import { $Values } from '@kbn/utility-types';
import type { PaletteOutput } from '@kbn/coloring';
import { Datatable, ExpressionFunctionDefinition } from '@kbn/expressions-plugin';
import { LegendSize } from '@kbn/visualizations-plugin/public';
import { EventAnnotationOutput } from '@kbn/event-annotation-plugin/common';
import {
AxisExtentModes,
@ -170,7 +171,7 @@ export interface LegendConfig {
* Exact legend width (vertical) or height (horizontal)
* Limited to max of 70% of the chart container dimension Vertical legends limited to min of 30% of computed width
*/
legendSize?: number;
legendSize?: LegendSize;
}
export interface LabelsOrientationConfig {

7
src/plugins/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap generated
View file

@ -305,6 +305,7 @@ exports[`XYChart component it renders area 1`] = `
}
}
legendPosition="top"
legendSize={130}
onBrushEnd={[Function]}
onElementClick={[Function]}
onPointerUpdate={[Function]}
@ -846,6 +847,7 @@ exports[`XYChart component it renders bar 1`] = `
}
}
legendPosition="top"
legendSize={130}
onBrushEnd={[Function]}
onElementClick={[Function]}
onPointerUpdate={[Function]}
@ -1387,6 +1389,7 @@ exports[`XYChart component it renders horizontal bar 1`] = `
}
}
legendPosition="top"
legendSize={130}
onBrushEnd={[Function]}
onElementClick={[Function]}
onPointerUpdate={[Function]}
@ -1928,6 +1931,7 @@ exports[`XYChart component it renders line 1`] = `
}
}
legendPosition="top"
legendSize={130}
onBrushEnd={[Function]}
onElementClick={[Function]}
onPointerUpdate={[Function]}
@ -2469,6 +2473,7 @@ exports[`XYChart component it renders stacked area 1`] = `
}
}
legendPosition="top"
legendSize={130}
onBrushEnd={[Function]}
onElementClick={[Function]}
onPointerUpdate={[Function]}
@ -3010,6 +3015,7 @@ exports[`XYChart component it renders stacked bar 1`] = `
}
}
legendPosition="top"
legendSize={130}
onBrushEnd={[Function]}
onElementClick={[Function]}
onPointerUpdate={[Function]}
@ -3551,6 +3557,7 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = `
}
}
legendPosition="top"
legendSize={130}
onBrushEnd={[Function]}
onElementClick={[Function]}
onPointerUpdate={[Function]}

32
src/plugins/chart_expressions/expression_xy/public/components/xy_chart.test.tsx
View file

@ -57,6 +57,7 @@ import {
} from '../../common/types';
import { DataLayers } from './data_layers';
import { Annotations } from './annotations';
import { LegendSize } from '@kbn/visualizations-plugin/common';
const onClickValue = jest.fn();
const onSelectRange = jest.fn();
@ -2377,6 +2378,37 @@ describe('XYChart component', () => {
expect(component.find(Settings).prop('legendPosition')).toEqual('top');
});
it('computes correct legend sizes', () => {
const { args } = sampleArgs();
const component = shallow(
<XYChart
{...defaultProps}
args={{
...args,
legend: { ...args.legend, legendSize: LegendSize.SMALL },
}}
/>
);
expect(component.find(Settings).prop('legendSize')).toEqual(80);
component.setProps({
args: {
...args,
legend: { ...args.legend, legendSize: LegendSize.AUTO },
},
});
expect(component.find(Settings).prop('legendSize')).toBeUndefined();
component.setProps({
args: {
...args,
legend: { ...args.legend, legendSize: undefined },
},
});
expect(component.find(Settings).prop('legendSize')).toEqual(130);
});
test('it should apply the fitting function to all non-bar series', () => {
const data: Datatable = createSampleDatatableWithRows([
{ a: 1, b: 2, c: 'I', d: 'Foo' },

6
src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx
View file

@ -33,6 +33,10 @@ import { EmptyPlaceholder } from '@kbn/charts-plugin/public';
import { EventAnnotationServiceType } from '@kbn/event-annotation-plugin/public';
import { ChartsPluginSetup, ChartsPluginStart, useActiveCursor } from '@kbn/charts-plugin/public';
import { MULTILAYER_TIME_AXIS_STYLE } from '@kbn/charts-plugin/common';
import {
DEFAULT_LEGEND_SIZE,
LegendSizeToPixels,
} from '@kbn/visualizations-plugin/common/constants';
import type { FilterEvent, BrushEvent, FormatFactory } from '../types';
import type { CommonXYDataLayerConfig, SeriesType, XYChartProps } from '../../common/types';
import {
@ -506,7 +510,7 @@ export function XYChart({
: legend.isVisible
}
legendPosition={legend?.isInside ? legendInsideParams : legend.position}
legendSize={legend.legendSize}
legendSize={LegendSizeToPixels[legend.legendSize ?? DEFAULT_LEGEND_SIZE]}
theme={{
...chartTheme,
barSeriesStyle: {

11
src/plugins/vis_default_editor/kibana.json
View file

@ -3,7 +3,16 @@
"version": "kibana",
"ui": true,
"optionalPlugins": ["visualizations"],
"requiredBundles": ["unifiedSearch", "kibanaUtils", "kibanaReact", "data", "fieldFormats", "discover", "esUiShared"],
"requiredBundles": [
"unifiedSearch",
"kibanaUtils",
"kibanaReact",
"data",
"fieldFormats",
"discover",
"esUiShared",
"visualizations"
],
"owner": {
"name": "Vis Editors",
"githubTeam": "kibana-vis-editors"

83
src/plugins/vis_default_editor/public/components/options/legend_size_settings.test.tsx Normal file
View file

@ -0,0 +1,83 @@
/*
* 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 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import React from 'react';
import { LegendSizeSettings } from './legend_size_settings';
import { LegendSize, DEFAULT_LEGEND_SIZE } from '@kbn/visualizations-plugin/public';
import { EuiSuperSelect } from '@elastic/eui';
import { shallow } from 'enzyme';
describe('legend size settings', () => {
it('select is disabled if not vertical legend', () => {
const instance = shallow(
<LegendSizeSettings
legendSize={undefined}
onLegendSizeChange={() => {}}
isVerticalLegend={false}
showAutoOption={true}
/>
);
expect(instance.find(EuiSuperSelect).props().disabled).toBeTruthy();
});
it('reflects current setting in select', () => {
const CURRENT_SIZE = LegendSize.SMALL;
const instance = shallow(
<LegendSizeSettings
legendSize={CURRENT_SIZE}
onLegendSizeChange={() => {}}
isVerticalLegend={true}
showAutoOption={true}
/>
);
expect(instance.find(EuiSuperSelect).props().valueOfSelected).toBe(CURRENT_SIZE);
});
it('allows user to select a new option', () => {
const onSizeChange = jest.fn();
const instance = shallow(
<LegendSizeSettings
legendSize={LegendSize.SMALL}
onLegendSizeChange={onSizeChange}
isVerticalLegend={true}
showAutoOption={true}
/>
);
const onChange = instance.find(EuiSuperSelect).props().onChange;
onChange(LegendSize.EXTRA_LARGE);
onChange(DEFAULT_LEGEND_SIZE);
expect(onSizeChange).toHaveBeenNthCalledWith(1, LegendSize.EXTRA_LARGE);
expect(onSizeChange).toHaveBeenNthCalledWith(2, undefined);
});
it('hides "auto" option if visualization not using it', () => {
const getOptions = (showAutoOption: boolean) =>
shallow(
<LegendSizeSettings
legendSize={LegendSize.LARGE}
onLegendSizeChange={() => {}}
isVerticalLegend={true}
showAutoOption={showAutoOption}
/>
)
.find(EuiSuperSelect)
.props().options;
const autoOption = expect.objectContaining({ value: LegendSize.AUTO });
expect(getOptions(true)).toContainEqual(autoOption);
expect(getOptions(false)).not.toContainEqual(autoOption);
});
});

55
src/plugins/vis_default_editor/public/components/options/legend_size_settings.tsx
View file

@ -10,27 +10,11 @@ import React, { useCallback, useEffect } from 'react';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
import { EuiFormRow, EuiSuperSelect, EuiToolTip } from '@elastic/eui';
import { LegendSize, DEFAULT_LEGEND_SIZE } from '@kbn/visualizations-plugin/public';
enum LegendSizes {
AUTO = '0',
SMALL = '80',
MEDIUM = '130',
LARGE = '180',
EXTRA_LARGE = '230',
}
const legendSizeOptions: Array<{ value: LegendSizes; inputDisplay: string }> = [
const legendSizeOptions: Array<{ value: LegendSize; inputDisplay: string }> = [
{
value: LegendSizes.AUTO,
inputDisplay: i18n.translate(
'visDefaultEditor.options.legendSizeSetting.legendSizeOptions.auto',
{
defaultMessage: 'Auto',
}
),
},
{
value: LegendSizes.SMALL,
value: LegendSize.SMALL,
inputDisplay: i18n.translate(
'visDefaultEditor.options.legendSizeSetting.legendSizeOptions.small',
{
@ -39,7 +23,7 @@ const legendSizeOptions: Array<{ value: LegendSizes; inputDisplay: string }> = [
),
},
{
value: LegendSizes.MEDIUM,
value: LegendSize.MEDIUM,
inputDisplay: i18n.translate(
'visDefaultEditor.options.legendSizeSetting.legendSizeOptions.medium',
{
@ -48,7 +32,7 @@ const legendSizeOptions: Array<{ value: LegendSizes; inputDisplay: string }> = [
),
},
{
value: LegendSizes.LARGE,
value: LegendSize.LARGE,
inputDisplay: i18n.translate(
'visDefaultEditor.options.legendSizeSetting.legendSizeOptions.large',
{
@ -57,7 +41,7 @@ const legendSizeOptions: Array<{ value: LegendSizes; inputDisplay: string }> = [
),
},
{
value: LegendSizes.EXTRA_LARGE,
value: LegendSize.EXTRA_LARGE,
inputDisplay: i18n.translate(
'visDefaultEditor.options.legendSizeSetting.legendSizeOptions.extraLarge',
{
@ -68,15 +52,17 @@ const legendSizeOptions: Array<{ value: LegendSizes; inputDisplay: string }> = [
];
interface LegendSizeSettingsProps {
legendSize?: number;
onLegendSizeChange: (size?: number) => void;
legendSize?: LegendSize;
onLegendSizeChange: (size?: LegendSize) => void;
isVerticalLegend: boolean;
showAutoOption: boolean;
}
export const LegendSizeSettings = ({
legendSize,
onLegendSizeChange,
isVerticalLegend,
showAutoOption,
}: LegendSizeSettingsProps) => {
useEffect(() => {
if (legendSize && !isVerticalLegend) {
@ -85,16 +71,31 @@ export const LegendSizeSettings = ({
}, [isVerticalLegend, legendSize, onLegendSizeChange]);
const onLegendSizeOptionChange = useCallback(
(option) => onLegendSizeChange(Number(option) || undefined),
(option) => onLegendSizeChange(option === DEFAULT_LEGEND_SIZE ? undefined : option),
[onLegendSizeChange]
);
const options = showAutoOption
? [
{
value: LegendSize.AUTO,
inputDisplay: i18n.translate(
'visDefaultEditor.options.legendSizeSetting.legendSizeOptions.auto',
{
defaultMessage: 'Auto',
}
),
},
...legendSizeOptions,
]
: legendSizeOptions;
const legendSizeSelect = (
<EuiSuperSelect
fullWidth
compressed
valueOfSelected={legendSize?.toString() ?? LegendSizes.AUTO}
options={legendSizeOptions}
valueOfSelected={legendSize ?? DEFAULT_LEGEND_SIZE}
options={options}
onChange={onLegendSizeOptionChange}
disabled={!isVerticalLegend}
/>

8
src/plugins/vis_types/heatmap/public/editor/components/heatmap.tsx
View file

@ -26,7 +26,7 @@ import {
LegendSizeSettings,
} from '@kbn/vis-default-editor-plugin/public';
import { colorSchemas } from '@kbn/charts-plugin/public';
import { VisEditorOptionsProps } from '@kbn/visualizations-plugin/public';
import { LegendSize, VisEditorOptionsProps } from '@kbn/visualizations-plugin/public';
import { HeatmapVisParams, HeatmapTypeProps, ValueAxis } from '../../types';
import { LabelsPanel } from './labels_panel';
import { legendPositions, scaleTypes } from '../collections';
@ -42,6 +42,9 @@ const HeatmapOptions = (props: HeatmapOptionsProps) => {
const isColorsNumberInvalid = stateParams.colorsNumber < 2 || stateParams.colorsNumber > 10;
const [isColorRangesValid, setIsColorRangesValid] = useState(false);
const legendSize = stateParams.legendSize;
const [hadAutoLegendSize] = useState(() => legendSize === LegendSize.AUTO);
const setValueAxisScale = useCallback(
<T extends keyof ValueAxis['scale']>(paramName: T, value: ValueAxis['scale'][T]) =>
setValue('valueAxes', [
@ -91,12 +94,13 @@ const HeatmapOptions = (props: HeatmapOptionsProps) => {
setValue={setValue}
/>
<LegendSizeSettings
legendSize={stateParams.legendSize}
legendSize={legendSize}
onLegendSizeChange={handleLegendSizeChange}
isVerticalLegend={
stateParams.legendPosition === Position.Left ||
stateParams.legendPosition === Position.Right
}
showAutoOption={hadAutoLegendSize}
/>
</>
)}

3
src/plugins/vis_types/heatmap/public/types.ts
View file

@ -9,6 +9,7 @@ import { UiCounterMetricType } from '@kbn/analytics';
import type { Position } from '@elastic/charts';
import type { ChartsPluginSetup, Style, Labels, ColorSchemas } from '@kbn/charts-plugin/public';
import { Range } from '@kbn/expressions-plugin/public';
import { LegendSize } from '@kbn/visualizations-plugin/public';
export interface HeatmapTypeProps {
showElasticChartsOptions?: boolean;
@ -23,7 +24,7 @@ export interface HeatmapVisParams {
legendPosition: Position;
truncateLegend?: boolean;
maxLegendLines?: number;
legendSize?: number;
legendSize?: LegendSize;
lastRangeIsRightOpen: boolean;
percentageMode: boolean;
valueAxes: ValueAxis[];

3
src/plugins/vis_types/pie/public/__snapshots__/to_ast.test.ts.snap generated
View file

@ -93,6 +93,9 @@ Object {
"legendPosition": Array [
"right",
],
"legendSize": Array [
"large",
],
"metric": Array [
Object {
"chain": Array [

8
src/plugins/vis_types/pie/public/editor/components/pie.tsx
View file

@ -31,7 +31,7 @@ import {
LongLegendOptions,
LegendSizeSettings,
} from '@kbn/vis-default-editor-plugin/public';
import { VisEditorOptionsProps } from '@kbn/visualizations-plugin/public';
import { LegendSize, VisEditorOptionsProps } from '@kbn/visualizations-plugin/public';
import {
PartitionVisParams,
LabelPositions,
@ -97,6 +97,9 @@ const PieOptions = (props: PieOptionsProps) => {
const hasSplitChart = Boolean(aggs?.aggs?.find((agg) => agg.schema === 'split' && agg.enabled));
const segments = aggs?.aggs?.filter((agg) => agg.schema === 'segment' && agg.enabled) ?? [];
const legendSize = stateParams.legendSize;
const [hadAutoLegendSize] = useState(() => legendSize === LegendSize.AUTO);
const getLegendDisplay = useCallback(
(isVisible: boolean) => (isVisible ? LegendDisplay.SHOW : LegendDisplay.HIDE),
[]
@ -234,12 +237,13 @@ const PieOptions = (props: PieOptionsProps) => {
setValue={setValue}
/>
<LegendSizeSettings
legendSize={stateParams.legendSize}
legendSize={legendSize}
onLegendSizeChange={handleLegendSizeChange}
isVerticalLegend={
stateParams.legendPosition === Position.Left ||
stateParams.legendPosition === Position.Right
}
showAutoOption={hadAutoLegendSize}
/>
</>
)}

2
src/plugins/vis_types/pie/public/sample_vis.test.mocks.ts
View file

@ -7,6 +7,7 @@
*/
import { LegendDisplay } from '@kbn/expression-partition-vis-plugin/common';
import { LegendSize } from '@kbn/visualizations-plugin/common';
export const samplePieVis = {
type: {
@ -142,6 +143,7 @@ export const samplePieVis = {
addTooltip: true,
legendDisplay: LegendDisplay.SHOW,
legendPosition: 'right',
legendSize: LegendSize.LARGE,
isDonut: true,
labels: {
show: true,

6
src/plugins/vis_types/pie/public/to_ast.ts
View file

@ -62,14 +62,14 @@ export const toExpressionAst: VisToExpressionAst<PartitionVisParams> = async (vi
addTooltip: vis.params.addTooltip,
legendDisplay: vis.params.legendDisplay,
legendPosition: vis.params.legendPosition,
nestedLegend: vis.params?.nestedLegend ?? false,
nestedLegend: vis.params.nestedLegend ?? false,
truncateLegend: vis.params.truncateLegend,
maxLegendLines: vis.params.maxLegendLines,
legendSize: vis.params.legendSize,
distinctColors: vis.params?.distinctColors,
distinctColors: vis.params.distinctColors,
isDonut: vis.params.isDonut ?? false,
emptySizeRatio: vis.params.emptySizeRatio,
palette: preparePalette(vis.params?.palette),
palette: preparePalette(vis.params.palette),
labels: prepareLabels(vis.params.labels),
metric: schemas.metric.map(prepareDimension),
buckets: schemas.segment?.map(prepareDimension),

2
src/plugins/vis_types/vislib/public/__snapshots__/to_ast.test.ts.snap generated
View file

@ -8,7 +8,7 @@ Object {
"area",
],
"visConfig": Array [
"{\\"type\\":\\"area\\",\\"grid\\":{\\"categoryLines\\":false,\\"style\\":{\\"color\\":\\"#eee\\"}},\\"categoryAxes\\":[{\\"id\\":\\"CategoryAxis-1\\",\\"type\\":\\"category\\",\\"position\\":\\"bottom\\",\\"show\\":true,\\"style\\":{},\\"scale\\":{\\"type\\":\\"linear\\"},\\"labels\\":{\\"show\\":true,\\"truncate\\":100},\\"title\\":{}}],\\"valueAxes\\":[{\\"id\\":\\"ValueAxis-1\\",\\"name\\":\\"LeftAxis-1\\",\\"type\\":\\"value\\",\\"position\\":\\"left\\",\\"show\\":true,\\"style\\":{},\\"scale\\":{\\"type\\":\\"linear\\",\\"mode\\":\\"normal\\"},\\"labels\\":{\\"show\\":true,\\"rotate\\":0,\\"filter\\":false,\\"truncate\\":100},\\"title\\":{\\"text\\":\\"Sum of total_quantity\\"}}],\\"seriesParams\\":[{\\"show\\":\\"true\\",\\"type\\":\\"area\\",\\"mode\\":\\"stacked\\",\\"data\\":{\\"label\\":\\"Sum of total_quantity\\",\\"id\\":\\"1\\"},\\"drawLinesBetweenPoints\\":true,\\"showCircles\\":true,\\"circlesRadius\\":5,\\"interpolate\\":\\"linear\\",\\"valueAxis\\":\\"ValueAxis-1\\"}],\\"addTooltip\\":true,\\"addLegend\\":true,\\"legendPosition\\":\\"top\\",\\"times\\":[],\\"addTimeMarker\\":false,\\"truncateLegend\\":true,\\"maxLegendLines\\":1,\\"thresholdLine\\":{\\"show\\":false,\\"value\\":10,\\"width\\":1,\\"style\\":\\"full\\",\\"color\\":\\"#E7664C\\"},\\"palette\\":{\\"name\\":\\"default\\"},\\"labels\\":{},\\"dimensions\\":{\\"x\\":{\\"accessor\\":1,\\"format\\":{\\"id\\":\\"date\\",\\"params\\":{\\"pattern\\":\\"HH:mm:ss.SSS\\"}},\\"params\\":{}},\\"y\\":[{\\"accessor\\":0,\\"format\\":{\\"id\\":\\"number\\",\\"params\\":{\\"parsedUrl\\":{\\"origin\\":\\"http://localhost:5801\\",\\"pathname\\":\\"/app/visualize\\",\\"basePath\\":\\"\\"}}},\\"params\\":{}}],\\"series\\":[{\\"accessor\\":2,\\"format\\":{\\"id\\":\\"terms\\",\\"params\\":{\\"id\\":\\"string\\",\\"otherBucketLabel\\":\\"Other\\",\\"missingBucketLabel\\":\\"Missing\\",\\"parsedUrl\\":{\\"origin\\":\\"http://localhost:5801\\",\\"pathname\\":\\"/app/visualize\\",\\"basePath\\":\\"\\"}}},\\"params\\":{}}]}}",
"{\\"type\\":\\"area\\",\\"grid\\":{\\"categoryLines\\":false,\\"style\\":{\\"color\\":\\"#eee\\"}},\\"categoryAxes\\":[{\\"id\\":\\"CategoryAxis-1\\",\\"type\\":\\"category\\",\\"position\\":\\"bottom\\",\\"show\\":true,\\"style\\":{},\\"scale\\":{\\"type\\":\\"linear\\"},\\"labels\\":{\\"show\\":true,\\"truncate\\":100},\\"title\\":{}}],\\"valueAxes\\":[{\\"id\\":\\"ValueAxis-1\\",\\"name\\":\\"LeftAxis-1\\",\\"type\\":\\"value\\",\\"position\\":\\"left\\",\\"show\\":true,\\"style\\":{},\\"scale\\":{\\"type\\":\\"linear\\",\\"mode\\":\\"normal\\"},\\"labels\\":{\\"show\\":true,\\"rotate\\":0,\\"filter\\":false,\\"truncate\\":100},\\"title\\":{\\"text\\":\\"Sum of total_quantity\\"}}],\\"seriesParams\\":[{\\"show\\":\\"true\\",\\"type\\":\\"area\\",\\"mode\\":\\"stacked\\",\\"data\\":{\\"label\\":\\"Sum of total_quantity\\",\\"id\\":\\"1\\"},\\"drawLinesBetweenPoints\\":true,\\"showCircles\\":true,\\"circlesRadius\\":5,\\"interpolate\\":\\"linear\\",\\"valueAxis\\":\\"ValueAxis-1\\"}],\\"addTooltip\\":true,\\"addLegend\\":true,\\"legendPosition\\":\\"top\\",\\"legendSize\\":\\"small\\",\\"times\\":[],\\"addTimeMarker\\":false,\\"truncateLegend\\":true,\\"maxLegendLines\\":1,\\"thresholdLine\\":{\\"show\\":false,\\"value\\":10,\\"width\\":1,\\"style\\":\\"full\\",\\"color\\":\\"#E7664C\\"},\\"palette\\":{\\"name\\":\\"default\\"},\\"labels\\":{},\\"dimensions\\":{\\"x\\":{\\"accessor\\":1,\\"format\\":{\\"id\\":\\"date\\",\\"params\\":{\\"pattern\\":\\"HH:mm:ss.SSS\\"}},\\"params\\":{}},\\"y\\":[{\\"accessor\\":0,\\"format\\":{\\"id\\":\\"number\\",\\"params\\":{\\"parsedUrl\\":{\\"origin\\":\\"http://localhost:5801\\",\\"pathname\\":\\"/app/visualize\\",\\"basePath\\":\\"\\"}}},\\"params\\":{}}],\\"series\\":[{\\"accessor\\":2,\\"format\\":{\\"id\\":\\"terms\\",\\"params\\":{\\"id\\":\\"string\\",\\"otherBucketLabel\\":\\"Other\\",\\"missingBucketLabel\\":\\"Missing\\",\\"parsedUrl\\":{\\"origin\\":\\"http://localhost:5801\\",\\"pathname\\":\\"/app/visualize\\",\\"basePath\\":\\"\\"}}},\\"params\\":{}}]}}",
],
},
"getArgument": [Function],

2
src/plugins/vis_types/vislib/public/__snapshots__/to_ast_pie.test.ts.snap generated
View file

@ -5,7 +5,7 @@ Object {
"addArgument": [Function],
"arguments": Object {
"visConfig": Array [
"{\\"type\\":\\"pie\\",\\"addTooltip\\":true,\\"legendDisplay\\":\\"show\\",\\"legendPosition\\":\\"right\\",\\"isDonut\\":true,\\"labels\\":{\\"show\\":true,\\"values\\":true,\\"last_level\\":true,\\"truncate\\":100},\\"dimensions\\":{\\"metric\\":{\\"accessor\\":0,\\"format\\":{\\"id\\":\\"number\\"},\\"params\\":{}},\\"buckets\\":[{\\"accessor\\":1,\\"format\\":{\\"id\\":\\"terms\\",\\"params\\":{\\"id\\":\\"string\\",\\"otherBucketLabel\\":\\"Other\\",\\"missingBucketLabel\\":\\"Missing\\",\\"parsedUrl\\":{\\"origin\\":\\"http://localhost:5801\\",\\"pathname\\":\\"/app/visualize\\",\\"basePath\\":\\"\\"}}},\\"params\\":{}}]}}",
"{\\"type\\":\\"pie\\",\\"addTooltip\\":true,\\"legendDisplay\\":\\"show\\",\\"legendPosition\\":\\"right\\",\\"legendSize\\":\\"large\\",\\"isDonut\\":true,\\"labels\\":{\\"show\\":true,\\"values\\":true,\\"last_level\\":true,\\"truncate\\":100},\\"dimensions\\":{\\"metric\\":{\\"accessor\\":0,\\"format\\":{\\"id\\":\\"number\\"},\\"params\\":{}},\\"buckets\\":[{\\"accessor\\":1,\\"format\\":{\\"id\\":\\"terms\\",\\"params\\":{\\"id\\":\\"string\\",\\"otherBucketLabel\\":\\"Other\\",\\"missingBucketLabel\\":\\"Missing\\",\\"parsedUrl\\":{\\"origin\\":\\"http://localhost:5801\\",\\"pathname\\":\\"/app/visualize\\",\\"basePath\\":\\"\\"}}},\\"params\\":{}}]}}",
],
},
"getArgument": [Function],

3
src/plugins/vis_types/xy/public/__snapshots__/to_ast.test.ts.snap generated
View file

@ -32,6 +32,9 @@ Object {
"legendPosition": Array [
"top",
],
"legendSize": Array [
"small",
],
"maxLegendLines": Array [
1,
],

10
src/plugins/vis_types/xy/public/editor/components/options/point_series/point_series.tsx
View file

@ -6,7 +6,7 @@
* Side Public License, v 1.
*/
import React, { useCallback, useMemo } from 'react';
import React, { useCallback, useMemo, useState } from 'react';
import { EuiPanel, EuiTitle, EuiSpacer } from '@elastic/eui';
import { Position } from '@elastic/charts';
import { i18n } from '@kbn/i18n';
@ -20,6 +20,7 @@ import {
} from '@kbn/vis-default-editor-plugin/public';
import { BUCKET_TYPES } from '@kbn/data-plugin/public';
import { LegendSize } from '@kbn/visualizations-plugin/public';
import { VisParams } from '../../../../types';
import { GridPanel } from './grid_panel';
import { ThresholdPanel } from './threshold_panel';
@ -41,6 +42,10 @@ export function PointSeriesOptions(props: ValidationVisOptionsProps<VisParams>)
[stateParams.seriesParams, aggs.aggs]
);
const legendSize = stateParams.legendSize;
const [hadAutoLegendSize] = useState(() => legendSize === LegendSize.AUTO);
const handleLegendSizeChange = useCallback((size) => setValue('legendSize', size), [setValue]);
return (
@ -64,12 +69,13 @@ export function PointSeriesOptions(props: ValidationVisOptionsProps<VisParams>)
setValue={setValue}
/>
<LegendSizeSettings
legendSize={stateParams.legendSize}
legendSize={legendSize}
onLegendSizeChange={handleLegendSizeChange}
isVerticalLegend={
stateParams.legendPosition === Position.Left ||
stateParams.legendPosition === Position.Right
}
showAutoOption={hadAutoLegendSize}
/>
{vis.data.aggs!.aggs.some(

20
src/plugins/vis_types/xy/public/expression_functions/xy_vis_fn.ts
View file

@ -13,7 +13,12 @@ import type {
Datatable,
Render,
} from '@kbn/expressions-plugin/common';
import { prepareLogTable, Dimension } from '@kbn/visualizations-plugin/public';
import {
prepareLogTable,
Dimension,
DEFAULT_LEGEND_SIZE,
LegendSize,
} from '@kbn/visualizations-plugin/public';
import type { ChartType } from '../../common';
import type { VisParams, XYVisConfig } from '../types';
@ -73,10 +78,19 @@ export const visTypeXyVisFn = (): VisTypeXyExpressionFunctionDefinition => ({
}),
},
legendSize: {
types: ['number'],
types: ['string'],
default: DEFAULT_LEGEND_SIZE,
help: i18n.translate('visTypeXy.function.args.args.legendSize.help', {
defaultMessage: 'Specifies the legend size in pixels.',
defaultMessage: 'Specifies the legend size.',
}),
options: [
LegendSize.AUTO,
LegendSize.SMALL,
LegendSize.MEDIUM,
LegendSize.LARGE,
LegendSize.EXTRA_LARGE,
],
strict: true,
},
addLegend: {
types: ['boolean'],

4
src/plugins/vis_types/xy/public/sample_vis.test.mocks.ts
View file

@ -5,6 +5,9 @@
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import { LegendSize } from '@kbn/visualizations-plugin/common';
export const sampleAreaVis = {
type: {
name: 'area',
@ -282,6 +285,7 @@ export const sampleAreaVis = {
addTooltip: true,
addLegend: true,
legendPosition: 'top',
legendSize: LegendSize.SMALL,
times: [],
addTimeMarker: false,
truncateLegend: true,

5
src/plugins/vis_types/xy/public/types/param.ts
View file

@ -15,6 +15,7 @@ import type {
FakeParams,
HistogramParams,
DateHistogramParams,
LegendSize,
} from '@kbn/visualizations-plugin/public';
import type { ChartType, XyVisType } from '../../common';
import type {
@ -124,7 +125,7 @@ export interface VisParams {
addTimeMarker: boolean;
truncateLegend: boolean;
maxLegendLines: number;
legendSize?: number;
legendSize?: LegendSize;
categoryAxes: CategoryAxis[];
orderBucketsBySum?: boolean;
labels: Labels;
@ -165,7 +166,7 @@ export interface XYVisConfig {
addTimeMarker: boolean;
truncateLegend: boolean;
maxLegendLines: number;
legendSize?: number;
legendSize?: LegendSize;
orderBucketsBySum?: boolean;
labels: ExpressionValueLabel;
thresholdLine: ExpressionValueThresholdLine;

8
src/plugins/vis_types/xy/public/vis_component.tsx
View file

@ -33,7 +33,11 @@ import {
useActiveCursor,
} from '@kbn/charts-plugin/public';
import { Datatable, IInterpreterRenderHandlers } from '@kbn/expressions-plugin/public';
import type { PersistedState } from '@kbn/visualizations-plugin/public';
import {
DEFAULT_LEGEND_SIZE,
LegendSizeToPixels,
PersistedState,
} from '@kbn/visualizations-plugin/public';
import { VisParams } from './types';
import {
getAdjustedDomain,
@ -361,7 +365,7 @@ const VisComponent = (props: VisComponentProps) => {
tooltip: { visible: syncTooltips, placement: Placement.Right },
}}
legendPosition={legendPosition}
legendSize={visParams.legendSize}
legendSize={LegendSizeToPixels[visParams.legendSize ?? DEFAULT_LEGEND_SIZE]}
xDomain={xDomain}
adjustedXDomain={adjustedXDomain}
legendColorPicker={legendColorPicker}

18
src/plugins/visualizations/common/constants.ts
View file

@ -26,3 +26,21 @@ export const VisualizeConstants = {
EDIT_BY_VALUE_PATH: '/edit_by_value',
APP_ID: 'visualize',
};
export enum LegendSize {
AUTO = 'auto',
SMALL = 'small',
MEDIUM = 'medium',
LARGE = 'large',
EXTRA_LARGE = 'xlarge',
}
export const LegendSizeToPixels = {
[LegendSize.AUTO]: undefined,
[LegendSize.SMALL]: 80,
[LegendSize.MEDIUM]: 130,
[LegendSize.LARGE]: 180,
[LegendSize.EXTRA_LARGE]: 230,
} as const;
export const DEFAULT_LEGEND_SIZE = LegendSize.MEDIUM;

1
src/plugins/visualizations/common/index.ts
View file

@ -13,3 +13,4 @@
export * from './types';
export * from './utils';
export * from './expression_functions';
export { LegendSize, LegendSizeToPixels, DEFAULT_LEGEND_SIZE } from './constants';

3
src/plugins/visualizations/public/index.ts
View file

@ -56,6 +56,9 @@ export {
VISUALIZE_ENABLE_LABS_SETTING,
SAVED_OBJECTS_LIMIT_SETTING,
SAVED_OBJECTS_PER_PAGE_SETTING,
LegendSize,
LegendSizeToPixels,
DEFAULT_LEGEND_SIZE,
} from '../common/constants';
export type { SavedVisState, VisParams, Dimension } from '../common';
export { prepareLogTable } from '../common';

7
src/plugins/visualizations/server/embeddable/make_visualize_embeddable_factory.ts
View file

@ -26,6 +26,7 @@ import {
commonAddDropLastBucketIntoTSVBModel714Above,
commonRemoveMarkdownLessFromTSVB,
commonUpdatePieVisApi,
commonPreserveOldLegendSizeDefault,
} from '../migrations/visualization_common_migrations';
import { SerializedVis } from '../../common';
@ -97,6 +98,11 @@ const byValueUpdatePieVisApi = (state: SerializableRecord) => ({
savedVis: commonUpdatePieVisApi(state.savedVis),
});
const byValuePreserveOldLegendSizeDefault = (state: SerializableRecord) => ({
...state,
savedVis: commonPreserveOldLegendSizeDefault(state.savedVis),
});
const getEmbeddedVisualizationSearchSourceMigrations = (
searchSourceMigrations: MigrateFunctionsObject
) =>
@ -144,6 +150,7 @@ export const makeVisualizeEmbeddableFactory =
'7.17.0': (state) => flow(byValueAddDropLastBucketIntoTSVBModel714Above)(state),
'8.0.0': (state) => flow(byValueRemoveMarkdownLessFromTSVB)(state),
'8.1.0': (state) => flow(byValueUpdatePieVisApi)(state),
'8.3.0': (state) => flow(byValuePreserveOldLegendSizeDefault)(state),
}
),
};

31
src/plugins/visualizations/server/migrations/visualization_common_migrations.ts
View file

@ -215,3 +215,34 @@ export const commonUpdatePieVisApi = (visState: any) => {
return visState;
};
export const commonPreserveOldLegendSizeDefault = (visState: any) => {
const visualizationTypesWithLegends = [
'pie',
'area',
'histogram',
'horizontal_bar',
'line',
'heatmap',
];
const pixelsToLegendSize: Record<string, string> = {
undefined: 'auto',
'80': 'small',
'130': 'medium',
'180': 'large',
'230': 'xlarge',
};
if (visualizationTypesWithLegends.includes(visState?.type)) {
return {
...visState,
params: {
...visState.params,
legendSize: pixelsToLegendSize[visState.params?.legendSize],
},
};
}
return visState;
};

59
src/plugins/visualizations/server/migrations/visualization_saved_object_migrations.test.ts
View file

@ -2564,4 +2564,63 @@ describe('migration visualization', () => {
expect(otherParams.addLegend).toBeUndefined();
});
});
describe('8.3.0 - preserves default legend size for existing visualizations', () => {
const getDoc = (type: string, legendSize: number | undefined) => ({
attributes: {
title: 'Some Vis with a Legend',
description: '',
visState: JSON.stringify({
type,
title: 'Pie vis',
params: {
legendSize,
},
}),
},
});
const migrate = (doc: any) =>
visualizationSavedObjectTypeMigrations['8.3.0'](
doc as Parameters<SavedObjectMigrationFn>[0],
savedObjectMigrationContext
);
const autoLegendSize = 'auto';
const largeLegendSize = 'large';
const largeLegendSizePx = 180;
test.each([
['pie', undefined, autoLegendSize],
['area', undefined, autoLegendSize],
['histogram', undefined, autoLegendSize],
['horizontal_bar', undefined, autoLegendSize],
['line', undefined, autoLegendSize],
['heatmap', undefined, autoLegendSize],
['pie', largeLegendSizePx, largeLegendSize],
['area', largeLegendSizePx, largeLegendSize],
['histogram', largeLegendSizePx, largeLegendSize],
['horizontal_bar', largeLegendSizePx, largeLegendSize],
['line', largeLegendSizePx, largeLegendSize],
['heatmap', largeLegendSizePx, largeLegendSize],
])(
'given a %s visualization with current legend size of %s -- sets legend size to %s',
(
visualizationType: string,
currentLegendSize: number | undefined,
expectedLegendSize: string
) => {
const visState = JSON.parse(
migrate(getDoc(visualizationType, currentLegendSize)).attributes.visState
);
expect(visState.params.legendSize).toBe(expectedLegendSize);
}
);
test.each(['metric', 'gauge', 'table'])('leaves visualization without legend alone: %s', () => {
const visState = JSON.parse(migrate(getDoc('table', undefined)).attributes.visState);
expect(visState.params.legendSize).toBeUndefined();
});
});
});

26
src/plugins/visualizations/server/migrations/visualization_saved_object_migrations.ts
View file

@ -28,6 +28,7 @@ import {
commonAddDropLastBucketIntoTSVBModel714Above,
commonRemoveMarkdownLessFromTSVB,
commonUpdatePieVisApi,
commonPreserveOldLegendSizeDefault,
} from './visualization_common_migrations';
import { VisualizationSavedObjectAttributes } from '../../common';
@ -1158,6 +1159,30 @@ export const updatePieVisApi: SavedObjectMigrationFn<any, any> = (doc) => {
return doc;
};
const preserveOldLegendSizeDefault: SavedObjectMigrationFn<any, any> = (doc) => {
const visStateJSON = get(doc, 'attributes.visState');
let visState;
if (visStateJSON) {
try {
visState = JSON.parse(visStateJSON);
} catch (e) {
// Let it go, the data is invalid and we'll leave it as is
}
const newVisState = commonPreserveOldLegendSizeDefault(visState);
return {
...doc,
attributes: {
...doc.attributes,
visState: JSON.stringify(newVisState),
},
};
}
return doc;
};
const visualizationSavedObjectTypeMigrations = {
/**
* We need to have this migration twice, once with a version prior to 7.0.0 once with a version
@ -1214,6 +1239,7 @@ const visualizationSavedObjectTypeMigrations = {
'7.17.0': flow(addDropLastBucketIntoTSVBModel714Above),
'8.0.0': flow(removeMarkdownLessFromTSVB),
'8.1.0': flow(updatePieVisApi),
'8.3.0': preserveOldLegendSizeDefault,
};
/**

2
test/functional/apps/dashboard/group2/dashboard_snapshots.ts
View file

@ -84,7 +84,7 @@ export default function ({
);
await PageObjects.dashboard.clickExitFullScreenLogoButton();
expect(percentDifference).to.be.lessThan(0.022);
expect(percentDifference).to.be.lessThan(0.029);
});
});
}

BIN
test/functional/screenshots/baseline/area_chart.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 186 KiB

Before After
Before After

3
x-pack/plugins/lens/common/types.ts
View file

@ -12,6 +12,7 @@ import type { CustomPaletteParams, PaletteOutput } from '@kbn/coloring';
import type { IFieldFormat, SerializedFieldFormat } from '@kbn/field-formats-plugin/common';
import type { Datatable } from '@kbn/expressions-plugin/common';
import type { ColorMode } from '@kbn/charts-plugin/common';
import { LegendSize } from '@kbn/visualizations-plugin/common';
import {
CategoryDisplay,
layerTypes,
@ -83,7 +84,7 @@ export interface SharedPieLayerState {
percentDecimals?: number;
emptySizeRatio?: number;
legendMaxLines?: number;
legendSize?: number;
legendSize?: LegendSize;
truncateLegend?: boolean;
}

15
x-pack/plugins/lens/public/heatmap_visualization/toolbar_component.tsx
View file

@ -5,10 +5,11 @@
* 2.0.
*/
import React, { memo } from 'react';
import React, { memo, useState } from 'react';
import { EuiFlexGroup, EuiFlexItem, IconType } from '@elastic/eui';
import { Position } from '@elastic/charts';
import { i18n } from '@kbn/i18n';
import { LegendSize } from '@kbn/visualizations-plugin/public';
import type { VisualizationToolbarProps } from '../types';
import {
LegendSettingsPopover,
@ -49,6 +50,11 @@ export const HeatmapToolbar = memo(
state,
frame.datasourceLayers
).truncateText;
const legendSize = state?.legend.legendSize;
const [hadAutoLegendSize] = useState(() => legendSize === LegendSize.AUTO);
return (
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
<EuiFlexItem grow={false}>
@ -112,16 +118,17 @@ export const HeatmapToolbar = memo(
legend: { ...state.legend, shouldTruncate: !current },
});
}}
legendSize={state?.legend.legendSize}
onLegendSizeChange={(legendSize) => {
legendSize={legendSize}
onLegendSizeChange={(newLegendSize) => {
setState({
...state,
legend: {
...state.legend,
legendSize,
legendSize: newLegendSize,
},
});
}}
showAutoLegendSizeOption={hadAutoLegendSize}
/>
</EuiFlexGroup>
</EuiFlexItem>

1
x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx
View file

@ -304,6 +304,7 @@ export const getHeatmapVisualization = ({
if (!originalOrder || !state.valueAccessor) {
return null;
}
return {
type: 'expression',
chain: [

30
x-pack/plugins/lens/public/pie_visualization/to_expression.ts
View file

@ -134,20 +134,22 @@ const generateCommonArguments: GenerateExpressionAstArguments = (
layer,
datasourceLayers,
paletteService
) => ({
labels: generateCommonLabelsAstArgs(state, attributes, layer),
buckets: operations.map((o) => o.columnId).map(prepareDimension),
metric: layer.metric ? [prepareDimension(layer.metric)] : [],
legendDisplay: [attributes.isPreview ? LegendDisplay.HIDE : layer.legendDisplay],
legendPosition: [layer.legendPosition || Position.Right],
maxLegendLines: [layer.legendMaxLines ?? 1],
legendSize: layer.legendSize ? [layer.legendSize] : [],
nestedLegend: [!!layer.nestedLegend],
truncateLegend: [
layer.truncateLegend ?? getDefaultVisualValuesForLayer(state, datasourceLayers).truncateText,
],
palette: generatePaletteAstArguments(paletteService, state.palette),
});
) => {
return {
labels: generateCommonLabelsAstArgs(state, attributes, layer),
buckets: operations.map((o) => o.columnId).map(prepareDimension),
metric: layer.metric ? [prepareDimension(layer.metric)] : [],
legendDisplay: [attributes.isPreview ? LegendDisplay.HIDE : layer.legendDisplay],
legendPosition: [layer.legendPosition || Position.Right],
maxLegendLines: [layer.legendMaxLines ?? 1],
legendSize: layer.legendSize ? [layer.legendSize] : [],
nestedLegend: [!!layer.nestedLegend],
truncateLegend: [
layer.truncateLegend ?? getDefaultVisualValuesForLayer(state, datasourceLayers).truncateText,
],
palette: generatePaletteAstArguments(paletteService, state.palette),
};
};
const generatePieVisAst: GenerateExpressionAstFunction = (...rest) => ({
type: 'expression',

10
x-pack/plugins/lens/public/pie_visualization/toolbar.tsx
View file

@ -6,7 +6,7 @@
*/
import './toolbar.scss';
import React, { useCallback } from 'react';
import React, { useCallback, useState } from 'react';
import { i18n } from '@kbn/i18n';
import {
EuiFlexGroup,
@ -18,6 +18,7 @@ import {
} from '@elastic/eui';
import type { Position } from '@elastic/charts';
import type { PaletteRegistry } from '@kbn/coloring';
import { LegendSize } from '@kbn/visualizations-plugin/public';
import { DEFAULT_PERCENT_DECIMALS } from './constants';
import { PartitionChartsMeta } from './partition_charts_meta';
import { LegendDisplay, PieVisualizationState, SharedPieLayerState } from '../../common';
@ -73,6 +74,10 @@ export function PieToolbar(props: VisualizationToolbarProps<PieVisualizationStat
isDisabled: isToolbarPopoverDisabled,
} = PartitionChartsMeta[state.shape].toolbarPopover;
const legendSize = layer.legendSize;
const [hadAutoLegendSize] = useState(() => legendSize === LegendSize.AUTO);
const onStateChange = useCallback(
(part: Record<string, unknown>) => {
setState({
@ -259,8 +264,9 @@ export function PieToolbar(props: VisualizationToolbarProps<PieVisualizationStat
onTruncateLegendChange={onTruncateLegendChange}
maxLines={layer?.legendMaxLines}
onMaxLinesChange={onLegendMaxLinesChange}
legendSize={layer.legendSize}
legendSize={legendSize}
onLegendSizeChange={onLegendSizeChange}
showAutoLegendSizeOption={hadAutoLegendSize}
/>
</EuiFlexGroup>
);

1
x-pack/plugins/lens/public/shared_components/legend_settings_popover.test.tsx
View file

@ -36,6 +36,7 @@ describe('Legend Settings', () => {
props = {
legendOptions,
mode: 'auto',
showAutoLegendSizeOption: true,
onDisplayChange: jest.fn(),
onPositionChange: jest.fn(),
onLegendSizeChange: jest.fn(),

12
x-pack/plugins/lens/public/shared_components/legend_settings_popover.tsx
View file

@ -16,6 +16,7 @@ import {
} from '@elastic/eui';
import { Position, VerticalAlignment, HorizontalAlignment } from '@elastic/charts';
import { ToolbarButtonProps } from '@kbn/kibana-react-plugin/public';
import { LegendSize } from '@kbn/visualizations-plugin/public';
import { ToolbarPopover } from '.';
import { LegendLocationSettings } from './legend_location_settings';
import { ColumnsNumberSetting } from './columns_number_setting';
@ -122,11 +123,16 @@ export interface LegendSettingsPopoverProps {
/**
* Legend size in pixels
*/
legendSize?: number;
legendSize?: LegendSize;
/**
* Callback on legend size change
*/
onLegendSizeChange: (size?: number) => void;
onLegendSizeChange: (size?: LegendSize) => void;
/**
* Whether to show auto legend size option. Should only be true for pre 8.3 visualizations that already had it as their setting.
* (We're trying to get people to stop using it so it can eventually be removed.)
*/
showAutoLegendSizeOption: boolean;
}
const DEFAULT_TRUNCATE_LINES = 1;
@ -185,6 +191,7 @@ export const LegendSettingsPopover: React.FunctionComponent<LegendSettingsPopove
onTruncateLegendChange = () => {},
legendSize,
onLegendSizeChange,
showAutoLegendSizeOption,
}) => {
return (
<ToolbarPopover
@ -232,6 +239,7 @@ export const LegendSettingsPopover: React.FunctionComponent<LegendSettingsPopove
isVerticalLegend={
!position || position === Position.Left || position === Position.Right
}
showAutoOption={showAutoLegendSizeOption}
/>
)}
{location && (

97
x-pack/plugins/lens/public/shared_components/legend_size_settings.test.tsx Normal file
View file

@ -0,0 +1,97 @@
/*
* 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 { LegendSizeSettings } from './legend_size_settings';
import { EuiSuperSelect } from '@elastic/eui';
import { shallow } from 'enzyme';
import { DEFAULT_LEGEND_SIZE, LegendSize } from '@kbn/visualizations-plugin/public';
describe('legend size settings', () => {
it('renders nothing if not vertical legend', () => {
const instance = shallow(
<LegendSizeSettings
legendSize={undefined}
onLegendSizeChange={() => {}}
isVerticalLegend={false}
showAutoOption={false}
/>
);
expect(instance.html()).toBeNull();
});
it('defaults to correct value', () => {
const instance = shallow(
<LegendSizeSettings
legendSize={undefined}
onLegendSizeChange={() => {}}
isVerticalLegend={true}
showAutoOption={false}
/>
);
expect(instance.find(EuiSuperSelect).props().valueOfSelected).toBe(
DEFAULT_LEGEND_SIZE.toString()
);
});
it('reflects current setting in select', () => {
const CURRENT_SIZE = LegendSize.SMALL;
const instance = shallow(
<LegendSizeSettings
legendSize={CURRENT_SIZE}
onLegendSizeChange={() => {}}
isVerticalLegend={true}
showAutoOption={false}
/>
);
expect(instance.find(EuiSuperSelect).props().valueOfSelected).toBe(CURRENT_SIZE);
});
it('allows user to select a new option', () => {
const onSizeChange = jest.fn();
const instance = shallow(
<LegendSizeSettings
legendSize={undefined}
onLegendSizeChange={onSizeChange}
isVerticalLegend={true}
showAutoOption={false}
/>
);
const onChange = instance.find(EuiSuperSelect).props().onChange;
onChange(LegendSize.EXTRA_LARGE);
onChange(DEFAULT_LEGEND_SIZE);
expect(onSizeChange).toHaveBeenNthCalledWith(1, LegendSize.EXTRA_LARGE);
expect(onSizeChange).toHaveBeenNthCalledWith(2, undefined);
});
it('hides "auto" option if visualization not using it', () => {
const getOptions = (showAutoOption: boolean) =>
shallow(
<LegendSizeSettings
legendSize={LegendSize.LARGE}
onLegendSizeChange={() => {}}
isVerticalLegend={true}
showAutoOption={showAutoOption}
/>
)
.find(EuiSuperSelect)
.props().options;
const autoOption = expect.objectContaining({ value: LegendSize.AUTO });
expect(getOptions(true)).toContainEqual(autoOption);
expect(getOptions(false)).not.toContainEqual(autoOption);
});
});

52
x-pack/plugins/lens/public/shared_components/legend_size_settings.tsx
View file

@ -8,48 +8,36 @@
import React, { useEffect, useCallback } from 'react';
import { i18n } from '@kbn/i18n';
import { EuiFormRow, EuiSuperSelect } from '@elastic/eui';
export enum LegendSizes {
AUTO = '0',
SMALL = '80',
MEDIUM = '130',
LARGE = '180',
EXTRA_LARGE = '230',
}
import { DEFAULT_LEGEND_SIZE, LegendSize } from '@kbn/visualizations-plugin/public';
interface LegendSizeSettingsProps {
legendSize: number | undefined;
onLegendSizeChange: (size?: number) => void;
legendSize?: LegendSize;
onLegendSizeChange: (size?: LegendSize) => void;
isVerticalLegend: boolean;
showAutoOption: boolean;
}
const legendSizeOptions: Array<{ value: LegendSizes; inputDisplay: string }> = [
const legendSizeOptions: Array<{ value: LegendSize; inputDisplay: string }> = [
{
value: LegendSizes.AUTO,
inputDisplay: i18n.translate('xpack.lens.shared.legendSizeSetting.legendSizeOptions.auto', {
defaultMessage: 'Auto',
}),
},
{
value: LegendSizes.SMALL,
value: LegendSize.SMALL,
inputDisplay: i18n.translate('xpack.lens.shared.legendSizeSetting.legendSizeOptions.small', {
defaultMessage: 'Small',
}),
},
{
value: LegendSizes.MEDIUM,
value: LegendSize.MEDIUM,
inputDisplay: i18n.translate('xpack.lens.shared.legendSizeSetting.legendSizeOptions.medium', {
defaultMessage: 'Medium',
}),
},
{
value: LegendSizes.LARGE,
value: LegendSize.LARGE,
inputDisplay: i18n.translate('xpack.lens.shared.legendSizeSetting.legendSizeOptions.large', {
defaultMessage: 'Large',
}),
},
{
value: LegendSizes.EXTRA_LARGE,
value: LegendSize.EXTRA_LARGE,
inputDisplay: i18n.translate(
'xpack.lens.shared.legendSizeSetting.legendSizeOptions.extraLarge',
{
@ -63,6 +51,7 @@ export const LegendSizeSettings = ({
legendSize,
onLegendSizeChange,
isVerticalLegend,
showAutoOption,
}: LegendSizeSettingsProps) => {
useEffect(() => {
if (legendSize && !isVerticalLegend) {
@ -71,12 +60,27 @@ export const LegendSizeSettings = ({
}, [isVerticalLegend, legendSize, onLegendSizeChange]);
const onLegendSizeOptionChange = useCallback(
(option) => onLegendSizeChange(Number(option) || undefined),
(option: LegendSize) => onLegendSizeChange(option === DEFAULT_LEGEND_SIZE ? undefined : option),
[onLegendSizeChange]
);
if (!isVerticalLegend) return null;
const options = showAutoOption
? [
{
value: LegendSize.AUTO,
inputDisplay: i18n.translate(
'xpack.lens.shared.legendSizeSetting.legendSizeOptions.auto',
{
defaultMessage: 'Auto',
}
),
},
...legendSizeOptions,
]
: legendSizeOptions;
return (
<EuiFormRow
display="columnCompressed"
@ -87,8 +91,8 @@ export const LegendSizeSettings = ({
>
<EuiSuperSelect
compressed
valueOfSelected={legendSize?.toString() ?? LegendSizes.AUTO}
options={legendSizeOptions}
valueOfSelected={legendSize ?? DEFAULT_LEGEND_SIZE}
options={options}
onChange={onLegendSizeOptionChange}
/>
</EuiFormRow>

12
x-pack/plugins/lens/public/xy_visualization/to_expression.ts
View file

@ -10,7 +10,8 @@ import { ScaleType } from '@elastic/charts';
import type { PaletteRegistry } from '@kbn/coloring';
import { EventAnnotationServiceType } from '@kbn/event-annotation-plugin/public';
import type { AxisExtentConfig, ExtendedYConfig, YConfig } from '@kbn/expression-xy-plugin/common';
import { LegendSize } from '@kbn/visualizations-plugin/common/constants';
import type { AxisExtentConfig, YConfig, ExtendedYConfig } from '@kbn/expression-xy-plugin/common';
import type { ExpressionAstExpression } from '@kbn/expressions-plugin/common';
import {
State,
@ -214,10 +215,11 @@ export const buildExpression = (
: [],
position: !state.legend.isInside ? [state.legend.position] : [],
isInside: state.legend.isInside ? [state.legend.isInside] : [],
legendSize:
!state.legend.isInside && state.legend.legendSize
? [state.legend.legendSize]
: [],
legendSize: state.legend.isInside
? [LegendSize.AUTO]
: state.legend.legendSize
? [state.legend.legendSize]
: [],
horizontalAlignment:
state.legend.horizontalAlignment && state.legend.isInside
? [state.legend.horizontalAlignment]

14
x-pack/plugins/lens/public/xy_visualization/xy_config_panel/index.tsx
View file

@ -5,11 +5,12 @@
* 2.0.
*/
import React, { memo, useCallback } from 'react';
import React, { memo, useCallback, useState } from 'react';
import { i18n } from '@kbn/i18n';
import { Position, ScaleType } from '@elastic/charts';
import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { AxesSettingsConfig, AxisExtentConfig } from '@kbn/expression-xy-plugin/common';
import { LegendSize } from '@kbn/visualizations-plugin/public';
import type { VisualizationToolbarProps, FramePublicAPI } from '../../types';
import { State, XYState } from '../types';
import { isHorizontalChart } from '../state_helpers';
@ -294,6 +295,10 @@ export const XyToolbar = memo(function XyToolbar(
props.frame.datasourceLayers
).truncateText;
const legendSize = state.legend.legendSize;
const [hadAutoLegendSize] = useState(() => legendSize === LegendSize.AUTO);
return (
<EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
<EuiFlexItem grow={false}>
@ -398,16 +403,17 @@ export const XyToolbar = memo(function XyToolbar(
valuesInLegend: !state.valuesInLegend,
});
}}
legendSize={state.legend.legendSize}
onLegendSizeChange={(legendSize) => {
legendSize={legendSize}
onLegendSizeChange={(newLegendSize) => {
setState({
...state,
legend: {
...state.legend,
legendSize,
legendSize: newLegendSize,
},
});
}}
showAutoLegendSizeOption={hadAutoLegendSize}
/>
</EuiFlexGroup>
</EuiFlexItem>

5
x-pack/plugins/lens/server/embeddable/make_lens_embeddable_factory.ts
View file

@ -14,6 +14,7 @@ import {
import { DOC_TYPE } from '../../common';
import {
commonEnhanceTableRowHeight,
commonPreserveOldLegendSizeDefault,
commonFixValueLabelsInXY,
commonLockOldMetricVisSettings,
commonMakeReversePaletteAsCustom,
@ -35,7 +36,6 @@ import {
LensDocShapePre712,
VisState716,
VisState810,
VisState820,
VisStatePre715,
VisStatePre830,
} from '../migrations/types';
@ -113,8 +113,9 @@ export const makeLensEmbeddableFactory =
} as unknown as SerializableRecord;
},
'8.3.0': (state) => {
const lensState = state as unknown as { attributes: LensDocShape810<VisState820> };
const lensState = state as unknown as { attributes: LensDocShape810<VisState810> };
let migratedLensState = commonLockOldMetricVisSettings(lensState.attributes);
migratedLensState = commonPreserveOldLegendSizeDefault(migratedLensState);
migratedLensState = commonFixValueLabelsInXY(
migratedLensState as LensDocShape810<VisStatePre830>
);

32
x-pack/plugins/lens/server/migrations/common_migrations.ts
View file

@ -255,6 +255,38 @@ export const commonLockOldMetricVisSettings = (
return newAttributes as LensDocShape830<VisState830>;
};
export const commonPreserveOldLegendSizeDefault = (
attributes: LensDocShape810
): LensDocShape830<VisState830> => {
const newAttributes = cloneDeep(attributes);
const pixelsToLegendSize: Record<string, string> = {
undefined: 'auto',
'80': 'small',
'130': 'medium',
'180': 'large',
'230': 'xlarge',
};
if (['lnsXY', 'lnsHeatmap'].includes(newAttributes.visualizationType + '')) {
const legendConfig = (newAttributes.state.visualization as { legend: { legendSize: number } })
.legend;
(legendConfig.legendSize as unknown as string) =
pixelsToLegendSize[String(legendConfig.legendSize)];
}
if (newAttributes.visualizationType === 'lnsPie') {
const layers = (newAttributes.state.visualization as { layers: Array<{ legendSize: number }> })
.layers;
layers.forEach((layer) => {
(layer.legendSize as unknown as string) = pixelsToLegendSize[String(layer.legendSize)];
});
}
return newAttributes as LensDocShape830<VisState830>;
};
const getApplyCustomVisualizationMigrationToLens = (id: string, migration: MigrateFunction) => {
return (savedObject: { attributes: LensDocShape }) => {
if (savedObject.attributes.visualizationType !== id) return savedObject;

70
x-pack/plugins/lens/server/migrations/saved_object_migrations.test.ts
View file

@ -2065,6 +2065,7 @@ describe('Lens migrations', () => {
expect(layer2Columns['4'].params).toHaveProperty('includeEmptyRows', true);
});
});
describe('8.3.0 old metric visualization defaults', () => {
const context = { log: { warning: () => {} } } as unknown as SavedObjectMigrationContext;
const example = {
@ -2115,6 +2116,74 @@ describe('Lens migrations', () => {
});
});
describe('8.3.0 - convert legend sizes to strings', () => {
const context = { log: { warning: () => {} } } as unknown as SavedObjectMigrationContext;
const migrate = migrations['8.3.0'];
const autoLegendSize = 'auto';
const largeLegendSize = 'large';
const largeLegendSizePx = 180;
it('works for XY visualization and heatmap', () => {
const getDoc = (type: string, legendSize: number | undefined) =>
({
attributes: {
visualizationType: type,
state: {
visualization: {
legend: {
legendSize,
},
},
},
},
} as unknown as SavedObjectUnsanitizedDoc<LensDocShape810>);
expect(
migrate(getDoc('lnsXY', undefined), context).attributes.state.visualization.legend
.legendSize
).toBe(autoLegendSize);
expect(
migrate(getDoc('lnsXY', largeLegendSizePx), context).attributes.state.visualization.legend
.legendSize
).toBe(largeLegendSize);
expect(
migrate(getDoc('lnsHeatmap', undefined), context).attributes.state.visualization.legend
.legendSize
).toBe(autoLegendSize);
expect(
migrate(getDoc('lnsHeatmap', largeLegendSizePx), context).attributes.state.visualization
.legend.legendSize
).toBe(largeLegendSize);
});
it('works for pie visualization', () => {
const pieVisDoc = {
attributes: {
visualizationType: 'lnsPie',
state: {
visualization: {
layers: [
{
legendSize: undefined,
},
{
legendSize: largeLegendSizePx,
},
],
},
},
},
} as unknown as SavedObjectUnsanitizedDoc<LensDocShape810>;
expect(migrate(pieVisDoc, context).attributes.state.visualization.layers).toEqual([
{ legendSize: autoLegendSize },
{ legendSize: largeLegendSize },
]);
});
});
describe('8.3.0 valueLabels in XY', () => {
const context = { log: { warning: () => {} } } as unknown as SavedObjectMigrationContext;
const example = {
@ -2128,6 +2197,7 @@ describe('Lens migrations', () => {
state: {
visualization: {
valueLabels: 'inside',
legend: {},
},
},
},

7
x-pack/plugins/lens/server/migrations/saved_object_migrations.ts
View file

@ -49,6 +49,7 @@ import {
commonSetIncludeEmptyRowsDateHistogram,
commonFixValueLabelsInXY,
commonLockOldMetricVisSettings,
commonPreserveOldLegendSizeDefault,
} from './common_migrations';
interface LensDocShapePre710<VisualizationState = unknown> {
@ -505,6 +506,10 @@ const lockOldMetricVisSettings: SavedObjectMigrationFn<LensDocShape810, LensDocS
doc
) => ({ ...doc, attributes: commonLockOldMetricVisSettings(doc.attributes) });
const preserveOldLegendSizeDefault: SavedObjectMigrationFn<LensDocShape810, LensDocShape810> = (
doc
) => ({ ...doc, attributes: commonPreserveOldLegendSizeDefault(doc.attributes) });
const lensMigrations: SavedObjectMigrationMap = {
'7.7.0': removeInvalidAccessors,
// The order of these migrations matter, since the timefield migration relies on the aggConfigs
@ -524,7 +529,7 @@ const lensMigrations: SavedObjectMigrationMap = {
setIncludeEmptyRowsDateHistogram,
enhanceTableRowHeight
),
'8.3.0': flow(lockOldMetricVisSettings, fixValueLabelsInXY),
'8.3.0': flow(lockOldMetricVisSettings, preserveOldLegendSizeDefault, fixValueLabelsInXY),
};
export const getAllMigrations = (