Allow spaces between number and unit in formatter

This change adds a new configuration option to number formatters to have
spaces (or other strings) separating the formatted number from units

The new option is called `unitSeparator`, and it can be passed to
formatters that use units, for example:

```
// default behavior
expect(kilobytes(1, 0)).toBe('1.0kB');

// new behavior
expect(kilobytes(1, 0, { unitSeparator: ' ' })).toBe('1.0 kB');
```

app/assets/javascripts/lib/utils/unit_format/formatter_factory.js

@@ -5,7 +5,7 @@ import { formatNumber } from '~/locale';
  *
  * @param {Number} number to be converted
  *
- * @param {options.maxCharLength} Max output char length at the
+ * @param {options.maxLength} Max output char length at the
  * expense of precision, if the output is longer than this,
  * the formatter switches to using exponential notation.
  *
@@ -16,16 +16,35 @@ import { formatNumber } from '~/locale';
  * `formatNumber` such as `valueFactor`, `unit` and `style`.
  *
  */
-const formatNumberNormalized = (value, { maxCharLength, valueFactor = 1, ...options }) => {
+const formatNumberNormalized = (value, { maxLength, valueFactor = 1, ...options }) => {
   const formatted = formatNumber(value * valueFactor, options);
 
-  if (maxCharLength !== undefined && formatted.length > maxCharLength) {
+  if (maxLength !== undefined && formatted.length > maxLength) {
     // 123456 becomes 1.23e+8
     return value.toExponential(2);
   }
   return formatted;
 };
 
+/**
+ * This function converts the old positional arguments into an options
+ * object.
+ *
+ * This is done so we can support legacy fractionDigits and maxLength as positional
+ * arguments, as well as the better options object.
+ *
+ * @param {Object|Number} options
+ * @returns {Object} options given to the formatter
+ */
+const getFormatterArguments = (options) => {
+  if (typeof options === 'object' && options !== null) {
+    return options;
+  }
+  return {
+    maxLength: options,
+  };
+};
+
 /**
  * Formats a number as a string scaling it up according to units.
  *
@@ -40,7 +59,9 @@ const scaledFormatter = (units, unitFactor = 1000) => {
     return new RangeError(`unitFactor cannot have the value 0.`);
   }
 
-  return (value, fractionDigits) => {
+  return (value, fractionDigits, options) => {
+    const { maxLength, unitSeparator = '' } = getFormatterArguments(options);
+
     if (value === null) {
       return '';
     }
@@ -66,11 +87,13 @@ const scaledFormatter = (units, unitFactor = 1000) => {
     }
 
     const unit = units[scale];
+    const length = maxLength !== undefined ? maxLength - unit.length : undefined;
 
     return `${formatNumberNormalized(num, {
+      maxLength: length,
       maximumFractionDigits: fractionDigits,
       minimumFractionDigits: fractionDigits,
-    })}${unit}`;
+    })}${unitSeparator}${unit}`;
   };
 };
 
@@ -78,14 +101,16 @@ const scaledFormatter = (units, unitFactor = 1000) => {
  * Returns a function that formats a number as a string.
  */
 export const numberFormatter = (style = 'decimal', valueFactor = 1) => {
-  return (value, fractionDigits, maxCharLength) => {
-    return `${formatNumberNormalized(value, {
-      maxCharLength,
+  return (value, fractionDigits, options) => {
+    const { maxLength } = getFormatterArguments(options);
+
+    return formatNumberNormalized(value, {
+      maxLength,
       valueFactor,
       style,
       maximumFractionDigits: fractionDigits,
       minimumFractionDigits: fractionDigits,
-    })}`;
+    });
   };
 };
 
@@ -93,15 +118,16 @@ export const numberFormatter = (style = 'decimal', valueFactor = 1) => {
  * Returns a function that formats a number as a string with a suffix.
  */
 export const suffixFormatter = (unit = '', valueFactor = 1) => {
-  return (value, fractionDigits, maxCharLength) => {
-    const length = maxCharLength !== undefined ? maxCharLength - unit.length : undefined;
+  return (value, fractionDigits, options) => {
+    const { maxLength, unitSeparator = '' } = getFormatterArguments(options);
 
+    const length = maxLength !== undefined ? maxLength - unit.length : undefined;
     return `${formatNumberNormalized(value, {
-      maxCharLength: length,
+      maxLength: length,
       valueFactor,
       maximumFractionDigits: fractionDigits,
       minimumFractionDigits: fractionDigits,
-    })}${unit}`;
+    })}${unitSeparator}${unit}`;
   };
 };
 

spec/frontend/lib/utils/unit_format/formatter_factory_spec.js

@@ -31,12 +31,17 @@ describe('unit_format/formatter_factory', () => {
       expect(formatNumber(12.345, 4)).toBe('12.3450');
     });
 
-    it('formats a large integer with a length limit', () => {
+    it('formats a large integer with a max length - using legacy positional argument', () => {
       expect(formatNumber(10 ** 7, undefined)).toBe('10,000,000');
       expect(formatNumber(10 ** 7, undefined, 9)).toBe('1.00e+7');
       expect(formatNumber(10 ** 7, undefined, 10)).toBe('10,000,000');
     });
 
+    it('formats a large integer with a max length', () => {
+      expect(formatNumber(10 ** 7, undefined, { maxLength: 9 })).toBe('1.00e+7');
+      expect(formatNumber(10 ** 7, undefined, { maxLength: 10 })).toBe('10,000,000');
+    });
+
     describe('formats with a different locale', () => {
       let originalLang;
 
@@ -92,7 +97,7 @@ describe('unit_format/formatter_factory', () => {
       expect(formatSuffix(-1000000)).toBe('-1,000,000pop.');
     });
 
-    it('formats a floating point nugative number', () => {
+    it('formats a floating point negative number', () => {
       expect(formatSuffix(-0.1)).toBe('-0.1pop.');
       expect(formatSuffix(-0.1, 0)).toBe('-0pop.');
       expect(formatSuffix(-0.1, 2)).toBe('-0.10pop.');
@@ -108,10 +113,20 @@ describe('unit_format/formatter_factory', () => {
       expect(formatSuffix(10 ** 10)).toBe('10,000,000,000pop.');
     });
 
-    it('formats a large integer with a length limit', () => {
+    it('formats using a unit separator', () => {
+      expect(formatSuffix(10, 0, { unitSeparator: ' ' })).toBe('10 pop.');
+      expect(formatSuffix(10, 0, { unitSeparator: ' x ' })).toBe('10 x pop.');
+    });
+
+    it('formats a large integer with a max length - using legacy positional argument', () => {
       expect(formatSuffix(10 ** 7, undefined, 10)).toBe('1.00e+7pop.');
       expect(formatSuffix(10 ** 10, undefined, 10)).toBe('1.00e+10pop.');
     });
+
+    it('formats a large integer with a max length', () => {
+      expect(formatSuffix(10 ** 7, undefined, { maxLength: 10 })).toBe('1.00e+7pop.');
+      expect(formatSuffix(10 ** 10, undefined, { maxLength: 10 })).toBe('1.00e+10pop.');
+    });
   });
 
   describe('scaledSIFormatter', () => {
@@ -143,6 +158,10 @@ describe('unit_format/formatter_factory', () => {
         expect(formatGibibytes(10 ** 10)).toBe('10GB');
         expect(formatGibibytes(10 ** 11)).toBe('100GB');
       });
+
+      it('formats bytes using a unit separator', () => {
+        expect(formatGibibytes(1, 0, { unitSeparator: ' ' })).toBe('1 B');
+      });
     });
 
     describe('scaled format with offset', () => {
@@ -174,6 +193,19 @@ describe('unit_format/formatter_factory', () => {
         expect(formatGigaBytes(10 ** 9)).toBe('1EB');
       });
 
+      it('formats bytes using a unit separator', () => {
+        expect(formatGigaBytes(1, undefined, { unitSeparator: ' ' })).toBe('1 GB');
+      });
+
+      it('formats long byte numbers with max length - using legacy positional argument', () => {
+        expect(formatGigaBytes(1, 8, 7)).toBe('1.00e+0GB');
+      });
+
+      it('formats long byte numbers with max length', () => {
+        expect(formatGigaBytes(1, 8)).toBe('1.00000000GB');
+        expect(formatGigaBytes(1, 8, { maxLength: 7 })).toBe('1.00e+0GB');
+      });
+
       it('formatting of too large numbers is not suported', () => {
         // formatting YB is out of range
         expect(() => scaledSIFormatter('B', 9)).toThrow();
@@ -216,6 +248,10 @@ describe('unit_format/formatter_factory', () => {
         expect(formatMilligrams(-100)).toBe('-100mg');
         expect(formatMilligrams(-(10 ** 4))).toBe('-10g');
       });
+
+      it('formats using a unit separator', () => {
+        expect(formatMilligrams(1, undefined, { unitSeparator: ' ' })).toBe('1 mg');
+      });
     });
   });
 
@@ -253,6 +289,10 @@ describe('unit_format/formatter_factory', () => {
         expect(formatScaledBin(10 * 1024 ** 3)).toBe('10GiB');
         expect(formatScaledBin(100 * 1024 ** 3)).toBe('100GiB');
       });
+
+      it('formats using a unit separator', () => {
+        expect(formatScaledBin(1, undefined, { unitSeparator: ' ' })).toBe('1 B');
+      });
     });
 
     describe('scaled format with offset', () => {
@@ -288,6 +328,10 @@ describe('unit_format/formatter_factory', () => {
         expect(formatGibibytes(100 * 1024 ** 3)).toBe('100EiB');
       });
 
+      it('formats using a unit separator', () => {
+        expect(formatGibibytes(1, undefined, { unitSeparator: ' ' })).toBe('1 GiB');
+      });
+
       it('formatting of too large numbers is not suported', () => {
         // formatting YB is out of range
         expect(() => scaledBinaryFormatter('B', 9)).toThrow();

spec/frontend/lib/utils/unit_format/index_spec.js

@@ -74,10 +74,13 @@ describe('unit_format', () => {
 
   it('seconds', () => {
     expect(seconds(1)).toBe('1s');
+    expect(seconds(1, undefined, { unitSeparator: ' ' })).toBe('1 s');
   });
 
   it('milliseconds', () => {
     expect(milliseconds(1)).toBe('1ms');
+    expect(milliseconds(1, undefined, { unitSeparator: ' ' })).toBe('1 ms');
+
     expect(milliseconds(100)).toBe('100ms');
     expect(milliseconds(1000)).toBe('1,000ms');
     expect(milliseconds(10_000)).toBe('10,000ms');
@@ -87,6 +90,7 @@ describe('unit_format', () => {
   it('decimalBytes', () => {
     expect(decimalBytes(1)).toBe('1B');
     expect(decimalBytes(1, 1)).toBe('1.0B');
+    expect(decimalBytes(1, 1, { unitSeparator: ' ' })).toBe('1.0 B');
 
     expect(decimalBytes(10)).toBe('10B');
     expect(decimalBytes(10 ** 2)).toBe('100B');
@@ -104,31 +108,37 @@ describe('unit_format', () => {
   it('kilobytes', () => {
     expect(kilobytes(1)).toBe('1kB');
     expect(kilobytes(1, 1)).toBe('1.0kB');
+    expect(kilobytes(1, 1, { unitSeparator: ' ' })).toBe('1.0 kB');
   });
 
   it('megabytes', () => {
     expect(megabytes(1)).toBe('1MB');
     expect(megabytes(1, 1)).toBe('1.0MB');
+    expect(megabytes(1, 1, { unitSeparator: ' ' })).toBe('1.0 MB');
   });
 
   it('gigabytes', () => {
     expect(gigabytes(1)).toBe('1GB');
     expect(gigabytes(1, 1)).toBe('1.0GB');
+    expect(gigabytes(1, 1, { unitSeparator: ' ' })).toBe('1.0 GB');
   });
 
   it('terabytes', () => {
     expect(terabytes(1)).toBe('1TB');
     expect(terabytes(1, 1)).toBe('1.0TB');
+    expect(terabytes(1, 1, { unitSeparator: ' ' })).toBe('1.0 TB');
   });
 
   it('petabytes', () => {
     expect(petabytes(1)).toBe('1PB');
     expect(petabytes(1, 1)).toBe('1.0PB');
+    expect(petabytes(1, 1, { unitSeparator: ' ' })).toBe('1.0 PB');
   });
 
   it('bytes', () => {
     expect(bytes(1)).toBe('1B');
     expect(bytes(1, 1)).toBe('1.0B');
+    expect(bytes(1, 1, { unitSeparator: ' ' })).toBe('1.0 B');
 
     expect(bytes(10)).toBe('10B');
     expect(bytes(100)).toBe('100B');
@@ -142,26 +152,31 @@ describe('unit_format', () => {
   it('kibibytes', () => {
     expect(kibibytes(1)).toBe('1KiB');
     expect(kibibytes(1, 1)).toBe('1.0KiB');
+    expect(kibibytes(1, 1, { unitSeparator: ' ' })).toBe('1.0 KiB');
   });
 
   it('mebibytes', () => {
     expect(mebibytes(1)).toBe('1MiB');
     expect(mebibytes(1, 1)).toBe('1.0MiB');
+    expect(mebibytes(1, 1, { unitSeparator: ' ' })).toBe('1.0 MiB');
   });
 
   it('gibibytes', () => {
     expect(gibibytes(1)).toBe('1GiB');
     expect(gibibytes(1, 1)).toBe('1.0GiB');
+    expect(gibibytes(1, 1, { unitSeparator: ' ' })).toBe('1.0 GiB');
   });
 
   it('tebibytes', () => {
     expect(tebibytes(1)).toBe('1TiB');
     expect(tebibytes(1, 1)).toBe('1.0TiB');
+    expect(tebibytes(1, 1, { unitSeparator: ' ' })).toBe('1.0 TiB');
   });
 
   it('pebibytes', () => {
     expect(pebibytes(1)).toBe('1PiB');
     expect(pebibytes(1, 1)).toBe('1.0PiB');
+    expect(pebibytes(1, 1, { unitSeparator: ' ' })).toBe('1.0 PiB');
   });
 
   describe('getFormatter', () => {