[MetricVis] Expression metricVis API update. (#114116)

* Added expressionMetricVis plugin. * splited metric vis_type and expression. * Fixed plugin docs. * updated snapshots. * Added code owner to expressionMetricVis. * updated chart docs. * Added storybook. * Added bucket story. * Added without label story. * Added "with custom font size" story. * Added other stories. * Added DatatableColumn accessors. * Replaced Metric with MetricOptions. * added element to canvas. * Added metric_vis ui model to canvas and removed `useRanges`. * Fixed MetricOptions.any * updated the check of min/max existence. * Updated function/renderer names. metricRenderer -> metricVisRenderer metricFunction -> metricVisFunction * Replaced colorRanges/invertColors/percentageMode with palette. * Replaced legacy colors with palette. * Remove usage of arguments bgFill and subText. * Added mocks for storybook. * removed dead code from `vis_types`. * Support of custom font is added. * Added support of custom labels. * Added multitable support. * Added support of multitable and autoresize. * Cleaned up metric expression and tests * added center to the metric to_ast. * added first_datatable type. * Changed first_datatable to lens_multitable. * Fixed behaviour with rangeMin and rangeMax. * Added fontUnit to the font expression and added pt option to the metricVis expression. * Added comment to the metricVis expression at to_ast of vis_types/metric. Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
2021-11-08 11:12:04 +02:00 · 2021-11-08 11:12:04 +02:00 · d61ae2e4a0
parent fca8cbff6a
commit d61ae2e4a0
65 changed files with 697 additions and 371 deletions
--- a/src/plugins/chart_expressions/expression_metric/.storybook/main.js
+++ b/src/plugins/chart_expressions/expression_metric/.storybook/main.js
@ -12,7 +12,10 @@ import { resolve } from 'path';
 const mockConfig = {
  resolve: {
    alias: {
-      '../format_service': resolve(__dirname, '../public/__mocks__/format_service.ts'),
+      '../../../expression_metric/public/services': resolve(
+        __dirname,
+        '../public/__mocks__/services.ts'
+      ),
    },
  },
 };
--- a/src/plugins/chart_expressions/expression_metric/common/expression_functions/snapshots/metric_vis_function.test.ts.snap
+++ b/src/plugins/chart_expressions/expression_metric/common/expression_functions/snapshots/metric_vis_function.test.ts.snap
@ -6,7 +6,8 @@ Object {
    Object {
      "id": "col-0-1",
      "meta": Object {
-        "dimensionName": undefined,
+        "dimensionName": "Metric",
+        "type": "number",
      },
      "name": "Count",
    },
@ -27,31 +28,55 @@ Object {
  "value": Object {
    "visConfig": Object {
      "dimensions": Object {
-        "metrics": undefined,
+        "metrics": Array [
+          Object {
+            "accessor": 0,
+            "format": Object {
+              "id": "number",
+              "params": Object {},
+            },
+            "type": "vis_dimension",
+          },
+        ],
      },
      "metric": Object {
-        "colorSchema": "Green to Red",
-        "colorsRange": "{range from=0 to=10000}",
-        "invertColors": false,
        "labels": Object {
          "show": true,
        },
-        "metricColorMode": "\\"None\\"",
+        "metricColorMode": "None",
+        "palette": Object {
+          "colors": Array [
+            "rgb(0, 0, 0, 0)",
+            "rgb(112, 38, 231)",
+          ],
+          "gradient": false,
+          "range": "number",
+          "rangeMax": 150,
+          "rangeMin": 0,
+          "stops": Array [
+            0,
+            10000,
+          ],
+        },
        "percentageMode": false,
        "style": Object {
          "bgColor": false,
-          "bgFill": "\\"#000\\"",
-          "fontSize": 60,
+          "css": "",
          "labelColor": false,
-          "subText": "\\"\\"",
+          "spec": Object {
+            "fontSize": "60px",
+          },
+          "type": "style",
        },
-        "useRanges": false,
      },
    },
    "visData": Object {
      "columns": Array [
        Object {
          "id": "col-0-1",
+          "meta": Object {
+            "type": "number",
+          },
          "name": "Count",
        },
      ],
--- a/src/plugins/chart_expressions/expression_metric/common/expression_functions/metric_vis_function.test.ts
+++ b/src/plugins/chart_expressions/expression_metric/common/expression_functions/metric_vis_function.test.ts
@ -13,45 +13,39 @@ import { Datatable } from '../../../../expressions/common/expression_types/specs

 describe('interpreter/functions#metric', () => {
  const fn = functionWrapper(metricVisFunction());
-  const context = {
+  const context: Datatable = {
    type: 'datatable',
    rows: [{ 'col-0-1': 0 }],
-    columns: [{ id: 'col-0-1', name: 'Count' }],
-  } as unknown as Datatable;
-  const args = {
+    columns: [{ id: 'col-0-1', name: 'Count', meta: { type: 'number' } }],
+  };
+  const args: MetricArguments = {
    percentageMode: false,
-    useRanges: false,
-    colorSchema: 'Green to Red',
-    metricColorMode: 'None',
-    colorsRange: [
-      {
-        from: 0,
-        to: 10000,
+    colorMode: 'None',
+    palette: {
+      type: 'palette',
+      name: '',
+      params: {
+        colors: ['rgb(0, 0, 0, 0)', 'rgb(112, 38, 231)'],
+        stops: [0, 10000],
+        gradient: false,
+        rangeMin: 0,
+        rangeMax: 150,
+        range: 'number',
      },
-    ],
-    labels: {
-      show: true,
    },
-    invertColors: false,
-    style: {
-      bgFill: '#000',
-      bgColor: false,
-      labelColor: false,
-      subText: '',
-      fontSize: 60,
-    },
-    font: { spec: { fontSize: 60 } },
-    metrics: [
+    showLabels: true,
+    font: { spec: { fontSize: '60px' }, type: 'style', css: '' },
+    metric: [
      {
+        type: 'vis_dimension',
        accessor: 0,
        format: {
          id: 'number',
+          params: {},
        },
-        params: {},
-        aggType: 'count',
      },
    ],
-  } as unknown as MetricArguments;
+  };

  it('returns an object with the correct structure', () => {
    const actual = fn(context, args, undefined);
--- 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
@ -10,7 +10,7 @@ import { i18n } from '@kbn/i18n';

 import { visType } from '../types';
 import { prepareLogTable, Dimension } from '../../../../visualizations/common/prepare_log_table';
-import { vislibColorMaps, ColorMode } from '../../../../charts/common';
+import { ColorMode } from '../../../../charts/common';
 import { MetricVisExpressionFunctionDefinition } from '../types';
 import { EXPRESSION_METRIC_NAME } from '../constants';

@ -29,43 +29,18 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
        defaultMessage: 'Shows metric in percentage mode. Requires colorRange to be set.',
      }),
    },
-    colorSchema: {
-      types: ['string'],
-      default: '"Green to Red"',
-      options: Object.values(vislibColorMaps).map((value: any) => value.id),
-      help: i18n.translate('expressionMetricVis.function.colorSchema.help', {
-        defaultMessage: 'Color schema to use',
-      }),
-    },
    colorMode: {
      types: ['string'],
-      default: '"None"',
+      default: `"${ColorMode.None}"`,
      options: [ColorMode.None, ColorMode.Labels, ColorMode.Background],
      help: i18n.translate('expressionMetricVis.function.colorMode.help', {
        defaultMessage: 'Which part of metric to color',
      }),
    },
-    colorRange: {
-      types: ['range'],
-      multi: true,
-      default: '{range from=0 to=10000}',
-      help: i18n.translate('expressionMetricVis.function.colorRange.help', {
-        defaultMessage:
-          'A range object specifying groups of values to which different colors should be applied.',
-      }),
-    },
-    useRanges: {
-      types: ['boolean'],
-      default: false,
-      help: i18n.translate('expressionMetricVis.function.useRanges.help', {
-        defaultMessage: 'Enabled color ranges.',
-      }),
-    },
-    invertColors: {
-      types: ['boolean'],
-      default: false,
-      help: i18n.translate('expressionMetricVis.function.invertColors.help', {
-        defaultMessage: 'Inverts the color ranges',
+    palette: {
+      types: ['palette'],
+      help: i18n.translate('expressionMetricVis.function.palette.help', {
+        defaultMessage: 'Provides colors for the values, based on the bounds.',
      }),
    },
    showLabels: {
@ -75,29 +50,12 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
        defaultMessage: 'Shows labels under the metric values.',
      }),
    },
-    bgFill: {
-      types: ['string'],
-      default: '"#000"',
-      aliases: ['backgroundFill', 'bgColor', 'backgroundColor'],
-      help: i18n.translate('expressionMetricVis.function.bgFill.help', {
-        defaultMessage:
-          'Color as html hex code (#123456), html color (red, blue) or rgba value (rgba(255,255,255,1)).',
-      }),
-    },
    font: {
      types: ['style'],
      help: i18n.translate('expressionMetricVis.function.font.help', {
        defaultMessage: 'Font settings.',
      }),
-      default: '{font size=60}',
-    },
-    subText: {
-      types: ['string'],
-      aliases: ['label', 'text', 'description'],
-      default: '""',
-      help: i18n.translate('expressionMetricVis.function.subText.help', {
-        defaultMessage: 'Custom text to show under the metric',
-      }),
+      default: `{font size=60 align="center"}`,
    },
    metric: {
      types: ['vis_dimension'],
@ -115,12 +73,10 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
    },
  },
  fn(input, args, handlers) {
-    if (args.percentageMode && (!args.colorRange || args.colorRange.length === 0)) {
-      throw new Error('colorRange must be provided when using percentageMode');
+    if (args.percentageMode && !args.palette?.params) {
+      throw new Error('Palette must be provided when using percentageMode');
    }

-    const fontSize = Number.parseInt(args.font.spec.fontSize || '', 10);
-
    if (handlers?.inspectorAdapters?.tables) {
      const argsTable: Dimension[] = [
        [
@ -150,21 +106,16 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
        visType,
        visConfig: {
          metric: {
+            palette: args.palette?.params,
            percentageMode: args.percentageMode,
-            useRanges: args.useRanges,
-            colorSchema: args.colorSchema,
            metricColorMode: args.colorMode,
-            colorsRange: args.colorRange,
            labels: {
              show: args.showLabels,
            },
-            invertColors: args.invertColors,
            style: {
-              bgFill: args.bgFill,
              bgColor: args.colorMode === ColorMode.Background,
              labelColor: args.colorMode === ColorMode.Labels,
-              subText: args.subText,
-              fontSize,
+              ...args.font,
            },
          },
          dimensions: {
--- a/src/plugins/chart_expressions/expression_metric/common/types/expression_functions.ts
+++ b/src/plugins/chart_expressions/expression_metric/common/types/expression_functions.ts
@ -9,35 +9,29 @@
 import {
  Datatable,
  ExpressionFunctionDefinition,
-  Range,
  ExpressionValueRender,
  Style,
 } from '../../../../expressions';
 import { ExpressionValueVisDimension } from '../../../../visualizations/common';
-import { ColorSchemas, ColorMode } from '../../../../charts/common';
+import { ColorMode, CustomPaletteState, PaletteOutput } from '../../../../charts/common';
 import { VisParams, visType } from './expression_renderers';
 import { EXPRESSION_METRIC_NAME } from '../constants';

 export interface MetricArguments {
  percentageMode: boolean;
-  colorSchema: ColorSchemas;
  colorMode: ColorMode;
-  useRanges: boolean;
-  invertColors: boolean;
  showLabels: boolean;
-  bgFill: string;
-  subText: string;
-  colorRange: Range[];
+  palette?: PaletteOutput<CustomPaletteState>;
  font: Style;
  metric: ExpressionValueVisDimension[];
-  bucket: ExpressionValueVisDimension;
+  bucket?: ExpressionValueVisDimension;
 }

 export type MetricInput = Datatable;

 export interface MetricVisRenderConfig {
  visType: typeof visType;
-  visData: MetricInput;
+  visData: Datatable;
  visConfig: Pick<VisParams, 'metric' | 'dimensions'>;
 }

--- a/src/plugins/chart_expressions/expression_metric/common/types/expression_renderers.ts
+++ b/src/plugins/chart_expressions/expression_metric/common/types/expression_renderers.ts
@ -5,9 +5,15 @@
 * in compliance with, at your election, the Elastic License 2.0 or the Server
 * Side Public License, v 1.
 */
-import { Range } from '../../../../expressions/common';
+
 import { ExpressionValueVisDimension } from '../../../../visualizations/common';
-import { ColorMode, Labels, Style, ColorSchemas } from '../../../../charts/common';
+import {
+  ColorMode,
+  Labels,
+  CustomPaletteState,
+  Style as ChartStyle,
+} from '../../../../charts/common';
+import { Style } from '../../../../expressions/common';

 export const visType = 'metric';

@ -16,16 +22,14 @@ export interface DimensionsVisParam {
  bucket?: ExpressionValueVisDimension;
 }

+export type MetricStyle = Style & Pick<ChartStyle, 'bgColor' | 'labelColor'>;
 export interface MetricVisParam {
  percentageMode: boolean;
  percentageFormatPattern?: string;
-  useRanges: boolean;
-  colorSchema: ColorSchemas;
  metricColorMode: ColorMode;
-  colorsRange: Range[];
+  palette?: CustomPaletteState;
  labels: Labels;
-  invertColors: boolean;
-  style: Style;
+  style: MetricStyle;
 }

 export interface VisParams {
@ -42,5 +46,4 @@ export interface MetricOptions {
  color?: string;
  bgColor?: string;
  lightText: boolean;
-  rowIndex: number;
 }
--- a/src/plugins/chart_expressions/expression_metric/public/mocks/palette_service.ts
+++ b/src/plugins/chart_expressions/expression_metric/public/mocks/palette_service.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 { CustomPaletteState } from 'src/plugins/charts/common';
+
+export const getPaletteService = () => {
+  return {
+    get: (paletteName: string) => ({
+      getColorForValue: (value: number, params: CustomPaletteState) => {
+        const { colors = [], stops = [] } = params ?? {};
+        const lessThenValueIndex = stops.findIndex((stop) => value <= stop);
+        return colors[lessThenValueIndex];
+      },
+    }),
+  };
+};
--- a/src/plugins/chart_expressions/expression_metric/public/mocks/services.ts
+++ b/src/plugins/chart_expressions/expression_metric/public/mocks/services.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 } from './format_service';
+export { getPaletteService } from './palette_service';
--- a/src/plugins/chart_expressions/expression_metric/public/stories/metric_renderer.stories.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/stories/metric_renderer.stories.tsx
@ -9,11 +9,31 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { ExpressionValueVisDimension } from '../../../../visualizations/common';
-import { DatatableColumn, Range } from '../../../../expressions';
+import { Datatable, DatatableColumn } from '../../../../expressions';
 import { Render } from '../../../../presentation_util/public/__stories__';
-import { ColorMode, ColorSchemas } from '../../../../charts/common';
+import { ColorMode, CustomPaletteState } from '../../../../charts/common';
 import { metricVisRenderer } from '../expression_renderers';
-import { MetricVisRenderConfig, visType } from '../../common/types';
+import { MetricStyle, MetricVisRenderConfig, visType } from '../../common/types';
+
+const palette: CustomPaletteState = {
+  colors: ['rgb(219 231 38)', 'rgb(112 38 231)', 'rgb(38 124 231)'],
+  stops: [0, 50, 150],
+  gradient: false,
+  rangeMin: 0,
+  rangeMax: 150,
+  range: 'number',
+};
+
+const style: MetricStyle = {
+  spec: { fontSize: '12px' },
+
+  /* stylelint-disable */
+  type: 'style',
+  css: '',
+  bgColor: false,
+  labelColor: false,
+  /* stylelint-enable */
+};

 const config: MetricVisRenderConfig = {
  visType,
@ -35,20 +55,10 @@ const config: MetricVisRenderConfig = {
  },
  visConfig: {
    metric: {
-      percentageMode: false,
-      useRanges: false,
-      colorSchema: ColorSchemas.GreenToRed,
      metricColorMode: ColorMode.None,
-      colorsRange: [],
      labels: { show: true },
-      invertColors: false,
-      style: {
-        bgColor: false,
-        bgFill: '#000',
-        fontSize: 60,
-        labelColor: false,
-        subText: '',
-      },
+      percentageMode: false,
+      style,
    },
    dimensions: {
      metrics: [
@ -102,11 +112,6 @@ const dataWithBuckets = [
  { 'col-0-1': 56, 'col-0-2': 52, 'col-0-3': 'Wednesday' },
 ];

-const colorsRange: Range[] = [
-  { type: 'range', from: 0, to: 50 },
-  { type: 'range', from: 51, to: 150 },
-];
-
 const containerSize = {
  width: '700px',
  height: '700px',
@ -141,7 +146,10 @@ storiesOf('renderers/visMetric', module)
            ...config.visConfig,
            metric: {
              ...config.visConfig.metric,
-              style: { ...config.visConfig.metric.style, fontSize: 120 },
+              style: {
+                ...config.visConfig.metric.style,
+                spec: { ...config.visConfig.metric.style.spec, fontSize: '120px' },
+              },
            },
          },
        }}
@ -159,7 +167,7 @@ storiesOf('renderers/visMetric', module)
            ...config.visConfig,
            metric: {
              ...config.visConfig.metric,
-              colorsRange,
+              palette,
              metricColorMode: ColorMode.Background,
              style: {
                ...config.visConfig.metric.style,
@ -182,7 +190,7 @@ storiesOf('renderers/visMetric', module)
            ...config.visConfig,
            metric: {
              ...config.visConfig.metric,
-              colorsRange,
+              palette,
              metricColorMode: ColorMode.Labels,
              style: {
                ...config.visConfig.metric.style,
@ -205,13 +213,12 @@ storiesOf('renderers/visMetric', module)
            ...config.visConfig,
            metric: {
              ...config.visConfig.metric,
-              colorsRange,
+              palette,
              metricColorMode: ColorMode.Labels,
              style: {
                ...config.visConfig.metric.style,
                labelColor: true,
              },
-              invertColors: true,
            },
          },
        }}
@ -226,8 +233,8 @@ storiesOf('renderers/visMetric', module)
        config={{
          ...config,
          visData: {
-            ...config.visData,
-            columns: [...config.visData.columns, dayColumn],
+            ...(config.visData as Datatable),
+            columns: [...(config.visData as Datatable).columns, dayColumn],
            rows: dataWithBuckets,
          },
          visConfig: {
@ -243,7 +250,7 @@ storiesOf('renderers/visMetric', module)
    return (
      <Render
        renderer={metricVisRenderer}
-        config={{ ...config, visData: { ...config.visData, rows: [] } }}
+        config={{ ...config, visData: { ...config.visData, rows: [] } as Datatable }}
        {...containerSize}
      />
    );
--- a/src/plugins/chart_expressions/expression_metric/public/components/snapshots/metric_component.test.tsx.snap
+++ b/src/plugins/chart_expressions/expression_metric/public/components/snapshots/metric_component.test.tsx.snap
@ -15,6 +15,15 @@ Array [
      }
    }
    showLabel={true}
+    style={
+      Object {
+        "bgColor": false,
+        "css": "",
+        "labelColor": false,
+        "spec": Object {},
+        "type": "style",
+      }
+    }
  />,
  <MetricVisValue
    key="1"
@ -29,6 +38,15 @@ Array [
      }
    }
    showLabel={true}
+    style={
+      Object {
+        "bgColor": false,
+        "css": "",
+        "labelColor": false,
+        "spec": Object {},
+        "type": "style",
+      }
+    }
  />,
 ]
 `;
@ -47,5 +65,14 @@ exports[`MetricVisComponent should render correct structure for single metric 1`
    }
  }
  showLabel={true}
+  style={
+    Object {
+      "bgColor": false,
+      "css": "",
+      "labelColor": false,
+      "spec": Object {},
+      "type": "style",
+    }
+  }
 />
 `;
--- a/src/plugins/chart_expressions/expression_metric/public/components/metric.scss
+++ b/src/plugins/chart_expressions/expression_metric/public/components/metric.scss
@ -6,6 +6,7 @@
 //   mtrChart__legend-isLoading

 .mtrVis {
+  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
--- a/src/plugins/chart_expressions/expression_metric/public/components/metric_component.test.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_component.test.tsx
@ -8,49 +8,64 @@

 import React from 'react';
 import { shallow } from 'enzyme';
-
+import { Datatable } from '../../../../expressions/common';
 import MetricVisComponent, { MetricVisComponentProps } from './metric_component';

-jest.mock('../format_service', () => ({
-  getFormatService: () => ({
-    deserialize: () => {
-      return {
-        convert: (x: unknown) => x,
-      };
-    },
-  }),
+jest.mock('../../../expression_metric/public/services', () => ({
+  getFormatService: () => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const { getFormatService } = require('../__mocks__/services');
+    return getFormatService();
+  },
+  getPaletteService: () => {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const { getPaletteService } = require('../__mocks__/services');
+    return getPaletteService();
+  },
 }));

 type Props = MetricVisComponentProps;

-const baseVisData = {
-  columns: [{ id: 'col-0', name: 'Count' }],
+const visData: Datatable = {
+  type: 'datatable',
+  columns: [{ id: 'col-0', name: 'Count', meta: { type: 'number' } }],
  rows: [{ 'col-0': 4301021 }],
-} as any;
+};

 describe('MetricVisComponent', function () {
-  const visParams = {
-    type: 'metric',
-    addTooltip: false,
-    addLegend: false,
+  const visParams: Props['visParams'] = {
    metric: {
-      colorSchema: 'Green to Red',
-      colorsRange: [{ from: 0, to: 1000 }],
-      style: {},
+      metricColorMode: 'None',
+      percentageMode: false,
+      palette: {
+        colors: ['rgb(0, 0, 0, 0)', 'rgb(112, 38, 231)'],
+        stops: [0, 10000],
+        gradient: false,
+        rangeMin: 0,
+        rangeMax: 1000,
+        range: 'number',
+      },
+      style: {
+        type: 'style',
+        spec: {},
+        css: '',
+        bgColor: false,
+        labelColor: false,
+      },
      labels: {
        show: true,
      },
    },
    dimensions: {
-      metrics: [{ accessor: 0 } as any],
+      metrics: [{ accessor: 0, type: 'vis_dimension', format: { params: {}, id: 'number' } }],
      bucket: undefined,
    },
  };

  const getComponent = (propOverrides: Partial<Props> = {} as Partial<Props>) => {
    const props: Props = {
-      visParams: visParams as any,
-      visData: baseVisData,
+      visParams,
+      visData,
      renderComplete: jest.fn(),
      fireEvent: jest.fn(),
      ...propOverrides,
@ -70,9 +85,10 @@ describe('MetricVisComponent', function () {
  it('should render correct structure for multi-value metrics', function () {
    const component = getComponent({
      visData: {
+        type: 'datatable',
        columns: [
-          { id: 'col-0', name: '1st percentile of bytes' },
-          { id: 'col-1', name: '99th percentile of bytes' },
+          { id: 'col-0', name: '1st percentile of bytes', meta: { type: 'number' } },
+          { id: 'col-1', name: '99th percentile of bytes', meta: { type: 'number' } },
        ],
        rows: [{ 'col-0': 182, 'col-1': 445842.4634666484 }],
      },
@ -80,10 +96,13 @@ describe('MetricVisComponent', function () {
        ...visParams,
        dimensions: {
          ...visParams.dimensions,
-          metrics: [{ accessor: 0 }, { accessor: 1 }],
+          metrics: [
+            { accessor: 0, type: 'vis_dimension', format: { id: 'number', params: {} } },
+            { accessor: 1, type: 'vis_dimension', format: { id: 'number', params: {} } },
+          ],
        },
      },
-    } as any);
+    });

    expect(component).toMatchSnapshot();
  });
--- a/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx
@ -6,161 +6,92 @@
 * Side Public License, v 1.
 */

-import { last, findIndex, isNaN } from 'lodash';
 import React, { Component } from 'react';
-import { isColorDark } from '@elastic/eui';
 import { MetricVisValue } from './metric_value';
-import { MetricInput, VisParams, MetricOptions } from '../../common/types';
-import type { FieldFormatsContentType, IFieldFormat } from '../../../../field_formats/common';
+import { VisParams, MetricOptions } from '../../common/types';
+import type { IFieldFormat } from '../../../../field_formats/common';
 import { Datatable } from '../../../../expressions/public';
-import { getHeatmapColors } from '../../../../charts/public';
-import { getFormatService } from '../format_service';
+import { CustomPaletteState } from '../../../../charts/public';
+import { getFormatService, getPaletteService } from '../../../expression_metric/public/services';
 import { ExpressionValueVisDimension } from '../../../../visualizations/public';
+import { formatValue, shouldApplyColor } from '../utils';
+import { getColumnByAccessor } from '../utils/accessor';
+import { needsLightText } from '../utils/palette';

 import './metric.scss';

 export interface MetricVisComponentProps {
  visParams: Pick<VisParams, 'metric' | 'dimensions'>;
-  visData: MetricInput;
+  visData: Datatable;
  fireEvent: (event: any) => void;
  renderComplete: () => void;
 }

 class MetricVisComponent extends Component<MetricVisComponentProps> {
-  private getLabels() {
-    const config = this.props.visParams.metric;
-    const isPercentageMode = config.percentageMode;
-    const colorsRange = config.colorsRange;
-    const max = last(colorsRange)?.to ?? 1;
-    const labels: string[] = [];
-
-    colorsRange.forEach((range: any) => {
-      const from = isPercentageMode ? Math.round((100 * range.from) / max) : range.from;
-      const to = isPercentageMode ? Math.round((100 * range.to) / max) : range.to;
-      labels.push(`${from} - ${to}`);
+  private getColor(value: number, paletteParams: CustomPaletteState) {
+    return getPaletteService().get('custom')?.getColorForValue?.(value, paletteParams, {
+      min: paletteParams.rangeMin,
+      max: paletteParams.rangeMax,
    });
-    return labels;
-  }
-
-  private getColors() {
-    const config = this.props.visParams.metric;
-    const invertColors = config.invertColors;
-    const colorSchema = config.colorSchema;
-    const colorsRange = config.colorsRange;
-    const labels = this.getLabels();
-    const colors: any = {};
-    for (let i = 0; i < labels.length; i += 1) {
-      const divider = Math.max(colorsRange.length - 1, 1);
-      const val = invertColors ? 1 - i / divider : i / divider;
-      colors[labels[i]] = getHeatmapColors(val, colorSchema);
-    }
-    return colors;
-  }
-
-  private getBucket(val: number) {
-    const config = this.props.visParams.metric;
-    let bucket = findIndex(config.colorsRange, (range: any) => {
-      return range.from <= val && range.to > val;
-    });
-
-    if (bucket === -1) {
-      if (config.colorsRange?.[0] && val < config.colorsRange?.[0].from) bucket = 0;
-      else bucket = config.colorsRange.length - 1;
-    }
-
-    return bucket;
-  }
-
-  private getColor(val: number, labels: string[], colors: { [label: string]: string }) {
-    const bucket = this.getBucket(val);
-    const label = labels[bucket];
-    return colors[label];
-  }
-
-  private needsLightText(bgColor: string) {
-    const colors = /rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/.exec(bgColor);
-    if (!colors) {
-      return false;
-    }
-
-    const [red, green, blue] = colors.slice(1).map((c) => parseInt(c, 10));
-    return isColorDark(red, green, blue);
-  }
-
-  private getFormattedValue = (
-    fieldFormatter: IFieldFormat,
-    value: any,
-    format: FieldFormatsContentType = 'text'
-  ) => {
-    if (isNaN(value)) return '-';
-    return fieldFormatter.convert(value, format);
-  };
-
-  private getColumn(
-    accessor: ExpressionValueVisDimension['accessor'],
-    columns: Datatable['columns'] = []
-  ) {
-    if (typeof accessor === 'number') {
-      return columns[accessor];
-    }
-    return columns.filter(({ id }) => accessor.id === id)[0];
  }

  private processTableGroups(table: Datatable) {
    const { metric: metricConfig, dimensions } = this.props.visParams;
-    const { percentageMode: isPercentageMode, colorsRange, style } = metricConfig;
-    const min = colorsRange?.[0]?.from;
-    const max = last(colorsRange)?.to;
-    const colors = this.getColors();
-    const labels = this.getLabels();
-    const metrics: MetricOptions[] = [];
+    const { percentageMode: isPercentageMode, style, palette } = metricConfig;
+    const { stops = [] } = palette ?? {};
+    const min = stops[0];
+    const max = stops[stops.length - 1];

    let bucketColumnId: string;
    let bucketFormatter: IFieldFormat;

    if (dimensions.bucket) {
-      bucketColumnId = this.getColumn(dimensions.bucket.accessor, table.columns).id;
+      bucketColumnId = getColumnByAccessor(dimensions.bucket.accessor, table.columns).id;
      bucketFormatter = getFormatService().deserialize(dimensions.bucket.format);
    }

-    dimensions.metrics.forEach((metric: ExpressionValueVisDimension) => {
-      const column = this.getColumn(metric.accessor, table?.columns);
-      const formatter = getFormatService().deserialize(metric.format);
-      table.rows.forEach((row, rowIndex) => {
-        let title = column.name;
-        let value: number = row[column.id];
-        const color = this.getColor(value, labels, colors);
+    return dimensions.metrics.reduce(
+      (acc: MetricOptions[], metric: ExpressionValueVisDimension) => {
+        const column = getColumnByAccessor(metric.accessor, table?.columns);
+        const formatter = getFormatService().deserialize(metric.format);
+        const metrics = table.rows.map((row, rowIndex) => {
+          let title = column.name;
+          let value: number = row[column.id];
+          const color = palette ? this.getColor(value, palette) : undefined;

-        if (isPercentageMode && colorsRange?.length && max !== undefined && min !== undefined) {
-          value = (value - min) / (max - min);
-        }
-        const formattedValue = this.getFormattedValue(formatter, value, 'html');
-        if (bucketColumnId) {
-          const bucketValue = this.getFormattedValue(bucketFormatter, row[bucketColumnId]);
-          title = `${bucketValue} - ${title}`;
-        }
+          if (isPercentageMode && stops.length) {
+            value = (value - min) / (max - min);
+          }

-        const shouldColor = colorsRange && colorsRange.length > 1;
+          const formattedValue = formatValue(value, formatter, 'html');
+          if (bucketColumnId) {
+            const bucketValue = formatValue(row[bucketColumnId], bucketFormatter);
+            title = `${bucketValue} - ${title}`;
+          }

-        metrics.push({
-          label: title,
-          value: formattedValue,
-          color: shouldColor && style.labelColor ? color : undefined,
-          bgColor: shouldColor && style.bgColor ? color : undefined,
-          lightText: shouldColor && style.bgColor && this.needsLightText(color),
-          rowIndex,
+          const shouldBrush = stops.length > 1 && shouldApplyColor(color ?? '');
+          return {
+            label: title,
+            value: formattedValue,
+            color: shouldBrush && (style.labelColor ?? false) ? color : undefined,
+            bgColor: shouldBrush && (style.bgColor ?? false) ? color : undefined,
+            lightText: shouldBrush && (style.bgColor ?? false) && needsLightText(color),
+            rowIndex,
+          };
        });
-      });
-    });

-    return metrics;
+        return [...acc, ...metrics];
+      },
+      []
+    );
  }

-  private filterBucket = (metric: MetricOptions) => {
-    const dimensions = this.props.visParams.dimensions;
+  private filterBucket = (row: number) => {
+    const { dimensions } = this.props.visParams;
    if (!dimensions.bucket) {
      return;
    }
+
    const table = this.props.visData;
    this.props.fireEvent({
      name: 'filterBucket',
@ -169,7 +100,7 @@ class MetricVisComponent extends Component<MetricVisComponentProps> {
          {
            table,
            column: dimensions.bucket.accessor,
-            row: metric.rowIndex,
+            row,
          },
        ],
      },
@ -181,8 +112,10 @@ class MetricVisComponent extends Component<MetricVisComponentProps> {
      <MetricVisValue
        key={index}
        metric={metric}
-        fontSize={this.props.visParams.metric.style.fontSize}
-        onFilter={this.props.visParams.dimensions.bucket ? this.filterBucket : undefined}
+        style={this.props.visParams.metric.style}
+        onFilter={
+          this.props.visParams.dimensions.bucket ? () => this.filterBucket(index) : undefined
+        }
        showLabel={this.props.visParams.metric.labels.show}
      />
    );
--- a/src/plugins/chart_expressions/expression_metric/public/components/metric_value.test.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_value.test.tsx
@ -10,33 +10,44 @@ import React from 'react';
 import { shallow } from 'enzyme';

 import { MetricVisValue } from './metric_value';
+import { MetricOptions, MetricStyle } from '../../common/types';

-const baseMetric = { label: 'Foo', value: 'foo' } as any;
+const baseMetric: MetricOptions = { label: 'Foo', value: 'foo', lightText: false };
+const font: MetricStyle = {
+  spec: { fontSize: '12px' },
+
+  /* stylelint-disable */
+  type: 'style',
+  css: '',
+  bgColor: false,
+  labelColor: false,
+  /* stylelint-enable */
+};

 describe('MetricVisValue', () => {
  it('should be wrapped in button if having a click listener', () => {
    const component = shallow(
-      <MetricVisValue fontSize={12} metric={baseMetric} onFilter={() => {}} />
+      <MetricVisValue style={font} metric={baseMetric} onFilter={() => {}} />
    );
    expect(component.find('button').exists()).toBe(true);
  });

  it('should not be wrapped in button without having a click listener', () => {
-    const component = shallow(<MetricVisValue fontSize={12} metric={baseMetric} />);
+    const component = shallow(<MetricVisValue style={font} metric={baseMetric} />);
    expect(component.find('button').exists()).toBe(false);
  });

  it('should add -isfilterable class if onFilter is provided', () => {
    const onFilter = jest.fn();
    const component = shallow(
-      <MetricVisValue fontSize={12} metric={baseMetric} onFilter={onFilter} />
+      <MetricVisValue style={font} metric={baseMetric} onFilter={onFilter} />
    );
    component.simulate('click');
    expect(component.find('.mtrVis__container-isfilterable')).toHaveLength(1);
  });

  it('should not add -isfilterable class if onFilter is not provided', () => {
-    const component = shallow(<MetricVisValue fontSize={12} metric={baseMetric} />);
+    const component = shallow(<MetricVisValue style={font} metric={baseMetric} />);
    component.simulate('click');
    expect(component.find('.mtrVis__container-isfilterable')).toHaveLength(0);
  });
@ -44,9 +55,9 @@ describe('MetricVisValue', () => {
  it('should call onFilter callback if provided', () => {
    const onFilter = jest.fn();
    const component = shallow(
-      <MetricVisValue fontSize={12} metric={baseMetric} onFilter={onFilter} />
+      <MetricVisValue style={font} metric={baseMetric} onFilter={onFilter} />
    );
    component.simulate('click');
-    expect(onFilter).toHaveBeenCalledWith(baseMetric);
+    expect(onFilter).toHaveBeenCalled();
  });
 });
--- a/src/plugins/chart_expressions/expression_metric/public/components/metric_value.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_value.tsx
@ -6,19 +6,18 @@
 * Side Public License, v 1.
 */

-import React from 'react';
+import React, { CSSProperties } from 'react';
 import classNames from 'classnames';
-
-import type { MetricOptions } from '../../common/types';
+import type { MetricOptions, MetricStyle } from '../../common/types';

 interface MetricVisValueProps {
  metric: MetricOptions;
-  fontSize: number;
-  onFilter?: (metric: MetricOptions) => void;
+  onFilter?: () => void;
  showLabel?: boolean;
+  style: MetricStyle;
 }

-export const MetricVisValue = ({ fontSize, metric, onFilter, showLabel }: MetricVisValueProps) => {
+export const MetricVisValue = ({ style, metric, onFilter, showLabel }: MetricVisValueProps) => {
  const containerClassName = classNames('mtrVis__container', {
    // eslint-disable-next-line @typescript-eslint/naming-convention
    'mtrVis__container--light': metric.lightText,
@ -31,8 +30,8 @@ export const MetricVisValue = ({ fontSize, metric, onFilter, showLabel }: Metric
      <div
        className="mtrVis__value"
        style={{
-          fontSize: `${fontSize}pt`,
-          color: metric.color,
+          ...(style.spec as CSSProperties),
+          ...(metric.color ? { color: metric.color } : {}),
        }}
        /*
         * Justification for dangerouslySetInnerHTML:
@ -50,7 +49,7 @@ export const MetricVisValue = ({ fontSize, metric, onFilter, showLabel }: Metric

  if (onFilter) {
    return (
-      <button style={{ display: 'block' }} onClick={() => onFilter(metric)}>
+      <button style={{ display: 'block' }} onClick={() => onFilter()}>
        {metricComponent}
      </button>
    );
--- a/src/plugins/chart_expressions/expression_metric/public/plugin.ts
+++ b/src/plugins/chart_expressions/expression_metric/public/plugin.ts
@ -6,16 +6,18 @@
 * Side Public License, v 1.
 */

+import { ChartsPluginSetup } from '../../../charts/public';
 import { CoreSetup, CoreStart, Plugin } from '../../../../core/public';
 import { Plugin as ExpressionsPublicPlugin } from '../../../expressions/public';
 import { metricVisFunction } from '../common';
-import { setFormatService } from './format_service';
+import { setFormatService, setPaletteService } from './services';
 import { metricVisRenderer } from './expression_renderers';
 import { FieldFormatsStart } from '../../../field_formats/public';

 /** @internal */
 export interface ExpressionMetricPluginSetup {
  expressions: ReturnType<ExpressionsPublicPlugin['setup']>;
+  charts: ChartsPluginSetup;
 }

 /** @internal */
@ -25,9 +27,12 @@ export interface ExpressionMetricPluginStart {

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

  public start(core: CoreStart, { fieldFormats }: ExpressionMetricPluginStart) {
--- a/src/plugins/chart_expressions/expression_metric/public/services/format_service.ts
+++ b/src/plugins/chart_expressions/expression_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 '../../../../kibana_utils/public';
+import { FieldFormatsStart } from '../../../../field_formats/public';
+
+export const [getFormatService, setFormatService] =
+  createGetterSetter<FieldFormatsStart>('fieldFormats');
--- a/src/plugins/chart_expressions/expression_metric/public/services/index.ts
+++ b/src/plugins/chart_expressions/expression_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_metric/public/services/palette_service.ts
+++ b/src/plugins/chart_expressions/expression_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 { createGetterSetter } from '../../../../kibana_utils/public';
+import { PaletteRegistry } from '../../../../charts/public';
+
+export const [getPaletteService, setPaletteService] =
+  createGetterSetter<PaletteRegistry>('palette');
--- a/src/plugins/chart_expressions/expression_metric/public/utils/accessor.ts
+++ b/src/plugins/chart_expressions/expression_metric/public/utils/accessor.ts
@ -0,0 +1,20 @@
+/*
+ * 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 { Datatable } from '../../../../expressions';
+import { ExpressionValueVisDimension } from '../../../../visualizations/common';
+
+export const getColumnByAccessor = (
+  accessor: ExpressionValueVisDimension['accessor'],
+  columns: Datatable['columns'] = []
+) => {
+  if (typeof accessor === 'number') {
+    return columns[accessor];
+  }
+  return columns.filter(({ id }) => accessor.id === id)[0];
+};
--- a/src/plugins/chart_expressions/expression_metric/public/utils/format.ts
+++ b/src/plugins/chart_expressions/expression_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 '../../../../field_formats/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_metric/public/utils/index.ts
+++ b/src/plugins/chart_expressions/expression_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_metric/public/utils/palette.ts
+++ b/src/plugins/chart_expressions/expression_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/charts/common/palette.ts
+++ b/src/plugins/charts/common/palette.ts
@ -8,6 +8,7 @@

 import { ExpressionFunctionDefinition } from 'src/plugins/expressions/common';
 import { i18n } from '@kbn/i18n';
+import { last } from 'lodash';
 import { paletteIds } from './constants';

 export interface CustomPaletteArguments {
@ -141,21 +142,24 @@ export function palette(): ExpressionFunctionDefinition<
      },
    },
    fn: (input, args) => {
-      const {
-        color,
-        continuity,
-        reverse,
-        gradient,
-        stop,
-        range,
-        rangeMin = 0,
-        rangeMax = 100,
-      } = args;
+      const { color, continuity, reverse, gradient, stop, range, rangeMin, rangeMax } = args;
      const colors = ([] as string[]).concat(color || defaultCustomColors);
      const stops = ([] as number[]).concat(stop || []);
      if (stops.length > 0 && colors.length !== stops.length) {
        throw Error('When stop is used, each color must have an associated stop value.');
      }
+
+      // If the user has defined stops, choose rangeMin/Max, provided by user or range,
+      // taken from first/last element of ranges or default range (0 or 100).
+      const calculateRange = (
+        userRange: number | undefined,
+        stopsRange: number | undefined,
+        defaultRange: number
+      ) => userRange ?? stopsRange ?? defaultRange;
+
+      const rangeMinDefault = 0;
+      const rangeMaxDefault = 100;
+
      return {
        type: 'palette',
        name: 'custom',
@ -165,8 +169,8 @@ export function palette(): ExpressionFunctionDefinition<
          range: range ?? 'percent',
          gradient,
          continuity,
-          rangeMin,
-          rangeMax,
+          rangeMin: calculateRange(rangeMin, stops[0], rangeMinDefault),
+          rangeMax: calculateRange(rangeMax, last(stops), rangeMaxDefault),
        },
      };
    },
--- a/src/plugins/expressions/common/expression_functions/specs/font.ts
+++ b/src/plugins/expressions/common/expression_functions/specs/font.ts
@ -9,7 +9,15 @@
 import { i18n } from '@kbn/i18n';
 import { ExpressionFunctionDefinition } from '../types';
 import { openSans, FontLabel as FontFamily } from '../../fonts';
-import { CSSStyle, FontStyle, FontWeight, Style, TextAlignment, TextDecoration } from '../../types';
+import {
+  CSSStyle,
+  FontSizeUnit,
+  FontStyle,
+  FontWeight,
+  Style,
+  TextAlignment,
+  TextDecoration,
+} from '../../types';

 const dashify = (str: string) => {
  return str
@ -39,6 +47,7 @@ export interface FontArguments {
  size?: number;
  underline?: boolean;
  weight?: FontWeight;
+  sizeUnit?: string;
 }

 export type ExpressionFunctionFont = ExpressionFunctionDefinition<
@ -101,10 +110,18 @@ export const font: ExpressionFunctionFont = {
    size: {
      default: `{ theme "font.size" default=14 }`,
      help: i18n.translate('expressions.functions.font.args.sizeHelpText', {
-        defaultMessage: 'The font size in pixels',
+        defaultMessage: 'The font size',
      }),
      types: ['number'],
    },
+    sizeUnit: {
+      default: `px`,
+      help: i18n.translate('expressions.functions.font.args.sizeUnitHelpText', {
+        defaultMessage: 'The font size unit',
+      }),
+      types: ['string'],
+      options: ['px', 'pt'],
+    },
    underline: {
      default: `{ theme "font.underline" default=false }`,
      help: i18n.translate('expressions.functions.font.args.underlineHelpText', {
@ -155,13 +172,25 @@ export const font: ExpressionFunctionFont = {
    // pixel setting
    const lineHeight = args.lHeight != null ? `${args.lHeight}px` : '1';

+    const availableSizeUnits: string[] = [FontSizeUnit.PX, FontSizeUnit.PT];
+    if (args.sizeUnit && !availableSizeUnits.includes(args.sizeUnit)) {
+      throw new Error(
+        i18n.translate('expressions.functions.font.invalidSizeUnitErrorMessage', {
+          defaultMessage: "Invalid size unit: '{sizeUnit}'",
+          values: {
+            sizeUnit: args.sizeUnit,
+          },
+        })
+      );
+    }
+
    const spec: CSSStyle = {
      fontFamily: args.family,
      fontWeight: args.weight,
      fontStyle: args.italic ? FontStyle.ITALIC : FontStyle.NORMAL,
      textDecoration: args.underline ? TextDecoration.UNDERLINE : TextDecoration.NONE,
      textAlign: args.align,
-      fontSize: `${args.size}px`, // apply font size as a pixel setting
+      fontSize: `${args.size}${args.sizeUnit}`,
      lineHeight, // apply line height as a pixel setting
    };

--- a/src/plugins/expressions/common/fonts.ts
+++ b/src/plugins/expressions/common/fonts.ts
@ -92,6 +92,12 @@ export const hoeflerText = createFont({
  value: "'Hoefler Text', Garamond, Georgia, 'Times New Roman', Times, serif",
 });

+export const inter = createFont({
+  label: 'Inter',
+  value:
+    "'Inter', 'Inter UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+});
+
 export const lucidaGrande = createFont({
  label: 'Lucida Grande',
  value: "'Lucida Grande', 'Lucida Sans Unicode', Lucida, Verdana, Helvetica, Arial, sans-serif",
@ -132,6 +138,7 @@ export const fonts = [
  gillSans,
  helveticaNeue,
  hoeflerText,
+  inter,
  lucidaGrande,
  myriad,
  openSans,
--- a/src/plugins/expressions/common/types/style.ts
+++ b/src/plugins/expressions/common/types/style.ts
@ -84,6 +84,11 @@ export enum TextDecoration {
  UNDERLINE = 'underline',
 }

+export enum FontSizeUnit {
+  PX = 'px',
+  PT = 'pt',
+}
+
 /**
 * Represents the various style properties that can be applied to an element.
 */
--- 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
@ -34,6 +34,31 @@ Object {
    },
    Object {
      "arguments": Object {
+        "font": Array [
+          Object {
+            "chain": Array [
+              Object {
+                "arguments": Object {
+                  "align": Array [
+                    "center",
+                  ],
+                  "family": Array [
+                    "'Inter', 'Inter UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+                  ],
+                  "sizeUnit": Array [
+                    "pt",
+                  ],
+                  "weight": Array [
+                    "bold",
+                  ],
+                },
+                "function": "font",
+                "type": "function",
+              },
+            ],
+            "type": "expression",
+          },
+        ],
        "percentageMode": Array [
          true,
        ],
@ -83,6 +108,31 @@ Object {
    },
    Object {
      "arguments": Object {
+        "font": Array [
+          Object {
+            "chain": Array [
+              Object {
+                "arguments": Object {
+                  "align": Array [
+                    "center",
+                  ],
+                  "family": Array [
+                    "'Inter', 'Inter UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
+                  ],
+                  "sizeUnit": Array [
+                    "pt",
+                  ],
+                  "weight": Array [
+                    "bold",
+                  ],
+                },
+                "function": "font",
+                "type": "function",
+              },
+            ],
+            "type": "expression",
+          },
+        ],
        "showLabels": Array [
          false,
        ],
--- a/src/plugins/vis_types/metric/public/to_ast.ts
+++ b/src/plugins/vis_types/metric/public/to_ast.ts
@ -9,11 +9,14 @@
 import { get } from 'lodash';
 import { getVisSchemas, SchemaConfig, VisToExpressionAst } from '../../../visualizations/public';
 import { buildExpression, buildExpressionFunction } from '../../../expressions/public';
+import { inter } from '../../../expressions/common';
+
 import {
  EsaggsExpressionFunctionDefinition,
  IndexPatternLoadExpressionFunctionDefinition,
 } from '../../../data/public';
 import { VisParams } from './types';
+import { getStopsWithColorsFromRanges } from './utils';

 const prepareDimension = (params: SchemaConfig) => {
  const visdimension = buildExpressionFunction('visdimension', { accessor: params.accessor });
@ -43,7 +46,6 @@ export const toExpressionAst: VisToExpressionAst<VisParams> = (vis, params) => {
  const {
    percentageMode,
    percentageFormatPattern,
-    useRanges,
    colorSchema,
    metricColorMode,
    colorsRange,
@ -64,26 +66,32 @@ export const toExpressionAst: VisToExpressionAst<VisParams> = (vis, params) => {

  const metricVis = buildExpressionFunction('metricVis', {
    percentageMode,
-    colorSchema,
    colorMode: metricColorMode,
-    useRanges,
-    invertColors,
    showLabels: labels?.show ?? false,
  });

-  if (style) {
-    metricVis.addArgument('bgFill', style.bgFill);
-    metricVis.addArgument('font', buildExpression(`font size=${style.fontSize}`));
-    metricVis.addArgument('subText', style.subText);
-  }
+  // Pt unit is provided to support the previous view of the metricVis at vis_types editor.
+  // Inter font is defined here to override the default `openSans` font, which comes from the expession.
+  metricVis.addArgument(
+    'font',
+    buildExpression(
+      `font family="${inter.value}" 
+        weight="bold"
+        align="center"
+        sizeUnit="pt"
+        ${style ? `size=${style.fontSize}` : ''}`
+    )
+  );

-  if (colorsRange) {
-    colorsRange.forEach((range: any) => {
-      metricVis.addArgument(
-        'colorRange',
-        buildExpression(`range from=${range.from} to=${range.to}`)
-      );
+  if (colorsRange && colorsRange.length) {
+    const stopsWithColors = getStopsWithColorsFromRanges(colorsRange, colorSchema, invertColors);
+    const palette = buildExpressionFunction('palette', {
+      ...stopsWithColors,
+      range: 'number',
+      continuity: 'none',
    });
+
+    metricVis.addArgument('palette', buildExpression([palette]));
  }

  if (schemas.group) {
--- a/src/plugins/vis_types/metric/public/utils/index.ts
+++ b/src/plugins/vis_types/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 { getStopsWithColorsFromRanges } from './palette';
--- a/src/plugins/vis_types/metric/public/utils/palette.ts
+++ b/src/plugins/vis_types/metric/public/utils/palette.ts
@ -0,0 +1,49 @@
+/*
+ * 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 { ColorSchemas, getHeatmapColors } from '../../../../charts/common';
+import { Range } from '../../../../expressions';
+
+export interface PaletteConfig {
+  color: Array<string | undefined>;
+  stop: number[];
+}
+
+const TRANSPARENT = 'rgb(0, 0, 0, 0)';
+
+const getColor = (
+  index: number,
+  elementsCount: number,
+  colorSchema: ColorSchemas,
+  invertColors: boolean = false
+) => {
+  const divider = Math.max(elementsCount - 1, 1);
+  const value = invertColors ? 1 - index / divider : index / divider;
+  return getHeatmapColors(value, colorSchema);
+};
+
+export const getStopsWithColorsFromRanges = (
+  ranges: Range[],
+  colorSchema: ColorSchemas,
+  invertColors: boolean = false
+) => {
+  return ranges.reduce<PaletteConfig>(
+    (acc, range, index, rangesArr) => {
+      if ((index && range.from !== rangesArr[index - 1].to) || index === 0) {
+        acc.color.push(TRANSPARENT);
+        acc.stop.push(range.from);
+      }
+
+      acc.color.push(getColor(index, rangesArr.length, colorSchema, invertColors));
+      acc.stop.push(range.to);
+
+      return acc;
+    },
+    { color: [], stop: [] }
+  );
+};
--- a/test/interpreter_functional/screenshots/baseline/combined_test.png
+++ b/test/interpreter_functional/screenshots/baseline/combined_test.png
--- a/test/interpreter_functional/screenshots/baseline/final_screenshot_test.png
+++ b/test/interpreter_functional/screenshots/baseline/final_screenshot_test.png
--- a/test/interpreter_functional/screenshots/baseline/metric_all_data.png
+++ b/test/interpreter_functional/screenshots/baseline/metric_all_data.png
--- a/test/interpreter_functional/screenshots/baseline/metric_multi_metric_data.png
+++ b/test/interpreter_functional/screenshots/baseline/metric_multi_metric_data.png
--- a/test/interpreter_functional/screenshots/baseline/metric_percentage_mode.png
+++ b/test/interpreter_functional/screenshots/baseline/metric_percentage_mode.png
--- a/test/interpreter_functional/screenshots/baseline/metric_single_metric_data.png
+++ b/test/interpreter_functional/screenshots/baseline/metric_single_metric_data.png
--- a/test/interpreter_functional/screenshots/baseline/partial_test_1.png
+++ b/test/interpreter_functional/screenshots/baseline/partial_test_1.png
--- a/test/interpreter_functional/screenshots/baseline/partial_test_2.png
+++ b/test/interpreter_functional/screenshots/baseline/partial_test_2.png
--- 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":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","colorsRange":[{"from":0,"to":10000,"type":"range"}],"invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"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":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"show":true},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"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":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","colorsRange":[{"from":0,"to":10000,"type":"range"}],"invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"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":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"show":true},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"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":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","colorsRange":[{"from":0,"to":10000,"type":"range"}],"invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"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,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"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":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":2,"format":{"id":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"show":true},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"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,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"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":"string","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","colorsRange":[{"from":0,"to":10000,"type":"range"}],"invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"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,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"rows":[],"type":"datatable"},"visType":"metric"}}
+{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"show":true},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"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,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"rows":[],"type":"datatable"},"visType":"metric"}}
--- 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":"string","params":{}},"type":"vis_dimension"},{"accessor":1,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","colorsRange":[{"from":0,"to":10000,"type":"range"}],"invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"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,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"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":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},{"accessor":1,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"show":true},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"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,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"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":"string","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","colorsRange":[{"from":0,"to":1000,"type":"range"}],"invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":true,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"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,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"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":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"show":true},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"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,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"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":"string","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","colorsRange":[{"from":0,"to":10000,"type":"range"}],"invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"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,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"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":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"show":true},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"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,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"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":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","colorsRange":[{"from":0,"to":10000,"type":"range"}],"invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"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":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"show":true},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"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":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","colorsRange":[{"from":0,"to":10000,"type":"range"}],"invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"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":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"show":true},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"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":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","colorsRange":[{"from":0,"to":10000,"type":"range"}],"invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"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":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"show":true},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"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":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","colorsRange":[{"from":0,"to":10000,"type":"range"}],"invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"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":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"show":true},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"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":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","colorsRange":[{"from":0,"to":10000,"type":"range"}],"invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"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,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"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":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":2,"format":{"id":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"show":true},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"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,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"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":"string","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","colorsRange":[{"from":0,"to":10000,"type":"range"}],"invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"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,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"rows":[],"type":"datatable"},"visType":"metric"}}
+{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"show":true},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"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,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"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":"string","params":{}},"type":"vis_dimension"},{"accessor":1,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","colorsRange":[{"from":0,"to":10000,"type":"range"}],"invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"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,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"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":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},{"accessor":1,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"show":true},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"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,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"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":"string","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","colorsRange":[{"from":0,"to":1000,"type":"range"}],"invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":true,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"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,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"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":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"show":true},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"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,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"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":"string","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","colorsRange":[{"from":0,"to":10000,"type":"range"}],"invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"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,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"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":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"show":true},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"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,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"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":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","colorsRange":[{"from":0,"to":10000,"type":"range"}],"invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"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":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"show":true},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"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":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","colorsRange":[{"from":0,"to":10000,"type":"range"}],"invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"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":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"bucket":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"metrics":[{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"}]},"metric":{"labels":{"show":true},"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,"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,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"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/metric.ts
+++ b/test/interpreter_functional/test_suites/run_pipeline/metric.ts
@ -71,7 +71,8 @@ export default function ({

      it('with percentageMode option', async () => {
        const expression =
-          'metricVis metric={visdimension 0} percentageMode=true colorRange={range from=0 to=1000}';
+          'metricVis 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(
            'metric_percentage_mode',
--- a/x-pack/plugins/lens/common/expressions/expression_types/index.ts
+++ b/x-pack/plugins/lens/common/expressions/expression_types/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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { lensMultitable } from './lens_multitable';
+export type { LensMultitableExpressionTypeDefinition } from './lens_multitable';
--- a/x-pack/plugins/lens/common/expressions/expression_types/lens_multitable.ts
+++ b/x-pack/plugins/lens/common/expressions/expression_types/lens_multitable.ts
@ -0,0 +1,28 @@
+/*
+ * 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 { ExpressionTypeDefinition } from '../../../../../../src/plugins/expressions/common';
+import { LensMultiTable } from '../../types';
+
+const name = 'lens_multitable';
+
+type Input = LensMultiTable;
+
+export type LensMultitableExpressionTypeDefinition = ExpressionTypeDefinition<
+  typeof name,
+  Input,
+  Input
+>;
+
+export const lensMultitable: LensMultitableExpressionTypeDefinition = {
+  name,
+  to: {
+    datatable: (input: Input) => {
+      return Object.values(input.tables)[0];
+    },
+  },
+};
--- a/x-pack/plugins/lens/common/expressions/index.ts
+++ b/x-pack/plugins/lens/common/expressions/index.ts
@ -15,3 +15,5 @@ export * from './heatmap_chart';
 export * from './metric_chart';
 export * from './pie_chart';
 export * from './xy_chart';
+
+export * from './expression_types';
--- a/x-pack/plugins/lens/public/expressions.ts
+++ b/x-pack/plugins/lens/public/expressions.ts
@ -33,12 +33,15 @@ import { formatColumn } from '../common/expressions/format_column';
 import { counterRate } from '../common/expressions/counter_rate';
 import { getTimeScale } from '../common/expressions/time_scale/time_scale';
 import { metricChart } from '../common/expressions/metric_chart/metric_chart';
+import { lensMultitable } from '../common/expressions';

 export const setupExpressions = (
  expressions: ExpressionsSetup,
  formatFactory: Parameters<typeof getDatatable>[0],
  getTimeZone: Parameters<typeof getTimeScale>[0]
-) =>
+) => {
+  [lensMultitable].forEach((expressionType) => expressions.registerType(expressionType));
+
  [
    pie,
    xyChart,
@ -62,3 +65,4 @@ export const setupExpressions = (
    getDatatable(formatFactory),
    getTimeScale(getTimeZone),
  ].forEach((expressionFn) => expressions.registerFunction(expressionFn));
+};
--- a/x-pack/plugins/lens/server/expressions/expressions.ts
+++ b/x-pack/plugins/lens/server/expressions/expressions.ts
@ -22,6 +22,7 @@ import {
  axisTitlesVisibilityConfig,
  getTimeScale,
  getDatatable,
+  lensMultitable,
 } from '../../common/expressions';
 import { getFormatFactory, getTimeZoneFactory } from './utils';

@ -32,6 +33,8 @@ export const setupExpressions = (
  core: CoreSetup<PluginStartContract>,
  expressions: ExpressionsServerSetup
 ) => {
+  [lensMultitable].forEach((expressionType) => expressions.registerType(expressionType));
+
  [
    pie,
    xyChart,
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@ -4825,20 +4825,14 @@
    "visTypeMetric.schemas.metricTitle": "メトリック",
    "visTypeMetric.schemas.splitGroupTitle": "グループを分割",
    "expressionMetricVis.function.dimension.splitGroup": "グループを分割",
-    "expressionMetricVis.function.bgFill.help": "html 16 進数コード（#123456）、html 色（red、blue）、または rgba 値（rgba（255,255,255,1））。",
    "expressionMetricVis.function.bucket.help": "バケットディメンションの構成です。",
    "expressionMetricVis.function.colorMode.help": "色を変更するメトリックの部分",
-    "expressionMetricVis.function.colorRange.help": "別の色が適用される値のグループを指定する範囲オブジェクト。",
-    "expressionMetricVis.function.colorSchema.help": "使用する配色",
    "expressionMetricVis.function.dimension.metric": "メトリック",
    "expressionMetricVis.function.font.help": "フォント設定です。",
    "expressionMetricVis.function.help": "メトリックビジュアライゼーション",
-    "expressionMetricVis.function.invertColors.help": "色範囲を反転します",
    "expressionMetricVis.function.metric.help": "メトリックディメンションの構成です。",
    "expressionMetricVis.function.percentageMode.help": "百分率モードでメトリックを表示します。colorRange を設定する必要があります。",
    "expressionMetricVis.function.showLabels.help": "メトリック値の下にラベルを表示します。",
-    "expressionMetricVis.function.subText.help": "メトリックの下に表示するカスタムテキスト",
-    "expressionMetricVis.function.useRanges.help": "有効な色範囲です。",
    "visTypePie.advancedSettings.visualization.legacyPieChartsLibrary.deprecation": "Visualizeの円グラフのレガシーグラフライブラリは廃止予定であり、8.0以降ではサポートされません。",
    "visTypePie.advancedSettings.visualization.legacyPieChartsLibrary.description": "Visualizeで円グラフのレガシーグラフライブラリを有効にします。",
    "visTypePie.advancedSettings.visualization.legacyPieChartsLibrary.name": "円グラフのレガシーグラフライブラリ",
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@ -4868,20 +4868,14 @@
    "visTypeMetric.schemas.metricTitle": "指标",
    "visTypeMetric.schemas.splitGroupTitle": "拆分组",
    "expressionMetricVis.function.dimension.splitGroup": "拆分组",
-    "expressionMetricVis.function.bgFill.help": "将颜色表示为 html 十六进制代码 (#123456)、html 颜色（red、blue）或 rgba 值 (rgba(255,255,255,1))。",
    "expressionMetricVis.function.bucket.help": "存储桶维度配置",
    "expressionMetricVis.function.colorMode.help": "指标的哪部分要上色",
-    "expressionMetricVis.function.colorRange.help": "指定应将不同颜色应用到的值组的范围对象。",
-    "expressionMetricVis.function.colorSchema.help": "要使用的颜色方案",
    "expressionMetricVis.function.dimension.metric": "指标",
    "expressionMetricVis.function.font.help": "字体设置。",
    "expressionMetricVis.function.help": "指标可视化",
-    "expressionMetricVis.function.invertColors.help": "反转颜色范围",
    "expressionMetricVis.function.metric.help": "指标维度配置",
    "expressionMetricVis.function.percentageMode.help": "以百分比模式显示指标。需要设置 colorRange。",
    "expressionMetricVis.function.showLabels.help": "在指标值下显示标签。",
-    "expressionMetricVis.function.subText.help": "要在指标下显示的定制文本",
-    "expressionMetricVis.function.useRanges.help": "已启用颜色范围。",
    "visTypePie.advancedSettings.visualization.legacyPieChartsLibrary.deprecation": "Visualize 中饼图的旧版图表库已弃用，自 8.0 后将不受支持。",
    "visTypePie.advancedSettings.visualization.legacyPieChartsLibrary.description": "在 Visualize 中启用饼图的旧版图表库。",
    "visTypePie.advancedSettings.visualization.legacyPieChartsLibrary.name": "饼图旧版图表库",