From af2c4247c98362ce3d72c1869bb6ec4b0456051a Mon Sep 17 00:00:00 2001
From: Uladzislau Lasitsa <Uladzislau_Lasitsa@epam.com>
Date: Thu, 10 Feb 2022 17:35:47 +0300
Subject: [PATCH] Add `labelFont` and `LabelPosition` args in metric expression

---
 .../metric_vis_function.test.ts.snap          |  8 ++++
 .../metric_vis_function.test.ts               |  2 +
 .../metric_vis_function.ts                    | 19 ++++++++++
 .../common/types/expression_functions.ts      |  2 +
 .../common/types/expression_renderers.ts      |  2 +-
 .../__stories__/metric_renderer.stories.tsx   | 11 +++++-
 .../metric_component.test.tsx.snap            | 36 ++++++++++++++++--
 .../public/components/metric.scss             |  2 +
 .../components/metric_component.test.tsx      |  2 +
 .../public/components/metric_component.tsx    |  2 +-
 .../public/components/metric_value.test.tsx   | 37 ++++++++++++++++---
 .../public/components/metric_value.tsx        | 17 +++++++--
 12 files changed, 123 insertions(+), 17 deletions(-)

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..affd547dab0cd 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
@@ -41,7 +41,15 @@ Object {
       },
       "metric": Object {
         "labels": Object {
+          "position": "bottom",
           "show": true,
+          "style": Object {
+            "css": "",
+            "spec": Object {
+              "fontSize": "24px",
+            },
+            "type": "style",
+          },
         },
         "metricColorMode": "None",
         "palette": Object {
diff --git 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
index faf2f93e4d188..3d7b70ce1715c 100644
--- 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
@@ -35,6 +35,8 @@ describe('interpreter/functions#metric', () => {
     },
     showLabels: true,
     font: { spec: { fontSize: '60px' }, type: 'style', css: '' },
+    labelFont: { spec: { fontSize: '24px' }, type: 'style', css: '' },
+    labelPosition: 'bottom',
     metric: [
       {
         type: 'vis_dimension',
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..5bf59e3bdb7a0 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
@@ -57,6 +57,21 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
       }),
       default: `{font size=60 align="center"}`,
     },
+    labelFont: {
+      types: ['style'],
+      help: i18n.translate('expressionMetricVis.function.labelFont.help', {
+        defaultMessage: 'Label font settings.',
+      }),
+      default: `{font size=24 align="center"}`,
+    },
+    labelPosition: {
+      types: ['string'],
+      options: ['bottom', 'top'],
+      help: i18n.translate('expressionMetricVis.function.labelPosition.help', {
+        defaultMessage: 'Label position',
+      }),
+      default: `bottom`,
+    },
     metric: {
       types: ['vis_dimension'],
       help: i18n.translate('expressionMetricVis.function.metric.help', {
@@ -111,6 +126,10 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
             metricColorMode: args.colorMode,
             labels: {
               show: args.showLabels,
+              position: args.labelPosition,
+              style: {
+                ...args.labelFont,
+              },
             },
             style: {
               bgColor: args.colorMode === ColorMode.Background,
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..33d588d31aae9 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
@@ -23,6 +23,8 @@ export interface MetricArguments {
   showLabels: boolean;
   palette?: PaletteOutput<CustomPaletteState>;
   font: Style;
+  labelFont: Style;
+  labelPosition: 'bottom' | 'top';
   metric: ExpressionValueVisDimension[];
   bucket?: ExpressionValueVisDimension;
 }
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..74a5963702ea9 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
@@ -28,7 +28,7 @@ export interface MetricVisParam {
   percentageFormatPattern?: string;
   metricColorMode: ColorMode;
   palette?: CustomPaletteState;
-  labels: Labels;
+  labels: Labels & { style: Style; position: 'bottom' | 'top' };
   style: MetricStyle;
 }
 
diff --git 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
index 18f97f23538c2..cff5acf8ac5a0 100644
--- 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
@@ -57,7 +57,7 @@ const config: MetricVisRenderConfig = {
   visConfig: {
     metric: {
       metricColorMode: ColorMode.None,
-      labels: { show: true },
+      labels: { show: true, style: { spec: {}, type: 'style', css: '' }, position: 'bottom' },
       percentageMode: false,
       style,
     },
@@ -132,7 +132,14 @@ storiesOf('renderers/visMetric', module)
           ...config,
           visConfig: {
             ...config.visConfig,
-            metric: { ...config.visConfig.metric, labels: { show: false } },
+            metric: {
+              ...config.visConfig.metric,
+              labels: {
+                show: false,
+                style: { spec: {}, type: 'style', css: '' },
+                position: 'bottom',
+              },
+            },
           },
         }}
         {...containerSize}
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..8aff94230d544 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
@@ -4,6 +4,17 @@ exports[`MetricVisComponent should render correct structure for multi-value metr
 Array [
   <MetricVisValue
     key="0"
+    labelConfig={
+      Object {
+        "position": "bottom",
+        "show": true,
+        "style": Object {
+          "css": "",
+          "spec": Object {},
+          "type": "style",
+        },
+      }
+    }
     metric={
       Object {
         "bgColor": undefined,
@@ -14,7 +25,6 @@ Array [
         "value": 182,
       }
     }
-    showLabel={true}
     style={
       Object {
         "bgColor": false,
@@ -27,6 +37,17 @@ Array [
   />,
   <MetricVisValue
     key="1"
+    labelConfig={
+      Object {
+        "position": "bottom",
+        "show": true,
+        "style": Object {
+          "css": "",
+          "spec": Object {},
+          "type": "style",
+        },
+      }
+    }
     metric={
       Object {
         "bgColor": undefined,
@@ -37,7 +58,6 @@ Array [
         "value": 445842.4634666484,
       }
     }
-    showLabel={true}
     style={
       Object {
         "bgColor": false,
@@ -54,6 +74,17 @@ Array [
 exports[`MetricVisComponent should render correct structure for single metric 1`] = `
 <MetricVisValue
   key="0"
+  labelConfig={
+    Object {
+      "position": "bottom",
+      "show": true,
+      "style": Object {
+        "css": "",
+        "spec": Object {},
+        "type": "style",
+      },
+    }
+  }
   metric={
     Object {
       "bgColor": undefined,
@@ -64,7 +95,6 @@ exports[`MetricVisComponent should render correct structure for single metric 1`
       "value": 4301021,
     }
   }
-  showLabel={true}
   style={
     Object {
       "bgColor": false,
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..03dffb5af9760 100644
--- a/src/plugins/chart_expressions/expression_metric/public/components/metric.scss
+++ b/src/plugins/chart_expressions/expression_metric/public/components/metric.scss
@@ -23,6 +23,8 @@
 .mtrVis__container {
   text-align: center;
   padding: $euiSize;
+  display: flex;
+  flex-direction: column;
 }
 
 .mtrVis__container--light {
diff --git 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
index 033cdd629b8eb..88a82cebf25f7 100644
--- 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
@@ -54,6 +54,8 @@ describe('MetricVisComponent', function () {
       },
       labels: {
         show: true,
+        style: { spec: {}, type: 'style', css: '' },
+        position: 'bottom',
       },
     },
     dimensions: {
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..9264022ad92df 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
@@ -116,7 +116,7 @@ class MetricVisComponent extends Component<MetricVisComponentProps> {
         onFilter={
           this.props.visParams.dimensions.bucket ? () => this.filterBucket(index) : undefined
         }
-        showLabel={this.props.visParams.metric.labels.show}
+        labelConfig={this.props.visParams.metric.labels}
       />
     );
   };
diff --git 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
index 9a9e0eef5df97..cabbb28e49309 100644
--- 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,7 +10,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import { MetricVisValue } from './metric_value';
-import { MetricOptions, MetricStyle } from '../../common/types';
+import { MetricOptions, MetricStyle, VisParams } from '../../common/types';
 
 const baseMetric: MetricOptions = { label: 'Foo', value: 'foo', lightText: false };
 const font: MetricStyle = {
@@ -24,30 +24,50 @@ const font: MetricStyle = {
   /* stylelint-enable */
 };
 
+const labelConfig: VisParams['metric']['labels'] = {
+  show: true,
+  position: 'bottom',
+  style: { spec: {}, type: 'style', css: '' },
+};
+
 describe('MetricVisValue', () => {
   it('should be wrapped in button if having a click listener', () => {
     const component = shallow(
-      <MetricVisValue style={font} metric={baseMetric} onFilter={() => {}} />
+      <MetricVisValue
+        style={font}
+        metric={baseMetric}
+        onFilter={() => {}}
+        labelConfig={labelConfig}
+      />
     );
     expect(component.find('button').exists()).toBe(true);
   });
 
   it('should not be wrapped in button without having a click listener', () => {
-    const component = shallow(<MetricVisValue style={font} metric={baseMetric} />);
+    const component = shallow(
+      <MetricVisValue style={font} metric={baseMetric} labelConfig={labelConfig} />
+    );
     expect(component.find('button').exists()).toBe(false);
   });
 
   it('should add -isfilterable class if onFilter is provided', () => {
     const onFilter = jest.fn();
     const component = shallow(
-      <MetricVisValue style={font} metric={baseMetric} onFilter={onFilter} />
+      <MetricVisValue
+        style={font}
+        metric={baseMetric}
+        onFilter={onFilter}
+        labelConfig={labelConfig}
+      />
     );
     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 style={font} metric={baseMetric} />);
+    const component = shallow(
+      <MetricVisValue style={font} metric={baseMetric} labelConfig={labelConfig} />
+    );
     component.simulate('click');
     expect(component.find('.mtrVis__container-isfilterable')).toHaveLength(0);
   });
@@ -55,7 +75,12 @@ describe('MetricVisValue', () => {
   it('should call onFilter callback if provided', () => {
     const onFilter = jest.fn();
     const component = shallow(
-      <MetricVisValue style={font} metric={baseMetric} onFilter={onFilter} />
+      <MetricVisValue
+        style={font}
+        metric={baseMetric}
+        onFilter={onFilter}
+        labelConfig={labelConfig}
+      />
     );
     component.simulate('click');
     expect(onFilter).toHaveBeenCalled();
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric_value.tsx b/src/plugins/chart_expressions/expression_metric/public/components/metric_value.tsx
index 54662ee647b6a..7ca16dcaf862d 100644
--- a/src/plugins/chart_expressions/expression_metric/public/components/metric_value.tsx
+++ b/src/plugins/chart_expressions/expression_metric/public/components/metric_value.tsx
@@ -8,16 +8,16 @@
 
 import React, { CSSProperties } from 'react';
 import classNames from 'classnames';
-import type { MetricOptions, MetricStyle } from '../../common/types';
+import type { MetricOptions, MetricStyle, MetricVisParam } from '../../common/types';
 
 interface MetricVisValueProps {
   metric: MetricOptions;
   onFilter?: () => void;
-  showLabel?: boolean;
   style: MetricStyle;
+  labelConfig: MetricVisParam['labels'];
 }
 
-export const MetricVisValue = ({ style, metric, onFilter, showLabel }: MetricVisValueProps) => {
+export const MetricVisValue = ({ style, metric, onFilter, labelConfig }: MetricVisValueProps) => {
   const containerClassName = classNames('mtrVis__container', {
     // eslint-disable-next-line @typescript-eslint/naming-convention
     'mtrVis__container--light': metric.lightText,
@@ -43,7 +43,16 @@ export const MetricVisValue = ({ style, metric, onFilter, showLabel }: MetricVis
          */
         dangerouslySetInnerHTML={{ __html: metric.value }} // eslint-disable-line react/no-danger
       />
-      {showLabel && <div>{metric.label}</div>}
+      {labelConfig.show && (
+        <div
+          style={{
+            ...(labelConfig.style.spec as CSSProperties),
+            order: labelConfig.position === 'top' ? -1 : 2,
+          }}
+        >
+          {metric.label}
+        </div>
+      )}
     </div>
   );