feat(metric): add new layout configurations

e2e/tests/metric_stories.test.ts

@@ -105,6 +105,62 @@ test.describe('Metric', () => {
     }
   });
 
+  test.describe('Layout configuration', () => {
+    test(`with default secondary and 'after' badge position`, async ({ page }) => {
+      await common.expectChartAtUrlToMatchScreenshot(page)(
+        `http://localhost:9001/?path=/story/metric-alpha--layout&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:light&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-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=vertical&knob-Progress max=100&knob-Secondary metric trend icon side_Secondary metric=right&knob-Secondary metric trend icon_Secondary metric=↑&knob-Secondary metric value color_Secondary metric=rgb(93, 191, 149)&knob-Secondary metric value position_Secondary metric=after&knob-Secondary metric value_Secondary metric=87.20&knob-Show extra_Secondary metric=true&knob-Show metric icon_Text configuration and position=&knob-Subtitle=Little description of this component&knob-Title=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=55.23&knob-Visualization type=bar&knob-Value prefix=&knob-Value postfix= %&knob-Use custom extra_Secondary metric=&knob-Label_Secondary metric=Last week&knob-Use value color_Colors=&knob-Value color_Colors=#065B58&knob-Use blending background_Colors=&knob-Show value icon=`,
+        {
+          action: async () => await common.setResizeDimensions(page)({ height: 180, width: 180 }),
+        },
+      );
+    });
+
+    test(`with default secondary and 'before' badge position`, async ({ page }) => {
+      await common.expectChartAtUrlToMatchScreenshot(page)(
+        `http://localhost:9001/?path=/story/metric-alpha--layout&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:light&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-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=vertical&knob-Progress max=100&knob-Secondary metric trend icon side_Secondary metric=right&knob-Secondary metric trend icon_Secondary metric=↑&knob-Secondary metric value color_Secondary metric=rgb(93, 191, 149)&knob-Secondary metric value position_Secondary metric=before&knob-Secondary metric value_Secondary metric=87.20&knob-Show extra_Secondary metric=true&knob-Show metric icon_Text configuration and position=&knob-Subtitle=Little description of this component&knob-Title=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=55.23&knob-Visualization type=bar&knob-Value prefix=&knob-Value postfix= %&knob-Use custom extra_Secondary metric=&knob-Label_Secondary metric=Last week&knob-Use value color_Colors=&knob-Value color_Colors=#065B58&knob-Use blending background_Colors=&knob-Show value icon=`,
+        {
+          action: async () => await common.setResizeDimensions(page)({ height: 180, width: 180 }),
+        },
+      );
+    });
+
+    test(`with value at the top, center aligned, and a metric icon`, async ({ page }) => {
+      await common.expectChartAtUrlToMatchScreenshot(page)(
+        `http://localhost:9001/?path=/story/metric-alpha--layout&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:light&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-Metric color_Colors=rgb(246,	217,	143)&knob-Metric icon align_Text configuration and position=right&knob-Primary metric alignment_Text configuration and position=center&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=vertical&knob-Progress max=100&knob-Secondary metric trend icon side_Secondary metric=right&knob-Secondary metric trend icon_Secondary metric=↑&knob-Secondary metric value color_Secondary metric=rgb(93, 191, 149)&knob-Secondary metric value position_Secondary metric=after&knob-Secondary metric value_Secondary metric=87.20&knob-Show extra_Secondary metric=true&knob-Show metric icon_Text configuration and position=true&knob-Subtitle=Little description of this component&knob-Title=Count of records&knob-Title and subtitle alignment_Text configuration and position=center&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=55.23&knob-Visualization type=bar&knob-Value prefix=&knob-Value postfix= %&knob-Use custom extra_Secondary metric=&knob-Label_Secondary metric=Last week&knob-Use value color_Colors=&knob-Value color_Colors=#065B58&knob-Use blending background_Colors=&knob-Show value icon=`,
+        {
+          action: async () => await common.setResizeDimensions(page)({ height: 180, width: 180 }),
+        },
+      );
+    });
+
+    test(`with titles at the top, center aligned, and a metric icon`, async ({ page }) => {
+      await common.expectChartAtUrlToMatchScreenshot(page)(
+        `http://localhost:9001/?path=/story/metric-alpha--layout&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:light&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-Metric color_Colors=rgb(246,	217,	143)&knob-Metric icon align_Text configuration and position=right&knob-Primary metric alignment_Text configuration and position=center&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=bottom&knob-Progress bar direction=vertical&knob-Progress max=100&knob-Secondary metric trend icon side_Secondary metric=right&knob-Secondary metric trend icon_Secondary metric=↑&knob-Secondary metric value color_Secondary metric=rgb(93, 191, 149)&knob-Secondary metric value position_Secondary metric=after&knob-Secondary metric value_Secondary metric=87.20&knob-Show extra_Secondary metric=true&knob-Show metric icon_Text configuration and position=true&knob-Subtitle=Little description of this component&knob-Title=Count of records&knob-Title and subtitle alignment_Text configuration and position=center&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=55.23&knob-Visualization type=bar&knob-Value prefix=&knob-Value postfix= %&knob-Use custom extra_Secondary metric=&knob-Label_Secondary metric=Last week&knob-Use value color_Colors=&knob-Value color_Colors=#065B58&knob-Use blending background_Colors=&knob-Show value icon=`,
+        {
+          action: async () => await common.setResizeDimensions(page)({ height: 180, width: 180 }),
+        },
+      );
+    });
+
+    test(`with default secondary metric with badge and no label`, async ({ page }) => {
+      await common.expectChartAtUrlToMatchScreenshot(page)(
+        `http://localhost:9001/?path=/story/metric-alpha--layout&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:light&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-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=vertical&knob-Progress max=100&knob-Secondary metric trend icon side_Secondary metric=right&knob-Secondary metric trend icon_Secondary metric=↑&knob-Secondary metric value color_Secondary metric=rgb(93, 191, 149)&knob-Secondary metric value position_Secondary metric=after&knob-Secondary metric value_Secondary metric=87.20&knob-Show extra_Secondary metric=true&knob-Show metric icon_Text configuration and position=&knob-Subtitle=Little description of this component&knob-Title=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=55.23&knob-Visualization type=bar&knob-Value prefix=&knob-Value postfix= %&knob-Use custom extra_Secondary metric=&knob-Label_Secondary metric=&knob-Use value color_Colors=&knob-Value color_Colors=#065B58&knob-Use blending background_Colors=&knob-Show value icon=`,
+        {
+          action: async () => await common.setResizeDimensions(page)({ height: 180, width: 180 }),
+        },
+      );
+    });
+
+    test(`with default secondary metric with no badge and no label`, async ({ page }) => {
+      await common.expectChartAtUrlToMatchScreenshot(page)(
+        `http://localhost:9001/?path=/story/metric-alpha--layout&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;theme:light&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=&knob-Custom extra_Secondary metric=last <b>5m</b>&knob-Extra element alignment_Text configuration and position=left&knob-Is numeric metric=true&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=vertical&knob-Progress max=100&knob-Secondary metric trend icon side_Secondary metric=right&knob-Secondary metric trend icon_Secondary metric=↑&knob-Secondary metric value color_Secondary metric=rgb(93, 191, 149)&knob-Secondary metric value position_Secondary metric=after&knob-Secondary metric value_Secondary metric=87.20&knob-Show extra_Secondary metric=true&knob-Show metric icon_Text configuration and position=&knob-Subtitle=Little description of this component&knob-Title=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=55.23&knob-Visualization type=bar&knob-Value prefix=&knob-Value postfix= %&knob-Use custom extra_Secondary metric=&knob-Label_Secondary metric=&knob-Use value color_Colors=&knob-Value color_Colors=#065B58&knob-Use blending background_Colors=&knob-Show value icon=`,
+        {
+          action: async () => await common.setResizeDimensions(page)({ height: 180, width: 180 }),
+        },
+      );
+    });
+  });
+
   pwEach.describe(['trend', 'bar', 'none'])(
     (v) => `Metric - ${v} type`,
     (type) => {

packages/charts/api/charts.api.md

@@ -2067,7 +2067,7 @@ export type MetricBase = {
     extra?: ReactElement | ComponentType<{
         fontSize: number;
         color: string;
-    }>;
+    }> | SecondaryMetricProps;
     icon?: ComponentType<{
         width: number;
         height: number;
@@ -2086,6 +2086,11 @@ export type MetricElementEvent = {
     columnIndex: number;
 };
 
+// Warning: (ae-forgotten-export) The symbol "FontWeight" needs to be exported by the entry point index.d.ts
+//
+// @public
+export type MetricFontWeight = Extract<FontWeight, 'bold' | 'normal'>;
+
 // @alpha (undocumented)
 export interface MetricSpec extends Spec {
     // (undocumented)
@@ -2099,7 +2104,7 @@ export interface MetricSpec extends Spec {
 // @alpha @deprecated (undocumented)
 export type MetricSpecProps = ComponentProps<typeof Metric>;
 
-// @public (undocumented)
+// @public
 export interface MetricStyle {
     // (undocumented)
     barBackground: Color;
@@ -2109,7 +2114,9 @@ export interface MetricStyle {
     // (undocumented)
     emptyBackground: Color;
     // (undocumented)
-    iconAlign: 'left' | 'right';
+    extraTextAlign: MetricTextAlign;
+    // (undocumented)
+    iconAlign: Extract<HorizontalAlignment, 'left' | 'right'>;
     // (undocumented)
     minHeight: Pixels;
     // (undocumented)
@@ -2119,15 +2126,32 @@ export interface MetricStyle {
     // (undocumented)
     textDarkColor: Color;
     // (undocumented)
+    textExtraDarkColor: Color;
+    // (undocumented)
+    textExtraLightColor: Color;
+    // (undocumented)
     textLightColor: Color;
     // (undocumented)
-    titlesTextAlign: 'left' | 'center' | 'right';
+    textSubtitleDarkColor: Color;
+    // (undocumented)
+    textSubtitleLightColor: Color;
+    // (undocumented)
+    titlesTextAlign: MetricTextAlign;
+    // (undocumented)
+    titleWeight: MetricFontWeight;
     // (undocumented)
     valueFontSize: 'default' | 'fit' | number;
     // (undocumented)
-    valuesTextAlign: 'left' | 'center' | 'right';
+    valuePosition: 'top' | 'bottom';
+    // (undocumented)
+    valueTextAlign: MetricTextAlign;
 }
 
+// Warning: (ae-forgotten-export) The symbol "TextAlign" needs to be exported by the entry point index.d.ts
+//
+// @public
+export type MetricTextAlign = Extract<TextAlign, 'left' | 'center' | 'right'>;
+
 // @alpha (undocumented)
 export const MetricTrendShape: Readonly<{
     Bars: "bars";
@@ -2671,6 +2695,19 @@ export const ScaleType: Readonly<{
 // @public
 export type ScaleType = $Values<typeof ScaleType>;
 
+// @alpha
+export interface SecondaryMetricProps {
+    ariaDescription?: string;
+    badgeBorderColor?: Color;
+    badgeColor?: Color;
+    icon?: string;
+    iconSide?: 'left' | 'right';
+    label?: string;
+    style?: CSSProperties;
+    value: string;
+    valuePosition?: 'before' | 'after';
+}
+
 // @public (undocumented)
 export interface SectorGeomSpecY {
     // (undocumented)

packages/charts/src/chart_types/bullet_graph/renderer/canvas/index.tsx

@@ -13,7 +13,7 @@ import type { Dispatch } from 'redux';
 import { bindActionCreators } from 'redux';
 
 import { renderBullet } from './bullet';
-import type { ColorContrastOptions } from '../../../../common/color_calcs';
+import type { ColorContrastOptions, TextContrastOptions } from '../../../../common/color_calcs';
 import { colorToRgba } from '../../../../common/color_library_wrappers';
 import type { Color } from '../../../../common/colors';
 import { Colors } from '../../../../common/colors';
@@ -144,6 +144,12 @@ class Component extends React.Component<Props> {
       darkColor: colorToRgba(metricStyle.textDarkColor),
     };
 
+    const textContrastOptions: TextContrastOptions = {
+      text: contrastOptions,
+      subtitle: contrastOptions,
+      extra: contrastOptions,
+    };
+
     if (!initialized || size.width === 0 || size.height === 0 || !spec) {
       return null;
     }
@@ -227,7 +233,7 @@ class Component extends React.Component<Props> {
                     rowIndex={stats.rowIndex}
                     style={bulletToMetricStyle}
                     backgroundColor={backgroundColor}
-                    contrastOptions={contrastOptions}
+                    textContrastOptions={textContrastOptions}
                     textDimensions={textDimensions}
                   />
                 );