Suggestions from an email Pau sent to Dan:
- Check that using dashed style lines in time series works well. Right now, the fake data has VE and Wikitext plots overlap. Using the same color works well although it will be better to check it when the data is not the same.
- Accommodate some extra space (top or side) for time series legend to reduce the chance hovering legend overlaps what user is trying to see. Right now in the time series, the legend is shown on hover. This has the advantage that the graph can take all the available space and the legend is only shown when the user is interested in the graph. However, the fact that the legend is shown at the right side where the latest data normally appears makes it hard to check which is the current value of a line that overlaps with the legend.
- When only one of the funnel analysis graphs is shown, it seems that it only has half of the space assigned which results in the graph getting cropped if the current viewport is not big enough. Ideally, when there is one graph (either VE or wikitext), (this is possible but involves some work to get the funnel graphs to resize dynamically and the semantic grid to play nice with that new capability. Some naive attempts made it worse so I'm just going to leave it as is for now).
Some small styling considerations:
- Consider removing the margins of "body" and "comparisons.ui.attached.segment". Otherwise the content looks like cards in a grey box inside another white box. If the mentioned margins are removed we can convey a simpler model: a toolbar vs grey body with content cards.
- For each card, the heading can remain white to make it feel more part of the same card as the graph.
- Set the font-family to be sans-serif.