Pick closest points to the winning point in compare mode and position unified hover box in front of winning point

[archmoj]

Fixes #5681. cc: #5553

And fixes #5680 by c692eda.

Also closes ##5656 | Demo

@plotly/plotly_js

[nicolaskruchten]

If you look at this pen https://codepen.io/nicolaskruchten/pen/MWpoMJK?editors=0010 (built with the latest artifact from this branch) and move your mouse back and forth over the third point from the left (the "March 1" point period-positioned to the end of the month) you will see that it breaks the invariant: when the cursor is on the left, the bar point in the hoverset is Q1 and when the cursor is on the right, the bar point in the hoverset is Q2.

March is in Q1 and so when March is the winning point, Q2 should never appear in the hoverset, regardless where the cursor is.

[archmoj]

If you look at this pen https://codepen.io/nicolaskruchten/pen/MWpoMJK?editors=0010 (built with the latest artifact from this branch) and move your mouse back and forth over the third point from the left (the "March 1" point period-positioned to the end of the month) you will see that it breaks the invariant: when the cursor is on the left, the bar point in the hoverset is Q1 and when the cursor is on the right, the bar point in the hoverset is Q2.

March is in Q1 and so when March is the winning point, Q2 should never appear in the hoverset, regardless where the cursor is.

If we draw a bar instead of a scatter point, and comment periodalignment for a moment it may become more clear what is going on.
As illustrated in this codepen the monthly hover points are stricted inside quarterly i.e. when using periodalignment: 'middle'. And if one sets the periodalignmentof the second trace toend`, then the end points of orange bars would be located inside two different blue bars.
Having fixed a number of issues here I think this PR in a good state to merge 🚀

[nicolaskruchten]

The value of periodalignment should not impact the invariants listed in #5553. In this case the second one is not being honoured: the Q1 bar's span covers the period that the point represents and so it should be in the hoverset.

[archmoj]

The value of periodalignment should not impact the invariants listed in #5553. In this case the second one is not being honoured: the Q1 bar's span covers the period that the point represents and so it should be in the hoverset.

Good call. Addressed in 4f92ccf.

[archmoj]

@nicolaskruchten
Here is the updated codepen.

[nicolaskruchten]

This is looking much better!

[alexcjohnson]

I like it! That's a lot of closed issues 💪
💃