Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/amroessam/vgauge
A wrapper library for GaugeJS
https://github.com/amroessam/vgauge
charts chartsjs gauge gaugejs js vue vuejs
Last synced: about 1 month ago
JSON representation
A wrapper library for GaugeJS
- Host: GitHub
- URL: https://github.com/amroessam/vgauge
- Owner: amroessam
- License: mit
- Created: 2019-02-07T04:08:31.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-30T06:02:00.000Z (over 1 year ago)
- Last Synced: 2024-03-24T01:01:19.109Z (2 months ago)
- Topics: charts, chartsjs, gauge, gaugejs, js, vue, vuejs
- Language: Vue
- Size: 6.51 MB
- Stars: 50
- Watchers: 3
- Forks: 9
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-vue - vgauge - A Vue Wrapper to GaugeJS - Create beautiful gauges (Components & Libraries / UI Components)
- awesome-vue - vgauge - A Vue Wrapper to GaugeJS - Create beautiful gauges (Components & Libraries / UI Components)
- awesome-vue - vgauge - A Vue Wrapper to GaugeJS - Create beautiful gauges (Components & Libraries / UI Components)
- awesome-vue - vgauge - A Vue Wrapper to GaugeJS - Create beautiful gauges (Components & Libraries / UI Components)
- awesome-vue - vgauge - A Vue Wrapper to GaugeJS - Create beautiful gauges (Components & Libraries / UI Components)
- awesome-vue - vgauge - A Vue Wrapper to GaugeJS - Create beautiful gauges (Components & Libraries / UI Components)
- awesome-vue - vgauge - A Vue Wrapper to GaugeJS - Create beautiful gauges (Components & Libraries / UI Components)
- awesome-vue - vgauge - A Vue Wrapper to GaugeJS - Create beautiful gauges (Components & Libraries / UI Components)
- awesome-vue - vgauge - A Vue Wrapper to GaugeJS - Create beautiful gauges (Components & Libraries / UI Components)
- awesome-vue - vgauge - A Vue Wrapper to GaugeJS - Create beautiful gauges (UI Components / Charts)
- awesome-vue - vgauge - A Vue Wrapper to GaugeJS - Create beautiful gauges (Components & Libraries / UI Components)
README
# vgauge 
A Vue Wrapper to [GaugeJS](https://github.com/bernii/gauge.js/)
### If this package helps you, consider buying me a beer 😁
[](https://www.paypal.me/amroessam/5)
### Play
[Live Demo](https://jz3qoxny63.codesandbox.io/)
### Installing
```shell
npm i vgauge --save
```
or
```html
```
### Usage
## By Importing
```js
import VGauge from 'vgauge';
export default {
components: {
VGauge
},
data() {
return {
value: 35
};
}
};
```
```html
```
## By Including
```html
Will not stop at 100
Will stop at 100
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);
}
});
```
## Props
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 |
| 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 |
| 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/](https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors) in css selector) | String | \* |
| animationSpeed | Animation speed for gauge | Number | 10 |
## Authors
- **Amr Essam** - [Github](https://github.com/amroessam)
## License
This project is licensed under the MIT License
## Acknowledgments
- [Vue](https://github.com/vuejs/vue)
- [GaugeJS](https://github.com/bernii/gauge.js/)