[Lens] Set legend pixel width (#126018)

* [Lens] Set legend pixel width

* Update tests to include legendSize

* Fix typo in legend_settings_popover.test.tsx

* Update text for tooltips

* Fix row display for small screen

* Update legend size setting interface

* Fix label condition

* Add disable for switch

* Change condition for input disabling

* Update translation key

* Replace legend width setting input with select, make it disabled for horizontal legends and move number of columns setting outside of legend location settings component to place legend width setting above

* Capitalize legend sizes select values names

Co-authored-by: Kibana Machine <[email protected]>

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

@@ -59,6 +59,12 @@ export const heatmapLegendConfig: ExpressionFunctionDefinition<
         defaultMessage: 'Specifies whether or not the legend items should be truncated.',
       }),
     },
+    legendSize: {
+      types: ['number'],
+      help: i18n.translate('expressionHeatmap.function.args.legendSize.help', {
+        defaultMessage: 'Specifies the legend size in pixels.',
+      }),
+    },
   },
   fn(input, args) {
     validateOptions(args.position, Position, errors.invalidPositionError);

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

@@ -38,6 +38,11 @@ export interface HeatmapLegendConfig {
    * Defines if the legend items should be truncated
    */
   shouldTruncate?: boolean;
+  /**
+   * 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;
 }
 
 export type HeatmapLegendConfigResult = HeatmapLegendConfig & {

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

@@ -481,6 +481,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}
               legendColorPicker={uiState ? LegendColorPickerWrapper : undefined}
               debugState={window._echDebugStateFlag ?? false}
               tooltip={tooltip}

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

@@ -47,6 +47,10 @@ export const strings = {
     i18n.translate('expressionPartitionVis.reusable.function.args.legendPositionHelpText', {
       defaultMessage: 'Position the legend on top, bottom, left, right of the chart',
     }),
+  getLegendSizeArgHelp: () =>
+    i18n.translate('expressionPartitionVis.reusable.function.args.legendSizeHelpText', {
+      defaultMessage: 'Specifies the legend size in pixels',
+    }),
   getNestedLegendArgHelp: () =>
     i18n.translate('expressionPartitionVis.reusable.function.args.nestedLegendHelpText', {
       defaultMessage: 'Show a more detailed legend',

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

@@ -62,6 +62,10 @@ export const mosaicVisFunction = (): MosaicVisExpressionFunctionDefinition => ({
       help: strings.getLegendPositionArgHelp(),
       options: [Position.Top, Position.Right, Position.Bottom, Position.Left],
     },
+    legendSize: {
+      types: ['number'],
+      help: strings.getLegendSizeArgHelp(),
+    },
     nestedLegend: {
       types: ['boolean'],
       help: strings.getNestedLegendArgHelp(),

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

@@ -62,6 +62,10 @@ export const pieVisFunction = (): PieVisExpressionFunctionDefinition => ({
       help: strings.getLegendPositionArgHelp(),
       options: [Position.Top, Position.Right, Position.Bottom, Position.Left],
     },
+    legendSize: {
+      types: ['number'],
+      help: strings.getLegendSizeArgHelp(),
+    },
     nestedLegend: {
       types: ['boolean'],
       help: strings.getNestedLegendArgHelp(),

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

@@ -62,6 +62,10 @@ export const treemapVisFunction = (): TreemapVisExpressionFunctionDefinition =>
       help: strings.getLegendPositionArgHelp(),
       options: [Position.Top, Position.Right, Position.Bottom, Position.Left],
     },
+    legendSize: {
+      types: ['number'],
+      help: strings.getLegendSizeArgHelp(),
+    },
     nestedLegend: {
       types: ['boolean'],
       help: strings.getNestedLegendArgHelp(),

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

@@ -61,6 +61,10 @@ export const waffleVisFunction = (): WaffleVisExpressionFunctionDefinition => ({
       help: strings.getLegendPositionArgHelp(),
       options: [Position.Top, Position.Right, Position.Bottom, Position.Left],
     },
+    legendSize: {
+      types: ['number'],
+      help: strings.getLegendSizeArgHelp(),
+    },
     truncateLegend: {
       types: ['boolean'],
       help: strings.getTruncateLegendArgHelp(),

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

@@ -52,6 +52,7 @@ interface VisCommonParams {
   legendPosition: Position;
   truncateLegend: boolean;
   maxLegendLines: number;
+  legendSize?: number;
   ariaLabel?: string;
 }
 

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

@@ -387,6 +387,7 @@ const PartitionVisComponent = (props: PartitionVisComponentProps) => {
                   showLegend ?? shouldShowLegend(visType, visParams.legendDisplay, bucketColumns)
                 }
                 legendPosition={legendPosition}
+                legendSize={visParams.legendSize}
                 legendMaxDepth={visParams.nestedLegend ? undefined : 1}
                 legendColorPicker={props.uiState ? LegendColorPickerWrapper : undefined}
                 flatLegend={flatLegend}

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

@@ -20,6 +20,7 @@ const prepareLegend = (params: HeatmapVisParams) => {
     position: params.legendPosition,
     shouldTruncate: params.truncateLegend ?? true,
     maxLines: params.maxLegendLines ?? 1,
+    legendSize: params.legendSize,
   });
 
   return buildExpression([legend]);

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

@@ -23,6 +23,7 @@ export interface HeatmapVisParams {
   legendPosition: Position;
   truncateLegend?: boolean;
   maxLegendLines?: number;
+  legendSize?: number;
   lastRangeIsRightOpen: boolean;
   percentageMode: boolean;
   valueAxes: ValueAxis[];

x-pack/plugins/lens/common/expressions/xy_chart/legend_config.ts

@@ -45,6 +45,11 @@ export interface LegendConfig {
    * Flag whether the legend items are truncated or not
    */
   shouldTruncate?: boolean;
+  /**
+   * 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;
 }
 
 export type LegendConfigResult = LegendConfig & { type: 'lens_xy_legendConfig' };
@@ -121,6 +126,12 @@ export const legendConfig: ExpressionFunctionDefinition<
         defaultMessage: 'Specifies whether the legend items will be truncated or not',
       }),
     },
+    legendSize: {
+      types: ['number'],
+      help: i18n.translate('xpack.lens.xyChart.legendSize.help', {
+        defaultMessage: 'Specifies the legend size in pixels.',
+      }),
+    },
   },
   fn: function fn(input: unknown, args: LegendConfig) {
     return {

x-pack/plugins/lens/common/types.ts

@@ -111,6 +111,7 @@ export interface SharedPieLayerState {
   percentDecimals?: number;
   emptySizeRatio?: number;
   legendMaxLines?: number;
+  legendSize?: number;
   truncateLegend?: boolean;
 }
 

x-pack/plugins/lens/public/heatmap_visualization/toolbar_component.tsx

@@ -110,6 +110,16 @@ export const HeatmapToolbar = memo(
                   legend: { ...state.legend, shouldTruncate: !current },
                 });
               }}
+              legendSize={state?.legend.legendSize}
+              onLegendSizeChange={(legendSize) => {
+                setState({
+                  ...state,
+                  legend: {
+                    ...state.legend,
+                    legendSize,
+                  },
+                });
+              }}
             />
           </EuiFlexGroup>
         </EuiFlexItem>

x-pack/plugins/lens/public/heatmap_visualization/visualization.test.ts

@@ -418,6 +418,7 @@ describe('heatmap', () => {
                       arguments: {
                         isVisible: [true],
                         position: [Position.Right],
+                        legendSize: [],
                       },
                     },
                   ],

x-pack/plugins/lens/public/heatmap_visualization/visualization.tsx

@@ -340,6 +340,7 @@ export const getHeatmapVisualization = ({
                     arguments: {
                       isVisible: [state.legend.isVisible],
                       position: [state.legend.position],
+                      legendSize: state.legend.legendSize ? [state.legend.legendSize] : [],
                     },
                   },
                 ],

x-pack/plugins/lens/public/pie_visualization/to_expression.ts

@@ -144,6 +144,7 @@ const generateCommonArguments: GenerateExpressionAstArguments = (
   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,

x-pack/plugins/lens/public/pie_visualization/toolbar.tsx

@@ -123,6 +123,11 @@ export function PieToolbar(props: VisualizationToolbarProps<PieVisualizationStat
     [onStateChange]
   );
 
+  const onLegendSizeChange = useCallback(
+    (val) => onStateChange({ legendSize: val }),
+    [onStateChange]
+  );
+
   const onValueInLegendChange = useCallback(() => {
     onStateChange({
       showValuesInLegend: !shouldShowValuesInLegend(layer, state.shape),
@@ -251,6 +256,8 @@ export function PieToolbar(props: VisualizationToolbarProps<PieVisualizationStat
         onTruncateLegendChange={onTruncateLegendChange}
         maxLines={layer?.legendMaxLines}
         onMaxLinesChange={onLegendMaxLinesChange}
+        legendSize={layer.legendSize}
+        onLegendSizeChange={onLegendSizeChange}
       />
     </EuiFlexGroup>
   );

x-pack/plugins/lens/public/shared_components/columns_number_setting.test.tsx

@@ -0,0 +1,19 @@
+/*
+ * 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 { mountWithIntl as mount } from '@kbn/test-jest-helpers';
+import { ColumnsNumberSetting } from './columns_number_setting';
+
+describe('Columns Number Setting', () => {
+  it('should have default the columns input to 1 when no value is given', () => {
+    const component = mount(<ColumnsNumberSetting isDisabled={false} isLegendOutside={false} />);
+    expect(
+      component.find('[data-test-subj="lens-legend-location-columns-input"]').at(0).prop('value')
+    ).toEqual(1);
+  });
+});

x-pack/plugins/lens/public/shared_components/columns_number_setting.tsx

@@ -0,0 +1,84 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiFieldNumber, EuiFormRow } from '@elastic/eui';
+import { useDebouncedValue } from './debounced_value';
+import { TooltipWrapper } from './tooltip_wrapper';
+
+export const DEFAULT_FLOATING_COLUMNS = 1;
+
+interface ColumnsNumberSettingProps {
+  /**
+   * Sets the number of columns for legend inside chart
+   */
+  floatingColumns?: number;
+  /**
+   * Callback on horizontal alignment option change
+   */
+  onFloatingColumnsChange?: (value: number) => void;
+  /**
+   * Flag to disable the location settings
+   */
+  isDisabled: boolean;
+  /**
+   * Indicates if legend is located outside
+   */
+  isLegendOutside: boolean;
+}
+
+export const ColumnsNumberSetting = ({
+  floatingColumns,
+  onFloatingColumnsChange = () => {},
+  isDisabled,
+  isLegendOutside,
+}: ColumnsNumberSettingProps) => {
+  const { inputValue, handleInputChange } = useDebouncedValue({
+    value: floatingColumns ?? DEFAULT_FLOATING_COLUMNS,
+    onChange: onFloatingColumnsChange,
+  });
+
+  return (
+    <EuiFormRow
+      label={i18n.translate('xpack.lens.shared.legendInsideColumnsLabel', {
+        defaultMessage: 'Number of columns',
+      })}
+      fullWidth
+      display="columnCompressed"
+    >
+      <TooltipWrapper
+        tooltipContent={
+          isDisabled
+            ? i18n.translate('xpack.lens.shared.legendVisibleTooltip', {
+                defaultMessage: 'Requires legend to be shown',
+              })
+            : i18n.translate('xpack.lens.shared.legendInsideTooltip', {
+                defaultMessage: 'Requires legend to be located inside visualization',
+              })
+        }
+        condition={isDisabled || isLegendOutside}
+        position="top"
+        delay="regular"
+        display="block"
+      >
+        <EuiFieldNumber
+          data-test-subj="lens-legend-location-columns-input"
+          value={inputValue}
+          min={1}
+          max={5}
+          compressed
+          disabled={isDisabled || isLegendOutside}
+          onChange={(e) => {
+            handleInputChange(Number(e.target.value));
+          }}
+          step={1}
+        />
+      </TooltipWrapper>
+    </EuiFormRow>
+  );
+};

x-pack/plugins/lens/public/shared_components/legend_location_settings.test.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import { Position } from '@elastic/charts';
-import { shallowWithIntl as shallow, mountWithIntl as mount } from '@kbn/test-jest-helpers';
+import { shallowWithIntl as shallow } from '@kbn/test-jest-helpers';
 import { LegendLocationSettings, LegendLocationSettingsProps } from './legend_location_settings';
 
 describe('Legend Location Settings', () => {
@@ -104,17 +104,6 @@ describe('Legend Location Settings', () => {
     expect(newProps.onAlignmentChange).toHaveBeenCalled();
   });
 
-  it('should have default the columns input to 1 when no value is given', () => {
-    const newProps = {
-      ...props,
-      location: 'inside',
-    } as LegendLocationSettingsProps;
-    const component = mount(<LegendLocationSettings {...newProps} />);
-    expect(
-      component.find('[data-test-subj="lens-legend-location-columns-input"]').at(0).prop('value')
-    ).toEqual(1);
-  });
-
   it('should disable the components when is Disabled is true', () => {
     const newProps = {
       ...props,