✨ (stacked area) improve hover states / TAS-687

[sophiamersmann]

Stacked area charts are in a hover state when…

• the chart area itself is hovered
• an entity label on the right is hovered
• the legend on top is hovered (only visible when faceted)

This PR cleans up the code around that and ensures that the hover state of a stacked area chart looks consistent, regardless of how it has been triggered.

In general, we want to move to a world where hovering highlights the hovered elements while muting all other elements by reducing their opacity (as opposed to greying them out).

This PR focuses on the stacked area chart, but the hover state of the line chart has also been updated to match the behaviour of the line legend.

Examples:

• http://staging-site-stacked-area-hover-viz/grapher/annual-co-emissions-by-region
• http://staging-site-stacked-area-hover-viz/grapher/smoking-deaths-by-age?facet=entity&country=FRA~DEU~ESP~ITA

Before	After

[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

• ✨ (stacked area) improve hover states / TAS-687 #4129 👈
• 🔨 (grapher) remove entity-year highlight from stacked area charts #4127
• 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]

Quick links (staging server):

Site	Admin	Wizard	Docs

Login: ssh owid@staging-site-stacked-area-hover-viz

• Site-screenshots: https://github.com/owid/site-screenshots/compare/stacked-area-hover-viz
• SVG tester: https://github.com/owid/owid-grapher-svgs/compare/stacked-area-hover-viz

SVG tester:

Number of differences (default views): 1346 (851c10) ❌
Number of differences (all views): 450 (ecbb2c) ❌

Edited: 2024-11-11 09:34:26 UTC
Execution time: 1.20 seconds

[notion-workspace]

Harmonise hover states for StackedArea chart