Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Legend key in chart #4594

Closed
paolodamico opened this issue Jun 4, 2021 · 10 comments
Closed

Legend key in chart #4594

paolodamico opened this issue Jun 4, 2021 · 10 comments
Labels
enhancement New feature or request good first issue Good for newcomers

Comments

@paolodamico
Copy link
Contributor

Is your feature request related to a problem?

Currently we show the legend table describing each graph series at the bottom of the graph. This is not ideal because a) you have to know it's there, b) you have to scroll which makes visualization more difficult and c) doesn't work well for screenshots.

Describe the solution you'd like

I'd like us to introduce a legend key within the graph. See one example below.

Screen Shot 2021-06-03 at 8 43 36 PM

Describe alternatives you've considered

Keep only the legend table at the bottom.

Additional context

Related to #4492.

Thank you for your feature request – we love each and every one!

@paolodamico paolodamico added enhancement New feature or request UI/UX design Issues that need a designer's attention labels Jun 4, 2021
@corywatilo
Copy link
Contributor

corywatilo commented Jun 8, 2021

I played with a few different options for this. (I built them in my newer experimental UI, but they port pretty easily to what we have today.)

1. Side legend

We only need a legend if there is >1 thing being graphed. When there is, we can reduce the width of the graph to fit the legend.

One benefit here is that there is a nice, consistent alignment, which wouldn't happen if the labels were listed horizontally above or below (like in the next two options).

image

2. Legend below

The most standard option, the labels grow from the middle. Middle alignment could, of course, get weird with long labels

image

3. Legend above

I actually sort of like this version because it puts the labels from and center. In this case, we'd just allow enough whitespace above where the graph actually starts. It's designed to look like it's just dropped in the available space, but the space would grow as needed.

image


Open questions

  1. What do the edge cases look like here? The current table view does a good job of truncating labels, so it doesn't seem like the names would ever get too long.
  2. "But what if there are 1237832 items graphed? Versions 2 and 3 with centered labels look fine with any reasonable number of graphed items. If there are more, they will wrap and won't be perfectly aligned. I'm not too concerned with this since it's sort of an edge case. But if we wanted to solve it, we could either: a) use left alignment when there are >X elements, or b) sort of inline-block labels with a fixed width, likely with left alignment, so they're all spaced evenly

@paolodamico
Copy link
Contributor Author

My thoughts:

  1. I would personally go with (3). With (1) I get the sense we're losing valuable prime space for the main graph and (2) feels too close to the verbose table that shows details on all series.
  2. Not sure about the visual/icon (the rounded line thing) for each graph series. I get the sense that it's not in line with our current design.
  3. I think it might be worth considering showing a bit more information on the series names, as we do in tooltips (see New tooltips UI #4156 #4651) and now the table at the bottom too. For instance, we show the series letter identifier (if there's more than one series), information on the math aggregator (if it's set), or breakdown information (if applicable). For consistency, it'd be great if we do the same thing here.
  4. In terms of edge cases, I think we should definitely truncate labels. At some point we need to consider what to do when there are just too many lines in a graph (sort of the "Other" category), but today I'm thinking we'll have to show the labels for all series (probably in multiple lines). In this case I might actually go with (2) otherwise the main graph will not be above-the-fold when there are multiple graph series.

POV?

@corywatilo
Copy link
Contributor

Yep, agreed @paolodamico. Top is best, lines were really more intended for this visual refresh, so adapting them to what we have today is perfect. I added a little more info in these, spaced them evenly, and truncated the middle one to get a sense for what it would look like.

Do you think you have enough to run with it within the context of the current design?

image

@paolodamico
Copy link
Contributor Author

This is great, thanks @corywatilo! I'll tweak the UI a bit (for the current version) to get your thoughts before we can mark this as ready to implement.

@clarkus
Copy link
Contributor

clarkus commented Aug 5, 2021

I was working on some chart patterns and put in a few rounds on legends. One thing to think about is scale. In some cases, visualizations might have a really large number of metrics. A conditionally displayed legend might be a good solution for a consistent means of translating a chart. Also worth noting that the tooltip for some charts is mostly a repeat of the legend information, so we have multiple components contributing to this solution.

Lines with comparisons + legend + tooltip

Lifecycle - grouped bars + tooltip

Lifecycle - grouped bars + tooltip-1

@paolodamico
Copy link
Contributor Author

Yes!! Really love this legend key, let's make it happen! Will tag this as a good first issue as I think with the design (and the already existing tooltip logic) it can be fairly straightforward to pick up.

@paolodamico paolodamico added good first issue Good for newcomers and removed design Issues that need a designer's attention labels Aug 6, 2021
@alexkim205 alexkim205 self-assigned this Aug 25, 2021
@alexkim205 alexkim205 removed their assignment Sep 15, 2021
@paolodamico
Copy link
Contributor Author

@clarkus @mariusandra what are your thoughts on having this on insights? I'm not convinced is solving a real problem, as we've haven't had more feedback from users on this.

@mariusandra
Copy link
Collaborator

This would definitely help people who are making screenshots of insights, and should probably be tracked in the "nail analytics" doc, but we definitely have higher priorities to tackle first.

@clarkus
Copy link
Contributor

clarkus commented Nov 29, 2021

It depends. I can see it adding value in some scenarios, while being completely redundant in others. I think focusing on other priorities first is a good call.

@paolodamico
Copy link
Contributor Author

Legend key is live!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

5 participants