# flat-gauge-js

> a flat design gauges js library

Latest version **0.1.32** (published 2019-03-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install flat-gauge-js
pnpm add flat-gauge-js
yarn add flat-gauge-js
bun add flat-gauge-js
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.32 |
| Published | 2019-03-20 |
| First published | 2017-05-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 2.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Ran Buchnik |
| Maintainers | ranbuch |
| Keywords | gauge, javascript, library, flat design |

## Links

- npm: https://www.npmjs.com/package/flat-gauge-js
- Repository: https://github.com/ranbuch/flat-gauge-js
- Issues: https://github.com/ranbuch/flat-gauge-js/issues
- npm.io page: https://npm.io/package/flat-gauge-js

## Recent versions

- 0.1.32 (latest) — 2019-03-20
- 0.1.31 — 2019-03-19
- 0.1.30 — 2019-02-21
- 0.1.29 — 2019-02-20
- 0.1.28 — 2019-01-04
- 0.1.27 — 2018-01-07
- 0.1.26 — 2018-01-05
- 0.1.25 — 2018-01-05
- 0.2.0 — 2017-10-12
- 0.1.24 — 2017-09-11
- 0.1.22 — 2017-06-28
- 0.1.21 — 2017-06-28
- 0.1.20 — 2017-06-28
- 0.1.18 — 2017-06-27
- 0.1.17 — 2017-06-27
- … 12 more at https://npm.io/package/flat-gauge-js/versions

## README

# flat-gauge-js

## installation
npm
```
npm install flat-gauge-js --save
```
bower
```
bower install flat-gauge-js -S
```


include script:
```
<script type="text/javascript" src="node_modules/flat-gauge-js/dist/bundle.js"></script>
```

## Examples
[link](https://ranbuch.github.io/flat-gauge-js/)


## Spinner Example
```javascript
var target = document.getElementById('target');

new FlatGauge.Spinner(target, {
    rotationSpeed: 1000,
    title: {
      text: 'Spinning'
    }
  });
```
### Options
```javascript
{
    colors: {
        default: string;
        active: string;
        inactive: string;
    };
    activeDegree: number;
    radius: number;
    strokeWidth: number;
    rotationSpeed: number;
    title: {
        text: string;
        fontSize: number;
        fontFamily: string;
        lineHeight: number;
        fontWeight: string;
        letterSpacing: string;
    };
    animationDuration: number;
    highlight: boolean;
}
```

## Tune Example
```javascript
var target = document.getElementById('target');

var tune = new FlatGauge.Tune(target, {
    rotationSpeed: 1000,
    title: {
      text: 'Tune'
    }
  });

setTimeout(() => {
    tune.update({iconOptions: {degree: 0, src: '{pathToImage}'},edges: true, hideBottom: true,needleOptions: {edges: false,minMaxVal: {value: 25, min: 40, max: 80}}});
}, 5000);
```
### Options
```javascript
{
    needleOptions: {
        color: string;
        minMaxVal: {
            min: number;
            max: number;
            value: number;
        };
        radius: number;
        scale: number;
        animationDuration: number;
    };
    iconOptions: {
        degree: number;
        radius: number;
        animationDuration: number;
        src: string;
        dimensions: {
            width: number;
            height: number;
        },
        opacity: number;
    };
    colors: {
        default: string;
        active: string;
        inactive: string;
    };
    strokeWidth: number;
    animationDuration: number;
    radius: number;
    showEdges: boolean;
    hollowEdges: number; // ENUM: None = 0,Left = 1,Right = 2,Both = 3
    showIcon: boolean;
    hideBottom: boolean;
}

```

## Multi-Tune Example
```javascript
var target = document.getElementById('target');

var multiTune = new FlatGauge.MultiTune(target, {
    rotationSpeed: 1000
  });
```
### Options
```javascript
{
    needleOptions: {
        color: string;
        minMaxVal: {
            min: number;
            max: number;
            value: number;
        };
        radius: number;
        scale: number;
        animationDuration: number;
    };
    segments: [
        min: number;
        max: number;
        value?: number;
    ];
    iconOptions?: {
        degree: number;
        radius: number;
        animationDuration: number;
        src: string;
        dimensions: {
            width: number;
            height: number;
        },
        opacity: number;
    };
    colors?: {
        default: string;
        active: string;
        inactive: string;
    };
    strokeWidth?: number;
    animationDuration?: number;
    radius: number;
    showEdges: boolean;
    showIcon: boolean;
    hideBottom: boolean;
    backgroundColor?: string;
    hollowEdgesBgColor?: string;
    hollowEdges?: number; // ENUM: None = 0,Left = 1,Right = 2,Both = 3;
}
```

## Timer Example
```javascript
var target = document.getElementById('target');

var timer = new FlatGauge.Timer(target, {
    animationDuration: 500,
    time: {
        hours: 2,
        minutes: 45,
        seconds: 3
    },
    percentage: 33
});
```
### Options
```javascript
{
    colors: {
        default: string;
        active: string;
        inactive: string;
    };
    strokeWidth: number;
    time: {
        hours: number,
        minutes: number,
        seconds: number,
    };
    animationDuration: number;
    radius: number;
    showEdges: boolean;
    title: {
        text: string;
        fontSize: number;
        fontFamily: string;
        lineHeight: number;
        fontWeight: string;
        letterSpacing: string;
    };
    percentage: number;
}
```

## AM-PM Example (Not Ready)
```javascript
var target = document.getElementById('target');
var ampm = new FlatGauge.AmPm(target);
```
### Options
```javascript
{
    fromTo: {
        from: string;
        to: string;
    };
    needleOptions: {
        color: string;
        minMaxVal: {
            min: number;
            max: number;
            value: number;
        };
        radius: number;
        scale: number;
        animationDuration: number;
    };
    colors: {
        default: string;
        active: string;
        inactive: string;
    };
    radius: number;
    minMaxValAm: {
        min: number;
        max: number;
        value: number;
    };
    minMaxValPm: {
        min: number;
        max: number;
        value: number;
    };
    animationDuration: number;
    strokeWidth: number;
}
```

## Range Example
```javascript
var target = document.getElementById('target');
var range = new FlatGauge.Range(target);
```
### Options
```javascript
{
    colors?: ColorPalette;
    minMaxVal: MinMaxVal;
    strokeWidth?: number;
    animationDuration?: number;
    radius: number;
    showEdges: boolean;
    hollowEdges?: SideState;
    hideBottom: boolean;
    title?: InnerText;
    highlight?: boolean;
}
```

## Typescript and ES6 Support
```javascript
import { Timer } from 'flat-gauge-js';
export class FlatGaugeTimerComponent {
  timer: Timer;
  constructor() { 
    var target = document.getElementById('target');
    this.timer = new Timer(target, {
        animationDuration: 500,
        time: {
          hours: 2,
          minutes: 45,
          seconds: 3
        },
        percentage: 33
      });
    }
  }
}
```

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