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

feat(dashboards): Improve TimeSeriesVisualization X axis label selection and rendering #85409

Merged
merged 7 commits into from
Feb 19, 2025

Conversation

gggritso
Copy link
Member

The current setup has a few downsides:

  • too many tick labels. There are lots of labels, they're very busy and take up a lot of screen
  • redundant labels. Every label has the time and date, even when looking at 60 days when the time isn't relevant

This PR uses a different approach, called a "cascading" formatter. The code explains in detail what's happening, but I think the results are better shown using screenshots.

The end result is nice single-line labels, no overlap, sparse axes, and simple behaviour.

e.g.,
Screenshot 2025-02-18 at 4 51 33 PM
Screenshot 2025-02-18 at 4 51 43 PM
Screenshot 2025-02-18 at 4 51 51 PM
Screenshot 2025-02-18 at 4 51 57 PM
Screenshot 2025-02-18 at 4 52 08 PM
Screenshot 2025-02-18 at 4 52 49 PM
Screenshot 2025-02-18 at 4 53 01 PM
Screenshot 2025-02-18 at 4 53 29 PM

@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Feb 18, 2025
@gggritso gggritso marked this pull request as ready for review February 19, 2025 14:31
@gggritso gggritso requested a review from a team as a code owner February 19, 2025 14:31
Copy link
Member

@narsaynorath narsaynorath left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nice, this looks great, and thank you for the clear comment 🙏

@gggritso gggritso merged commit ed105f1 into master Feb 19, 2025
43 checks passed
@gggritso gggritso deleted the feat/dashboards/x-axis-improvements branch February 19, 2025 15:33
armenzg pushed a commit that referenced this pull request Feb 19, 2025
…ction and rendering (#85409)

The current setup has a few downsides:

- too many tick labels. There are lots of labels, they're very busy and
take up a lot of screen
- redundant labels. Every label has the time and date, even when looking
at 60 days when the time isn't relevant

This PR uses a different approach, called a "cascading" formatter. The
code explains in detail what's happening, but I think the results are
better shown using screenshots.

The end result is nice single-line labels, no overlap, sparse axes, and
simple behaviour.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Scope: Frontend Automatically applied to PRs that change frontend components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants