feat: customize number of axis ticks

[markov00]

Summary

This PR add the possibility to customize the number of ticks displayed on each axis.

A ticks parameter is added to the Axis component. The number specified is not always fully respected as the real number of displayed ticks because the scale function computes ticks that are uniformly spaced with human-readable values (such as multiples of powers of 10), and are guaranteed to be within the extent of the domain (see https://github.com/d3/d3-scale#continuous_ticks)

Checklist

Use strikethroughs to remove checklist items you don't feel are 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
• Each commit follows the convention

[codecov-io]

Codecov Report

Merging #319 into master will increase coverage by <.01%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master     #319      +/-   ##
==========================================
+ Coverage   98.04%   98.04%   +<.01%     
==========================================
  Files          37       37              
  Lines        2715     2716       +1     
  Branches      636      631       -5     
==========================================
+ Hits         2662     2663       +1     
  Misses         48       48              
  Partials        5        5

Impacted Files	Coverage Δ
src/chart_types/xy_chart/utils/specs.ts	100% <ø> (ø)	⬆️
src/utils/scales/scale_continuous.ts	94.06% <100%> (-0.1%)	⬇️
src/chart_types/xy_chart/utils/scales.ts	100% <100%> (ø)	⬆️
src/chart_types/xy_chart/store/utils.ts	96.7% <100%> (ø)	⬆️
src/chart_types/xy_chart/utils/axis_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 f9f13dd...8406289. Read the comment docs.

[nickofthyme]

Tested locally, looks great.

What is the logic that determines where to place the tick when one tick is desired like this 👇 and is there a way to center that tick, bandwidth? for example on a max scale of 30 should be 15.

Also shouldn't there always be a max tick? Seems like a separate thing/option i.e.

• show max/min tick
• show X number of ticks between min and max

[markov00]

Hey @nickofthyme so we are using https://github.com/d3/d3-scale#continuous_ticks to generate human readable ticks on axis. This unfortunately doesn't allows us directly to specify to show min and max labels but we can add that manually on the code. We can do that my adding also the nice feature https://github.com/d3/d3-scale#continuous_nice that will round the domain to a nicer value and it generally shows the max value (the min is always displayed)

[markov00]

🎉 This PR is included in version 10.0.0 🎉

The release is available on:

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

Your semantic-release bot 📦🚀