feat: add option to toggle value labels on bar charts

[emmacunningham]

Summary

close #67

This PR adds the option to toggle value labels on chart elements. This does not handle edge cases (long display values overflowing their bars, etc.) and just implements these text labels directly on the BarGeometries. Future iterations of this feature may handle edge cases as well as implementing the text labels as TextAnnotations.

This PR adds a showValueLabels prop to the SeriesSpec such that it toggles the appearance of the value lables for a series. displayValue has been added to the SeriesStyle such that it can be customized either from the theme or the series' custom style.

One can defined the prop alternatingDisplayValue=true so that the value labels alternate every other element.

If an element is not tall enough or the value label would overflow the top edge of the chart, we re-position the value label for that bar only (in the first case, we position the label above the bar; in the second, we position the label within the bar).

Checklist

Use strikethroughs to remove checklist items you don't feel are applicable to this PR.

• 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

[codecov-io]

Codecov Report

Merging #182 into master will increase coverage by 0.19%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master     #182      +/-   ##
==========================================
+ Coverage      97%   97.19%   +0.19%     
==========================================
  Files          35       35              
  Lines        1870     1962      +92     
  Branches      249      285      +36     
==========================================
+ Hits         1814     1907      +93     
+ Misses         49       48       -1     
  Partials        7        7

Impacted Files	Coverage Δ
src/lib/themes/theme.ts	100% <ø> (ø)	⬆️
src/lib/themes/light_theme.ts	100% <ø> (ø)	⬆️
src/lib/series/specs.ts	100% <ø> (ø)	⬆️
src/lib/themes/dark_theme.ts	100% <ø> (ø)	⬆️
src/state/chart_state.ts	96.27% <ø> (ø)	⬆️
src/state/utils.ts	95.4% <100%> (+0.16%)	⬆️
src/lib/series/rendering.ts	97.47% <100%> (+1.36%)	⬆️
...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 8133ab1...77e45e9. Read the comment docs.

[markov00]

We can maybe have a small subset of checking cases, like:

• move the text above the bar top edge if the y1 value is lower than the font size or below the bar top edge if the value is near the top of the chart
• add a simple feature to toggle text visibility in even/odd manner, a simplified method to avoid text overlapping.
  I think we don't have to implement nothing more that that for this first release

[emmacunningham]

@markov00 Added the toggling between alternating display values and repositioning for the edge cases (when bar height is too small or text appearing above bar):

[markov00]

I've checked the functionality, not code for the moment and I'm seeing few things that we can improve before releasing this:

• we should let the text overflow the width of the bar, this because it's a rare case that we have wider bars and smaller numbers, but in most case we can have big numbers with smaller bar width. The overflow should work by default, and we can add a prop to disable overflow and wrap text to the bar width, but I presume this will be less used option.

• the wrapping happens, strangely also when changing the padding, and the way it works is a bit strange and unpredictable:

• the padding should work in the same way for all labels, see attached gif: seems that 7.00 and 3.00 act in a different way but them are both below the bottom edge of the bar. The 0.15 label is fixed until a certain value and that suddently moves down and than up.
  I think we should have a better predictable way to move labels, independently on their current positions, move all down or up a certain value (that we can call it something like offset instead of padding)
  

• we should take care of rotations:

• the alternating value label should be works the same on a rotated chart. If we always hide the first label on the left, we can can partially avoid having clipped labels on the first part of the chart.

• can you add some tests/story with an higher number of bars? to see clippings on edges

[emmacunningham]

The implementation has been rewrittten to support the additional feedback/requests. Previously, we were drawing the labels directly in the bar chart elements, but that was causing issues where the text would be covered up by any neighboring bars due to react-konva z-indexing based on render order. Instead, now we create the labels on their own Layer which prevents the labels from getting covered up. When we add the TextAnnotation feature, this layer can be re-used to feed values into the TextAnnotation layer.

Values will be positioned relative to chartRotation:

offsetX and offsetY were added to the spec to allow the user to directly manipulate these offsets without having to rely on padding (would like to address padding in a separate PR as there are various edge cases to think through for this).

There is another prop that the user can set to have the value labels contained within the bar element itself (by default values will overflow):

If this prop is set to true and the text height overflows the available bar space, no text is rendered:

Also there is another prop which can be used to control if clipped values (overflowing the edges of the chart) should be hidden or visible (would like to address in a separate PR how to handle these values besides just hiding them):

Something else (that I would like to address in a followup PR) is how to handle automatically adjusted values: currently if a bar height is not tall enough to hold the display value, we move the label to above the bar. This causes some confusion when also applying an offset; should the label also move (as it currently does)? If so, then the offset amount will be greater than for the other labels which fit inside of the bar. One strategy might be to only apply the offset once it exceeds the automatically adjusted text's already offset position.

A select knob has been added to the story to change the data volume from small, medium, and high:

[markov00]

Awesome work Emma! I think it's a neat implementation.
Tested locally on Chrome and I can correctly see all the labels.

[emmacunningham]

fyi just checked how the labels look for stacked & split series (this is added to stories also):

[markov00]

🎉 This PR is included in version 4.1.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀