✨ (static charts) make charts mobile-friendly

[sophiamersmann]

Collection of small improvements to make static charts more mobile-friendly. Some changes apply to static+mobile charts only, others apply to all charts (interactive and static).

For all charts:

• Font size changes
  • Rather than micro-managing font sizes for the special case of static+mobile charts, I rely on the baseFontSize to scale all font sizes up
  • To make that work, I have adjusted some font sizes to make sure it looks good for all cases (desktop/mobile, interactive/static)
  • I compiled a list of font sizes currently in use here; the table also denotes the changes I made
  • The biggest change I made is decreasing the font size of tick labels by a few pixels (0.9 -> 0.75, i.e. 14.4px -> 12px for baseFontSize = 16px)
• Updated colours in the chart to use Grapher's dark and light colours
• Updated the opacity used for bars and areas (0.8)
• Draw a white outline around value labels that are rendered into the chart area and might overlap with grid lines (DiscreteBar and StackedDiscreteBar)
• Make the detail's font size respect the base font size
• Make entity labels in ScatterPlots respect the base font size

For static+mobile charts only:

• Increased the thickness of axis lines
• Increased the thickness of lines in LineCharts and SlopeCharts
• Increased the thickness of lines in Maps
• Hide line markers in LineCharts
• Changed the text colour of the subtitle, footer and axis labels
• Remove underlines for links in the footer
• If the footer text is long, decrease its font size
• SlopeChart: Hide the vertical axes on the sides

---

• Mobile optimizations are also applied to thumbnails generated for social media:
  • chart: old / new
  • map: old / new

[sophiamersmann]

Current dependencies on/for this PR:

• master
  • PR 🎉 (static charts) add portrait mode to Grapher's download options #2967
    • PR 🎉 (static charts) add Export tab to the chart admin #2975
      • PR ✨ (static charts) make charts mobile-friendly #2977 👈
        • PR 🔨 (static charts) use a shared set of font sizes #3079

This stack of pull requests is managed by Graphite.

[github-actions]

This PR has had no activity within the last two weeks. It is considered stale and will be closed in 3 days if no further activity is detected.

[sophiamersmann]

It's a little unhinged, but why not 😅

export const GRAPHER_FONT_SCALE_9_6 = 9.6 / BASE_FONT_SIZE
export const GRAPHER_FONT_SCALE_10 = 10 / BASE_FONT_SIZE
export const GRAPHER_FONT_SCALE_10_5 = 10.5 / BASE_FONT_SIZE
export const GRAPHER_FONT_SCALE_11 = 11 / BASE_FONT_SIZE
export const GRAPHER_FONT_SCALE_11_2 = 11.2 / BASE_FONT_SIZE
export const GRAPHER_FONT_SCALE_12 = 12 / BASE_FONT_SIZE
export const GRAPHER_FONT_SCALE_12_8 = 12.8 / BASE_FONT_SIZE
export const GRAPHER_FONT_SCALE_13 = 13 / BASE_FONT_SIZE
export const GRAPHER_FONT_SCALE_14 = 14 / BASE_FONT_SIZE

Merged in the next PR!

[danyx23]

Nice, thanks! :)