Switch branches/tags
Nothing to show
Clone or download
Matt Lewis
Latest commit d5b19a9 May 5, 2018

README.md

angular gauge

Build Status codecov npm version devDependency Status GitHub issues GitHub stars GitHub license

Demo

https://mattlewis92.github.io/angular-gauge/

Table of contents

About

A tiny angular 5.0+ wrapper for https://github.com/naikus/svg-gauge

Installation

Install through npm:

npm install --save angular-gauge

Then include in your apps module:

import { Component, NgModule } from '@angular/core';
import { GaugeModule } from 'angular-gauge';

@NgModule({
  imports: [
    GaugeModule.forRoot()
  ]
})
export class MyModule {}

By default no styling is included with the gauge so you need to define some global styles:

mwl-gauge {
  width: 150px;
  height: 150px;
  display: block;
  padding: 10px;
}
mwl-gauge > .gauge > .dial {
  stroke: #eee;
  stroke-width: 2;
  fill: rgba(0,0,0,0);
}
mwl-gauge > .gauge > .value {
  stroke: rgb(47, 227, 255);
  stroke-width: 2;
  fill: rgba(0,0,0,0);
}
mwl-gauge > .gauge > .value-text {
  fill: rgb(47, 227, 255);
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1em;
}

Finally use in one of your apps components:

import { Component } from '@angular/core';

@Component({
  template: `
    <mwl-gauge
      [max]="100"
      [dialStartAngle]="-90"
      [dialEndAngle]="-90.001"
      [value]="50"
      [animated]="true"
      [animationDuration]="1">
    </mwl-gauge>
  `
})
export class MyComponent {}

You may also find it useful to view the demo source.

This lib is just a tiny wrapper over the excellent svg-gauge library.

Usage without a module bundler

<script src="node_modules/angular-gauge/bundles/angular-gauge.umd.js"></script>
<script>
    // everything is exported `angular-gauge` namespace
</script>

Documentation

All documentation is auto-generated from the source via compodoc and can be viewed here: https://mattlewis92.github.io/angular-gauge/docs/

Development

Prepare your environment

  • Install Node.js and NPM (should come with)
  • Install local dev dependencies: npm install while current directory is this repo

Development server

Run npm start to start a development server on port 8000 with auto reload + tests.

Testing

Run npm test to run tests once or npm run test:watch to continually run tests.

Release

npm run release

License

MIT