{"version":3,"sources":["webpack:///./src/components/Charts/MirtGaugeChart.vue?ab30","webpack:///./src/components/Charts/MirtGaugeChart.vue?07aa","webpack:///src/components/Charts/MirtGaugeChart.vue","webpack:///./src/components/Charts/MirtGaugeChart.vue?08c9","webpack:///./src/components/Charts/MirtGaugeChart.vue","webpack:///./src/components/Charts/MirtGaugeChart.vue?17a3"],"names":["module","exports","render","_vm","this","_h","$createElement","_c","_self","class","$style","root","canvas","attrs","size","start","_v","end","domProps","_s","limit","toLocaleString","info","disp","units","staticRenderFns","props","value","required","type","default","getColor","defaultColor","computed","percent","p","d","parseFloat","isNaN","color","chartColor","marker","watch","handler","percentVal","animate","immediate","data","ctx","pi","radius","min","max","methods","setTimeout","val","step","drawArc","beginPath","arc","strokeStyle","lineWidth","stroke","drawChart","clearRect","init","document","querySelector","getContext","mounted","injectStyles","context","locals","component"],"mappings":"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","file":"js/chunk-1a62ea74.354553a1.js","sourcesContent":["// extracted by mini-css-extract-plugin\nmodule.exports = {\"root\":\"MirtGaugeChart_root_38Ezs\",\"canvas\":\"MirtGaugeChart_canvas_2mOhl\",\"info\":\"MirtGaugeChart_info_ppTnc\",\"start\":\"MirtGaugeChart_start_FqdbT\",\"end\":\"MirtGaugeChart_end_26CgF\"};","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.$style.root},[_c('canvas',{class:_vm.$style.canvas,attrs:{\"height\":(_vm.size + \"px\"),\"width\":(_vm.size + \"px\")}}),_c('div',{class:_vm.$style.start},[_vm._v(\" 0 \")]),_c('div',{class:_vm.$style.end,domProps:{\"textContent\":_vm._s(_vm.limit.toLocaleString())}}),_c('div',{class:_vm.$style.info},[_c('div',{domProps:{\"textContent\":_vm._s(_vm.disp)}}),_c('div',{domProps:{\"textContent\":_vm._s(_vm.units)}})])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div :class=\"$style.root\">\n    <canvas :class=\"$style.canvas\" :height=\"`${size}px`\" :width=\"`${size}px`\" />\n    <div :class=\"$style.start\">\n      0\n    </div>\n    <div :class=\"$style.end\" v-text=\"limit.toLocaleString()\"></div>\n    <div :class=\"$style.info\">\n      <div v-text=\"disp\"></div>\n      <div v-text=\"units\"></div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    value: {\n      required: true\n    },\n    limit: {\n      type: Number,\n      default: 0\n    },\n    units: {\n      type: String,\n      required: true\n    },\n    getColor: {\n      type: Function,\n      required: true\n    },\n    defaultColor: {\n      type: String,\n      required: true\n    }\n  },\n  computed: {\n    percent() {\n      if (!this.value) return 0;\n      const p = (100 * this.value) / this.limit;\n      return p > 100 ? 100 : p;\n    },\n    disp() {\n      let d =\n        this.value - (this.value * (this.percent - this.percentVal)) / 100;\n      d =\n        d > 0\n          ? parseFloat(d.toFixed(2))\n          : parseFloat(this.percentVal.toFixed(2));\n      return isNaN(d) ? 0 : d;\n    },\n    color() {\n      return {\n        chartColor: this.getColor(this.percentVal),\n        marker: this.getColor(this.percent)\n      };\n    }\n  },\n  watch: {\n    percent: {\n      handler() {\n        this.percentVal = this.percent;\n        this.animate();\n      },\n      immediate: true\n    }\n  },\n  data() {\n    return {\n      ctx: null,\n      pi: Math.PI,\n      size: 240,\n      radius: 110,\n      min: 0,\n      max: 0,\n      percentVal: 0\n    };\n  },\n  methods: {\n    animate() {\n      this.percentVal = 0;\n      setTimeout(() => {\n        let step = 2;\n        let val = 0;\n        let interval = setInterval(() => {\n          val = val + step;\n          if (val >= this.percent) clearInterval(interval);\n          this.percentVal = val > this.percent ? this.percent : val;\n          let offset = (this.percent - this.percentVal) / 10;\n          step = offset <= 0.01 ? 1 : offset;\n          this.drawChart();\n        }, 0);\n      }, 0);\n    },\n\n    drawArc(color = this.defaultColor, max = 0) {\n      this.ctx.beginPath();\n      this.ctx.arc(\n        this.radius + 10,\n        this.radius + 10,\n        this.radius,\n        this.pi * 0.7,\n        max\n      );\n      this.ctx.strokeStyle = color;\n      this.ctx.lineWidth = 15;\n      this.ctx.stroke();\n    },\n\n    drawChart() {\n      this.ctx.clearRect(0, 0, this.size, this.size);\n      this.drawArc(this.defaultColor, this.max);\n      this.drawArc(\n        this.color.chartColor,\n        this.min + ((this.max - this.min) * this.percentVal) / 100\n      );\n    },\n\n    init() {\n      this.ctx = document\n        .querySelector(`.${this.$style.canvas}`)\n        .getContext(\"2d\");\n      this.min = this.pi * 0.7;\n      this.max = this.pi * 2 + this.pi * 0.3;\n    }\n  },\n  mounted() {\n    this.init();\n  }\n};\n</script>\n\n<style module>\n.root {\n  position: relative;\n  height: 240px;\n  width: 240px;\n  margin: 0 auto 0;\n}\n\n.canvas {\n  display: block;\n}\n\n.root > div {\n  position: absolute;\n  z-index: 1;\n}\n\n.info {\n  top: 33%;\n  left: 0;\n  right: 0;\n  text-align: center;\n}\n\n.info > div:first-child {\n  font-weight: 700 !important;\n  font-size: 28px;\n  line-height: 42px;\n}\n\n.info > div:last-child {\n  font-weight: 700 !important;\n  font-size: 14px;\n  line-height: 16px;\n}\n\n.start,\n.end {\n  top: 216px;\n  font-size: 16px;\n}\n\n.start {\n  left: 62px;\n}\n\n.end {\n  width: 130px;\n  text-align: center;\n  right: 0;\n}\n</style>\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!./MirtGaugeChart.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!./MirtGaugeChart.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./MirtGaugeChart.vue?vue&type=template&id=452cd2a9&\"\nimport script from \"./MirtGaugeChart.vue?vue&type=script&lang=js&\"\nexport * from \"./MirtGaugeChart.vue?vue&type=script&lang=js&\"\nimport style0 from \"./MirtGaugeChart.vue?vue&type=style&index=0&module=true&lang=css&\"\n\n\n\n\nfunction injectStyles (context) {\n  \n  this[\"$style\"] = (style0.locals || style0)\n\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  injectStyles,\n  null,\n  null\n  \n)\n\nexport default component.exports","export { default } from  \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-0-0!../../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-0-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-0-2!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./MirtGaugeChart.vue?vue&type=style&index=0&module=true&lang=css&\"; export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-0-0!../../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-0-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-0-2!../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./MirtGaugeChart.vue?vue&type=style&index=0&module=true&lang=css&\""],"sourceRoot":""}