Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hellocomet/vue-svg-gauge
Customizable gauge component with gradients and animations for VueJs
https://github.com/hellocomet/vue-svg-gauge
Last synced: about 1 month ago
JSON representation
Customizable gauge component with gradients and animations for VueJs
- Host: GitHub
- URL: https://github.com/hellocomet/vue-svg-gauge
- Owner: hellocomet
- License: mit
- Created: 2019-02-20T10:08:32.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T18:54:46.000Z (about 2 years ago)
- Last Synced: 2023-11-03T22:21:54.203Z (about 1 year ago)
- Language: Vue
- Homepage: https://hellocomet.github.io/vue-svg-gauge/
- Size: 1.36 MB
- Stars: 79
- Watchers: 5
- Forks: 22
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-svg-gauge
An easily customizable gauge for VueJS with gradients and animations
## Demo
You can find a demo [here](https://hellocomet.github.io/vue-svg-gauge/)
## Installation
`npm i vue-svg-gauge --save`
`yarn add -D vue-svg-gauge`
## Import
### ES6
The following examples can also be used with CommonJS by replacing ES6-specific syntax with CommonJS equivalents.
```js
import Vue from 'vue'
import { VueSvgGauge } from 'vue-svg-gauge'
new Vue({
components: {
VueSvgGauge,
}
})
```
### Globals as a pluggin
```js
import Vue from 'vue'
import App from './App.vue'
import VueSvgGauge from 'vue-svg-gauge'
Vue.use(VueSvgGauge)
new Vue({
render: h => h(App),
}).$mount('#app')
```
### Globals (via the script tag)
Add a script tag pointing to _dist/vue-svg-gauge.min.js_ after adding Vue.
```html
...
new Vue({
el: '#app'
})
```
## Usage
Once installed, it can be user in any template as
```html
```
## Props
| Props | Type | Value | Default |
|---|---|---|---|
| value | Number | Value of the gauge, must be contained between *min* and *max*. If not, it will be set to min if inferior, or max if superior | 70 |
| min | Number | Minimum value reachable | 0 |
| max | Number | Maximum value reachable | 100 |
| startAngle | Number | Start angle of the gauge. Can go from -360° to 360° but must be smaller than endAngle | -90 |
| endAngle | Number | End angle of the gauge. Can go from -360° to 360° but must be greater than startAngle | 90 |
| innerRadius | Number | inner radius that will determine the thickness of the gauge | 60 |
| separatorStep | Number | Number of steps between each separator (will display a separator each min + (n * separatorStep)). Won't display any if 0 or null | 10 |
| separatorThickness | Number | Thickness of the separators, unit is in degree | 4 |
| gaugeColor | String,Array | Color of the gauge, can either be a simple color or a gradient | [{ offset: 0, color: '#347AB0' }, { offset: 100, color: '#8CDFAD' }] |
| baseColor | String | Color of the empty gauge | #DDDDDD |
| scaleInterval | Number | Interval between the scale line, based on min and max. Won't display any if 0 or null | 5 |
| transitionDuration | Number | Transition duration time in ms. If set to `0`, there will be no transition | 1500 |
| easing | String | Animation easing option | Circular.Out |
_Notes_ :
- the reference angle is 0 on top of the gauge.
- you can find the documentation about the different animation functions [here](https://github.com/tweenjs/tween.js/blob/master/docs/user_guide.md)
## Slot
There is a main _slot_ allowing you to display any kind of html you want in your gauge.
### Example
```html
Let's make this fun !
```
```css
.inner-text {
// allow the text to take all the available space in the svg on top of the gauge
height: 100%;
width: 100%;
span {
max-width: 100px;
color: red;
// ...
}
}
```
## Dependencies
You will need to install ```vue ~2.5.22``` to use this package properly
Also vue-svg-gauge relies on the [**tweenJs**](https://github.com/tweenjs/tween.js/) library for animations.
Made with ❤️ at [**comet**](https://comet.co/)