feat(partition): add legend and highlighters

[markov00]

Summary

This PR adds the legend to pie charts and treemaps.
Close #486 finishing the decoupling of the legend from XY charts
Close #532 request to add legend and tooltips to partition charts

Two more options are added to the <Settings/> components

• flatLegend will flat the legend for pie/tree hierarchical legend as in the following screenshot

• legendMaxDepth will limit the legend hierarchy to a maximum depth value: 1 is the root level. Can be combined with the flatLegend

legendMaxDepth={1} example on a 3 level piechart

legendMaxDepth={2} example on a 3 level piechart

The PR also add the highlighter when hovering over the pie/tree chart and over the legend items as shown in the following gifs

Checklist

Delete any items that are not applicable to this PR.

• Any consumer-facing exports were added to src/index.ts (and stories only import from ../src except for test data & storybook)
• 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

[codecov-io]

Codecov Report

Merging #616 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #616   +/-   ##
=======================================
  Coverage   66.81%   66.81%           
=======================================
  Files         252      252           
  Lines        7166     7166           
  Branches     1352     1352           
=======================================
  Hits         4788     4788           
  Misses       2361     2361           
  Partials       17       17           

---

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 11f120f...11f120f. Read the comment docs.

[wylieconlon]

Based on the screenshots and gifs, this looks like exactly what we are looking for! Thank you!

[rshen91]

You might want to remove this comment?

[rshen91]

Tested locally and stories seem to be rendering correctly and quickly on Chrome. There's a lot I like in this PR: moving LegendItem and seriesId into commons especially. I was a little thrown at first what legend files would remain specific for either xy_charts or partitions and so I'm going to include in here how I'm understanding the breakup of the legend (which to be clear, I think it makes a lot of sense). As far as I'm understanding it looks like the majority of the legend logic is in the components directory, LegendItem has been moved to the commons directory, and then the implementation of compute_legend is specific for either partition charts or xy_charts. This makes a lot more sense to me setting it up this way. Any future types of charts then just need to have their own compute_legend.ts file. Let me know if I'm misunderstanding, thanks!

The highlighter.tsx file is very cool for computing the focusing on specific slices or not - I wonder if this might be able to also help in terms of keyboard navigation in the future (from what I understand working with SVG for keyboard navigation vs canvas is much easier)?

The new story in legend, single sunburst in the sunburst stories, and adding the <Settings showLegend /> in some sunburst stories, interactions, and two layers stress test in treemaps looks awesome! 💯

[nickofthyme]

Overall code changes look good. A few nits and comments. Much cleaner shared structure ❤️

Tested stories locally in Chrome and Firefox. All look good. Banded legend changes work as normal.

Tested triple-layer sunburst in IE11 with flatLegend and legendMaxDepth. Renders fine but seems to render a little slow still. Also get long-running script warning but eventually renders without incident.

Unrelated: I noticed a small issue on the tooltip. Opened an issue here #628

[monfera]

Epic PR with tons of legends rework to make it more general! Good to go, the singularity case can be a subsequent PR by either of us

[markov00]

jenkins test this

[markov00]

🎉 This PR is included in version 18.3.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀