Improvements to legend table

[paolodamico]

This issue documents improvements to the legend table. The table becomes particularly more relevant with #4484.

• Smart row names. We now show only the relevant series name or breakdown value.
• Always display series identifier (letter ID) when there's more than one series.
• Group displayed breakdown values. When the graph has multiple series and a breakdown, we clearly separate each one.
• Add total/average/median column. We need to be careful when using in combination with "Unique users" as when you have a total column with unique users you might expect the total number of uniques as opposed to the simple sum of all interval uniques.
• Allow naming series.

Mockups can be found on Figma. Please be sure to check the comments section for a few clarifications.

Default. Single series (with breakdown).

Multiple series.

Multiple series with breakdown.

1. Note we no longer show the color of the series in the letter identifying each series. This is because there's a breakdown applied and the graph will show multiple lines.

Custom name on series

2. We may want to make this a premium feature, it's goal is collaboration. It'll make it a lot easier to share standalone insights with other teammates.

[paolodamico]

Please see updated description now with full mockups. This will also help with the way we display information in tooltips. I'll get to work on that next. @samwinslow.

@corywatilo would love some feedback here.

[samwinslow]

See #4156 (comment) for an update on how implementation of these changes is going. It seemed so closely related to tooltips that I started work on it there.

[liyiy]

My original concern with the legend came from the lifecycle toggles because since there's only four "values" to it (new, resurrecting, returning, dormant), I thought it was overkill to convert it to how we do legend/breakdowns for the other charts and to hide those 4 static values below the graph.

So I agree that we should still show breakdown for the toggles below the chart but maybe we can also keep them as filters where they are now?

I think that point led me to wondering about legends in general though, usually I would expect a chart legend to be more prominent/visible at first glance, like on the bottom or to the side of the graph, without having the user scroll up and down or hover over the graph in order to see what's what.

Something like this could be a great future addition? 😁

They also do something like this to "show more", I don't really have strong opinions on that

As to the mocks I think the matching colors/symbols in the query selection is a great idea 📗

[paolodamico]

Thanks for that context @liyiy! My thoughts,

1. Definitely agree on the usefulness of having a separate legend key inlined within the graph (we've discussed this a bit already). Let's keep this in a separate conversation (Legend key in chart #4594). Will see with @corywatilo tomorrow if we can prioritize this too for this sprint.
2. I think it's valuable to have the lifecycle filters at the bottom in the graph legend because it will also display the number of users in each category for each time period in a straightforward way. It's also quite useful for screnshots. In addition, it's more consistent and uses less vertical space at the top which is scarce to be able to display the graph above the fold. Particularly considering 1. Thoughts?

[liyiy]

@paolodamico that makes sense, it does look like it's taking up a lot of the top space