sentry icon indicating copy to clipboard operation
sentry copied to clipboard

ref(stats): Improve x-axis labels visibility

Open priscilawebdev opened this issue 1 year ago • 1 comments

Problem

On the stats page, the x-axis labels and ticks are designed to prevent the chart from looking overcrowded. See the function https://github.com/getsentry/sentry/blob/28ba9c33fc6e0aa12d45ca80451931f5f00e1503/static/app/views/organizationStats/usageChart/utils.tsx#L90.

The issue with the current logic is that labels and ticks are set at fixed intervals without ensuring they align correctly with previous values. This can lead to confusion, where users might see a label like "July 10" and assume the interval starts there, while the previous interval may also include "July 10".

Solution

This PR introduces a new function, getXAxisLabelVisibility, which determines the visibility of x-axis labels based on specific conditions:

  • Labels are shown only if the defined date is more than 1 day apart.
  • If there are 10 or fewer unique labels, all of them are displayed.
  • If there are more than 10 unique labels, the total number of labels is divided by 10 to determine the intervals for displaying the labels, but this time starting from the correct interval

Note Displaying max and min labels does not look bad. For instance, the chart does not make use of the zoom functionality too. Should we re-enable the visibility of them?

closes https://github.com/getsentry/sentry/issues/74338

priscilawebdev avatar Aug 26 '24 09:08 priscilawebdev

Codecov Report

Attention: Patch coverage is 60.00000% with 16 lines in your changes missing coverage. Please review.

:white_check_mark: All tests successful. No failed tests found.

Files with missing lines Patch % Lines
...c/app/views/organizationStats/usageChart/utils.tsx 50.00% 13 Missing :warning:
...c/app/views/organizationStats/usageChart/index.tsx 33.33% 2 Missing :warning:
...tic/app/components/onboarding/productSelection.tsx 88.88% 1 Missing :warning:
Additional details and impacted files
@@            Coverage Diff             @@
##           master   #76527      +/-   ##
==========================================
+ Coverage   73.64%   79.80%   +6.16%     
==========================================
  Files        6914     6902      -12     
  Lines      307575   307540      -35     
  Branches    50431    52697    +2266     
==========================================
+ Hits       226500   245421   +18921     
+ Misses      74560    60725   -13835     
+ Partials     6515     1394    -5121     

codecov[bot] avatar Aug 26 '24 09:08 codecov[bot]

14 days looks quite a bit better, i'd check the 1 hour and 1 day graphs they don't seem to have labels

image

but they also don't seem to in prod

scttcper avatar Aug 29 '24 17:08 scttcper

@scttcper yes we are not displaying labels for <= 24h

priscilawebdev avatar Aug 30 '24 07:08 priscilawebdev