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

Add vertical legend to performance dashboard #1517

Merged
merged 2 commits into from
Oct 18, 2024

Conversation

Wittiest
Copy link
Contributor

Problem

The Performance Dashboard legend and chart become unreadable if you have greater than ~40 job classes

overflow

Solution Description

  • Introduces a custom vertical legend and uses it in the Performance Dashboard chart.
  • Does not use the vertical legend anywhere else

Screenshot of Performance Dashboard

Screenshot 2024-10-13 at 10 42 32 PM

Screenshot of Jobs Dashboard

Shows that there was no regression
Screenshot 2024-10-13 at 10 42 24 PM

Solution Reflections

  • There may be a better approach across graphs to have a hybrid (horizontal graph for < X items, vertical, scrollable graph for N items)
  • It may be worth implementing something like the sidekiq metrics dashboard where the table items have a checkbox that controls what appears on the chart.

Implementation Details

  • Added vertical: true plugin option to charts and followed the general guidance in Chart.js HTML Legend to implement a custom legend
  • Add a chart_container partial which checks for whether the legend is vertical and modifies the layout

@bensheldon
Copy link
Owner

@Wittiest wow, thank you for doing this! This is not trivial at all 🙇🏻

I made a few tweaks but I'm satisfied with this. I think it's flexible enough that if we wanted to do more responsive improvements we can do so in the future 👍🏻

@bensheldon bensheldon merged commit 581c7ae into bensheldon:main Oct 18, 2024
25 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Development

Successfully merging this pull request may close these issues.

2 participants