https://mattlewis92.github.io/angular-gauge/
A tiny angular 15.0+ wrapper for https://github.com/naikus/svg-gauge
| angular-gauge | Angular |
|---|---|
| <=3.x.x | <=9 |
| 4.x.x | 10 |
| 5.x.x | 15+ |
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.
<script src="node_modules/angular-gauge/bundles/angular-gauge.umd.js"></script>
<script>
// everything is exported `angular-gauge` namespace
</script>
All documentation is auto-generated from the source via compodoc and can be viewed here: https://mattlewis92.github.io/angular-gauge/docs/
- Install Node.js and NPM (should come with)
- Install local dev dependencies:
npm installwhile current directory is this repo
Run npm start to start a development server on port 8000 with auto reload + tests.
Run npm test to run tests once or npm run test:watch to continually run tests.
npm run releaseMIT