[MetricVis] Add possibility to configure label font and position in m…

…etric unified renderer (#125251) * Add `labelFont` and `LabelPosition` args in metric expression * Fix CI * Fixed remarks * Some fixes Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Feb 16, 2022 · cf25ac3 · cf25ac3
1 parent a6b5c86
commit cf25ac3
Show file tree

Hide file tree

Showing 22 changed files with 206 additions and 28 deletions.
diff --git a/src/plugins/chart_expressions/expression_metric/common/constants.ts b/src/plugins/chart_expressions/expression_metric/common/constants.ts
@@ -7,3 +7,8 @@
  */
 
 export const EXPRESSION_METRIC_NAME = 'metricVis';
+
+export const LabelPosition = {
+  BOTTOM: 'bottom',
+  TOP: 'top',
+} as const;
diff --git a/...ression_metric/common/expression_functions/__snapshots__/metric_vis_function.test.ts.snap b/...ression_metric/common/expression_functions/__snapshots__/metric_vis_function.test.ts.snap
diff --git a/...art_expressions/expression_metric/common/expression_functions/metric_vis_function.test.ts b/...art_expressions/expression_metric/common/expression_functions/metric_vis_function.test.ts
@@ -10,6 +10,7 @@ import { metricVisFunction } from './metric_vis_function';
 import type { MetricArguments } from '../../common';
 import { functionWrapper } from '../../../../expressions/common/expression_functions/specs/tests/utils';
 import { Datatable } from '../../../../expressions/common/expression_types/specs';
+import { LabelPosition } from '../constants';
 
 describe('interpreter/functions#metric', () => {
   const fn = functionWrapper(metricVisFunction());
@@ -35,6 +36,8 @@ describe('interpreter/functions#metric', () => {
     },
     showLabels: true,
     font: { spec: { fontSize: '60px' }, type: 'style', css: '' },
+    labelFont: { spec: { fontSize: '24px' }, type: 'style', css: '' },
+    labelPosition: LabelPosition.BOTTOM,
     metric: [
       {
         type: 'vis_dimension',

diff --git a/...ns/chart_expressions/expression_metric/common/expression_functions/metric_vis_function.ts b/...ns/chart_expressions/expression_metric/common/expression_functions/metric_vis_function.ts
@@ -12,7 +12,31 @@ import { visType } from '../types';
 import { prepareLogTable, Dimension } from '../../../../visualizations/common/prepare_log_table';
 import { ColorMode } from '../../../../charts/common';
 import { MetricVisExpressionFunctionDefinition } from '../types';
-import { EXPRESSION_METRIC_NAME } from '../constants';
+import { EXPRESSION_METRIC_NAME, LabelPosition } from '../constants';
+
+const validateOptions = (
+  value: string,
+  availableOptions: Record<string, string>,
+  getErrorMessage: () => string
+) => {
+  if (!Object.values(availableOptions).includes(value)) {
+    throw new Error(getErrorMessage());
+  }
+};
+
+const errors = {
+  invalidColorModeError: () =>
+    i18n.translate('expressionMetricVis.function.errors.invalidColorModeError', {
+      defaultMessage: 'Invalid color mode is specified. Supported color modes: {colorModes}',
+      values: { colorModes: Object.values(ColorMode).join(', ') },
+    }),
+  invalidLabelPositionError: () =>
+    i18n.translate('expressionMetricVis.function.errors.invalidLabelPositionError', {
+      defaultMessage:
+        'Invalid label position is specified. Supported label positions: {labelPosition}',
+      values: { labelPosition: Object.values(LabelPosition).join(', ') },
+    }),
+};
 
 export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
   name: EXPRESSION_METRIC_NAME,
@@ -57,6 +81,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: [LabelPosition.BOTTOM, LabelPosition.TOP],
+      help: i18n.translate('expressionMetricVis.function.labelPosition.help', {
+        defaultMessage: 'Label position',
+      }),
+      default: LabelPosition.BOTTOM,
+    },
     metric: {
       types: ['vis_dimension'],
       help: i18n.translate('expressionMetricVis.function.metric.help', {
@@ -84,6 +123,9 @@ export const metricVisFunction = (): MetricVisExpressionFunctionDefinition => ({
       throw new Error('Palette must be provided when using percentageMode');
     }
 
+    validateOptions(args.colorMode, ColorMode, errors.invalidColorModeError);
+    validateOptions(args.labelPosition, LabelPosition, errors.invalidLabelPositionError);
+
     if (handlers?.inspectorAdapters?.tables) {
       const argsTable: Dimension[] = [
         [
@@ -118,6 +160,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
@@ -14,7 +14,7 @@ import {
 } from '../../../../expressions';
 import { ExpressionValueVisDimension } from '../../../../visualizations/common';
 import { ColorMode, CustomPaletteState, PaletteOutput } from '../../../../charts/common';
-import { VisParams, visType } from './expression_renderers';
+import { VisParams, visType, LabelPositionType } from './expression_renderers';
 import { EXPRESSION_METRIC_NAME } from '../constants';
 
 export interface MetricArguments {
@@ -23,6 +23,8 @@ export interface MetricArguments {
   showLabels: boolean;
   palette?: PaletteOutput<CustomPaletteState>;
   font: Style;
+  labelFont: Style;
+  labelPosition: LabelPositionType;
   metric: ExpressionValueVisDimension[];
   bucket?: ExpressionValueVisDimension;
   autoScale?: boolean;

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
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { $Values } from '@kbn/utility-types';
 import { ExpressionValueVisDimension } from '../../../../visualizations/common';
 import {
   ColorMode,
@@ -14,6 +15,7 @@ import {
   Style as ChartStyle,
 } from '../../../../charts/common';
 import { Style } from '../../../../expressions/common';
+import { LabelPosition } from '../constants';
 
 export const visType = 'metric';
 
@@ -22,13 +24,17 @@ export interface DimensionsVisParam {
   bucket?: ExpressionValueVisDimension;
 }
 
+export type LabelPositionType = $Values<typeof LabelPosition>;
+
 export type MetricStyle = Style & Pick<ChartStyle, 'bgColor' | 'labelColor'>;
+
+export type LabelsConfig = Labels & { style: Style; position: LabelPositionType };
 export interface MetricVisParam {
   percentageMode: boolean;
   percentageFormatPattern?: string;
   metricColorMode: ColorMode;
   palette?: CustomPaletteState;
-  labels: Labels;
+  labels: LabelsConfig;
   style: MetricStyle;
   autoScale?: boolean;
 }

diff --git a/...lugins/chart_expressions/expression_metric/public/__stories__/metric_renderer.stories.tsx b/...lugins/chart_expressions/expression_metric/public/__stories__/metric_renderer.stories.tsx
@@ -15,6 +15,7 @@ import { Render } from '../../../../presentation_util/public/__stories__';
 import { ColorMode, CustomPaletteState } from '../../../../charts/common';
 import { getMetricVisRenderer } from '../expression_renderers';
 import { MetricStyle, MetricVisRenderConfig, visType } from '../../common/types';
+import { LabelPosition } from '../../common/constants';
 
 const palette: CustomPaletteState = {
   colors: ['rgb(219 231 38)', 'rgb(112 38 231)', 'rgb(38 124 231)'],
@@ -57,7 +58,11 @@ const config: MetricVisRenderConfig = {
   visConfig: {
     metric: {
       metricColorMode: ColorMode.None,
-      labels: { show: true },
+      labels: {
+        show: true,
+        style: { spec: {}, type: 'style', css: '' },
+        position: LabelPosition.BOTTOM,
+      },
       percentageMode: false,
       style,
     },
@@ -132,7 +137,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: LabelPosition.BOTTOM,
+              },
+            },
           },
         }}
         {...containerSize}
@@ -160,6 +172,32 @@ storiesOf('renderers/visMetric', module)
       />
     );
   })
+  .add('With label position is top and custom font for label', () => {
+    return (
+      <Render
+        renderer={metricVisRenderer}
+        config={{
+          ...config,
+          visConfig: {
+            ...config.visConfig,
+            metric: {
+              ...config.visConfig.metric,
+              style: {
+                ...config.visConfig.metric.style,
+                spec: { ...config.visConfig.metric.style.spec, fontSize: '80px' },
+              },
+              labels: {
+                show: false,
+                style: { spec: { fontSize: '60px', align: 'left' }, type: 'style', css: '' },
+                position: LabelPosition.TOP,
+              },
+            },
+          },
+        }}
+        {...containerSize}
+      />
+    );
+  })
   .add('With color ranges, background color mode', () => {
     return (
       <Render

diff --git a/...ressions/expression_metric/public/components/__snapshots__/metric_component.test.tsx.snap b/...ressions/expression_metric/public/components/__snapshots__/metric_component.test.tsx.snap
diff --git a/src/plugins/chart_expressions/expression_metric/public/components/metric.scss b/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 {

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
@@ -10,6 +10,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import { Datatable } from '../../../../expressions/common';
 import MetricVisComponent, { MetricVisComponentProps } from './metric_component';
+import { LabelPosition } from '../../common/constants';
 
 jest.mock('../../../expression_metric/public/services', () => ({
   getFormatService: () => {
@@ -54,6 +55,8 @@ describe('MetricVisComponent', function () {
       },
       labels: {
         show: true,
+        style: { spec: {}, type: 'style', css: '' },
+        position: LabelPosition.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
@@ -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}
       />
     );
   };