# component-gauge

> Simple circular gauge indicator component

Latest version **1.1.2** (published 2015-01-18) · Unlicensed license · 0 weekly downloads

## Install

```sh
npm install component-gauge
pnpm add component-gauge
yarn add component-gauge
bun add component-gauge
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2015-01-18 |
| First published | 2015-01-17 |
| Weekly downloads | 0 |
| License | Unlicensed |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 15 |
| Author | Deema Ywanov |
| Maintainers | dfcreative |
| Keywords | gauge, component, indicator, scale, progress |

## Links

- npm: https://www.npmjs.com/package/component-gauge
- Repository: https://github.com/dfcreative/gauge
- Issues: https://github.com/dfcreative/gauge/issues
- npm.io page: https://npm.io/package/component-gauge

## Dependencies (3)

- [mucss](https://npm.io/package/mucss.md) ^0.5.9
- [xtend](https://npm.io/package/xtend.md) ^4.0.0
- [component-emitter](https://npm.io/package/component-emitter.md) ^1.1.3

## Recent versions

- 1.1.2 (latest) — 2015-01-18
- 1.1.1 — 2015-01-18
- 1.1.0 — 2015-01-18
- 1.0.0 — 2015-01-17

## 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 href="UNLICENSE"><img src="http://upload.wikimedia.org/wikipedia/commons/6/62/PD-icon.svg" width="20"/></a>

A simple circular gauge indicator component.

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

[Live demo](https://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/)

---
_Source: https://npm.io/package/component-gauge · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._