fix(metric): background color for bar with interactions (#2248) [61.0.x]

e2e/page_objects/common.ts

@@ -49,6 +49,23 @@ interface KeyboardKey {
   count: number;
 }
 
+interface ClickOptions {
+  /**
+   * Defaults to `left`.
+   */
+  button?: 'left' | 'right' | 'middle';
+
+  /**
+   * defaults to 1. See [UIEvent.detail].
+   */
+  clickCount?: number;
+
+  /**
+   * Time to wait between `mousedown` and `mouseup` in milliseconds. Defaults to 0.
+   */
+  delay?: number;
+}
+
 type KeyboardKeys = Array<KeyboardKey>;
 
 /**
@@ -278,10 +295,16 @@ export class CommonPage {
    * @param selector
    */
   clickMouseRelativeToDOMElement =
-    (page: Page) => async (mousePosition: MousePosition, selector: string, button?: 'left' | 'right' | 'middle') => {
+    (page: Page) => async (mousePosition: MousePosition, selector: string, options?: ClickOptions) => {
       const element = await this.getBoundingClientRect(page)(selector);
       const { x, y } = getCursorPosition(mousePosition, element);
-      await page.mouse.click(x, y, { button });
+
+      if (options?.delay) {
+        // need to skip await to resolve early and capture delay
+        void page.mouse.click(x, y, options);
+      } else {
+        await page.mouse.click(x, y, options);
+      }
     };
 
   /**
@@ -445,12 +468,12 @@ export class CommonPage {
     async (
       url: string,
       mousePosition: MousePosition,
-      button?: 'left' | 'right' | 'middle',
+      clickOptions?: ClickOptions,
       options?: ScreenshotElementAtUrlOptions,
     ) => {
       const action = async () => {
         await options?.action?.();
-        await this.clickMouseRelativeToDOMElement(page)(mousePosition, this.chartSelector, button);
+        await this.clickMouseRelativeToDOMElement(page)(mousePosition, this.chartSelector, clickOptions);
       };
       await this.expectChartAtUrlToMatchScreenshot(page)(url, {
         ...options,

e2e/tests/metric_stories.test.ts

@@ -51,13 +51,26 @@ test.describe('Metric', () => {
   pwEach.describe(['trend', 'bar', 'none'])(
     (v) => `Metric - ${v} type`,
     (type) => {
-      eachTheme.test(
-        async ({ page, urlParam }) => {
-          await common.expectChartAtUrlToMatchScreenshot(page)(
-            `http://localhost:9001/?path=/story/metric-alpha--basic&${urlParam}&knob-EUI icon glyph name=warning&knob-EUI value icon glyph name=sortUp&knob-color=rgba(157, 66, 66, 0.44)&knob-extra=last <b>5m</b>&knob-is numeric metric=true&knob-progress bar direction=vertical&knob-progress max=100&knob-progress or trend=${type}&knob-subtitle=Cluster CPU usage&knob-title=21d7f8b7-92ea-41a0-8c03-0db0ec7e11b9&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-value color=#3c3c3c&knob-value prefix=&knob-value postfix= %&knob-use value color=&knob-show icon=&knob-show value icon=`,
-          );
+      eachTheme.describe(
+        ({ urlParam }) => {
+          const metricUrl = `http://localhost:9001/?path=/story/metric-alpha--basic&${urlParam}&knob-EUI icon glyph name=warning&knob-EUI value icon glyph name=sortUp&knob-color=rgba(157, 66, 66, 0.44)&knob-extra=last <b>5m</b>&knob-is numeric metric=true&knob-progress bar direction=vertical&knob-progress max=100&knob-progress or trend=${type}&knob-subtitle=Cluster CPU usage&knob-title=21d7f8b7-92ea-41a0-8c03-0db0ec7e11b9&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-value color=#3c3c3c&knob-value prefix=&knob-value postfix= %&knob-use value color=&knob-show icon=&knob-show value icon=`;
+          test('should render metric with transparent bg color', async ({ page }) => {
+            await common.expectChartAtUrlToMatchScreenshot(page)(metricUrl);
+          });
+
+          test('should render metric with hover interaction', async ({ page }) => {
+            await common.expectChartWithMouseAtUrlToMatchScreenshot(page)(metricUrl, { top: 100, left: 100 });
+          });
+
+          test('should render metric with click interaction', async ({ page }) => {
+            await common.expectChartWithClickAtUrlToMatchScreenshot(page)(
+              metricUrl,
+              { top: 100, left: 100 },
+              { delay: 400 }, // 10ms delay to capture click and hold
+            );
+          });
         },
-        (t) => `should render metric with transparent bg color - ${t} theme`,
+        (t) => `${t} theme`,
       );
     },
   );

e2e/tests/tooltip.test.ts

@@ -17,23 +17,23 @@ test.describe('Tooltip', () => {
         await common.expectChartWithClickAtUrlToMatchScreenshot(page)(
           'http://localhost:9001/?path=/story/components-tooltip--cartesian-charts&globals=theme:light&knob-Chart%20type=treemap&knob-SeriesType=bar&knob-async%20delay%20(ms)=1500&knob-character%20set=rtl&knob-data%20polarity=Mixed&knob-pinned=true&knob-rtl%20language=AR&knob-show%20legend=true&knob-stacked=true&knob-visible=true',
           { left: 240, bottom: 260 },
-          'right',
+          { button: 'right' },
         );
       });
 
       test('pinning over selection', async ({ page }) => {
         await common.expectChartWithClickAtUrlToMatchScreenshot(page)(
           'http://localhost:9001/?path=/story/components-tooltip--cartesian-charts&globals=theme:light&knob-Chart type=treemap&knob-SeriesType=bar&knob-async delay=1000&knob-async delay (ms)=1500&knob-character set=rtl&knob-chart type=line&knob-data polarity=Mixed&knob-pinned=true&knob-rtl language=AR&knob-show legend=true&knob-stacked=true&knob-visible=true&knob-reduce data=true&knob-async actions delay=0',
           { left: 220, bottom: 285 },
-          'right',
+          { button: 'right' },
         );
       });
 
       test('show loading prompt for async actions', async ({ page }) => {
         await common.expectChartWithClickAtUrlToMatchScreenshot(page)(
           'http://localhost:9001/?path=/story/components-tooltip--cartesian-charts&globals=theme:light&knob-Chart type=treemap&knob-SeriesType=bar&knob-async delay=1000&knob-async delay (ms)=1500&knob-character set=rtl&knob-chart type=line&knob-data polarity=Mixed&knob-pinned=true&knob-rtl language=AR&knob-show legend=true&knob-stacked=true&knob-visible=true&knob-reduce data=true&knob-async actions delay=1000',
           { left: 220, bottom: 285 },
-          'right',
+          { button: 'right' },
         );
       });
 
@@ -42,7 +42,9 @@ test.describe('Tooltip', () => {
           'http://localhost:9001/?path=/story/components-tooltip--cartesian-charts&globals=theme:light&knob-Chart type=treemap&knob-SeriesType=bar&knob-async delay=1000&knob-async delay (ms)=1500&knob-character set=rtl&knob-chart type=bar&knob-data polarity=Mixed&knob-pinned=true&knob-rtl language=AR&knob-show legend=true&knob-stacked=true&knob-visible=true&knob-reduce data=true&knob-async actions delay=0',
           {
             action: async () => {
-              await common.clickMouseRelativeToDOMElement(page)({ left: 260, top: 180 }, common.chartSelector, 'right');
+              await common.clickMouseRelativeToDOMElement(page)({ left: 260, top: 180 }, common.chartSelector, {
+                button: 'right',
+              });
               // table row not visible thus not clickable by playwright
               const items = page.locator('.echTooltip__tableRow .echTooltip__tableCell:first-of-type');
               await items.nth(5).click();
@@ -59,7 +61,9 @@ test.describe('Tooltip', () => {
           `http://localhost:9001/?path=/story/components-tooltip--cartesian-charts&globals=theme:light&knob-Chart type=treemap&knob-SeriesType=bar&knob-async delay=1000&knob-async delay (ms)=1500&knob-character set=rtl&knob-chart type=bar&knob-data polarity=Mixed&knob-pinned=true&knob-rtl language=AR&knob-show legend=true&knob-stacked=true&knob-visible=true&knob-reduce data=true&knob-async actions delay=${delay}`,
           {
             action: async () => {
-              await common.clickMouseRelativeToDOMElement(page)({ left: 260, top: 180 }, common.chartSelector, 'right');
+              await common.clickMouseRelativeToDOMElement(page)({ left: 260, top: 180 }, common.chartSelector, {
+                button: 'right',
+              });
               // table row not visible thus not clickable by playwright
               const items = page.locator('.echTooltip__tableRow .echTooltip__tableCell:first-of-type');
               await items.nth(2).click();
@@ -75,7 +79,7 @@ test.describe('Tooltip', () => {
         await common.expectChartWithClickAtUrlToMatchScreenshot(page)(
           'http://localhost:9001/?path=/story/components-tooltip--partition-charts&globals=theme:light&knob-Chart%20type=treemap&knob-SeriesType=bar&knob-async%20delay%20(ms)=1500&knob-character%20set=rtl&knob-data%20polarity=Mixed&knob-pinned=true&knob-rtl%20language=AR&knob-show%20legend=true&knob-stacked=true&knob-visible=true',
           { left: 245, bottom: 185 },
-          'right',
+          { button: 'right' },
         );
       });
     });
@@ -85,7 +89,7 @@ test.describe('Tooltip', () => {
         await common.expectChartWithClickAtUrlToMatchScreenshot(page)(
           'http://localhost:9001/?path=/story/components-tooltip--heatmap-chart&globals=theme:light&knob-Chart%20type=treemap&knob-SeriesType=bar&knob-async%20delay%20(ms)=1500&knob-character%20set=rtl&knob-data%20polarity=Mixed&knob-pinned=true&knob-rtl%20language=AR&knob-show%20legend=true&knob-stacked=true&knob-visible=true',
           { left: 300, bottom: 180 },
-          'right',
+          { button: 'right' },
         );
       });
     });
@@ -95,7 +99,7 @@ test.describe('Tooltip', () => {
         await common.expectChartWithClickAtUrlToMatchScreenshot(page)(
           'http://localhost:9001/?path=/story/components-tooltip--flamegraph&globals=theme:light&knob-Chart%20type=treemap&knob-SeriesType=bar&knob-async%20delay%20(ms)=1500&knob-character%20set=rtl&knob-data%20polarity=Mixed&knob-pinned=true&knob-rtl%20language=AR&knob-show%20legend=true&knob-stacked=true&knob-visible=true',
           { left: 220, bottom: 220 },
-          'right',
+          { button: 'right' },
         );
       });
       test('show prompt with actions ', async ({ page }) => {

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

@@ -12,8 +12,8 @@ import React, { CSSProperties, useState } from 'react';
 import { ProgressBar } from './progress';
 import { SparkLine, getSparkLineColor } from './sparkline';
 import { MetricText } from './text';
-import { ColorContrastOptions } from '../../../../common/color_calcs';
-import { changeColorLightness } from '../../../../common/color_library_wrappers';
+import { ColorContrastOptions, combineColors } from '../../../../common/color_calcs';
+import { RGBATupleToString, changeColorLightness, colorToRgba } from '../../../../common/color_library_wrappers';
 import { Color } from '../../../../common/colors';
 import { DEFAULT_CSS_CURSOR } from '../../../../common/constants';
 import { fillTextColor } from '../../../../common/fill_text_color';
@@ -79,7 +79,9 @@ export const Metric: React.FunctionComponent<{
   });
 
   const lightnessAmount = mouseState === 'leave' ? 0 : mouseState === 'enter' ? 0.05 : 0.1;
-  const interactionColor = changeColorLightness(datum.color, lightnessAmount, 0.8);
+
+  const interactionColor = changeColorLightness(hasProgressBar ? backgroundColor : datum.color, lightnessAmount, 0.8);
+  const blendedBarColor = RGBATupleToString(combineColors(colorToRgba(datum.color), colorToRgba(backgroundColor)));
 
   const datumWithInteractionColor: MetricDatum = {
     ...datum,
@@ -89,10 +91,7 @@ export const Metric: React.FunctionComponent<{
   const event: MetricElementEvent = { type: 'metricElementEvent', rowIndex, columnIndex };
 
   const containerStyle: CSSProperties = {
-    backgroundColor:
-      !isMetricWTrend(datumWithInteractionColor) && !isMetricWProgress(datumWithInteractionColor)
-        ? datumWithInteractionColor.color
-        : undefined,
+    backgroundColor: isMetricWTrend(datumWithInteractionColor) ? backgroundColor : datumWithInteractionColor.color,
     cursor: onElementClick ? 'pointer' : DEFAULT_CSS_CURSOR,
     borderColor: style.border,
   };
@@ -167,7 +166,11 @@ export const Metric: React.FunctionComponent<{
       />
       {isMetricWTrend(datumWithInteractionColor) && <SparkLine id={metricHTMLId} datum={datumWithInteractionColor} />}
       {isMetricWProgress(datumWithInteractionColor) && (
-        <ProgressBar datum={datumWithInteractionColor} barBackground={style.barBackground} />
+        <ProgressBar
+          datum={datumWithInteractionColor}
+          barBackground={style.barBackground}
+          blendedBarColor={blendedBarColor}
+        />
       )}
       <div className="echMetric--outline" style={{ color: finalTextColor.keyword }}></div>
     </div>

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

@@ -17,7 +17,8 @@ import { MetricWProgress } from '../../specs';
 export const ProgressBar: React.FunctionComponent<{
   datum: MetricWProgress;
   barBackground: Color;
-}> = ({ datum: { title, domainMax, value, color, progressBarDirection }, barBackground }) => {
+  blendedBarColor: Color;
+}> = ({ datum: { title, domainMax, value, progressBarDirection }, barBackground, blendedBarColor }) => {
   const verticalDirection = progressBarDirection === LayoutDirection.Vertical;
   // currently we provide only the small progress bar;
   const isSmall = true;
@@ -38,7 +39,7 @@ export const ProgressBar: React.FunctionComponent<{
     <div className={bgClassName} style={{ backgroundColor: isSmall ? barBackground : undefined }}>
       <div
         className={barClassName}
-        style={{ backgroundColor: color, ...percentProp }}
+        style={{ ...percentProp, backgroundColor: blendedBarColor }}
         role="meter"
         aria-label={title ? `Percentage of ${title}` : 'Percentage'}
         aria-valuemin={0}

storybook/parameters.ts

@@ -120,7 +120,7 @@ export const storybookParameters: Parameters = {
         name: 'VRT Viewport',
         styles: {
           width: '785px',
-          height: '600px',
+          height: '1000px',
         },
       },
     },