fix(renderer): stroke opacity

[nickofthyme]

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

Demo

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]

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

[codecov-io]

Codecov Report

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

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

[markov00]

Tested locally LGTM

[markov00]

🎉 This PR is included in version 11.0.1 🎉

The release is available on:

• GitHub release
• npm package (@latest dist-tag)

Your semantic-release bot 📦🚀