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

nickofthyme · 2023-11-20T18:27:44Z

Summary

This PR fixes issues created in #2184 related to rendering of the sparkline with transparent backgrounds. Additions include:

Added optional Theme.metric.blendingBackground option used to blend transparent colors when used with a non-default background.
Added optional background option MetricBase to override the background of individual metric cells.

Details

In #2184 we added support for transparent colors. For this change we rendered the sparkline using an svg mask to separate the fill from the sparkline (see #2184 (comment)) to allow both to have a transparent background that would then blend with the echBackground color. But this approach created a small rendering artifact (see #2218) and also created a rendering issue with duplicated masking ids...

Note all successive cells use the mask from the first cell. The third is fixed with a unique mask id.

The changes in #2184 created other issues (see #2248) causing a revert back to filling the metric elements with blend opaque colors. And thus the need to separate the sparkline svg elements is no longer valid. We now fill the svg sparkline with the respective blended background color.

Additionally we added the Theme.metric.blendingBackground option to specify the background color to blend transparent colors. This is useful in cases where the metric has a set background color like gray but has a transparent color fill. This option allows setting the blend color the the empty color of the theme rather than the gray background for more theme-specific coloring.

In the demo above we set the color fill to very transparent, change the background color to pink, then set the color transparency to ~50%. At this point you can see the pink blending with the metric color. But this new option allows us to use the theme background, in this case white, to blend the color. The background color is used elsewhere as needed (i.e. to fill text area of metrics with progress bar, empty/missing cells, etc.

Also fixes error in lightness logic with alpha values.

Checklist

The proper chart type label has been added (e.g. :xy, :partition)
The proper feature labels have been added (e.g. :interactions, :axis)
New public API exports have been added to packages/charts/src/index.ts
Unit tests have been added or updated to match the most common scenarios
The proper documentation and/or storybook story has been added or updated
Visual changes have been tested with light and dark themes

nickofthyme · 2023-11-20T18:34:06Z

buildkite update screenshots

nickofthyme · 2023-11-20T22:19:55Z

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);


Missed this last time when passing text contrast options

nickofthyme · 2023-11-20T22:20:13Z

buildkite test this

# 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

## [61.0.2](v61.0.1...v61.0.2) (2023-11-21) ### Bug Fixes * **metric:** background colors and sparkline rendering ([#2255](#2255)) [61.0.x] ([#2257](#2257)) ([dfcb57a](dfcb57a))

… [61.0.x] (elastic#2257)

# [61.2.0](v61.1.0...v61.2.0) (2023-12-19) ### Bug Fixes * **deps:** update dependency @elastic/eui to ^91.1.0 ([#2267](#2267)) ([308e974](308e974)) * **deps:** update dependency @elastic/eui to ^91.2.0 ([#2268](#2268)) ([29cdcb3](29cdcb3)) * **metric:** background colors and sparkline rendering ([#2255](#2255)) ([5abddfc](5abddfc)) * **partition:** rendering with small radius ([#2273](#2273)) ([95a8537](95a8537)) * **partition:** zero value sectors cause max stack call ([#2260](#2260)) ([4b30db7](4b30db7)) * **theme:** legacy margins ([#2262](#2262)) ([299c869](299c869)) ### Features * increase tooltip width to 500px and truncate items to 2 lines ([#2261](#2261)) ([afdef1c](afdef1c))

[![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@elastic/charts](https://togithub.com/elastic/elastic-charts) | [`61.0.3` -> `61.2.0`](https://renovatebot.com/diffs/npm/@elastic%2fcharts/61.0.3/61.2.0) | [![age](https://developer.mend.io/api/mc/badges/age/npm/@elastic%2fcharts/61.2.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@elastic%2fcharts/61.2.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@elastic%2fcharts/61.0.3/61.2.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@elastic%2fcharts/61.0.3/61.2.0?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>elastic/elastic-charts (@elastic/charts)</summary> ### [61.2.0](elastic/elastic-charts@v61.1.0...v61.2.0) (2023-12-19) ##### Bug Fixes * **deps:** update dependency @elastic/eui to ^91.1.0 ([#2267](elastic/elastic-charts#2267)) ([308e974](elastic/elastic-charts@308e974)) * **deps:** update dependency @elastic/eui to ^91.2.0 ([#2268](elastic/elastic-charts#2268)) ([29cdcb3](elastic/elastic-charts@29cdcb3)) * **metric:** background colors and sparkline rendering ([#2255](elastic/elastic-charts#2255)) ([5abddfc](elastic/elastic-charts@5abddfc)) * **partition:** rendering with small radius ([#2273](elastic/elastic-charts#2273)) ([95a8537](elastic/elastic-charts@95a8537)) * **partition:** zero value sectors cause max stack call ([#2260](elastic/elastic-charts#2260)) ([4b30db7](elastic/elastic-charts@4b30db7)) * **theme:** legacy margins ([#2262](elastic/elastic-charts#2262)) ([299c869](elastic/elastic-charts@299c869)) ##### Features * increase tooltip width to 500px and truncate items to 2 lines ([#2261](elastic/elastic-charts#2261)) ([afdef1c](elastic/elastic-charts@afdef1c)) ### [`v61.1.0`](https://togithub.com/elastic/elastic-charts/blob/HEAD/CHANGELOG.md#6110-2023-11-20) [Compare Source](https://togithub.com/elastic/elastic-charts/compare/v61.0.3...v61.1.0) ##### Bug Fixes - **deps:** update dependency [@elastic/eui](https://togithub.com/elastic/eui) to v91 ([#2233](https://togithub.com/elastic/elastic-charts/issues/2233)) ([e89f623](https://togithub.com/elastic/elastic-charts/commit/e89f623792312c4f6b609ebb975de0800f3c297e)) - **metric:** add option to set empty cell background color ([#2247](https://togithub.com/elastic/elastic-charts/issues/2247)) ([6a9fb86](https://togithub.com/elastic/elastic-charts/commit/6a9fb86bee5212a47060c5070f260961097014b4)) - **metric:** background color for bar with interactions ([#2248](https://togithub.com/elastic/elastic-charts/issues/2248)) ([dcb56fa](https://togithub.com/elastic/elastic-charts/commit/dcb56fa08540631a9b3b0e588352ee6daf3d54a0)) ##### Features - **bullet:** improve header layout and positioning ([#2243](https://togithub.com/elastic/elastic-charts/issues/2243)) ([b3a95d2](https://togithub.com/elastic/elastic-charts/commit/b3a95d24fb02690ca6599622352c743c04624690)) - **bullet:** new design style and implementation ([#2156](https://togithub.com/elastic/elastic-charts/issues/2156)) ([fca6cdd](https://togithub.com/elastic/elastic-charts/commit/fca6cdd5bc34a65c0792dbab7d756404bf43501b)) </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied. ♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/elastic/kibana).  --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Marco Vettorello <marco.vettorello@elastic.co>

fix(metric): background colors and sparkline rendering

7398099

nickofthyme added bug Something isn't working :styling Styling related issue :metric Related to Metric chart labels Nov 20, 2023

nickofthyme added 2 commits November 20, 2023 11:28

chore: update api changes

821676d

test: add test cases for blendingBackground option

e8ec20a

test(vrt): update screenshots [skip ci]

546e24e

nickofthyme commented Nov 20, 2023

View reviewed changes

nickofthyme mentioned this pull request Nov 20, 2023

fix(metric): fix rendering artifact #2218

Closed

3 tasks

nickofthyme merged commit 5abddfc into elastic:main Nov 20, 2023
13 checks passed

nickofthyme deleted the fix-metric-sparkline branch November 20, 2023 22:43

nickofthyme mentioned this pull request Nov 20, 2023

fix(metric): background colors and sparkline rendering (#2255) [61.0.x] #2257

Merged

nickofthyme added a commit to nickofthyme/elastic-charts that referenced this pull request Nov 29, 2023

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

dfcb57a

… [61.0.x] (elastic#2257)

markov00 mentioned this pull request Dec 20, 2023

Update dependency @elastic/charts to v61.2.0 (main) elastic/kibana#173329

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

nickofthyme commented Nov 20, 2023 •

edited

nickofthyme commented Nov 20, 2023

nickofthyme Nov 20, 2023

nickofthyme commented Nov 20, 2023

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

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

Conversation

nickofthyme commented Nov 20, 2023 • edited

Summary

Details

Checklist

nickofthyme commented Nov 20, 2023

nickofthyme Nov 20, 2023

Choose a reason for hiding this comment

nickofthyme commented Nov 20, 2023

nickofthyme commented Nov 20, 2023 •

edited