refactor: annotation marker size calculation

[markov00]

Summary

A propedeutic refactor of the LineAnnotation spec to allow the use of a custom react reconciler.

When using a custom reconciler, every component within the wrapping parent is treated in the same way. Due to the nature of the new reconciler we can't "host" mixed components that are both a Spec component (that store it's props into the redux store) and a React component (as it was the LineAnnotation where the marker was first drawn offscreen, measured and then stored into the redux store).

The LineAnnotation was refactored to ignore the marker size, the marker is just rendered when and where needed with a transformation to align itself based on its anchor point.

Note

• The Path polyfill is removed from the dependencies, since we dropped the IE11 support there is no need for that anymore.
  The Path2D mock in the Enzyme testing was applied after receiving an error message from the testing environment. This should not affect the current unit testing as it's just used on the rendering side not tested through Enzyme.

• The calculation of the marker size was used to compute the right position of the marker and the mouse coordinate hit point within that marker: I've replaced the placement with a simple css transform and I've replaced the computation of the mouse hit within the marker with a mouseenter/mouseleave listener on the marker container, storing the information of the hovered DOM element within the redux store.

• I moved the computation of the formatted details/header within the tooltip since it was a very cleaner to just pass the original datum around and it derivated formatted form.

[codecov-io]

Codecov Report

Merging #960 (31d943a) into master (fcc4994) will increase coverage by 1.64%.
The diff coverage is 93.10%.

@@            Coverage Diff             @@
##           master     #960      +/-   ##
==========================================
+ Coverage   70.90%   72.55%   +1.64%     
==========================================
  Files         350      350              
  Lines       11072    11052      -20     
  Branches     2437     2434       -3     
==========================================
+ Hits         7851     8019     +168     
+ Misses       3208     3019     -189     
- Partials       13       14       +1     

Flag	Coverage Δ
unittests	72.55% <93.10%> (+1.64%)	⬆️

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

Impacted Files	Coverage Δ
...chart/renderer/dom/annotations/tooltip_content.tsx	56.66% <50.00%> (+45.12%)	⬆️
.../xy_chart/renderer/dom/annotations/annotations.tsx	91.30% <90.47%> (+22.88%)	⬆️
...rt/state/selectors/get_annotation_tooltip_state.ts	88.88% <96.55%> (+6.74%)	⬆️
...hart_types/xy_chart/annotations/line/dimensions.ts	86.53% <100.00%> (-0.26%)	⬇️
...hart_types/xy_chart/annotations/rect/dimensions.ts	89.69% <100.00%> (-0.11%)	⬇️
...c/chart_types/xy_chart/annotations/rect/tooltip.ts	78.78% <100.00%> (-0.63%)	⬇️
src/chart_types/xy_chart/annotations/tooltip.ts	95.83% <100.00%> (-1.05%)	⬇️
...rt/renderer/dom/annotations/annotation_tooltip.tsx	89.65% <100.00%> (+27.58%)	⬆️
src/chart_types/xy_chart/specs/line_annotation.tsx	100.00% <100.00%> (+20.51%)	⬆️
src/state/actions/dom_element.ts	100.00% <100.00%> (ø)
... and 16 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 fcc4994...e832bf4. Read the comment docs.

[monfera]

reason for changes: compact; O(1); no need for backquotes; no need to play tricks with a TS-enforced default: as Position can't be any other value. The constant can be moved outside the function, might even become reusable

[markov00]

fixed here: 7465bb3

[nickofthyme]

LGTM, left a few comments. Verified storybook line and rectangular annotation stories a still render and interact the same. 👍🏼

[monfera]

Great and quite compact PR, thanks Marco!

[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 📦🚀