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

src/plugins/chart_expressions/expression_heatmap/common/expression_functions/heatmap_legend.ts

@@ -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) {

src/plugins/chart_expressions/expression_heatmap/common/types/expression_functions.ts

@@ -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 & {

src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.test.tsx

@@ -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 () => {

src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx

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

src/plugins/chart_expressions/expression_partition_vis/common/expression_functions/i18n.ts

@@ -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', {

src/plugins/chart_expressions/expression_partition_vis/common/expression_functions/mosaic_vis_function.ts

@@ -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'],

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

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

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

@@ -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'],

src/plugins/chart_expressions/expression_partition_vis/common/expression_functions/treemap_vis_function.ts

@@ -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'],

src/plugins/chart_expressions/expression_partition_vis/common/expression_functions/waffle_vis_function.ts

@@ -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'],

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

@@ -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;
 }
 

src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.test.tsx

@@ -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 });