1.1.2 • Published 9 years ago
component-gauge v1.1.2
gauge 
A simple circular gauge indicator component.
Installation
$ npm install component-gauge
Or use standalone browser version gauge.min.js, using global Gague class.
Don’t forget to include index.css and arrow.svg.
Example
var Gauge = require('component-gauge');
var q = require('query');
var gauge = new Gauge(q('.gauge'), options);API
new Gauge(el, options)
Create a new Gauge component.
Gauge.prototype.update()
Update gauge rings, marks & labels position.
Gauge.prototype.value
Current gauge percent value, 0..100.
Options
| Param | Default | Description |
|---|---|---|
angle | [150, 390] | Start and end angles defining gauge’s aperture |
values | {0: 'start', 100: 'end'} | Dict of labels corresponding to percentage values |
colors | {0:'gray', 70:'orange', 90:'red'} | Dict of colors corresponding to percentage values |
marks | [0,10,..100] | List of marks, corresponding to percentage |
value | 0 | Initial value |
CSS
There are a bunch of styles you can tack to adjust gauge view. Look into index.css. For example, you can adjust arrow shape and visibility, inset/outset of values and marks.
