ref(starfish): Show 3 significant digits for queries per minute (#54033)

1. Add precision arg to `formatAbbreviatedNumber` to set # of
significant digits
2. Update `getFieldRenderer` rate
renderer to use constant precision of 3 for sig digs.

Author: AbhiPrasad

static/app/utils/discover/fieldRenderers.tsx

@@ -119,6 +119,8 @@ type FieldFormatters = {
 
 export type FieldTypes = keyof FieldFormatters;
 
+const DEFAULT_RATE_SIG_DIGITS = 3;
+
 const EmptyValueContainer = styled('span')`
   color: ${p => p.theme.gray300};
 `;
@@ -234,12 +236,12 @@ export const FIELD_FORMATTERS: FieldFormatters = {
     isSortable: true,
     renderFunc: (field, data, baggage) => {
       const {unit} = baggage ?? {};
-
-      return (
-        <NumberContainer>
-          {`${formatAbbreviatedNumber(data[field])}${unit ? RATE_UNIT_LABELS[unit] : ''}`}
-        </NumberContainer>
-      );
+      const renderedUnit = unit ? RATE_UNIT_LABELS[unit] : '';
+      const formattedNumber = `${formatAbbreviatedNumber(
+        data[field],
+        DEFAULT_RATE_SIG_DIGITS
+      )}${renderedUnit}`;
+      return <NumberContainer>{formattedNumber}</NumberContainer>;
     },
   },
   integer: {

static/app/utils/formatters.spec.tsx

@@ -202,6 +202,18 @@ describe('formatAbbreviatedNumber()', function () {
     expect(formatAbbreviatedNumber(1500)).toBe('1.5k');
     expect(formatAbbreviatedNumber(1213122)).toBe('1.2m');
   });
+
+  it('should round to set amount of significant digits', () => {
+    expect(formatAbbreviatedNumber(100.12, 3)).toBe('100');
+    expect(formatAbbreviatedNumber(199.99, 3)).toBe('200');
+    expect(formatAbbreviatedNumber(1500, 3)).toBe('1.5k');
+    expect(formatAbbreviatedNumber(1213122, 3)).toBe('1.21m');
+    expect(formatAbbreviatedNumber(1500000000000, 3)).toBe('1500b');
+
+    expect(formatAbbreviatedNumber('1249.23421', 3)).toBe('1.25k');
+    expect(formatAbbreviatedNumber('1239567891299', 3)).toBe('1240b');
+    expect(formatAbbreviatedNumber('158.80421626984128', 3)).toBe('159');
+  });
 });
 
 describe('formatFloat()', function () {

static/app/utils/formatters.tsx

@@ -286,7 +286,16 @@ const numberFormats = [
   [1000, 'k'],
 ] as const;
 
-export function formatAbbreviatedNumber(number: number | string) {
+/**
+ * Formats a number to a string with a suffix
+ *
+ * @param number the number to format
+ * @param precision the number of significant digits to include
+ */
+export function formatAbbreviatedNumber(
+  number: number | string,
+  precision?: number
+): string {
   number = Number(number);
 
   let lookup: (typeof numberFormats)[number];
@@ -301,12 +310,19 @@ export function formatAbbreviatedNumber(number: number | string) {
       continue;
     }
 
-    return shortValue / 10 > 1 || !fitsBound
-      ? `${shortValue}${suffix}`
-      : `${formatFloat(number / suffixNum, 1)}${suffix}`;
+    const formattedNumber =
+      shortValue / 10 > 1 || !fitsBound
+        ? precision === undefined
+          ? shortValue
+          : parseFloat(shortValue.toPrecision(precision)).toString()
+        : formatFloat(number / suffixNum, precision || 1).toLocaleString(undefined, {
+            maximumSignificantDigits: precision,
+          });
+
+    return `${formattedNumber}${suffix}`;
   }
 
-  return number.toLocaleString();
+  return number.toLocaleString(undefined, {maximumSignificantDigits: precision});
 }
 
 export function formatRate(value: number, unit: RateUnits = RateUnits.PER_SECOND) {