feat(metric): allow alpha colors and improve contrast logic #2184

nickofthyme · 2023-10-02T20:53:52Z

Summary

Adds support for colors with alpha channel on Metric charts including sparkline and progress bar colors.

Screen.Recording.2023-10-02.at.01.50.54.PM.mp4

It's hard to see the changes from a simple demo so please play around with the story here.

Details

These changes clean up a bit of the background color and contrast color for the Metric chart.

Notable changes:

Removes the backgroundColor option on the Theme.metric (aka MetricStyle) in favor of the top-level Theme.background
Fixes color logic converting hsl to rgba while persisting the alpha value, see 48f2076.
Enables setting transparent colors for progress bar, overall metric color and implicitly the sparkline color.

Issues

Fixes #2183

Checklist

The proper chart type label has been added (e.g. :xy, :partition)
The proper feature labels have been added (e.g. :interactions, :axis)
All related issues have been linked (i.e. closes #123, fixes #123)
Unit tests have been added or updated to match the most common scenarios
The code has been checked for cross-browser compatibility (Chrome, Firefox, Safari, Edge)
Visual changes have been tested with all available themes including dark, light, eui-dark & eui-light

- allow passing alpha channel for metric color & sparkline - allow passing alpha channel for metric progress bar color - remove backgroundColor from metric in favor of top-level bgColor -

nickofthyme · 2023-10-03T20:57:07Z

buildkite update screenshots

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

e2e/screenshots/all.test.ts-snapshots/baselines/metric-alpha/grid-chrome-linux.png

nickofthyme · 2023-10-04T19:10:48Z

buildkite update screenshots

nickofthyme · 2023-10-05T03:22:15Z

buildkite update screenshots

markov00 · 2023-10-05T12:58:39Z

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

@@ -36,8 +36,8 @@ export const SparkLine: FunctionComponent<{
    trendShape === MetricTrendShape.Bars ? CurveType.CURVE_STEP_AFTER : CurveType.LINEAR,
  );

-  const [h, s, l] = colorToHsl(color);
-  const pathColor = hslToColor(h, s, l >= 0.8 ? l - 0.1 : l + 0.1);
+  const [h, s, l, a] = colorToHsl(color);


I think you have to blend first the color with a valid opaque background before changing the lightning, preserving the alpha is not the same thing as we where looking at doing here

I'm not quite sure what you're saying here, I need to blend the sparkline color with an opaque background?

I think you are right here since the transparent sparkline would be rendered on top of the transparent back area. I think a good fix of this is to just mask the filled sparkline from the background. See 6bd75a4

packages/charts/src/common/color_library_wrappers.ts

markov00 · 2023-10-05T13:23:29Z

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

+  const highContrastTextColor = fillTextColor(
+    backgroundColor,
+    isMetricWProgress(datum) ? backgroundColor : datum.color,
+    undefined,
+    {
+      lightColor: colorToRgba(style.text.lightColor),
+      darkColor: colorToRgba(style.text.darkColor),
+    },
+  );


I believe we should improve this a bit because the text could be above the background but also above the area background that has a different luminosity and that could change the contrast.
I think we can do the following:

find the color contrast ratios of each text color for both background colors (metric and area)

pick the text color that is more close to pass the WCAG threshold in both situations

Are you talking about the checking between the background and the sparkline area?

Ok I took a stab at this and indeed there is a small range where the text color contrast selection is opposing.

So I'm checking when there is a trend line for the contrast over the sparkline, then if different I take the color with the higher ratio. This is the part I'm not sure about, if it should be the higher one but also if we are even comaring the right ration since one is based on the light color and the other on the dark.

The main logic is here...

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

Lines 100 to 120 in e254ac8

const highContrastTextColor = fillTextColor(

backgroundColor,

isMetricWProgress(datum) ? backgroundColor : datum.color,

undefined,

contrastOptions,

);

let finalTextColor = highContrastTextColor.color;

if (isMetricWTrend(datum)) {

const { ratio, color, shade } = fillTextColor(

backgroundColor,

getSparkLineColor(datum.color),

undefined,

contrastOptions,

);

// TODO verify this check is applied correctly

if (shade !== highContrastTextColor.shade && ratio > highContrastTextColor.ratio) {

finalTextColor = color;

}

}

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

…ric-opacity

nickofthyme · 2023-10-06T22:17:42Z

buildkite update screenshots

…ric-opacity

# [61.0.0](v60.0.0...v61.0.0) (2023-11-08) ### Bug Fixes * `onRenderChange` callback trigger on resize ([#2228](#2228)) ([be30c1b](be30c1b)) * **axis:** always render `tickLine` unless `visible` is `false` ([#2194](#2194)) ([ec95d50](ec95d50)) * **BarSeries:** ignore histogram mode in determining stacked series ([#2225](#2225)) ([27b4281](27b4281)) * clamp brushing min of last bucket ([#2227](#2227)) ([155c22d](155c22d)) * **deps:** update dependency @elastic/eui to ^88.5.0 ([#2179](#2179)) ([2bb921e](2bb921e)) * **deps:** update dependency @elastic/eui to ^88.5.4 ([#2190](#2190)) ([05b33e5](05b33e5)) * **deps:** update dependency @elastic/eui to ^89.1.0 ([#2212](#2212)) ([a91f68d](a91f68d)) * **deps:** update dependency @elastic/eui to v89 ([#2193](#2193)) ([132327d](132327d)) * **deps:** update dependency @elastic/eui to v90 ([#2222](#2222)) ([10cd53b](10cd53b)) ### chore * reclaim charts theme ownership from eui ([#2175](#2175)) ([422c7d5](422c7d5)) ### Features * **metric:** allow alpha colors and improve contrast logic ([#2184](#2184)) ([dd5732e](dd5732e)) ### BREAKING CHANGES * **BarSeries:** now ignores histogram mode in determining stacked series * elastic charts theme renamed to `LEGACY_DARK_THEME` and `LEGACY_LIGHT_THEME` in favor of the main `DARK_THEME` and `LIGHT_THEME` which was merged with eui theme overrides. These new themes are now default. * **axis:** Now respects `tickLine.padding` whenever `tickLine.visible` is `true`

nickofthyme added 2 commits October 2, 2023 12:56

fix: hsl color logic to preserve alpha channel

48f2076

feat: allow alpha colors and improve contrast logic

ca3b11d

- allow passing alpha channel for metric color & sparkline - allow passing alpha channel for metric progress bar color - remove backgroundColor from metric in favor of top-level bgColor -

nickofthyme added :styling Styling related issue :metric Related to Metric chart labels Oct 2, 2023

nickofthyme requested a review from markov00 October 2, 2023 20:54

fix: api changes

0786046

test(vrt): update screenshots [skip ci]

d42138b

nickofthyme commented Oct 3, 2023

View reviewed changes

packages/charts/src/utils/themes/dark_theme.ts Show resolved Hide resolved

nickofthyme commented Oct 3, 2023

View reviewed changes

e2e/screenshots/all.test.ts-snapshots/baselines/metric-alpha/grid-chrome-linux.png Outdated Show resolved Hide resolved

nickofthyme requested a review from gvnmagni October 3, 2023 21:37

nickofthyme marked this pull request as ready for review October 3, 2023 21:37

fix: pass text colors to contrast logic

29f198d

elastic-datavis bot and others added 5 commits October 4, 2023 19:28

test(vrt): update screenshots [skip ci]

a52acb3

fix: bad vrt case [update-vrt]

f4cea4e

test(vrt): update screenshots [skip ci]

65d4449

test: add vrt for transparent metric bg colors

edf8e67

Merge branch 'main' into fix-metric-opacity

50b5046

test(vrt): update screenshots [skip ci]

3d00b28

markov00 reviewed Oct 5, 2023

View reviewed changes

nickofthyme and others added 7 commits October 5, 2023 08:12

chore: remove bg color check/error

e7c9b93

test: fix theme params in url [update-vrt]

8d7c1e2

test(vrt): update screenshots [skip ci]

05859c3

Merge branch 'main' into fix-metric-opacity

290ab5b

fix: split background and sparkline with alpha mask

6bd75a4

Merge remote-tracking branch 'origin/fix-metric-opacity' into fix-met…

ac205ac

…ric-opacity

fix: add contrast check for text over sparkline

e254ac8

elastic-datavis bot and others added 5 commits October 6, 2023 22:33

test(vrt): update screenshots [skip ci]

acde825

test: fix failing jest tests

c362e79

Merge branch 'main' into fix-metric-opacity

e3b90fc

Merge remote-tracking branch 'origin/fix-metric-opacity' into fix-met…

092a680

…ric-opacity

Merge branch 'main' into fix-metric-opacity

9442cc7

nickofthyme merged commit dd5732e into elastic:main Oct 10, 2023
13 checks passed

nickofthyme deleted the fix-metric-opacity branch October 10, 2023 23:30

nickofthyme changed the title ~~feat: allow alpha colors and improve contrast logic~~ feat(metric): allow alpha colors and improve contrast logic Oct 10, 2023

nickofthyme mentioned this pull request Oct 25, 2023

fix(metric): fix rendering artifact #2218

Closed

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(metric): allow alpha colors and improve contrast logic #2184

feat(metric): allow alpha colors and improve contrast logic #2184

nickofthyme commented Oct 2, 2023 •

edited

Loading

nickofthyme commented Oct 3, 2023

nickofthyme commented Oct 4, 2023

nickofthyme commented Oct 5, 2023

markov00 Oct 5, 2023

nickofthyme Oct 5, 2023

nickofthyme Oct 6, 2023

markov00 Oct 5, 2023

nickofthyme Oct 5, 2023

nickofthyme Oct 6, 2023

nickofthyme commented Oct 6, 2023

	const highContrastTextColor = fillTextColor(
	backgroundColor,
	isMetricWProgress(datum) ? backgroundColor : datum.color,
	undefined,
	contrastOptions,
	);
	let finalTextColor = highContrastTextColor.color;

	if (isMetricWTrend(datum)) {
	const { ratio, color, shade } = fillTextColor(
	backgroundColor,
	getSparkLineColor(datum.color),
	undefined,
	contrastOptions,
	);

	// TODO verify this check is applied correctly
	if (shade !== highContrastTextColor.shade && ratio > highContrastTextColor.ratio) {
	finalTextColor = color;
	}
	}

feat(metric): allow alpha colors and improve contrast logic #2184

feat(metric): allow alpha colors and improve contrast logic #2184

Conversation

nickofthyme commented Oct 2, 2023 • edited Loading

Summary

Details

Issues

Checklist

nickofthyme commented Oct 3, 2023

nickofthyme commented Oct 4, 2023

nickofthyme commented Oct 5, 2023

markov00 Oct 5, 2023

Choose a reason for hiding this comment

nickofthyme Oct 5, 2023

Choose a reason for hiding this comment

nickofthyme Oct 6, 2023

Choose a reason for hiding this comment

markov00 Oct 5, 2023

Choose a reason for hiding this comment

nickofthyme Oct 5, 2023

Choose a reason for hiding this comment

nickofthyme Oct 6, 2023

Choose a reason for hiding this comment

nickofthyme commented Oct 6, 2023

nickofthyme commented Oct 2, 2023 •

edited

Loading