vgauge

WebJar for vgauge

License	MIT
GroupId	org.webjars.npm
ArtifactId	vgauge
Last Version	1.2.12
Release Date	Mar 9, 2021
Type	jar
Description	vgauge WebJar for vgauge
Project URL	https://www.webjars.org
Source Code Management	https://github.com/amroessam/vgauge

Download vgauge

Filename	Size
vgauge-1.2.12.pom
vgauge-1.2.12.jar	29 KB
vgauge-1.2.12-sources.jar	22 bytes
vgauge-1.2.12-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/vgauge/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>vgauge</artifactId>
    <version>1.2.12</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/vgauge/
implementation 'org.webjars.npm:vgauge:1.2.12'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/vgauge/
implementation ("org.webjars.npm:vgauge:1.2.12")

Apache Buildr

'org.webjars.npm:vgauge:jar:1.2.12'

Apache Ivy

<dependency org="org.webjars.npm" name="vgauge" rev="1.2.12">
  <artifact name="vgauge" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='vgauge', version='1.2.12')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "vgauge" % "1.2.12"

Leiningen

[org.webjars.npm/vgauge "1.2.12"]

Dependencies

compile (1)

Group / Artifact	Type	Version
org.webjars.npm : gaugeJS	jar	[1.3.6,2)

Project Modules

There are no modules declared in this project.

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

Versions

Version
1.2.12 Mar 9, 2021