fix(metric): add option to set empty cell background color (#2247) [61.0.x]

e2e/tests/metric_stories.test.ts

@@ -47,6 +47,11 @@ test.describe('Metric', () => {
       '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',
     );
   });
+  test('should render with empty and missing background colors', async ({ page }) => {
+    await common.expectChartAtUrlToMatchScreenshot(page)(
+      'http://localhost:9001/?path=/story/metric-alpha--grid&globals=theme:light;background:gray&knob-empty background=white&knob-number of columns=3',
+    );
+  });
 
   pwEach.describe(['trend', 'bar', 'none'])(
     (v) => `Metric - ${v} type`,

packages/charts/api/charts.api.md

@@ -1875,6 +1875,8 @@ export interface MetricStyle {
     // (undocumented)
     border: Color;
     // (undocumented)
+    emptyBackground: Color;
+    // (undocumented)
     minHeight: Pixels;
     // (undocumented)
     nonFiniteText: string;

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

@@ -15,8 +15,8 @@ import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 
 import { Metric as MetricComponent } from './metric';
-import { ColorContrastOptions, highContrastColor } from '../../../../common/color_calcs';
-import { colorToRgba } from '../../../../common/color_library_wrappers';
+import { ColorContrastOptions, highContrastColor, combineColors } from '../../../../common/color_calcs';
+import { colorToRgba, RGBATupleToString } from '../../../../common/color_library_wrappers';
 import { getResolvedBackgroundColor } from '../../../../common/fill_text_color';
 import { BasicListener, ElementClickListener, ElementOverListener, settingsBuildProps } from '../../../../specs';
 import { onChartRendered } from '../../../../state/actions/chart';
@@ -100,7 +100,10 @@ class Component extends React.Component<StateProps & DispatchProps> {
       lightColor: colorToRgba(style.text.lightColor),
       darkColor: colorToRgba(style.text.darkColor),
     };
-    const { color: emptyForegroundColor } = highContrastColor(colorToRgba(backgroundColor), undefined, contrastOptions);
+
+    const emptyBackgroundRGBA = combineColors(colorToRgba(style.emptyBackground), colorToRgba(backgroundColor));
+    const emptyBackground = RGBATupleToString(emptyBackgroundRGBA);
+    const { color: emptyForegroundColor } = highContrastColor(emptyBackgroundRGBA, undefined, contrastOptions);
 
     return (
       // eslint-disable-next-line jsx-a11y/no-redundant-roles
@@ -125,7 +128,10 @@ class Component extends React.Component<StateProps & DispatchProps> {
               });
               return !datum ? (
                 <li key={`${columnIndex}-${rowIndex}`} role="presentation">
-                  <div className={emptyMetricClassName} style={{ borderColor: style.border }}>
+                  <div
+                    className={emptyMetricClassName}
+                    style={{ borderColor: style.border, backgroundColor: emptyBackground }}
+                  >
                     <div className="echMetricEmpty" style={{ borderColor: emptyForegroundColor.keyword }}></div>
                   </div>
                 </li>
@@ -160,7 +166,10 @@ class Component extends React.Component<StateProps & DispatchProps> {
               });
               return (
                 <li key={`missing-${columnIndex}-${rowIndex}`} role="presentation">
-                  <div className={emptyMetricClassName} style={{ borderColor: style.border }}></div>
+                  <div
+                    className={emptyMetricClassName}
+                    style={{ borderColor: style.border, backgroundColor: emptyBackground }}
+                  ></div>
                 </li>
               );
             }),

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

@@ -419,6 +419,7 @@ export const DARK_THEME: Theme = {
     },
     border: DARK_BASE_COLORS.lightShade,
     barBackground: DARK_BASE_COLORS.lightShade,
+    emptyBackground: Colors.Transparent.keyword,
     nonFiniteText: 'N/A',
     minHeight: 64,
   },

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

@@ -415,6 +415,7 @@ export const LEGACY_DARK_THEME: Theme = {
     },
     border: '#343741',
     barBackground: '#343741',
+    emptyBackground: Colors.Transparent.keyword,
     nonFiniteText: 'N/A',
     minHeight: 64,
   },

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

@@ -414,6 +414,7 @@ export const LEGACY_LIGHT_THEME: Theme = {
     },
     border: '#EDF0F5',
     barBackground: '#EDF0F5',
+    emptyBackground: Colors.Transparent.keyword,
     nonFiniteText: 'N/A',
     minHeight: 64,
   },

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

@@ -418,6 +418,7 @@ export const LIGHT_THEME: Theme = {
     },
     border: '#EDF0F5', // LIGHT_BASE_COLORS.lightShade,
     barBackground: '#EDF0F5', // LIGHT_BASE_COLORS.lightShade,
+    emptyBackground: Colors.Transparent.keyword,
     nonFiniteText: 'N/A',
     minHeight: 64,
   },

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

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

storybook/parameters.ts

@@ -81,6 +81,7 @@ export const storybookParameters: Parameters = {
       { id: 'blue', title: 'Blue', color: '#14abf5' },
       { id: 'yellow', title: 'Yellow', color: '#fec709' },
       { id: 'green', title: 'Green', color: '#00c1b4' },
+      { id: 'gray', title: 'Gray', color: 'rgb(237, 240, 245)' },
     ],
   },
   toggles: {

storybook/stories/metric/2_grid.story.tsx

@@ -8,7 +8,7 @@
 
 import { EuiIcon } from '@elastic/eui';
 import { action } from '@storybook/addon-actions';
-import { select, number, boolean, button } from '@storybook/addon-knobs';
+import { select, number, boolean, button, color } from '@storybook/addon-knobs';
 import React, { useState } from 'react';
 
 import {
@@ -45,6 +45,7 @@ export const Example: ChartsStory = (_, { title, description }) => {
 
   const progressBarDirection = select('progress bar direction', ['horizontal', 'vertical'], 'vertical');
   const maxDataPoints = number('max trend data points', 30, { min: 0, max: 50, step: 1 });
+  const emptyBackground = color('empty background', 'transparent');
 
   const defaultValueFormatter = (d: number) => `${d}`;
   const data: (MetricBase | MetricWProgress | MetricWTrend | undefined)[] = [
@@ -194,6 +195,11 @@ export const Example: ChartsStory = (_, { title, description }) => {
           .join(' ')}
       <Chart title={title} description={description}>
         <Settings
+          theme={{
+            metric: {
+              emptyBackground,
+            },
+          }}
           baseTheme={useBaseTheme()}
           onElementClick={
             addMetricClick