[Lens] Transpose columns

api_docs/lens.json

@@ -107,7 +107,7 @@
             "description": [],
             "source": {
               "path": "x-pack/plugins/lens/public/datatable_visualization/visualization.tsx",
-              "lineNumber": 35
+              "lineNumber": 43
             },
             "signature": [
               {
@@ -128,7 +128,7 @@
             "description": [],
             "source": {
               "path": "x-pack/plugins/lens/public/datatable_visualization/visualization.tsx",
-              "lineNumber": 36
+              "lineNumber": 44
             }
           },
           {
@@ -139,7 +139,7 @@
             "description": [],
             "source": {
               "path": "x-pack/plugins/lens/public/datatable_visualization/visualization.tsx",
-              "lineNumber": 37
+              "lineNumber": 45
             },
             "signature": [
               {
@@ -155,7 +155,7 @@
         ],
         "source": {
           "path": "x-pack/plugins/lens/public/datatable_visualization/visualization.tsx",
-          "lineNumber": 34
+          "lineNumber": 42
         },
         "initialIsOpen": false
       },

x-pack/plugins/lens/public/datatable_visualization/components/columns.tsx

@@ -7,8 +7,12 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiDataGridColumn, EuiDataGridColumnCellActionProps } from '@elastic/eui';
-import type { Datatable, DatatableColumnMeta } from 'src/plugins/expressions';
+import {
+  EuiDataGridColumn,
+  EuiDataGridColumnCellActionProps,
+  EuiListGroupItemProps,
+} from '@elastic/eui';
+import type { Datatable, DatatableColumn, DatatableColumnMeta } from 'src/plugins/expressions';
 import type { FormatFactory } from '../../types';
 import { ColumnConfig } from './table_basic';
 
@@ -22,6 +26,10 @@ export const createGridColumns = (
     rowIndex: number,
     negate?: boolean
   ) => void,
+  handleTransposedColumnClick: (
+    bucketValues: Array<{ originalBucketColumn: DatatableColumn; value: unknown }>,
+    negate?: boolean
+  ) => void,
   isReadOnly: boolean,
   columnConfig: ColumnConfig,
   visibleColumns: string[],
@@ -135,9 +143,63 @@ export const createGridColumns = (
         ]
       : undefined;
 
-    const column = columnConfig.columns.find(({ columnId }) => columnId === field);
-    const initialWidth = column?.width;
-    const isHidden = column?.hidden;
+    const columnArgs = columnConfig.columns.find(({ columnId }) => columnId === field);
+    const isTransposed = Boolean(columnArgs?.originalColumnId);
+    const initialWidth = columnArgs?.width;
+    const isHidden = columnArgs?.hidden;
+    const originalColumnId = columnArgs?.originalColumnId;
+
+    const additionalActions: EuiListGroupItemProps[] = [];
+
+    if (!isReadOnly) {
+      additionalActions.push({
+        color: 'text',
+        size: 'xs',
+        onClick: () => onColumnResize({ columnId: originalColumnId || field, width: undefined }),
+        iconType: 'empty',
+        label: i18n.translate('xpack.lens.table.resize.reset', {
+          defaultMessage: 'Reset width',
+        }),
+        'data-test-subj': 'lensDatatableResetWidth',
+        isDisabled: initialWidth == null,
+      });
+      if (!isTransposed) {
+        additionalActions.push({
+          color: 'text',
+          size: 'xs',
+          onClick: () => onColumnHide({ columnId: originalColumnId || field }),
+          iconType: 'eyeClosed',
+          label: i18n.translate('xpack.lens.table.hide.hideLabel', {
+            defaultMessage: 'Hide',
+          }),
+          'data-test-subj': 'lensDatatableHide',
+          isDisabled: !isHidden && visibleColumns.length <= 1,
+        });
+      } else if (columnArgs?.bucketValues) {
+        const bucketValues = columnArgs?.bucketValues;
+        additionalActions.push({
+          color: 'text',
+          size: 'xs',
+          onClick: () => handleTransposedColumnClick(bucketValues, false),
+          iconType: 'plusInCircle',
+          label: i18n.translate('xpack.lens.table.columnFilter.filterForValueText', {
+            defaultMessage: 'Filter for column',
+          }),
+          'data-test-subj': 'lensDatatableHide',
+        });
+
+        additionalActions.push({
+          color: 'text',
+          size: 'xs',
+          onClick: () => handleTransposedColumnClick(bucketValues, true),
+          iconType: 'minusInCircle',
+          label: i18n.translate('xpack.lens.table.columnFilter.filterOutValueText', {
+            defaultMessage: 'Filter out column',
+          }),
+          'data-test-subj': 'lensDatatableHide',
+        });
+      }
+    }
 
     const columnDefinition: EuiDataGridColumn = {
       id: field,
@@ -162,32 +224,7 @@ export const createGridColumns = (
                 defaultMessage: 'Sort descending',
               }),
             },
-        additional: isReadOnly
-          ? undefined
-          : [
-              {
-                color: 'text',
-                size: 'xs',
-                onClick: () => onColumnResize({ columnId: field, width: undefined }),
-                iconType: 'empty',
-                label: i18n.translate('xpack.lens.table.resize.reset', {
-                  defaultMessage: 'Reset width',
-                }),
-                'data-test-subj': 'lensDatatableResetWidth',
-                isDisabled: initialWidth == null,
-              },
-              {
-                color: 'text',
-                size: 'xs',
-                onClick: () => onColumnHide({ columnId: field }),
-                iconType: 'eyeClosed',
-                label: i18n.translate('xpack.lens.table.hide.hideLabel', {
-                  defaultMessage: 'Hide',
-                }),
-                'data-test-subj': 'lensDatatableHide',
-                isDisabled: !isHidden && visibleColumns.length <= 1,
-              },
-            ],
+        additional: additionalActions,
       },
     };
 

x-pack/plugins/lens/public/datatable_visualization/components/dimension_editor.tsx

@@ -10,6 +10,7 @@ import { i18n } from '@kbn/i18n';
 import { EuiFormRow, EuiSwitch, EuiButtonGroup, htmlIdGenerator } from '@elastic/eui';
 import { VisualizationDimensionEditorProps } from '../../types';
 import { DatatableVisualizationState } from '../visualization';
+import { getOriginalId } from '../transpose_helpers';
 
 const idPrefix = htmlIdGenerator()();
 
@@ -20,13 +21,15 @@ export function TableDimensionEditor(
   const column = state.columns.find(({ columnId }) => accessor === columnId);
 
   if (!column) return null;
+  if (column.isTransposed) return null;
 
   // either read config state or use same logic as chart itself
   const currentAlignment =
     column?.alignment ||
     (frame.activeData &&
-    frame.activeData[state.layerId].columns.find((col) => col.id === accessor)?.meta.type ===
-      'number'
+    frame.activeData[state.layerId].columns.find(
+      (col) => col.id === accessor || getOriginalId(col.id) === accessor
+    )?.meta.type === 'number'
       ? 'right'
       : 'left');
 
@@ -89,39 +92,41 @@ export function TableDimensionEditor(
           }}
         />
       </EuiFormRow>
-      <EuiFormRow
-        label={i18n.translate('xpack.lens.table.columnVisibilityLabel', {
-          defaultMessage: 'Column hidden in table',
-        })}
-        display="columnCompressedSwitch"
-      >
-        <EuiSwitch
-          compressed
+      {!column.isTransposed && (
+        <EuiFormRow
           label={i18n.translate('xpack.lens.table.columnVisibilityLabel', {
-            defaultMessage: 'Column hidden in table',
+            defaultMessage: 'Hide column',
           })}
-          showLabel={false}
-          data-test-subj="lns-table-column-hidden"
-          checked={Boolean(column?.hidden)}
-          disabled={!column.hidden && visibleColumnsCount <= 1}
-          onChange={() => {
-            const newState = {
-              ...state,
-              columns: state.columns.map((currentColumn) => {
-                if (currentColumn.columnId === accessor) {
-                  return {
-                    ...currentColumn,
-                    hidden: !column.hidden,
-                  };
-                } else {
-                  return currentColumn;
-                }
-              }),
-            };
-            setState(newState);
-          }}
-        />
-      </EuiFormRow>
+          display="columnCompressedSwitch"
+        >
+          <EuiSwitch
+            compressed
+            label={i18n.translate('xpack.lens.table.columnVisibilityLabel', {
+              defaultMessage: 'Hide column',
+            })}
+            showLabel={false}
+            data-test-subj="lns-table-column-hidden"
+            checked={Boolean(column?.hidden)}
+            disabled={!column.hidden && visibleColumnsCount <= 1}
+            onChange={() => {
+              const newState = {
+                ...state,
+                columns: state.columns.map((currentColumn) => {
+                  if (currentColumn.columnId === accessor) {
+                    return {
+                      ...currentColumn,
+                      hidden: !column.hidden,
+                    };
+                  } else {
+                    return currentColumn;
+                  }
+                }),
+              };
+              setState(newState);
+            }}
+          />
+        </EuiFormRow>
+      )}
     </>
   );
 }