🐛 (facets) show axes for no data charts / TAS-552

sophiamersmann commented 1 week ago

Show axes for charts without data, fixes https://github.com/owid/owid-grapher/issues/2127

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

Summary

Rather than figuring out the first left chart that has data and show the axis for it, we simply always show the axis, even if there is no data
- In faceted charts, that solves a particular bug that we were struggling to fix, and I also think it looks better – it gives the overall layout more structure and is less disruptive
- In normal/unfaceted charts, rendering an axis although there is no data looks a bit dumb, but I think it's an okay compromise
I also realised that I broke the NoDataModal when I worked on the entity selector redesign – the 'edit entities' button don't currently show up (luckily almost, since the button would be broken if the entity selector is plotted into the side panel) – after checking in with Marwa, we decided to remove the buttons alltogether; instead, we show a help message
Technically, we implicitly know when we're currently faceting (if both canChangeEntity and canAddEntities are undefined), but I don't want to rely on that, and I also don't want to start passing an isFacet down to our charts – I think it's ok like this

To do

Use text wrap to make sure the text doesn't overflow
Don't show the help message for static charts

Screenshots

Before	After

👆🏻 Line chart / Bar chart

More screenshots

Having a single zero line looks a bit dumb: Screenshot 2024-06-26 at 13 38 02 Screenshot 2024-06-25 at 18 33 32 The outer axis labels are cut: Screenshot 2024-06-25 at 18 34 15 Well... Screenshot 2024-06-25 at 18 35 37

sophiamersmann commented 1 week ago

[!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

owidbot commented 1 week ago

Quick links (staging server): Site	Admin	Wizard

Login: ssh owid@staging-site-no-data-axes

Site-screenshots: https://github.com/owid/site-screenshots/compare/no-data-axes
SVG tester: https://github.com/owid/owid-grapher-svgs/compare/no-data-axes

SVG tester:

Number of differences (default views): 96 ([b43fa4](https://github.com/owid/owid-grapher-svgs/commit/b43fa4e5d59afc605cfc44d21a04831ca96fe779)) ❌ Number of differences (all views): 288 ([414fd1](https://github.com/owid/owid-grapher-svgs/commit/414fd16279fea830d449f2b264b0cfeb49ce7fcc)) ❌

Edited: 2024-06-26 11:55:01 UTC Execution time: 1.24 seconds

notion-workspace[bot] commented 1 week ago

Fix facets: Show axes for charts with missing data

marcelgerber commented 2 days ago

Didn't have time for a proper review yet, but one thing comes to mind about this one:

The "No matching data" text is only shown when rendered to HTML; it is never part of a SVG / png. This meant that before this PR, we were only rendering a white block in place of the charting area (which wasn't great). Now, we're rendering a full, but empty, axis, which might be even more misleading.

sophiamersmann commented 2 days ago

Ah, good point. I removed the buttons in this PR, so we could just turn the foreignObject into SVG.

owid / owid-grapher