feat(legend): display series value (dependent on hover) & sort in legend

[emmacunningham]

Summary

close #143
close #133

This PR adds the feature to display a value next to a legend item, where the value is either the current value of the crosshair tooltip or, if there is no corresponding tooltip value the last value in the series.

A prop on the Settings spec showLegendDisplayValue (default true) will toggle the appearence of the value. The screencap below also shows how the additional value displays for each legend Position option.

The legend items are sorted by a specified sortIndex on the SeriesSpec (default undefined, where undefined items will appear last). We will separately add the feature to enable subseries sorting by allowing the user to specify a sortIndexAccessor (see this comment).

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 #155 into master will increase coverage by 0.21%.
The diff coverage is 97.22%.

@@            Coverage Diff             @@
##           master     #155      +/-   ##
==========================================
+ Coverage   94.06%   94.28%   +0.21%     
==========================================
  Files          34       34              
  Lines        1753     1801      +48     
  Branches      223      228       +5     
==========================================
+ Hits         1649     1698      +49     
  Misses         90       90              
+ Partials       14       13       -1

Impacted Files	Coverage Δ
src/lib/series/specs.ts	100% <ø> (ø)	⬆️
src/specs/settings.tsx	26.47% <0%> (-0.81%)	⬇️
src/lib/series/series.ts	95.03% <100%> (+0.5%)	⬆️
src/state/chart_state.ts	96.21% <100%> (+0.38%)	⬆️
src/lib/utils/interactions.ts	100% <100%> (ø)	⬆️
src/lib/series/tooltip.ts	75.86% <100%> (+12.7%)	⬆️
src/lib/series/legend.ts	100% <100%> (ø)	⬆️
src/state/annotation_utils.ts	100% <0%> (ø)	⬆️
src/lib/series/domains/x_domain.ts	100% <0%> (ø)	⬆️
... and 7 more

---

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 3ab9985...c87f7c4. Read the comment docs.

[emmacunningham]

@markov00 Can address settings.tsx tests in a different PR since that will have quite a bit of things unrelated to this PR (currently no tests for that & it is the one with the lowest coverage).

[markov00]

@emmacunningham I'm not sure sorting by the last bucket is the right way to do it because sorting happens on ES side and can depends on a different aggregation value. In the following snapshots you can see that with the same aggregation, I can sort by count of elements in the bucket or by average bytes.

I think we can propose something like adding an index prop to each series/subseries to enable sorting and let ES decide the right order on its values keeping also the ascending/descending property out our our charts.

if will be awesome if we can add in the future (not needed on this PR) also an index for each element, because happens that when sorting on es, each bucket can be sorted differently, in that case something like an indexAccessor can be a good way to implement (that is the element index on the array by default).

[emmacunningham]

@markov00 Have removed the props to specify ascendin or descending and instead added a series spec sortIndex which allows the user to assign an indexical value which we will sort the series by. Also updated the example in the story with sample TVSB data to demonstrate how this would work with that dataset (editable array which is used to set the sortIndex props on each series).

[markov00]

Code LGTM, tested locally and works fine expect two minor issue to notice:

If you hide a series from the legend, the series value is no longer updated. I think a better UX should be to hide also the last bucket value if the series is hidden on the legend

This other issue is marginal and can be resolved when the design team will take care a bit of how we can design this legend. on horizontal legend the legend value is pushed to the end of the line. This is caused by the use of flexbox for making a grid like that.

[emmacunningham]

@markov00 have updated the legend element so that when the series is not visible, the display value also is hidden

will add the horizontal legend position issue to the issue tracking legend styling!

[markov00]

🎉 This PR is included in version 3.9.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀