fix(dashboards): Improve Y axis rate formatting (#83454)

A simpler formatter, using `.toLocaleString()`. This does a much better job of formatting values, and avoids having a lot of pointless trailing 0s than the previous approach.
getsentry · Jan 15, 2025 · 817f9c1 · 817f9c1
1 parent 70a4612
commit 817f9c1
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/static/app/views/dashboards/widgets/timeSeriesWidget/formatYAxisValue.spec.tsx b/static/app/views/dashboards/widgets/timeSeriesWidget/formatYAxisValue.spec.tsx
@@ -58,9 +58,18 @@ describe('formatYAxisValue', () => {
   describe('rate', () => {
     it.each([
       [0, '1/second', '0'],
+      [-3, '1/second', '-3/s'],
       [0.712, '1/second', '0.712/s'],
-      [12712, '1/second', '12.7K/s'],
-      [1231, '1/minute', '1.23K/min'],
+      [12700, '1/second', '12.7K/s'],
+      [0.0003, '1/second', '0.0003/s'],
+      [0.00000153, '1/second', '0.00000153/s'],
+      [0.35, '1/second', '0.35/s'],
+      [10, '1/second', '10/s'],
+      [10.0, '1/second', '10/s'],
+      [1231, '1/minute', '1.231K/min'],
+      [110000, '1/second', '110K/s'],
+      [110001, '1/second', '110.001K/s'],
+      [123456789, '1/second', '123.457M/s'],
     ])('Formats %s as %s', (value, unit, formattedValue) => {
       expect(formatYAxisValue(value, 'rate', unit)).toEqual(formattedValue);
     });

diff --git a/static/app/views/dashboards/widgets/timeSeriesWidget/formatYAxisValue.tsx b/static/app/views/dashboards/widgets/timeSeriesWidget/formatYAxisValue.tsx
@@ -1,12 +1,12 @@
 import {formatBytesBase2} from 'sentry/utils/bytes/formatBytesBase2';
 import {formatBytesBase10} from 'sentry/utils/bytes/formatBytesBase10';
 import {ABYTE_UNITS, SIZE_UNITS} from 'sentry/utils/discover/fieldRenderers';
-import {DurationUnit, type RateUnit} from 'sentry/utils/discover/fields';
-import {formatAbbreviatedNumber, formatRate} from 'sentry/utils/formatters';
+import {DurationUnit, RATE_UNIT_LABELS, RateUnit} from 'sentry/utils/discover/fields';
+import {formatAbbreviatedNumber} from 'sentry/utils/formatters';
 import {formatPercentage} from 'sentry/utils/number/formatPercentage';
 import {convertDuration} from 'sentry/utils/unitConversion/convertDuration';
 
-import {isADurationUnit} from '../common/typePredicates';
+import {isADurationUnit, isARateUnit} from '../common/typePredicates';
 
 import {formatYAxisDuration} from './formatYAxisDuration';
 
@@ -23,10 +23,10 @@ export function formatYAxisValue(value: number, type: string, unit?: string): st
     case 'percentage':
       return formatPercentage(value, 3);
     case 'duration':
-      const inputUnit = isADurationUnit(unit) ? unit : DurationUnit.MILLISECOND;
+      const durationUnit = isADurationUnit(unit) ? unit : DurationUnit.MILLISECOND;
       const durationInMilliseconds = convertDuration(
         value,
-        inputUnit,
+        durationUnit,
         DurationUnit.MILLISECOND
       );
       return formatYAxisDuration(durationInMilliseconds);
@@ -39,7 +39,11 @@ export function formatYAxisValue(value: number, type: string, unit?: string): st
 
       return formatter(bytes);
     case 'rate':
-      return formatRate(value, unit as RateUnit);
+      const rateUnit = isARateUnit(unit) ? unit : RateUnit.PER_SECOND;
+      return `${value.toLocaleString(undefined, {
+        notation: 'compact',
+        maximumSignificantDigits: 6,
+      })}${RATE_UNIT_LABELS[rateUnit]}`;
     default:
       return value.toString();
   }