fix(metric): background color for bar with interactions (#2248)

elastic · Nov 19, 2023 · dcb56fa · dcb56fa
1 parent b3a95d2
commit dcb56fa
Show file tree

Hide file tree

Showing 42 changed files with 83 additions and 33 deletions.
diff --git a/e2e/page_objects/common.ts b/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);
+      }
     };
 
   /**
@@ -450,12 +473,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,

diff --git a/...horizontal/bullet-as-metric/should-render-with-negative-values-chrome-linux.png b/...horizontal/bullet-as-metric/should-render-with-negative-values-chrome-linux.png
diff --git a/...l/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png b/...l/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png
diff --git a/...l/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png b/...l/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png
diff --git a/...as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png b/...as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png
diff --git a/...horizontal/bullet-as-metric/should-render-with-positive-values-chrome-linux.png b/...horizontal/bullet-as-metric/should-render-with-positive-values-chrome-linux.png
diff --git a/...l/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png b/...l/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png
diff --git a/...rds-circle/bullet-as-metric/should-render-with-negative-values-chrome-linux.png b/...rds-circle/bullet-as-metric/should-render-with-negative-values-chrome-linux.png
diff --git a/...e/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png b/...e/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png
diff --git a/...e/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png b/...e/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png
diff --git a/...as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png b/...as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png
diff --git a/...rds-circle/bullet-as-metric/should-render-with-positive-values-chrome-linux.png b/...rds-circle/bullet-as-metric/should-render-with-positive-values-chrome-linux.png
diff --git a/...e/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png b/...e/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png
diff --git a/...c-vertical/bullet-as-metric/should-render-with-negative-values-chrome-linux.png b/...c-vertical/bullet-as-metric/should-render-with-negative-values-chrome-linux.png
diff --git a/...l/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png b/...l/bullet-as-metric/should-render-with-negative-values-reversed-chrome-linux.png
diff --git a/...l/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png b/...l/bullet-as-metric/should-render-with-positive-negative-values-chrome-linux.png
diff --git a/...as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png b/...as-metric/should-render-with-positive-negative-values-reversed-chrome-linux.png
diff --git a/...c-vertical/bullet-as-metric/should-render-with-positive-values-chrome-linux.png b/...c-vertical/bullet-as-metric/should-render-with-positive-values-chrome-linux.png
diff --git a/...l/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png b/...l/bullet-as-metric/should-render-with-positive-values-reversed-chrome-linux.png
diff --git a/...ar-type/dark-theme/should-render-metric-with-click-interaction-chrome-linux.png b/...ar-type/dark-theme/should-render-metric-with-click-interaction-chrome-linux.png
diff --git a/...ar-type/dark-theme/should-render-metric-with-hover-interaction-chrome-linux.png b/...ar-type/dark-theme/should-render-metric-with-hover-interaction-chrome-linux.png
diff --git a/...type/dark-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png b/...type/dark-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png
diff --git a/...r-type/light-theme/should-render-metric-with-click-interaction-chrome-linux.png b/...r-type/light-theme/should-render-metric-with-click-interaction-chrome-linux.png
diff --git a/...r-type/light-theme/should-render-metric-with-hover-interaction-chrome-linux.png b/...r-type/light-theme/should-render-metric-with-hover-interaction-chrome-linux.png
diff --git a/...ype/light-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png b/...ype/light-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png
diff --git a/...ne-type/dark-theme/should-render-metric-with-click-interaction-chrome-linux.png b/...ne-type/dark-theme/should-render-metric-with-click-interaction-chrome-linux.png
diff --git a/...ne-type/dark-theme/should-render-metric-with-hover-interaction-chrome-linux.png b/...ne-type/dark-theme/should-render-metric-with-hover-interaction-chrome-linux.png
diff --git a/...type/dark-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png b/...type/dark-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png
diff --git a/...e-type/light-theme/should-render-metric-with-click-interaction-chrome-linux.png b/...e-type/light-theme/should-render-metric-with-click-interaction-chrome-linux.png
diff --git a/...e-type/light-theme/should-render-metric-with-hover-interaction-chrome-linux.png b/...e-type/light-theme/should-render-metric-with-hover-interaction-chrome-linux.png
diff --git a/...ype/light-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png b/...ype/light-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png
diff --git a/...nd-type/dark-theme/should-render-metric-with-click-interaction-chrome-linux.png b/...nd-type/dark-theme/should-render-metric-with-click-interaction-chrome-linux.png
diff --git a/...nd-type/dark-theme/should-render-metric-with-hover-interaction-chrome-linux.png b/...nd-type/dark-theme/should-render-metric-with-hover-interaction-chrome-linux.png
diff --git a/...type/dark-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png b/...type/dark-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png
diff --git a/...d-type/light-theme/should-render-metric-with-click-interaction-chrome-linux.png b/...d-type/light-theme/should-render-metric-with-click-interaction-chrome-linux.png
diff --git a/...d-type/light-theme/should-render-metric-with-hover-interaction-chrome-linux.png b/...d-type/light-theme/should-render-metric-with-hover-interaction-chrome-linux.png
diff --git a/...ype/light-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png b/...ype/light-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png
diff --git a/e2e/tests/metric_stories.test.ts b/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`,
       );
     },
   );

diff --git a/e2e/tests/tooltip.test.ts b/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 }) => {

diff --git a/packages/charts/src/chart_types/metric/renderer/dom/metric.tsx b/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';
@@ -81,7 +81,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,
@@ -91,10 +93,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,
   };
@@ -170,7 +169,12 @@ export const Metric: React.FunctionComponent<{
       />
       {isMetricWTrend(datumWithInteractionColor) && <SparkLine id={metricHTMLId} datum={datumWithInteractionColor} />}
       {isMetricWProgress(datumWithInteractionColor) && (
-        <ProgressBar datum={datumWithInteractionColor} barBackground={style.barBackground} size={progressBarSize} />
+        <ProgressBar
+          datum={datumWithInteractionColor}
+          barBackground={style.barBackground}
+          blendedBarColor={blendedBarColor}
+          size={progressBarSize}
+        />
       )}
       <div className="echMetric--outline" style={{ color: finalTextColor.keyword }}></div>
     </div>

diff --git a/packages/charts/src/chart_types/metric/renderer/dom/progress.tsx b/packages/charts/src/chart_types/metric/renderer/dom/progress.tsx
@@ -22,12 +22,18 @@ const BASELINE_SIZE = 2;
 interface ProgressBarProps {
   datum: MetricWProgress | BulletMetricWProgress;
   barBackground: Color;
+  blendedBarColor: Color;
   size: 'small';
 }
 
 /** @internal */
-export const ProgressBar: React.FunctionComponent<ProgressBarProps> = ({ datum, barBackground, size }) => {
-  const { title, value, target, color, valueFormatter, targetFormatter, progressBarDirection } = datum;
+export const ProgressBar: React.FunctionComponent<ProgressBarProps> = ({
+  datum,
+  barBackground,
+  blendedBarColor,
+  size,
+}) => {
+  const { title, value, target, valueFormatter, targetFormatter, progressBarDirection } = datum;
   const isBullet = isBulletMetric(datum);
   const isVertical = progressBarDirection === LayoutDirection.Vertical;
   const domain: GenericDomain = isBulletMetric(datum) ? datum.domain : [0, datum.domainMax];
@@ -54,8 +60,8 @@ export const ProgressBar: React.FunctionComponent<ProgressBarProps> = ({ datum,
 
   const targetPlacement = isNil(target) ? null : `calc(${scale(target)}% - ${TARGET_SIZE / 2}px)`;
   const zeroPlacement = domainMin >= 0 || domainMax <= 0 ? null : `calc(${scale(0)}% - ${BASELINE_SIZE / 2}px)`;
-
   const labelType = isBullet ? 'Value' : 'Percentage';
+
   return (
     <div
       className={getDirectionalClasses('Progress', isVertical, size)}
@@ -73,21 +79,21 @@ export const ProgressBar: React.FunctionComponent<ProgressBarProps> = ({ datum,
             target || 0,
           )}`}
         >
-          <Icon height={TARGET_SIZE} width={TARGET_SIZE} type="downArrow" color={color} />
+          <Icon height={TARGET_SIZE} width={TARGET_SIZE} type="downArrow" color={blendedBarColor} />
         </div>
       )}
       {zeroPlacement && (
         <div
           className={getDirectionalClasses('ZeroBaseline', isVertical, size)}
           style={{
-            backgroundColor: color,
+            backgroundColor: blendedBarColor,
             [isVertical ? 'bottom' : 'left']: zeroPlacement,
           }}
         />
       )}
       <div
         className={getDirectionalClasses('ProgressBar', isVertical, size)}
-        style={{ backgroundColor: color, ...positionStyle }}
+        style={{ ...positionStyle, backgroundColor: blendedBarColor }}
         role="meter"
         title={isBullet ? `${datum.valueLabels.value}: ${valueFormatter(value)}` : `${scaledValue}%`}
         aria-label={title ? `${labelType} of ${title}` : labelType}

diff --git a/storybook/parameters.ts b/storybook/parameters.ts
@@ -120,7 +120,7 @@ export const storybookParameters: Parameters = {
         name: 'VRT Viewport',
         styles: {
           width: '785px',
-          height: '600px',
+          height: '1000px',
         },
       },
     },