✨ (slope) show value labels on demand

[sophiamersmann]

Overhauls the SlopeChart's interaction design. It's probably the most interesting PR in this stack.

Background

• SlopeCharts currently show as many entity and value labels as possible on each side of the slopes. This can be overwhelming for a reader, especially if there are many slopes (example).
• We toyed with the idea of using tooltips to show data values on demand. This would be the other extreme: We would only be showing entity labels by default, and all other information, including data values, would be hidden in tooltips.
• I tried to strike a balance between the two extremes: Present a slope chart that doesn't overwhelm the user at first sight but does allow users to show/hide data value annotations as they please.

Summary

• Hides data value annotations by default but shows them on demand:
  • Only the entity label is shown by default
  • If an entity is hovered over, data value annotations are displayed on both sides
    • If multiple entities are hovered over (which can happen if a legend item is hovered), we also show an entity label on the left (to make sure it's easy to tell which value label belongs to which entity)
  • If entities are focused/selected, we show data value annotations on both sides as well as a second entity label
• The width of the x-axis (i.e. the distance between the start and end point of the slopes) is computed based on an ideal ratio such that the steepness of the slopes is comparable across different screen sizes
• Other changes:
  • The <Text /> component produced buggy alignments for slope charts. StackedBar charts were the only other chart type that used the <Text /> component, so I moved it into that component file.

Caveats

• Since we're not showing data value labels by default, we can't hide the y-axis on mobile. To make up for that, the next PR moves the colour legend to the top.

Context

Part of a larger body of work. See stack 👇🏻

[sophiamersmann]

• #3321 : 2 dependent PRs (#3269 , #3389 )
• #3291
• #3304
• #3288 👈
• #3273
• #3270
• master

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

Join @sophiamersmann and the rest of your teammates on Graphite

[sophiamersmann]

Merge activity

• Mar 22, 5:33 AM EDT: @sophiamersmann started a stack merge that includes this pull request via Graphite.
• Mar 22, 5:34 AM EDT: Graphite rebased this pull request as part of a merge.
• Mar 22, 5:35 AM EDT: @sophiamersmann merged this pull request with Graphite.