refactor(rum-explorer): use one central number formatter

adobe · Jun 24, 2024 · c5f5f21 · c5f5f21
1 parent 97d0a2b
commit c5f5f21
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 60 deletions.
diff --git a/tools/rum/charts/skyline.js b/tools/rum/charts/skyline.js
@@ -8,7 +8,7 @@ import {
   INTERPOLATION_THRESHOLD,
   scoreBundle,
   scoreCWV,
-  // toHumanReadable,
+  toHumanReadable,
   cwvInterpolationFn,
   truncate,
   simpleCWVInterpolationFn,
@@ -19,21 +19,6 @@ import AbstractChart from './chart.js';
 
 Chart.register(TimeScale, LinearScale, ...registerables);
 
-/**
- * Returns a human readable number
- * @param {Number} num a number
- * @param {Number} precision the number of significant digits
- * @returns {String} a human readable number
- */
-function toHumanReadable(num, precision = 2) {
-  if (Number.isNaN(num)) return '-';
-  const formatter = new Intl.NumberFormat('en-US', {
-    notation: 'compact',
-    maximumSignificantDigits: precision,
-  });
-  return formatter.format(num).toLocaleLowerCase();
-}
-
 /**
  * The SkylineChart is a unique type of multi-series bar chart that
  * shows both the overall traffic levels as well as the distribution

diff --git a/tools/rum/test/number-format.test.js b/tools/rum/test/number-format.test.js
@@ -20,17 +20,17 @@ describe('number-format', () => {
     assert.strictEqual(roundToConfidenceInterval(1000000), '1m');
     assert.strictEqual(roundToConfidenceInterval(10000000), '10m');
     assert.strictEqual(roundToConfidenceInterval(100000000), '100m');
-    assert.strictEqual(roundToConfidenceInterval(1000000000), '1g');
-    assert.strictEqual(roundToConfidenceInterval(10000000000), '10g');
-    assert.strictEqual(roundToConfidenceInterval(100000000000), '100g');
+    assert.strictEqual(roundToConfidenceInterval(1000000000), '1b');
+    assert.strictEqual(roundToConfidenceInterval(10000000000), '10b');
+    assert.strictEqual(roundToConfidenceInterval(100000000000), '100b');
     assert.strictEqual(roundToConfidenceInterval(1000000000000), '1t');
     assert.strictEqual(roundToConfidenceInterval(10000000000000), '10t');
     assert.strictEqual(roundToConfidenceInterval(100000000000000), '100t');
-    assert.strictEqual(roundToConfidenceInterval(1000000000000000), '1p');
-    assert.strictEqual(roundToConfidenceInterval(10000000000000000), '10p');
-    assert.strictEqual(roundToConfidenceInterval(100000000000000000), '100p');
-    assert.strictEqual(roundToConfidenceInterval(1000000000000000000), '1,000p');
-    assert.strictEqual(roundToConfidenceInterval(10000000000000000000), '10,000p');
+    assert.strictEqual(roundToConfidenceInterval(1000000000000000), '1000t');
+    assert.strictEqual(roundToConfidenceInterval(10000000000000000), '10,000t');
+    assert.strictEqual(roundToConfidenceInterval(100000000000000000), '100,000t');
+    assert.strictEqual(roundToConfidenceInterval(1000000000000000000), '1,000,000t');
+    assert.strictEqual(roundToConfidenceInterval(10000000000000000000), '10,000,000t');
   });
 
   it('supports decimal places', () => {
@@ -45,14 +45,14 @@ describe('number-format', () => {
     assert.strictEqual(roundToConfidenceInterval(3141592, 300), '3.1m');
     assert.strictEqual(roundToConfidenceInterval(314159265, 3000), '310m');
     // when accuracy is getting fuzzy, we switch to fractional notation
-    assert.strictEqual(roundToConfidenceInterval(3141592653, 30), '3⅛g');
+    assert.strictEqual(roundToConfidenceInterval(3141592653, 30), '3⅛b');
     assert.strictEqual(roundToConfidenceInterval(
       3141592653,
       300000,
-    ), '3.142g');
+    ), '3.142b');
     assert.strictEqual(roundToConfidenceInterval(
       3141592653,
       3000,
-    ), '3.1g');
+    ), '3.1b');
   });
 });
diff --git a/tools/rum/utils.js b/tools/rum/utils.js
@@ -38,28 +38,23 @@ export function scoreCWV(value, name) {
   return scoreValue(value, ...limits[name]);
 }
 export const UA_KEY = 'userAgent';
-export function toHumanReadable(num) {
-  const dp = 3;
-  let number = num;
-  const thresh = 1000;
 
-  if (Math.abs(num) < thresh) {
-    const precision = (Math.log10(number) < 0) ? 2 : (dp - 1) - Math.floor(Math.log10(number));
-    return `${number.toFixed(precision)}`;
-  }
-
-  const units = ['k', 'm', 'g', 't', 'p'];
-  let u = -1;
-  const r = 10 ** dp;
-
-  do {
-    number /= thresh;
-    u += 1;
-  } while (Math.round(Math.abs(number) * r) / r >= thresh && u < units.length - 1);
+/**
+ * Returns a human readable number
+ * @param {Number} num a number
+ * @param {Number} precision the number of significant digits
+ * @returns {String} a human readable number
+ */
+export function toHumanReadable(num, precision = 2) {
+  if (Number.isNaN(num)) return '-';
+  const formatter = new Intl.NumberFormat('en-US', {
+    notation: 'compact',
+    maximumSignificantDigits: precision,
+  });
+  return formatter.format(num).toLocaleLowerCase();
+}
 
-  const precision = (dp - 1) - Math.floor(Math.log10(number));
-  return `${number.toFixed(precision)}${units[u]}`;
-} export function toISOStringWithTimezone(date) {
+export function toISOStringWithTimezone(date) {
   // Pad a number to 2 digits
   const pad = (n) => `${Math.floor(Math.abs(n))}`.padStart(2, '0');
 
@@ -286,20 +281,8 @@ export function roundToConfidenceInterval(
     Math.min(2, Number.isNaN(maxPrecision) ? Infinity : maxPrecision),
     common,
   );
-  // we don't want to show too many zeros, so we use k, m, g, etc.
-  const exponentSuffixes = ['k', 'm', 'g', 't', 'p'];
-  const { value, exponent } = exponentSuffixes.reduce((acc, suffix) => {
-    if (acc.value >= 1000) {
-      return { value: acc.value / 1000, exponent: suffix };
-    }
-    return acc;
-  }, { value: total, exponent: '' });
-
-  const nf = new Intl.NumberFormat('en-US', {
-    maximumSignificantDigits: precision,
-  });
 
-  const rounded = nf.format(value) + exponent;
+  const rounded = toHumanReadable(total, precision);
   if (fuzzy
     && samples < total
     && rounded.match(/\.[\d]+/)