https://github.com/dy/gauge

Circular gauge indicator component
https://github.com/dy/gauge

Last synced: 9 months ago
JSON representation

Circular gauge indicator component

• Host: GitHub
• URL: https://github.com/dy/gauge
• Owner: dy
• License: unlicense
• Created: 2015-01-17T16:34:28.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2015-01-18T07:13:18.000Z (over 11 years ago)
• Last Synced: 2024-12-29T00:12:21.461Z (over 1 year ago)
• Language: JavaScript
• Homepage: https://dy.github.io/gauge/test
• Size: 211 KB
• Stars: 15
• Watchers: 5
• Forks: 7
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# gauge [![Code Climate](https://codeclimate.com/github/dfcreative/gauge/badges/gpa.svg)](https://codeclimate.com/github/dfcreative/gauge) ![size](https://img.shields.io/badge/size-2.4kb-brightgreen.svg) 

A simple circular gauge indicator component.

![Preview](https://cdn.rawgit.com/dfcreative/gauge/master/preview.png)

[Live demo](https://cdn.rawgit.com/dfcreative/gauge/d9bcf65f3bf0a4e6e52fb8add5bc6f5dc3bba1c5/test/index.html).

## Installation

`$ npm install component-gauge`

Or use standalone browser version [gauge.min.js](gauge.min.js), using global `Gague` class.

Don’t forget to include [index.css](gauge.min.js) and [arrow.svg](arrow.svg).

## Example

```js

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](index.css).

For example, you can adjust arrow shape and visibility, inset/outset of values and marks.

[![NPM](https://nodei.co/npm/component-gauge.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/component-gauge/)