Added donut support

Author: amroessam

README.md

@@ -77,8 +77,9 @@ You can use the following props
 | Name            | Description                                                                                                                          |    Type |              Default |
 | --------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------: | -------------------: |
 | options         | GaugeJS render options, check gaugejs [API](http://bernii.github.io/gauge.js/)                                                       |  Object | Basic gaugejs Object |
-| height          | height of the gauge in pixels                                                                                                                  |  string |                200px |
-| unit            | unit to show after value                                                                                                             |  string |                   '' |
+| donut           | Renders a donut instead of a gauge [#3](https://github.com/amroessam/vgauge/issues/3#issue-482228167)                                | Boolean |                false |
+| height          | height of the gauge in pixels                                                                                                        |  String |                200px |
+| unit            | unit to show after value                                                                                                             |  String |                   '' |
 | initialValue    | Initial value to display on the Gauge                                                                                                |  Number |                    0 |
 | value           | Value to display/watch                                                                                                               |  Number |                   50 |
 | minValue        | Min value for the gauge to display                                                                                                   |  Number |                    0 |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vgauge",
-  "version": "1.2.5-rc.2",
+  "version": "1.2.6",
   "description": "",
   "main": "dist/VGauge.umd.js",
   "module": "dist/VGauge.esm.js",
@@ -44,6 +44,8 @@
     "vue",
     "gauge",
     "gauge.js",
-    "gaugejs"
+    "gaugejs",
+    "donut",
+    "chart"
   ]
 }

src/VGauge.vue

@@ -13,17 +13,17 @@
 </template>
 
 <script>
-import { Gauge } from "gaugeJS/dist/gauge.min";
+import { Gauge, Donut } from "gaugeJS/dist/gauge.min";
 export default {
-  name: 'VGauge',
+  name: "VGauge",
   props: {
     unit: {
       type: String,
-      default: ''
+      default: ""
     },
     height: {
       type: String,
-      default: '200px'
+      default: "200px"
     },
     decimalPlace: {
       type: Number,
@@ -78,6 +78,10 @@ export default {
     value: {
       type: Number,
       default: 50
+    },
+    donut: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -95,24 +99,23 @@ export default {
   },
   methods: {
     initializeGauge() {
-      this.gauge = new Gauge(this.$refs.gauge);
+      this.gauge = this.donut
+        ? new Donut(this.$refs.gauge)
+        : new Gauge(this.$refs.gauge);
       this.gauge.maxValue = this.maxValue;
       this.gauge.setMinValue(this.minValue);
       this.gauge.animationSpeed = this.animationSpeed;
       this.gauge.setOptions(this.options);
-      this.gauge.setTextField(
-        this.$refs['gauge-value'],
-        this.decimalPlace
-      );
+      this.gauge.setTextField(this.$refs["gauge-value"], this.decimalPlace);
       this.gauge.set(this.value);
     }
   }
 };
 </script>
 
 <style scoped>
-  .gauge-title span{
-    display: inline;
-    text-align: center;
-  }
+.gauge-title span {
+  display: inline;
+  text-align: center;
+}
 </style>