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

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 { changeColorLightness } from '../../../../common/color_library_wrappers';
+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,29 @@ 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,
+  );
   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 +139,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_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

@@ -41,3 +41,17 @@ export function fillTextColor(
 
   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,
   },

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

@@ -312,7 +312,6 @@ export interface MetricStyle {
     lightColor: Color;
   };
   border: Color;
-  background: Color;
   barBackground: Color;
   nonFiniteText: string;
   minHeight: Pixels;