[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.',
       }),
     },
+    titleSize: {
+      types: ['string'],
+      help: i18n.translate('xpack.lens.metric.titleSize.help', {
+        defaultMessage: 'The chart title size.',
+      }),
+    },
+    titlePosition: {
+      types: ['string'],
+      help: i18n.translate('xpack.lens.metric.titlePosition.help', {
+        defaultMessage: 'The chart title position.',
+      }),
+    },
+    titleAlignPosition: {
+      types: ['string'],
+      help: i18n.translate('xpack.lens.metric.titleAlignPosition.help', {
+        defaultMessage: 'The chart title 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?: string;
+  titleSize?: string;
+  titleAlignPosition?: string;
 }
 
 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;
+  titleSize?: string;
+  titlePosition?: string;
+  titleAlignPosition?: string;
 }
 
 interface State {
@@ -56,7 +60,8 @@ export class AutoScale extends React.Component<Props, State> {
   };
 
   render() {
-    const { children, minScale, ...rest } = this.props;
+    const { children, minScale, titleSize, titleAlignPosition, titlePosition, ...rest } =
+      this.props;
     const { scale } = this.state;
     const style = this.props.style || {};
 
@@ -85,6 +90,13 @@ export class AutoScale extends React.Component<Props, State> {
               style={{
                 transform: `scale(${scale})`,
               }}
+              className={classNames('lnsMetricExpression_title_container', {
+                rowDirection: ['left', 'right'].includes(titlePosition ?? ''),
+                alignStart: ['left', 'top'].includes(titleAlignPosition ?? ''),
+                alignEnd: ['right', 'bottom'].includes(titleAlignPosition ?? ''),
+                alignCenter: ['center', 'middle'].includes(titleAlignPosition ?? ''),
+                [`titleSize${(titleSize ?? 'xl').toUpperCase()}`]: true,
+              })}
             >
               {children}
             </div>

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

@@ -11,11 +11,81 @@
     font-size: $euiSizeXXL * 2;
     font-weight: $euiFontWeightSemiBold;
     border-radius: $euiBorderRadius;
-    padding: 0 $euiSize;
   }
 
   .lnsMetricExpression__title {
     font-size: $euiSizeXL;
     color: $euiTextColor;
+    &.reversOrder {
+      order: 1;
+    }
   }
-}
+
+  .lnsMetricExpression_title_container {
+    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: $euiSizeXS;
+      }
+      .lnsMetricExpression__value {
+        font-size: $euiSizeS * 2;
+      }
+    }
+    &.titleSizeS {
+      .lnsMetricExpression__title {
+        font-size: $euiSizeS * 1.5;
+        font-weight: 700;
+      }
+      .lnsMetricExpression__value {
+        font-size: $euiSizeM * 2.25;
+      }
+    }
+    &.titleSizeM {
+      .lnsMetricExpression__title {
+        font-size: $euiSizeM * 1.5;
+      }
+      .lnsMetricExpression__value {
+        font-size: $euiSizeL * 2;
+      }
+    }
+    &.titleSizeL {
+      .lnsMetricExpression__title {
+        font-size: $euiSizeL;
+      }
+      .lnsMetricExpression__value {
+        font-size: $euiSizeXL * 2;
+      }
+    }
+    &.titleSizeXL {
+      .lnsMetricExpression__title {
+        font-size: $euiSizeXL;
+      }
+      .lnsMetricExpression__value {
+        font-size: $euiSizeXXL * 2;
+      }
+    }
+
+    &.titleSizeXXL {
+      .lnsMetricExpression__title {
+        font-size: $euiSizeXXL;
+      }
+      .lnsMetricExpression__value {
+        font-size: $euiSizeXXL * 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,16 @@ export function MetricChart({
   formatFactory,
   uiSettings,
 }: MetricChartProps & { formatFactory: FormatFactory; uiSettings: IUiSettingsClient }) {
-  const { metricTitle, accessor, mode, colorMode, palette } = args;
+  const {
+    metricTitle,
+    accessor,
+    mode,
+    colorMode,
+    palette,
+    titlePosition,
+    titleAlignPosition,
+    titleSize,
+  } = args;
   const firstTable = Object.values(data.tables)[0];
 
   const getEmptyState = () => (
@@ -144,19 +154,26 @@ 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}
+        titleAlignPosition={titleAlignPosition}
+        titleSize={titleSize}
+      >
         {mode === 'full' && (
           <div
             data-test-subj="lns_metric_title"
-            className="lnsMetricExpression__title"
+            className={classNames('lnsMetricExpression__title', {
+              reversOrder: ['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/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 { VisualOptionsPopover } from './visual_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}>
+          <VisualOptionsPopover
+            state={state}
+            setState={setState}
+            datasourceLayers={frame.datasourceLayers}
+          />
+        </EuiFlexGroup>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+});
+
+export const idPrefix = htmlIdGenerator()();

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

@@ -0,0 +1,58 @@
+/*
+ * 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, EuiSuperSelect } from '@elastic/eui';
+import { MetricState } from '../../../common/expressions';
+
+export interface TitlePositionProps {
+  state: MetricState;
+  setState: (newState: MetricState) => void;
+}
+
+const titleSizes = [
+  { id: 'xs', label: 'XS' },
+  { id: 's', label: 'S' },
+  { id: 'm', label: 'M' },
+  { id: 'l', label: 'L' },
+  { id: 'xl', label: 'XL' },
+  { id: 'xxl', label: 'XXL' },
+];
+
+export const TitleSizeOptions: React.FC<TitlePositionProps> = ({ state, setState }) => {
+  return (
+    <EuiFormRow
+      display="columnCompressed"
+      label={
+        <>
+          {i18n.translate('xpack.lens.metricChart.titleSizeLabel', {
+            defaultMessage: 'Title size',
+          })}
+        </>
+      }
+    >
+      <EuiSuperSelect
+        data-test-subj="lnsMissingValuesSelect"
+        compressed
+        options={titleSizes.map((position) => {
+          return {
+            value: position.id,
+            dropdownDisplay: position.label,
+            inputDisplay: position.label,
+          };
+        })}
+        valueOfSelected={state.titleSize ?? 'xl'}
+        onChange={(value) => {
+          setState({ ...state, titleSize: value });
+        }}
+        itemLayoutAlign="top"
+        hasDividers
+      />
+    </EuiFormRow>
+  );
+};

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

@@ -0,0 +1,62 @@
+/*
+ * 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, EuiSuperSelect } from '@elastic/eui';
+import { MetricState } from '../../../common/expressions';
+
+export interface TitlePositionProps {
+  state: MetricState;
+  setState: (newState: MetricState) => void;
+}
+
+const titleAlignPositions = [
+  { id: 'top', label: 'Top', direction: 'column' },
+  { id: 'bottom', label: 'Bottom', direction: 'column' },
+  { id: 'middle', label: 'Middle', direction: 'column' },
+  { id: 'left', label: 'Left', direction: 'row' },
+  { id: 'right', label: 'Right', direction: 'row' },
+  { id: 'center', label: 'Center', direction: 'row' },
+];
+
+export const TitleAlignOptions: React.FC<TitlePositionProps> = ({ state, setState }) => {
+  const direction = ['top', 'bottom'].includes(state.titlePosition ?? 'top') ? 'column' : 'row';
+
+  return (
+    <EuiFormRow
+      display="columnCompressed"
+      label={
+        <>
+          {i18n.translate('xpack.lens.metricChart.titleAlignLabel', {
+            defaultMessage: 'Title align',
+          })}
+        </>
+      }
+    >
+      <EuiSuperSelect
+        data-test-subj="lnsMissingValuesSelect"
+        compressed
+        options={titleAlignPositions
+          .filter((pos) => pos.direction !== direction)
+          .map((position) => {
+            return {
+              value: position.id,
+              dropdownDisplay: position.label,
+              inputDisplay: position.label,
+            };
+          })}
+        valueOfSelected={state.titleAlignPosition ?? 'center'}
+        onChange={(value) => {
+          setState({ ...state, titleAlignPosition: value });
+        }}
+        itemLayoutAlign="top"
+        hasDividers
+      />
+    </EuiFormRow>
+  );
+};