[Lens] update default legend size to medium

src/plugins/chart_expressions/expression_partition_vis/common/expression_functions/pie_vis_function.test.ts

@@ -31,6 +31,7 @@ describe('interpreter/functions#pieVis', () => {
     addTooltip: true,
     legendDisplay: LegendDisplay.SHOW,
     legendPosition: 'right',
+    legendSize: 80,
     isDonut: true,
     emptySizeRatio: EmptySizeRatios.SMALL,
     nestedLegend: true,

src/plugins/chart_expressions/expression_partition_vis/common/types/expression_renderers.ts

@@ -84,6 +84,7 @@ export interface PieVisConfig extends VisCommonConfig {
   respectSourceOrder?: boolean;
   startFromSecondLargestSlice?: boolean;
   distinctColors?: boolean;
+  legendSize: number;
   nestedLegend: boolean;
 }
 

src/plugins/vis_default_editor/kibana.json

@@ -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"

src/plugins/vis_default_editor/public/components/options/legend_size_settings.test.tsx

@@ -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 { LegendSizes, 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 = LegendSizes.SMALL;
+
+    const instance = shallow(
+      <LegendSizeSettings
+        legendSize={Number(CURRENT_SIZE)}
+        onLegendSizeChange={() => {}}
+        isVerticalLegend={true}
+        showAutoOption={true}
+      />
+    );
+
+    expect(instance.find(EuiSuperSelect).props().valueOfSelected).toBe(CURRENT_SIZE.toString());
+  });
+
+  it('allows user to select a new option', () => {
+    const onSizeChange = jest.fn();
+
+    const instance = shallow(
+      <LegendSizeSettings
+        legendSize={Number(LegendSizes.SMALL)}
+        onLegendSizeChange={onSizeChange}
+        isVerticalLegend={true}
+        showAutoOption={true}
+      />
+    );
+
+    const onChange = instance.find(EuiSuperSelect).props().onChange;
+
+    onChange(LegendSizes.EXTRA_LARGE);
+    onChange(DEFAULT_LEGEND_SIZE);
+
+    expect(onSizeChange).toHaveBeenNthCalledWith(1, Number(LegendSizes.EXTRA_LARGE));
+    expect(onSizeChange).toHaveBeenNthCalledWith(2, undefined);
+  });
+
+  it('hides "auto" option if visualization not using it', () => {
+    const getOptions = (showAutoOption: boolean) =>
+      shallow(
+        <LegendSizeSettings
+          legendSize={LegendSizes.LARGE}
+          onLegendSizeChange={() => {}}
+          isVerticalLegend={true}
+          showAutoOption={showAutoOption}
+        />
+      )
+        .find(EuiSuperSelect)
+        .props().options;
+
+    const autoOption = expect.objectContaining({ value: LegendSizes.AUTO.toString() });
+
+    expect(getOptions(true)).toContainEqual(autoOption);
+    expect(getOptions(false)).not.toContainEqual(autoOption);
+  });
+});

src/plugins/vis_default_editor/public/components/options/legend_size_settings.tsx

@@ -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 { LegendSizes, 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: string; inputDisplay: string }> = [
   {
-    value: LegendSizes.AUTO,
-    inputDisplay: i18n.translate(
-      'visDefaultEditor.options.legendSizeSetting.legendSizeOptions.auto',
-      {
-        defaultMessage: 'Auto',
-      }
-    ),
-  },
-  {
-    value: LegendSizes.SMALL,
+    value: LegendSizes.SMALL.toString(),
     inputDisplay: i18n.translate(
       'visDefaultEditor.options.legendSizeSetting.legendSizeOptions.small',
       {
@@ -39,7 +23,7 @@ const legendSizeOptions: Array<{ value: LegendSizes; inputDisplay: string }> = [
     ),
   },
   {
-    value: LegendSizes.MEDIUM,
+    value: LegendSizes.MEDIUM.toString(),
     inputDisplay: i18n.translate(
       'visDefaultEditor.options.legendSizeSetting.legendSizeOptions.medium',
       {
@@ -48,7 +32,7 @@ const legendSizeOptions: Array<{ value: LegendSizes; inputDisplay: string }> = [
     ),
   },
   {
-    value: LegendSizes.LARGE,
+    value: LegendSizes.LARGE.toString(),
     inputDisplay: i18n.translate(
       'visDefaultEditor.options.legendSizeSetting.legendSizeOptions.large',
       {
@@ -57,7 +41,7 @@ const legendSizeOptions: Array<{ value: LegendSizes; inputDisplay: string }> = [
     ),
   },
   {
-    value: LegendSizes.EXTRA_LARGE,
+    value: LegendSizes.EXTRA_LARGE.toString(),
     inputDisplay: i18n.translate(
       'visDefaultEditor.options.legendSizeSetting.legendSizeOptions.extraLarge',
       {
@@ -71,12 +55,14 @@ interface LegendSizeSettingsProps {
   legendSize?: number;
   onLegendSizeChange: (size?: number) => 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 : Number(option)),
     [onLegendSizeChange]
   );
 
+  const options = showAutoOption
+    ? [
+        {
+          value: LegendSizes.AUTO.toString(),
+          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?.toString() || DEFAULT_LEGEND_SIZE.toString()}
+      options={options}
       onChange={onLegendSizeOptionChange}
       disabled={!isVerticalLegend}
     />

src/plugins/vis_types/heatmap/public/editor/components/heatmap.tsx

@@ -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 { LegendSizes, 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 === LegendSizes.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}
             />
           </>
         )}

src/plugins/vis_types/heatmap/public/to_ast.ts

@@ -8,6 +8,7 @@
 
 import { VisToExpressionAst, getVisSchemas, SchemaConfig } from '@kbn/visualizations-plugin/public';
 import { buildExpression, buildExpressionFunction } from '@kbn/expressions-plugin/public';
+import { DEFAULT_LEGEND_SIZE } from '@kbn/visualizations-plugin/public';
 import { getStopsWithColorsFromRanges, getStopsWithColorsFromColorsNumber } from './utils/palette';
 import type { HeatmapVisParams } from './types';
 import { getEsaggsFn } from './to_ast_esaggs';
@@ -20,7 +21,7 @@ const prepareLegend = (params: HeatmapVisParams) => {
     position: params.legendPosition,
     shouldTruncate: params.truncateLegend ?? true,
     maxLines: params.maxLegendLines ?? 1,
-    legendSize: params.legendSize,
+    legendSize: params.legendSize ?? DEFAULT_LEGEND_SIZE,
   });
 
   return buildExpression([legend]);

src/plugins/vis_types/pie/public/editor/components/pie.tsx

@@ -31,7 +31,7 @@ import {
   LongLegendOptions,
   LegendSizeSettings,
 } from '@kbn/vis-default-editor-plugin/public';
-import { VisEditorOptionsProps } from '@kbn/visualizations-plugin/public';
+import { LegendSizes, 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 === LegendSizes.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}
             />
           </>
         )}

src/plugins/vis_types/pie/public/to_ast.ts

@@ -7,7 +7,12 @@
  */
 
 import type { PaletteOutput } from '@kbn/coloring';
-import { getVisSchemas, VisToExpressionAst, SchemaConfig } from '@kbn/visualizations-plugin/public';
+import {
+  getVisSchemas,
+  VisToExpressionAst,
+  SchemaConfig,
+  DEFAULT_LEGEND_SIZE,
+} from '@kbn/visualizations-plugin/public';
 import { buildExpression, buildExpressionFunction } from '@kbn/expressions-plugin/public';
 import {
   PIE_VIS_EXPRESSION_NAME,
@@ -65,7 +70,7 @@ export const toExpressionAst: VisToExpressionAst<PartitionVisParams> = async (vi
     nestedLegend: vis.params?.nestedLegend ?? false,
     truncateLegend: vis.params.truncateLegend,
     maxLegendLines: vis.params.maxLegendLines,
-    legendSize: vis.params.legendSize,
+    legendSize: vis.params.legendSize ?? DEFAULT_LEGEND_SIZE,
     distinctColors: vis.params?.distinctColors,
     isDonut: vis.params.isDonut ?? false,
     emptySizeRatio: vis.params.emptySizeRatio,