diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-with-empty-and-missing-background-colors-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-with-empty-and-missing-background-colors-chrome-linux.png new file mode 100644 index 00000000000..a2ed0c3e2c8 Binary files /dev/null and b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-with-empty-and-missing-background-colors-chrome-linux.png differ diff --git a/e2e/tests/metric_stories.test.ts b/e2e/tests/metric_stories.test.ts index f2c97f3de06..a10d78392c5 100644 --- a/e2e/tests/metric_stories.test.ts +++ b/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 5m&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`, diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md index 698d3ea8bf8..f3434ca3be8 100644 --- a/packages/charts/api/charts.api.md +++ b/packages/charts/api/charts.api.md @@ -1999,6 +1999,8 @@ export interface MetricStyle { // (undocumented) border: Color; // (undocumented) + emptyBackground: Color; + // (undocumented) minHeight: Pixels; // (undocumented) nonFiniteText: string; diff --git a/packages/charts/src/chart_types/bullet_graph/renderer/canvas/index.tsx b/packages/charts/src/chart_types/bullet_graph/renderer/canvas/index.tsx index f295e5d2bab..2f5c5f23070 100644 --- a/packages/charts/src/chart_types/bullet_graph/renderer/canvas/index.tsx +++ b/packages/charts/src/chart_types/bullet_graph/renderer/canvas/index.tsx @@ -17,7 +17,7 @@ import { bindActionCreators, Dispatch } from 'redux'; import { renderBulletGraph } from './bullet_graph'; import { ColorContrastOptions } from '../../../../common/color_calcs'; import { colorToRgba } from '../../../../common/color_library_wrappers'; -import { Color } from '../../../../common/colors'; +import { Color, Colors } from '../../../../common/colors'; import { AlignedGrid } from '../../../../components/grid/aligned_grid'; import { ElementOverListener, settingsBuildProps } from '../../../../specs'; import { onChartRendered } from '../../../../state/actions/chart'; @@ -198,6 +198,7 @@ class Component extends React.Component { rowIndex={stats.rowIndex} style={{ barBackground: colorScale(datum.value).hex(), + emptyBackground: Colors.Transparent.keyword, border: 'gray', minHeight: 0, text: { diff --git a/packages/charts/src/chart_types/metric/renderer/dom/index.tsx b/packages/charts/src/chart_types/metric/renderer/dom/index.tsx index c06d0aaa7c8..72dd93bbd23 100644 --- a/packages/charts/src/chart_types/metric/renderer/dom/index.tsx +++ b/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, combineColors, highContrastColor } from '../../../../common/color_calcs'; +import { colorToRgba, RGBATupleToString } from '../../../../common/color_library_wrappers'; import { Color } from '../../../../common/colors'; import { BasicListener, ElementClickListener, ElementOverListener, settingsBuildProps } from '../../../../specs'; import { onChartRendered } from '../../../../state/actions/chart'; @@ -100,7 +100,10 @@ class Component extends React.Component { 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 { }); return !datum ? (
  • -
    +
    • @@ -160,7 +166,10 @@ class Component extends React.Component { }); return (
  • -
    +
    • ); }), diff --git a/packages/charts/src/utils/themes/dark_theme.ts b/packages/charts/src/utils/themes/dark_theme.ts index 4653de47f3a..b57ee628363 100644 --- a/packages/charts/src/utils/themes/dark_theme.ts +++ b/packages/charts/src/utils/themes/dark_theme.ts @@ -410,6 +410,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, }, diff --git a/packages/charts/src/utils/themes/legacy_dark_theme.ts b/packages/charts/src/utils/themes/legacy_dark_theme.ts index a23ad13981b..8703f76e64b 100644 --- a/packages/charts/src/utils/themes/legacy_dark_theme.ts +++ b/packages/charts/src/utils/themes/legacy_dark_theme.ts @@ -416,6 +416,7 @@ export const LEGACY_DARK_THEME: Theme = { }, border: '#343741', barBackground: '#343741', + emptyBackground: Colors.Transparent.keyword, nonFiniteText: 'N/A', minHeight: 64, }, diff --git a/packages/charts/src/utils/themes/legacy_light_theme.ts b/packages/charts/src/utils/themes/legacy_light_theme.ts index 0f7c2263b52..67980452ec1 100644 --- a/packages/charts/src/utils/themes/legacy_light_theme.ts +++ b/packages/charts/src/utils/themes/legacy_light_theme.ts @@ -415,6 +415,7 @@ export const LEGACY_LIGHT_THEME: Theme = { }, border: '#EDF0F5', barBackground: '#EDF0F5', + emptyBackground: Colors.Transparent.keyword, nonFiniteText: 'N/A', minHeight: 64, }, diff --git a/packages/charts/src/utils/themes/light_theme.ts b/packages/charts/src/utils/themes/light_theme.ts index d414f757cdb..c82fb3a130b 100644 --- a/packages/charts/src/utils/themes/light_theme.ts +++ b/packages/charts/src/utils/themes/light_theme.ts @@ -409,6 +409,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, }, diff --git a/packages/charts/src/utils/themes/theme.ts b/packages/charts/src/utils/themes/theme.ts index 20374575dc1..8497c7bb573 100644 --- a/packages/charts/src/utils/themes/theme.ts +++ b/packages/charts/src/utils/themes/theme.ts @@ -328,6 +328,7 @@ export interface MetricStyle { }; border: Color; barBackground: Color; + emptyBackground: Color; nonFiniteText: string; minHeight: Pixels; } diff --git a/storybook/parameters.ts b/storybook/parameters.ts index 92098995704..c5b02c07431 100644 --- a/storybook/parameters.ts +++ b/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: { diff --git a/storybook/stories/metric/2_grid.story.tsx b/storybook/stories/metric/2_grid.story.tsx index 84b791c8cdd..2ab58e9c4f0 100644 --- a/storybook/stories/metric/2_grid.story.tsx +++ b/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, { useEffect, useMemo, useState } from 'react'; import { Chart, isMetricElementEvent, Metric, MetricDatum, Settings } from '@elastic/charts'; @@ -51,6 +51,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 data: (MetricDatum | undefined)[] = useMemo( () => [ @@ -211,6 +212,11 @@ export const Example: ChartsStory = (_, { title, description }) => { .join(' ')}