✨ (stacked bar) align x-axis of facets / TAS-548

[sophiamersmann]

Aligns x-axes of faceted StackedBar charts, resolves #2160

Implemented as part of an effort to create a set of climate charts, see draft charts on this staging site

Summary

• Replaces the StackedBar chart's custom x-axis implementation with DualAxisComponent
• This works by passing a list of domainValues to the axis – it's then the axis' job (i) to figure out how much space is available for a single domain value (called the bandWidth) and (ii) to adjust the scale in such a way that we have sufficient padding on both sides for the outer bars to fit
• We also pass custom x-ticks to the axis, based on the actual x-values in the chart
• The domainValues and the ticks are shared across all facets, so that we end up with the same x-axis for all facets

Screenshots

Before	After

Link: http://staging-site-stacked-bar-dual-axis/grapher/natural-disasters-by-type?facet=entity&uniformYAxis=0&country=Wildfire~Glacial+lake+outburst+flood~Dry+mass+movement~Extreme+temperature

[sophiamersmann]

[!WARNING] This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite. Learn more

• #3737
• #3735
• #3733
• #3726 👈
• #3725
• #3722
• #3025
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @sophiamersmann and the rest of your teammates on Graphite

[notion-workspace[bot]]

StackedBar: Align x-axis of facets

[owidbot]

Quick links (staging server): Site	Admin	Wizard

Login: ssh owid@staging-site-stacked-bar-dual-axis

• Site-screenshots: https://github.com/owid/site-screenshots/compare/stacked-bar-dual-axis
• SVG tester: https://github.com/owid/owid-grapher-svgs/compare/stacked-bar-dual-axis

SVG tester:

Number of differences (default views): 94 ([4f87a6](https://github.com/owid/owid-grapher-svgs/commit/4f87a6bdb7276d0d5fd5b76c4e428c1a56fef121)) ❌ Number of differences (all views): 250 ([1a6e79](https://github.com/owid/owid-grapher-svgs/commit/1a6e79c5f57a18b04b099bf1e9b09231afbdf6ee)) ❌

Edited: 2024-06-24 08:02:47 UTC Execution time: 1.17 seconds