feat: add point shapes

[markov00]

Summary

This PR adds the ability to choose the shape of the rendered point as per request for Timelion replacement.

fix #987

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)
• 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 #988 (9a89f3e) into master (d78d1ce) will increase coverage by 0.27%.
The diff coverage is 73.68%.

@@            Coverage Diff             @@
##           master     #988      +/-   ##
==========================================
+ Coverage   72.63%   72.90%   +0.27%     
==========================================
  Files         350      369      +19     
  Lines       11058    11362     +304     
  Branches     2433     2467      +34     
==========================================
+ Hits         8032     8284     +252     
- Misses       3012     3056      +44     
- Partials       14       22       +8     

Flag	Coverage Δ
unittests	72.49% <72.44%> (-0.15%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
src/chart_types/xy_chart/renderer/canvas/areas.ts	30.00% <0.00%> (ø)
src/chart_types/xy_chart/rendering/area.ts	91.66% <ø> (ø)
src/chart_types/xy_chart/rendering/bubble.ts	100.00% <ø> (ø)
src/chart_types/xy_chart/rendering/line.ts	95.00% <ø> (ø)
src/chart_types/xy_chart/utils/interactions.ts	100.00% <ø> (ø)
src/utils/geometry.ts	80.00% <ø> (-20.00%)	⬇️
.../chart_types/xy_chart/renderer/dom/highlighter.tsx	56.52% <15.78%> (-8.35%)	⬇️
src/chart_types/xy_chart/renderer/canvas/points.ts	51.85% <55.55%> (-2.00%)	⬇️
src/chart_types/xy_chart/renderer/shapes_paths.ts	58.33% <58.33%> (ø)
src/chart_types/xy_chart/rendering/points.ts	89.58% <80.00%> (+0.33%)	⬆️
... and 36 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 d78d1ce...f04a536. Read the comment docs.

[rshen91]

LGTM - tested locally on my mac. I like how this is set up to easily add other point shapes in the future in the theme. Defaulting to circle makes a lot of sense. 👍

[nickofthyme]

LGTM. I wonder how we could change the highlighter in the future based on the point shape type so we don't get this...

[monfera]

LGTM 🎉

[markov00]

LGTM. I wonder how we could change the highlighter in the future based on the point shape type so we don't get this...

@nickofthyme @monfera @rshen91 I've updated the PR after Nick's comment here.
I've matched the highlighter shape with the point shape.
I've also cleaned up the canvas rendering functions and created a set of reusable SVG paths.
We have now the ability to display also bubble charts with different shape sizes like:

or having a single series with customized shapes per point:

I've also introduced a change on the current PointGeometry, computing the style override at the same time when computing the point position and scales, instead of computing it in the renderer.

[monfera]

With the broad generalization introduced with the last commits, we, at some point, might want to move away from singleton legends, because each aesthetic channel may encode different categorical or quantitative data. Quick example:

(the size legend is rendered somewhat useless though, due to lack of decent comparability of sizes)

While the marker shape may be redundant encoding for line series, eg. for accessibility and discernibility in print (at the cost of making the lines noisier), scatterplots and connected scatterplots would be more inviting for independent channel assignment.

So with that, the question is, what are the tradeoffs of introducing broad configurability of markers as an independent categorical-only channel with or without independent legends. Without this, the ability to vary markers may not be super useful, though users can just avoid configuring it.

Edit: if we model marker shapes as redundant encoding that (currently) needs no extra legend, because it's always in sync with the color, then maybe the legend swatch could reflect the marker shapes. ggplot2 examples for independent vs redundant(combined):

[monfera]

An oft used name is, eg. listed in ggplot2, for +: plus; for x: cross.

Matplotlib also uses plus for the upright one, but uses x for x - the list is also a good bit broader, eg. there's a "filled plus" version. Might eventually be useful, eg. if the purpose is to lend each marker a comparable visual weight. There seem to be full bodied shapes, stroke based shapes and outline based shapes.

[monfera]

Good functional addition; asking for renaming "angled cross" to something standard, eg. cross, while renaming current cross to plus. Also, a couple of follow-up issues are warranted:

• linking back to the independent legend point with examples
• using, or making it configurable, the markers in the legend, if redundant encoding is chosen

[nickofthyme]

LGTM. Nice job with the highlighter shapes, that looks much better!

I wonder if in the future we allow the user to pass a path, if we could scale that up and take the outline silhouette of the shape as the highlight geometry rather than just hardcoding each outlined shape. Do you think that would be possible for most shapes?

[markov00]

🎉 This PR is included in version 24.5.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀