[Lens] Add bit formatter

x-pack/plugins/lens/common/expressions/format_column/format_column_fn.ts

@@ -32,7 +32,7 @@ export const formatColumnFn: FormatColumnExpressionFunction['fn'] = (
         if (!parentFormat) {
           if (supportedFormats[format]) {
             const serializedFormat: SerializedFieldFormat = {
-              id: format,
+              id: supportedFormats[format].formatId,
               params: { pattern: supportedFormats[format].decimalsToPattern(decimals) },
             };
             return withParams(col, serializedFormat as Record<string, unknown>);
@@ -64,7 +64,7 @@ export const formatColumnFn: FormatColumnExpressionFunction['fn'] = (
               id: parentFormatId,
               params: {
                 ...col.meta.params?.params,
-                id: format,
+                id: supportedFormats[format].formatId,
                 ...parentFormatParams,
                 // some wrapper formatters require params to be flatten out (i.e. terms) while others
                 // require them to be in the params property (i.e. ranges)
@@ -83,7 +83,7 @@ export const formatColumnFn: FormatColumnExpressionFunction['fn'] = (
             id: parentFormatId,
             params: {
               ...col.meta.params?.params,
-              id: format,
+              id: supportedFormats[format].formatId,
               // some wrapper formatters require params to be flatten out (i.e. terms) while others
               // require them to be in the params property (i.e. ranges)
               // so for now duplicate

x-pack/plugins/lens/common/expressions/format_column/supported_formats.ts

@@ -7,9 +7,10 @@
 
 export const supportedFormats: Record<
   string,
-  { decimalsToPattern: (decimals?: number) => string }
+  { decimalsToPattern: (decimals?: number) => string; formatId: string }
 > = {
   number: {
+    formatId: 'number',
     decimalsToPattern: (decimals = 2) => {
       if (decimals === 0) {
         return `0,0`;
@@ -18,6 +19,7 @@ export const supportedFormats: Record<
     },
   },
   percent: {
+    formatId: 'percent',
     decimalsToPattern: (decimals = 2) => {
       if (decimals === 0) {
         return `0,0%`;
@@ -26,11 +28,21 @@ export const supportedFormats: Record<
     },
   },
   bytes: {
+    formatId: 'bytes',
     decimalsToPattern: (decimals = 2) => {
       if (decimals === 0) {
         return `0,0b`;
       }
       return `0,0.${'0'.repeat(decimals)}b`;
     },
   },
+  bits: {
+    formatId: 'number',
+    decimalsToPattern: (decimals = 2) => {
+      if (decimals === 0) {
+        return `0,0bitd`;
+      }
+      return `0,0.${'0'.repeat(decimals)}bitd`;
+    },
+  },
 };

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

@@ -12,7 +12,7 @@ import { GenericIndexPatternColumn } from '../indexpattern';
 import { isColumnFormatted } from '../operations/definitions/helpers';
 import { useDebouncedValue } from '../../shared_components';
 
-const supportedFormats: Record<string, { title: string }> = {
+const supportedFormats: Record<string, { title: string; defaultDecimals?: number }> = {
   number: {
     title: i18n.translate('xpack.lens.indexPattern.numberFormatLabel', {
       defaultMessage: 'Number',
@@ -28,6 +28,12 @@ const supportedFormats: Record<string, { title: string }> = {
       defaultMessage: 'Bytes (1024)',
     }),
   },
+  bits: {
+    title: i18n.translate('xpack.lens.indexPattern.bitsFormatLabel', {
+      defaultMessage: 'Bits (1000)',
+    }),
+    defaultDecimals: 0,
+  },
 };
 
 const defaultOption = {
@@ -118,10 +124,13 @@ export function FormatSelector(props: FormatSelectorProps) {
         onChange();
         return;
       }
+      const id = choices[0].value;
+      const defaultDecimals = supportedFormats[id].defaultDecimals;
       onChange({
         id: choices[0].value,
-        params: { decimals },
+        params: { decimals: defaultDecimals ?? decimals },
       });
+      setDecimals(defaultDecimals ?? decimals);
     },
     [onChange, decimals]
   );

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.test.tsx

@@ -922,7 +922,7 @@ describe('ranges', () => {
         const updateLayerSpy = jest.fn();
         // now set a format on the range operation
         (layer.columns.col1 as RangeIndexPatternColumn).params.format = {
-          id: 'custom',
+          id: 'bytes',
           params: { decimals: 3 },
         };
 
@@ -942,7 +942,7 @@ describe('ranges', () => {
         });
 
         expect(updateLayerSpy.mock.calls[0][0].columns.col1.params.format).toEqual({
-          id: 'custom',
+          id: 'bytes',
           params: { decimals: 3 },
         });
       });

x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/ranges/ranges.tsx

@@ -195,13 +195,14 @@ export const rangeOperation: OperationDefinition<
       numberFormat &&
       supportedFormats[numberFormat.id] &&
       supportedFormats[numberFormat.id].decimalsToPattern(numberFormat.params?.decimals || 0);
+    const numberFormatId = numberFormat && supportedFormats[numberFormat.id].formatId;
 
     const rangeFormatter = fieldFormats.deserialize({
       ...(currentColumn.params.parentFormat || { id: 'range' }),
       params: {
         ...currentColumn.params.parentFormat?.params,
         ...(numberFormat
-          ? { id: numberFormat.id, params: { pattern: numberFormatterPattern } }
+          ? { id: numberFormatId, params: { pattern: numberFormatterPattern } }
           : getFieldDefaultFormat(indexPattern, currentField)),
       },
     });