[Lens][PoC] partition chart as sum of multiple fields

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

@@ -9,6 +9,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 { Datatable, DatatableColumn, DatatableRow } from '@kbn/expressions-plugin/common';
 import { EmptySizeRatios, LegendDisplay, PartitionVisParams } from '../types/expression_renderers';
 import { ChartTypes, PieVisExpressionFunctionDefinition } from '../types';
 import {
@@ -19,6 +20,51 @@ import {
 } from '../constants';
 import { errors, strings } from './i18n';
 
+const transposeTable = (
+  table: Datatable
+): {
+  table: Datatable;
+  metricAccessor: string;
+  bucketAccessor: string;
+} => {
+  const oldRow = table.rows[0]; // only supports single row tables for now
+
+  const nameColumnId = 'name';
+  const valueColumnId = 'value';
+
+  const transposedRows: DatatableRow[] = table.columns.map((column) => ({
+    [nameColumnId]: column.name,
+    [valueColumnId]: oldRow[column.id],
+  }));
+
+  const transposedColumns: DatatableColumn[] = [
+    {
+      id: nameColumnId,
+      name: nameColumnId,
+      meta: {
+        type: 'string',
+      },
+    },
+    {
+      id: valueColumnId,
+      name: valueColumnId,
+      meta: {
+        type: 'number',
+      },
+    },
+  ];
+
+  return {
+    metricAccessor: valueColumnId,
+    bucketAccessor: nameColumnId,
+    table: {
+      type: 'datatable',
+      columns: transposedColumns,
+      rows: transposedRows,
+    },
+  };
+};
+
 export const pieVisFunction = (): PieVisExpressionFunctionDefinition => ({
   name: PIE_VIS_EXPRESSION_NAME,
   type: 'render',
@@ -28,13 +74,17 @@ export const pieVisFunction = (): PieVisExpressionFunctionDefinition => ({
     metric: {
       types: ['vis_dimension', 'string'],
       help: strings.getMetricArgHelp(),
-      required: true,
     },
     buckets: {
       types: ['vis_dimension', 'string'],
       help: strings.getBucketsArgHelp(),
       multi: true,
     },
+    // TODO - revisit arg name (columnsAsSlices?)
+    partitionByColumn: {
+      types: ['boolean'],
+      help: 'whether or not to transpose the datatable before rendering the slices',
+    },
     splitColumn: {
       types: ['vis_dimension', 'string'],
       help: strings.getSplitColumnArgHelp(),
@@ -137,7 +187,9 @@ export const pieVisFunction = (): PieVisExpressionFunctionDefinition => ({
       throw new Error(errors.splitRowAndSplitColumnAreSpecifiedError());
     }
 
-    validateAccessor(args.metric, context.columns);
+    if (args.metric) {
+      validateAccessor(args.metric, context.columns);
+    }
     if (args.buckets) {
       args.buckets.forEach((bucket) => validateAccessor(bucket, context.columns));
     }
@@ -148,6 +200,16 @@ export const pieVisFunction = (): PieVisExpressionFunctionDefinition => ({
       args.splitRow.forEach((splitRow) => validateAccessor(splitRow, context.columns));
     }
 
+    let transposedTable;
+    let transposedMetricAccessor;
+    let transposedBucketAccessor;
+    if (args.partitionByColumn) {
+      const result = transposeTable(context);
+      transposedTable = result.table;
+      transposedMetricAccessor = result.metricAccessor;
+      transposedBucketAccessor = result.bucketAccessor;
+    }
+
     const visConfig: PartitionVisParams = {
       ...args,
       ariaLabel:
@@ -156,22 +218,26 @@ export const pieVisFunction = (): PieVisExpressionFunctionDefinition => ({
         handlers.getExecutionContext?.()?.description,
       palette: args.palette,
       dimensions: {
-        metric: args.metric,
-        buckets: args.buckets,
+        metric: transposedMetricAccessor ?? args.metric,
+        buckets: transposedBucketAccessor ? [transposedBucketAccessor] : args.buckets,
         splitColumn: args.splitColumn,
         splitRow: args.splitRow,
       },
     };
 
+    // TODO fix inspector
     if (handlers?.inspectorAdapters?.tables) {
       handlers.inspectorAdapters.tables.reset();
       handlers.inspectorAdapters.tables.allowCsvExport = true;
 
       const logTable = prepareLogTable(
         context,
         [
-          [[args.metric], strings.getSliceSizeHelp()],
-          [args.buckets, strings.getSliceHelp()],
+          [[transposedMetricAccessor ?? args.metric], strings.getSliceSizeHelp()],
+          [
+            transposedBucketAccessor ? [transposedBucketAccessor] : args.buckets,
+            strings.getSliceHelp(),
+          ],
           [args.splitColumn, strings.getColumnSplitHelp()],
           [args.splitRow, strings.getRowSplitHelp()],
         ],
@@ -184,7 +250,7 @@ export const pieVisFunction = (): PieVisExpressionFunctionDefinition => ({
       type: 'render',
       as: PARTITION_VIS_RENDERER_NAME,
       value: {
-        visData: context,
+        visData: transposedTable ?? context,
         visConfig,
         syncColors: handlers?.isSyncColorsEnabled?.() ?? false,
         visType: args.isDonut ? ChartTypes.DONUT : ChartTypes.PIE,

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

@@ -80,6 +80,7 @@ export interface PartitionVisParams extends VisCommonParams {
 
 export interface PieVisConfig extends VisCommonConfig {
   buckets?: Array<ExpressionValueVisDimension | string>;
+  partitionByColumn?: boolean;
   isDonut: boolean;
   emptySizeRatio?: EmptySizeRatios;
   respectSourceOrder?: boolean;

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

@@ -65,6 +65,7 @@ export enum EmptySizeRatios {
 export interface SharedPieLayerState {
   groups: string[];
   metric?: string;
+  partitionByDimension?: boolean;
   numberDisplay: NumberDisplayType;
   categoryDisplay: CategoryDisplayType;
   legendDisplay: LegendDisplayType;

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/remove_layer_button.tsx → x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_context_menu.tsx

@@ -11,17 +11,23 @@ import {
   EuiButtonEmpty,
   EuiButtonIcon,
   EuiCheckbox,
+  EuiContextMenu,
+  EuiContextMenuPanelDescriptor,
+  EuiContextMenuPanelItemDescriptor,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiIcon,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
   EuiModalHeader,
   EuiModalHeaderTitle,
+  EuiPopover,
+  useGeneratedHtmlId,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import useLocalStorage from 'react-use/lib/useLocalStorage';
-import { Visualization } from '../../../types';
+import { StateSetter, Visualization } from '../../../types';
 import { LocalStorageLens, LOCAL_STORAGE_LENS_KEY } from '../../../settings_storage';
 import { LayerType, layerTypes } from '../../..';
 
@@ -45,8 +51,6 @@ const getButtonCopy = (
   canBeRemoved?: boolean,
   isOnlyLayer?: boolean
 ) => {
-  let ariaLabel;
-
   const layerTypeCopy =
     layerType === layerTypes.DATA
       ? i18n.translate('xpack.lens.modalTitle.layerType.data', {
@@ -80,6 +84,7 @@ const getButtonCopy = (
     modalDesc = modalDescRefLine;
   }
 
+  let ariaLabel;
   if (!canBeRemoved) {
     ariaLabel = i18n.translate('xpack.lens.resetVisualizationAriaLabel', {
       defaultMessage: 'Reset visualization',
@@ -96,33 +101,102 @@ const getButtonCopy = (
     });
   }
 
+  let optionLabel;
+  if (!canBeRemoved) {
+    optionLabel = i18n.translate('xpack.lens.resetVisualizationOptionLabel', {
+      defaultMessage: 'Reset visualization',
+    });
+  } else if (isOnlyLayer) {
+    optionLabel = i18n.translate('xpack.lens.resetLayerOptionLabel', {
+      defaultMessage: 'Reset layer',
+    });
+  } else {
+    optionLabel = i18n.translate('xpack.lens.deleteLayerOptionLabel', {
+      defaultMessage: `Delete layer`,
+    });
+  }
+
   return {
+    optionLabel,
     ariaLabel,
     modalTitle,
     modalDesc,
   };
 };
 
-export function RemoveLayerButton({
+// TODO - clean up remove option generation logic
+export function LayerContextMenu({
   onRemoveLayer,
+  layerId,
   layerIndex,
   isOnlyLayer,
   activeVisualization,
   layerType,
+  visualizationState,
+  updateVisualization,
 }: {
   onRemoveLayer: () => void;
+  layerId: string;
   layerIndex: number;
   isOnlyLayer: boolean;
   activeVisualization: Visualization;
   layerType?: LayerType;
+  visualizationState: unknown;
+  updateVisualization: StateSetter<unknown, unknown>;
 }) {
-  const { ariaLabel, modalTitle, modalDesc } = getButtonCopy(
+  const contextMenuPopoverId = useGeneratedHtmlId({
+    prefix: 'lnsLayerContextMenuPopover',
+  });
+
+  const [contextMenuOpen, setContextMenuOpen] = useState(false);
+
+  const closeContextMenu = () => {
+    setContextMenuOpen(false);
+  };
+
+  const { optionLabel, ariaLabel, modalTitle, modalDesc } = getButtonCopy(
     layerIndex,
     layerType || layerTypes.DATA,
     !!activeVisualization.removeLayer,
     isOnlyLayer
   );
 
+  const panels: EuiContextMenuPanelDescriptor[] = [
+    {
+      id: 0,
+      items: [
+        {
+          name: optionLabel,
+          icon: <EuiIcon type={isOnlyLayer ? 'eraser' : 'trash'} color="danger" />,
+          onClick: () => {
+            closeContextMenu();
+            if (lensLocalStorage?.skipDeleteModal) {
+              return onRemoveLayer();
+            }
+            return showModal();
+          },
+          'data-test-subj': 'lnsLayerRemove',
+          'aria-label': ariaLabel,
+        },
+        ...(activeVisualization.getLayerActions
+          ? activeVisualization.getLayerActions(layerId, visualizationState)
+          : []
+        ).map(
+          (item) =>
+            ({
+              ...item,
+              onClick: () => {
+                updateVisualization(
+                  activeVisualization.onLayerAction!(layerId, item.actionId, visualizationState)
+                );
+                closeContextMenu();
+              },
+            } as EuiContextMenuPanelItemDescriptor)
+        ),
+      ],
+    },
+  ];
+
   const [isModalVisible, setIsModalVisible] = useState(false);
   const [lensLocalStorage, setLensLocalStorage] = useLocalStorage<LocalStorageLens>(
     LOCAL_STORAGE_LENS_KEY,
@@ -138,36 +212,26 @@ export function RemoveLayerButton({
   const closeModal = () => setIsModalVisible(false);
   const showModal = () => setIsModalVisible(true);
 
-  const removeLayer = () => {
-    // If we don't blur the remove / clear button, it remains focused
-    // which is a strange UX in this case. e.target.blur doesn't work
-    // due to who knows what, but probably event re-writing. Additionally,
-    // activeElement does not have blur so, we need to do some casting + safeguards.
-    const el = document.activeElement as unknown as { blur: () => void };
-
-    if (el?.blur) {
-      el.blur();
-    }
-
-    onRemoveLayer();
-  };
-
   return (
     <>
-      <EuiButtonIcon
-        size="xs"
-        iconType={isOnlyLayer ? 'eraser' : 'trash'}
-        color="danger"
-        data-test-subj="lnsLayerRemove"
-        aria-label={ariaLabel}
-        title={ariaLabel}
-        onClick={() => {
-          if (lensLocalStorage?.skipDeleteModal) {
-            return removeLayer();
-          }
-          return showModal();
-        }}
-      />
+      <EuiPopover
+        id={contextMenuPopoverId}
+        button={
+          <EuiButtonIcon
+            iconType={'boxesHorizontal'}
+            aria-label={i18n.translate('xpack.lens.layerContextMenu', {
+              defaultMessage: 'Layer options',
+            })}
+            onClick={() => setContextMenuOpen(!contextMenuOpen)}
+          />
+        }
+        isOpen={contextMenuOpen}
+        closePopover={closeContextMenu}
+        panelPaddingSize="none"
+        anchorPosition="downLeft"
+      >
+        <EuiContextMenu initialPanelId={0} panels={panels} />
+      </EuiPopover>
       {isModalVisible ? (
         <RemoveConfirmModal
           modalTitle={modalTitle}
@@ -176,7 +240,7 @@ export function RemoveLayerButton({
           closeModal={closeModal}
           skipDeleteModal={lensLocalStorage?.skipDeleteModal}
           onChangeShouldShowModal={onChangeShouldShowModal}
-          removeLayer={removeLayer}
+          removeLayer={onRemoveLayer}
         />
       ) : null}
     </>

x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx

@@ -31,7 +31,7 @@ import { DragDropIdentifier, ReorderProvider } from '../../../drag_drop';
 import { LayerSettings } from './layer_settings';
 import { LayerPanelProps, ActiveDimensionState } from './types';
 import { DimensionContainer } from './dimension_container';
-import { RemoveLayerButton } from './remove_layer_button';
+import { LayerContextMenu } from './layer_context_menu';
 import { EmptyDimensionButton } from './buttons/empty_dimension_button';
 import { DimensionButton } from './buttons/dimension_button';
 import { DraggableDimensionButton } from './buttons/draggable_dimension_button';
@@ -327,12 +327,15 @@ export function LayerPanel(
                 />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <RemoveLayerButton
+                <LayerContextMenu
                   onRemoveLayer={onRemoveLayer}
+                  layerId={layerId}
                   layerIndex={layerIndex}
                   isOnlyLayer={isOnlyLayer}
                   activeVisualization={activeVisualization}
                   layerType={activeVisualization.getLayerType(layerId, visualizationState)}
+                  visualizationState={visualizationState}
+                  updateVisualization={props.updateVisualization}
                 />
               </EuiFlexItem>
             </EuiFlexGroup>