{"version":3,"sources":["webpack:///./src/components/BarGauge.vue?38ea","webpack:///./src/components/BarGauge.vue?4659","webpack:///src/components/BarGauge.vue","webpack:///./src/components/BarGauge.vue?37ef","webpack:///./src/components/BarGauge.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","class","gaugeColor","_l","index","key","value","staticRenderFns","name","data","size","lowValue","highValue","songPlaylistability","computed","rangeDifferential","Number","lowRange","midRange","highRange","ratingLabel","Max","Min","methods","increasePlaylistability","vm","toValue","setTimeout","props","components","mounted","component"],"mappings":"kHAAA,yBAAqiB,EAAG,G,yCCAxiB,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,YAAYC,MAAMP,EAAIQ,YAAYR,EAAIS,GAAG,IAAK,SAASC,GAAO,OAAON,EAAG,MAAM,CAACO,IAAI,OAASD,EAAMJ,YAAY,MAAMC,MAAM,CAAC,OAAWP,EAAIY,OAAOF,QAAW,IAC9QG,EAAkB,GCQtB,G,UAAA,CACEC,KAAM,WACNC,KAFF,WAGI,MAAO,CACLC,KAAM,IACNC,SAAU,GACVC,UAAW,GACXC,oBAAqB,KAGzBC,SAAF,CACIZ,WADJ,WAEM,OAAIP,KAAKW,OAAS,EACT,SAELX,KAAKW,MAAQ,GAAKX,KAAKW,OAAS,EAC3B,UAELX,KAAKW,MAAQ,EACR,eADT,GAIFS,kBAZJ,WAaM,OAAOC,OAAOrB,KAAKiB,UAAYjB,KAAKgB,UAAY,GAElDM,SAfJ,WAgBM,MAAO,CAAb,qEAEIC,SAlBJ,WAmBM,MAAO,CAAb,qGAEIC,UArBJ,WAsBM,MAAO,CAAb,uEAEIC,YAxBJ,WAyBM,OAAIzB,KAAKkB,qBAAuBlB,KAAKsB,SAASI,IACrC,OAEL1B,KAAKkB,oBAAsBlB,KAAKuB,SAASI,KAAO3B,KAAKkB,qBAAuBlB,KAAKuB,SAASG,IACrF,OAEL1B,KAAKkB,oBAAsBlB,KAAKwB,UAAUG,IACrC,aADT,IAMJC,QAAF,CACIC,wBADJ,SACA,GACM,IAAN,OACUC,EAAGZ,oBAAsBa,IAC3BD,EAAGZ,sBACHc,YAAW,WAAnB,sCAIEC,MAAO,CACLtB,MAAOU,QAETa,WAAY,GAIZC,QA/DF,eCTkV,I,wBCQ9UC,EAAY,eACd,EACAtC,EACAc,GACA,EACA,KACA,WACA,MAIa,aAAAwB,E","file":"js/chunk-e6a518da.6b05559c.js","sourcesContent":["import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./BarGauge.vue?vue&type=style&index=0&id=b8603536&scoped=true&lang=scss&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./BarGauge.vue?vue&type=style&index=0&id=b8603536&scoped=true&lang=scss&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"container\",class:_vm.gaugeColor},_vm._l((10),function(index){return _c('div',{key:'bar_' + index,staticClass:\"bar\",class:{'active' : _vm.value>=index}})}),0)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"container\" :class=\"gaugeColor\">\n      <div class=\"bar\" v-for=\"index in 10\" :key=\"'bar_' + index\" :class=\"{'active' : value>=index}\"></div>\n  </div>\n</template>\n\n<script>\n\n\nexport default {\n  name: 'BarGauge',\n  data(){\n    return {\n      size: 300,\n      lowValue: 25,\n      highValue: 45,\n      songPlaylistability: 35\n    };\n  },\n  computed:{\n    gaugeColor(){\n      if (this.value <= 4){\n        return 'danger';\n      }\n      if (this.value > 4 && this.value <= 7){\n        return 'warning';\n      }\n      if (this.value > 7){\n        return 'success';\n      }\n    },\n    rangeDifferential(){\n      return Number(this.highValue - this.lowValue) / 3;\n    },\n    lowRange(){\n      return { Min: this.lowValue, Max: Number(this.lowValue + this.rangeDifferential) };\n    },\n    midRange(){\n      return { Min: Number(this.lowValue + this.rangeDifferential), Max: Number(this.highValue - this.rangeDifferential) };\n    },\n    highRange(){\n      return { Min: Number(this.highValue - this.rangeDifferential), Max: this.highValue };\n    },\n    ratingLabel(){\n      if (this.songPlaylistability <= this.lowRange.Max){\n        return 'poor';\n      }\n      if (this.songPlaylistability > this.midRange.Min && this.songPlaylistability <= this.midRange.Max){\n        return 'good';\n      }\n      if (this.songPlaylistability > this.highRange.Min){\n        return 'great';\n      }\n    },\n\n  },\n  methods:{\n    increasePlaylistability(toValue){\n      const vm = this;\n      if (vm.songPlaylistability < toValue){\n        vm.songPlaylistability++;\n        setTimeout(() => { vm.increasePlaylistability(toValue); }, 20);\n      }\n    }\n  },\n  props: {\n    value: Number\n  },\n  components: {\n\n  },\n\n  mounted() {\n    // this.increasePlaylistability(45);\n  },\n};\n</script>\n\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\n<style scoped lang=\"scss\">\n@import \"@/assets/scss/variables.scss\";\n\n.container{\n    display: flex;\n    flex-flow: row nowrap;\n    align-items: flex-end;\n    &.danger{\n        .bar.active{\n            background: $color-danger;\n        }\n    }\n    &.warning{\n        .bar.active{\n            background: $color-warning;\n        }\n    }\n    &.success{\n        .bar.active{\n            background: $color-success;\n        }\n    }\n    .bar{\n        width: 8%;\n        margin: 0 1%;\n        background: rgba($color-black, .25);\n\n        &:nth-child(1){\n            height: 10%;\n        }\n        &:nth-child(2){\n            height: 20%;\n        }\n        &:nth-child(3){\n            height: 30%;\n        }\n        &:nth-child(4){\n            height: 40%;\n        }\n        &:nth-child(5){\n            height: 50%;\n        }\n        &:nth-child(6){\n            height: 60%;\n        }\n        &:nth-child(7){\n            height: 70%;\n        }\n        &:nth-child(8){\n            height: 80%;\n        }\n        &:nth-child(9){\n            height: 90%;\n        }\n        &:nth-child(10){\n            height: 100%;\n        }\n    }\n}\n</style>\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./BarGauge.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/thread-loader/dist/cjs.js!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./BarGauge.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./BarGauge.vue?vue&type=template&id=b8603536&scoped=true&\"\nimport script from \"./BarGauge.vue?vue&type=script&lang=js&\"\nexport * from \"./BarGauge.vue?vue&type=script&lang=js&\"\nimport style0 from \"./BarGauge.vue?vue&type=style&index=0&id=b8603536&scoped=true&lang=scss&\"\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  \"b8603536\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}