Last active
May 28, 2021 05:33
-
-
Save Whats-A-MattR/08e4b1a8f3832ec30478f8a4a53c8dff to your computer and use it in GitHub Desktop.
VueJS + CountUp Component w/ Abbreviation (K,M,B)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const getDecimal = (num) => { | |
if (num.toString().length >= 4) { | |
return 1 | |
} | |
else { | |
return 0 | |
} | |
} | |
module.exports = getDecimal |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const numRound = (num) => { | |
//performing checks in descending order to utilise if-immediate as this use case is simple | |
// check if number is equal to or over a billion | |
if (num.toString().length() >= 9) { | |
const Mnum = Math.round((num / 1000000000)*100)/100; | |
return Mnum | |
} | |
// check if number is equal to or over a million | |
if (num.toString().length >= 7) { | |
const Mnum = Math.round((num / 1000000)*100)/100; | |
return Mnum | |
} | |
// check if number is equal to or over a thousand | |
if (num.toString().length >= 4) { | |
const Mnum = Math.round((num / 1000)*100)/100; | |
return Mnum | |
} | |
else { | |
return num | |
} | |
}; | |
module.exports = getRoundNum; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const setSuffix = (num) => { | |
//performing checks in descending order to utilise if-immediate as this use case is simple | |
// check if number is equal to or over a billion, return the letter "B" | |
if (num.toString().length >= 9) { | |
return "B" | |
} | |
// check if number is equal to or over a million, return the letter "M" | |
if (num.toString().length >= 7) { | |
return "M" | |
} | |
// check if number is equal to or over a thousand, return the letter "K" | |
if (num.toString().length >= 4) { | |
return "K" | |
} | |
}; | |
module.exports = setSuffix; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<ICountUP | |
v-if="loaded" | |
:delay="delay" | |
:endVal="shortNum" | |
:options="options" /> | |
// use a question mark until the number loads, a loading animation would be cool also | |
<div v-else>?</div> | |
</template> | |
<script type="text/babel"> | |
// run imports | |
import ICountUP from "vue-countup-v2"; | |
import getSuffix from "./getSuffix.js" | |
import getRoundNum from "./getRoundNum.js"; | |
import getDecimal from "./getDecimal.js"; | |
// create our component | |
export default { | |
name: "countup-example", | |
components: { | |
ICountUP, | |
}, | |
data() { | |
return { | |
//wait until we change loaded to true before running component, set it as false initially | |
loaded: false, | |
//store number as string | |
count: null, | |
tempNum: null, | |
//initialise as null, we will set this once we have determined it's size | |
shortNum: null, | |
// refer to vue-countup | |
delay: 500, | |
options: { | |
useEasing: true, | |
useGrouping: true, | |
seperator: ",", | |
decimal: ".", | |
decimalPlaces: 0, | |
duration: 5, | |
suffix: '' | |
}, | |
}; | |
}, | |
async created() { | |
// get a number from your API | |
const response = await fetch("http://yourdomain/api/givemeanumber"); | |
const json = await response.json(); | |
//this is based on my component, your JSON may be structured differently, change as needed - this is an example | |
this.tempNum = json[0].Number; | |
// shorten number based on number length | |
this.shortNum = getRoundNum(this.tempNum); | |
// set the suffix in options based on number length | |
this.options.suffix = getSuffix(this.tempNum); | |
// set the decimal places in options based on number length | |
this.options.decimalPlaces = getDecimal(this.tempNum); | |
this.loaded = true; | |
} | |
}; | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<ICountUP | |
:delay="delay" | |
:endVal="shortNum" | |
:options="options" /> | |
</template> | |
<script type="text/babel"> | |
// run imports | |
import ICountUP from "vue-countup-v2"; | |
import getSuffix from "./getSuffix.js" | |
import getRoundNum from "./getRoundNum.js"; | |
import getDecimal from "./getDecimal.js"; | |
// create our component | |
export default { | |
name: "countup-example", | |
components: { | |
ICountUP, | |
}, | |
data() { | |
return { | |
//store number as string | |
count: "666666666666666", | |
//initialise as null, we will set this once we have determined it's size | |
shortNum: null, | |
// refer to vue-countup | |
delay: 500, | |
options: { | |
useEasing: true, | |
useGrouping: true, | |
seperator: ",", | |
decimal: ".", | |
decimalPlaces: 0, | |
duration: 5, | |
suffix: '' | |
}, | |
}; | |
}, | |
created() { | |
// shorten number based on number length | |
this.shortNum = getRoundNum(this.count); | |
// set the suffix in options based on number length | |
this.options.suffix = getSuffix(this.count); | |
// set the decimal places in options based on number length | |
this.options.decimalPlaces = getDecimal(this.count); | |
} | |
}; | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment