🐛 (grapher) show a minimum of two tick labels if possible

[sophiamersmann]

• Fixes Show at least 2 y-axis labels in charts with multiple panels #3007

Problem

• On smaller screens, Grapher sometimes displays a single tick label due to space constraints, which makes it impossible to read the chart
• Example: https://ourworldindata.org/grapher/death-rate-by-cause-who-mdb?facet=metric (on a smaller screen)

Solution

• Given a number of base ticks, we want to find a subset of ticks whose labels are not overlapping:
  • The original strategy figured out which tick labels to hide so that we don't end up with overlapping tick labels
  • The updated strategy does the same but retries if we end up with a single visible tick label:
    1. Hide overlapping ticks, allowing for some padding (3px) between tick labels (this is the original strategy)
    2. If we end up with a single tick label, try again but reduce the allowed padding between tick labels (1px) – note that for vertical axes, padding between tick labels is not essential
    3. If we still end up with a single tick label, then there really isn't enough space to show a second label – in such cases, try to show a "useful" tick label; in other words, if the zero tick is visually marked by a solid line, deprioritise it, such that a non-zero tick label is chosen to be displayed

Example (from the original issue)

Before	After
Only zero ticks are shown, which makes it impossible to read the chart	We don't have space for a second tick, but we choose to show a non-zero tick, which gives useful information

SVG tester

Adds an additional grid line (makes no difference really). (The second chart in the top row is broken in another way, which is fixed in this PR)

Displays some more tick labels (which is a good thing)

[sophiamersmann]

Current dependencies on/for this PR:

• 🐛 (grapher) show a minimum of two tick labels if possible #3239 👈
• master

This stack of pull requests is managed by Graphite.

[danyx23]

Neato!