2 files changed, 124 insertions, 36 deletions

diff --git a/app/assets/javascripts/lib/utils/unit_format/formatter_factory.js b/app/assets/javascripts/lib/utils/unit_format/formatter_factory.js
index 418cc69bf5a..08c32944181 100644
--- a/app/assets/javascripts/lib/utils/unit_format/formatter_factory.js
+++ b/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,10 +16,10 @@ 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);
   }
@@ -27,6 +27,25 @@ const formatNumberNormalized = (value, { maxCharLength, valueFactor = 1, ...opti
 };
 
 /**
+ * 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.
  *
  * While the number is scaled down, the units are scaled up.
@@ -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}`;
   };
 };
 
diff --git a/app/assets/javascripts/lib/utils/unit_format/index.js b/app/assets/javascripts/lib/utils/unit_format/index.js
index bc82c6aa74d..5c5210027e4 100644
--- a/app/assets/javascripts/lib/utils/unit_format/index.js
+++ b/app/assets/javascripts/lib/utils/unit_format/index.js
@@ -126,9 +126,11 @@ export const getFormatter = (format = SUPPORTED_FORMATS.engineering) => {
  *
  * @function
  * @param {Number} value - Number to format
- * @param {Number} fractionDigits - precision decimals
- * @param {Number} maxLength - Max length of formatted number
+ * @param {Object} options - Formatting options
+ * @param {Number} options.fractionDigits - number of precision decimals
+ * @param {Number} options.maxLength - Max length of formatted number
  * if length is exceeded, exponential format is used.
+ * @param {String} options.unitSeparator - Separator between value and unit
  */
 export const number = getFormatter(SUPPORTED_FORMATS.number);
 
@@ -137,9 +139,11 @@ export const number = getFormatter(SUPPORTED_FORMATS.number);
  *
  * @function
  * @param {Number} value - Number to format, `1` is rendered as `100%`
- * @param {Number} fractionDigits - number of precision decimals
- * @param {Number} maxLength - Max length of formatted number
+ * @param {Object} options - Formatting options
+ * @param {Number} options.fractionDigits - number of precision decimals
+ * @param {Number} options.maxLength - Max length of formatted number
  * if length is exceeded, exponential format is used.
+ * @param {String} options.unitSeparator - Separator between value and unit
  */
 export const percent = getFormatter(SUPPORTED_FORMATS.percent);
 
@@ -148,9 +152,11 @@ export const percent = getFormatter(SUPPORTED_FORMATS.percent);
  *
  * @function
  * @param {Number} value - Number to format, `100` is rendered as `100%`
- * @param {Number} fractionDigits - number of precision decimals
- * @param {Number} maxLength - Max length of formatted number
+ * @param {Object} options - Formatting options
+ * @param {Number} options.fractionDigits - number of precision decimals
+ * @param {Number} options.maxLength - Max length of formatted number
  * if length is exceeded, exponential format is used.
+ * @param {String} options.unitSeparator - Separator between value and unit
  */
 export const percentHundred = getFormatter(SUPPORTED_FORMATS.percentHundred);
 
@@ -159,9 +165,11 @@ export const percentHundred = getFormatter(SUPPORTED_FORMATS.percentHundred);
  *
  * @function
  * @param {Number} value - Number to format, `1` is rendered as `1s`
- * @param {Number} fractionDigits - number of precision decimals
- * @param {Number} maxLength - Max length of formatted number
+ * @param {Object} options - Formatting options
+ * @param {Number} options.fractionDigits - number of precision decimals
+ * @param {Number} options.maxLength - Max length of formatted number
  * if length is exceeded, exponential format is used.
+ * @param {String} options.unitSeparator - Separator between value and unit
  */
 export const seconds = getFormatter(SUPPORTED_FORMATS.seconds);
 
@@ -170,9 +178,11 @@ export const seconds = getFormatter(SUPPORTED_FORMATS.seconds);
  *
  * @function
  * @param {Number} value - Number to format, `1` is formatted as `1ms`
- * @param {Number} fractionDigits - number of precision decimals
- * @param {Number} maxLength - Max length of formatted number
+ * @param {Object} options - Formatting options
+ * @param {Number} options.fractionDigits - number of precision decimals
+ * @param {Number} options.maxLength - Max length of formatted number
  * if length is exceeded, exponential format is used.
+ * @param {String} options.unitSeparator - Separator between value and unit
  */
 export const milliseconds = getFormatter(SUPPORTED_FORMATS.milliseconds);
 
@@ -182,7 +192,11 @@ export const milliseconds = getFormatter(SUPPORTED_FORMATS.milliseconds);
  *
  * @function
  * @param {Number} value - Number to format, `1` is formatted as `1B`
- * @param {Number} fractionDigits - number of precision decimals
+ * @param {Object} options - Formatting options
+ * @param {Number} options.fractionDigits - number of precision decimals
+ * @param {Number} options.maxLength - Max length of formatted number
+ * if length is exceeded, exponential format is used.
+ * @param {String} options.unitSeparator - Separator between value and unit
  */
 export const decimalBytes = getFormatter(SUPPORTED_FORMATS.decimalBytes);
 
@@ -192,7 +206,11 @@ export const decimalBytes = getFormatter(SUPPORTED_FORMATS.decimalBytes);
  *
  * @function
  * @param {Number} value - Number to format, `1` is formatted as `1kB`
- * @param {Number} fractionDigits - number of precision decimals
+ * @param {Object} options - Formatting options
+ * @param {Number} options.fractionDigits - number of precision decimals
+ * @param {Number} options.maxLength - Max length of formatted number
+ * if length is exceeded, exponential format is used.
+ * @param {String} options.unitSeparator - Separator between value and unit
  */
 export const kilobytes = getFormatter(SUPPORTED_FORMATS.kilobytes);
 
@@ -202,7 +220,11 @@ export const kilobytes = getFormatter(SUPPORTED_FORMATS.kilobytes);
  *
  * @function
  * @param {Number} value - Number to format, `1` is formatted as `1MB`
- * @param {Number} fractionDigits - number of precision decimals
+ * @param {Object} options - Formatting options
+ * @param {Number} options.fractionDigits - number of precision decimals
+ * @param {Number} options.maxLength - Max length of formatted number
+ * if length is exceeded, exponential format is used.
+ * @param {String} options.unitSeparator - Separator between value and unit
  */
 export const megabytes = getFormatter(SUPPORTED_FORMATS.megabytes);
 
@@ -212,7 +234,11 @@ export const megabytes = getFormatter(SUPPORTED_FORMATS.megabytes);
  *
  * @function
  * @param {Number} value - Number to format, `1` is formatted as `1GB`
- * @param {Number} fractionDigits - number of precision decimals
+ * @param {Object} options - Formatting options
+ * @param {Number} options.fractionDigits - number of precision decimals
+ * @param {Number} options.maxLength - Max length of formatted number
+ * if length is exceeded, exponential format is used.
+ * @param {String} options.unitSeparator - Separator between value and unit
  */
 export const gigabytes = getFormatter(SUPPORTED_FORMATS.gigabytes);
 
@@ -222,7 +248,11 @@ export const gigabytes = getFormatter(SUPPORTED_FORMATS.gigabytes);
  *
  * @function
  * @param {Number} value - Number to format, `1` is formatted as `1GB`
- * @param {Number} fractionDigits - number of precision decimals
+ * @param {Object} options - Formatting options
+ * @param {Number} options.fractionDigits - number of precision decimals
+ * @param {Number} options.maxLength - Max length of formatted number
+ * if length is exceeded, exponential format is used.
+ * @param {String} options.unitSeparator - Separator between value and unit
  */
 export const terabytes = getFormatter(SUPPORTED_FORMATS.terabytes);
 
@@ -232,7 +262,11 @@ export const terabytes = getFormatter(SUPPORTED_FORMATS.terabytes);
  *
  * @function
  * @param {Number} value - Number to format, `1` is formatted as `1PB`
- * @param {Number} fractionDigits - number of precision decimals
+ * @param {Object} options - Formatting options
+ * @param {Number} options.fractionDigits - number of precision decimals
+ * @param {Number} options.maxLength - Max length of formatted number
+ * if length is exceeded, exponential format is used.
+ * @param {String} options.unitSeparator - Separator between value and unit
  */
 export const petabytes = getFormatter(SUPPORTED_FORMATS.petabytes);
 
@@ -242,7 +276,11 @@ export const petabytes = getFormatter(SUPPORTED_FORMATS.petabytes);
  *
  * @function
  * @param {Number} value - Number to format, `1` is formatted as `1B`
- * @param {Number} fractionDigits - number of precision decimals
+ * @param {Object} options - Formatting options
+ * @param {Number} options.fractionDigits - number of precision decimals
+ * @param {Number} options.maxLength - Max length of formatted number
+ * if length is exceeded, exponential format is used.
+ * @param {String} options.unitSeparator - Separator between value and unit
  */
 export const bytes = getFormatter(SUPPORTED_FORMATS.bytes);
 
@@ -252,7 +290,11 @@ export const bytes = getFormatter(SUPPORTED_FORMATS.bytes);
  *
  * @function
  * @param {Number} value - Number to format, `1` is formatted as `1kB`
- * @param {Number} fractionDigits - number of precision decimals
+ * @param {Object} options - Formatting options
+ * @param {Number} options.fractionDigits - number of precision decimals
+ * @param {Number} options.maxLength - Max length of formatted number
+ * if length is exceeded, exponential format is used.
+ * @param {String} options.unitSeparator - Separator between value and unit
  */
 export const kibibytes = getFormatter(SUPPORTED_FORMATS.kibibytes);
 
@@ -262,7 +304,11 @@ export const kibibytes = getFormatter(SUPPORTED_FORMATS.kibibytes);
  *
  * @function
  * @param {Number} value - Number to format, `1` is formatted as `1MB`
- * @param {Number} fractionDigits - number of precision decimals
+ * @param {Object} options - Formatting options
+ * @param {Number} options.fractionDigits - number of precision decimals
+ * @param {Number} options.maxLength - Max length of formatted number
+ * if length is exceeded, exponential format is used.
+ * @param {String} options.unitSeparator - Separator between value and unit
  */
 export const mebibytes = getFormatter(SUPPORTED_FORMATS.mebibytes);
 
@@ -272,7 +318,11 @@ export const mebibytes = getFormatter(SUPPORTED_FORMATS.mebibytes);
  *
  * @function
  * @param {Number} value - Number to format, `1` is formatted as `1GB`
- * @param {Number} fractionDigits - number of precision decimals
+ * @param {Object} options - Formatting options
+ * @param {Number} options.fractionDigits - number of precision decimals
+ * @param {Number} options.maxLength - Max length of formatted number
+ * if length is exceeded, exponential format is used.
+ * @param {String} options.unitSeparator - Separator between value and unit
  */
 export const gibibytes = getFormatter(SUPPORTED_FORMATS.gibibytes);
 
@@ -282,7 +332,11 @@ export const gibibytes = getFormatter(SUPPORTED_FORMATS.gibibytes);
  *
  * @function
  * @param {Number} value - Number to format, `1` is formatted as `1GB`
- * @param {Number} fractionDigits - number of precision decimals
+ * @param {Object} options - Formatting options
+ * @param {Number} options.fractionDigits - number of precision decimals
+ * @param {Number} options.maxLength - Max length of formatted number
+ * if length is exceeded, exponential format is used.
+ * @param {String} options.unitSeparator - Separator between value and unit
  */
 export const tebibytes = getFormatter(SUPPORTED_FORMATS.tebibytes);
 
@@ -292,7 +346,11 @@ export const tebibytes = getFormatter(SUPPORTED_FORMATS.tebibytes);
  *
  * @function
  * @param {Number} value - Number to format, `1` is formatted as `1PB`
- * @param {Number} fractionDigits - number of precision decimals
+ * @param {Object} options - Formatting options
+ * @param {Number} options.fractionDigits - number of precision decimals
+ * @param {Number} options.maxLength - Max length of formatted number
+ * if length is exceeded, exponential format is used.
+ * @param {String} options.unitSeparator - Separator between value and unit
  */
 export const pebibytes = getFormatter(SUPPORTED_FORMATS.pebibytes);
 
@@ -301,6 +359,10 @@ export const pebibytes = getFormatter(SUPPORTED_FORMATS.pebibytes);
  *
  * @function
  * @param {Number} value - Value to format
- * @param {Number} fractionDigits - precision decimals - Defaults to 2
+ * @param {Object} options - Formatting options
+ * @param {Number} options.fractionDigits - precision decimals, defaults to 2
+ * @param {Number} options.maxLength - Max length of formatted number
+ * if length is exceeded, exponential format is used.
+ * @param {String} options.unitSeparator - Separator between value and unit
  */
 export const engineering = getFormatter();