Shim getFormat function correctly (#60032)

src/legacy/core_plugins/kibana/public/discover/kibana_services.ts

@@ -75,6 +75,5 @@ export {
   EsQuerySortValue,
   SortDirection,
 } from '../../../../../plugins/data/public';
-export { getFormat } from 'ui/visualize/loader/pipeline_helpers/utilities';
 // @ts-ignore
 export { buildPointSeriesData } from 'ui/agg_response/point_series/point_series';

src/legacy/core_plugins/kibana/public/discover/np_ready/angular/response_handler.js

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { buildPointSeriesData, getFormat } from '../../kibana_services';
+import { buildPointSeriesData, getServices } from '../../kibana_services';
 
 function tableResponseHandler(table, dimensions) {
   const converted = { tables: [] };
@@ -26,7 +26,7 @@ function tableResponseHandler(table, dimensions) {
   if (split) {
     converted.direction = dimensions.splitRow ? 'row' : 'column';
     const splitColumnIndex = split[0].accessor;
-    const splitColumnFormatter = getFormat(split[0].format);
+    const splitColumnFormatter = getServices().data.fieldFormats.deserialize(split[0].format);
     const splitColumn = table.columns[splitColumnIndex];
     const splitMap = {};
     let splitIndex = 0;

src/legacy/core_plugins/vis_type_metric/public/components/__snapshots__/metric_vis_component.test.tsx.snap

@@ -1,26 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`MetricVisComponent should render correct structure for single metric 1`] = `
-<div
-  className="mtrVis"
->
-  <MetricVisValue
-    key="0"
-    metric={
-      Object {
-        "bgColor": undefined,
-        "color": undefined,
-        "label": "Count",
-        "lightText": false,
-        "rowIndex": 0,
-        "value": "<span ng-non-bindable>4301021</span>",
-      }
-    }
-    showLabel={true}
-  />
-</div>
-`;
-
 exports[`MetricVisComponent should render correct structure for multi-value metrics 1`] = `
 <div
   className="mtrVis"
@@ -34,7 +13,7 @@ exports[`MetricVisComponent should render correct structure for multi-value metr
         "label": "1st percentile of bytes",
         "lightText": false,
         "rowIndex": 0,
-        "value": "<span ng-non-bindable>182</span>",
+        "value": 182,
       }
     }
     showLabel={true}
@@ -48,7 +27,28 @@ exports[`MetricVisComponent should render correct structure for multi-value metr
         "label": "99th percentile of bytes",
         "lightText": false,
         "rowIndex": 0,
-        "value": "<span ng-non-bindable>445842.4634666484</span>",
+        "value": 445842.4634666484,
+      }
+    }
+    showLabel={true}
+  />
+</div>
+`;
+
+exports[`MetricVisComponent should render correct structure for single metric 1`] = `
+<div
+  className="mtrVis"
+>
+  <MetricVisValue
+    key="0"
+    metric={
+      Object {
+        "bgColor": undefined,
+        "color": undefined,
+        "label": "Count",
+        "lightText": false,
+        "rowIndex": 0,
+        "value": 4301021,
       }
     }
     showLabel={true}

src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_component.test.tsx

@@ -21,13 +21,17 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import { MetricVisComponent, MetricVisComponentProps } from './metric_vis_component';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { npStart } from 'ui/new_platform';
-import { fieldFormats } from '../../../../../plugins/data/public';
-import { identity } from 'lodash';
 import { ExprVis } from '../../../visualizations/public/np_ready/public/expressions/vis';
 
-jest.mock('ui/new_platform');
+jest.mock('../services', () => ({
+  getFormatService: () => ({
+    deserialize: () => {
+      return {
+        convert: (x: unknown) => x,
+      };
+    },
+  }),
+}));
 
 type Props = MetricVisComponentProps;
 
@@ -66,12 +70,6 @@ describe('MetricVisComponent', function() {
     return shallow(<MetricVisComponent {...props} />);
   };
 
-  beforeAll(() => {
-    (npStart.plugins.data.fieldFormats.deserialize as jest.Mock).mockImplementation(() => {
-      return new (fieldFormats.FieldFormat.from(identity))();
-    });
-  });
-
   it('should render component', () => {
     expect(getComponent().exists()).toBe(true);
   });

src/legacy/core_plugins/vis_type_metric/public/components/metric_vis_component.tsx

@@ -20,13 +20,13 @@
 import { last, findIndex, isNaN } from 'lodash';
 import React, { Component } from 'react';
 import { isColorDark } from '@elastic/eui';
-import { getFormat } from '../legacy_imports';
 import { MetricVisValue } from './metric_vis_value';
 import { Input } from '../metric_vis_fn';
 import { FieldFormatsContentType, IFieldFormat } from '../../../../../plugins/data/public';
 import { KibanaDatatable } from '../../../../../plugins/expressions/public';
 import { getHeatmapColors } from '../../../../../plugins/charts/public';
 import { VisParams, MetricVisMetric } from '../types';
+import { getFormatService } from '../services';
 import { SchemaConfig } from '../../../visualizations/public';
 import { ExprVis } from '../../../visualizations/public/np_ready/public/expressions/vis';
 
@@ -122,13 +122,13 @@ export class MetricVisComponent extends Component<MetricVisComponentProps> {
 
     if (dimensions.bucket) {
       bucketColumnId = table.columns[dimensions.bucket.accessor].id;
-      bucketFormatter = getFormat(dimensions.bucket.format);
+      bucketFormatter = getFormatService().deserialize(dimensions.bucket.format);
     }
 
     dimensions.metrics.forEach((metric: SchemaConfig) => {
       const columnIndex = metric.accessor;
       const column = table?.columns[columnIndex];
-      const formatter = getFormat(metric.format);
+      const formatter = getFormatService().deserialize(metric.format);
       table.rows.forEach((row, rowIndex) => {
         let title = column.name;
         let value: any = row[column.id];

src/legacy/core_plugins/vis_type_metric/public/legacy.ts

@@ -33,4 +33,4 @@ const plugins: Readonly<MetricVisPluginSetupDependencies> = {
 const pluginInstance = plugin({} as PluginInitializerContext);
 
 export const setup = pluginInstance.setup(npSetup.core, plugins);
-export const start = pluginInstance.start(npStart.core);
+export const start = pluginInstance.start(npStart.core, { data: npStart.plugins.data });

src/legacy/core_plugins/vis_type_metric/public/metric_vis_type.test.ts

@@ -20,14 +20,11 @@
 import $ from 'jquery';
 
 // TODO This is an integration test and thus requires a running platform. When moving to the new platform,
-// this test has to be migrated to the newly created integration test environment.
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { npStart } from 'ui/new_platform';
+// this test has to be migrated to a real unit test.
 // @ts-ignore
 import getStubIndexPattern from 'fixtures/stubbed_logstash_index_pattern';
 
 import { Vis } from '../../visualizations/public';
-import { fieldFormats } from '../../../../plugins/data/public';
 import {
   setup as visualizationsSetup,
   start as visualizationsStart,
@@ -36,6 +33,16 @@ import { createMetricVisTypeDefinition } from './metric_vis_type';
 
 jest.mock('ui/new_platform');
 
+jest.mock('./services', () => ({
+  getFormatService: () => ({
+    deserialize: () => {
+      return {
+        convert: (x: unknown) => `<a href="http://ip.info?address={{${x}}">ip[${x}]</a>`,
+      };
+    },
+  }),
+}));
+
 jest.mock('../../vis_default_editor/public', () => ({
   Schemas: class {},
 }));
@@ -45,12 +52,6 @@ describe('metric_vis - createMetricVisTypeDefinition', () => {
 
   beforeAll(() => {
     visualizationsSetup.createReactVisualization(createMetricVisTypeDefinition());
-    (npStart.plugins.data.fieldFormats.getType as jest.Mock).mockImplementation(() => {
-      return fieldFormats.UrlFormat;
-    });
-    (npStart.plugins.data.fieldFormats.deserialize as jest.Mock).mockImplementation(mapping => {
-      return new fieldFormats.UrlFormat(mapping ? mapping.params : {});
-    });
   });
 
   const setup = () => {

src/legacy/core_plugins/vis_type_metric/public/plugin.ts

@@ -24,6 +24,8 @@ import { VisualizationsSetup } from '../../visualizations/public';
 import { createMetricVisFn } from './metric_vis_fn';
 import { createMetricVisTypeDefinition } from './metric_vis_type';
 import { ChartsPluginSetup } from '../../../../plugins/charts/public';
+import { DataPublicPluginStart } from '../../../../plugins/data/public';
+import { setFormatService } from './services';
 
 /** @internal */
 export interface MetricVisPluginSetupDependencies {
@@ -32,6 +34,11 @@ export interface MetricVisPluginSetupDependencies {
   charts: ChartsPluginSetup;
 }
 
+/** @internal */
+export interface MetricVisPluginStartDependencies {
+  data: DataPublicPluginStart;
+}
+
 /** @internal */
 export class MetricVisPlugin implements Plugin<void, void> {
   initializerContext: PluginInitializerContext;
@@ -48,7 +55,7 @@ export class MetricVisPlugin implements Plugin<void, void> {
     visualizations.createReactVisualization(createMetricVisTypeDefinition());
   }
 
-  public start(core: CoreStart) {
-    // nothing to do here yet
+  public start(core: CoreStart, { data }: MetricVisPluginStartDependencies) {
+    setFormatService(data.fieldFormats);
   }
 }

src/legacy/core_plugins/vis_type_metric/public/services.ts

@@ -0,0 +1,25 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { createGetterSetter } from '../../../../plugins/kibana_utils/common';
+import { DataPublicPluginStart } from '../../../../plugins/data/public';
+
+export const [getFormatService, setFormatService] = createGetterSetter<
+  DataPublicPluginStart['fieldFormats']
+>('metric data.fieldFormats');

src/legacy/core_plugins/vis_type_table/public/agg_table/agg_table.js

@@ -18,7 +18,7 @@
  */
 import _ from 'lodash';
 import aggTableTemplate from './agg_table.html';
-import { getFormat } from '../legacy_imports';
+import { getFormatService } from '../services';
 import { i18n } from '@kbn/i18n';
 
 export function KbnAggTable(config, RecursionHelper) {
@@ -127,7 +127,7 @@ export function KbnAggTable(config, RecursionHelper) {
 
               if (!dimension) return;
 
-              const formatter = getFormat(dimension.format);
+              const formatter = getFormatService().deserialize(dimension.format);
 
               const formattedColumn = {
                 id: col.id,
@@ -247,7 +247,7 @@ export function KbnAggTable(config, RecursionHelper) {
 function addPercentageCol(columns, title, rows, insertAtIndex) {
   const { id, sumTotal } = columns[insertAtIndex];
   const newId = `${id}-percents`;
-  const formatter = getFormat({ id: 'percent' });
+  const formatter = getFormatService().deserialize({ id: 'percent' });
   const i18nTitle = i18n.translate('visTypeTable.params.percentageTableColumnName', {
     defaultMessage: '{title} percentages',
     values: { title },

src/legacy/core_plugins/vis_type_table/public/legacy.ts

@@ -32,4 +32,4 @@ const plugins: Readonly<TablePluginSetupDependencies> = {
 const pluginInstance = plugin({} as PluginInitializerContext);
 
 export const setup = pluginInstance.setup(npSetup.core, plugins);
-export const start = pluginInstance.start(npStart.core);
+export const start = pluginInstance.start(npStart.core, { data: npStart.plugins.data });

src/legacy/core_plugins/vis_type_table/public/legacy_imports.ts

@@ -18,4 +18,3 @@
  */
 
 export { npSetup, npStart } from 'ui/new_platform';
-export { getFormat } from 'ui/visualize/loader/pipeline_helpers/utilities';

src/legacy/core_plugins/vis_type_table/public/plugin.ts

@@ -23,6 +23,8 @@ import { PluginInitializerContext, CoreSetup, CoreStart, Plugin } from '../../..
 
 import { createTableVisFn } from './table_vis_fn';
 import { tableVisTypeDefinition } from './table_vis_type';
+import { DataPublicPluginStart } from '../../../../plugins/data/public';
+import { setFormatService } from './services';
 
 /** @internal */
 export interface TablePluginSetupDependencies {
@@ -30,6 +32,11 @@ export interface TablePluginSetupDependencies {
   visualizations: VisualizationsSetup;
 }
 
+/** @internal */
+export interface TablePluginStartDependencies {
+  data: DataPublicPluginStart;
+}
+
 /** @internal */
 export class TableVisPlugin implements Plugin<Promise<void>, void> {
   initializerContext: PluginInitializerContext;
@@ -47,7 +54,7 @@ export class TableVisPlugin implements Plugin<Promise<void>, void> {
     visualizations.createBaseVisualization(tableVisTypeDefinition);
   }
 
-  public start(core: CoreStart) {
-    // nothing to do here yet
+  public start(core: CoreStart, { data }: TablePluginStartDependencies) {
+    setFormatService(data.fieldFormats);
   }
 }

src/legacy/core_plugins/vis_type_table/public/services.ts

@@ -17,4 +17,9 @@
  * under the License.
  */
 
-export { getFormat } from 'ui/visualize/loader/pipeline_helpers/utilities';
+import { createGetterSetter } from '../../../../plugins/kibana_utils/common';
+import { DataPublicPluginStart } from '../../../../plugins/data/public';
+
+export const [getFormatService, setFormatService] = createGetterSetter<
+  DataPublicPluginStart['fieldFormats']
+>('table data.fieldFormats');

src/legacy/core_plugins/vis_type_table/public/table_vis_response_handler.ts

@@ -19,7 +19,7 @@
 
 import { Required } from '@kbn/utility-types';
 
-import { getFormat } from './legacy_imports';
+import { getFormatService } from './services';
 import { Input } from './table_vis_fn';
 
 export interface TableContext {
@@ -54,7 +54,7 @@ export function tableVisResponseHandler(table: Input, dimensions: any): TableCon
   if (split) {
     converted.direction = dimensions.splitRow ? 'row' : 'column';
     const splitColumnIndex = split[0].accessor;
-    const splitColumnFormatter = getFormat(split[0].format);
+    const splitColumnFormatter = getFormatService().deserialize(split[0].format);
     const splitColumn = table.columns[splitColumnIndex];
     const splitMap = {};
     let splitIndex = 0;

src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud_visualization.js

@@ -23,7 +23,7 @@ import { take } from 'rxjs/operators';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { I18nProvider } from '@kbn/i18n/react';
 
-import { getFormat } from '../legacy_imports';
+import { getFormatService } from '../services';
 
 import { Label } from './label';
 import { TagCloud } from './tag_cloud';
@@ -118,7 +118,7 @@ export function createTagCloudVisualization({ colors }) {
 
       const bucket = this._visParams.bucket;
       const metric = this._visParams.metric;
-      const bucketFormatter = bucket ? getFormat(bucket.format) : null;
+      const bucketFormatter = bucket ? getFormatService().deserialize(bucket.format) : null;
       const tagColumn = bucket ? data.columns[bucket.accessor].id : -1;
       const metricColumn = data.columns[metric.accessor].id;
       const tags = data.rows.map((row, rowIndex) => {

src/legacy/core_plugins/vis_type_tagcloud/public/legacy.ts

@@ -33,4 +33,4 @@ const plugins: Readonly<TagCloudPluginSetupDependencies> = {
 const pluginInstance = plugin({} as PluginInitializerContext);
 
 export const setup = pluginInstance.setup(npSetup.core, plugins);
-export const start = pluginInstance.start(npStart.core);
+export const start = pluginInstance.start(npStart.core, { data: npStart.plugins.data });

src/legacy/core_plugins/vis_type_tagcloud/public/plugin.ts

@@ -24,6 +24,8 @@ import { ChartsPluginSetup } from '../../../../plugins/charts/public';
 
 import { createTagCloudFn } from './tag_cloud_fn';
 import { createTagCloudVisTypeDefinition } from './tag_cloud_type';
+import { DataPublicPluginStart } from '../../../../plugins/data/public';
+import { setFormatService } from './services';
 
 /** @internal */
 export interface TagCloudPluginSetupDependencies {
@@ -37,6 +39,11 @@ export interface TagCloudVisDependencies {
   colors: ChartsPluginSetup['colors'];
 }
 
+/** @internal */
+export interface TagCloudVisPluginStartDependencies {
+  data: DataPublicPluginStart;
+}
+
 /** @internal */
 export class TagCloudPlugin implements Plugin<void, void> {
   initializerContext: PluginInitializerContext;
@@ -58,7 +65,7 @@ export class TagCloudPlugin implements Plugin<void, void> {
     );
   }
 
-  public start(core: CoreStart) {
-    // nothing to do here yet
+  public start(core: CoreStart, { data }: TagCloudVisPluginStartDependencies) {
+    setFormatService(data.fieldFormats);
   }
 }

src/legacy/core_plugins/vis_type_tagcloud/public/services.ts

@@ -17,4 +17,9 @@
  * under the License.
  */
 
-export { getFormat } from 'ui/visualize/loader/pipeline_helpers/utilities';
+import { createGetterSetter } from '../../../../plugins/kibana_utils/common';
+import { DataPublicPluginStart } from '../../../../plugins/data/public';
+
+export const [getFormatService, setFormatService] = createGetterSetter<
+  DataPublicPluginStart['fieldFormats']
+>('data.fieldFormats');

src/legacy/core_plugins/vis_type_vislib/public/legacy.ts

@@ -39,6 +39,7 @@ const setupPlugins: Readonly<VisTypeVislibPluginSetupDependencies> = {
 const startPlugins: Readonly<VisTypeVislibPluginStartDependencies> = {
   expressions: npStart.plugins.expressions,
   visualizations: visualizationsStart,
+  data: npStart.plugins.data,
 };
 
 const pluginInstance = plugin({} as PluginInitializerContext);

src/legacy/core_plugins/vis_type_vislib/public/legacy_imports.ts

@@ -19,7 +19,6 @@
 
 import { npStart } from 'ui/new_platform';
 export const { createFiltersFromEvent } = npStart.plugins.data.actions;
-export { getFormat } from 'ui/visualize/loader/pipeline_helpers/utilities';
 import { search } from '../../../../plugins/data/public';
 export const { tabifyAggResponse, tabifyGetColumns } = search;
 // @ts-ignore

src/legacy/core_plugins/vis_type_vislib/public/plugin.ts

@@ -40,6 +40,8 @@ import {
 } from './vis_type_vislib_vis_types';
 import { ChartsPluginSetup } from '../../../../plugins/charts/public';
 import { ConfigSchema as VisTypeXyConfigSchema } from '../../vis_type_xy';
+import { DataPublicPluginStart } from '../../../../plugins/data/public';
+import { setFormatService } from './services';
 
 export interface VisTypeVislibDependencies {
   uiSettings: IUiSettingsClient;
@@ -57,6 +59,7 @@ export interface VisTypeVislibPluginSetupDependencies {
 export interface VisTypeVislibPluginStartDependencies {
   expressions: ReturnType<ExpressionsPublicPlugin['start']>;
   visualizations: VisualizationsStart;
+  data: DataPublicPluginStart;
 }
 
 type VisTypeVislibCoreSetup = CoreSetup<VisTypeVislibPluginStartDependencies>;
@@ -109,6 +112,6 @@ export class VisTypeVislibPlugin implements Plugin<Promise<void>, void> {
   }
 
   public start(core: CoreStart, deps: VisTypeVislibPluginStartDependencies) {
-    // nothing to do here
+    setFormatService(deps.data.fieldFormats);
   }
 }

src/legacy/core_plugins/vis_type_vislib/public/services.ts

@@ -0,0 +1,25 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { createGetterSetter } from '../../../../plugins/kibana_utils/common';
+import { DataPublicPluginStart } from '../../../../plugins/data/public';
+
+export const [getFormatService, setFormatService] = createGetterSetter<
+  DataPublicPluginStart['fieldFormats']
+>('vislib data.fieldFormats');

src/legacy/core_plugins/vis_type_vislib/public/vislib/lib/data.js

@@ -23,7 +23,7 @@ import _ from 'lodash';
 import { injectZeros } from '../components/zero_injection/inject_zeros';
 import { orderXValues } from '../components/zero_injection/ordered_x_keys';
 import { labels } from '../components/labels/labels';
-import { getFormat } from '../../legacy_imports';
+import { getFormatService } from '../../services';
 
 /**
  * Provides an API for pulling values off the data
@@ -56,8 +56,8 @@ export class Data {
           newData[key] = data[key];
         } else {
           newData[key] = data[key].map(seri => {
-            const converter = getFormat(seri.format);
-            const zConverter = getFormat(seri.zFormat);
+            const converter = getFormatService().deserialize(seri.format);
+            const zConverter = getFormatService().deserialize(seri.zFormat);
             return {
               id: seri.id,
               rawId: seri.rawId,
@@ -76,9 +76,9 @@ export class Data {
         }
       });
 
-      const xConverter = getFormat(newData.xAxisFormat);
-      const yConverter = getFormat(newData.yAxisFormat);
-      const zConverter = getFormat(newData.zAxisFormat);
+      const xConverter = getFormatService().deserialize(newData.xAxisFormat);
+      const yConverter = getFormatService().deserialize(newData.yAxisFormat);
+      const zConverter = getFormatService().deserialize(newData.zAxisFormat);
       newData.xAxisFormatter = val => xConverter.convert(val);
       newData.yAxisFormatter = val => yConverter.convert(val);
       newData.zAxisFormatter = val => zConverter.convert(val);

src/legacy/core_plugins/vis_type_vislib/public/vislib/response_handler.js

@@ -17,7 +17,8 @@
  * under the License.
  */
 
-import { buildHierarchicalData, buildPointSeriesData, getFormat } from '../legacy_imports';
+import { buildHierarchicalData, buildPointSeriesData } from '../legacy_imports';
+import { getFormatService } from '../services';
 
 function tableResponseHandler(table, dimensions) {
   const converted = { tables: [] };
@@ -26,7 +27,7 @@ function tableResponseHandler(table, dimensions) {
   if (split) {
     converted.direction = dimensions.splitRow ? 'row' : 'column';
     const splitColumnIndex = split[0].accessor;
-    const splitColumnFormatter = getFormat(split[0].format);
+    const splitColumnFormatter = getFormatService().deserialize(split[0].format);
     const splitColumn = table.columns[splitColumnIndex];
     const splitMap = {};
     let splitIndex = 0;

src/legacy/core_plugins/vis_type_vislib/public/vislib/visualizations/_chart.js

@@ -22,7 +22,7 @@ import _ from 'lodash';
 
 import { dataLabel } from '../lib/_data_label';
 import { Dispatch } from '../lib/dispatch';
-import { getFormat } from '../../legacy_imports';
+import { getFormatService } from '../../services';
 import {
   Tooltip,
   hierarchicalTooltipFormatter,
@@ -47,7 +47,9 @@ export class Chart {
 
     const events = (this.events = new Dispatch(handler, deps.uiSettings));
 
-    const fieldFormatter = getFormat(this.handler.data.get('tooltipFormatter'));
+    const fieldFormatter = getFormatService().deserialize(
+      this.handler.data.get('tooltipFormatter')
+    );
     const tooltipFormatterProvider =
       this.handler.visConfig.get('type') === 'pie'
         ? hierarchicalTooltipFormatter

src/legacy/ui/public/agg_response/hierarchical/build_hierarchical_data.test.js

@@ -18,7 +18,58 @@
  */
 
 import { buildHierarchicalData } from './build_hierarchical_data';
-import { tableVisResponseHandler } from '../../../../core_plugins/vis_type_table/public/table_vis_response_handler';
+
+function tableVisResponseHandler(table, dimensions) {
+  const converted = {
+    tables: [],
+  };
+
+  const split = dimensions.splitColumn || dimensions.splitRow;
+
+  if (split) {
+    converted.direction = dimensions.splitRow ? 'row' : 'column';
+    const splitColumnIndex = split[0].accessor;
+    const splitColumn = table.columns[splitColumnIndex];
+    const splitMap = {};
+    let splitIndex = 0;
+
+    table.rows.forEach((row, rowIndex) => {
+      const splitValue = row[splitColumn.id];
+
+      if (!splitMap.hasOwnProperty(splitValue)) {
+        splitMap[splitValue] = splitIndex++;
+        const tableGroup = {
+          $parent: converted,
+          title: `splitValue: ${splitColumn.name}`,
+          name: splitColumn.name,
+          key: splitValue,
+          column: splitColumnIndex,
+          row: rowIndex,
+          table,
+          tables: [],
+        };
+
+        tableGroup.tables.push({
+          $parent: tableGroup,
+          columns: table.columns,
+          rows: [],
+        });
+
+        converted.tables.push(tableGroup);
+      }
+
+      const tableIndex = splitMap[splitValue];
+      converted.tables[tableIndex].tables[0].rows.push(row);
+    });
+  } else {
+    converted.tables.push({
+      columns: table.columns,
+      rows: table.rows,
+    });
+  }
+
+  return converted;
+}
 
 jest.mock('ui/new_platform');
 jest.mock('ui/chrome', () => ({

x-pack/legacy/plugins/lens/public/datatable_visualization/expression.tsx

@@ -8,13 +8,12 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { i18n } from '@kbn/i18n';
 import { EuiBasicTable } from '@elastic/eui';
-import { LensMultiTable } from '../types';
+import { FormatFactory, LensMultiTable } from '../types';
 import {
   ExpressionFunctionDefinition,
   ExpressionRenderDefinition,
   IInterpreterRenderHandlers,
 } from '../../../../../../src/plugins/expressions/public';
-import { FormatFactory } from '../../../../../../src/legacy/ui/public/visualize/loader/pipeline_helpers/utilities';
 import { VisualizationContainer } from '../visualization_container';
 
 export interface DatatableColumns {
@@ -102,7 +101,7 @@ export const datatableColumns: ExpressionFunctionDefinition<
 };
 
 export const getDatatableRenderer = (
-  formatFactory: FormatFactory
+  formatFactory: Promise<FormatFactory>
 ): ExpressionRenderDefinition<DatatableProps> => ({
   name: 'lens_datatable_renderer',
   displayName: i18n.translate('xpack.lens.datatable.visualizationName', {
@@ -116,8 +115,9 @@ export const getDatatableRenderer = (
     config: DatatableProps,
     handlers: IInterpreterRenderHandlers
   ) => {
+    const resolvedFormatFactory = await formatFactory;
     ReactDOM.render(
-      <DatatableComponent {...config} formatFactory={formatFactory} />,
+      <DatatableComponent {...config} formatFactory={resolvedFormatFactory} />,
       domNode,
       () => {
         handlers.done();

x-pack/legacy/plugins/lens/public/datatable_visualization/index.ts

@@ -8,12 +8,11 @@ import { CoreSetup } from 'src/core/public';
 import { datatableVisualization } from './visualization';
 import { ExpressionsSetup } from '../../../../../../src/plugins/expressions/public';
 import { datatable, datatableColumns, getDatatableRenderer } from './expression';
-import { FormatFactory } from '../legacy_imports';
-import { EditorFrameSetup } from '../types';
+import { EditorFrameSetup, FormatFactory } from '../types';
 
 export interface DatatableVisualizationPluginSetupPlugins {
   expressions: ExpressionsSetup;
-  formatFactory: FormatFactory;
+  formatFactory: Promise<FormatFactory>;
   editorFrame: EditorFrameSetup;
 }
 

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

@@ -5,7 +5,7 @@
  */
 
 import { npSetup, npStart } from 'ui/new_platform';
-import { getFormat, visualizations } from './legacy_imports';
+import { visualizations } from './legacy_imports';
 
 export * from './types';
 
@@ -14,6 +14,6 @@ import { plugin } from './index';
 const pluginInstance = plugin();
 pluginInstance.setup(npSetup.core, {
   ...npSetup.plugins,
-  __LEGACY: { formatFactory: getFormat, visualizations },
+  __LEGACY: { visualizations },
 });
 pluginInstance.start(npStart.core, npStart.plugins);

x-pack/legacy/plugins/lens/public/legacy_imports.ts

@@ -4,6 +4,5 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export { getFormat, FormatFactory } from 'ui/visualize/loader/pipeline_helpers/utilities';
 export { setup as visualizations } from '../../../../../src/legacy/core_plugins/visualizations/public/np_ready/public/legacy';
 export { VisualizationsSetup } from '../../../../../src/legacy/core_plugins/visualizations/public';

x-pack/legacy/plugins/lens/public/metric_visualization/index.ts

@@ -5,15 +5,14 @@
  */
 
 import { CoreSetup } from 'src/core/public';
-import { FormatFactory } from '../legacy_imports';
 import { metricVisualization } from './metric_visualization';
 import { ExpressionsSetup } from '../../../../../../src/plugins/expressions/public';
 import { metricChart, getMetricChartRenderer } from './metric_expression';
-import { EditorFrameSetup } from '../types';
+import { EditorFrameSetup, FormatFactory } from '../types';
 
 export interface MetricVisualizationPluginSetupPlugins {
   expressions: ExpressionsSetup;
-  formatFactory: FormatFactory;
+  formatFactory: Promise<FormatFactory>;
   editorFrame: EditorFrameSetup;
 }
 

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

@@ -6,14 +6,13 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { FormatFactory } from 'ui/visualize/loader/pipeline_helpers/utilities';
 import {
   ExpressionFunctionDefinition,
   ExpressionRenderDefinition,
   IInterpreterRenderHandlers,
 } from '../../../../../../src/plugins/expressions/public';
 import { MetricConfig } from './types';
-import { LensMultiTable } from '../types';
+import { FormatFactory, LensMultiTable } from '../types';
 import { AutoScale } from './auto_scale';
 import { VisualizationContainer } from '../visualization_container';
 
@@ -68,17 +67,26 @@ export const metricChart: ExpressionFunctionDefinition<
 };
 
 export const getMetricChartRenderer = (
-  formatFactory: FormatFactory
+  formatFactory: Promise<FormatFactory>
 ): ExpressionRenderDefinition<MetricChartProps> => ({
   name: 'lens_metric_chart_renderer',
   displayName: 'Metric chart',
   help: 'Metric chart renderer',
   validate: () => undefined,
   reuseDomNode: true,
-  render: (domNode: Element, config: MetricChartProps, handlers: IInterpreterRenderHandlers) => {
-    ReactDOM.render(<MetricChart {...config} formatFactory={formatFactory} />, domNode, () => {
-      handlers.done();
-    });
+  render: async (
+    domNode: Element,
+    config: MetricChartProps,
+    handlers: IInterpreterRenderHandlers
+  ) => {
+    const resolvedFormatFactory = await formatFactory;
+    ReactDOM.render(
+      <MetricChart {...config} formatFactory={resolvedFormatFactory} />,
+      domNode,
+      () => {
+        handlers.done();
+      }
+    );
     handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode));
   },
 });

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

@@ -37,7 +37,6 @@ import {
   getUrlVars,
   getLensUrlFromDashboardAbsoluteUrl,
 } from '../../../../../src/legacy/core_plugins/kibana/public/dashboard/np_ready/url_helper';
-import { FormatFactory } from './legacy_imports';
 import { EmbeddableSetup, EmbeddableStart } from '../../../../../src/plugins/embeddable/public';
 import { EditorFrameStart } from './types';
 import { getLensAliasConfig } from './vis_type_alias';
@@ -48,7 +47,6 @@ export interface LensPluginSetupDependencies {
   data: DataPublicPluginSetup;
   embeddable: EmbeddableSetup;
   __LEGACY: {
-    formatFactory: FormatFactory;
     visualizations: VisualizationsSetup;
   };
 }
@@ -86,7 +84,7 @@ export class LensPlugin {
       expressions,
       data,
       embeddable,
-      __LEGACY: { formatFactory, visualizations },
+      __LEGACY: { visualizations },
     }: LensPluginSetupDependencies
   ) {
     const editorFrameSetupInterface = this.editorFrameService.setup(core, {
@@ -98,7 +96,9 @@ export class LensPlugin {
       expressions,
       data,
       editorFrame: editorFrameSetupInterface,
-      formatFactory,
+      formatFactory: core
+        .getStartServices()
+        .then(([_, { data: dataStart }]) => dataStart.fieldFormats.deserialize),
     };
     this.indexpatternDatasource.setup(core, dependencies);
     this.xyVisualization.setup(core, dependencies);

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

@@ -7,14 +7,19 @@
 import { Ast } from '@kbn/interpreter/common';
 import { IconType } from '@elastic/eui/src/components/icon/icon';
 import { CoreSetup } from 'src/core/public';
-import { KibanaDatatable } from '../../../../../src/plugins/expressions/public';
+import {
+  KibanaDatatable,
+  SerializedFieldFormat,
+} from '../../../../../src/plugins/expressions/public';
 import { DragContextState } from './drag_drop';
 import { Document } from './persistence';
 import { DateRange } from '../../../../plugins/lens/common';
-import { Query, Filter, SavedQuery } from '../../../../../src/plugins/data/public';
+import { Query, Filter, SavedQuery, IFieldFormat } from '../../../../../src/plugins/data/public';
 
 export type ErrorCallback = (e: { message: string }) => void;
 
+export type FormatFactory = (mapping?: SerializedFieldFormat) => IFieldFormat;
+
 export interface PublicAPIProps<T> {
   state: T;
   layerId: string;

x-pack/legacy/plugins/lens/public/xy_visualization/index.ts

@@ -7,18 +7,17 @@
 import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
 import { CoreSetup, IUiSettingsClient, CoreStart } from 'src/core/public';
 import moment from 'moment-timezone';
-import { FormatFactory } from '../legacy_imports';
 import { ExpressionsSetup } from '../../../../../../src/plugins/expressions/public';
 import { xyVisualization } from './xy_visualization';
 import { xyChart, getXyChartRenderer } from './xy_expression';
 import { legendConfig, xConfig, layerConfig } from './types';
-import { EditorFrameSetup } from '../types';
+import { EditorFrameSetup, FormatFactory } from '../types';
 import { UiActionsStart } from '../../../../../../src/plugins/ui_actions/public';
 import { setExecuteTriggerActions } from './services';
 
 export interface XyVisualizationPluginSetupPlugins {
   expressions: ExpressionsSetup;
-  formatFactory: FormatFactory;
+  formatFactory: Promise<FormatFactory>;
   editorFrame: EditorFrameSetup;
 }
 

x-pack/legacy/plugins/lens/public/xy_visualization/xy_expression.tsx

@@ -30,8 +30,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { EmbeddableVisTriggerContext } from '../../../../../../src/plugins/embeddable/public';
 import { VIS_EVENT_TO_TRIGGER } from '../../../../../../src/legacy/core_plugins/visualizations/public/np_ready/public/embeddable/events';
-import { FormatFactory } from '../../../../../../src/legacy/ui/public/visualize/loader/pipeline_helpers/utilities';
-import { LensMultiTable } from '../types';
+import { LensMultiTable, FormatFactory } from '../types';
 import { XYArgs, SeriesType, visualizationTypes } from './types';
 import { VisualizationContainer } from '../visualization_container';
 import { isHorizontalChart } from './state_helpers';
@@ -108,7 +107,7 @@ export const xyChart: ExpressionFunctionDefinition<
 };
 
 export const getXyChartRenderer = (dependencies: {
-  formatFactory: FormatFactory;
+  formatFactory: Promise<FormatFactory>;
   chartTheme: PartialTheme;
   timeZone: string;
 }): ExpressionRenderDefinition<XYChartProps> => ({
@@ -119,14 +118,17 @@ export const getXyChartRenderer = (dependencies: {
   }),
   validate: () => undefined,
   reuseDomNode: true,
-  render: (domNode: Element, config: XYChartProps, handlers: IInterpreterRenderHandlers) => {
+  render: async (domNode: Element, config: XYChartProps, handlers: IInterpreterRenderHandlers) => {
     const executeTriggerActions = getExecuteTriggerActions();
     handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode));
+    const formatFactory = await dependencies.formatFactory;
     ReactDOM.render(
       <I18nProvider>
         <XYChartReportable
           {...config}
-          {...dependencies}
+          formatFactory={formatFactory}
+          chartTheme={dependencies.chartTheme}
+          timeZone={dependencies.timeZone}
           executeTriggerActions={executeTriggerActions}
         />
       </I18nProvider>,