[Heatmap] Color with 0% opacity fallbacks to "default" red color

[dej611]

Describe the bug
When passing a 8 digits HEX color (classic HEX 6-digits + alpha channel), when the alpha channel is 0 the color seems to be ignored and the fallback red color is used.

To Reproduce

1. Pass the following colors={} props to the Heatmap component: ["#6092c000", "#6092c000", "#a8bfda", "#ebeff5", "#ecb385", "#e7664c"]
2. Watch the first 2 buckets get colored in red

Apparently the bug does not appear when using the rgba notation.

Expected behaviour

Transparent color should appear.

Screenshots

Kibana Cross Issues
elastic/kibana#106419

[nickofthyme]

Interesting. So you'd expect it to allow a transparent color or prevent transparent color selection?

[dej611]

I think it should allow the transparent color.
But more in general be consistent with the different notations: rgba transparent is accepted but hex transparent is replaced 😅

[nickofthyme]

Totally! Got it thanks!

[nickofthyme]

It appears that the getColor function cannot handle hex values color strings with an alpha channel. Might be a related issue.

getColor('#00000000') // => {r: NaN, g: NaN, b: NaN, opacity: 0}
getColor('#000000') // =>  {r: 0, g: 0, b: 0, opacity: 1}

elastic-charts/packages/charts/src/common/color_library_wrappers.ts

Lines 57 to 76 in f3f8d35

	/**
	* Returns color as RgbObject or default fallback.
	*
	* Handles issue in d3-color for hsla and rgba colors with alpha value of `0`
	*
	* @param cssColorSpecifier
	*/
	function getColor(cssColorSpecifier: string = ''): RgbObject {
	const endRegEx = /,\s*0+(\.0*)?\s*\)$/;
	// TODO: make this check more robust
	const color: D3RGBColor =
	/^(rgba|hsla)\(/i.test(cssColorSpecifier) && endRegEx.test(cssColorSpecifier)
	? {
	...d3Rgb(cssColorSpecifier.replace(endRegEx, ',1)')),
	opacity: 0,
	}
	: d3Rgb(cssColorSpecifier);
	return validateColor(color) ?? defaultColor;
	}

[dej611]

Maybe related to this d3/d3-color#52

The only solution I found is to pass thru chroma-js to extract the rgba raw values and use then the d3Rgb call to have the correct result: d3Rgb(chroma(cssColorSpecifier).rgba()).

Otherwise a special detection branch to return the transparent color.

[nickofthyme]

This appears to be broken in 33.0.2 but I cannot reproduce it in our master branch. I'll run a release and make sure the latest release fixes before closing.

https://codesandbox.io/s/lucid-cache-6zlmm?file=/src/App.tsx

---

UPDATE: It's still bad in 33.1.0 somehow. I'll continue to investigate.