diff --git a/components/ProgressButton.vue b/components/ProgressButton.vue index dfd6339..6ff4ece 100644 --- a/components/ProgressButton.vue +++ b/components/ProgressButton.vue @@ -68,10 +68,12 @@ export default { cappedValueText() { return this.unit === 'maxAge' ? this.$store.getters.ageText - : this.cappedValue + : this.$store.getters.suffixedDecimalText(this.cappedValue) }, maxText() { - return this.unit === 'maxAge' ? this.$store.getters.ageMaxText : this.max + return this.unit === 'maxAge' + ? this.$store.getters.ageMaxText + : this.$store.getters.suffixedDecimalText(this.max) }, clickable() { return !this.disabled && this.value >= this.max diff --git a/store/index.js b/store/index.js index 7d381d0..228f913 100644 --- a/store/index.js +++ b/store/index.js @@ -566,6 +566,57 @@ export const getters = { process.created ? totalInstruments + 1 : totalInstruments, 0 ), + suffixedDecimalText: (state) => (n) => { + const DIGITS_AFTER_DP = 3 + const suffixValues = { Z: 0, k: 1e3, M: 1e6, B: 1e9, T: 1e12, X: 1e15 } + n = new Decimal(n) + + // iterate over object above to find text suffix and divsior value + let largestSuffix = '' + let largestValue = 0 + for (const suffix in suffixValues) { + if ( + n.greaterThanOrEqualTo(suffixValues[suffix]) && + suffixValues[suffix] > largestValue + ) { + largestSuffix = suffix + largestValue = suffixValues[suffix] + } + } + + // Special case: Small numbers are just displayed + if (largestValue === 0) return Math.floor(n) + + // Special case: wicked large numbers are shown in scientific notation + if (largestSuffix === 'X') { + largestSuffix = 'e' + n.exponent + largestValue = new Decimal.fromMantissaExponent(1, n.exponent) // eslint-disable-line new-cap + } + + // display value is always in [1, 1000) + let displayValue = n.divide(largestValue).toString() + // whole exact millions, billions, etc. have no decimal part, and need one built from text + if (!displayValue.includes('.')) displayValue += '.' + + // All suffixes should always show exactly DIGITS_AFTER_DP digits; add zeros or truncate + const valuesBeforeDP = displayValue.substr( + 0, + displayValue.indexOf('.') + ).length + let valuesAfterDP = displayValue.substr(displayValue.indexOf('.')).length + if (valuesAfterDP > DIGITS_AFTER_DP - 1) { + displayValue = displayValue.substr( + 0, + valuesBeforeDP + DIGITS_AFTER_DP + 1 + ) + } + while (valuesAfterDP < DIGITS_AFTER_DP + 1) { + valuesAfterDP += 1 + displayValue += '0' + } + + return displayValue + largestSuffix + }, } export const mutations = {