amroessam / vgauge Goto Github PK

View Code? Open in Web Editor NEW

52.0 3.0 9.0 6.67 MB

A wrapper library for GaugeJS

License: MIT License

JavaScript 41.39% Vue 58.61%

vue vuejs js charts chartsjs gauge gaugejs

vgauge's Introduction

vgauge

A Vue Wrapper to GaugeJS

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

Play

Live Demo

Installing

npm i vgauge --save

<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

vgauge's People

Contributors

Stargazers

Watchers

Forkers

iqthink rcoundon jfaquinojr massimiliano76 suryaadtmaja corinnerusso chiu0602 0xdaksh vishnubhadoriya

vgauge's Issues

gaugeValueClass is not working

I tried to add gaugeValueClass to hide the text value but css is not working

Canvas forced to be square means it can be clipped at the sides

There is currently only a height prop which means that the canvas that holds the gauge is always square and can therefore be clipped at the edges

Failed to execute 'addColorStop' on 'CanvasGradient

Possible dynamic maxValue, minValue, labels and zones?

Hello,
I'm using v-gauge for showing data retrieved from server. It's working ok if I set the options, maxValue and minValue as static values. But I'd want to be able to modify these values with the information from the server. Right now, I'm assigning the gauge value this way:

<v-gauge class="v-gauge" :value="getValue()" :options="options" :animationSpeed="15" :minValue="0" :maxValue="300" gaugeValueClass="gauge-value" unit="mg/dl" :top="true"/>

getValue () { return parseInt(this.getStatus.value); },

Is there any chance to be able to assign new values to the staticLabels.labels, staticZones, minValue and maxValue when receiving data from the server (as I'm doing now with "value" prop)?

Thanks!

Props Options

do you have an example of using the props options please?

Other gauges types

It would be nice to have other gauges types for i.e 'Donut' which is available in the Gauge.js library.

Example for gaugeValueClass

Could I please get an example for the gaugeValueClass? I can't figure out how to use it in any way and I'm not even sure if it does what I want it to do. I want to change the style of my value text. Right now it's ugly (small and white) I want to make it bigger and move it in the middle of the gauge. Please help me.

Thanks

Dynamic change max value

I am trying to change the gauge max value based on a dynamic input. I am trying to link this input these two parameters. In the index.js file I am trying to alter staticZone value max: 15, this alters where the gauge color bar starts and ends

staticZones: [{strokeStyle: "#b8b8b8", min: 0, max: 15} ],

and in index.html I am trying to change value :max-value=15 which changes the maximum value the gauge counts down from. I want to make them both equal to the same value and change based on input from Node-Red.

<v-gauge 
   :value="countDownTimeData" unit="seconds" 
   :options="optionsCountdownTimer" 
   :animation-speed=10
   :min-value=0
   :max-value=15           
   :width="widthCountdownTime" />               
</td></tr>

I can get the gauge to work fine if I hard code in the number values, but if I try to make them variable then it wont work.

I have tried almost every possible permutation I can think of from v:bind to v:if to using mostache braces{{}} to using functions from within computed and methods, but I can't get anything to work properly.

If you have any tips on how I can change these parameters that would be great.

Center text in middle of gauge

Is there any way to disable the pointer and center the text?

I have added a gaugeValueClass, but it's not responding to any margin or padding properties

* >>> .GAUGE{
  
  font-weight: bold;
  padding-top:"-900px" !important;
}

<v-gauge :value="value" width="220px" :options="opts" gaugeValueClass="GAUGE"/>

Compatibility with Vue3

Hey, I tried to use it with the Vue3, but see that its not compatible.

With Vue3 its giving following error - _"Uncaught (in promise) TypeError: _vm.self is undefined".

It would be great if you can add the Vue3 compatibility.

Window not defined error

I'm having the following error when going directly to a route where a gauge is displayed:

ReferenceError
window is not defined

all frames
internal/modules/cjs/loader.js:1147:30
Module._compile
internal/modules/cjs/loader.js:1167:10
Module._extensions..js
internal/modules/cjs/loader.js:996:32
Module.load
internal/modules/cjs/loader.js:896:14
Module._load
internal/modules/cjs/loader.js:1036:19
Module.require
internal/modules/cjs/helpers.js:72:18
require
webpack:/external "vgauge":1:
Object.vgauge
webpack/bootstrap:25:
__webpack_require_

Giving just a Missing stack frames at all above frames.
I also noticed it happens on import.

Anyone else with the same issue? Ideally with a solution?

further fix on memory leak

Please use latest gaugeJS build (v1.3.7). After that, the library will be leak free.

@amroessam Thanks for your excellent work!

Running multiple charts on same page

Found your vgauge chart package for use with Vue but I can not figure out how to run two charts on the same page if they have different styles - for example I want one solid grey count down timer and the other to show a measurement within a range with the red/yellow/green sections of the chart. Like this

Is it possible to do this with vgauge? With the gaugeJS chart using html/js/css I could just set up two functions with different options in each and call up the one I want, but I can't figure out how to do this with Vue as all charts seem to reference the same data & options (it seems I can not have two options in the data file), which implies all charts on that webpage need look the same. I am new to Vue so I have probably missed something, any clarification appreciated.