feat(metric): Add ability to vertically align the metrics values to the middle of the chart

e2e/tests/metric_stories.test.ts

@@ -112,6 +112,15 @@ test.describe('Metric', () => {
     );
   });
 
+  test('should render metric with value in middle position', async ({ page }) => {
+    await common.expectChartAtUrlToMatchScreenshot(page)(
+      `http://localhost:9001/?path=/story/metric-alpha--basic&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:light&knob-value text-align=center&knob-value position=middle`,
+      {
+        action: async () => await common.setResizeDimensions(page)({ height: 300, width: 200 }),
+      },
+    );
+  });
+
   test('should use restrictive breakpoint at 99px height', async ({ page }) => {
     await common.expectChartAtUrlToMatchScreenshot(page)(
       `http://localhost:9001/?path=/story/metric-alpha--layout&globals=theme:light;toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false&knob-Aria description_Secondary metric=This is a description&knob-Bar background_Colors=rgb(194,201,214)&knob-Blending background_Colors=rgba(255,255,255,1)&knob-Color by value_Secondary metric=true&knob-Custom extra_Secondary metric=last <b>5m</b>&knob-Extra element alignment_Text configuration and position=left&knob-Is numeric metric=true&knob-Label_Secondary metric=Last week&knob-Metric color_Colors=rgb(246,217,143)&knob-Metric icon align_Text configuration and position=right&knob-Primary metric alignment_Text configuration and position=left&knob-Primary metric font size (only if custom font size selected)_Text configuration and position=40&knob-Primary metric font size mode_Text configuration and position=default&knob-Primary metric position_Text configuration and position=top&knob-Progress bar direction=horizontal&knob-Progress max=100&knob-Secondary metric label position_Secondary metric=before&knob-Secondary metric trend icon position_Secondary metric=after&knob-Secondary metric trend icon_Secondary metric=↑&knob-Secondary metric value color_Secondary metric=rgb(93, 191, 149)&knob-Secondary metric value_Secondary metric=87.20&knob-Show extra_Secondary metric=true&knob-Show metric icon_Text configuration and position=true&knob-Title=  Count of records Count of records Count of records Count of records&knob-Title and subtitle alignment_Text configuration and position=left&knob-Title weight_Text configuration and position=normal&knob-Trend a11y description=The trend shows a peak of CPU usage in the last 5 minutes&knob-Trend a11y title=The Cluster CPU Usage trend&knob-Trend data points=30&knob-Trend shape=area&knob-Value=5&knob-Value color_Colors=#065B58&knob-Subtitle=Subtitle Subtitle Subtitle Subtitle Subtitle&knob-Visualization type=none&knob-Value prefix=&knob-Value postfix= &knob-Use custom extra_Secondary metric=&knob-Use value color_Colors=&knob-Use blending background_Colors=&knob-Show value icon=`,

packages/charts/api/charts.api.md

@@ -2174,7 +2174,7 @@ export interface MetricStyle {
     // (undocumented)
     valueFontSize: 'default' | 'fit' | number;
     // (undocumented)
-    valuePosition: 'top' | 'bottom';
+    valuePosition: 'top' | 'middle' | 'bottom';
     // (undocumented)
     valueTextAlign: Extract<TextAlign, 'left' | 'center' | 'right'>;
 }

packages/charts/src/chart_types/metric/renderer/dom/_text.scss

@@ -40,7 +40,7 @@
     }
   }
 
-  .echMetricText__extraBlock {
+  &__extraBlock {
     display: flex;
     align-items: center;
     overflow: hidden;
@@ -55,6 +55,11 @@
     &--right {
       justify-content: flex-end;
     }
+
+    // Vertical position modifiers
+    &--middle {
+      padding-top: 0;
+    }
   }
 
   &__valueBlock {

packages/charts/src/chart_types/metric/renderer/dom/text.tsx

@@ -24,6 +24,7 @@ const GRID_SPAN_THREE = '1 / span 3';
 
 const gridRows = {
   top: { value: '1', titles: '2', body: '3', extra: '4' },
+  middle: { value: '3', titles: '1', body: '2', extra: '5' },
   bottom: { value: '4', titles: '1', body: '2', extra: '3' },
 };
 
@@ -39,8 +40,14 @@ const gridColumnsValuePositionBottom = {
   right: { value: GRID_SPAN_THREE, titles: '1 / span 2', body: GRID_SPAN_THREE, extra: GRID_SPAN_THREE },
 };
 
+const gridColumnsValuePositionMiddle = {
+  left: { value: GRID_SPAN_THREE, titles: '2 / span 2', body: GRID_SPAN_THREE, extra: GRID_SPAN_THREE },
+  right: { value: GRID_SPAN_THREE, titles: '1 / span 2', body: GRID_SPAN_THREE, extra: GRID_SPAN_THREE },
+};
+
 const gridColumns = {
   top: gridColumnsValuePostitionTop,
+  middle: gridColumnsValuePositionMiddle,
   bottom: gridColumnsValuePositionBottom,
 };
 
@@ -52,6 +59,7 @@ const getGridTemplateColumnsWithIcon = (iconSize: number) => {
 
 const gridTemplateRows = {
   bottom: `min-content auto min-content min-content`,
+  middle: `min-content 1fr min-content 1fr min-content`,
   top: `min-content min-content auto min-content`,
 };
 
@@ -179,7 +187,11 @@ export const MetricText: React.FC<MetricTextprops> = ({
 
       {/* Extra Block */}
       <div
-        className={classNames('echMetricText__extraBlock', `echMetricText__extraBlock--${style.extraTextAlign}`)}
+        className={classNames(
+          'echMetricText__extraBlock',
+          `echMetricText__extraBlock--${style.extraTextAlign}`,
+          `echMetricText__extraBlock--${valuePosition}`,
+        )}
         style={{
           gridRow: currentGridRows.extra,
           gridColumn: currentGridColumns.extra,

packages/charts/src/chart_types/metric/renderer/dom/text_measurements.tsx

@@ -217,6 +217,7 @@ export function getMetricTextPartDimensions(
       locale,
       style.valueFontSize === 'fit',
       progressBarHeight,
+      style.valuePosition === 'middle' ? 0 : ELEMENT_PADDING,
     ),
     textParts: getTextParts(datum, style),
     iconGridColumnWidth,
@@ -300,6 +301,7 @@ function computeMetricTextLayout(
   locale: string,
   fit: boolean,
   progressBarHeight: number, // with padding
+  extraPaddingTop: number,
 ): MetricTextLayout {
   const maxTitlesWidth = 0.95 * panel.width - (datum.icon ? 24 : 0) - 2 * PADDING;
 
@@ -343,7 +345,7 @@ function computeMetricTextLayout(
     const actualTitleHeight = titleLines.length > 0 ? titleLines.length * titleLineHeight : 0;
     const actualSubtitleHeight =
       subtitleLines.length > 0 ? subtitleLines.length * subtitleLineHeight + ELEMENT_PADDING : 0; // Subtitle padding top 5px
-    const actualExtraHeight = breakpoints.extra ? extraHeight + ELEMENT_PADDING : 0; // Extra padding top 5px
+    const actualExtraHeight = breakpoints.extra ? extraHeight + extraPaddingTop : 0;
 
     const nonValueElementsHeight =
       actualTitleHeight + actualSubtitleHeight + actualExtraHeight + progressBarHeight + PADDING * 2;

packages/charts/src/utils/themes/theme.ts

@@ -327,7 +327,7 @@ export interface MetricStyle {
   titlesTextAlign: Extract<TextAlign, 'left' | 'center' | 'right'>;
   extraTextAlign: Extract<TextAlign, 'left' | 'center' | 'right'>;
   valueTextAlign: Extract<TextAlign, 'left' | 'center' | 'right'>;
-  valuePosition: 'top' | 'bottom';
+  valuePosition: 'top' | 'middle' | 'bottom';
   iconAlign: Extract<HorizontalAlignment, 'left' | 'right'>;
 
   titleWeight: MetricFontWeight;

storybook/stories/metric/1_basic.story.tsx

@@ -81,7 +81,7 @@ export const Example: ChartsStory = (_, { title: storyTitle, description }) => {
   const titlesTextAlign = getTextAlignKnob('title text-align', 'left');
   const valueTextAlign = getTextAlignKnob('value text-align', 'right');
   const extraTextAlign = getTextAlignKnob('extra text-align', 'right');
-  const valuePosition = select('value position', { Bottom: 'bottom', Top: 'top' }, 'bottom');
+  const valuePosition = select('value position', { Bottom: 'bottom', Middle: 'middle', Top: 'top' }, 'bottom');
   const iconAlign = select(
     'icon align',
     {

storybook/stories/metric/2_grid.story.tsx

@@ -63,6 +63,7 @@ export const Example: ChartsStory = (_, { title, description }) => {
     'default',
   );
   const valueFontSize = number('value font size (px)', 40, { min: 0, step: 10 });
+  const valuePosition = select('value position', { Bottom: 'bottom', Middle: 'middle', Top: 'top' }, 'bottom');
 
   const data: (MetricDatum | undefined)[] = useMemo(
     () => [
@@ -227,6 +228,7 @@ export const Example: ChartsStory = (_, { title, description }) => {
             metric: {
               emptyBackground,
               valueFontSize: valueFontSizeMode === 'custom' ? valueFontSize : valueFontSizeMode,
+              valuePosition,
             },
           }}
           baseTheme={useBaseTheme()}

storybook/stories/metric/3_body.story.tsx

@@ -53,6 +53,7 @@ export const Example: ChartsStory = (_, { title: storyTitle, description }) => {
   const valueIconType = customKnobs.eui.getIconTypeKnob('EUI value icon glyph name', 'sortUp');
   const showBody = boolean('show body contents', true);
   const showBodyArea = boolean('show full body area', false);
+  const valuePosition = select('value position', { Bottom: 'bottom', Middle: 'middle', Top: 'top' }, 'bottom');
   const getIcon =
     (type: string) =>
     ({ width, height, color }: { width: number; height: number; color: string }) => (
@@ -112,6 +113,11 @@ export const Example: ChartsStory = (_, { title: storyTitle, description }) => {
   return (
     <Chart title={storyTitle} description={description}>
       <Settings
+        theme={{
+          metric: {
+            valuePosition,
+          },
+        }}
         baseTheme={useBaseTheme()}
         onElementClick={([d]) => {
           if (isMetricElementEvent(d)) {

storybook/stories/metric/7_layout.story.tsx

@@ -243,7 +243,7 @@ export const Example: ChartsStory = (_, { title: storyTitle, description }) => {
   // Value (primary metric)
   const valuePosition = select(
     'Primary metric position',
-    { Bottom: 'bottom', Top: 'top' },
+    { Bottom: 'bottom', Middle: 'middle', Top: 'top' },
     'top',
     textConfigurationAndPositionGroup,
   );