[Lens] Field formatter support

src/legacy/core_plugins/interpreter/common/types/kibana_datatable.ts

@@ -24,6 +24,7 @@ const name = 'kibana_datatable';
 interface Column {
   id: string;
   name: string;
+  formatterMapping?: unknown;
 }
 
 interface Row {

src/legacy/core_plugins/interpreter/public/functions/esaggs.ts

@@ -99,7 +99,7 @@ export const esaggs = (): ExpressionFunction<typeof name, Context, Arguments, Re
     searchSource.setField('index', indexPattern);
     searchSource.setField('size', 0);
 
-    const response: Pick<KibanaDatatable, 'columns' | 'rows'> = await courierRequestHandler({
+    const response = await courierRequestHandler({
       searchSource,
       aggs,
       timeRange: get(context, 'timeRange', null),
@@ -112,13 +112,18 @@ export const esaggs = (): ExpressionFunction<typeof name, Context, Arguments, Re
       queryFilter,
     });
 
-    return {
+    const table: KibanaDatatable = {
       type: 'kibana_datatable',
       rows: response.rows,
-      columns: response.columns.map(column => ({
+      columns: response.columns.map((column: any) => ({
         id: column.id,
         name: column.name,
+        formatterMapping: column.aggConfig.params.field
+          ? column.aggConfig.params.field.format.toJSON()
+          : column.aggConfig.type.getFormat().toJSON(),
       })),
     };
+
+    return table;
   },
 });

x-pack/plugins/lens/public/indexpattern_plugin/rename_columns.ts

@@ -5,8 +5,7 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import { ExpressionFunction } from 'src/legacy/core_plugins/interpreter/types';
-import { KibanaDatatable } from '../types';
+import { ExpressionFunction, KibanaDatatable } from 'src/legacy/core_plugins/interpreter/types';
 
 interface RemapArgs {
   idMap: string;

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

@@ -128,14 +128,6 @@ export interface TableSpecColumn {
 // TableSpec is managed by visualizations
 export type TableSpec = TableSpecColumn[];
 
-// This is a temporary type definition, to be replaced with
-// the official Kibana Datatable type definition.
-export interface KibanaDatatable {
-  type: 'kibana_datatable';
-  rows: Array<Record<string, unknown>>;
-  columns: Array<{ id: string; name: string }>;
-}
-
 export interface VisualizationProps<T = unknown> {
   dragDropContext: DragContextState;
   datasource: DatasourcePublicAPI;

x-pack/plugins/lens/public/xy_visualization_plugin/xy_expression.test.tsx

@@ -4,18 +4,31 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Position } from '@elastic/charts';
+jest.mock('../../../../../src/legacy/ui/public/visualize/loader/pipeline_helpers/utilities', () => {
+  const formatterSpy = jest.fn();
+  const getFormatSpy = jest.fn(() => {
+    return { convert: formatterSpy };
+  });
+  return { getFormat: getFormatSpy };
+});
+
+import { Position, Axis } from '@elastic/charts';
 import { xyChart, XYChart } from './xy_expression';
-import { KibanaDatatable } from '../types';
 import React from 'react';
 import { shallow } from 'enzyme';
 import { XYArgs, LegendConfig, legendConfig, XConfig, xConfig, YConfig, yConfig } from './types';
+import { getFormat } from '../../../../../src/legacy/ui/public/visualize/loader/pipeline_helpers/utilities';
+import { KibanaDatatable } from 'src/legacy/core_plugins/interpreter/types';
 
 function sampleArgs() {
   const data: KibanaDatatable = {
     type: 'kibana_datatable',
-    columns: [{ id: 'a', name: 'a' }, { id: 'b', name: 'b' }, { id: 'c', name: 'c' }],
-    rows: [{ a: 1, b: 2, c: 3 }, { a: 1, b: 5, c: 4 }],
+    columns: [
+      { id: 'a', name: 'a', formatterMapping: { id: 'number', params: { pattern: '0,0.000' } } },
+      { id: 'b', name: 'b', formatterMapping: { id: 'number', params: { pattern: '000,0' } } },
+      { id: 'c', name: 'c', formatterMapping: { id: 'string' } },
+    ],
+    rows: [{ a: 1, b: 2, c: 'I' }, { a: 1, b: 5, c: 'J' }],
   };
 
   const args: XYArgs = {
@@ -100,6 +113,10 @@ describe('xy_expression', () => {
   });
 
   describe('XYChart component', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
     test('it renders line', () => {
       const { data, args } = sampleArgs();
 
@@ -123,5 +140,50 @@ describe('xy_expression', () => {
         shallow(<XYChart data={data} args={{ ...args, seriesType: 'area' }} />)
       ).toMatchSnapshot();
     });
+
+    test('it gets the formatter for the x axis', () => {
+      const { data, args } = sampleArgs();
+
+      shallow(<XYChart data={{ ...data }} args={{ ...args }} />);
+
+      expect(getFormat as jest.Mock).toHaveBeenCalledWith({ id: 'string' });
+    });
+
+    test('it gets a default formatter for y if there are multiple y accessors', () => {
+      const { data, args } = sampleArgs();
+
+      shallow(<XYChart data={{ ...data }} args={{ ...args }} />);
+
+      expect(getFormat as jest.Mock).toHaveBeenCalledTimes(2);
+      expect(getFormat as jest.Mock).toHaveBeenCalledWith({ id: 'number' });
+    });
+
+    test('it gets the formatter for the y axis if there is only one accessor', () => {
+      const { data, args } = sampleArgs();
+
+      shallow(
+        <XYChart data={{ ...data }} args={{ ...args, y: { ...args.y, accessors: ['a'] } }} />
+      );
+
+      expect(getFormat as jest.Mock).toHaveBeenCalledTimes(2);
+      expect(getFormat as jest.Mock).toHaveBeenCalledWith({
+        id: 'number',
+        params: { pattern: '0,0.000' },
+      });
+    });
+
+    test('it should pass the formatter function to the axis', () => {
+      const { data, args } = sampleArgs();
+
+      const instance = shallow(<XYChart data={{ ...data }} args={{ ...args }} />);
+
+      const tickFormatter = instance
+        .find(Axis)
+        .first()
+        .prop('tickFormat');
+      tickFormatter('I');
+
+      expect(getFormat({}).convert as jest.Mock).toHaveBeenCalledWith('I');
+    });
   });
 });

x-pack/plugins/lens/public/xy_visualization_plugin/xy_expression.tsx

@@ -16,10 +16,10 @@ import {
   AreaSeries,
   BarSeries,
 } from '@elastic/charts';
-import { ExpressionFunction } from 'src/legacy/core_plugins/interpreter/types';
+import { ExpressionFunction, KibanaDatatable } from 'src/legacy/core_plugins/interpreter/types';
 import { XYArgs } from './types';
-import { KibanaDatatable } from '../types';
 import { RenderFunction } from './plugin';
+import { getFormat } from '../../../../../src/legacy/ui/public/visualize/loader/pipeline_helpers/utilities';
 
 export interface XYChartProps {
   data: KibanaDatatable;
@@ -112,6 +112,18 @@ export function XYChart({ data, args }: XYChartProps) {
     data: data.rows,
   };
 
+  const xAxisColumn = data.columns.find(({ id }) => id === x.accessor);
+  const xAxisFormatter = getFormat(xAxisColumn ? xAxisColumn.formatterMapping : undefined);
+
+  let yAxisFormatter: ReturnType<typeof getFormat>;
+  if (y.accessors.length === 1) {
+    const firstYAxisColumn = data.columns.find(({ id }) => id === y.accessors[0]);
+    yAxisFormatter = getFormat(firstYAxisColumn ? firstYAxisColumn.formatterMapping : undefined);
+  } else {
+    // TODO if there are multiple y axes, try to merge the formatters for the axis
+    yAxisFormatter = getFormat({ id: 'number' });
+  }
+
   return (
     <Chart className="lnsChart">
       <Settings showLegend={legend.isVisible} legendPosition={legend.position} />
@@ -121,13 +133,15 @@ export function XYChart({ data, args }: XYChartProps) {
         position={x.position}
         title={x.title}
         showGridLines={x.showGridlines}
+        tickFormat={d => xAxisFormatter.convert(d)}
       />
 
       <Axis
         id={getAxisId('y')}
         position={y.position}
         title={y.title}
         showGridLines={y.showGridlines}
+        tickFormat={d => yAxisFormatter.convert(d)}
       />
 
       {seriesType === 'line' ? (