Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: hex colors to allow alpha channel #1274

Merged
merged 3 commits into from Jul 29, 2021

Conversation

nickofthyme
Copy link
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 added :all Applies to all chart types :styling Styling related issue labels Jul 28, 2021
Copy link
Member

@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
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