{"version":3,"sources":["webpack:///./src/components/UI/AnimatedNumber.vue","webpack:///src/components/UI/AnimatedNumber.vue","webpack:///./src/components/UI/AnimatedNumber.vue?46ee","webpack:///./src/components/UI/AnimatedNumber.vue?f182"],"names":["render","_vm","this","_c","_self","html","domProps","_s","formatter","displayValue","_v","staticRenderFns","props","value","Number","type","Function","default","x","Math","round","toString","replace","Boolean","speed","validator","data","computed","parsedValue","parseFloat","endTimeInterval","changeDecayRatio","methods","updateDisplayValue","abs","$emit","change","ceil","floor","timeOut","window","setTimeout","mounted","watch","isNaN","component"],"mappings":"uHAAA,IAAIA,EAAS,WAAkB,IAAIC,EAAIC,KAAKC,EAAGF,EAAIG,MAAMD,GAAG,OAAQF,EAAII,KAAMF,EAAG,OAAO,CAACG,SAAS,CAAC,UAAYL,EAAIM,GAAGN,EAAIO,UAAUP,EAAIQ,kBAAkBN,EAAG,OAAO,CAACF,EAAIS,GAAG,IAAIT,EAAIM,GAAGN,EAAIO,UAAUP,EAAIQ,eAAe,QAEpNE,EAAkB,GCOP,G,kDAAA,CACfC,MAAA,CAEAC,MAAAC,OAGAN,UAAA,CACAO,KAAAC,SACAC,QAAA,SAAAC,GAAA,OACAC,KAAAC,MAAA,IAAAF,GAAA,KACAG,WACAC,QAAA,+BAIAjB,KAAA,CACAU,KAAAQ,QACAN,SAAA,GAGAO,MAAA,CACAT,KAAAD,OACAG,QAAA,EACAQ,UAAA,SAAAZ,GACA,OAAAA,GAAA,GAAAA,GAAA,MAYAa,KAAA,WACA,OACAjB,aAAA,IAKAkB,SAAA,CACAC,YAAA,WACA,OAAAC,WAAA,KAAAhB,QAGAiB,gBAAA,WACA,mBAAAN,OAGAO,iBAAA,WACA,iBAAAP,QAIAQ,QAAA,CACAC,mBAAA,WAQA,GALAd,KAAAe,IAAA,KAAAzB,aAAA,KAAAmB,aAAA,IACA,KAAAnB,aAAA,KAAAmB,aAIA,KAAAA,cAAA,KAAAnB,aACA,KAAA0B,MAAA,uBAGA,CAKA,IAAAC,GACA,KAAAR,YAAA,KAAAnB,cAAA,KAAAsB,iBACAK,KAAA,EAAAjB,KAAAkB,KAAAD,GAAAjB,KAAAmB,MAAAF,GACA,KAAA3B,cAAA2B,EAGA,IAAAG,EAAA,SAAAT,gBAAA,IAAAX,KAAAe,IAAAE,GACAI,OAAAC,WAAA,KAAAR,mBAAAM,MAKAG,QAAA,WACA,KAAAjC,aAAA,KAAAmB,aAKAe,MAAA,CACA9B,MAAA,WACA+B,MAAA,KAAAnC,gBACA,KAAAA,aAAA,GAEA+B,OAAAC,WAAA,KAAAR,mBAAA,GACA,KAAAE,MAAA,sBC5GsW,I,YCOlWU,EAAY,eACd,EACA7C,EACAW,GACA,EACA,KACA,KACA,MAIa,aAAAkC,E","file":"js/chunk-2d207d65.js?id=f5d9ae0789e6bb66cfa8","sourcesContent":["var render = function render(){var _vm=this,_c=_vm._self._c;return (_vm.html)?_c('span',{domProps:{\"innerHTML\":_vm._s(_vm.formatter(_vm.displayValue))}}):_c('span',[_vm._v(\" \"+_vm._s(_vm.formatter(_vm.displayValue))+\" \")])\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <!-- if we are formatting the value as html -->\n  <span v-if=\"html\" v-html=\"formatter(displayValue)\"></span>\n\n  <!-- otherwise just the bare value -->\n  <span v-else> {{ formatter(displayValue) }} </span>\n</template>\n\n<script>\nexport default {\n  props: {\n    // the value to display\n    value: Number,\n    // formatter function for the value, default is\n    // to put commas every 3 digits and round number to 2 dp\n    formatter: {\n      type: Function,\n      default: x =>\n        (Math.round(x * 100) / 100)\n          .toString()\n          .replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\")\n    },\n    // whether or not to render the value as html\n    // maps to Vue's v-html directive\n    html: {\n      type: Boolean,\n      default: false\n    },\n    // a number from 1 - 10 of how quickly to animate the changes\n    speed: {\n      type: Number,\n      default: 5,\n      validator: function(value) {\n        if (value >= 1 && value <= 10) {\n          // console.warn(\n          //   'Prop \"speed\" for component  \"AnimatedNumber\" needs to be an integer between 1 and 10'\n          // );\n          return true;\n        } else {\n          return false;\n        }\n      }\n    }\n  },\n  // initialize to 0\n  data() {\n    return {\n      displayValue: 0\n    };\n  },\n  // in case prop type check fails (e.g. a string is parsed)\n  // try figure it out here\n  computed: {\n    parsedValue: function() {\n      return parseFloat(this.value);\n    },\n    // will range from 60 => 150\n    endTimeInterval: function() {\n      return 50 + 100 / this.speed;\n    },\n    // will range from 2 => 11\n    changeDecayRatio: function() {\n      return 1 + 10 / this.speed;\n    }\n  },\n  // function to update the display value in an animated fashiion\n  methods: {\n    updateDisplayValue() {\n      // if the difference is under one, set them equal to avoid asymptotic\n      // approach (this can happen if the initial value is < 1)\n      if (Math.abs(this.displayValue - this.parsedValue) < 1) {\n        this.displayValue = this.parsedValue;\n      }\n      // if the real value already matches the display one, return and emit event\n      // this is the recursive base case\n      if (this.parsedValue === this.displayValue) {\n        this.$emit(\"finished-update\");\n      }\n      // otherwise calculate value change and time interval, and make the recursive call\n      else {\n        // change is the current difference, divided by our ratio\n        // this will result in logarithmic decay\n        // note that we ensure to floor or ceiling the value depending on whether it\n        // is negative or positive, in order to avoid asymptotic approaches\n        let change =\n          (this.parsedValue - this.displayValue) / this.changeDecayRatio;\n        change = change >= 0 ? Math.ceil(change) : Math.floor(change);\n        this.displayValue += change;\n        // timeout is minInterval plus the difference to max interval, scaled by the\n        // inverse of change. Thus we will begin at minInterval and eventually reach maxInterval\n        let timeOut = 30 + (this.endTimeInterval - 30) / Math.abs(change);\n        window.setTimeout(this.updateDisplayValue, timeOut);\n      }\n    }\n  },\n  // initialize to target value on mount\n  mounted() {\n    this.displayValue = this.parsedValue;\n  },\n  // call the update function when value changes\n  // also handle the case where we're going from an invalid value\n  // to a valid one, by setting displayValue to 0\n  watch: {\n    value: function() {\n      if (isNaN(this.displayValue)) {\n        this.displayValue = 0;\n      }\n      window.setTimeout(this.updateDisplayValue, 0);\n      this.$emit(\"started-update\");\n    }\n  }\n};\n</script>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./AnimatedNumber.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./AnimatedNumber.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./AnimatedNumber.vue?vue&type=template&id=1a9de1bc\"\nimport script from \"./AnimatedNumber.vue?vue&type=script&lang=js\"\nexport * from \"./AnimatedNumber.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}