[7.x] [Lens] Improved range formatter (#80132) (#81826)

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Wylie Conlon <wylieconlon@gmail.com>
Co-authored-by: Joe Reuter <johannes.reuter@elastic.co>

Author: 5 people

src/plugins/data/common/search/aggs/utils/get_format_with_aggs.test.ts

@@ -79,6 +79,33 @@ describe('getFormatWithAggs', () => {
     expect(getFormat).toHaveBeenCalledTimes(1);
   });
 
+  test('creates alternative format for range using the template parameter', () => {
+    const mapping = { id: 'range', params: { template: 'arrow_right' } };
+    const getFieldFormat = getFormatWithAggs(getFormat);
+    const format = getFieldFormat(mapping);
+
+    expect(format.convert({ gte: 1, lt: 20 })).toBe('1 → 20');
+    expect(getFormat).toHaveBeenCalledTimes(1);
+  });
+
+  test('handles Infinity values internally when no nestedFormatter is passed', () => {
+    const mapping = { id: 'range', params: { replaceInfinity: true } };
+    const getFieldFormat = getFormatWithAggs(getFormat);
+    const format = getFieldFormat(mapping);
+
+    expect(format.convert({ gte: -Infinity, lt: Infinity })).toBe('≥ −∞ and < +∞');
+    expect(getFormat).toHaveBeenCalledTimes(1);
+  });
+
+  test('lets Infinity values handling to nestedFormatter even when flag is on', () => {
+    const mapping = { id: 'range', params: { replaceInfinity: true, id: 'any' } };
+    const getFieldFormat = getFormatWithAggs(getFormat);
+    const format = getFieldFormat(mapping);
+
+    expect(format.convert({ gte: -Infinity, lt: Infinity })).toBe('≥ -Infinity and < Infinity');
+    expect(getFormat).toHaveBeenCalledTimes(1);
+  });
+
   test('returns custom label for range if provided', () => {
     const mapping = { id: 'range', params: {} };
     const getFieldFormat = getFormatWithAggs(getFormat);

src/plugins/data/common/search/aggs/utils/get_format_with_aggs.ts

@@ -56,15 +56,35 @@ export function getFormatWithAggs(getFieldFormat: GetFieldFormat): GetFieldForma
             id: nestedFormatter.id,
             params: nestedFormatter.params,
           });
+
           const gte = '\u2265';
           const lt = '\u003c';
+          let fromValue = format.convert(range.gte);
+          let toValue = format.convert(range.lt);
+          // In case of identity formatter and a specific flag, replace Infinity values by specific strings
+          if (params.replaceInfinity && nestedFormatter.id == null) {
+            const FROM_PLACEHOLDER = '\u2212\u221E';
+            const TO_PLACEHOLDER = '+\u221E';
+            fromValue = isFinite(range.gte) ? fromValue : FROM_PLACEHOLDER;
+            toValue = isFinite(range.lt) ? toValue : TO_PLACEHOLDER;
+          }
+
+          if (params.template === 'arrow_right') {
+            return i18n.translate('data.aggTypes.buckets.ranges.rangesFormatMessageArrowRight', {
+              defaultMessage: '{from} → {to}',
+              values: {
+                from: fromValue,
+                to: toValue,
+              },
+            });
+          }
           return i18n.translate('data.aggTypes.buckets.ranges.rangesFormatMessage', {
             defaultMessage: '{gte} {from} and {lt} {to}',
             values: {
               gte,
-              from: format.convert(range.gte),
+              from: fromValue,
               lt,
-              to: format.convert(range.lt),
+              to: toValue,
             },
           });
         });

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

@@ -23,7 +23,6 @@ import {
 } from '../types';
 import { Document } from '../persistence/saved_object_store';
 import { mergeTables } from './merge_tables';
-import { formatColumn } from './format_column';
 import { EmbeddableFactory, LensEmbeddableStartServices } from './embeddable/embeddable_factory';
 import { UiActionsStart } from '../../../../../src/plugins/ui_actions/public';
 import { DashboardStart } from '../../../../../src/plugins/dashboard/public';
@@ -86,7 +85,6 @@ export class EditorFrameService {
     getAttributeService: () => Promise<LensAttributeService>
   ): EditorFrameSetup {
     plugins.expressions.registerFunction(() => mergeTables);
-    plugins.expressions.registerFunction(() => formatColumn);
 
     const getStartServices = async (): Promise<LensEmbeddableStartServices> => {
       const [coreStart, deps] = await core.getStartServices();

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

@@ -435,7 +435,8 @@ export function DimensionEditor(props: DimensionEditorProps) {
             />
           )}
 
-          {selectedColumn && selectedColumn.dataType === 'number' ? (
+          {selectedColumn &&
+          (selectedColumn.dataType === 'number' || selectedColumn.operationType === 'range') ? (
             <FormatSelector
               selectedColumn={selectedColumn}
               onChange={(newFormat) => {

x-pack/plugins/lens/public/indexpattern_datasource/dimension_panel/dimension_editor.tsx

@@ -0,0 +1,137 @@
+/*
+ * 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,
+  Datatable,
+  DatatableColumn,
+} from 'src/plugins/expressions/public';
+
+interface FormatColumn {
+  format: string;
+  columnId: string;
+  decimals?: number;
+  parentFormat?: string;
+}
+
+export 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',
+  Datatable,
+  FormatColumn,
+  Datatable
+> = {
+  name: 'lens_format_column',
+  type: 'datatable',
+  help: '',
+  args: {
+    format: {
+      types: ['string'],
+      help: '',
+      required: true,
+    },
+    columnId: {
+      types: ['string'],
+      help: '',
+      required: true,
+    },
+    decimals: {
+      types: ['number'],
+      help: '',
+    },
+    parentFormat: {
+      types: ['string'],
+      help: '',
+    },
+  },
+  inputTypes: ['datatable'],
+  fn(input, { format, columnId, decimals, parentFormat }: FormatColumn) {
+    return {
+      ...input,
+      columns: input.columns.map((col) => {
+        if (col.id === columnId) {
+          if (!parentFormat) {
+            if (supportedFormats[format]) {
+              return withParams(col, {
+                id: format,
+                params: { pattern: supportedFormats[format].decimalsToPattern(decimals) },
+              });
+            } else if (format) {
+              return withParams(col, { id: format });
+            } else {
+              return col;
+            }
+          }
+
+          const parsedParentFormat = JSON.parse(parentFormat);
+          const parentFormatId = parsedParentFormat.id;
+          const parentFormatParams = parsedParentFormat.params ?? {};
+
+          if (!parentFormatId) {
+            return col;
+          }
+
+          if (format && supportedFormats[format]) {
+            return withParams(col, {
+              id: parentFormatId,
+              params: {
+                id: format,
+                params: {
+                  pattern: supportedFormats[format].decimalsToPattern(decimals),
+                },
+                ...parentFormatParams,
+              },
+            });
+          }
+          if (parentFormatParams) {
+            const innerParams = (col.meta.params?.params as Record<string, unknown>) ?? {};
+            return withParams(col, {
+              ...col.meta.params,
+              params: {
+                ...innerParams,
+                ...parentFormatParams,
+              },
+            });
+          }
+        }
+        return col;
+      }),
+    };
+  },
+};
+
+function withParams(col: DatatableColumn, params: Record<string, unknown>) {
+  return { ...col, meta: { ...col.meta, params } };
+}

x-pack/plugins/lens/public/indexpattern_datasource/format_column.ts

@@ -33,8 +33,11 @@ export class IndexPatternDatasource {
     { expressions, editorFrame, charts }: IndexPatternDatasourceSetupPlugins
   ) {
     editorFrame.registerDatasource(async () => {
-      const { getIndexPatternDatasource, renameColumns } = await import('../async_services');
+      const { getIndexPatternDatasource, renameColumns, formatColumn } = await import(
+        '../async_services'
+      );
       expressions.registerFunction(renameColumns);
+      expressions.registerFunction(formatColumn);
       return core.getStartServices().then(([coreStart, { data }]) =>
         getIndexPatternDatasource({
           core: coreStart,

x-pack/plugins/lens/public/indexpattern_datasource/index.ts

@@ -107,6 +107,7 @@ export function uniqueLabels(layers: Record<string, IndexPatternLayer>) {
 }
 
 export * from './rename_columns';
+export * from './format_column';
 
 export function getIndexPatternDatasource({
   core,

x-pack/plugins/lens/public/indexpattern_datasource/indexpattern.tsx

@@ -117,6 +117,7 @@ const indexPattern2 = ({
   title: 'my-fake-restricted-pattern',
   timeFieldName: 'timestamp',
   hasRestrictions: true,
+  fieldFormatMap: { bytes: { id: 'bytes', params: { pattern: '0.0' } } },
   fields: [
     {
       name: 'timestamp',

x-pack/plugins/lens/public/indexpattern_datasource/loader.test.ts

@@ -103,7 +103,14 @@ export async function loadIndexPatterns({
         id: indexPattern.id!, // id exists for sure because we got index patterns by id
         title,
         timeFieldName,
-        fieldFormatMap,
+        fieldFormatMap:
+          fieldFormatMap &&
+          Object.fromEntries(
+            Object.entries(fieldFormatMap).map(([id, format]) => [
+              id,
+              'toJSON' in format ? format.toJSON() : format,
+            ])
+          ),
         fields: newFields,
         hasRestrictions: !!typeMeta?.aggs,
       };