[MetricVis] Add possibility to configure label font and position in metric unified renderer

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',

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', {
@@ -118,6 +133,10 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
             metricColorMode: args.colorMode,
             labels: {
               show: args.showLabels,
+              position: args.labelPosition,
+              style: {
+                ...args.labelFont,
+              },
             },
             style: {
               bgColor: args.colorMode === ColorMode.Background,

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;
   autoScale?: boolean;

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;
   autoScale?: boolean;
 }

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}

src/plugins/chart_expressions/expression_metric/public/components/metric.scss

@@ -25,6 +25,8 @@
 .mtrVis__container {
   text-align: center;
   padding: $euiSize;
+  display: flex;
+  flex-direction: column;
 }
 
 .mtrVis__container--light {

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: {

src/plugins/chart_expressions/expression_metric/public/components/metric_component.tsx

@@ -123,7 +123,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}
       />
     );
   };

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,38 +24,63 @@ 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);
   });
 
   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();

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>
   );
 

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":{"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"}}
+{"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":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"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"}}

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":{"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"}}
+{"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":{"position":"bottom","show":true,"style":{"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:24px;line-height:1","spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"24px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}},"metricColorMode":"None","palette":null,"percentageMode":false,"style":{"bgColor":false,"css":"font-family:'Open Sans', Helvetica, Arial, sans-serif;font-weight:normal;font-style:normal;text-decoration:none;text-align:center;font-size:60px;line-height:1","labelColor":false,"spec":{"fontFamily":"'Open Sans', Helvetica, Arial, sans-serif","fontSize":"60px","fontStyle":"normal","fontWeight":"normal","lineHeight":"1","textAlign":"center","textDecoration":"none"},"type":"style"}}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"hasPrecisionError":false,"id":"1","indexPatternId":"logstash-*","params":{},"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"}}