Skip to content

fix: hex colors to allow alpha channel#1274

Merged
nickofthyme merged 3 commits intoelastic:masterfrom
nickofthyme:fix-heatmap-alpha
Jul 29, 2021
Merged

fix: hex colors to allow alpha channel#1274
nickofthyme merged 3 commits intoelastic:masterfrom
nickofthyme:fix-heatmap-alpha

Conversation

@nickofthyme
Copy link
Copy Markdown
Collaborator

@nickofthyme nickofthyme commented Jul 28, 2021

Summary

Color logic now correctly handles alpha channel values for 8-bit hex values as was/is possible with rgba, hsla formats.

Details

The getColor method now leverages chroma.js for robust color validation and parsing to feed to d3-color utils.

const output = getColor(input);

Below is a list of possible edge cases to supply as inputs to getColor and the respective return outputs

input output
undefined {"r":255,"g":0,"b":0,"opacity":1}
"" {"r":255,"g":0,"b":0,"opacity":1}
"bad" {"r":187,"g":170,"b":221,"opacity":1}
"#00000000" {"r":0,"g":0,"b":0,"opacity":0}
"#000000" {"r":0,"g":0,"b":0,"opacity":1}
"#6092c000" {"r":96,"g":146,"b":192,"opacity":0}
"#6092c06b" {"r":96,"g":146,"b":192,"opacity":0.42}
"blue" {"r":0,"g":0,"b":255,"opacity":1}
"hsl(20, 100%, 40%)" {"r":204,"g":68,"b":0,"opacity":1}
"hsla(20, 100%, 40%, 0.5)" {"r":204,"g":68,"b":0,"opacity":0.5}
"hsla(20, 100%, 40%, 0)" {"r":204,"g":68,"b":0,"opacity":0}
"rgb(0,128,128)" {"r":0,"g":128,"b":128,"opacity":1}
"rgba(0,128,128,0.5)" {"r":0,"g":128,"b":128,"opacity":0.5}
"rgba(0,128,128,0)" {"r":0,"g":128,"b":128,"opacity":0}

Issues

fix #1263

Checklist

  • The proper chart type label was added (e.g. :xy, :partition) if the PR involves a specific chart type
  • The proper feature label was added (e.g. :interactions, :axis) if the PR involves a specific chart feature
  • Whenever possible, please check if the closing issue is connected to a running GH project
  • Any consumer-facing exports were added to packages/charts/src/index.ts (and stories only import from ../src except for test data & storybook)
  • This was checked for cross-browser compatibility
  • Proper documentation or storybook story was added for features that require explanation or tutorials
  • Unit tests were updated or added to match the most common scenarios

@nickofthyme nickofthyme requested a review from markov00 July 28, 2021 21:57
@nickofthyme nickofthyme added :all Applies to all chart types :styling Styling related issue labels Jul 28, 2021
Copy link
Copy Markdown
Collaborator

@markov00 markov00 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for taking this! it looks good to me.
For who is wondering why the bad is translated to a color is because it is translated as a shorthand hex representation of #BBAADD <- thanks GitHub for this

@nickofthyme
Copy link
Copy Markdown
Collaborator Author

Oh wow, I didn't even notice that "bad" was not all red 🤦🏼

@nickofthyme nickofthyme merged commit 03b4f42 into elastic:master Jul 29, 2021
@nickofthyme nickofthyme deleted the fix-heatmap-alpha branch July 29, 2021 12:56
github-actions bot pushed a commit that referenced this pull request Aug 6, 2021
# [33.2.0](v33.1.0...v33.2.0) (2021-08-06)

### Bug Fixes

* heatmap snap domain to interval ([#1253](#1253)) ([b439182](b439182)), closes [#1165](#1165)
* hex colors to allow alpha channel ([#1274](#1274)) ([03b4f42](03b4f42))

### Features

* **bullet:** the tooltip shows up around the drawn part of the chart only ([#1278](#1278)) ([a96cbb4](a96cbb4))
* **legend:** multiline labels with maxLines option ([#1285](#1285)) ([e0eb096](e0eb096))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

:all Applies to all chart types :styling Styling related issue

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

2 participants