feat(metric): allow alpha colors and improve contrast logic

e2e/tests/metric_stories.test.ts

@@ -8,6 +8,7 @@
 
 import { test } from '@playwright/test';
 
+import { eachTheme, pwEach } from '../helpers';
 import { common } from '../page_objects';
 
 test.describe('Metric', () => {
@@ -21,7 +22,7 @@ test.describe('Metric', () => {
       'http://localhost:9001/?path=/story/metric-alpha--grid&globals=theme:light&knob-use progress bar=&knob-progress bar direction=horizontal&knob-max trend data points=30&knob-layout=grid',
     );
   });
-  test('should render vertical progress bar  in dark mode', async ({ page }) => {
+  test('should render vertical progress bar in dark mode', async ({ page }) => {
     await common.expectChartAtUrlToMatchScreenshot(page)(
       'http://localhost:9001/?path=/story/metric-alpha--grid&globals=theme:eui-dark&knob-layout=grid&knob-max trend data points=30&knob-progress bar direction=vertical&knob-use progress bar=true',
     );
@@ -31,19 +32,33 @@ test.describe('Metric', () => {
       'http://localhost:9001/?path=/story/metric-alpha--grid&globals=theme:eui-dark&knob-layout=grid&knob-max trend data points=30&knob-progress bar direction=horizontal&knob-use progress bar=true',
     );
   });
-  test('should render no progress bar  in dark mode', async ({ page }) => {
+  test('should render no progress bar in dark mode', async ({ page }) => {
     await common.expectChartAtUrlToMatchScreenshot(page)(
       'http://localhost:9001/?path=/story/metric-alpha--grid&globals=theme:eui-dark&knob-layout=grid&knob-max trend data points=30&knob-progress bar direction=horizontal&knob-use progress bar=',
     );
   });
   test('text value with trend', async ({ page }) => {
     await common.expectChartAtUrlToMatchScreenshot(page)(
-      'http://localhost:9001/?path=/story/metric-alpha--basic&globals=theme:light&knob-EUI icon glyph name=warning&knob-color=rgba(166, 219, 208, 0.47)&knob-extra=1310 (-74% week before)&knob-is numeric metric=false&knob-progress bar direction=vertical&knob-progress max=100&knob-progress or trend=trend&knob-subtitle=&knob-title=Most used in&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=United States&knob-value postfix=&knob-value prefix=&knob-show icon=',
+      'http://localhost:9001/?path=/story/metric-alpha--basic&globals=theme:light&knob-EUI icon glyph name=warning&knob-color=rgba(166, 219, 208, 1)&knob-extra=1310 (-74% week before)&knob-is numeric metric=false&knob-progress bar direction=vertical&knob-progress max=100&knob-progress or trend=trend&knob-subtitle=&knob-title=Most used in&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=United States&knob-value postfix=&knob-value prefix=&knob-show icon=',
     );
   });
   test('value icon and value color', async ({ page }) => {
     await common.expectChartAtUrlToMatchScreenshot(page)(
       'http://localhost:9001/?path=/story/metric-alpha--basic&globals=theme:light&knob-title=Network out&knob-subtitle=host: 1dc4e&knob-progress or trend=trend&knob-progress bar direction=vertical&knob-trend data points=30&knob-trend shape=area&knob-trend a11y title=The Cluster CPU Usage trend&knob-trend a11y description=The trend shows a peak of CPU usage in the last 5 minutes&knob-extra=last <b>5m</b>&knob-progress max=100&knob-is numeric metric=true&knob-value=55.23&knob-value prefix=&knob-value postfix=GB&knob-color=rgba(255, 255, 255, 1)&knob-use value color=true&knob-value color=rgba(189, 0, 0, 1)&knob-show icon=true&knob-EUI icon glyph name=warning&knob-show value icon=true&knob-EUI value icon glyph name=sortUp',
     );
   });
+
+  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&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;theme:light&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=&${urlParam}`,
+          );
+        },
+        (t) => `should render metric with transparent bg color - ${t} theme`,
+      );
+    },
+  );
 });

packages/charts/api/charts.api.md

@@ -1840,8 +1840,6 @@ export type MetricSpecProps = ComponentProps<typeof Metric>;
 
 // @public (undocumented)
 export interface MetricStyle {
-    // (undocumented)
-    background: Color;
     // (undocumented)
     barBackground: Color;
     // (undocumented)

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

@@ -18,6 +18,7 @@ import { Metric as MetricComponent } from './metric';
 import { highContrastColor } from '../../../../common/color_calcs';
 import { colorToRgba } from '../../../../common/color_library_wrappers';
 import { Colors } from '../../../../common/colors';
+import { getResolvedBackgroundColor } from '../../../../common/fill_text_color';
 import { BasicListener, ElementClickListener, ElementOverListener, settingsBuildProps } from '../../../../specs';
 import { onChartRendered } from '../../../../state/actions/chart';
 import { GlobalChartState } from '../../../../state/chart_state';
@@ -29,8 +30,9 @@ import {
 import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme';
 import { getInternalIsInitializedSelector, InitStatus } from '../../../../state/selectors/get_internal_is_intialized';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_spec';
+import { Logger } from '../../../../utils/logger';
 import { LIGHT_THEME } from '../../../../utils/themes/light_theme';
-import { MetricStyle } from '../../../../utils/themes/theme';
+import { BackgroundStyle, MetricStyle } from '../../../../utils/themes/theme';
 import { MetricSpec } from '../../specs';
 import { chartSize } from '../../state/selectors/chart_size';
 import { getMetricSpecs } from '../../state/selectors/data';
@@ -47,6 +49,7 @@ interface StateProps {
   specs: MetricSpec[];
   a11y: A11ySettings;
   style: MetricStyle;
+  background: BackgroundStyle;
   locale: string;
   onElementClick?: ElementClickListener;
   onElementOut?: BasicListener;
@@ -76,6 +79,7 @@ class Component extends React.Component<StateProps & DispatchProps> {
       a11y,
       specs: [spec], // ignoring other specs
       style,
+      background,
       onElementClick,
       onElementOut,
       onElementOver,
@@ -94,8 +98,18 @@ class Component extends React.Component<StateProps & DispatchProps> {
 
     const panel = { width: width / maxColumns, height: height / totalRows };
 
+    if (colorToRgba(background.color)[3] < 1) {
+      // TODO: centralize this check and bg color fallback across all chart types
+      Logger.expected(
+        'Text contrast requires an opaque background color, using fallbackColor blend',
+        'an opaque color',
+        background.color,
+      );
+    }
+
+    const backgroundColor = getResolvedBackgroundColor(background.fallbackColor, background.color);
     const emptyForegroundColor =
-      highContrastColor(colorToRgba(style.background)) === Colors.White.rgba
+      highContrastColor(colorToRgba(backgroundColor)) === Colors.White.rgba
         ? style.text.lightColor
         : style.text.darkColor;
 
@@ -138,6 +152,7 @@ class Component extends React.Component<StateProps & DispatchProps> {
                     columnIndex={columnIndex}
                     panel={panel}
                     style={style}
+                    backgroundColor={backgroundColor}
                     onElementClick={onElementClick}
                     onElementOut={onElementOut}
                     onElementOver={onElementOver}
@@ -185,6 +200,7 @@ const DEFAULT_PROPS: StateProps = {
   },
   a11y: DEFAULT_A11Y_SETTINGS,
   style: LIGHT_THEME.metric,
+  background: LIGHT_THEME.background,
   locale: settingsBuildProps.defaults.locale,
 };
 
@@ -193,6 +209,7 @@ const mapStateToProps = (state: GlobalChartState): StateProps => {
     return DEFAULT_PROPS;
   }
   const { onElementClick, onElementOut, onElementOver, locale } = getSettingsSpecSelector(state);
+  const { metric: style, background } = getChartThemeSelector(state);
   return {
     initialized: true,
     chartId: state.chartId,
@@ -203,7 +220,8 @@ const mapStateToProps = (state: GlobalChartState): StateProps => {
     onElementClick,
     onElementOver,
     onElementOut,
-    style: getChartThemeSelector(state).metric,
+    background,
+    style,
     locale,
   };
 };

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

@@ -12,10 +12,10 @@ import React, { CSSProperties, useState } from 'react';
 import { ProgressBar } from './progress';
 import { SparkLine } from './sparkline';
 import { MetricText } from './text';
-import { highContrastColor } from '../../../../common/color_calcs';
 import { changeColorLightness, colorToRgba } from '../../../../common/color_library_wrappers';
-import { Colors } from '../../../../common/colors';
+import { Color } from '../../../../common/colors';
 import { DEFAULT_CSS_CURSOR } from '../../../../common/constants';
+import { fillTextColor } from '../../../../common/fill_text_color';
 import {
   BasicListener,
   ElementClickListener,
@@ -39,6 +39,7 @@ export const Metric: React.FunctionComponent<{
   datum: MetricDatum;
   panel: Size;
   style: MetricStyle;
+  backgroundColor: Color;
   locale: string;
   onElementClick?: ElementClickListener;
   onElementOver?: ElementOverListener;
@@ -53,6 +54,7 @@ export const Metric: React.FunctionComponent<{
   datum,
   panel,
   style,
+  backgroundColor,
   locale,
   onElementClick,
   onElementOver,
@@ -75,34 +77,34 @@ 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 backgroundInteractionColor = changeColorLightness(style.background, lightnessAmount, 0.8);
 
   const datumWithInteractionColor: MetricDatum = {
     ...datum,
     color: interactionColor,
   };
-  const updatedStyle: MetricStyle = {
-    ...style,
-    background: backgroundInteractionColor,
-  };
 
   const event: MetricElementEvent = { type: 'metricElementEvent', rowIndex, columnIndex };
 
   const containerStyle: CSSProperties = {
     backgroundColor:
       !isMetricWTrend(datumWithInteractionColor) && !isMetricWProgress(datumWithInteractionColor)
         ? datumWithInteractionColor.color
-        : updatedStyle.background,
+        : undefined,
     cursor: onElementClick ? 'pointer' : DEFAULT_CSS_CURSOR,
     borderColor: style.border,
   };
 
-  const bgColor = isMetricWTrend(datum) || !isMetricWProgress(datum) ? datum.color : style.background;
-
-  const highContrastTextColor =
-    highContrastColor(colorToRgba(bgColor)) === Colors.White.rgba ? style.text.lightColor : style.text.darkColor;
-
+  const highContrastTextColor = fillTextColor(
+    backgroundColor,
+    isMetricWProgress(datum) ? backgroundColor : datum.color,
+    undefined,
+    {
+      lightColor: colorToRgba(style.text.lightColor),
+      darkColor: colorToRgba(style.text.darkColor),
+    },
+  );
   const onElementClickHandler = () => onElementClick && onElementClick([event]);
+
   return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions,jsx-a11y/click-events-have-key-events
     <div
@@ -142,14 +144,14 @@ export const Metric: React.FunctionComponent<{
         id={metricHTMLId}
         datum={datumWithInteractionColor}
         panel={panel}
-        style={updatedStyle}
+        style={style}
         onElementClick={onElementClick ? onElementClickHandler : undefined}
         highContrastTextColor={highContrastTextColor}
         locale={locale}
       />
       {isMetricWTrend(datumWithInteractionColor) && <SparkLine id={metricHTMLId} datum={datumWithInteractionColor} />}
       {isMetricWProgress(datumWithInteractionColor) && (
-        <ProgressBar datum={datumWithInteractionColor} barBackground={updatedStyle.barBackground} />
+        <ProgressBar datum={datumWithInteractionColor} barBackground={style.barBackground} />
       )}
       <div className="echMetric--outline" style={{ color: highContrastTextColor }}></div>
     </div>

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

@@ -36,8 +36,8 @@ export const SparkLine: FunctionComponent<{
     trendShape === MetricTrendShape.Bars ? CurveType.CURVE_STEP_AFTER : CurveType.LINEAR,
   );
 
-  const [h, s, l] = colorToHsl(color);
-  const pathColor = hslToColor(h, s, l >= 0.8 ? l - 0.1 : l + 0.1);
+  const [h, s, l, a] = colorToHsl(color);
+  const pathColor = hslToColor(h, s, l >= 0.8 ? l - 0.1 : l + 0.1, a);
   const titleId = `${id}-trend-title`;
   const descriptionId = `${id}-trend-description`;
   return (

packages/charts/src/common/color_calcs.ts

@@ -6,6 +6,8 @@
  * Side Public License, v 1.
  */
 
+import { Required } from 'utility-types';
+
 import { APCAContrast } from './apca_color_contrast';
 import { RgbaTuple, RGBATupleToString, RgbTuple } from './color_library_wrappers';
 import { Colors } from './colors';
@@ -45,16 +47,30 @@ export function combineColors([fgR, fgG, fgB, fgA]: RgbaTuple, [bgR, bgG, bgB, b
   return [r, g, b, alpha];
 }
 
-function getHighContrastColorWCAG2(background: RgbTuple): RgbaTuple {
-  const wWhite = getWCAG2ContrastRatio(Colors.White.rgba, background);
-  const wBlack = getWCAG2ContrastRatio(Colors.Black.rgba, background);
-  return wWhite >= wBlack ? Colors.White.rgba : Colors.Black.rgba;
+/** @internal */
+export interface ColorContrastOptions {
+  darkColor?: RgbaTuple;
+  lightColor?: RgbaTuple;
+}
+
+const getOptionWithDefaults = (options: ColorContrastOptions = {}): Required<ColorContrastOptions> => ({
+  darkColor: Colors.Black.rgba,
+  lightColor: Colors.White.rgba,
+  ...options,
+});
+
+function getHighContrastColorWCAG2(background: RgbTuple, options: ColorContrastOptions = {}): RgbaTuple {
+  const { lightColor, darkColor } = getOptionWithDefaults(options);
+  const wWhite = getWCAG2ContrastRatio(lightColor, background);
+  const wBlack = getWCAG2ContrastRatio(darkColor, background);
+  return wWhite >= wBlack ? lightColor : darkColor;
 }
 
-function getHighContrastColorAPCA(background: RgbTuple): RgbaTuple {
-  const wWhiteText = Math.abs(APCAContrast(background, Colors.White.rgba));
-  const wBlackText = Math.abs(APCAContrast(background, Colors.Black.rgba));
-  return wWhiteText > wBlackText ? Colors.White.rgba : Colors.Black.rgba;
+function getHighContrastColorAPCA(background: RgbTuple, options: ColorContrastOptions = {}): RgbaTuple {
+  const { lightColor, darkColor } = getOptionWithDefaults(options);
+  const wWhiteText = Math.abs(APCAContrast(background, lightColor));
+  const wBlackText = Math.abs(APCAContrast(background, darkColor));
+  return wWhiteText > wBlackText ? lightColor : darkColor;
 }
 
 const HIGH_CONTRAST_FN = {
@@ -66,6 +82,10 @@ const HIGH_CONTRAST_FN = {
  * Use white or black text depending on the high contrast mode used
  * @internal
  */
-export function highContrastColor(background: RgbTuple, mode: keyof typeof HIGH_CONTRAST_FN = 'WCAG2'): RgbaTuple {
-  return HIGH_CONTRAST_FN[mode](background);
+export function highContrastColor(
+  background: RgbTuple,
+  mode: keyof typeof HIGH_CONTRAST_FN = 'WCAG2',
+  options?: ColorContrastOptions,
+): RgbaTuple {
+  return HIGH_CONTRAST_FN[mode](background, options);
 }

packages/charts/src/common/color_library_wrappers.ts

@@ -83,18 +83,20 @@ export function colorToRgba(color: Color): RgbaTuple {
 }
 
 /** @internal */
-export function colorToHsl(color: Color) {
-  const [r, g, b] = colorToRgba(color);
-  return chroma.rgb(r, g, b).hsl();
+export function colorToHsl(color: Color): [h: number, s: number, l: number, a: number] {
+  const [r, g, b, a] = colorToRgba(color);
+  const [h, s, l] = chroma.rgb(r, g, b).hsl(); // alpha not preserved
+  return [h, s, l, a];
 }
+
 /** @internal */
-export function hslToColor(h: number, s: number, l: number): Color {
-  const rgba = chroma.hsl(h, s, l).rgba();
+export function hslToColor(h: number, s: number, l: number, a = 1): Color {
+  const rgba = chroma.hsl(h, s, l).alpha(a).rgba();
   return RGBATupleToString(rgba);
 }
 
 /** @internal */
 export function changeColorLightness(color: Color, lightnessAmount: number, lightnessThreshold: number): Color {
-  const [h, s, l] = colorToHsl(color);
-  return hslToColor(h, s, l >= lightnessThreshold ? l - lightnessAmount : l + lightnessAmount);
+  const [h, s, l, a] = colorToHsl(color);
+  return hslToColor(h, s, l >= lightnessThreshold ? l - lightnessAmount : l + lightnessAmount, a);
 }

packages/charts/src/common/fill_text_color.ts

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { combineColors, highContrastColor } from './color_calcs';
+import { ColorContrastOptions, combineColors, highContrastColor } from './color_calcs';
 import { colorToRgba, RGBATupleToString } from './color_library_wrappers';
 import { Color, Colors } from './colors';
 
@@ -26,6 +26,7 @@ export function fillTextColor(
   fallbackBGColor: Color,
   foreground: Color | null,
   background: Color = Colors.Transparent.keyword,
+  options?: ColorContrastOptions,
 ): Color {
   let backgroundRGBA = colorToRgba(background);
 
@@ -36,8 +37,22 @@ export function fillTextColor(
   if (foreground) {
     const foregroundRGBA = colorToRgba(foreground);
     const blendedFgBg = combineColors(foregroundRGBA, backgroundRGBA);
-    return RGBATupleToString(highContrastColor(blendedFgBg));
+    return RGBATupleToString(highContrastColor(blendedFgBg, 'WCAG2', options));
   }
 
   return RGBATupleToString(highContrastColor(backgroundRGBA));
 }
+
+/** @internal */
+export function getResolvedBackgroundColor(
+  fallbackBGColor: Color,
+  background: Color = Colors.Transparent.keyword,
+): Color {
+  let backgroundRGBA = colorToRgba(background);
+
+  if (backgroundRGBA[3] < TRANSPARENT_LIMIT) {
+    backgroundRGBA = colorToRgba(fallbackBGColor);
+  }
+
+  return RGBATupleToString(backgroundRGBA);
+}

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

@@ -410,7 +410,6 @@ export const DARK_THEME: Theme = {
     },
     border: '#343741',
     barBackground: '#343741',
-    background: '#1D1E23',
     nonFiniteText: 'N/A',
     minHeight: 64,
   },

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

@@ -409,7 +409,6 @@ export const LIGHT_THEME: Theme = {
     },
     border: '#EDF0F5',
     barBackground: '#EDF0F5',
-    background: '#FFFFFF',
     nonFiniteText: 'N/A',
     minHeight: 64,
   },