From 4ae5b9fd8090008b2e1d3d4344edd2c018920d74 Mon Sep 17 00:00:00 2001
From: Uladzislau Lasitsa <Uladzislau_Lasitsa@epam.com>
Date: Mon, 7 Feb 2022 16:28:57 +0300
Subject: [PATCH 01/11] Add AutoSize component for metric

---
 .../metric_vis_function.ts                    |   8 ++
 .../common/types/expression_functions.ts      |   1 +
 .../common/types/expression_renderers.ts      |   1 +
 .../public/components/auto_scale.test.tsx     |  66 ++++++++++
 .../public/components/auto_scale.tsx          | 123 ++++++++++++++++++
 .../public/components/metric_component.tsx    |  31 +++--
 6 files changed, 221 insertions(+), 9 deletions(-)
 create mode 100644 src/plugins/chart_expressions/expression_metric/public/components/auto_scale.test.tsx
 create mode 100644 src/plugins/chart_expressions/expression_metric/public/components/auto_scale.tsx

diff --git 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
index ac3b4f5cc4576..8b8ad51bfeb47 100644
--- 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
@@ -71,6 +71,13 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
         defaultMessage: 'bucket dimension configuration',
       }),
     },
+    autoScale: {
+      types: ['boolean'],
+      help: i18n.translate('expressionMetricVis.function.autoScale.help', {
+        defaultMessage: 'Enable auto scale',
+      }),
+      required: false
+    }
   },
   fn(input, args, handlers) {
     if (args.percentageMode && !args.palette?.params) {
@@ -117,6 +124,7 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
               labelColor: args.colorMode === ColorMode.Labels,
               ...args.font,
             },
+            autoScale: args.autoScale,
           },
           dimensions: {
             metrics: args.metric,
diff --git a/src/plugins/chart_expressions/expression_metric/common/types/expression_functions.ts b/src/plugins/chart_expressions/expression_metric/common/types/expression_functions.ts
index 88bc0310a6a04..b4b981340e66a 100644
--- a/src/plugins/chart_expressions/expression_metric/common/types/expression_functions.ts
+++ b/src/plugins/chart_expressions/expression_metric/common/types/expression_functions.ts
@@ -25,6 +25,7 @@ export interface MetricArguments {
   font: Style;
   metric: ExpressionValueVisDimension[];
   bucket?: ExpressionValueVisDimension;
+  autoScale?: boolean;
 }
 
 export type MetricInput = Datatable;
diff --git a/src/plugins/chart_expressions/expression_metric/common/types/expression_renderers.ts b/src/plugins/chart_expressions/expression_metric/common/types/expression_renderers.ts
index eb7573183894c..37c79b6700767 100644
--- a/src/plugins/chart_expressions/expression_metric/common/types/expression_renderers.ts
+++ b/src/plugins/chart_expressions/expression_metric/common/types/expression_renderers.ts
@@ -30,6 +30,7 @@ export interface MetricVisParam {
   palette?: CustomPaletteState;
   labels: Labels;
   style: MetricStyle;
+  autoScale?: boolean;
 }
 
 export interface VisParams {
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.test.tsx b/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.test.tsx
new file mode 100644
index 0000000000000..b84ad685e81e6
--- /dev/null
+++ b/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.test.tsx
@@ -0,0 +1,66 @@
+/*
+ * 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 React from 'react';
+import { computeScale, AutoScale } from './auto_scale';
+import { render } from 'enzyme';
+
+const mockElement = (clientWidth = 100, clientHeight = 200) => ({
+  clientHeight,
+  clientWidth,
+});
+
+describe('AutoScale', () => {
+  describe('computeScale', () => {
+    it('is 1 if any element is null', () => {
+      expect(computeScale(null, null)).toBe(1);
+      expect(computeScale(mockElement(), null)).toBe(1);
+      expect(computeScale(null, mockElement())).toBe(1);
+    });
+
+    it('is never over 1', () => {
+      expect(computeScale(mockElement(2000, 2000), mockElement(1000, 1000))).toBe(1);
+    });
+
+    it('is never under 0.3 in default case', () => {
+      expect(computeScale(mockElement(2000, 1000), mockElement(1000, 10000))).toBe(0.3);
+    });
+
+    it('is never under specified min scale if specified', () => {
+      expect(computeScale(mockElement(2000, 1000), mockElement(1000, 10000), 0.1)).toBe(0.1);
+    });
+
+    it('is the lesser of the x or y scale', () => {
+      expect(computeScale(mockElement(2000, 2000), mockElement(3000, 5000))).toBe(0.4);
+      expect(computeScale(mockElement(2000, 3000), mockElement(4000, 3200))).toBe(0.5);
+    });
+  });
+
+  describe('AutoScale', () => {
+    it('renders', () => {
+      expect(
+        render(
+          <AutoScale>
+            <h1>Hoi!</h1>
+          </AutoScale>
+        )
+      ).toMatchInlineSnapshot(`
+        <div
+          style="display:flex;justify-content:center;align-items:center;max-width:100%;max-height:100%;overflow:hidden;line-height:1.5"
+        >
+          <div
+            style="transform:scale(0)"
+          >
+            <h1>
+              Hoi!
+            </h1>
+          </div>
+        </div>
+      `);
+    });
+  });
+});
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.tsx b/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.tsx
new file mode 100644
index 0000000000000..e82ad198ca3e2
--- /dev/null
+++ b/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.tsx
@@ -0,0 +1,123 @@
+/*
+ * 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 React from 'react';
+import { throttle } from 'lodash';
+import { EuiResizeObserver } from '@elastic/eui';
+
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode | React.ReactNode[];
+  minScale?: number;
+}
+
+interface State {
+  scale: number;
+}
+
+export class AutoScale extends React.Component<Props, State> {
+  private child: Element | null = null;
+  private parent: Element | null = null;
+  private scale: () => void;
+
+  constructor(props: Props) {
+    super(props);
+
+    this.scale = throttle(() => {
+      const scale = computeScale(this.parent, this.child, this.props.minScale);
+
+      // Prevent an infinite render loop
+      if (this.state.scale !== scale) {
+        this.setState({ scale });
+      }
+    });
+
+    // An initial scale of 0 means we always redraw
+    // at least once, which is sub-optimal, but it
+    // prevents an annoying flicker.
+    this.state = { scale: 0 };
+  }
+
+  setParent = (el: Element | null) => {
+    if (el && this.parent !== el) {
+      this.parent = el;
+      setTimeout(() => this.scale());
+    }
+  };
+
+  setChild = (el: Element | null) => {
+    if (el && this.child !== el) {
+      this.child = el;
+      setTimeout(() => this.scale());
+    }
+  };
+
+  render() {
+    const { children, minScale, ...rest } = this.props;
+    const { scale } = this.state;
+    const style = this.props.style || {};
+
+    return (
+      <EuiResizeObserver onResize={this.scale}>
+        {(resizeRef) => (
+          <div
+            {...rest}
+            ref={(el) => {
+              this.setParent(el);
+              resizeRef(el);
+            }}
+            style={{
+              ...style,
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              maxWidth: '100%',
+              maxHeight: '100%',
+              overflow: 'auto',
+              lineHeight: 1.5,
+            }}
+          >
+            <div
+              ref={this.setChild}
+              style={{
+                transform: `scale(${scale})`,
+              }}
+            >
+              {children}
+            </div>
+          </div>
+        )}
+      </EuiResizeObserver>
+    );
+  }
+}
+
+interface ClientDimensionable {
+  clientWidth: number;
+  clientHeight: number;
+}
+
+const MAX_SCALE = 1;
+const MIN_SCALE = 0.3;
+
+/**
+ * computeScale computes the ratio by which the child needs to shrink in order
+ * to fit into the parent. This function is only exported for testing purposes.
+ */
+export function computeScale(
+  parent: ClientDimensionable | null,
+  child: ClientDimensionable | null,
+  minScale: number = MIN_SCALE
+) {
+  if (!parent || !child) {
+    return 1;
+  }
+
+  const scaleX = parent.clientWidth / child.clientWidth;
+  const scaleY = parent.clientHeight / child.clientHeight;
+
+  return Math.max(Math.min(MAX_SCALE, Math.min(scaleX, scaleY)), minScale);
+}
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx
index 245fdf0a37170..0a114103f418f 100644
--- a/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx
@@ -17,6 +17,7 @@ import { ExpressionValueVisDimension } from '../../../../visualizations/public';
 import { formatValue, shouldApplyColor } from '../utils';
 import { getColumnByAccessor } from '../utils/accessor';
 import { needsLightText } from '../utils/palette';
+import { AutoScale } from './auto_scale';
 
 import './metric.scss';
 
@@ -108,16 +109,28 @@ class MetricVisComponent extends Component<MetricVisComponentProps> {
   };
 
   private renderMetric = (metric: MetricOptions, index: number) => {
+    const getMetricValueComponent = () => {
+      return (
+        <MetricVisValue
+          key={index}
+          metric={metric}
+          style={this.props.visParams.metric.style}
+          onFilter={
+            this.props.visParams.dimensions.bucket ? () => this.filterBucket(index) : undefined
+          }
+          showLabel={this.props.visParams.metric.labels.show}
+        />
+      );
+    };
+
     return (
-      <MetricVisValue
-        key={index}
-        metric={metric}
-        style={this.props.visParams.metric.style}
-        onFilter={
-          this.props.visParams.dimensions.bucket ? () => this.filterBucket(index) : undefined
-        }
-        showLabel={this.props.visParams.metric.labels.show}
-      />
+      <>
+        {this.props.visParams.metric.autoScale ? (
+          <AutoScale key={metric.value}>{getMetricValueComponent()}</AutoScale>
+        ) : (
+          getMetricValueComponent()
+        )}
+      </>
     );
   };
 

From 056476a522a7f4d7ae39187d30555061a30f95c6 Mon Sep 17 00:00:00 2001
From: Uladzislau Lasitsa <Uladzislau_Lasitsa@epam.com>
Date: Mon, 7 Feb 2022 16:39:58 +0300
Subject: [PATCH 02/11] Fix Checks

---
 .../common/expression_functions/metric_vis_function.ts       | 4 ++--
 .../expression_metric/public/components/auto_scale.test.tsx  | 5 +++--
 .../expression_metric/public/components/auto_scale.tsx       | 5 +++--
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git 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
index 8b8ad51bfeb47..26d8964c37ec2 100644
--- 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
@@ -76,8 +76,8 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
       help: i18n.translate('expressionMetricVis.function.autoScale.help', {
         defaultMessage: 'Enable auto scale',
       }),
-      required: false
-    }
+      required: false,
+    },
   },
   fn(input, args, handlers) {
     if (args.percentageMode && !args.palette?.params) {
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.test.tsx b/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.test.tsx
index b84ad685e81e6..a47aba613ad75 100644
--- a/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.test.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.test.tsx
@@ -1,8 +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.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 import React from 'react';
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.tsx b/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.tsx
index e82ad198ca3e2..8f96f44d1fcbb 100644
--- a/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.tsx
@@ -1,8 +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.
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
  */
 
 import React from 'react';

From baa090322c924914c0ebe613db11f5be5be8a128 Mon Sep 17 00:00:00 2001
From: Uladzislau Lasitsa <Uladzislau_Lasitsa@epam.com>
Date: Tue, 8 Feb 2022 13:39:21 +0300
Subject: [PATCH 03/11] moved auto scale from class to hoc component

---
 .../metric_vis_function.test.ts.snap          |   1 +
 .../metric_component.test.tsx.snap            |   6 +-
 .../public/components/auto_scale.styles.ts    |  19 +++
 .../public/components/auto_scale.test.tsx     |  48 ++++---
 .../public/components/auto_scale.tsx          | 128 ++++++------------
 .../public/components/metric_component.tsx    |  35 ++---
 6 files changed, 109 insertions(+), 128 deletions(-)
 create mode 100644 src/plugins/chart_expressions/expression_metric/public/components/auto_scale.styles.ts

diff --git 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
index c502c9efa2beb..51a4f92dc2876 100644
--- 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
@@ -40,6 +40,7 @@ Object {
         ],
       },
       "metric": Object {
+        "autoScale": undefined,
         "labels": Object {
           "show": true,
         },
diff --git 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
index 5f856f3154d58..12cb022c5c7d8 100644
--- 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
@@ -2,7 +2,7 @@
 
 exports[`MetricVisComponent should render correct structure for multi-value metrics 1`] = `
 Array [
-  <MetricVisValue
+  <Component
     key="0"
     metric={
       Object {
@@ -25,7 +25,7 @@ Array [
       }
     }
   />,
-  <MetricVisValue
+  <Component
     key="1"
     metric={
       Object {
@@ -52,7 +52,7 @@ Array [
 `;
 
 exports[`MetricVisComponent should render correct structure for single metric 1`] = `
-<MetricVisValue
+<Component
   key="0"
   metric={
     Object {
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.styles.ts b/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.styles.ts
new file mode 100644
index 0000000000000..e9adb58da2410
--- /dev/null
+++ b/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.styles.ts
@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+export const autoScaleWrapperStyle = css({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  maxWidth: '100%',
+  maxHeight: '100%',
+  overflow: 'hidden',
+  lineHeight: 1.5,
+});
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.test.tsx b/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.test.tsx
index a47aba613ad75..3b5f12cb55921 100644
--- a/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.test.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.test.tsx
@@ -7,8 +7,8 @@
  */
 
 import React from 'react';
-import { computeScale, AutoScale } from './auto_scale';
-import { render } from 'enzyme';
+import { computeScale, withAutoScale } from './auto_scale';
+import { mount } from 'enzyme';
 
 const mockElement = (clientWidth = 100, clientHeight = 200) => ({
   clientHeight,
@@ -41,26 +41,38 @@ describe('AutoScale', () => {
     });
   });
 
-  describe('AutoScale', () => {
+  describe('withAutoScale', () => {
     it('renders', () => {
-      expect(
-        render(
-          <AutoScale>
-            <h1>Hoi!</h1>
-          </AutoScale>
-        )
-      ).toMatchInlineSnapshot(`
-        <div
-          style="display:flex;justify-content:center;align-items:center;max-width:100%;max-height:100%;overflow:hidden;line-height:1.5"
-        >
+      const Component = () => <h1>Hoi!</h1>;
+      const WrappedComponent = withAutoScale()(Component);
+      expect(mount(<WrappedComponent />)).toMatchInlineSnapshot(`
+        <Component>
           <div
-            style="transform:scale(0)"
+            css={
+              Object {
+                "map": undefined,
+                "name": "1l2vzaf",
+                "next": undefined,
+                "styles": "display:flex;justify-content:center;align-items:center;max-width:100%;max-height:100%;overflow:hidden;line-height:1.5;",
+                "toString": [Function],
+              }
+            }
           >
-            <h1>
-              Hoi!
-            </h1>
+            <div
+              style={
+                Object {
+                  "transform": "scale(0)",
+                }
+              }
+            >
+              <Component>
+                <h1>
+                  Hoi!
+                </h1>
+              </Component>
+            </div>
           </div>
-        </div>
+        </Component>
       `);
     });
   });
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.tsx b/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.tsx
index 8f96f44d1fcbb..9d52887326ca1 100644
--- a/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.tsx
@@ -6,96 +6,14 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useRef, useEffect, useState, ComponentType } from 'react';
 import { throttle } from 'lodash';
-import { EuiResizeObserver } from '@elastic/eui';
+import { useResizeObserver } from '@elastic/eui';
+import { autoScaleWrapperStyle } from './auto_scale.styles';
 
-interface Props extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode | React.ReactNode[];
+interface AutoScaleParams {
   minScale?: number;
 }
-
-interface State {
-  scale: number;
-}
-
-export class AutoScale extends React.Component<Props, State> {
-  private child: Element | null = null;
-  private parent: Element | null = null;
-  private scale: () => void;
-
-  constructor(props: Props) {
-    super(props);
-
-    this.scale = throttle(() => {
-      const scale = computeScale(this.parent, this.child, this.props.minScale);
-
-      // Prevent an infinite render loop
-      if (this.state.scale !== scale) {
-        this.setState({ scale });
-      }
-    });
-
-    // An initial scale of 0 means we always redraw
-    // at least once, which is sub-optimal, but it
-    // prevents an annoying flicker.
-    this.state = { scale: 0 };
-  }
-
-  setParent = (el: Element | null) => {
-    if (el && this.parent !== el) {
-      this.parent = el;
-      setTimeout(() => this.scale());
-    }
-  };
-
-  setChild = (el: Element | null) => {
-    if (el && this.child !== el) {
-      this.child = el;
-      setTimeout(() => this.scale());
-    }
-  };
-
-  render() {
-    const { children, minScale, ...rest } = this.props;
-    const { scale } = this.state;
-    const style = this.props.style || {};
-
-    return (
-      <EuiResizeObserver onResize={this.scale}>
-        {(resizeRef) => (
-          <div
-            {...rest}
-            ref={(el) => {
-              this.setParent(el);
-              resizeRef(el);
-            }}
-            style={{
-              ...style,
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              maxWidth: '100%',
-              maxHeight: '100%',
-              overflow: 'auto',
-              lineHeight: 1.5,
-            }}
-          >
-            <div
-              ref={this.setChild}
-              style={{
-                transform: `scale(${scale})`,
-              }}
-            >
-              {children}
-            </div>
-          </div>
-        )}
-      </EuiResizeObserver>
-    );
-  }
-}
-
 interface ClientDimensionable {
   clientWidth: number;
   clientHeight: number;
@@ -122,3 +40,41 @@ export function computeScale(
 
   return Math.max(Math.min(MAX_SCALE, Math.min(scaleX, scaleY)), minScale);
 }
+
+export const withAutoScale =
+  (autoScaleParams?: AutoScaleParams) => (WrappedComponent: ComponentType<any>) => (props: any) => {
+    const [scale, setScale] = useState(0);
+    const parentRef = useRef<HTMLDivElement>(null);
+    const childrenRef = useRef<HTMLDivElement>(null);
+    const parentDimensions = useResizeObserver(parentRef.current);
+
+    const scaleFn = throttle(() => {
+      const newScale = computeScale(
+        { clientHeight: parentDimensions.height, clientWidth: parentDimensions.width },
+        childrenRef.current,
+        autoScaleParams?.minScale
+      );
+
+      // Prevent an infinite render loop
+      if (scale !== newScale) {
+        setScale(newScale);
+      }
+    });
+
+    useEffect(() => {
+      scaleFn();
+    }, [parentDimensions]);
+
+    return (
+      <div ref={parentRef} css={autoScaleWrapperStyle}>
+        <div
+          ref={childrenRef}
+          style={{
+            transform: `scale(${scale || 0})`,
+          }}
+        >
+          <WrappedComponent {...props} />
+        </div>
+      </div>
+    );
+  };
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx
index 0a114103f418f..12d34a30fccb3 100644
--- a/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx
@@ -17,7 +17,7 @@ import { ExpressionValueVisDimension } from '../../../../visualizations/public';
 import { formatValue, shouldApplyColor } from '../utils';
 import { getColumnByAccessor } from '../utils/accessor';
 import { needsLightText } from '../utils/palette';
-import { AutoScale } from './auto_scale';
+import { withAutoScale } from './auto_scale';
 
 import './metric.scss';
 
@@ -109,28 +109,21 @@ class MetricVisComponent extends Component<MetricVisComponentProps> {
   };
 
   private renderMetric = (metric: MetricOptions, index: number) => {
-    const getMetricValueComponent = () => {
-      return (
-        <MetricVisValue
-          key={index}
-          metric={metric}
-          style={this.props.visParams.metric.style}
-          onFilter={
-            this.props.visParams.dimensions.bucket ? () => this.filterBucket(index) : undefined
-          }
-          showLabel={this.props.visParams.metric.labels.show}
-        />
-      );
-    };
+    const Component =
+      this.props.visParams.metric.autoScale || true
+        ? withAutoScale()(MetricVisValue)
+        : MetricVisValue;
 
     return (
-      <>
-        {this.props.visParams.metric.autoScale ? (
-          <AutoScale key={metric.value}>{getMetricValueComponent()}</AutoScale>
-        ) : (
-          getMetricValueComponent()
-        )}
-      </>
+      <Component
+        key={index}
+        metric={metric}
+        style={this.props.visParams.metric.style}
+        onFilter={
+          this.props.visParams.dimensions.bucket ? () => this.filterBucket(index) : undefined
+        }
+        showLabel={this.props.visParams.metric.labels.show}
+      />
     );
   };
 

From 391337c2d32d8a04ce5bfe12c545da65b70f5a6d Mon Sep 17 00:00:00 2001
From: Uladzislau Lasitsa <Uladzislau_Lasitsa@epam.com>
Date: Tue, 8 Feb 2022 13:40:25 +0300
Subject: [PATCH 04/11] Remove unnecessary code

---
 .../public/components/metric_component.tsx                 | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx
index 12d34a30fccb3..58796cf132434 100644
--- a/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx
@@ -109,10 +109,9 @@ class MetricVisComponent extends Component<MetricVisComponentProps> {
   };
 
   private renderMetric = (metric: MetricOptions, index: number) => {
-    const Component =
-      this.props.visParams.metric.autoScale || true
-        ? withAutoScale()(MetricVisValue)
-        : MetricVisValue;
+    const Component = this.props.visParams.metric.autoScale
+      ? withAutoScale()(MetricVisValue)
+      : MetricVisValue;
 
     return (
       <Component

From 95d17598be25981c27c0999f9af7448ba550ccb9 Mon Sep 17 00:00:00 2001
From: Uladzislau Lasitsa <Uladzislau_Lasitsa@epam.com>
Date: Tue, 8 Feb 2022 14:09:57 +0300
Subject: [PATCH 05/11] Fix checks

---
 .../components/__snapshots__/metric_component.test.tsx.snap | 6 +++---
 .../public/components/metric_component.tsx                  | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git 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
index 12cb022c5c7d8..5f856f3154d58 100644
--- 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
@@ -2,7 +2,7 @@
 
 exports[`MetricVisComponent should render correct structure for multi-value metrics 1`] = `
 Array [
-  <Component
+  <MetricVisValue
     key="0"
     metric={
       Object {
@@ -25,7 +25,7 @@ Array [
       }
     }
   />,
-  <Component
+  <MetricVisValue
     key="1"
     metric={
       Object {
@@ -52,7 +52,7 @@ Array [
 `;
 
 exports[`MetricVisComponent should render correct structure for single metric 1`] = `
-<Component
+<MetricVisValue
   key="0"
   metric={
     Object {
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx
index 58796cf132434..09933068e7b50 100644
--- a/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx
@@ -109,12 +109,12 @@ class MetricVisComponent extends Component<MetricVisComponentProps> {
   };
 
   private renderMetric = (metric: MetricOptions, index: number) => {
-    const Component = this.props.visParams.metric.autoScale
+    const MetricComponent = this.props.visParams.metric.autoScale
       ? withAutoScale()(MetricVisValue)
       : MetricVisValue;
 
     return (
-      <Component
+      <MetricComponent
         key={index}
         metric={metric}
         style={this.props.visParams.metric.style}

From f51272a87ef84c87d65b7220cef132036e4be8f6 Mon Sep 17 00:00:00 2001
From: Uladzislau Lasitsa <Uladzislau_Lasitsa@epam.com>
Date: Tue, 8 Feb 2022 15:43:15 +0300
Subject: [PATCH 06/11] Refactoring

---
 .../public/components/auto_scale.test.tsx     |  2 +-
 .../public/components/auto_scale.tsx          | 38 +++++++++++--------
 .../public/components/metric_component.tsx    |  4 +-
 3 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.test.tsx b/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.test.tsx
index 3b5f12cb55921..4636584c70974 100644
--- a/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.test.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.test.tsx
@@ -44,7 +44,7 @@ describe('AutoScale', () => {
   describe('withAutoScale', () => {
     it('renders', () => {
       const Component = () => <h1>Hoi!</h1>;
-      const WrappedComponent = withAutoScale()(Component);
+      const WrappedComponent = withAutoScale(Component);
       expect(mount(<WrappedComponent />)).toMatchInlineSnapshot(`
         <Component>
           <div
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.tsx b/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.tsx
index 9d52887326ca1..bac2200d56bc6 100644
--- a/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { useRef, useEffect, useState, ComponentType } from 'react';
+import React, { useRef, useEffect, useState, ComponentType, useMemo } from 'react';
 import { throttle } from 'lodash';
 import { useResizeObserver } from '@elastic/eui';
 import { autoScaleWrapperStyle } from './auto_scale.styles';
@@ -41,29 +41,36 @@ export function computeScale(
   return Math.max(Math.min(MAX_SCALE, Math.min(scaleX, scaleY)), minScale);
 }
 
-export const withAutoScale =
-  (autoScaleParams?: AutoScaleParams) => (WrappedComponent: ComponentType<any>) => (props: any) => {
+export function withAutoScale<T>(
+  WrappedComponent: ComponentType<T>,
+  autoScaleParams?: AutoScaleParams
+) {
+  return (props: T) => {
     const [scale, setScale] = useState(0);
     const parentRef = useRef<HTMLDivElement>(null);
     const childrenRef = useRef<HTMLDivElement>(null);
     const parentDimensions = useResizeObserver(parentRef.current);
 
-    const scaleFn = throttle(() => {
-      const newScale = computeScale(
-        { clientHeight: parentDimensions.height, clientWidth: parentDimensions.width },
-        childrenRef.current,
-        autoScaleParams?.minScale
-      );
+    const scaleFn = useMemo(
+      () =>
+        throttle(() => {
+          const newScale = computeScale(
+            { clientHeight: parentDimensions.height, clientWidth: parentDimensions.width },
+            childrenRef.current,
+            autoScaleParams?.minScale
+          );
 
-      // Prevent an infinite render loop
-      if (scale !== newScale) {
-        setScale(newScale);
-      }
-    });
+          // Prevent an infinite render loop
+          if (scale !== newScale) {
+            setScale(newScale);
+          }
+        }),
+      [parentDimensions, setScale, scale, childrenRef]
+    );
 
     useEffect(() => {
       scaleFn();
-    }, [parentDimensions]);
+    }, [scaleFn]);
 
     return (
       <div ref={parentRef} css={autoScaleWrapperStyle}>
@@ -78,3 +85,4 @@ export const withAutoScale =
       </div>
     );
   };
+}
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx
index 09933068e7b50..6a1c6bc0677f1 100644
--- a/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx
@@ -28,6 +28,8 @@ export interface MetricVisComponentProps {
   renderComplete: () => void;
 }
 
+const AutoScaleMetricVisValue = withAutoScale(MetricVisValue);
+
 class MetricVisComponent extends Component<MetricVisComponentProps> {
   private getColor(value: number, paletteParams: CustomPaletteState) {
     return getPaletteService().get('custom')?.getColorForValue?.(value, paletteParams, {
@@ -110,7 +112,7 @@ class MetricVisComponent extends Component<MetricVisComponentProps> {
 
   private renderMetric = (metric: MetricOptions, index: number) => {
     const MetricComponent = this.props.visParams.metric.autoScale
-      ? withAutoScale()(MetricVisValue)
+      ? AutoScaleMetricVisValue
       : MetricVisValue;
 
     return (

From 0a806c854dba9e97738e27acbc2e568ccd746676 Mon Sep 17 00:00:00 2001
From: Uladzislau Lasitsa <Uladzislau_Lasitsa@epam.com>
Date: Tue, 8 Feb 2022 17:31:54 +0300
Subject: [PATCH 07/11] Update shapshots

---
 .../snapshots/baseline/combined_test3.json                      | 2 +-
 .../snapshots/baseline/final_output_test.json                   | 2 +-
 .../snapshots/baseline/metric_all_data.json                     | 2 +-
 .../snapshots/baseline/metric_empty_data.json                   | 2 +-
 .../snapshots/baseline/metric_multi_metric_data.json            | 2 +-
 .../snapshots/baseline/metric_percentage_mode.json              | 2 +-
 .../snapshots/baseline/metric_single_metric_data.json           | 2 +-
 .../snapshots/baseline/step_output_test3.json                   | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/test/interpreter_functional/snapshots/baseline/combined_test3.json b/test/interpreter_functional/snapshots/baseline/combined_test3.json
index 2ddf40eb79006..160c990ff6dd3 100644
--- 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":{"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,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"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"}}
\ No newline at end of file
+{"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":{"autoScale":null,"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,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"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"}}
\ No newline at end of file
diff --git a/test/interpreter_functional/snapshots/baseline/final_output_test.json b/test/interpreter_functional/snapshots/baseline/final_output_test.json
index 2ddf40eb79006..160c990ff6dd3 100644
--- 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":{"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,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"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"}}
\ No newline at end of file
+{"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":{"autoScale":null,"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,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"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"}}
\ No newline at end of file
diff --git a/test/interpreter_functional/snapshots/baseline/metric_all_data.json b/test/interpreter_functional/snapshots/baseline/metric_all_data.json
index fb16bf98ce761..30bbae45b95d1 100644
--- 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":{"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,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"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"}}
\ No newline at end of file
+{"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":{"autoScale":null,"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,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"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"}}
\ No newline at end of file
diff --git a/test/interpreter_functional/snapshots/baseline/metric_empty_data.json b/test/interpreter_functional/snapshots/baseline/metric_empty_data.json
index d667cc6088a3a..ca2ee347582fb 100644
--- 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":{"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,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"rows":[],"type":"datatable"},"visType":"metric"}}
\ No newline at end of file
+{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"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,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"rows":[],"type":"datatable"},"visType":"metric"}}
\ No newline at end of file
diff --git a/test/interpreter_functional/snapshots/baseline/metric_multi_metric_data.json b/test/interpreter_functional/snapshots/baseline/metric_multi_metric_data.json
index 6ef90caf3da3e..65a241e76ecda 100644
--- 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":{"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,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"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"}}
\ No newline at end of file
+{"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":{"autoScale":null,"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,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"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"}}
\ No newline at end of file
diff --git a/test/interpreter_functional/snapshots/baseline/metric_percentage_mode.json b/test/interpreter_functional/snapshots/baseline/metric_percentage_mode.json
index bc1ec6278dc32..0d767e8fdddec 100644
--- 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":{"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,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"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"}}
\ No newline at end of file
+{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"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,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"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"}}
\ No newline at end of file
diff --git a/test/interpreter_functional/snapshots/baseline/metric_single_metric_data.json b/test/interpreter_functional/snapshots/baseline/metric_single_metric_data.json
index b5cc75694b4ba..626ab36bacc96 100644
--- 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":{"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,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"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"}}
\ No newline at end of file
+{"as":"metricVis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"autoScale":null,"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,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"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"}}
\ No newline at end of file
diff --git a/test/interpreter_functional/snapshots/baseline/step_output_test3.json b/test/interpreter_functional/snapshots/baseline/step_output_test3.json
index 2ddf40eb79006..160c990ff6dd3 100644
--- 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":{"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,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"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"}}
\ No newline at end of file
+{"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":{"autoScale":null,"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,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"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"}}
\ No newline at end of file

From 8f6d00a9e5993dd1659e924a36702ed504925891 Mon Sep 17 00:00:00 2001
From: Uladzislau Lasitsa <Uladzislau_Lasitsa@epam.com>
Date: Wed, 9 Feb 2022 11:00:53 +0300
Subject: [PATCH 08/11] Update snapshots

---
 .../snapshots/baseline/partial_test_2.json                      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/interpreter_functional/snapshots/baseline/partial_test_2.json b/test/interpreter_functional/snapshots/baseline/partial_test_2.json
index 2ddf40eb79006..160c990ff6dd3 100644
--- 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":{"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,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"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"}}
\ No newline at end of file
+{"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":{"autoScale":null,"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,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"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"}}
\ No newline at end of file

From 4a7ff1850ff684550c5901008b0a870e75d39180 Mon Sep 17 00:00:00 2001
From: Uladzislau Lasitsa <Uladzislau_Lasitsa@epam.com>
Date: Wed, 9 Feb 2022 16:31:18 +0300
Subject: [PATCH 09/11] Fix styles and change file name from auto_scale to
 with_auto_scale

---
 .../expression_metric/public/components/metric.scss        | 2 ++
 .../public/components/metric_component.tsx                 | 2 +-
 .../{auto_scale.styles.ts => with_auto_scale.styles.ts}    | 0
 .../{auto_scale.test.tsx => with_auto_scale.test.tsx}      | 2 +-
 .../components/{auto_scale.tsx => with_auto_scale.tsx}     | 7 +++++--
 5 files changed, 9 insertions(+), 4 deletions(-)
 rename src/plugins/chart_expressions/expression_metric/public/components/{auto_scale.styles.ts => with_auto_scale.styles.ts} (100%)
 rename src/plugins/chart_expressions/expression_metric/public/components/{auto_scale.test.tsx => with_auto_scale.test.tsx} (97%)
 rename src/plugins/chart_expressions/expression_metric/public/components/{auto_scale.tsx => with_auto_scale.tsx} (90%)

diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric.scss b/src/plugins/chart_expressions/expression_metric/public/components/metric.scss
index 24c5c05129882..262feffc1f93b 100644
--- 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 {
+  @include euiScrollBar;
   height: 100%;
   width: 100%;
   display: flex;
@@ -13,6 +14,7 @@
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
+  overflow: auto;
 }
 
 .mtrVis__value {
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx
index 6a1c6bc0677f1..ed9c2667dbddd 100644
--- a/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx
@@ -17,7 +17,7 @@ import { ExpressionValueVisDimension } from '../../../../visualizations/public';
 import { formatValue, shouldApplyColor } from '../utils';
 import { getColumnByAccessor } from '../utils/accessor';
 import { needsLightText } from '../utils/palette';
-import { withAutoScale } from './auto_scale';
+import { withAutoScale } from './with_auto_scale';
 
 import './metric.scss';
 
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.styles.ts b/src/plugins/chart_expressions/expression_metric/public/components/with_auto_scale.styles.ts
similarity index 100%
rename from src/plugins/chart_expressions/expression_metric/public/components/auto_scale.styles.ts
rename to src/plugins/chart_expressions/expression_metric/public/components/with_auto_scale.styles.ts
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.test.tsx b/src/plugins/chart_expressions/expression_metric/public/components/with_auto_scale.test.tsx
similarity index 97%
rename from src/plugins/chart_expressions/expression_metric/public/components/auto_scale.test.tsx
rename to src/plugins/chart_expressions/expression_metric/public/components/with_auto_scale.test.tsx
index 4636584c70974..ab1165f5d5e9c 100644
--- a/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.test.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/with_auto_scale.test.tsx
@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { computeScale, withAutoScale } from './auto_scale';
+import { computeScale, withAutoScale } from './with_auto_scale';
 import { mount } from 'enzyme';
 
 const mockElement = (clientWidth = 100, clientHeight = 200) => ({
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.tsx b/src/plugins/chart_expressions/expression_metric/public/components/with_auto_scale.tsx
similarity index 90%
rename from src/plugins/chart_expressions/expression_metric/public/components/auto_scale.tsx
rename to src/plugins/chart_expressions/expression_metric/public/components/with_auto_scale.tsx
index bac2200d56bc6..241e882f34ba8 100644
--- a/src/plugins/chart_expressions/expression_metric/public/components/auto_scale.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/with_auto_scale.tsx
@@ -9,7 +9,7 @@
 import React, { useRef, useEffect, useState, ComponentType, useMemo } from 'react';
 import { throttle } from 'lodash';
 import { useResizeObserver } from '@elastic/eui';
-import { autoScaleWrapperStyle } from './auto_scale.styles';
+import { autoScaleWrapperStyle } from './with_auto_scale.styles';
 
 interface AutoScaleParams {
   minScale?: number;
@@ -46,6 +46,9 @@ export function withAutoScale<T>(
   autoScaleParams?: AutoScaleParams
 ) {
   return (props: T) => {
+    // An initial scale of 0 means we always redraw
+    // at least once, which is sub-optimal, but it
+    // prevents an annoying flicker.
     const [scale, setScale] = useState(0);
     const parentRef = useRef<HTMLDivElement>(null);
     const childrenRef = useRef<HTMLDivElement>(null);
@@ -65,7 +68,7 @@ export function withAutoScale<T>(
             setScale(newScale);
           }
         }),
-      [parentDimensions, setScale, scale, childrenRef]
+      [parentDimensions, setScale, scale]
     );
 
     useEffect(() => {

From a5cb229dfe01d7a18d7757fa8682232ceebf6ca8 Mon Sep 17 00:00:00 2001
From: Uladzislau Lasitsa <Uladzislau_Lasitsa@epam.com>
Date: Fri, 11 Feb 2022 12:37:43 +0300
Subject: [PATCH 10/11] Fix some remarks

---
 .../with_auto_scale.test.tsx.snap             | 31 +++++++++++++++++++
 .../components/with_auto_scale.test.tsx       | 30 +-----------------
 2 files changed, 32 insertions(+), 29 deletions(-)
 create mode 100644 src/plugins/chart_expressions/expression_metric/public/components/__snapshots__/with_auto_scale.test.tsx.snap

diff --git a/src/plugins/chart_expressions/expression_metric/public/components/__snapshots__/with_auto_scale.test.tsx.snap b/src/plugins/chart_expressions/expression_metric/public/components/__snapshots__/with_auto_scale.test.tsx.snap
new file mode 100644
index 0000000000000..4acbab635ba47
--- /dev/null
+++ b/src/plugins/chart_expressions/expression_metric/public/components/__snapshots__/with_auto_scale.test.tsx.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AutoScale withAutoScale renders 1`] = `
+<Component>
+  <div
+    css={
+      Object {
+        "map": undefined,
+        "name": "1l2vzaf",
+        "next": undefined,
+        "styles": "display:flex;justify-content:center;align-items:center;max-width:100%;max-height:100%;overflow:hidden;line-height:1.5;",
+        "toString": [Function],
+      }
+    }
+  >
+    <div
+      style={
+        Object {
+          "transform": "scale(0)",
+        }
+      }
+    >
+      <Component>
+        <h1>
+          Hoi!
+        </h1>
+      </Component>
+    </div>
+  </div>
+</Component>
+`;
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/with_auto_scale.test.tsx b/src/plugins/chart_expressions/expression_metric/public/components/with_auto_scale.test.tsx
index ab1165f5d5e9c..a227e459d294e 100644
--- a/src/plugins/chart_expressions/expression_metric/public/components/with_auto_scale.test.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/with_auto_scale.test.tsx
@@ -45,35 +45,7 @@ describe('AutoScale', () => {
     it('renders', () => {
       const Component = () => <h1>Hoi!</h1>;
       const WrappedComponent = withAutoScale(Component);
-      expect(mount(<WrappedComponent />)).toMatchInlineSnapshot(`
-        <Component>
-          <div
-            css={
-              Object {
-                "map": undefined,
-                "name": "1l2vzaf",
-                "next": undefined,
-                "styles": "display:flex;justify-content:center;align-items:center;max-width:100%;max-height:100%;overflow:hidden;line-height:1.5;",
-                "toString": [Function],
-              }
-            }
-          >
-            <div
-              style={
-                Object {
-                  "transform": "scale(0)",
-                }
-              }
-            >
-              <Component>
-                <h1>
-                  Hoi!
-                </h1>
-              </Component>
-            </div>
-          </div>
-        </Component>
-      `);
+      expect(mount(<WrappedComponent />)).toMatchSnapshot();
     });
   });
 });

From 7fce82884794003f963b0e2f9dbaf2b46790ac14 Mon Sep 17 00:00:00 2001
From: Uladzislau Lasitsa <Uladzislau_Lasitsa@epam.com>
Date: Fri, 11 Feb 2022 12:39:25 +0300
Subject: [PATCH 11/11] Fix some remarks

---
 .../public/components/with_auto_scale.styles.ts                | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/plugins/chart_expressions/expression_metric/public/components/with_auto_scale.styles.ts b/src/plugins/chart_expressions/expression_metric/public/components/with_auto_scale.styles.ts
index e9adb58da2410..ca55f85988228 100644
--- a/src/plugins/chart_expressions/expression_metric/public/components/with_auto_scale.styles.ts
+++ b/src/plugins/chart_expressions/expression_metric/public/components/with_auto_scale.styles.ts
@@ -7,6 +7,7 @@
  */
 
 import { css } from '@emotion/react';
+import { euiThemeVars } from '@kbn/ui-theme';
 
 export const autoScaleWrapperStyle = css({
   display: 'flex',
@@ -15,5 +16,5 @@ export const autoScaleWrapperStyle = css({
   maxWidth: '100%',
   maxHeight: '100%',
   overflow: 'hidden',
-  lineHeight: 1.5,
+  lineHeight: euiThemeVars.euiLineHeight,
 });