From 2fcce241ebba5728ae20ffccea46cdf1e935a185 Mon Sep 17 00:00:00 2001 From: Nick Partridge Date: Mon, 20 Nov 2023 15:43:08 -0700 Subject: [PATCH] fix(metric): background colors and sparkline rendering (#2255) # Conflicts: # e2e/screenshots/all.test.ts-snapshots/baselines/metric-alpha/grid-chrome-linux.png # e2e/screenshots/chart.test.ts-snapshots/chart/sizing/should-accommodate-chart-title-and-description-metric-sm-chrome-linux.png # e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/dark-theme/should-render-metric-with-click-interaction-chrome-linux.png # e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/dark-theme/should-render-metric-with-hover-interaction-chrome-linux.png # e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/dark-theme/should-render-metric-with-click-interaction-chrome-linux.png # e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/dark-theme/should-render-metric-with-hover-interaction-chrome-linux.png # e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/dark-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png # e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/light-theme/should-render-metric-with-click-interaction-chrome-linux.png # e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/light-theme/should-render-metric-with-hover-interaction-chrome-linux.png # e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/light-theme/should-render-metric-with-transparent-bg-color-chrome-linux.png # e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-horizontal-progress-bar-chrome-linux.png # e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-horizontal-progress-bar-in-dark-mode-chrome-linux.png # e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-no-progress-bar-chrome-linux.png # e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-no-progress-bar-in-dark-mode-chrome-linux.png # e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-vertical-progress-bar-in-dark-mode-chrome-linux.png # e2e/screenshots/metric_stories.test.ts-snapshots/metric/should-render-with-empty-and-missing-background-colors-chrome-linux.png # e2e/screenshots/metric_stories.test.ts-snapshots/metric/text-value-with-trend-chrome-linux.png # e2e/screenshots/metric_stories.test.ts-snapshots/metric/value-icon-and-value-color-chrome-linux.png # packages/charts/src/chart_types/metric/renderer/dom/metric.tsx --- ...-blended-background-color-chrome-linux.png | Bin 0 -> 11942 bytes ...-blended-background-color-chrome-linux.png | Bin 0 -> 12515 bytes ...-blended-background-color-chrome-linux.png | Bin 0 -> 13689 bytes e2e/tests/metric_stories.test.ts | 6 +++++ packages/charts/api/charts.api.md | 2 ++ .../metric/renderer/dom/metric.tsx | 21 +++++++++++++----- .../metric/renderer/dom/sparkline.tsx | 16 ++----------- .../src/chart_types/metric/specs/index.ts | 4 ++++ packages/charts/src/common/fill_text_color.ts | 2 +- packages/charts/src/utils/themes/theme.ts | 4 ++++ storybook/stories/metric/1_basic.story.tsx | 7 ++++++ 11 files changed, 41 insertions(+), 21 deletions(-) create mode 100644 e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/should-render-with-blended-background-color-chrome-linux.png create mode 100644 e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/should-render-with-blended-background-color-chrome-linux.png create mode 100644 e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/should-render-with-blended-background-color-chrome-linux.png diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/should-render-with-blended-background-color-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-bar-type/should-render-with-blended-background-color-chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..8749152cba9563508db6da1a7fc7893c37d23c95 GIT binary patch literal 11942 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 B@umO( literal 0 HcmV?d00001 diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/should-render-with-blended-background-color-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-none-type/should-render-with-blended-background-color-chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..fe7b1a1dfcb50b04064f9e284ebc48f0c3936f52 GIT binary patch literal 12515 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 a1hzh8!JKeaNAO<@5E%(Y@v`@ZLH`58hHYj5 literal 0 HcmV?d00001 diff --git a/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/should-render-with-blended-background-color-chrome-linux.png b/e2e/screenshots/metric_stories.test.ts-snapshots/metric/metric-trend-type/should-render-with-blended-background-color-chrome-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..b86603730360b74d333b74bacaa4170d8e225f08 GIT binary patch literal 13689 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 { 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 5m&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 5m&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=`; diff --git a/packages/charts/api/charts.api.md b/packages/charts/api/charts.api.md index 5d426febd9..5bd905f0d6 100644 --- a/packages/charts/api/charts.api.md +++ b/packages/charts/api/charts.api.md @@ -1828,6 +1828,7 @@ export const Metric: FC; export interface MetricStyle { // (undocumented) barBackground: Color; + blendingBackground?: Color; // (undocumented) border: Color; // (undocumented) diff --git a/packages/charts/src/chart_types/metric/renderer/dom/metric.tsx b/packages/charts/src/chart_types/metric/renderer/dom/metric.tsx index b3dfaae861..3ccedd9b3c 100644 --- a/packages/charts/src/chart_types/metric/renderer/dom/metric.tsx +++ b/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, @@ -80,12 +80,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 }; @@ -98,7 +107,7 @@ export const Metric: React.FunctionComponent<{ const highContrastTextColor = fillTextColor( backgroundColor, - isMetricWProgress(datum) ? backgroundColor : datum.color, + isMetricWProgress(datum) ? backgroundColor : blendedColor, undefined, contrastOptions, ); @@ -107,7 +116,7 @@ export const Metric: React.FunctionComponent<{ if (isMetricWTrend(datum)) { const { ratio, color, shade } = fillTextColor( backgroundColor, - getSparkLineColor(datum.color), + getSparkLineColor(blendedColor), undefined, contrastOptions, ); @@ -169,7 +178,7 @@ export const Metric: React.FunctionComponent<{ )}
diff --git a/packages/charts/src/chart_types/metric/renderer/dom/sparkline.tsx b/packages/charts/src/chart_types/metric/renderer/dom/sparkline.tsx index d83e17bb16..0fb581fb64 100644 --- a/packages/charts/src/chart_types/metric/renderer/dom/sparkline.tsx +++ b/packages/charts/src/chart_types/metric/renderer/dom/sparkline.tsx @@ -55,19 +55,6 @@ export const SparkLine: FunctionComponent<{ role="img" aria-labelledby={`${titleId} ${descriptionId}`} > - - - - - - - {trendA11yTitle} @@ -75,7 +62,8 @@ export const SparkLine: FunctionComponent<{ {trendA11yDescription} - + + ; diff --git a/packages/charts/src/common/fill_text_color.ts b/packages/charts/src/common/fill_text_color.ts index 68b2371264..f021a65a9b 100644 --- a/packages/charts/src/common/fill_text_color.ts +++ b/packages/charts/src/common/fill_text_color.ts @@ -40,7 +40,7 @@ export function fillTextColor( return highContrastColor(blendedFgBg, 'WCAG2', options); } - return highContrastColor(backgroundRGBA); + return highContrastColor(backgroundRGBA, 'WCAG2', options); } /** @internal */ diff --git a/packages/charts/src/utils/themes/theme.ts b/packages/charts/src/utils/themes/theme.ts index 71c6b37878..721d7e49df 100644 --- a/packages/charts/src/utils/themes/theme.ts +++ b/packages/charts/src/utils/themes/theme.ts @@ -328,6 +328,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; } diff --git a/storybook/stories/metric/1_basic.story.tsx b/storybook/stories/metric/1_basic.story.tsx index fca6f2f987..db25d0523e 100644 --- a/storybook/stories/metric/1_basic.story.tsx +++ b/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 ( { if (isMetricElementEvent(d)) {