[Lens] Allow number formatting within Lens (elastic#56253) (elastic#5…

…8920)

* [Lens] Allow custom number formats on dimensions

* Fix merge issues

* Text and decimal changes from review

* Persist number format across operations

* Respond to review comments

* Change label

* Add persistence

* Fix import

* 2 decimals

* Persist number formatting on drop too

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

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

src/plugins/data/common/field_formats/types.ts

@@ -87,6 +87,7 @@ export type IFieldFormatType = (new (
   getConfig?: FieldFormatsGetConfigFn
 ) => FieldFormat) & {
   id: FieldFormatId;
+  title: string;
   fieldType: string | string[];
 };
 

x-pack/legacy/plugins/lens/public/editor_frame_service/format_column.ts

@@ -0,0 +1,92 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { ExpressionFunctionDefinition, KibanaDatatable } from 'src/plugins/expressions/public';
+
+interface FormatColumn {
+  format: string;
+  columnId: string;
+  decimals?: number;
+}
+
+const supportedFormats: Record<string, { decimalsToPattern: (decimals?: number) => string }> = {
+  number: {
+    decimalsToPattern: (decimals = 2) => {
+      if (decimals === 0) {
+        return `0,0`;
+      }
+      return `0,0.${'0'.repeat(decimals)}`;
+    },
+  },
+  percent: {
+    decimalsToPattern: (decimals = 2) => {
+      if (decimals === 0) {
+        return `0,0%`;
+      }
+      return `0,0.${'0'.repeat(decimals)}%`;
+    },
+  },
+  bytes: {
+    decimalsToPattern: (decimals = 2) => {
+      if (decimals === 0) {
+        return `0,0b`;
+      }
+      return `0,0.${'0'.repeat(decimals)}b`;
+    },
+  },
+};
+
+export const formatColumn: ExpressionFunctionDefinition<
+  'lens_format_column',
+  KibanaDatatable,
+  FormatColumn,
+  KibanaDatatable
+> = {
+  name: 'lens_format_column',
+  type: 'kibana_datatable',
+  help: '',
+  args: {
+    format: {
+      types: ['string'],
+      help: '',
+      required: true,
+    },
+    columnId: {
+      types: ['string'],
+      help: '',
+      required: true,
+    },
+    decimals: {
+      types: ['number'],
+      help: '',
+    },
+  },
+  inputTypes: ['kibana_datatable'],
+  fn(input, { format, columnId, decimals }: FormatColumn) {
+    return {
+      ...input,
+      columns: input.columns.map(col => {
+        if (col.id === columnId) {
+          if (supportedFormats[format]) {
+            return {
+              ...col,
+              formatHint: {
+                id: format,
+                params: { pattern: supportedFormats[format].decimalsToPattern(decimals) },
+              },
+            };
+          } else {
+            return {
+              ...col,
+              formatHint: { id: format, params: {} },
+            };
+          }
+        }
+        return col;
+      }),
+    };
+  },
+};

x-pack/legacy/plugins/lens/public/editor_frame_service/service.tsx

@@ -29,6 +29,7 @@ import {
 } from '../types';
 import { EditorFrame } from './editor_frame';
 import { mergeTables } from './merge_tables';
+import { formatColumn } from './format_column';
 import { EmbeddableFactory } from './embeddable/embeddable_factory';
 import { getActiveDatasourceIdFromDoc } from './editor_frame/state_management';
 
@@ -64,6 +65,7 @@ export class EditorFrameService {
 
   public setup(core: CoreSetup, plugins: EditorFrameSetupPlugins): EditorFrameSetup {
     plugins.expressions.registerFunction(() => mergeTables);
+    plugins.expressions.registerFunction(() => formatColumn);
 
     return {
       registerDatasource: datasource => {