feat(dashboards): Improve duration Y axis label formatting #83337
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
github-actions
bot
added
the
Scope: Frontend
Bundle ReportChanges will increase total bundle size by 1.26kB (0.0%) ⬆️. This is within the configured threshold ✅ Detailed changes
|
This comment was marked as outdated.
This comment was marked as outdated.
gggritso
deleted the
feat/dashboards/impro-ve-y-axis-duration-formatting
branch
andrewshie-sentry
pushed a commit
that referenced
this pull request
Jan 22, 2025
Temporarily (while I keep working on the refactor) adds yet again duration formatter, this time for Y axis label values. I'm towards a setup where the formatting helpers don't allow arbitrary arguments for how many decimal places to show, but rather there are helper _per context_. A duration can be formatted for a Y axis, for a tooltip, for a table, etc. This new `formatYAxisDuration` is a step in that direction. It improves Y axis labels by side-stepping some weird cases. The current approach is: 1. Load the timeseries. Give it to ECharts, let it decide how many ticks there are 2. Figure out the bounds of the dataset. Based on the bounds, choose a single appropriate unit (e.g., "millisecond"). Try to guess how many ticks ECharts will have, and possibly adjust 3. When formatting Y axis labels, always use that specific unit, always use 0 decimal places This causes a _lot_ of weirdness. For example, if the range is narrow (e.g., between 10ms and 12ms) ECharts might make 4 ticks, but we only format 1 decimal place. The ticks are 1, 1, 2, 2. Gross. Or, If the range is wide (e.g., between 0ms and 12 years) we'll have ticks like 600d 900d etc. Instead: 1. Load the timeseries. Give it to ECharts, and let it decide how many ticks there are 2. For every tick on the Y axis, figure out the appropriate unit, and format using the current locale 3. Add support for shorter and longer units. Down to the microsecond, up to the year This covers a lot of the edge cases, removes a lot of complexity.
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Temporarily (while I keep working on the refactor) adds yet again duration formatter, this time for Y axis label values. I'm towards a setup where the formatting helpers don't allow arbitrary arguments for how many decimal places to show, but rather there are helper per context. A duration can be formatted for a Y axis, for a tooltip, for a table, etc.
This new
formatYAxisDurationis a step in that direction. It improves Y axis labels by side-stepping some weird cases. The current approach is:This causes a lot of weirdness. For example, if the range is narrow (e.g., between 10ms and 12ms) ECharts might make 4 ticks, but we only format 1 decimal place. The ticks are 1, 1, 2, 2. Gross. Or, If the range is wide (e.g., between 0ms and 12 years) we'll have ticks like 600d 900d etc.
Instead:
This covers a lot of the edge cases, removes a lot of complexity.