Skip to content

amroessam/vgauge

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

68 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vgauge npm

A Vue Wrapper to GaugeJS

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

paypal

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

License

This project is licensed under the MIT License

Acknowledgments