fix(metric): background colors and sparkline rendering (#2255)

e2e/tests/metric_stories.test.ts

@@ -56,6 +56,12 @@ test.describe('Metric', () => {
   pwEach.describe(['trend', 'bar', 'none'])(
     (v) => `Metric - ${v} type`,
     (type) => {
+      test('should render with blended background color', async ({ page }) => {
+        await common.expectChartAtUrlToMatchScreenshot(page)(
+          `http://localhost:9001/?path=/story/metric-alpha--basic&globals=toggles.showHeader:true;toggles.showChartTitle:false;toggles.showChartDescription:false;toggles.showChartBoundary:false;background:red;theme:light&knob-Config 1 - Color_Color Bands=rgba(245, 247, 250, 1)&knob-Config 2 - Palette_Color Bands=5&knob-Config 2 - Steps_Color Bands=5&knob-Config 3 - json_Color Bands={"classes":5,"colors":["pink","yellow","blue"]}&knob-Config 4 - json_Color Bands=[{"color":"red","gte":0,"lt":20},{"color":"green","gte":20,"lte":40},{"color":"blue","gt":40,"lte":{"type":"percentage","value":100}}]&knob-Domain padding unit=pixel&knob-EUI icon glyph name=warning&knob-EUI value icon glyph name=sortUp&knob-SeriesType=line&knob-Specs to fit (yDomain)=theshold,rect&knob-active tick step=0&knob-add series=true&knob-attach click handler=true&knob-bars padding=0.25&knob-blending background=rgba(255,255,255,1)&knob-color=rgba(51, 143, 200, 0.49)&knob-color config_Color Bands=2&knob-constrain padding=true&knob-dataset=both&knob-debug=true&knob-empty background=rgba(99, 69, 69, 0)&knob-enableHistogramMode=true&knob-end=100&knob-end_Domain=100&knob-end_General=100&knob-extra=last <b>5m</b>&knob-fit Y domain to data=true&knob-format=0&knob-format (numeraljs)_General=0.[0]&knob-hasHistogramBarSeries=true&knob-histogram padding=0.05&knob-is numeric metric=true&knob-max trend data points=30&knob-nice=true&knob-number of columns=4&knob-number of series=1&knob-other series=line&knob-point series alignment=center&knob-progress bar direction=vertical&knob-progress max=100&knob-progress or trend=${type}&knob-stacked=true&knob-start=-113&knob-start_Domain=0&knob-start_General=0&knob-subtitle=Cluster CPU usage&knob-subtitle_General=Lorem laborum nostrud consectetur&knob-subtype=two-thirds-circle&knob-subtype_General=vertical&knob-sync cursor=true&knob-target=75&knob-target_Domain=75&knob-target_General=75&knob-theshold - rect={"y0":100,"y1":null}&knob-thesholds - line=200&knob-tick label padding=10&knob-tick strategy_Ticks=auto&knob-tickFormat=0[.]00&knob-ticks(approx. count)_Ticks=5&knob-ticks(placements)_Ticks=-,2,0,,,5,,,1,0,,,1,5,,,0,2,0,,,2,5,,,5,0,,,1,0,0,0,,,2,0,0,,,-,1,0,0,,&knob-title=21d7f8b7-92ea-41a0-8c03-0db0ec7e11b9&knob-title_General=Ea consequat voluptate&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-use blending background=true&knob-use custom minInterval of 30s=true&knob-use multilayer time axis=true&knob-use progress bar=true&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=`;

packages/charts/api/charts.api.md

@@ -1952,6 +1952,7 @@ export const Metric: FC<SFProps<MetricSpec, "chartType" | "specType", "data", ne
 // @alpha (undocumented)
 export type MetricBase = {
     color: Color;
+    background?: Color;
     title?: string;
     valueColor?: Color;
     valueIcon?: ComponentType<{
@@ -1996,6 +1997,7 @@ export type MetricSpecProps = ComponentProps<typeof Metric>;
 export interface MetricStyle {
     // (undocumented)
     barBackground: Color;
+    blendingBackground?: Color;
     // (undocumented)
     border: Color;
     // (undocumented)

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

@@ -56,7 +56,7 @@ export const Metric: React.FunctionComponent<{
   datum,
   panel,
   style,
-  backgroundColor,
+  backgroundColor: chartBackgroundColor,
   contrastOptions,
   locale,
   onElementClick,
@@ -82,12 +82,21 @@ export const Metric: React.FunctionComponent<{
 
   const lightnessAmount = mouseState === 'leave' ? 0 : mouseState === 'enter' ? 0.05 : 0.1;
 
+  const backgroundColor = datum.background
+    ? RGBATupleToString(combineColors(colorToRgba(datum.background), colorToRgba(chartBackgroundColor)))
+    : chartBackgroundColor;
+  const blendingBackgroundColor = !style.blendingBackground
+    ? colorToRgba(backgroundColor)
+    : combineColors(colorToRgba(style.blendingBackground), colorToRgba(backgroundColor));
   const interactionColor = changeColorLightness(hasProgressBar ? backgroundColor : datum.color, lightnessAmount, 0.8);
-  const blendedBarColor = RGBATupleToString(combineColors(colorToRgba(datum.color), colorToRgba(backgroundColor)));
+  const blendedColor = RGBATupleToString(combineColors(colorToRgba(datum.color), blendingBackgroundColor));
+  const blendedInteractionColor = RGBATupleToString(
+    combineColors(colorToRgba(interactionColor), blendingBackgroundColor),
+  );
 
   const datumWithInteractionColor: MetricDatum = {
     ...datum,
-    color: interactionColor,
+    color: blendedInteractionColor,
   };
 
   const event: MetricElementEvent = { type: 'metricElementEvent', rowIndex, columnIndex };
@@ -100,7 +109,7 @@ export const Metric: React.FunctionComponent<{
 
   const highContrastTextColor = fillTextColor(
     backgroundColor,
-    isMetricWProgress(datum) ? backgroundColor : datum.color,
+    isMetricWProgress(datum) ? backgroundColor : blendedColor,
     undefined,
     contrastOptions,
   );
@@ -109,7 +118,7 @@ export const Metric: React.FunctionComponent<{
   if (isMetricWTrend(datum)) {
     const { ratio, color, shade } = fillTextColor(
       backgroundColor,
-      getSparkLineColor(datum.color),
+      getSparkLineColor(blendedColor),
       undefined,
       contrastOptions,
     );
@@ -172,7 +181,7 @@ export const Metric: React.FunctionComponent<{
         <ProgressBar
           datum={datumWithInteractionColor}
           barBackground={style.barBackground}
-          blendedBarColor={blendedBarColor}
+          blendedBarColor={blendedColor}
           size={progressBarSize}
         />
       )}

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

@@ -55,27 +55,15 @@ export const SparkLine: FunctionComponent<{
         role="img"
         aria-labelledby={`${titleId} ${descriptionId}`}
       >
-        <defs>
-          <mask id="sparkline-mask">
-            <rect x={0} y={0} width={1} height={1} fill="white" mask="url(#sparkline-mask)" />
-            <path
-              d={path.area(trend)}
-              transform="translate(0, 0.5),scale(1,0.5)"
-              fill="black"
-              stroke="none"
-              strokeWidth={0}
-            />
-          </mask>
-        </defs>
-
         <title id={titleId} className="echScreenReaderOnly">
           {trendA11yTitle}
         </title>
         <text id={descriptionId} className="echScreenReaderOnly" fontSize={0}>
           {trendA11yDescription}
         </text>
 
-        <rect x={0} y={0} width={1} height={1} fill={color} mask="url(#sparkline-mask)" />
+        <rect x={0} y={0} width={1} height={1} fill={color} />
+
         <path
           d={path.area(trend)}
           transform="translate(0, 0.5),scale(1,0.5)"

packages/charts/src/chart_types/metric/specs/index.ts

@@ -21,6 +21,10 @@ import { BulletValueLabels } from '../../bullet_graph/spec';
 /** @alpha */
 export type MetricBase = {
   color: Color;
+  /**
+   * Overrides background color from `Theme.background` and `Theme.metric.emptyBackground`
+   */
+  background?: Color;
   title?: string;
   valueColor?: Color;
   valueIcon?: ComponentType<{ width: number; height: number; color: Color; verticalAlign: 'middle' }>;

packages/charts/src/common/fill_text_color.ts

@@ -40,5 +40,5 @@ export function fillTextColor(
     return highContrastColor(blendedFgBg, 'WCAG2', options);
   }
 
-  return highContrastColor(backgroundRGBA);
+  return highContrastColor(backgroundRGBA, 'WCAG2', options);
 }

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

@@ -329,6 +329,10 @@ export interface MetricStyle {
   border: Color;
   barBackground: Color;
   emptyBackground: Color;
+  /**
+   * Optional color used to blend transparent colors. Defaults to `Theme.background`
+   */
+  blendingBackground?: Color;
   nonFiniteText: string;
   minHeight: Pixels;
 }

storybook/stories/metric/1_basic.story.tsx

@@ -68,6 +68,8 @@ export const Example: ChartsStory = (_, { title: storyTitle, description }) => {
   const iconType = text('EUI icon glyph name', 'warning');
   const showValueIcon = boolean('show value icon', false);
   const valueIconType = text('EUI value icon glyph name', 'sortUp');
+  const useBlendingBackground = boolean('use blending background', false);
+  const blendingBackground = color('blending background', 'rgba(255,255,255,1)');
   const getIcon =
     (type: string) =>
     ({ width, height, color }: { width: number; height: number; color: string }) => (
@@ -119,6 +121,11 @@ export const Example: ChartsStory = (_, { title: storyTitle, description }) => {
   return (
     <Chart title={storyTitle} description={description}>
       <Settings
+        theme={{
+          metric: {
+            blendingBackground: useBlendingBackground ? blendingBackground : undefined,
+          },
+        }}
         baseTheme={useBaseTheme()}
         onElementClick={([d]) => {
           if (isMetricElementEvent(d)) {