fix: position tooltip within chart with single value xScale

[emmacunningham]

Summary

fix #254

This PR introduces a fix for the tooltip positioning on a chart with a single value xScale.

I'm not entirely sure where the best place to position the tooltip, so this presents the minimal effort version, where the tooltip will be positioned inside of the chart aligned along the chart's edge (left if horizontal rotation, top if vertical rotation):

Implementation-wise, we've added a method isSingleValue to the Scale classes so that we can check if a scale is a single value scale (so that we can apply the different positioning in that case). The customDomain knob was added to the stories to demonstrate that, when the chart only has one datapoint but has a multiple value scale, the tooltips are positioned as usual (since there is room to display them as normal).

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)
- [ ] Proper documentation or storybook story was added for features that require explanation or tutorials

• This was checked for cross-browser compatibility, including a check against IE11
• Unit tests were updated or added to match the most common scenarios
• Each commit follows the convention

[codecov-io]

Codecov Report

Merging #259 into master will increase coverage by 0.41%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master     #259      +/-   ##
==========================================
+ Coverage   97.84%   98.26%   +0.41%     
==========================================
  Files          36       36              
  Lines        2693     3170     +477     
  Branches      607      774     +167     
==========================================
+ Hits         2635     3115     +480     
+ Misses         51       44       -7     
- Partials        7       11       +4

Impacted Files	Coverage Δ
src/lib/utils/scales/scale_band.ts	94.11% <100%> (+0.36%)	⬆️
src/state/crosshair_utils.ts	91.66% <100%> (+6.37%)	⬆️
src/lib/utils/interactions.ts	100% <100%> (ø)	⬆️
src/lib/utils/scales/scale_continuous.ts	94.11% <100%> (+0.31%)	⬆️
src/state/chart_state.ts	97.44% <100%> (+0.54%)	⬆️
src/lib/series/stacked_series_utils.ts	96.47% <0%> (-1.75%)	⬇️
src/lib/series/specs.ts	100% <0%> (ø)	⬆️
src/lib/series/series.ts	100% <0%> (ø)	⬆️
src/lib/series/domains/y_domain.ts	100% <0%> (ø)	⬆️
src/lib/axes/canvas_text_bbox_calculator.ts	100% <0%> (ø)	⬆️
... and 6 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 af92736...121a8fb. Read the comment docs.

[markov00]

hey @emmacunningham just a suggestion, what if in the "single value" mode we switch between the "crosshair/vertical" mode and we manually enable the "follow" mode?

[nickofthyme]

Tested locally, LGTM. Just two comments.

[emmacunningham]

hey @emmacunningham just a suggestion, what if in the "single value" mode we switch between the "crosshair/vertical" mode and we manually enable the "follow" mode?

@markov00 yes, good idea. have implemented that logic here: 121a8fb

[nickofthyme]

Changes look good

[markov00]

🎉 This PR is included in version 8.0.1 🎉

The release is available on:

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

Your semantic-release bot 📦🚀