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

[sophiamersmann]

Relates to #4017 | Designs

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]

• ✨ (stacked area) improve hover states / TAS-687 #4129 👈 (View in Graphite)
• 🔨 (grapher) remove entity-year highlight from stacked area charts #4127
• master

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

[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): 1262 (9379a2) ❌
Number of differences (all views): 312 (c31692) ❌

Edited: 2024-11-18 17:16:13 UTC
Execution time: 1.29 seconds

[notion-workspace]

Harmonise hover states for StackedArea chart

[marcelgerber]

nice!