{"remainingRequest":"/Users/filsuck/.config/yarn/global/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/filsuck/web/experiment/vgauge/src/VGauge.vue?vue&type=style&index=0&id=d8d8e05e&scoped=true&lang=css&","dependencies":[{"path":"/Users/filsuck/web/experiment/vgauge/src/VGauge.vue","mtime":1586333542615},{"path":"/Users/filsuck/.config/yarn/global/node_modules/css-loader/dist/cjs.js","mtime":1580983063578},{"path":"/Users/filsuck/.config/yarn/global/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":1580983063886},{"path":"/Users/filsuck/.config/yarn/global/node_modules/postcss-loader/src/index.js","mtime":1580983063765},{"path":"/Users/filsuck/.config/yarn/global/node_modules/cache-loader/dist/cjs.js","mtime":1580983063376},{"path":"/Users/filsuck/.config/yarn/global/node_modules/vue-loader/lib/index.js","mtime":1580983063886}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:CgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKDQouZ2F1Z2UtdGl0bGUgc3BhbiB7DQogIGRpc3BsYXk6IGlubGluZTsNCiAgdGV4dC1hbGlnbjogY2VudGVyOw0KfQ0K"},{"version":3,"sources":["VGauge.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkIA;AACA;AACA;AACA","file":"VGauge.vue","sourceRoot":".","sourcesContent":["<template>\r\n  <div>\r\n    <div v-if=\"gaugeTitle\" class=\"gauge-title\">\r\n      <span ref=\"gauge-value\" v-if=\"top\" :class=\"gaugeValueClass\"></span>\r\n      <span v-if=\"top\" :class=\"gaugeValueClass\">{{unit}}</span>\r\n    </div>\r\n    <canvas ref=\"gauge\" :height=\"height\" :width=\"width\"></canvas>\r\n    <div v-if=\"gaugeTitle\" class=\"gauge-title\">\r\n      <span ref=\"gauge-value\" v-if=\"!top\" :class=\"gaugeValueClass\"></span>\r\n      <span v-if=\"!top\" :class=\"gaugeValueClass\">{{unit}}</span>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { Gauge, Donut } from \"gaugeJS/dist/gauge.min\";\r\nexport default {\r\n  name: \"VGauge\",\r\n  props: {\r\n    unit: {\r\n      type: String,\r\n      default: \"\"\r\n    },\r\n    gaugeTitle: {\r\n      type: Boolean,\r\n      default: true\r\n    },\r\n    height: {\r\n      type: String,\r\n      default: \"200px\"\r\n    },\r\n    width: {\r\n      type: String,\r\n      default: \"200px\"\r\n    },\r\n    decimalPlace: {\r\n      type: Number,\r\n      default: 0\r\n    },\r\n    gaugeValueClass: {\r\n      type: String,\r\n      default: \"\"\r\n    },\r\n    top: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n    maxValue: {\r\n      type: Number,\r\n      default: 100\r\n    },\r\n    minValue: {\r\n      type: Number,\r\n      default: 0\r\n    },\r\n    options: {\r\n      type: Object,\r\n      default: function() {\r\n        return {\r\n          angle: 0.15,\r\n          lineWidth: 0.44,\r\n          radiusScale: 1,\r\n          pointer: {\r\n            length: 0.6,\r\n            strokeWidth: 0.035,\r\n            color: \"#000000\"\r\n          },\r\n          limitMax: false,\r\n          limitMin: false,\r\n          colorStart: \"#6FADCF\",\r\n          colorStop: \"#8FC0DA\",\r\n          strokeColor: \"#E0E0E0\",\r\n          generateGradient: true,\r\n          highDpiSupport: true\r\n        };\r\n      }\r\n    },\r\n    animationSpeed: {\r\n      type: Number,\r\n      default: 10\r\n    },\r\n    initialValue: {\r\n      type: Number,\r\n      default: 0\r\n    },\r\n    value: {\r\n      type: Number,\r\n      default: 50\r\n    },\r\n    donut: {\r\n      type: Boolean,\r\n      default: false\r\n    }\r\n  },\r\n  data() {\r\n    return {\r\n      gauge: null\r\n    };\r\n  },\r\n  mounted() {\r\n    this.initializeGauge();\r\n  },\r\n  watch: {\r\n    value: function(newVal) {\r\n      this.gauge.set(newVal);\r\n    }\r\n  },\r\n  methods: {\r\n    initializeGauge() {\r\n      this.gauge = this.donut\r\n        ? new Donut(this.$refs.gauge)\r\n        : new Gauge(this.$refs.gauge);\r\n      this.gauge.maxValue = this.maxValue;\r\n      this.gauge.setMinValue(this.minValue);\r\n      this.gauge.animationSpeed = this.animationSpeed;\r\n      this.gauge.setOptions(this.options);\r\n      this.gauge.setTextField = this.gaugeTitle\r\n      if(this.gaugeTitle == false) {\r\n        this.gauge.setTextField();\r\n      } else {\r\n                this.gauge.setTextField(this.$refs[\"gauge-value\"], this.decimalPlace);\r\n      }\r\n      this.gauge.gaugeTitle \r\n      this.gauge.set(this.value);\r\n    }\r\n  }\r\n};\r\n</script>\r\n\r\n<style scoped>\r\n.gauge-title span {\r\n  display: inline;\r\n  text-align: center;\r\n}\r\n</style>\r\n"]}]}