vgauge

A Vue Wrapper to GaugeJS

If this package helps you, consider buying me a beer 😁

Play

Live Demo

Installing

npm i vgauge --save

or

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vgauge@latest"></script>

Usage

By Importing

import VGauge from 'vgauge';

export default {
  components: {
    VGauge
  },
  data() {
    return {
      value: 35
    };
  }
};

<v-gauge :value="value" />

By Including

<div id="app">
  <h3>Will not stop at 100</h3>
  <v-gauge :value="x" top></v-gauge>
  <h3>Will stop at 100</h3>
  <v-gauge :value="y" unit="%"></v-gauge>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      x: 0,
      y: 0
    },
    mounted() {
      setInterval(() => {
        this.x += 4;
      }, 1000);
      setInterval(() => {
        if (this.y < 100) this.y += 5;
      }, 1000);
    }
  });
</script>

Props

You can use the following props

| Name | Description | Type | Default | | --------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------: | -------------------: | | options | GaugeJS render options, check gaugejs API | Object | Basic gaugejs Object | | donut | Renders a donut instead of a gauge #3 | Boolean | false | | height | height of the gauge in pixels | String | 200px | | width | width 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 | | maxValue | Max value for the gauge to display | Number | 100 | | decimalPlace | Show decimal place values to which extent | Number | 0 | | top | To have the gauge value on top of the gauge | Boolean | false | | gaugeValueClass | Class to apply to gauge value (Must use /deep/ in css selector) | String | * | | animationSpeed | Animation speed for gauge | Number | 10 |

Authors

• Amr Essam - Github

License

This project is licensed under the MIT License

Acknowledgments

• Vue
• GaugeJS