[Chart expressions] new metric vis expression (#135461)

2025-04-23 17:28:26 -04:00 · 2022-07-08 12:07:43 -05:00 · 2022-07-08 12:07:43 -05:00 · 3891aeb95f
commit 3891aeb95f
parent 87ac0fd2fe
112 changed files with 2378 additions and 349 deletions
--- a/.i18nrc.json
+++ b/.i18nrc.json
@ -29,6 +29,7 @@
    "expressionImage": "src/plugins/expression_image",
    "expressionMetric": "src/plugins/expression_metric",
    "expressionMetricVis": "src/plugins/chart_expressions/expression_metric",
+    "expressionLegacyMetricVis": "src/plugins/chart_expressions/expression_legacy_metric",
    "expressionPartitionVis": "src/plugins/chart_expressions/expression_partition_vis",
    "expressionXY": "src/plugins/chart_expressions/expression_xy",
    "expressionRepeatImage": "src/plugins/expression_repeat_image",
@ -57,10 +58,7 @@
    "kibana-react": "src/plugins/kibana_react",
    "kibanaOverview": "src/plugins/kibana_overview",
    "lists": "packages/kbn-securitysolution-list-utils/src",
-    "management": [
-      "src/legacy/core_plugins/management",
-      "src/plugins/management"
-    ],
+    "management": ["src/legacy/core_plugins/management", "src/plugins/management"],
    "monaco": "packages/kbn-monaco/src",
    "navigation": "src/plugins/navigation",
    "newsfeed": "src/plugins/newsfeed",
@ -74,13 +72,8 @@
    "sharedUXPackages": "packages/shared-ux",
    "coloring": "packages/kbn-coloring/src",
    "statusPage": "src/legacy/core_plugins/status_page",
-    "telemetry": [
-      "src/plugins/telemetry",
-      "src/plugins/telemetry_management_section"
-    ],
-    "timelion": [
-      "src/plugins/vis_types/timelion"
-    ],
+    "telemetry": ["src/plugins/telemetry", "src/plugins/telemetry_management_section"],
+    "timelion": ["src/plugins/vis_types/timelion"],
    "uiActions": "src/plugins/ui_actions",
    "uiActionsEnhanced": "src/plugins/ui_actions_enhanced",
    "uiActionsExamples": "examples/ui_action_examples",
--- a/docs/developer/plugin-list.asciidoc
+++ b/docs/developer/plugin-list.asciidoc
@ -114,6 +114,10 @@ This API doesn't support angular, for registering angular dev tools, bootstrap a
 |Expression Image plugin adds an image renderer to the expression plugin. The renderer will display the given image.


+|{kib-repo}blob/{branch}/src/plugins/chart_expressions/expression_legacy_metric/README.md[expressionLegacyMetricVis]
+|Expression MetricVis plugin adds a metric renderer and function to the expression plugin. The renderer will display the metric chart.
+
+
 |{kib-repo}blob/{branch}/src/plugins/expression_metric/README.md[expressionMetric]
 |Expression Metric plugin adds a metric renderer and function to the expression plugin.

--- a/packages/kbn-optimizer/limits.yml
+++ b/packages/kbn-optimizer/limits.yml
@ -96,6 +96,7 @@ pageLoadAssetSize:
  securitySolution: 273763
  customIntegrations: 28810
  expressionMetricVis: 23121
+  expressionLegacyMetricVis: 23121
  expressionHeatmap: 27505
  visTypeMetric: 23332
  bfetch: 22837
--- a/src/plugins/chart_expressions/expression_legacy_metric/.i18nrc.json
+++ b/src/plugins/chart_expressions/expression_legacy_metric/.i18nrc.json
@ -0,0 +1,6 @@
+{
+  "prefix": "expressionLegacyMetricVis",
+  "paths": {
+    "expressionLegacyMetricVis": "."
+  }
+}
--- a/src/plugins/chart_expressions/expression_legacy_metric/.storybook/main.js
+++ b/src/plugins/chart_expressions/expression_legacy_metric/.storybook/main.js
@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { defaultConfig } from '@kbn/storybook';
+import webpackMerge from 'webpack-merge';
+import { resolve } from 'path';
+
+const mockConfig = {
+  resolve: {
+    alias: {
+      '../../../expression_legacy_metric/public/services': resolve(
+        __dirname,
+        '../public/__mocks__/services.ts'
+      ),
+    },
+  },
+};
+
+module.exports = {
+  ...defaultConfig,
+  webpackFinal: (config) => webpackMerge(config, mockConfig),
+};
--- a/src/plugins/chart_expressions/expression_legacy_metric/README.md
+++ b/src/plugins/chart_expressions/expression_legacy_metric/README.md
@ -0,0 +1,9 @@
+# expressionLegacyMetricVis
+
+Expression MetricVis plugin adds a `metric` renderer and function to the expression plugin. The renderer will display the `metric` chart.
+
+---
+
+## Development
+
+See the [kibana contributing guide](https://github.com/elastic/kibana/blob/main/CONTRIBUTING.md) for instructions setting up your development environment.
--- a/src/plugins/chart_expressions/expression_legacy_metric/common/constants.ts
+++ b/src/plugins/chart_expressions/expression_legacy_metric/common/constants.ts
@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export const EXPRESSION_METRIC_NAME = 'legacyMetricVis';
+
+export const LabelPosition = {
+  BOTTOM: 'bottom',
+  TOP: 'top',
+} as const;
--- a/src/plugins/chart_expressions/expression_legacy_metric/common/expression_functions/snapshots/metric_vis_function.test.ts.snap
+++ b/src/plugins/chart_expressions/expression_legacy_metric/common/expression_functions/snapshots/metric_vis_function.test.ts.snap
@ -23,7 +23,7 @@ Object {

 exports[`interpreter/functions#metric returns an object with the correct structure 1`] = `
 Object {
-  "as": "metricVis",
+  "as": "legacyMetricVis",
  "type": "render",
  "value": Object {
    "visConfig": Object {
--- a/src/plugins/chart_expressions/expression_legacy_metric/common/expression_functions/index.ts
+++ b/src/plugins/chart_expressions/expression_legacy_metric/common/expression_functions/index.ts
@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { metricVisFunction } from './metric_vis_function';
--- a/src/plugins/chart_expressions/expression_legacy_metric/common/expression_functions/metric_vis_function.test.ts
+++ b/src/plugins/chart_expressions/expression_legacy_metric/common/expression_functions/metric_vis_function.test.ts
--- a/src/plugins/chart_expressions/expression_legacy_metric/common/expression_functions/metric_vis_function.ts
+++ b/src/plugins/chart_expressions/expression_legacy_metric/common/expression_functions/metric_vis_function.ts
@ -0,0 +1,206 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { i18n } from '@kbn/i18n';
+
+import {
+  prepareLogTable,
+  Dimension,
+  validateAccessor,
+} from '@kbn/visualizations-plugin/common/utils';
+import { ColorMode } from '@kbn/charts-plugin/common';
+import { visType } from '../types';
+import { MetricVisExpressionFunctionDefinition } from '../types';
+import { EXPRESSION_METRIC_NAME, LabelPosition } from '../constants';
+
+const errors = {
+  severalMetricsAndColorFullBackgroundSpecifiedError: () =>
+    i18n.translate(
+      'expressionLegacyMetricVis.function.errors.severalMetricsAndColorFullBackgroundSpecified',
+      {
+        defaultMessage:
+          'Full background coloring cannot be applied to a visualization with multiple metrics.',
+      }
+    ),
+  splitByBucketAndColorFullBackgroundSpecifiedError: () =>
+    i18n.translate(
+      'expressionLegacyMetricVis.function.errors.splitByBucketAndColorFullBackgroundSpecified',
+      {
+        defaultMessage:
+          'Full background coloring cannot be applied to visualizations that have a bucket specified.',
+      }
+    ),
+};
+
+export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
+  name: EXPRESSION_METRIC_NAME,
+  type: 'render',
+  inputTypes: ['datatable'],
+  help: i18n.translate('expressionLegacyMetricVis.function.help', {
+    defaultMessage: 'Metric visualization',
+  }),
+  args: {
+    percentageMode: {
+      types: ['boolean'],
+      default: false,
+      help: i18n.translate('expressionLegacyMetricVis.function.percentageMode.help', {
+        defaultMessage: 'Shows metric in percentage mode. Requires colorRange to be set.',
+      }),
+    },
+    colorMode: {
+      types: ['string'],
+      default: `"${ColorMode.None}"`,
+      options: [ColorMode.None, ColorMode.Labels, ColorMode.Background],
+      help: i18n.translate('expressionLegacyMetricVis.function.colorMode.help', {
+        defaultMessage: 'Which part of metric to color',
+      }),
+      strict: true,
+    },
+    colorFullBackground: {
+      types: ['boolean'],
+      default: false,
+      help: i18n.translate('expressionLegacyMetricVis.function.colorFullBackground.help', {
+        defaultMessage: 'Applies the selected background color to the full visualization container',
+      }),
+    },
+    palette: {
+      types: ['palette'],
+      help: i18n.translate('expressionLegacyMetricVis.function.palette.help', {
+        defaultMessage: 'Provides colors for the values, based on the bounds.',
+      }),
+    },
+    showLabels: {
+      types: ['boolean'],
+      default: true,
+      help: i18n.translate('expressionLegacyMetricVis.function.showLabels.help', {
+        defaultMessage: 'Shows labels under the metric values.',
+      }),
+    },
+    font: {
+      types: ['style'],
+      help: i18n.translate('expressionLegacyMetricVis.function.font.help', {
+        defaultMessage: 'Font settings.',
+      }),
+      default: `{font size=60 align="center"}`,
+    },
+    labelFont: {
+      types: ['style'],
+      help: i18n.translate('expressionLegacyMetricVis.function.labelFont.help', {
+        defaultMessage: 'Label font settings.',
+      }),
+      default: `{font size=24 align="center"}`,
+    },
+    labelPosition: {
+      types: ['string'],
+      options: [LabelPosition.BOTTOM, LabelPosition.TOP],
+      help: i18n.translate('expressionLegacyMetricVis.function.labelPosition.help', {
+        defaultMessage: 'Label position',
+      }),
+      default: LabelPosition.BOTTOM,
+      strict: true,
+    },
+    metric: {
+      types: ['string', 'vis_dimension'],
+      help: i18n.translate('expressionLegacyMetricVis.function.metric.help', {
+        defaultMessage: 'metric dimension configuration',
+      }),
+      required: true,
+      multi: true,
+    },
+    bucket: {
+      types: ['string', 'vis_dimension'],
+      help: i18n.translate('expressionLegacyMetricVis.function.bucket.help', {
+        defaultMessage: 'bucket dimension configuration',
+      }),
+    },
+    autoScale: {
+      types: ['boolean'],
+      help: i18n.translate('expressionLegacyMetricVis.function.autoScale.help', {
+        defaultMessage: 'Enable auto scale',
+      }),
+      required: false,
+    },
+  },
+  fn(input, args, handlers) {
+    if (args.percentageMode && !args.palette?.params) {
+      throw new Error('Palette must be provided when using percentageMode');
+    }
+
+    // currently we can allow colorize full container only for one metric
+    if (args.colorFullBackground) {
+      if (args.bucket) {
+        throw new Error(errors.splitByBucketAndColorFullBackgroundSpecifiedError());
+      }
+
+      if (args.metric.length > 1 || input.rows.length > 1) {
+        throw new Error(errors.severalMetricsAndColorFullBackgroundSpecifiedError());
+      }
+    }
+
+    args.metric.forEach((metric) => validateAccessor(metric, input.columns));
+    validateAccessor(args.bucket, input.columns);
+
+    if (handlers?.inspectorAdapters?.tables) {
+      handlers.inspectorAdapters.tables.reset();
+      handlers.inspectorAdapters.tables.allowCsvExport = true;
+
+      const argsTable: Dimension[] = [
+        [
+          args.metric,
+          i18n.translate('expressionLegacyMetricVis.function.dimension.metric', {
+            defaultMessage: 'Metric',
+          }),
+        ],
+      ];
+      if (args.bucket) {
+        argsTable.push([
+          [args.bucket],
+          i18n.translate('expressionLegacyMetricVis.function.dimension.splitGroup', {
+            defaultMessage: 'Split group',
+          }),
+        ]);
+      }
+      const logTable = prepareLogTable(input, argsTable, true);
+      handlers.inspectorAdapters.tables.logDatatable('default', logTable);
+    }
+
+    return {
+      type: 'render',
+      as: EXPRESSION_METRIC_NAME,
+      value: {
+        visData: input,
+        visType,
+        visConfig: {
+          metric: {
+            palette: args.palette?.params,
+            percentageMode: args.percentageMode,
+            metricColorMode: args.colorMode,
+            labels: {
+              show: args.showLabels,
+              position: args.labelPosition,
+              style: {
+                ...args.labelFont,
+              },
+            },
+            colorFullBackground: args.colorFullBackground,
+            style: {
+              bgColor: args.colorMode === ColorMode.Background,
+              labelColor: args.colorMode === ColorMode.Labels,
+              ...args.font,
+            },
+            autoScale: args.autoScale,
+          },
+          dimensions: {
+            metrics: args.metric,
+            ...(args.bucket ? { bucket: args.bucket } : {}),
+          },
+        },
+      },
+    };
+  },
+});
--- a/src/plugins/chart_expressions/expression_legacy_metric/common/index.ts
+++ b/src/plugins/chart_expressions/expression_legacy_metric/common/index.ts
@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export const PLUGIN_ID = 'expressionLegacyMetricVis';
+export const PLUGIN_NAME = 'expressionLegacyMetricVis';
+
+export type {
+  MetricArguments,
+  MetricInput,
+  MetricVisRenderConfig,
+  MetricVisExpressionFunctionDefinition,
+  DimensionsVisParam,
+  MetricVisParam,
+  VisParams,
+  MetricOptions,
+} from './types';
+
+export { metricVisFunction } from './expression_functions';
+
+export { EXPRESSION_METRIC_NAME } from './constants';
--- a/src/plugins/chart_expressions/expression_legacy_metric/common/types/expression_functions.ts
+++ b/src/plugins/chart_expressions/expression_legacy_metric/common/types/expression_functions.ts
@ -0,0 +1,48 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { PaletteOutput } from '@kbn/coloring';
+import {
+  Datatable,
+  ExpressionFunctionDefinition,
+  ExpressionValueRender,
+  Style,
+} from '@kbn/expressions-plugin';
+import { ExpressionValueVisDimension } from '@kbn/visualizations-plugin/common';
+import { ColorMode, CustomPaletteState } from '@kbn/charts-plugin/common';
+import { VisParams, visType, LabelPositionType } from './expression_renderers';
+import { EXPRESSION_METRIC_NAME } from '../constants';
+
+export interface MetricArguments {
+  percentageMode: boolean;
+  colorMode: ColorMode;
+  showLabels: boolean;
+  palette?: PaletteOutput<CustomPaletteState>;
+  font: Style;
+  labelFont: Style;
+  labelPosition: LabelPositionType;
+  metric: Array<ExpressionValueVisDimension | string>;
+  bucket?: ExpressionValueVisDimension | string;
+  colorFullBackground: boolean;
+  autoScale?: boolean;
+}
+
+export type MetricInput = Datatable;
+
+export interface MetricVisRenderConfig {
+  visType: typeof visType;
+  visData: Datatable;
+  visConfig: Pick<VisParams, 'metric' | 'dimensions'>;
+}
+
+export type MetricVisExpressionFunctionDefinition = ExpressionFunctionDefinition<
+  typeof EXPRESSION_METRIC_NAME,
+  MetricInput,
+  MetricArguments,
+  ExpressionValueRender<MetricVisRenderConfig>
+>;
--- a/src/plugins/chart_expressions/expression_legacy_metric/common/types/expression_renderers.ts
+++ b/src/plugins/chart_expressions/expression_legacy_metric/common/types/expression_renderers.ts
@ -0,0 +1,59 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { $Values } from '@kbn/utility-types';
+import { ExpressionValueVisDimension } from '@kbn/visualizations-plugin/common';
+import {
+  ColorMode,
+  Labels,
+  CustomPaletteState,
+  Style as ChartStyle,
+} from '@kbn/charts-plugin/common';
+import { Style } from '@kbn/expressions-plugin/common';
+import { LabelPosition } from '../constants';
+
+export const visType = 'metric';
+
+export interface DimensionsVisParam {
+  metrics: Array<ExpressionValueVisDimension | string>;
+  bucket?: ExpressionValueVisDimension | string;
+}
+
+export type LabelPositionType = $Values<typeof LabelPosition>;
+
+export type MetricStyle = Style & Pick<ChartStyle, 'bgColor' | 'labelColor'>;
+
+export type LabelsConfig = Labels & { style: Style; position: LabelPositionType };
+export interface MetricVisParam {
+  percentageMode: boolean;
+  percentageFormatPattern?: string;
+  metricColorMode: ColorMode;
+  palette?: CustomPaletteState;
+  labels: LabelsConfig;
+  style: MetricStyle;
+  colorFullBackground: boolean;
+  autoScale?: boolean;
+}
+
+export interface VisParams {
+  addTooltip: boolean;
+  addLegend: boolean;
+  dimensions: DimensionsVisParam;
+  metric: MetricVisParam;
+  type: typeof visType;
+}
+
+export interface MetricOptions {
+  value: string;
+  label: string;
+  color?: string;
+  bgColor?: string;
+  lightText: boolean;
+  colIndex: number;
+  rowIndex: number;
+}
--- a/src/plugins/chart_expressions/expression_legacy_metric/common/types/index.ts
+++ b/src/plugins/chart_expressions/expression_legacy_metric/common/types/index.ts
@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export * from './expression_functions';
+export * from './expression_renderers';
--- a/src/plugins/chart_expressions/expression_legacy_metric/jest.config.js
+++ b/src/plugins/chart_expressions/expression_legacy_metric/jest.config.js
@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../../../',
+  roots: ['<rootDir>/src/plugins/chart_expressions/expression_legacy_metric'],
+  coverageDirectory:
+    '<rootDir>/target/kibana-coverage/jest/src/plugins/chart_expressions/expression_legacy_metric',
+  coverageReporters: ['text', 'html'],
+  collectCoverageFrom: [
+    '<rootDir>/src/plugins/chart_expressions/expression_legacy_metric/{common,public,server}/**/*.{ts,tsx}',
+  ],
+};
--- a/src/plugins/chart_expressions/expression_legacy_metric/kibana.json
+++ b/src/plugins/chart_expressions/expression_legacy_metric/kibana.json
@ -0,0 +1,21 @@
+{
+  "id": "expressionLegacyMetricVis",
+  "version": "1.0.0",
+  "kibanaVersion": "kibana",
+  "owner": {
+    "name": "Vis Editors",
+    "githubTeam": "kibana-vis-editors"
+  },
+  "description": "Adds a `metric` renderer and function to the expression plugin. The renderer will display the `legacy metric` chart.",
+  "server": true,
+  "ui": true,
+  "requiredPlugins": [
+    "expressions",
+    "fieldFormats",
+    "charts",
+    "visualizations",
+    "presentationUtil"
+  ],
+  "requiredBundles": ["kibanaUtils", "kibanaReact"],
+  "optionalPlugins": []
+}
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/mocks/format_service.ts
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/mocks/format_service.ts
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/mocks/palette_service.ts
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/mocks/palette_service.ts
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/mocks/services.ts
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/mocks/services.ts
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/stories/metric_renderer.stories.tsx
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/stories/metric_renderer.stories.tsx
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/components/snapshots/metric_component.test.tsx.snap
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/components/snapshots/metric_component.test.tsx.snap
@ -116,4 +116,4 @@ exports[`MetricVisComponent should render correct structure for single metric 1`
    }
  }
 />
-`;
+`;
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/components/snapshots/with_auto_scale.test.tsx.snap
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/components/snapshots/with_auto_scale.test.tsx.snap
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric.scss
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric.scss
@ -5,7 +5,7 @@
 //   mtrChart__legend--small
 //   mtrChart__legend-isLoading

-.mtrVis {
+.legacyMtrVis {
  @include euiScrollBar;
  height: 100%;
  width: 100%;
@ -17,23 +17,23 @@
  overflow: auto;
 }

-.mtrVis__value {
+.legacyMtrVis__value {
  @include euiTextTruncate;
  font-weight: $euiFontWeightBold;
 }

-.mtrVis__container {
+.legacyMtrVis__container {
  text-align: center;
  padding: $euiSize;
  display: flex;
  flex-direction: column;
 }

-.mtrVis__container--light {
+.legacyMtrVis__container--light {
  color: $euiColorEmptyShade;
 }

-.mtrVis__container-isfull {
+.legacyMtrVis__container-isfull {
  min-height: 100%;
  min-width: max-content;
  display: flex;
@ -43,13 +43,14 @@
  flex: 1 0 100%;
 }

-.mtrVis__container-isFilterable {
+.legacyMtrVis__container-isFilterable {
  cursor: pointer;
  transition: transform $euiAnimSpeedNormal $euiAnimSlightResistance;
  transform: translate(0, 0);

-  &:hover, &:focus {
+  &:hover,
+  &:focus {
    box-shadow: none;
    transform: translate(0, -2px);
  }
-}
+}
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_component.test.tsx
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_component.test.tsx
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_component.tsx
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_component.tsx
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_value.test.tsx
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_value.test.tsx
@ -75,7 +75,7 @@ describe('MetricVisValue', () => {
      />
    );
    component.simulate('click');
-    expect(component.find('.mtrVis__container-isfilterable')).toHaveLength(1);
+    expect(component.find('.legacyMtrVis__container-isfilterable')).toHaveLength(1);
  });

  it('should not add -isfilterable class if onFilter is not provided', () => {
@ -88,7 +88,7 @@ describe('MetricVisValue', () => {
      />
    );
    component.simulate('click');
-    expect(component.find('.mtrVis__container-isfilterable')).toHaveLength(0);
+    expect(component.find('.legacyMtrVis__container-isfilterable')).toHaveLength(0);
  });

  it('should call onFilter callback if provided', () => {
@ -116,6 +116,6 @@ describe('MetricVisValue', () => {
        labelConfig={labelConfig}
      />
    );
-    expect(component.find('.mtrVis__container-isfull').exists()).toBe(true);
+    expect(component.find('.legacyMtrVis__container-isfull').exists()).toBe(true);
  });
 });
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/components/metric_value.tsx
@ -23,10 +23,10 @@ interface MetricVisValueProps {

 export const MetricVisValue = (props: MetricVisValueProps) => {
  const { style, metric, onFilter, labelConfig, colorFullBackground, autoScale } = props;
-  const containerClassName = classNames('mtrVis__container', {
-    'mtrVis__container--light': metric.lightText,
-    'mtrVis__container-isfilterable': onFilter,
-    'mtrVis__container-isfull': !autoScale && colorFullBackground,
+  const containerClassName = classNames('legacyMtrVis__container', {
+    'legacyMtrVis__container--light': metric.lightText,
+    'legacyMtrVis__container-isfilterable': onFilter,
+    'legacyMtrVis__container-isfull': !autoScale && colorFullBackground,
  });

  useLayoutEffect(() => {
@ -41,7 +41,7 @@ export const MetricVisValue = (props: MetricVisValueProps) => {
    >
      <div
        data-test-subj="metric_value"
-        className="mtrVis__value"
+        className="legacyMtrVis__value"
        style={{
          ...(style.spec as CSSProperties),
          ...(metric.color ? { color: metric.color } : {}),
@ -75,7 +75,7 @@ export const MetricVisValue = (props: MetricVisValueProps) => {
      <button
        style={{ display: 'block' }}
        onClick={() => onFilter()}
-        title={i18n.translate('expressionMetricVis.filterTitle', {
+        title={i18n.translate('expressionLegacyMetricVis.filterTitle', {
          defaultMessage: 'Click to filter by field',
        })}
      >
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/components/with_auto_scale.styles.ts
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/components/with_auto_scale.styles.ts
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/components/with_auto_scale.test.tsx
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/components/with_auto_scale.test.tsx
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/components/with_auto_scale.tsx
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/components/with_auto_scale.tsx
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/expression_renderers/index.ts
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/expression_renderers/index.ts
@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { getMetricVisRenderer } from './metric_vis_renderer';
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/expression_renderers/metric_vis_renderer.tsx
@ -0,0 +1,91 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { lazy } from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+
+import { ThemeServiceStart } from '@kbn/core/public';
+import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
+import {
+  ExpressionValueVisDimension,
+  VisualizationContainer,
+} from '@kbn/visualizations-plugin/public';
+import {
+  ExpressionRenderDefinition,
+  IInterpreterRenderHandlers,
+} from '@kbn/expressions-plugin/common/expression_renderers';
+import { getColumnByAccessor } from '@kbn/visualizations-plugin/common/utils';
+import { Datatable } from '@kbn/expressions-plugin';
+import { EXPRESSION_METRIC_NAME, MetricVisRenderConfig, VisParams } from '../../common';
+
+// @ts-ignore
+const MetricVisComponent = lazy(() => import('../components/metric_component'));
+
+async function metricFilterable(
+  dimensions: VisParams['dimensions'],
+  table: Datatable,
+  handlers: IInterpreterRenderHandlers
+) {
+  return Promise.all(
+    dimensions.metrics.map(async (metric: string | ExpressionValueVisDimension) => {
+      const column = getColumnByAccessor(metric, table.columns);
+      const colIndex = table.columns.indexOf(column!);
+      return Boolean(
+        await handlers.hasCompatibleActions?.({
+          name: 'filter',
+          data: {
+            data: [
+              {
+                table,
+                column: colIndex,
+                row: 0,
+              },
+            ],
+          },
+        })
+      );
+    })
+  );
+}
+
+export const getMetricVisRenderer = (
+  theme: ThemeServiceStart
+): (() => ExpressionRenderDefinition<MetricVisRenderConfig>) => {
+  return () => ({
+    name: EXPRESSION_METRIC_NAME,
+    displayName: 'metric visualization',
+    reuseDomNode: true,
+    render: async (domNode, { visData, visConfig }, handlers) => {
+      handlers.onDestroy(() => {
+        unmountComponentAtNode(domNode);
+      });
+
+      const filterable = await metricFilterable(visConfig.dimensions, visData, handlers);
+
+      render(
+        <KibanaThemeProvider theme$={theme.theme$}>
+          <VisualizationContainer
+            data-test-subj="legacyMtrVis"
+            className="legacyMtrVis"
+            showNoResult={!visData.rows?.length}
+            handlers={handlers}
+          >
+            <MetricVisComponent
+              visData={visData}
+              visParams={visConfig}
+              renderComplete={() => handlers.done()}
+              fireEvent={handlers.event}
+              filterable={filterable}
+            />
+          </VisualizationContainer>
+        </KibanaThemeProvider>,
+        domNode
+      );
+    },
+  });
+};
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/format_service.ts
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/format_service.ts
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/index.ts
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/index.ts
@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ExpressionLegacyMetricPlugin } from './plugin';
+
+export function plugin() {
+  return new ExpressionLegacyMetricPlugin();
+}
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/plugin.ts
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/plugin.ts
@ -0,0 +1,41 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ChartsPluginSetup } from '@kbn/charts-plugin/public';
+import { CoreSetup, CoreStart, Plugin } from '@kbn/core/public';
+import { Plugin as ExpressionsPublicPlugin } from '@kbn/expressions-plugin/public';
+import { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
+import { metricVisFunction } from '../common';
+import { setFormatService, setPaletteService } from './services';
+import { getMetricVisRenderer } from './expression_renderers';
+
+/** @internal */
+export interface ExpressionLegacyMetricPluginSetup {
+  expressions: ReturnType<ExpressionsPublicPlugin['setup']>;
+  charts: ChartsPluginSetup;
+}
+
+/** @internal */
+export interface ExpressionLegacyMetricPluginStart {
+  fieldFormats: FieldFormatsStart;
+}
+
+/** @internal */
+export class ExpressionLegacyMetricPlugin implements Plugin<void, void> {
+  public setup(core: CoreSetup, { expressions, charts }: ExpressionLegacyMetricPluginSetup) {
+    expressions.registerFunction(metricVisFunction);
+    expressions.registerRenderer(getMetricVisRenderer(core.theme));
+    charts.palettes.getPalettes().then((palettes) => {
+      setPaletteService(palettes);
+    });
+  }
+
+  public start(core: CoreStart, { fieldFormats }: ExpressionLegacyMetricPluginStart) {
+    setFormatService(fieldFormats);
+  }
+}
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/services/format_service.ts
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/services/format_service.ts
@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { createGetterSetter } from '@kbn/kibana-utils-plugin/public';
+import { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
+
+export const [getFormatService, setFormatService] =
+  createGetterSetter<FieldFormatsStart>('fieldFormats');
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/services/index.ts
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/services/index.ts
@ -0,0 +1,10 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { getFormatService, setFormatService } from './format_service';
+export { getPaletteService, setPaletteService } from './palette_service';
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/services/palette_service.ts
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/services/palette_service.ts
@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { PaletteRegistry } from '@kbn/coloring';
+import { createGetterSetter } from '@kbn/kibana-utils-plugin/public';
+
+export const [getPaletteService, setPaletteService] =
+  createGetterSetter<PaletteRegistry>('palette');
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/utils/format.ts
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/utils/format.ts
@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { FieldFormatsContentType, IFieldFormat } from '@kbn/field-formats-plugin/common';
+
+export const formatValue = (
+  value: number | string,
+  fieldFormatter: IFieldFormat,
+  format: FieldFormatsContentType = 'text'
+) => {
+  if (typeof value === 'number' && isNaN(value)) {
+    return '-';
+  }
+
+  return fieldFormatter.convert(value, format);
+};
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/utils/index.ts
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/utils/index.ts
@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+export { parseRgbString, shouldApplyColor, needsLightText } from './palette';
+export { formatValue } from './format';
--- a/src/plugins/chart_expressions/expression_legacy_metric/public/utils/palette.ts
+++ b/src/plugins/chart_expressions/expression_legacy_metric/public/utils/palette.ts
@ -0,0 +1,41 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { isColorDark } from '@elastic/eui';
+
+export const parseRgbString = (rgb: string) => {
+  const groups = rgb.match(/rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*?(,\s*(\d+)\s*)?\)/) ?? [];
+  if (!groups) {
+    return null;
+  }
+
+  const red = parseFloat(groups[1]);
+  const green = parseFloat(groups[2]);
+  const blue = parseFloat(groups[3]);
+  const opacity = groups[5] ? parseFloat(groups[5]) : undefined;
+
+  return { red, green, blue, opacity };
+};
+
+export const shouldApplyColor = (color: string) => {
+  const rgb = parseRgbString(color);
+  const { opacity } = rgb ?? {};
+
+  // if opacity === 0, it means there is no color to apply to the metric
+  return !rgb || (rgb && opacity !== 0);
+};
+
+export const needsLightText = (bgColor: string = '') => {
+  const rgb = parseRgbString(bgColor);
+  if (!rgb) {
+    return false;
+  }
+
+  const { red, green, blue, opacity } = rgb;
+  return isColorDark(red, green, blue) && opacity !== 0;
+};
--- a/src/plugins/chart_expressions/expression_legacy_metric/server/index.ts
+++ b/src/plugins/chart_expressions/expression_legacy_metric/server/index.ts
@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { ExpressionLegacyMetricPlugin } from './plugin';
+
+export function plugin() {
+  return new ExpressionLegacyMetricPlugin();
+}
--- a/src/plugins/chart_expressions/expression_legacy_metric/server/plugin.ts
+++ b/src/plugins/chart_expressions/expression_legacy_metric/server/plugin.ts
@ -0,0 +1,40 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { CoreSetup, CoreStart, Plugin } from '@kbn/core/public';
+import { ExpressionsServerStart, ExpressionsServerSetup } from '@kbn/expressions-plugin/server';
+import { metricVisFunction } from '../common';
+
+interface SetupDeps {
+  expressions: ExpressionsServerSetup;
+}
+
+interface StartDeps {
+  expression: ExpressionsServerStart;
+}
+
+export type ExpressionLegacyMetricPluginSetup = void;
+export type ExpressionLegacyMetricPluginStart = void;
+
+export class ExpressionLegacyMetricPlugin
+  implements
+    Plugin<
+      ExpressionLegacyMetricPluginSetup,
+      ExpressionLegacyMetricPluginStart,
+      SetupDeps,
+      StartDeps
+    >
+{
+  public setup(core: CoreSetup, { expressions }: SetupDeps): ExpressionLegacyMetricPluginSetup {
+    expressions.registerFunction(metricVisFunction);
+  }
+
+  public start(core: CoreStart): ExpressionLegacyMetricPluginStart {}
+
+  public stop() {}
+}
--- a/src/plugins/chart_expressions/expression_legacy_metric/tsconfig.json
+++ b/src/plugins/chart_expressions/expression_legacy_metric/tsconfig.json
@ -0,0 +1,23 @@
+{
+  "extends": "../../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./target/types",
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "declarationMap": true,
+    "isolatedModules": true
+  },
+  "include": [
+    "common/**/*",
+    "public/**/*",
+    "server/**/*",
+  ],
+  "references": [
+    { "path": "../../../core/tsconfig.json" },
+    { "path": "../../expressions/tsconfig.json" },
+    { "path": "../../presentation_util/tsconfig.json" },
+    { "path": "../../field_formats/tsconfig.json" },
+    { "path": "../../charts/tsconfig.json" },
+    { "path": "../../visualizations/tsconfig.json" },
+  ]
+}
--- a/src/plugins/chart_expressions/expression_metric/common/expression_functions/metric_vis_function.ts
+++ b/src/plugins/chart_expressions/expression_metric/common/expression_functions/metric_vis_function.ts
@ -13,29 +13,10 @@ import {
  Dimension,
  validateAccessor,
 } from '@kbn/visualizations-plugin/common/utils';
-import { ColorMode } from '@kbn/charts-plugin/common';
+import { LayoutDirection } from '@elastic/charts';
 import { visType } from '../types';
 import { MetricVisExpressionFunctionDefinition } from '../types';
-import { EXPRESSION_METRIC_NAME, LabelPosition } from '../constants';
-
-const errors = {
-  severalMetricsAndColorFullBackgroundSpecifiedError: () =>
-    i18n.translate(
-      'expressionMetricVis.function.errors.severalMetricsAndColorFullBackgroundSpecified',
-      {
-        defaultMessage:
-          'Full background coloring cannot be applied to a visualization with multiple metrics.',
-      }
-    ),
-  splitByBucketAndColorFullBackgroundSpecifiedError: () =>
-    i18n.translate(
-      'expressionMetricVis.function.errors.splitByBucketAndColorFullBackgroundSpecified',
-      {
-        defaultMessage:
-          'Full background coloring cannot be applied to visualizations that have a bucket specified.',
-      }
-    ),
-};
+import { EXPRESSION_METRIC_NAME } from '../constants';

 export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
  name: EXPRESSION_METRIC_NAME,
@ -45,105 +26,76 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
    defaultMessage: 'Metric visualization',
  }),
  args: {
-    percentageMode: {
-      types: ['boolean'],
-      default: false,
-      help: i18n.translate('expressionMetricVis.function.percentageMode.help', {
-        defaultMessage: 'Shows metric in percentage mode. Requires colorRange to be set.',
+    metric: {
+      types: ['vis_dimension', 'string'],
+      help: i18n.translate('expressionMetricVis.function.metric.help', {
+        defaultMessage: 'The primary metric.',
      }),
    },
-    colorMode: {
+    secondaryMetric: {
+      types: ['vis_dimension', 'string'],
+      help: i18n.translate('expressionMetricVis.function.secondaryMetric.help', {
+        defaultMessage: 'The secondary metric (shown above the primary).',
+      }),
+    },
+    breakdownBy: {
+      types: ['vis_dimension', 'string'],
+      help: i18n.translate('expressionMetricVis.function.breakdownBy.help', {
+        defaultMessage: 'The dimension containing the labels for sub-categories.',
+      }),
+    },
+    subtitle: {
      types: ['string'],
-      default: `"${ColorMode.None}"`,
-      options: [ColorMode.None, ColorMode.Labels, ColorMode.Background],
-      help: i18n.translate('expressionMetricVis.function.colorMode.help', {
-        defaultMessage: 'Which part of metric to color',
+      help: i18n.translate('expressionMetricVis.function.subtitle.help', {
+        defaultMessage: 'The subtitle for a single metric. Overridden if breakdownBy is supplied.',
+      }),
+    },
+    extraText: {
+      types: ['string'],
+      help: i18n.translate('expressionMetricVis.function.extra.help', {
+        defaultMessage: 'Text to be shown above metric value. Overridden by secondaryMetric.',
+      }),
+    },
+    progressMax: {
+      types: ['vis_dimension', 'string'],
+      help: i18n.translate('expressionMetricVis.function.progressMax.help.', {
+        defaultMessage: 'The dimension containing the maximum value.',
+      }),
+    },
+    progressDirection: {
+      types: ['string'],
+      options: [LayoutDirection.Vertical, LayoutDirection.Horizontal],
+      default: LayoutDirection.Vertical,
+      help: i18n.translate('expressionMetricVis.function.progressDirection.help', {
+        defaultMessage: 'The direction the progress bar should grow.',
      }),
      strict: true,
    },
-    colorFullBackground: {
-      types: ['boolean'],
-      default: false,
-      help: i18n.translate('expressionMetricVis.function.colorFullBackground.help', {
-        defaultMessage: 'Applies the selected background color to the full visualization container',
-      }),
-    },
    palette: {
      types: ['palette'],
      help: i18n.translate('expressionMetricVis.function.palette.help', {
        defaultMessage: 'Provides colors for the values, based on the bounds.',
      }),
    },
-    showLabels: {
-      types: ['boolean'],
-      default: true,
-      help: i18n.translate('expressionMetricVis.function.showLabels.help', {
-        defaultMessage: 'Shows labels under the metric values.',
+    maxCols: {
+      types: ['number'],
+      help: i18n.translate('expressionMetricVis.function.maxCols.help', {
+        defaultMessage: 'Specifies the max number of columns in the metric grid.',
      }),
+      default: 5,
    },
-    font: {
-      types: ['style'],
-      help: i18n.translate('expressionMetricVis.function.font.help', {
-        defaultMessage: 'Font settings.',
+    minTiles: {
+      types: ['number'],
+      help: i18n.translate('expressionMetricVis.function.minTiles.help', {
+        defaultMessage:
+          'Specifies the minimum number of tiles in the metric grid regardless of the input data.',
      }),
-      default: `{font size=60 align="center"}`,
-    },
-    labelFont: {
-      types: ['style'],
-      help: i18n.translate('expressionMetricVis.function.labelFont.help', {
-        defaultMessage: 'Label font settings.',
-      }),
-      default: `{font size=24 align="center"}`,
-    },
-    labelPosition: {
-      types: ['string'],
-      options: [LabelPosition.BOTTOM, LabelPosition.TOP],
-      help: i18n.translate('expressionMetricVis.function.labelPosition.help', {
-        defaultMessage: 'Label position',
-      }),
-      default: LabelPosition.BOTTOM,
-      strict: true,
-    },
-    metric: {
-      types: ['string', 'vis_dimension'],
-      help: i18n.translate('expressionMetricVis.function.metric.help', {
-        defaultMessage: 'metric dimension configuration',
-      }),
-      required: true,
-      multi: true,
-    },
-    bucket: {
-      types: ['string', 'vis_dimension'],
-      help: i18n.translate('expressionMetricVis.function.bucket.help', {
-        defaultMessage: 'bucket dimension configuration',
-      }),
-    },
-    autoScale: {
-      types: ['boolean'],
-      help: i18n.translate('expressionMetricVis.function.autoScale.help', {
-        defaultMessage: 'Enable auto scale',
-      }),
-      required: false,
    },
  },
  fn(input, args, handlers) {
-    if (args.percentageMode && !args.palette?.params) {
-      throw new Error('Palette must be provided when using percentageMode');
-    }
-
-    // currently we can allow colorize full container only for one metric
-    if (args.colorFullBackground) {
-      if (args.bucket) {
-        throw new Error(errors.splitByBucketAndColorFullBackgroundSpecifiedError());
-      }
-
-      if (args.metric.length > 1 || input.rows.length > 1) {
-        throw new Error(errors.severalMetricsAndColorFullBackgroundSpecifiedError());
-      }
-    }
-
-    args.metric.forEach((metric) => validateAccessor(metric, input.columns));
-    validateAccessor(args.bucket, input.columns);
+    validateAccessor(args.metric, input.columns);
+    validateAccessor(args.secondaryMetric, input.columns);
+    validateAccessor(args.breakdownBy, input.columns);

    if (handlers?.inspectorAdapters?.tables) {
      handlers.inspectorAdapters.tables.reset();
@ -151,20 +103,40 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({

      const argsTable: Dimension[] = [
        [
-          args.metric,
+          [args.metric],
          i18n.translate('expressionMetricVis.function.dimension.metric', {
            defaultMessage: 'Metric',
          }),
        ],
      ];
-      if (args.bucket) {
+
+      if (args.secondaryMetric) {
        argsTable.push([
-          [args.bucket],
+          [args.secondaryMetric],
+          i18n.translate('expressionMetricVis.function.dimension.secondaryMetric', {
+            defaultMessage: 'Secondary Metric',
+          }),
+        ]);
+      }
+
+      if (args.breakdownBy) {
+        argsTable.push([
+          [args.breakdownBy],
          i18n.translate('expressionMetricVis.function.dimension.splitGroup', {
            defaultMessage: 'Split group',
          }),
        ]);
      }
+
+      if (args.progressMax) {
+        argsTable.push([
+          [args.progressMax],
+          i18n.translate('expressionMetricVis.function.dimension.maximum', {
+            defaultMessage: 'Maximum',
+          }),
+        ]);
+      }
+
      const logTable = prepareLogTable(input, argsTable, true);
      handlers.inspectorAdapters.tables.logDatatable('default', logTable);
    }
@ -177,27 +149,18 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
        visType,
        visConfig: {
          metric: {
+            subtitle: args.subtitle,
+            extraText: args.extraText,
            palette: args.palette?.params,
-            percentageMode: args.percentageMode,
-            metricColorMode: args.colorMode,
-            labels: {
-              show: args.showLabels,
-              position: args.labelPosition,
-              style: {
-                ...args.labelFont,
-              },
-            },
-            colorFullBackground: args.colorFullBackground,
-            style: {
-              bgColor: args.colorMode === ColorMode.Background,
-              labelColor: args.colorMode === ColorMode.Labels,
-              ...args.font,
-            },
-            autoScale: args.autoScale,
+            progressDirection: args.progressDirection,
+            maxCols: args.maxCols,
+            minTiles: args.minTiles,
          },
          dimensions: {
-            metrics: args.metric,
-            ...(args.bucket ? { bucket: args.bucket } : {}),
+            metric: args.metric,
+            secondaryMetric: args.secondaryMetric,
+            breakdownBy: args.breakdownBy,
+            progressMax: args.progressMax,
          },
        },
      },
--- a/src/plugins/chart_expressions/expression_metric/common/types/expression_functions.ts
+++ b/src/plugins/chart_expressions/expression_metric/common/types/expression_functions.ts
@ -7,29 +7,28 @@
 */

 import type { PaletteOutput } from '@kbn/coloring';
+import { LayoutDirection } from '@elastic/charts';
 import {
  Datatable,
  ExpressionFunctionDefinition,
  ExpressionValueRender,
-  Style,
 } from '@kbn/expressions-plugin';
 import { ExpressionValueVisDimension } from '@kbn/visualizations-plugin/common';
-import { ColorMode, CustomPaletteState } from '@kbn/charts-plugin/common';
-import { VisParams, visType, LabelPositionType } from './expression_renderers';
+import { CustomPaletteState } from '@kbn/charts-plugin/common';
+import { VisParams, visType } from './expression_renderers';
 import { EXPRESSION_METRIC_NAME } from '../constants';

 export interface MetricArguments {
-  percentageMode: boolean;
-  colorMode: ColorMode;
-  showLabels: boolean;
+  metric: ExpressionValueVisDimension | string;
+  secondaryMetric?: ExpressionValueVisDimension | string;
+  breakdownBy?: ExpressionValueVisDimension | string;
+  subtitle?: string;
+  extraText?: string;
+  progressMax?: ExpressionValueVisDimension | string;
+  progressDirection: LayoutDirection;
  palette?: PaletteOutput<CustomPaletteState>;
-  font: Style;
-  labelFont: Style;
-  labelPosition: LabelPositionType;
-  metric: Array<ExpressionValueVisDimension | string>;
-  bucket?: ExpressionValueVisDimension | string;
-  colorFullBackground: boolean;
-  autoScale?: boolean;
+  maxCols: number;
+  minTiles?: number;
 }

 export type MetricInput = Datatable;
--- a/src/plugins/chart_expressions/expression_metric/common/types/expression_renderers.ts
+++ b/src/plugins/chart_expressions/expression_metric/common/types/expression_renderers.ts
@ -6,38 +6,26 @@
 * Side Public License, v 1.
 */

-import { $Values } from '@kbn/utility-types';
 import { ExpressionValueVisDimension } from '@kbn/visualizations-plugin/common';
-import {
-  ColorMode,
-  Labels,
-  CustomPaletteState,
-  Style as ChartStyle,
-} from '@kbn/charts-plugin/common';
-import { Style } from '@kbn/expressions-plugin/common';
-import { LabelPosition } from '../constants';
+import { CustomPaletteState } from '@kbn/charts-plugin/common';
+import { LayoutDirection } from '@elastic/charts';

 export const visType = 'metric';

 export interface DimensionsVisParam {
-  metrics: Array<ExpressionValueVisDimension | string>;
-  bucket?: ExpressionValueVisDimension | string;
+  metric: ExpressionValueVisDimension | string;
+  secondaryMetric?: ExpressionValueVisDimension | string;
+  breakdownBy?: ExpressionValueVisDimension | string;
+  progressMax?: ExpressionValueVisDimension | string;
 }

-export type LabelPositionType = $Values<typeof LabelPosition>;
-
-export type MetricStyle = Style & Pick<ChartStyle, 'bgColor' | 'labelColor'>;
-
-export type LabelsConfig = Labels & { style: Style; position: LabelPositionType };
 export interface MetricVisParam {
-  percentageMode: boolean;
-  percentageFormatPattern?: string;
-  metricColorMode: ColorMode;
+  subtitle?: string;
+  extraText?: string;
  palette?: CustomPaletteState;
-  labels: LabelsConfig;
-  style: MetricStyle;
-  colorFullBackground: boolean;
-  autoScale?: boolean;
+  progressDirection: LayoutDirection;
+  maxCols: number;
+  minTiles?: number;
 }

 export interface VisParams {
--- a/src/plugins/chart_expressions/expression_metric/kibana.json
+++ b/src/plugins/chart_expressions/expression_metric/kibana.json
@ -6,10 +6,16 @@
    "name": "Vis Editors",
    "githubTeam": "kibana-vis-editors"
  },
-  "description": "Expression MetricVis plugin adds a `metric` renderer and function to the expression plugin. The renderer will display the `metric` chart.",
+  "description": "Adds a `metric` renderer and function to the expression plugin. The renderer will display the `metric` chart.",
  "server": true,
  "ui": true,
-  "requiredPlugins": ["expressions", "fieldFormats", "charts", "visualizations", "presentationUtil"],
+  "requiredPlugins": [
+    "expressions",
+    "fieldFormats",
+    "charts",
+    "visualizations",
+    "presentationUtil"
+  ],
  "requiredBundles": ["kibanaUtils", "kibanaReact"],
  "optionalPlugins": []
 }
--- a/src/plugins/chart_expressions/expression_metric/public/mocks/theme_service.ts
+++ b/src/plugins/chart_expressions/expression_metric/public/mocks/theme_service.ts
@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export const getThemeService = () => {
+  return {
+    useChartsTheme: () => ({}),
+  };
+};
--- a/src/plugins/chart_expressions/expression_metric/public/components/currency_codes.test.ts
+++ b/src/plugins/chart_expressions/expression_metric/public/components/currency_codes.test.ts
@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { getCurrencyCode } from './currency_codes';
+// @ts-ignore
+import numeralLanguages from '@elastic/numeral/languages';
+
+describe('getCurrencyCode', () => {
+  const allLanguages = [
+    ['en', '$'],
+    ...numeralLanguages.map((language: { id: string; lang: { currency: { symbol: string } } }) => {
+      const {
+        id,
+        lang: {
+          currency: { symbol },
+        },
+      } = language;
+      return [id, symbol];
+    }),
+  ];
+
+  it.each(allLanguages)(
+    'should have currency code for locale "%s" and currency "%s"',
+    (locale, symbol) => {
+      expect(getCurrencyCode(locale, symbol)).toBeDefined();
+    }
+  );
+});
--- a/src/plugins/chart_expressions/expression_metric/public/components/currency_codes.ts
+++ b/src/plugins/chart_expressions/expression_metric/public/components/currency_codes.ts
@ -0,0 +1,46 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// NOTE: needs to be kept in line with https://github.com/elastic/numeral-js/blob/kibana-fork/languages.js + USD
+const currencyCodeMap: Record<string, string> = {
+  'en-$': 'USD',
+  'be-nl-€': 'EUR',
+  'chs-¥': 'CNY',
+  'cs-kč': 'CZK',
+  'da-dk-dkk': 'DKK',
+  'de-ch-chf': 'CHF',
+  'de-€': 'EUR',
+  'en-gb-£': 'GBP',
+  'es-es-€': 'EUR',
+  'es-$': '',
+  'et-€': 'EUR',
+  'fi-€': 'EUR',
+  'fr-ca-$': 'CAD',
+  'fr-ch-chf': 'CHF',
+  'fr-€': 'EUR',
+  'hu-ft': 'HUF',
+  'it-€': 'EUR',
+  'ja-¥': 'JPY',
+  'nl-nl-€': 'EUR',
+  'pl-pln': 'PLN',
+  'pt-br-r$': 'BRL',
+  'pt-pt-€': 'EUR',
+  'ru-ua-₴': 'UAH',
+  'ru-руб.': 'RUB',
+  'sk-€': 'EUR',
+  'th-฿': 'THB',
+  'tr-₺': 'TRY',
+  'uk-ua-₴': 'UAH',
+};
+
+/**
+ * Returns currency code for use with the Intl API.
+ */
+export const getCurrencyCode = (localeId: string, currencySymbol: string) => {
+  return currencyCodeMap[`${localeId.trim()}-${currencySymbol.trim()}`.toLowerCase()];
+};
--- a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.test.tsx
@ -0,0 +1,905 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Datatable } from '@kbn/expressions-plugin/common';
+import MetricVis, { MetricVisComponentProps } from './metric_vis';
+import { LayoutDirection, Metric, MetricWProgress, Settings } from '@elastic/charts';
+import { SerializedFieldFormat } from '@kbn/field-formats-plugin/common';
+import { SerializableRecord } from '@kbn/utility-types';
+import numeral from '@elastic/numeral';
+
+const mockDeserialize = jest.fn(() => ({
+  getConverterFor: jest.fn(() => () => 'formatted duration'),
+}));
+
+const mockGetColorForValue = jest.fn<undefined | string, any>(() => undefined);
+
+const mockLookupCurrentLocale = jest.fn(() => 'en');
+
+jest.mock('../services', () => ({
+  getFormatService: () => {
+    return {
+      deserialize: mockDeserialize,
+    };
+  },
+  getPaletteService: () => ({
+    get: jest.fn(() => ({ getColorForValue: mockGetColorForValue })),
+  }),
+  getThemeService: () => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const { getThemeService } = require('../__mocks__/theme_service');
+    return getThemeService();
+  },
+  getUiSettingsService: () => {
+    return {
+      get: mockLookupCurrentLocale,
+    };
+  },
+}));
+
+jest.mock('@kbn/field-formats-plugin/common', () => ({
+  FORMATS_UI_SETTINGS: {
+    FORMAT_NUMBER_DEFAULT_LOCALE: 'format_number_default_locale',
+  },
+}));
+
+jest.mock('@elastic/numeral', () => ({
+  language: jest.fn(() => 'en'),
+  languageData: jest.fn(() => ({
+    currency: {
+      symbol: '$',
+    },
+  })),
+}));
+
+type Props = MetricVisComponentProps;
+
+const dayOfWeekColumnId = 'col-0-0';
+const basePriceColumnId = 'col-1-1';
+const minPriceColumnId = 'col-2-2';
+
+const table: Datatable = {
+  type: 'datatable',
+  columns: [
+    {
+      id: dayOfWeekColumnId,
+      name: 'day_of_week: Descending',
+      meta: {
+        type: 'string',
+        field: 'day_of_week',
+        index: 'kibana_sample_data_ecommerce',
+        params: {
+          id: 'terms',
+          params: {
+            id: 'string',
+            otherBucketLabel: 'Other',
+            missingBucketLabel: '(missing value)',
+          },
+        },
+        source: 'esaggs',
+        sourceParams: {
+          hasPrecisionError: false,
+          indexPatternId: 'ff959d40-b880-11e8-a6d9-e546fe2bba5f',
+          id: '0',
+          enabled: true,
+          type: 'terms',
+          params: {
+            field: 'day_of_week',
+            orderBy: '1',
+            order: 'desc',
+            size: 6,
+            otherBucket: false,
+            otherBucketLabel: 'Other',
+            missingBucket: false,
+            missingBucketLabel: '(missing value)',
+          },
+          schema: 'segment',
+        },
+      },
+    },
+    {
+      id: basePriceColumnId,
+      name: 'Median products.base_price',
+      meta: {
+        type: 'number',
+        field: 'products.base_price',
+        index: 'kibana_sample_data_ecommerce',
+        params: {
+          id: 'number',
+          params: {
+            pattern: '$0,0.00',
+          },
+        },
+        source: 'esaggs',
+        sourceParams: {
+          hasPrecisionError: false,
+          indexPatternId: 'ff959d40-b880-11e8-a6d9-e546fe2bba5f',
+          id: '1',
+          enabled: true,
+          type: 'median',
+          params: {
+            field: 'products.base_price',
+          },
+          schema: 'metric',
+        },
+      },
+    },
+    {
+      id: 'col-2-2',
+      name: 'Median products.min_price',
+      meta: {
+        type: 'number',
+        field: 'products.min_price',
+        index: 'kibana_sample_data_ecommerce',
+        params: {
+          id: 'number',
+          params: {
+            pattern: '$0,0.00',
+          },
+        },
+        source: 'esaggs',
+        sourceParams: {
+          hasPrecisionError: false,
+          indexPatternId: 'ff959d40-b880-11e8-a6d9-e546fe2bba5f',
+          id: '2',
+          enabled: true,
+          type: 'median',
+          params: {
+            field: 'products.min_price',
+          },
+          schema: 'metric',
+        },
+      },
+    },
+  ],
+  rows: [
+    {
+      [dayOfWeekColumnId]: 'Friday',
+      [basePriceColumnId]: 28.984375,
+      [minPriceColumnId]: 13.6328125,
+    },
+    {
+      [dayOfWeekColumnId]: 'Wednesday',
+      [basePriceColumnId]: 28.984375,
+      [minPriceColumnId]: 13.639539930555555,
+    },
+    {
+      [dayOfWeekColumnId]: 'Saturday',
+      [basePriceColumnId]: 25.984375,
+      [minPriceColumnId]: 13.34375,
+    },
+    {
+      [dayOfWeekColumnId]: 'Sunday',
+      [basePriceColumnId]: 25.784375,
+      [minPriceColumnId]: 13.4921875,
+    },
+    {
+      [dayOfWeekColumnId]: 'Thursday',
+      [basePriceColumnId]: 25.348011363636363,
+      [minPriceColumnId]: 13.34375,
+    },
+    {
+      [dayOfWeekColumnId]: 'Monday',
+      [basePriceColumnId]: 24.984375,
+      [minPriceColumnId]: 13.242513020833334,
+    },
+  ],
+};
+
+describe('MetricVisComponent', function () {
+  describe('single metric', () => {
+    const config: Props['config'] = {
+      metric: {
+        progressDirection: 'vertical',
+        maxCols: 5,
+      },
+      dimensions: {
+        metric: basePriceColumnId,
+      },
+    };
+
+    it('should render a single metric value', () => {
+      const component = shallow(
+        <MetricVis config={config} data={table} renderComplete={() => {}} />
+      );
+
+      const { data } = component.find(Metric).props();
+
+      expect(data).toBeDefined();
+      expect(data?.length).toBe(1);
+
+      const visConfig = data![0][0]!;
+
+      expect(visConfig).toMatchInlineSnapshot(`
+        Object {
+          "color": "#343741",
+          "extra": <span />,
+          "subtitle": undefined,
+          "title": "Median products.base_price",
+          "value": 28.984375,
+          "valueFormatter": [Function],
+        }
+      `);
+    });
+    it('should display subtitle and extra text', () => {
+      const component = shallow(
+        <MetricVis
+          config={{
+            ...config,
+            metric: { ...config.metric, subtitle: 'subtitle', extraText: 'extra text' },
+          }}
+          data={table}
+          renderComplete={() => {}}
+        />
+      );
+
+      const [[visConfig]] = component.find(Metric).props().data!;
+
+      expect(visConfig!.subtitle).toBe('subtitle');
+      expect(visConfig!.extra).toEqual(<span>extra text</span>);
+
+      expect(visConfig).toMatchInlineSnapshot(`
+        Object {
+          "color": "#343741",
+          "extra": <span>
+            extra text
+          </span>,
+          "subtitle": "subtitle",
+          "title": "Median products.base_price",
+          "value": 28.984375,
+          "valueFormatter": [Function],
+        }
+      `);
+    });
+    it('should display secondary metric', () => {
+      const component = shallow(
+        <MetricVis
+          config={{
+            ...config,
+            metric: { ...config.metric, subtitle: 'subtitle', extraText: 'extra text' },
+            dimensions: { ...config.dimensions, secondaryMetric: minPriceColumnId },
+          }}
+          data={table}
+          renderComplete={() => {}}
+        />
+      );
+
+      const [[visConfig]] = component.find(Metric).props().data!;
+
+      // overrides subtitle and extra text
+      expect(visConfig!.subtitle).toBe(table.columns[2].name);
+      expect(visConfig!.extra).toEqual(<span>13.63</span>);
+
+      expect(visConfig).toMatchInlineSnapshot(`
+        Object {
+          "color": "#343741",
+          "extra": <span>
+            13.63
+          </span>,
+          "subtitle": "Median products.min_price",
+          "title": "Median products.base_price",
+          "value": 28.984375,
+          "valueFormatter": [Function],
+        }
+      `);
+    });
+
+    it('should display progress bar if min and max provided', () => {
+      const getConfig = (max?: string, direction: LayoutDirection = 'vertical') =>
+        shallow(
+          <MetricVis
+            config={{
+              ...config,
+              metric: {
+                ...config.metric,
+                progressDirection: direction,
+              },
+              dimensions: {
+                ...config.dimensions,
+                progressMax: max,
+              },
+            }}
+            data={table}
+            renderComplete={() => {}}
+          />
+        )
+          .find(Metric)
+          .props().data![0][0]!;
+
+      expect(getConfig(undefined)).not.toHaveProperty('domain');
+      expect(getConfig(undefined)).not.toHaveProperty('progressBarDirection');
+
+      expect(getConfig('foobar')).not.toHaveProperty('domain');
+      expect(getConfig('foobar')).not.toHaveProperty('progressBarDirection');
+
+      const configWithProgress = getConfig(basePriceColumnId) as MetricWProgress;
+
+      expect(configWithProgress.domain).toEqual({ min: 0, max: table.rows[0][basePriceColumnId] });
+      expect(configWithProgress.progressBarDirection).toBe('vertical');
+
+      expect(configWithProgress).toMatchInlineSnapshot(`
+        Object {
+          "color": "#343741",
+          "domain": Object {
+            "max": 28.984375,
+            "min": 0,
+          },
+          "extra": <span />,
+          "progressBarDirection": "vertical",
+          "subtitle": undefined,
+          "title": "Median products.base_price",
+          "value": 28.984375,
+          "valueFormatter": [Function],
+        }
+      `);
+
+      expect(
+        (getConfig(basePriceColumnId, 'horizontal') as MetricWProgress).progressBarDirection
+      ).toBe('horizontal');
+    });
+
+    it('should fetch color from palette if provided', () => {
+      const colorFromPalette = 'color-from-palette';
+
+      mockGetColorForValue.mockReturnValue(colorFromPalette);
+
+      const component = shallow(
+        <MetricVis
+          config={{
+            ...config,
+            metric: {
+              ...config.metric,
+              palette: {
+                colors: [],
+                gradient: true,
+                stops: [],
+                range: 'number',
+                rangeMin: 2,
+                rangeMax: 10,
+              },
+            },
+          }}
+          data={table}
+          renderComplete={() => {}}
+        />
+      );
+
+      const [[datum]] = component.find(Metric).props().data!;
+
+      expect(datum!.color).toBe(colorFromPalette);
+      expect(mockGetColorForValue.mock.calls).toMatchInlineSnapshot(`
+        Array [
+          Array [
+            28.984375,
+            Object {
+              "colors": Array [],
+              "gradient": true,
+              "range": "number",
+              "rangeMax": 10,
+              "rangeMin": 2,
+              "stops": Array [],
+            },
+            Object {
+              "max": 10,
+              "min": 2,
+            },
+          ],
+        ]
+      `);
+    });
+  });
+
+  describe('metric grid', () => {
+    const config: Props['config'] = {
+      metric: {
+        progressDirection: 'vertical',
+        maxCols: 5,
+      },
+      dimensions: {
+        metric: basePriceColumnId,
+        breakdownBy: dayOfWeekColumnId,
+      },
+    };
+
+    it('should render a grid if breakdownBy dimension supplied', () => {
+      const component = shallow(
+        <MetricVis config={config} data={table} renderComplete={() => {}} />
+      );
+
+      const { data } = component.find(Metric).props();
+
+      expect(data).toBeDefined();
+      expect(data?.flat().length).toBe(table.rows.length);
+
+      const visConfig = data![0];
+
+      expect(visConfig).toMatchInlineSnapshot(`
+        Array [
+          Object {
+            "color": "#343741",
+            "extra": <span />,
+            "subtitle": "Median products.base_price",
+            "title": "Friday",
+            "value": 28.984375,
+            "valueFormatter": [Function],
+          },
+          Object {
+            "color": "#343741",
+            "extra": <span />,
+            "subtitle": "Median products.base_price",
+            "title": "Wednesday",
+            "value": 28.984375,
+            "valueFormatter": [Function],
+          },
+          Object {
+            "color": "#343741",
+            "extra": <span />,
+            "subtitle": "Median products.base_price",
+            "title": "Saturday",
+            "value": 25.984375,
+            "valueFormatter": [Function],
+          },
+          Object {
+            "color": "#343741",
+            "extra": <span />,
+            "subtitle": "Median products.base_price",
+            "title": "Sunday",
+            "value": 25.784375,
+            "valueFormatter": [Function],
+          },
+          Object {
+            "color": "#343741",
+            "extra": <span />,
+            "subtitle": "Median products.base_price",
+            "title": "Thursday",
+            "value": 25.348011363636363,
+            "valueFormatter": [Function],
+          },
+        ]
+      `);
+    });
+
+    it('should display extra text or secondary metric', () => {
+      const componentWithSecondaryDimension = shallow(
+        <MetricVis
+          config={{
+            ...config,
+            dimensions: { ...config.dimensions, secondaryMetric: minPriceColumnId },
+            // extra text included to make sure it's overridden
+            metric: { ...config.metric, extraText: 'howdy' },
+          }}
+          data={table}
+          renderComplete={() => {}}
+        />
+      );
+
+      expect(
+        componentWithSecondaryDimension
+          .find(Metric)
+          .props()
+          .data?.[0].map((datum) => datum?.extra)
+      ).toMatchInlineSnapshot(`
+        Array [
+          <span>
+            13.63
+          </span>,
+          <span>
+            13.64
+          </span>,
+          <span>
+            13.34
+          </span>,
+          <span>
+            13.49
+          </span>,
+          <span>
+            13.34
+          </span>,
+        ]
+      `);
+
+      const componentWithExtraText = shallow(
+        <MetricVis
+          config={{
+            ...config,
+            metric: { ...config.metric, extraText: 'howdy' },
+          }}
+          data={table}
+          renderComplete={() => {}}
+        />
+      );
+
+      expect(
+        componentWithExtraText
+          .find(Metric)
+          .props()
+          .data?.[0].map((datum) => datum?.extra)
+      ).toMatchInlineSnapshot(`
+        Array [
+          <span>
+            howdy
+          </span>,
+          <span>
+            howdy
+          </span>,
+          <span>
+            howdy
+          </span>,
+          <span>
+            howdy
+          </span>,
+          <span>
+            howdy
+          </span>,
+        ]
+      `);
+    });
+
+    it('should respect maxCols and minTiles', () => {
+      const getConfigs = (maxCols?: number, minTiles?: number) =>
+        shallow(
+          <MetricVis
+            config={{
+              ...config,
+              metric: {
+                ...config.metric,
+                ...(maxCols ? { maxCols } : {}),
+                minTiles,
+              },
+            }}
+            data={table}
+            renderComplete={() => {}}
+          />
+        )
+          .find(Metric)
+          .props().data!;
+
+      const configsWithDefaults = getConfigs(undefined, undefined);
+      expect(configsWithDefaults.length).toBe(2);
+      expect(configsWithDefaults[0].length).toBe(5);
+
+      const configsWithCustomCols = getConfigs(2, undefined);
+      expect(configsWithCustomCols.length).toBe(3);
+      expect(configsWithCustomCols[0].length).toBe(2);
+      expect(configsWithCustomCols[1].length).toBe(2);
+      expect(configsWithCustomCols[2].length).toBe(2);
+
+      const configsWithMinTiles = getConfigs(5, 10);
+      expect(configsWithMinTiles.length).toBe(2);
+      expect(configsWithMinTiles[1].length).toBe(5);
+      expect(configsWithMinTiles).toMatchInlineSnapshot(`
+        Array [
+          Array [
+            Object {
+              "color": "#343741",
+              "extra": <span />,
+              "subtitle": "Median products.base_price",
+              "title": "Friday",
+              "value": 28.984375,
+              "valueFormatter": [Function],
+            },
+            Object {
+              "color": "#343741",
+              "extra": <span />,
+              "subtitle": "Median products.base_price",
+              "title": "Wednesday",
+              "value": 28.984375,
+              "valueFormatter": [Function],
+            },
+            Object {
+              "color": "#343741",
+              "extra": <span />,
+              "subtitle": "Median products.base_price",
+              "title": "Saturday",
+              "value": 25.984375,
+              "valueFormatter": [Function],
+            },
+            Object {
+              "color": "#343741",
+              "extra": <span />,
+              "subtitle": "Median products.base_price",
+              "title": "Sunday",
+              "value": 25.784375,
+              "valueFormatter": [Function],
+            },
+            Object {
+              "color": "#343741",
+              "extra": <span />,
+              "subtitle": "Median products.base_price",
+              "title": "Thursday",
+              "value": 25.348011363636363,
+              "valueFormatter": [Function],
+            },
+          ],
+          Array [
+            Object {
+              "color": "#343741",
+              "extra": <span />,
+              "subtitle": "Median products.base_price",
+              "title": "Monday",
+              "value": 24.984375,
+              "valueFormatter": [Function],
+            },
+            undefined,
+            undefined,
+            undefined,
+            undefined,
+          ],
+        ]
+      `);
+    });
+
+    it('should display progress bar if max provided', () => {
+      expect(
+        shallow(
+          <MetricVis
+            config={{
+              ...config,
+              metric: {
+                ...config.metric,
+              },
+              dimensions: {
+                ...config.dimensions,
+                progressMax: basePriceColumnId,
+              },
+            }}
+            data={table}
+            renderComplete={() => {}}
+          />
+        )
+          .find(Metric)
+          .props().data
+      ).toMatchInlineSnapshot(`
+        Array [
+          Array [
+            Object {
+              "color": "#343741",
+              "domain": Object {
+                "max": 28.984375,
+                "min": 0,
+              },
+              "extra": <span />,
+              "progressBarDirection": "vertical",
+              "subtitle": "Median products.base_price",
+              "title": "Friday",
+              "value": 28.984375,
+              "valueFormatter": [Function],
+            },
+            Object {
+              "color": "#343741",
+              "domain": Object {
+                "max": 28.984375,
+                "min": 0,
+              },
+              "extra": <span />,
+              "progressBarDirection": "vertical",
+              "subtitle": "Median products.base_price",
+              "title": "Wednesday",
+              "value": 28.984375,
+              "valueFormatter": [Function],
+            },
+            Object {
+              "color": "#343741",
+              "domain": Object {
+                "max": 25.984375,
+                "min": 0,
+              },
+              "extra": <span />,
+              "progressBarDirection": "vertical",
+              "subtitle": "Median products.base_price",
+              "title": "Saturday",
+              "value": 25.984375,
+              "valueFormatter": [Function],
+            },
+            Object {
+              "color": "#343741",
+              "domain": Object {
+                "max": 25.784375,
+                "min": 0,
+              },
+              "extra": <span />,
+              "progressBarDirection": "vertical",
+              "subtitle": "Median products.base_price",
+              "title": "Sunday",
+              "value": 25.784375,
+              "valueFormatter": [Function],
+            },
+            Object {
+              "color": "#343741",
+              "domain": Object {
+                "max": 25.348011363636363,
+                "min": 0,
+              },
+              "extra": <span />,
+              "progressBarDirection": "vertical",
+              "subtitle": "Median products.base_price",
+              "title": "Thursday",
+              "value": 25.348011363636363,
+              "valueFormatter": [Function],
+            },
+          ],
+          Array [
+            Object {
+              "color": "#343741",
+              "domain": Object {
+                "max": 24.984375,
+                "min": 0,
+              },
+              "extra": <span />,
+              "progressBarDirection": "vertical",
+              "subtitle": "Median products.base_price",
+              "title": "Monday",
+              "value": 24.984375,
+              "valueFormatter": [Function],
+            },
+          ],
+        ]
+      `);
+    });
+  });
+
+  it('should report render complete', () => {
+    const renderCompleteSpy = jest.fn();
+    const component = shallow(
+      <MetricVis
+        config={{
+          metric: {
+            progressDirection: 'vertical',
+            maxCols: 5,
+          },
+          dimensions: {
+            metric: basePriceColumnId,
+          },
+        }}
+        data={table}
+        renderComplete={renderCompleteSpy}
+      />
+    );
+    component.find(Settings).props().onRenderChange!(false);
+
+    expect(renderCompleteSpy).not.toHaveBeenCalled();
+
+    component.find(Settings).props().onRenderChange!(true);
+
+    expect(renderCompleteSpy).toHaveBeenCalledTimes(1);
+  });
+
+  describe('metric value formatting', () => {
+    const getFormattedMetrics = (
+      value: number,
+      secondaryValue: number,
+      fieldFormatter: SerializedFieldFormat<SerializableRecord>
+    ) => {
+      const config: Props['config'] = {
+        metric: {
+          progressDirection: 'vertical',
+          maxCols: 5,
+        },
+        dimensions: {
+          metric: '1',
+          secondaryMetric: '2',
+        },
+      };
+
+      const component = shallow(
+        <MetricVis
+          config={config}
+          data={{
+            type: 'datatable',
+            columns: [
+              {
+                id: '1',
+                name: '',
+                meta: { type: 'number', params: fieldFormatter },
+              },
+              {
+                id: '2',
+                name: '',
+                meta: { type: 'number', params: fieldFormatter },
+              },
+            ],
+            rows: [{ '1': value, '2': secondaryValue }],
+          }}
+          renderComplete={() => {}}
+        />
+      );
+
+      const {
+        value: primaryMetric,
+        valueFormatter,
+        extra,
+      } = component.find(Metric).props().data?.[0][0]!;
+
+      return { primary: valueFormatter(primaryMetric), secondary: extra?.props.children };
+    };
+
+    it('correctly formats plain numbers', () => {
+      const { primary, secondary } = getFormattedMetrics(394.2393, 983123.984, { id: 'number' });
+      expect(primary).toBe('394.24');
+      expect(secondary).toBe('983.12K');
+    });
+
+    it('correctly formats currency', () => {
+      const { primary, secondary } = getFormattedMetrics(1000.839, 11.2, { id: 'currency' });
+      expect(primary).toBe('$1.00K');
+      expect(secondary).toBe('$11.20');
+
+      mockLookupCurrentLocale.mockReturnValueOnce('be-nl');
+      // @ts-expect-error
+      (numeral.languageData as jest.Mock).mockReturnValueOnce({
+        currency: {
+          symbol: '€',
+        },
+      });
+
+      const { primary: primaryEuro } = getFormattedMetrics(1000.839, 0, {
+        id: 'currency',
+      });
+      expect(primaryEuro).toBe('1,00 тыс. €');
+      // check that we restored the numeral.js state
+      expect(numeral.language).toHaveBeenLastCalledWith('en');
+    });
+
+    it('correctly formats percentages', () => {
+      const { primary, secondary } = getFormattedMetrics(0.23939, 11.2, { id: 'percent' });
+      expect(primary).toBe('23.94%');
+      expect(secondary).toBe('1.12K%');
+    });
+
+    it('correctly formats bytes', () => {
+      const base = 1024;
+
+      const { primary: bytesValue } = getFormattedMetrics(base - 1, 0, { id: 'bytes' });
+      expect(bytesValue).toBe('1,023 byte');
+
+      const { primary: kiloBytesValue } = getFormattedMetrics(Math.pow(base, 1), 0, {
+        id: 'bytes',
+      });
+      expect(kiloBytesValue).toBe('1 kB');
+
+      const { primary: megaBytesValue } = getFormattedMetrics(Math.pow(base, 2), 0, {
+        id: 'bytes',
+      });
+      expect(megaBytesValue).toBe('1 MB');
+
+      const { primary: moreThanPetaValue } = getFormattedMetrics(Math.pow(base, 6), 0, {
+        id: 'bytes',
+      });
+      expect(moreThanPetaValue).toBe('1,024 PB');
+    });
+
+    it('correctly formats durations', () => {
+      const { primary, secondary } = getFormattedMetrics(1, 1, {
+        id: 'duration',
+        params: {
+          // the following params should be preserved
+          inputFormat: 'minutes',
+          // the following params should be overridden
+          outputFormat: 'precise',
+          outputPrecision: 2,
+          useShortSuffix: false,
+        },
+      });
+
+      expect(primary).toBe('formatted duration');
+      expect(secondary).toBe('formatted duration');
+      expect(mockDeserialize).toHaveBeenCalledTimes(2);
+      expect(mockDeserialize).toHaveBeenCalledWith({
+        id: 'duration',
+        params: {
+          inputFormat: 'minutes',
+          outputFormat: 'humanizePrecise',
+          outputPrecision: 1,
+          useShortSuffix: true,
+        },
+      });
+    });
+  });
+});
--- a/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_vis.tsx
@ -0,0 +1,240 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { useCallback } from 'react';
+
+import numeral from '@elastic/numeral';
+import { i18n } from '@kbn/i18n';
+import { Chart, Metric, MetricSpec, RenderChangeListener, Settings } from '@elastic/charts';
+import { getColumnByAccessor, getFormatByAccessor } from '@kbn/visualizations-plugin/common/utils';
+import { ExpressionValueVisDimension } from '@kbn/visualizations-plugin/common';
+import {
+  Datatable,
+  DatatableColumn,
+  DatatableRow,
+  IInterpreterRenderHandlers,
+} from '@kbn/expressions-plugin';
+import { CustomPaletteState } from '@kbn/charts-plugin/public';
+import { euiLightVars } from '@kbn/ui-theme';
+import { FORMATS_UI_SETTINGS } from '@kbn/field-formats-plugin/common';
+import { VisParams } from '../../common';
+import {
+  getPaletteService,
+  getThemeService,
+  getFormatService,
+  getUiSettingsService,
+} from '../services';
+import { getCurrencyCode } from './currency_codes';
+
+const defaultColor = euiLightVars.euiColorDarkestShade;
+
+const getBytesUnit = (value: number) => {
+  const units = ['byte', 'kilobyte', 'megabyte', 'gigabyte', 'terabyte', 'petabyte'];
+  const abs = Math.abs(value);
+
+  const base = 1024;
+  let unit = units[0];
+  let matched = abs < base;
+  let power;
+
+  if (!matched) {
+    for (power = 1; power < units.length; power++) {
+      const [min, max] = [Math.pow(base, power), Math.pow(base, power + 1)];
+      if (abs >= min && abs < max) {
+        unit = units[power];
+        matched = true;
+        value = value / min;
+        break;
+      }
+    }
+  }
+
+  if (!matched) {
+    value = value / Math.pow(base, units.length - 1);
+    unit = units[units.length - 1];
+  }
+
+  return { value, unit };
+};
+
+const getFormatter = (
+  accessor: ExpressionValueVisDimension | string,
+  columns: Datatable['columns']
+) => {
+  const serializedFieldFormat = getFormatByAccessor(accessor, columns);
+  const formatId = serializedFieldFormat?.id ?? 'number';
+
+  if (!['number', 'currency', 'percent', 'bytes', 'duration'].includes(formatId)) {
+    throw new Error(
+      i18n.translate('expressionMetricVis.errors.unsupportedColumnFormat', {
+        defaultMessage: 'Metric Visualization - Unsupported column format: "{id}"',
+        values: {
+          id: formatId,
+        },
+      })
+    );
+  }
+
+  if (formatId === 'duration') {
+    const formatter = getFormatService().deserialize({
+      ...serializedFieldFormat,
+      params: {
+        ...serializedFieldFormat!.params,
+        outputFormat: 'humanizePrecise',
+        outputPrecision: 1,
+        useShortSuffix: true,
+      },
+    });
+    return formatter.getConverterFor('text');
+  }
+
+  const uiSettings = getUiSettingsService();
+
+  const locale = uiSettings.get(FORMATS_UI_SETTINGS.FORMAT_NUMBER_DEFAULT_LOCALE) || 'en';
+
+  const intlOptions: Intl.NumberFormatOptions = {
+    maximumFractionDigits: 2,
+  };
+
+  if (['number', 'currency', 'percent'].includes(formatId)) {
+    intlOptions.notation = 'compact';
+  }
+
+  if (formatId === 'currency') {
+    const currentNumeralLang = numeral.language();
+    numeral.language(locale);
+
+    const {
+      currency: { symbol: currencySymbol },
+      // @ts-expect-error
+    } = numeral.languageData();
+
+    // restore previous value
+    numeral.language(currentNumeralLang);
+
+    intlOptions.currency = getCurrencyCode(locale, currencySymbol);
+    intlOptions.style = 'currency';
+  }
+
+  if (formatId === 'percent') {
+    intlOptions.style = 'percent';
+  }
+
+  return formatId === 'bytes'
+    ? (rawValue: number) => {
+        const { value, unit } = getBytesUnit(rawValue);
+        return new Intl.NumberFormat(locale, { ...intlOptions, style: 'unit', unit }).format(value);
+      }
+    : new Intl.NumberFormat(locale, intlOptions).format;
+};
+
+const getColor = (value: number, paletteParams: CustomPaletteState | undefined) =>
+  paletteParams
+    ? getPaletteService().get('custom')?.getColorForValue?.(value, paletteParams, {
+        min: paletteParams.rangeMin,
+        max: paletteParams.rangeMax,
+      }) || defaultColor
+    : defaultColor;
+
+export interface MetricVisComponentProps {
+  data: Datatable;
+  config: Pick<VisParams, 'metric' | 'dimensions'>;
+  renderComplete: IInterpreterRenderHandlers['done'];
+}
+
+const MetricVisComponent = ({ data, config, renderComplete }: MetricVisComponentProps) => {
+  const primaryMetricColumn = getColumnByAccessor(config.dimensions.metric, data.columns)!;
+  const formatPrimaryMetric = getFormatter(config.dimensions.metric, data.columns);
+
+  let secondaryMetricColumn: DatatableColumn | undefined;
+  let formatSecondaryMetric: ReturnType<typeof getFormatter>;
+  if (config.dimensions.secondaryMetric) {
+    secondaryMetricColumn = getColumnByAccessor(config.dimensions.secondaryMetric, data.columns);
+    formatSecondaryMetric = getFormatter(config.dimensions.secondaryMetric, data.columns);
+  }
+
+  const breakdownByColumn = config.dimensions.breakdownBy
+    ? getColumnByAccessor(config.dimensions.breakdownBy, data.columns)
+    : undefined;
+
+  let getProgressBarConfig = (_row: DatatableRow) => ({});
+
+  if (config.dimensions.progressMax) {
+    const maxColId = getColumnByAccessor(config.dimensions.progressMax, data.columns)?.id;
+    if (maxColId) {
+      getProgressBarConfig = (_row: DatatableRow) => ({
+        domain: {
+          min: 0,
+          max: _row[maxColId],
+        },
+        progressBarDirection: config.metric.progressDirection,
+      });
+    }
+  }
+
+  const metricConfigs: MetricSpec['data'][number] = (
+    breakdownByColumn ? data.rows : data.rows.slice(0, 1)
+  ).map((row) => {
+    const value = row[primaryMetricColumn.id];
+    const title = breakdownByColumn ? row[breakdownByColumn.id] : primaryMetricColumn.name;
+    const subtitle = breakdownByColumn
+      ? primaryMetricColumn.name
+      : secondaryMetricColumn?.name ?? config.metric.subtitle;
+    return {
+      value,
+      valueFormatter: formatPrimaryMetric,
+      title,
+      subtitle,
+      extra: (
+        <span>
+          {secondaryMetricColumn
+            ? formatSecondaryMetric!(row[secondaryMetricColumn.id])
+            : config.metric.extraText}
+        </span>
+      ),
+      color: getColor(value, config.metric.palette),
+      ...getProgressBarConfig(row),
+    };
+  });
+
+  if (config.metric.minTiles) {
+    while (metricConfigs.length < config.metric.minTiles) metricConfigs.push(undefined);
+  }
+
+  const grid: MetricSpec['data'] = [];
+  const {
+    metric: { maxCols },
+  } = config;
+  for (let i = 0; i < metricConfigs.length; i += maxCols) {
+    grid.push(metricConfigs.slice(i, i + maxCols));
+  }
+
+  const chartTheme = getThemeService().useChartsTheme();
+  const onRenderChange = useCallback<RenderChangeListener>(
+    (isRendered) => {
+      if (isRendered) {
+        renderComplete();
+      }
+    },
+    [renderComplete]
+  );
+
+  return (
+    <Chart>
+      <Settings
+        theme={[{ background: { color: 'transparent' } }, chartTheme]}
+        onRenderChange={onRenderChange}
+      />
+      <Metric id="metric" data={grid} />
+    </Chart>
+  );
+};
+
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export { MetricVisComponent as default };
--- a/src/plugins/chart_expressions/expression_metric/public/expression_renderers/metric_vis_renderer.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/expression_renderers/metric_vis_renderer.tsx
@ -11,47 +11,12 @@ import { render, unmountComponentAtNode } from 'react-dom';

 import { ThemeServiceStart } from '@kbn/core/public';
 import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
-import {
-  ExpressionValueVisDimension,
-  VisualizationContainer,
-} from '@kbn/visualizations-plugin/public';
-import {
-  ExpressionRenderDefinition,
-  IInterpreterRenderHandlers,
-} from '@kbn/expressions-plugin/common/expression_renderers';
-import { getColumnByAccessor } from '@kbn/visualizations-plugin/common/utils';
-import { Datatable } from '@kbn/expressions-plugin';
-import { EXPRESSION_METRIC_NAME, MetricVisRenderConfig, VisParams } from '../../common';
+import { ExpressionRenderDefinition } from '@kbn/expressions-plugin/common/expression_renderers';
+import { VisualizationContainer } from '@kbn/visualizations-plugin/public';
+import { css } from '@emotion/react';
+import { EXPRESSION_METRIC_NAME, MetricVisRenderConfig } from '../../common';

-// @ts-ignore
-const MetricVisComponent = lazy(() => import('../components/metric_component'));
-
-async function metricFilterable(
-  dimensions: VisParams['dimensions'],
-  table: Datatable,
-  handlers: IInterpreterRenderHandlers
-) {
-  return Promise.all(
-    dimensions.metrics.map(async (metric: string | ExpressionValueVisDimension) => {
-      const column = getColumnByAccessor(metric, table.columns);
-      const colIndex = table.columns.indexOf(column!);
-      return Boolean(
-        await handlers.hasCompatibleActions?.({
-          name: 'filter',
-          data: {
-            data: [
-              {
-                table,
-                column: colIndex,
-                row: 0,
-              },
-            ],
-          },
-        })
-      );
-    })
-  );
-}
+const MetricVis = lazy(() => import('../components/metric_vis'));

 export const getMetricVisRenderer = (
  theme: ThemeServiceStart
@ -65,23 +30,18 @@ export const getMetricVisRenderer = (
        unmountComponentAtNode(domNode);
      });

-      const filterable = await metricFilterable(visConfig.dimensions, visData, handlers);
-
      render(
        <KibanaThemeProvider theme$={theme.theme$}>
          <VisualizationContainer
            data-test-subj="mtrVis"
-            className="mtrVis"
-            showNoResult={!visData.rows?.length}
+            css={css`
+              height: 100%;
+              width: 100%;
+            `}
+            showNoResult={!visData.rows.length}
            handlers={handlers}
          >
-            <MetricVisComponent
-              visData={visData}
-              visParams={visConfig}
-              renderComplete={() => handlers.done()}
-              fireEvent={handlers.event}
-              filterable={filterable}
-            />
+            <MetricVis data={visData} config={visConfig} renderComplete={() => handlers.done()} />
          </VisualizationContainer>
        </KibanaThemeProvider>,
        domNode
--- a/src/plugins/chart_expressions/expression_metric/public/plugin.ts
+++ b/src/plugins/chart_expressions/expression_metric/public/plugin.ts
@ -13,6 +13,8 @@ import { FieldFormatsStart } from '@kbn/field-formats-plugin/public';
 import { metricVisFunction } from '../common';
 import { setFormatService, setPaletteService } from './services';
 import { getMetricVisRenderer } from './expression_renderers';
+import { setThemeService } from './services/theme_service';
+import { setUiSettingsService } from './services/ui_settings';

 /** @internal */
 export interface ExpressionMetricPluginSetup {
@ -27,12 +29,14 @@ export interface ExpressionMetricPluginStart {

 /** @internal */
 export class ExpressionMetricPlugin implements Plugin<void, void> {
-  public setup(core: CoreSetup, { expressions, charts }: ExpressionMetricPluginSetup) {
+  public async setup(core: CoreSetup, { expressions, charts }: ExpressionMetricPluginSetup) {
    expressions.registerFunction(metricVisFunction);
    expressions.registerRenderer(getMetricVisRenderer(core.theme));
-    charts.palettes.getPalettes().then((palettes) => {
-      setPaletteService(palettes);
-    });
+
+    setUiSettingsService(core.uiSettings);
+    setThemeService(charts.theme);
+    const palettes = await charts.palettes.getPalettes();
+    setPaletteService(palettes);
  }

  public start(core: CoreStart, { fieldFormats }: ExpressionMetricPluginStart) {
--- a/src/plugins/chart_expressions/expression_metric/public/services/index.ts
+++ b/src/plugins/chart_expressions/expression_metric/public/services/index.ts
@ -7,4 +7,6 @@
 */

 export { getFormatService, setFormatService } from './format_service';
+export { getThemeService, setThemeService } from './theme_service';
 export { getPaletteService, setPaletteService } from './palette_service';
+export { getUiSettingsService, setUiSettingsService } from './ui_settings';
--- a/src/plugins/chart_expressions/expression_metric/public/services/theme_service.ts
+++ b/src/plugins/chart_expressions/expression_metric/public/services/theme_service.ts
@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { createGetterSetter } from '@kbn/kibana-utils-plugin/public';
+import { ChartsPluginSetup } from '@kbn/charts-plugin/public';
+
+export const [getThemeService, setThemeService] =
+  createGetterSetter<ChartsPluginSetup['theme']>('charts.theme');
--- a/src/plugins/chart_expressions/expression_metric/public/services/ui_settings.ts
+++ b/src/plugins/chart_expressions/expression_metric/public/services/ui_settings.ts
@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { CoreSetup } from '@kbn/core/public';
+import { createGetterSetter } from '@kbn/kibana-utils-plugin/public';
+
+export const [getUiSettingsService, setUiSettingsService] =
+  createGetterSetter<CoreSetup['uiSettings']>('uiSettings');
--- a/src/plugins/field_formats/common/constants/base_formatters.ts
+++ b/src/plugins/field_formats/common/constants/base_formatters.ts
@ -12,6 +12,7 @@ import {
  BoolFormat,
  BytesFormat,
  ColorFormat,
+  CurrencyFormat,
  DurationFormat,
  GeoPointFormat,
  IpFormat,
@ -30,6 +31,7 @@ export const baseFormatters: FieldFormatInstanceType[] = [
  BoolFormat,
  BytesFormat,
  ColorFormat,
+  CurrencyFormat,
  DurationFormat,
  GeoPointFormat,
  IpFormat,
--- a/src/plugins/field_formats/common/converters/currency.test.ts
+++ b/src/plugins/field_formats/common/converters/currency.test.ts
@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { CurrencyFormat } from './currency';
+import { FORMATS_UI_SETTINGS } from '../constants/ui_settings';
+import { FieldFormatsGetConfigFn } from '../types';
+
+describe('CurrencyFormat', () => {
+  const config: { [key: string]: string } = {
+    [FORMATS_UI_SETTINGS.FORMAT_CURRENCY_DEFAULT_PATTERN]: '($0,0.[00])',
+  };
+
+  const getConfig: FieldFormatsGetConfigFn = (key: string) => config[key];
+
+  test('default pattern', () => {
+    const formatter = new CurrencyFormat({}, getConfig);
+
+    expect(formatter.convert(12000.23)).toBe('$12,000.23');
+  });
+
+  test('custom pattern', () => {
+    const formatter = new CurrencyFormat({ pattern: '$0.[0]' }, getConfig);
+
+    expect(formatter.convert('12000.23')).toBe('$12000.2');
+  });
+});
--- a/src/plugins/field_formats/common/converters/currency.ts
+++ b/src/plugins/field_formats/common/converters/currency.ts
@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { i18n } from '@kbn/i18n';
+import { NumeralFormat } from './numeral';
+import { FIELD_FORMAT_IDS } from '../types';
+
+/** @public */
+export class CurrencyFormat extends NumeralFormat {
+  static id = FIELD_FORMAT_IDS.CURRENCY;
+  static title = i18n.translate('fieldFormats.currency.title', {
+    defaultMessage: 'Currency',
+  });
+
+  id = CurrencyFormat.id;
+  title = CurrencyFormat.title;
+  allowsNumericalAggregations = true;
+}
--- a/src/plugins/field_formats/common/converters/index.ts
+++ b/src/plugins/field_formats/common/converters/index.ts
@ -8,6 +8,7 @@

 export { UrlFormat } from './url';
 export { BytesFormat } from './bytes';
+export { CurrencyFormat } from './currency';
 export { RelativeDateFormat } from './relative_date';
 export { DurationFormat } from './duration';
 export { GeoPointFormat } from './geo_point';
--- a/src/plugins/field_formats/common/types.ts
+++ b/src/plugins/field_formats/common/types.ts
@ -61,6 +61,7 @@ export enum FIELD_FORMAT_IDS {
  BOOLEAN = 'boolean',
  BYTES = 'bytes',
  COLOR = 'color',
+  CURRENCY = 'currency',
  CUSTOM = 'custom',
  DATE = 'date',
  DATE_NANOS = 'date_nanos',
--- a/src/plugins/vis_types/metric/public/snapshots/to_ast.test.ts.snap
+++ b/src/plugins/vis_types/metric/public/snapshots/to_ast.test.ts.snap
@ -59,7 +59,7 @@ Object {
          false,
        ],
      },
-      "function": "metricVis",
+      "function": "legacyMetricVis",
      "type": "function",
    },
  ],
@ -123,7 +123,7 @@ Object {
          false,
        ],
      },
-      "function": "metricVis",
+      "function": "legacyMetricVis",
      "type": "function",
    },
  ],
--- a/src/plugins/vis_types/metric/public/to_ast.ts
+++ b/src/plugins/vis_types/metric/public/to_ast.ts
@ -52,7 +52,7 @@ export const toExpressionAst: VisToExpressionAst<VisParams> = (vis, params) => {

  const hasColorRanges = colorsRange && colorsRange.length > 1;

-  const metricVis = buildExpressionFunction('metricVis', {
+  const metricVis = buildExpressionFunction('legacyMetricVis', {
    percentageMode,
    colorMode: hasColorRanges ? metricColorMode : ColorMode.None,
    showLabels: labels?.show ?? false,
--- a/test/functional/page_objects/visualize_chart_page.ts
+++ b/test/functional/page_objects/visualize_chart_page.ts
@ -401,7 +401,7 @@ export class VisualizeChartPageObject extends FtrService {

  public async getMetric() {
    const elements = await this.find.allByCssSelector(
-      '[data-test-subj="visualizationLoader"] .mtrVis__container'
+      '[data-test-subj="visualizationLoader"] .legacyMtrVis__container'
    );
    const values = await Promise.all(
      elements.map(async (element) => {
--- a/test/functional/page_objects/visualize_editor_page.ts
+++ b/test/functional/page_objects/visualize_editor_page.ts
@ -477,7 +477,7 @@ export class VisualizeEditorPageObject extends FtrService {

  public async clickMetricByIndex(index: number) {
    const metrics = await this.find.allByCssSelector(
-      '[data-test-subj="visualizationLoader"] .mtrVis .mtrVis__container'
+      '[data-test-subj="visualizationLoader"] .legacyMtrVis .legacyMtrVis__container'
    );
    expect(metrics.length).greaterThan(index);
    await metrics[index].click();
--- a/test/functional/services/dashboard/expectations.ts
+++ b/test/functional/services/dashboard/expectations.ts
@ -191,7 +191,7 @@ export class DashboardExpectService extends FtrService {

  async metricValuesExist(values: string[]) {
    this.log.debug(`DashboardExpect.metricValuesExist(${values})`);
-    await this.textWithinCssElementExists(values, '.mtrVis__value');
+    await this.textWithinCssElementExists(values, '.legacyMtrVis__value');
  }

  async tsvbMetricValuesExist(values: string[]) {
--- a/test/interpreter_functional/snapshots/baseline/combined_test3.json
+++ b/test/interpreter_functional/snapshots/baseline/combined_test3.json
@ -1 +1 @@
-{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visType":"metric"}}
+{"as":"legacyMetricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visType":"metric"}}
--- a/test/interpreter_functional/snapshots/baseline/final_output_test.json
+++ b/test/interpreter_functional/snapshots/baseline/final_output_test.json
@ -1 +1 @@
-{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visType":"metric"}}
+{"as":"legacyMetricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visType":"metric"}}
--- a/test/interpreter_functional/snapshots/baseline/metric_all_data.json
+++ b/test/interpreter_functional/snapshots/baseline/metric_all_data.json
@ -1 +1 @@
-{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":2,"format":{"id":"bytes","params":null},"type":"vis_dimension"},"metrics":[{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"datatable"},"visType":"metric"}}
+{"as":"legacyMetricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":2,"format":{"id":"bytes","params":null},"type":"vis_dimension"},"metrics":[{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"datatable"},"visType":"metric"}}
--- a/test/interpreter_functional/snapshots/baseline/metric_empty_data.json
+++ b/test/interpreter_functional/snapshots/baseline/metric_empty_data.json
@ -1 +1 @@
-{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[],"type":"datatable"},"visType":"metric"}}
+{"as":"legacyMetricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[],"type":"datatable"},"visType":"metric"}}
--- a/test/interpreter_functional/snapshots/baseline/metric_invalid_data.json
+++ b/test/interpreter_functional/snapshots/baseline/metric_invalid_data.json
@ -1 +1 @@
-"[metricVis] > [visdimension] > Provided column name or index is invalid: 0"
+"[legacyMetricVis] > [visdimension] > Provided column name or index is invalid: 0"
--- a/test/interpreter_functional/snapshots/baseline/metric_multi_metric_data.json
+++ b/test/interpreter_functional/snapshots/baseline/metric_multi_metric_data.json
@ -1 +1 @@
-{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"},{"accessor":1,"format":{"id":"number"},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"datatable"},"visType":"metric"}}
+{"as":"legacyMetricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"},{"accessor":1,"format":{"id":"number"},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"datatable"},"visType":"metric"}}
--- a/test/interpreter_functional/snapshots/baseline/metric_percentage_mode.json
+++ b/test/interpreter_functional/snapshots/baseline/metric_percentage_mode.json
@ -1 +1 @@
-{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":{"colors":["rgb(0,0,0,0)","rgb(100, 100, 100)"],"continuity":"none","gradient":false,"range":"number","rangeMax":10000,"rangeMin":0,"stops":[0,10000]},"percentageMode":true,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"datatable"},"visType":"metric"}}
+{"as":"legacyMetricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":{"colors":["rgb(0,0,0,0)","rgb(100, 100, 100)"],"continuity":"none","gradient":false,"range":"number","rangeMax":10000,"rangeMin":0,"stops":[0,10000]},"percentageMode":true,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"datatable"},"visType":"metric"}}
--- a/test/interpreter_functional/snapshots/baseline/metric_single_metric_data.json
+++ b/test/interpreter_functional/snapshots/baseline/metric_single_metric_data.json
@ -1 +1 @@
-{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"datatable"},"visType":"metric"}}
+{"as":"legacyMetricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"datatable"},"visType":"metric"}}
--- a/test/interpreter_functional/snapshots/baseline/partial_test_2.json
+++ b/test/interpreter_functional/snapshots/baseline/partial_test_2.json
@ -1 +1 @@
-{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visType":"metric"}}
+{"as":"legacyMetricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visType":"metric"}}
--- a/test/interpreter_functional/snapshots/baseline/step_output_test3.json
+++ b/test/interpreter_functional/snapshots/baseline/step_output_test3.json
@ -1 +1 @@
-{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visType":"metric"}}
+{"as":"legacyMetricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visType":"metric"}}
--- a/test/interpreter_functional/snapshots/session/combined_test3.json
+++ b/test/interpreter_functional/snapshots/session/combined_test3.json
@ -1 +1 @@
-{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visType":"metric"}}
+{"as":"legacyMetricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visType":"metric"}}
--- a/test/interpreter_functional/snapshots/session/final_output_test.json
+++ b/test/interpreter_functional/snapshots/session/final_output_test.json
@ -1 +1 @@
-{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visType":"metric"}}
+{"as":"legacyMetricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visType":"metric"}}
--- a/test/interpreter_functional/snapshots/session/metric_all_data.json
+++ b/test/interpreter_functional/snapshots/session/metric_all_data.json
@ -1 +1 @@
-{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":2,"format":{"id":"bytes","params":null},"type":"vis_dimension"},"metrics":[{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"datatable"},"visType":"metric"}}
+{"as":"legacyMetricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":2,"format":{"id":"bytes","params":null},"type":"vis_dimension"},"metrics":[{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"datatable"},"visType":"metric"}}
--- a/test/interpreter_functional/snapshots/session/metric_empty_data.json
+++ b/test/interpreter_functional/snapshots/session/metric_empty_data.json
@ -1 +1 @@
-{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[],"type":"datatable"},"visType":"metric"}}
+{"as":"legacyMetricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[],"type":"datatable"},"visType":"metric"}}
--- a/test/interpreter_functional/snapshots/session/metric_multi_metric_data.json
+++ b/test/interpreter_functional/snapshots/session/metric_multi_metric_data.json
@ -1 +1 @@
-{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"},{"accessor":1,"format":{"id":"number"},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"datatable"},"visType":"metric"}}
+{"as":"legacyMetricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"},{"accessor":1,"format":{"id":"number"},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"datatable"},"visType":"metric"}}
--- a/test/interpreter_functional/snapshots/session/metric_percentage_mode.json
+++ b/test/interpreter_functional/snapshots/session/metric_percentage_mode.json
@ -1 +1 @@
-{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":{"colors":["rgb(0,0,0,0)","rgb(100, 100, 100)"],"continuity":"none","gradient":false,"range":"number","rangeMax":10000,"rangeMin":0,"stops":[0,10000]},"percentageMode":true,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"datatable"},"visType":"metric"}}
+{"as":"legacyMetricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":{"colors":["rgb(0,0,0,0)","rgb(100, 100, 100)"],"continuity":"none","gradient":false,"range":"number","rangeMax":10000,"rangeMin":0,"stops":[0,10000]},"percentageMode":true,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"datatable"},"visType":"metric"}}
--- a/test/interpreter_functional/snapshots/session/metric_single_metric_data.json
+++ b/test/interpreter_functional/snapshots/session/metric_single_metric_data.json
@ -1 +1 @@
-{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"datatable"},"visType":"metric"}}
+{"as":"legacyMetricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"datatable"},"visType":"metric"}}
--- a/test/interpreter_functional/snapshots/session/partial_test_2.json
+++ b/test/interpreter_functional/snapshots/session/partial_test_2.json
@ -1 +1 @@
-{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visType":"metric"}}
+{"as":"legacyMetricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visType":"metric"}}
--- a/test/interpreter_functional/snapshots/session/step_output_test3.json
+++ b/test/interpreter_functional/snapshots/session/step_output_test3.json
@ -1 +1 @@
-{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visType":"metric"}}
+{"as":"legacyMetricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"colorFullBackground":false,"labels":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"emptyAsNull":false},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"meta":{"source":"logstash-*","statistics":{"totalCount":14004},"type":"esaggs"},"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visType":"metric"}}
--- a/test/interpreter_functional/test_suites/run_pipeline/basic.ts
+++ b/test/interpreter_functional/test_suites/run_pipeline/basic.ts
@ -46,7 +46,7 @@ export default function ({
      const expression = `kibana | kibana_context | esaggs index={indexPatternLoad id='logstash-*'}
        aggs={aggCount id="1" enabled=true schema="metric"}
        aggs={aggTerms id="2" enabled=true schema="segment" field="response.raw" size=4 order="desc" orderBy="1"}
-        | metricVis metric={visdimension 1 format="number"} bucket={visdimension 0}
+        | legacyMetricVis metric={visdimension 1 format="number"} bucket={visdimension 0}
      `;

      // we can execute an expression and validate the result manually:
@ -94,7 +94,7 @@ export default function ({
          await expectExpression('partial_test_1', tagCloudExpr, context).toMatchSnapshot()
        ).toMatchScreenshot();

-        const metricExpr = `metricVis metric={visdimension 1 format="number"} bucket={visdimension 0}`;
+        const metricExpr = `legacyMetricVis metric={visdimension 1 format="number"} bucket={visdimension 0}`;
        await (
          await expectExpression('partial_test_2', metricExpr, context).toMatchSnapshot()
        ).toMatchScreenshot();
--- a/test/interpreter_functional/test_suites/run_pipeline/metric.ts
+++ b/test/interpreter_functional/test_suites/run_pipeline/metric.ts
@ -14,7 +14,7 @@ export default function ({
  updateBaselines,
 }: FtrProviderContext & { updateBaselines: boolean }) {
  let expectExpression: ExpectExpression;
-  describe('metricVis pipeline expression tests', () => {
+  describe('legacyMetricVis pipeline expression tests', () => {
    before(() => {
      expectExpression = expectExpressionProvider({ getService, updateBaselines });
    });
@ -31,7 +31,7 @@ export default function ({
      });

      it('with empty data', async () => {
-        const expression = 'metricVis metric={visdimension 0}';
+        const expression = 'legacyMetricVis metric={visdimension 0}';
        await (
          await expectExpression('metric_empty_data', expression, {
            ...dataContext,
@ -41,7 +41,7 @@ export default function ({
      });

      it('with single metric data', async () => {
-        const expression = 'metricVis metric={visdimension 0}';
+        const expression = 'legacyMetricVis metric={visdimension 0}';
        await (
          await expectExpression(
            'metric_single_metric_data',
@ -52,7 +52,7 @@ export default function ({
      });

      it('with multiple metric data', async () => {
-        const expression = 'metricVis metric={visdimension 0} metric={visdimension 1}';
+        const expression = 'legacyMetricVis metric={visdimension 0} metric={visdimension 1}';
        await (
          await expectExpression(
            'metric_multi_metric_data',
@ -63,7 +63,7 @@ export default function ({
      });

      it('with metric and bucket data', async () => {
-        const expression = 'metricVis metric={visdimension 0} bucket={visdimension 2}';
+        const expression = 'legacyMetricVis metric={visdimension 0} bucket={visdimension 2}';
        await (
          await expectExpression('metric_all_data', expression, dataContext).toMatchSnapshot()
        ).toMatchScreenshot();
@ -71,7 +71,7 @@ export default function ({

      it('with percentageMode option', async () => {
        const expression =
-          'metricVis metric={visdimension 0} percentageMode=true \
+          'legacyMetricVis metric={visdimension 0} percentageMode=true \
            palette={palette stop=0 color="rgb(0,0,0,0)" stop=10000 color="rgb(100, 100, 100)" range="number" continuity="none"}';
        await (
          await expectExpression(
@ -85,7 +85,7 @@ export default function ({

    describe('throws error at metric', () => {
      it('with invalid data', async () => {
-        const expression = 'metricVis metric={visdimension 0}';
+        const expression = 'legacyMetricVis metric={visdimension 0}';
        await (
          await expectExpression('metric_invalid_data', expression).toMatchSnapshot()
        ).toMatchScreenshot();
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@ -55,6 +55,8 @@
      "@kbn/expression-gauge-plugin/*": ["src/plugins/chart_expressions/expression_gauge/*"],
      "@kbn/expression-heatmap-plugin": ["src/plugins/chart_expressions/expression_heatmap"],
      "@kbn/expression-heatmap-plugin/*": ["src/plugins/chart_expressions/expression_heatmap/*"],
+      "@kbn/expression-legacy-metric-vis-plugin": ["src/plugins/chart_expressions/expression_legacy_metric"],
+      "@kbn/expression-legacy-metric-vis-plugin/*": ["src/plugins/chart_expressions/expression_legacy_metric/*"],
      "@kbn/expression-metric-vis-plugin": ["src/plugins/chart_expressions/expression_metric"],
      "@kbn/expression-metric-vis-plugin/*": ["src/plugins/chart_expressions/expression_metric/*"],
      "@kbn/expression-partition-vis-plugin": ["src/plugins/chart_expressions/expression_partition_vis"],
--- a/x-pack/plugins/canvas/canvas_plugin_src/elements/index.ts
+++ b/x-pack/plugins/canvas/canvas_plugin_src/elements/index.ts
@ -32,6 +32,7 @@ import { verticalBarChart } from './vert_bar_chart';
 import { verticalProgressBar } from './vertical_progress_bar';
 import { verticalProgressPill } from './vertical_progress_pill';
 import { tagCloud } from './tag_cloud';
+import { legacyMetricVis } from './metric_vis_legacy';
 import { metricVis } from './metric_vis';
 import { heatmap } from './heatmap';

@ -80,5 +81,5 @@ export const initializeElements: SetupInitializer<ElementFactory[]> = (core, plu
 // For testing purpose. Will be removed after exposing `metricVis` element.
 export const initializeElementsSpec: SetupInitializer<ElementFactory[]> = (core, plugins) => {
  const specs = initializeElements(core, plugins);
-  return [...applyElementStrings([metricVis]), ...specs];
+  return [...applyElementStrings([metricVis, legacyMetricVis]), ...specs];
 };
--- a/x-pack/plugins/canvas/canvas_plugin_src/elements/metric_vis/index.ts
+++ b/x-pack/plugins/canvas/canvas_plugin_src/elements/metric_vis/index.ts
@ -4,18 +4,18 @@
 * 2.0; you may not use this file except in compliance with the Elastic License
 * 2.0.
 */
+
 import { ElementFactory } from '../../../types';

 export const metricVis: ElementFactory = () => ({
  name: 'metricVis',
-  displayName: '(New) Metric Vis',
+  displayName: 'Metric Vis',
  type: 'chart',
  help: 'Metric visualization',
  icon: 'visMetric',
  expression: `kibana
-| selectFilter
-| demodata
-| head 1
-| metricVis metric={visdimension "percent_uptime"} colorMode="Labels"
-| render`,
+  | selectFilter
+  | demodata
+  | head 1
+  | metricVis metric="cost"`,
 });
--- a/x-pack/plugins/canvas/canvas_plugin_src/elements/metric_vis_legacy/index.ts
+++ b/x-pack/plugins/canvas/canvas_plugin_src/elements/metric_vis_legacy/index.ts
@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { ElementFactory } from '../../../types';
+
+export const legacyMetricVis: ElementFactory = () => ({
+  name: 'legacyMetricVis',
+  displayName: 'Legacy metric Vis',
+  type: 'chart',
+  help: 'Legacy metric visualization',
+  icon: 'visMetric',
+  expression: `kibana
+| selectFilter
+| demodata
+| head 1
+| legacyMetricVis metric={visdimension "percent_uptime"} colorMode="Labels"
+| render`,
+});
--- a/x-pack/plugins/canvas/canvas_plugin_src/uis/models/metric_vis.ts
+++ b/x-pack/plugins/canvas/canvas_plugin_src/uis/models/metric_vis.ts
@ -14,7 +14,7 @@ import { getState, getValue } from '../../../public/lib/resolved_arg';
 const { MetricVis: strings } = ViewStrings;

 export const metricVis = () => ({
-  name: 'metricVis',
+  name: 'legacyMetricVis',
  displayName: strings.getDisplayName(),
  args: [
    {
--- a/x-pack/plugins/canvas/i18n/elements/element_strings.test.ts
+++ b/x-pack/plugins/canvas/i18n/elements/element_strings.test.ts
@ -21,7 +21,9 @@ describe('ElementStrings', () => {
  });

  test('All string definitions should correspond to an existing element', () => {
-    stringKeys.forEach((key) => expect(elementNames).toContain(key));
+    stringKeys.forEach((key) => {
+      expect(elementNames).toContain(key);
+    });
  });

  const strings = Object.values(elementStrings);
--- a/x-pack/plugins/canvas/i18n/elements/element_strings.ts
+++ b/x-pack/plugins/canvas/i18n/elements/element_strings.ts
@ -232,12 +232,20 @@ export const getElementStrings = (): ElementStringDict => ({
  },
  metricVis: {
    displayName: i18n.translate('xpack.canvas.elements.metricVisDisplayName', {
-      defaultMessage: '(New) Metric Vis',
+      defaultMessage: 'Metric',
    }),
    help: i18n.translate('xpack.canvas.elements.metricVisHelpText', {
      defaultMessage: 'Metric visualization',
    }),
  },
+  legacyMetricVis: {
+    displayName: i18n.translate('xpack.canvas.elements.legacyMetricVisDisplayName', {
+      defaultMessage: 'Legacy Metric Vis',
+    }),
+    help: i18n.translate('xpack.canvas.elements.legacyMetricVisHelpText', {
+      defaultMessage: 'Legacy metric visualization. We recommend using metricVis instead.',
+    }),
+  },
  heatmap: {
    displayName: i18n.translate('xpack.canvas.elements.heatmapDisplayName', {
      defaultMessage: 'Heatmap',
--- a/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts
+++ b/x-pack/plugins/lens/public/metric_visualization/visualization.test.ts
@ -372,7 +372,7 @@ describe('metric_visualization', () => {
                  true,
                ],
              },
-              "function": "metricVis",
+              "function": "legacyMetricVis",
              "type": "function",
            },
          ],
--- a/x-pack/plugins/lens/public/metric_visualization/visualization.tsx
+++ b/x-pack/plugins/lens/public/metric_visualization/visualization.tsx
@ -105,7 +105,7 @@ const toExpression = (
      ...(datasourceExpression?.chain ?? []),
      {
        type: 'function',
-        function: 'metricVis',
+        function: 'legacyMetricVis',
        arguments: {
          labelPosition: [state?.titlePosition || DEFAULT_TITLE_POSITION],
          font: [
--- a/x-pack/plugins/translations/translations/fr-FR.json
+++ b/x-pack/plugins/translations/translations/fr-FR.json
@ -3462,23 +3462,11 @@
    "expressionMetric.functions.metricHelpText": "Affiche un nombre sur une étiquette.",
    "expressionMetric.renderer.metric.displayName": "Indicateur",
    "expressionMetric.renderer.metric.helpDescription": "Présenter un nombre sur une étiquette",
-    "expressionMetricVis.filterTitle": "Cliquer pour filtrer par champ",
-    "expressionMetricVis.function.autoScale.help": "Activer le scaling automatique",
-    "expressionMetricVis.function.bucket.help": "configuration des dimensions de compartiment",
-    "expressionMetricVis.function.colorFullBackground.help": "Applique la couleur d'arrière-plan sélectionnée à l'intégralité du conteneur de visualisation",
-    "expressionMetricVis.function.colorMode.help": "La partie de l'indicateur à colorer",
    "expressionMetricVis.function.dimension.metric": "Indicateur",
    "expressionMetricVis.function.dimension.splitGroup": "Diviser le groupe",
-    "expressionMetricVis.function.errors.severalMetricsAndColorFullBackgroundSpecified": "La couleur d'arrière-plan intégrale ne peut pas être appliquée à une visualisation contenant plusieurs indicateurs.",
-    "expressionMetricVis.function.errors.splitByBucketAndColorFullBackgroundSpecified": "La couleur d'arrière-plan intégrale ne peut pas être appliquée à des visualisations pour lesquelles un compartiment est spécifié.",
-    "expressionMetricVis.function.font.help": "Paramètres de police.",
    "expressionMetricVis.function.help": "Visualisation de l'indicateur",
-    "expressionMetricVis.function.labelFont.help": "Paramètres de police de l'étiquette.",
-    "expressionMetricVis.function.labelPosition.help": "Position de l'étiquette",
    "expressionMetricVis.function.metric.help": "configuration des dimensions d’indicateur",
    "expressionMetricVis.function.palette.help": "Fournit des couleurs pour les valeurs, basées sur les limites.",
-    "expressionMetricVis.function.percentageMode.help": "Affiche l'indicateur en mode de pourcentage. Nécessite qu’une plage de couleurs soit définie.",
-    "expressionMetricVis.function.showLabels.help": "Affiche les étiquettes sous les valeurs d’indicateur.",
    "expressionPartitionVis.legend.filterForValueButtonAriaLabel": "Filtrer sur la valeur",
    "expressionPartitionVis.legend.filterOptionsLegend": "{legendDataLabel}, options de filtre",
    "expressionPartitionVis.legend.filterOutValueButtonAriaLabel": "Exclure la valeur",
--- a/Show more
+++ b/Show more