angular gauge

Demo

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

Table of contents

• About
• Compatibility
• Installation
• Documentation
• Development
• License

About

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

Compatibility

angular-gauge	Angular
<=3.x.x	<=9
4.x.x	10
5.x.x	15+

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