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.

sintylapse/gauge