diff options
Diffstat (limited to 'app/assets/javascripts/lib/utils/unit_format')
-rw-r--r-- | app/assets/javascripts/lib/utils/unit_format/formatter_factory.js | 52 | ||||
-rw-r--r-- | app/assets/javascripts/lib/utils/unit_format/index.js | 108 |
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(); |