Use format hints and field formatters in metric vis

x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_expression.test.tsx

@@ -48,7 +48,8 @@ describe('metric_expression', () => {
     test('it renders the title and value', () => {
       const { data, args } = sampleArgs();
 
-      expect(shallow(<MetricChart data={data} args={args} />)).toMatchInlineSnapshot(`
+      expect(shallow(<MetricChart data={data} args={args} formatFactory={x => x} />))
+        .toMatchInlineSnapshot(`
         <div
           style={
             Object {

x-pack/legacy/plugins/lens/public/metric_visualization_plugin/metric_expression.tsx

@@ -8,6 +8,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { ExpressionFunction } from 'src/legacy/core_plugins/interpreter/types';
 import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { FormatFactory } from 'ui/visualize/loader/pipeline_helpers/utilities';
 import { MetricConfig } from './types';
 import { LensMultiTable } from '../types';
 import { RenderFunction } from './plugin';
@@ -64,22 +65,38 @@ export const metricChart: ExpressionFunction<
   MetricRender
 >;
 
-export const metricChartRenderer: RenderFunction<MetricChartProps> = {
+export const getMetricChartRenderer = (
+  formatFactory: FormatFactory
+): RenderFunction<MetricChartProps> => ({
   name: 'lens_metric_chart_renderer',
   displayName: 'Metric Chart',
   help: 'Metric Chart Renderer',
   validate: () => {},
   reuseDomNode: true,
   render: async (domNode: Element, config: MetricChartProps, _handlers: unknown) => {
-    ReactDOM.render(<MetricChart {...config} />, domNode);
+    ReactDOM.render(<MetricChart {...config} formatFactory={formatFactory} />, domNode);
   },
-};
+});
 
-export function MetricChart({ data, args }: MetricChartProps) {
+export function MetricChart({
+  data,
+  args,
+  formatFactory,
+}: MetricChartProps & { formatFactory: FormatFactory }) {
   const { title, accessor } = args;
-  const [row] = Object.values(data.tables)[0].rows;
-  // TODO: Use field formatters here...
-  const value = Number(Number(row[accessor]).toFixed(3)).toString();
+  let value = '-';
+  const firstTable = Object.values(data.tables)[0];
+
+  if (firstTable) {
+    const column = firstTable.columns[0];
+    const row = firstTable.rows[0];
+    if (row[accessor]) {
+      value =
+        column && column.formatHint
+          ? formatFactory(column.formatHint).convert(row[accessor])
+          : Number(Number(row[accessor]).toFixed(3)).toString();
+    }
+  }
 
   return (
     <div

x-pack/legacy/plugins/lens/public/metric_visualization_plugin/plugin.tsx

@@ -6,13 +6,14 @@
 
 import { Registry } from '@kbn/interpreter/target/common';
 import { CoreSetup } from 'src/core/public';
+import { FormatFactory, getFormat } from 'ui/visualize/loader/pipeline_helpers/utilities';
 import { metricVisualization } from './metric_visualization';
 import {
   renderersRegistry,
   functionsRegistry,
 } from '../../../../../../src/legacy/core_plugins/interpreter/public/registries';
 import { ExpressionFunction } from '../../../../../../src/legacy/core_plugins/interpreter/public';
-import { metricChart, metricChartRenderer } from './metric_expression';
+import { metricChart, getMetricChartRenderer } from './metric_expression';
 
 // TODO these are intermediary types because interpreter is not typed yet
 // They can get replaced by references to the real interfaces as soon as they
@@ -41,15 +42,25 @@ export interface InterpreterSetup {
 
 export interface MetricVisualizationPluginSetupPlugins {
   interpreter: InterpreterSetup;
+  // TODO this is a simulated NP plugin.
+  // Once field formatters are actually migrated, the actual shim can be used
+  fieldFormat: {
+    formatFactory: FormatFactory;
+  };
 }
 
 class MetricVisualizationPlugin {
   constructor() {}
 
-  setup(_core: CoreSetup | null, { interpreter }: MetricVisualizationPluginSetupPlugins) {
+  setup(
+    _core: CoreSetup | null,
+    { interpreter, fieldFormat }: MetricVisualizationPluginSetupPlugins
+  ) {
     interpreter.functionsRegistry.register(() => metricChart);
 
-    interpreter.renderersRegistry.register(() => metricChartRenderer as RenderFunction<unknown>);
+    interpreter.renderersRegistry.register(
+      () => getMetricChartRenderer(fieldFormat.formatFactory) as RenderFunction<unknown>
+    );
 
     return metricVisualization;
   }
@@ -65,6 +76,9 @@ export const metricVisualizationSetup = () =>
       renderersRegistry,
       functionsRegistry,
     },
+    fieldFormat: {
+      formatFactory: getFormat,
+    },
   });
 
 export const metricVisualizationStop = () => plugin.stop();