Add labelFont and LabelPosition args in metric expression

elastic · Feb 10, 2022 · af2c424 · af2c424
1 parent 87eaa75
commit af2c424
Show file tree

Hide file tree

Showing 12 changed files with 123 additions and 17 deletions.
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
@@ -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/...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
@@ -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
@@ -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
@@ -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/...lugins/chart_expressions/expression_metric/public/__stories__/metric_renderer.stories.tsx b/...lugins/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/...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
@@ -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
@@ -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
@@ -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
@@ -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();

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