vgauge-edited-version
Version:
edited vgauge version from amroessam/vgauge
1 lines • 4.81 kB
JSON
{"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"]}]}