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(renderer): stroke opacity #335

Merged
merged 8 commits into from
Aug 26, 2019
Merged

Conversation

nickofthyme
Copy link
Collaborator

@nickofthyme nickofthyme commented Aug 21, 2019

Summary

Fix #323

Fix stoke opacity on bar charts.

Add a property for strokeOpacity on RectBorderStyle. Fallback uses opacity on RectStyle.

If strokeOpacity is provided the unhighlighted stoke opacity is averaged between the provided value and the global unhighlighted opacity value.

This change requires splitting the fill and stroke into TWO separate Rect elements as the Konva Rect API does not allow for stroke opacity but forces inheritance from the fill opacity.

Currently, the perfectDrawEnabled is set to false which causes the border to overlap the fill. These changes inset the border/stroke inside of the filled rectangle/bar. https://konvajs.org/docs/performance/Disable_Perfect_Draw.html

image

Demo

Screen Recording 2019-08-21 at 03 02 PM

Checklist

  • This was checked for cross-browser compatibility, including a check against IE11
  • 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
  • Each commit follows the convention

@nickofthyme nickofthyme requested a review from markov00 August 21, 2019 20:23
@nickofthyme
Copy link
Collaborator Author

@markov00 a strange consequence of this is when stacking bars the bar segments don't look as uniform.

Image 2019-08-21 at 3 24 51 PM

@codecov-io
Copy link

codecov-io commented Aug 23, 2019

Codecov Report

Merging #335 into master will increase coverage by <.01%.
The diff coverage is 100%.

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #335      +/-   ##
==========================================
+ Coverage   98.27%   98.28%   +<.01%     
==========================================
  Files          38       38              
  Lines        2729     2737       +8     
  Branches      643      644       +1     
==========================================
+ Hits         2682     2690       +8     
  Misses         43       43              
  Partials        4        4
Impacted Files Coverage Δ
src/utils/themes/theme.ts 100% <ø> (ø) ⬆️
src/chart_types/xy_chart/rendering/rendering.ts 98.67% <100%> (-0.01%) ⬇️
...onents/react_canvas/utils/rendering_props_utils.ts 100% <100%> (ø) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 70b0aa1...b0c7691. Read the comment docs.

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.

Tested locally LGTM

@nickofthyme nickofthyme merged commit d8c8459 into elastic:master Aug 26, 2019
@nickofthyme nickofthyme deleted the fix/bar-styles branch August 26, 2019 18:26
markov00 pushed a commit that referenced this pull request Aug 26, 2019
## [11.0.1](v11.0.0...v11.0.1) (2019-08-26)

### Bug Fixes

* **renderer:** stroke opacity ([#335](#335)) ([d8c8459](d8c8459))
@markov00
Copy link
Member

🎉 This PR is included in version 11.0.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

@markov00 markov00 added the released Issue released publicly label Aug 26, 2019
AMoo-Miki pushed a commit to AMoo-Miki/OpenSearch-Dashboards that referenced this pull request Feb 10, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
released Issue released publicly
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Fill color and Line width styles are not applied correctly to Bars
3 participants