[Lens] Legend config

x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx

@@ -63,7 +63,7 @@ export function WorkspacePanelWrapper({
         clearStagedPreview: false,
       });
     },
-    [dispatch]
+    [dispatch, activeVisualization]
   );
   return (
     <>

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

@@ -13,7 +13,7 @@ import { toExpression, toPreviewExpression } from './to_expression';
 import { LayerState, PieVisualizationState } from './types';
 import { suggestions } from './suggestions';
 import { CHART_NAMES, MAX_PIE_BUCKETS, MAX_TREEMAP_BUCKETS } from './constants';
-import { SettingsWidget } from './settings_widget';
+import { PieToolbar } from './toolbar';
 
 function newLayerState(layerId: string): LayerState {
   return {
@@ -204,10 +204,10 @@ export const pieVisualization: Visualization<PieVisualizationState, PieVisualiza
   toExpression,
   toPreviewExpression,
 
-  renderLayerContextMenu(domElement, props) {
+  renderToolbar(domElement, props) {
     render(
       <I18nProvider>
-        <SettingsWidget {...props} />
+        <PieToolbar {...props} />
       </I18nProvider>,
       domElement
     );

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

@@ -7,6 +7,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { i18n } from '@kbn/i18n';
+import { Position } from '@elastic/charts';
 import { I18nProvider } from '@kbn/i18n/react';
 import {
   IInterpreterRenderHandlers,
@@ -73,6 +74,11 @@ export const pie: ExpressionFunctionDefinition<
       types: ['boolean'],
       help: '',
     },
+    legendPosition: {
+      types: ['string'],
+      options: [Position.Top, Position.Right, Position.Bottom, Position.Left],
+      help: '',
+    },
     percentDecimals: {
       types: ['number'],
       help: '',

x-pack/plugins/lens/public/pie_visualization/render_function.test.tsx

@@ -65,6 +65,13 @@ describe('PieVisualization component', () => {
       };
     }
 
+    test('it shows legend on correct side', () => {
+      const component = shallow(
+        <PieComponent args={{ ...args, legendPosition: 'top' }} {...getDefaultArgs()} />
+      );
+      expect(component.find(Settings).prop('legendPosition')).toEqual('top');
+    });
+
     test('it shows legend for 2 groups using default legendDisplay', () => {
       const component = shallow(<PieComponent args={args} {...getDefaultArgs()} />);
       expect(component.find(Settings).prop('showLegend')).toEqual(true);

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

@@ -22,6 +22,7 @@ import {
   PartitionFillLabel,
   RecursivePartial,
   LayerValue,
+  Position,
 } from '@elastic/charts';
 import { FormatFactory, LensFilterEvent } from '../types';
 import { VisualizationContainer } from '../visualization_container';
@@ -55,6 +56,7 @@ export function PieComponent(
     numberDisplay,
     categoryDisplay,
     legendDisplay,
+    legendPosition,
     nestedLegend,
     percentDecimals,
     hideLabels,
@@ -237,6 +239,7 @@ export function PieComponent(
             (legendDisplay === 'show' ||
               (legendDisplay === 'default' && columnGroups.length > 1 && shape !== 'treemap'))
           }
+          legendPosition={legendPosition || Position.Right}
           legendMaxDepth={nestedLegend ? undefined : 1 /* Color is based only on first layer */}
           onElementClick={(args) => {
             const context = getFilterContext(

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

@@ -41,6 +41,7 @@ function expressionHelper(
           numberDisplay: [layer.numberDisplay],
           categoryDisplay: [layer.categoryDisplay],
           legendDisplay: [layer.legendDisplay],
+          legendPosition: [layer.legendPosition || 'right'],
           percentDecimals: [layer.percentDecimals ?? DEFAULT_PERCENT_DECIMALS],
           nestedLegend: [!!layer.nestedLegend],
         },

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

@@ -0,0 +1,3 @@
+.lnsPieToolbar__popover {
+  width: $euiFormMaxWidth;
+}