[Lens] Add metric Viz config options, title position and sizing

x-pack/plugins/lens/common/expressions/metric_chart/metric_chart.ts

@@ -38,6 +38,24 @@ export const metricChart: ExpressionFunctionDefinition<
         defaultMessage: 'The chart title.',
       }),
     },
+    size: {
+      types: ['string'],
+      help: i18n.translate('xpack.lens.metric.size.help', {
+        defaultMessage: 'The chart size.',
+      }),
+    },
+    titlePosition: {
+      types: ['string'],
+      help: i18n.translate('xpack.lens.metric.titlePosition.help', {
+        defaultMessage: 'The chart title position.',
+      }),
+    },
+    textAlign: {
+      types: ['string'],
+      help: i18n.translate('xpack.lens.metric.textAlignPosition.help', {
+        defaultMessage: 'The chart text align position.',
+      }),
+    },
     description: {
       types: ['string'],
       help: '',

x-pack/plugins/lens/common/expressions/metric_chart/types.ts

@@ -18,6 +18,9 @@ export interface MetricState {
   layerType: LayerType;
   colorMode?: ColorMode;
   palette?: PaletteOutput<CustomPaletteParams>;
+  titlePosition?: 'top' | 'bottom';
+  size?: string;
+  textAlign?: 'left' | 'right' | 'center';
 }
 
 export interface MetricConfig extends Omit<MetricState, 'palette' | 'colorMode'> {

x-pack/plugins/lens/public/metric_visualization/auto_scale.tsx

@@ -7,11 +7,15 @@
 
 import React from 'react';
 import { throttle } from 'lodash';
+import classNames from 'classnames';
 import { EuiResizeObserver } from '@elastic/eui';
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode | React.ReactNode[];
   minScale?: number;
+  size?: string;
+  titlePosition?: string;
+  textAlign?: string;
 }
 
 interface State {
@@ -56,7 +60,7 @@ export class AutoScale extends React.Component<Props, State> {
   };
 
   render() {
-    const { children, minScale, ...rest } = this.props;
+    const { children, minScale, size, textAlign, titlePosition, ...rest } = this.props;
     const { scale } = this.state;
     const style = this.props.style || {};
 
@@ -85,6 +89,13 @@ export class AutoScale extends React.Component<Props, State> {
               style={{
                 transform: `scale(${scale})`,
               }}
+              className={classNames('lnsMetricExpression_container_scale', {
+                rowDirection: ['left', 'right'].includes(titlePosition ?? ''),
+                alignStart: ['left', 'top'].includes(textAlign ?? ''),
+                alignEnd: ['right', 'bottom'].includes(textAlign ?? ''),
+                alignCenter: ['center', 'middle'].includes(textAlign ?? ''),
+                [`titleSize${(size ?? 'xl').toUpperCase()}`]: true,
+              })}
             >
               {children}
             </div>

x-pack/plugins/lens/public/metric_visualization/expression.scss

@@ -8,14 +8,83 @@
   text-align: center;
 
   .lnsMetricExpression__value {
-    font-size: $euiSizeXXL * 2;
+    font-size: $euiFontSizeXXL * 2;
     font-weight: $euiFontWeightSemiBold;
     border-radius: $euiBorderRadius;
-    padding: 0 $euiSize;
   }
 
   .lnsMetricExpression__title {
-    font-size: $euiSizeXL;
+    font-size: $euiFontSizeXXL;
     color: $euiTextColor;
+    &.reverseOrder {
+      order: 1;
+    }
   }
-}
+
+  .lnsMetricExpression_container_scale {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    &.rowDirection {
+      flex-direction: row;
+    }
+    &.alignStart {
+      align-items: start;
+    }
+    &.alignEnd {
+      align-items: end;
+    }
+    &.alignCenter {
+      align-items: center;
+    }
+    &.titleSizeXS {
+      .lnsMetricExpression__title {
+        font-size: $euiFontSizeS;
+      }
+      .lnsMetricExpression__value {
+        font-size: $euiFontSizeXS * 2;
+      }
+    }
+    &.titleSizeS {
+      .lnsMetricExpression__title {
+        font-size: $euiFontSizeS;
+      }
+      .lnsMetricExpression__value {
+        font-size: $euiFontSizeM * 2.25;
+      }
+    }
+    &.titleSizeM {
+      .lnsMetricExpression__title {
+        font-size: $euiFontSizeM;
+      }
+      .lnsMetricExpression__value {
+        font-size: $euiFontSizeL * 2;
+      }
+    }
+    &.titleSizeL {
+      .lnsMetricExpression__title {
+        font-size: $euiFontSizeL;
+      }
+      .lnsMetricExpression__value {
+        font-size: $euiFontSizeXL * 2;
+      }
+    }
+    &.titleSizeXL {
+      .lnsMetricExpression__title {
+        font-size: $euiFontSizeXL;
+      }
+      .lnsMetricExpression__value {
+        font-size: $euiFontSizeXXL * 2;
+      }
+    }
+
+    &.titleSizeXXL {
+      .lnsMetricExpression__title {
+        font-size: $euiFontSizeXXL;
+      }
+      .lnsMetricExpression__value {
+        font-size: $euiFontSizeXXL * 3;
+      }
+    }
+  }
+}

x-pack/plugins/lens/public/metric_visualization/expression.tsx

@@ -9,6 +9,7 @@ import './expression.scss';
 import { I18nProvider } from '@kbn/i18n-react';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import classNames from 'classnames';
 import { IUiSettingsClient, ThemeServiceStart } from 'kibana/public';
 import { KibanaThemeProvider } from '../../../../../src/plugins/kibana_react/public';
 import type {
@@ -109,7 +110,7 @@ export function MetricChart({
   formatFactory,
   uiSettings,
 }: MetricChartProps & { formatFactory: FormatFactory; uiSettings: IUiSettingsClient }) {
-  const { metricTitle, accessor, mode, colorMode, palette } = args;
+  const { metricTitle, accessor, mode, colorMode, palette, titlePosition, textAlign, size } = args;
   const firstTable = Object.values(data.tables)[0];
 
   const getEmptyState = () => (
@@ -144,19 +145,21 @@ export function MetricChart({
 
   return (
     <VisualizationContainer className="lnsMetricExpression__container" style={color}>
-      <AutoScale key={value}>
-        <div data-test-subj="lns_metric_value" className="lnsMetricExpression__value">
-          {value}
-        </div>
+      <AutoScale key={value} titlePosition={titlePosition} textAlign={textAlign} size={size}>
         {mode === 'full' && (
           <div
             data-test-subj="lns_metric_title"
-            className="lnsMetricExpression__title"
+            className={classNames('lnsMetricExpression__title', {
+              reverseOrder: ['bottom', 'right'].includes(titlePosition ?? ''),
+            })}
             style={colorMode === ColorMode.Background ? color : undefined}
           >
             {metricTitle}
           </div>
         )}
+        <div data-test-subj="lns_metric_value" className="lnsMetricExpression__value">
+          {value}
+        </div>
       </AutoScale>
     </VisualizationContainer>
   );

x-pack/plugins/lens/public/metric_visualization/metric_config_panel/align_options.tsx

@@ -0,0 +1,67 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import { EuiFormRow, EuiButtonGroup } from '@elastic/eui';
+import { MetricState } from '../../../common/expressions';
+
+export interface TitlePositionProps {
+  state: MetricState;
+  setState: (newState: MetricState) => void;
+}
+
+const alignButtonIcons = [
+  {
+    id: `left`,
+    label: i18n.translate('xpack.lens.metricChart.alignLabel.left', {
+      defaultMessage: 'Align left',
+    }),
+    iconType: 'editorAlignLeft',
+  },
+  {
+    id: `center`,
+    label: i18n.translate('xpack.lens.metricChart.alignLabel.center', {
+      defaultMessage: 'Align center',
+    }),
+    iconType: 'editorAlignCenter',
+  },
+  {
+    id: `right`,
+    label: i18n.translate('xpack.lens.metricChart.alignLabel.right', {
+      defaultMessage: 'Align right',
+    }),
+    iconType: 'editorAlignRight',
+  },
+];
+
+export const AlignOptions: React.FC<TitlePositionProps> = ({ state, setState }) => {
+  return (
+    <EuiFormRow
+      display="columnCompressed"
+      label={
+        <>
+          {i18n.translate('xpack.lens.metricChart.titleAlignLabel', {
+            defaultMessage: 'Align',
+          })}
+        </>
+      }
+    >
+      <EuiButtonGroup
+        legend={i18n.translate('xpack.lens.metricChart.titleAlignLabel', {
+          defaultMessage: 'Align',
+        })}
+        options={alignButtonIcons}
+        idSelected={state.textAlign ?? 'center'}
+        onChange={(id) => {
+          setState({ ...state, textAlign: id as MetricState['textAlign'] });
+        }}
+        isIconOnly
+      />
+    </EuiFormRow>
+  );
+};

x-pack/plugins/lens/public/metric_visualization/metric_config_panel/appearance_options_popover.tsx

@@ -0,0 +1,48 @@
+/*
+ * 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 { i18n } from '@kbn/i18n';
+import { ToolbarPopover, TooltipWrapper } from '../../shared_components';
+import { TitlePositionOptions } from './title_position_option';
+import { FramePublicAPI } from '../../types';
+import { MetricState } from '../../../common/expressions';
+import { AlignOptions } from './align_options';
+import { SizeOptions } from './size_options';
+
+export interface VisualOptionsPopoverProps {
+  state: MetricState;
+  setState: (newState: MetricState) => void;
+  datasourceLayers: FramePublicAPI['datasourceLayers'];
+}
+
+export const AppearanceOptionsPopover: React.FC<VisualOptionsPopoverProps> = ({
+  state,
+  setState,
+}) => {
+  return (
+    <TooltipWrapper
+      tooltipContent={i18n.translate('xpack.lens.shared.AppearanceLabel', {
+        defaultMessage: 'Appearance',
+      })}
+      condition={true}
+    >
+      <ToolbarPopover
+        title={i18n.translate('xpack.lens.shared.metric.appearanceLabel', {
+          defaultMessage: 'Appearance',
+        })}
+        type="visualOptions"
+        groupPosition="none"
+        buttonDataTestSubj="lnsMetricAppearanceButton"
+      >
+        <AlignOptions state={state} setState={setState} />
+        <SizeOptions state={state} setState={setState} />
+        <TitlePositionOptions state={state} setState={setState} />
+      </ToolbarPopover>
+    </TooltipWrapper>
+  );
+};

x-pack/plugins/lens/public/metric_visualization/metric_config_panel/index.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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, { memo } from 'react';
+import { EuiFlexGroup, EuiFlexItem, htmlIdGenerator } from '@elastic/eui';
+import type { VisualizationToolbarProps } from '../../types';
+
+import { AppearanceOptionsPopover } from './appearance_options_popover';
+import { MetricState } from '../../../common/expressions';
+
+export const MetricToolbar = memo(function MetricToolbar(
+  props: VisualizationToolbarProps<MetricState>
+) {
+  const { state, setState, frame } = props;
+
+  return (
+    <EuiFlexGroup gutterSize="m" justifyContent="spaceBetween" responsive={false}>
+      <EuiFlexItem>
+        <EuiFlexGroup gutterSize="none" responsive={false}>
+          <AppearanceOptionsPopover
+            state={state}
+            setState={setState}
+            datasourceLayers={frame.datasourceLayers}
+          />
+        </EuiFlexGroup>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+});
+
+export const idPrefix = htmlIdGenerator()();