Skip to content

Commit

Permalink
fix(metric): add option to set empty cell background color (#2247)
Browse files Browse the repository at this point in the history
  • Loading branch information
nickofthyme committed Nov 19, 2023
1 parent dcb56fa commit 6a9fb86
Show file tree
Hide file tree
Showing 12 changed files with 36 additions and 7 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions e2e/tests/metric_stories.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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`,
Expand Down
2 changes: 2 additions & 0 deletions packages/charts/api/charts.api.md
Original file line number Diff line number Diff line change
Expand Up @@ -1999,6 +1999,8 @@ export interface MetricStyle {
// (undocumented)
border: Color;
// (undocumented)
emptyBackground: Color;
// (undocumented)
minHeight: Pixels;
// (undocumented)
nonFiniteText: string;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -198,6 +198,7 @@ class Component extends React.Component<Props> {
rowIndex={stats.rowIndex}
style={{
barBackground: colorScale(datum.value).hex(),
emptyBackground: Colors.Transparent.keyword,
border: 'gray',
minHeight: 0,
text: {
Expand Down
19 changes: 14 additions & 5 deletions packages/charts/src/chart_types/metric/renderer/dom/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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
Expand All @@ -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>
Expand Down Expand Up @@ -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>
);
}),
Expand Down
1 change: 1 addition & 0 deletions packages/charts/src/utils/themes/dark_theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
Expand Down
1 change: 1 addition & 0 deletions packages/charts/src/utils/themes/legacy_dark_theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -416,6 +416,7 @@ export const LEGACY_DARK_THEME: Theme = {
},
border: '#343741',
barBackground: '#343741',
emptyBackground: Colors.Transparent.keyword,
nonFiniteText: 'N/A',
minHeight: 64,
},
Expand Down
1 change: 1 addition & 0 deletions packages/charts/src/utils/themes/legacy_light_theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -415,6 +415,7 @@ export const LEGACY_LIGHT_THEME: Theme = {
},
border: '#EDF0F5',
barBackground: '#EDF0F5',
emptyBackground: Colors.Transparent.keyword,
nonFiniteText: 'N/A',
minHeight: 64,
},
Expand Down
1 change: 1 addition & 0 deletions packages/charts/src/utils/themes/light_theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
Expand Down
1 change: 1 addition & 0 deletions packages/charts/src/utils/themes/theme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -328,6 +328,7 @@ export interface MetricStyle {
};
border: Color;
barBackground: Color;
emptyBackground: Color;
nonFiniteText: string;
minHeight: Pixels;
}
Expand Down
1 change: 1 addition & 0 deletions storybook/parameters.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
8 changes: 7 additions & 1 deletion storybook/stories/metric/2_grid.story.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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(
() => [
Expand Down Expand Up @@ -211,6 +212,11 @@ export const Example: ChartsStory = (_, { title, description }) => {
.join(' ')}
<Chart title={title} description={description}>
<Settings
theme={{
metric: {
emptyBackground,
},
}}
baseTheme={useBaseTheme()}
onElementClick={
addMetricClick
Expand Down

0 comments on commit 6a9fb86

Please sign in to comment.