ngx-mgauge - Angular library built with using ngx-library yeoman generator.
Demo
Checkout the live demo https://murek85.github.io/ngx-mgauge
Dependencies
- Angular (requires Angular 2 or higher, tested with 2.0.0)
Getting Started
Install npm module
Now install ngx-mgauge via:
npm install --save ngx-mgaugeImport the NgxMGaugeModule
Once installed you need to import the main module:
import { NgxMGaugeModule } from 'ngx-mgauge';The only remaining part is to list the imported module in your application module. The exact method will be slightly
different for the root (top-level) module for which you should end up with the code similar to (notice NgxMGaugeModule.forRoot()):
import { NgxMGaugeModule } from 'ngx-mgauge';
@NgModule({
declarations: [AppComponent, ...],
imports: [NgxMGaugeModule.forRoot(), ...],
bootstrap: [AppComponent]
})
export class AppModule {
}Other modules in your application can simply import NgxMGaugeModule:
import { NgxMGaugeModule } from 'ngx-mgauge';
@NgModule({
declarations: [OtherComponent, ...],
imports: [NgxMGaugeModule, ...],
})
export class OtherModule {
}Usage component in HTML
NgxMGaugeModule <ngx-mgauge> component
import { Component } from '@angular/core';
import { NgxMGaugeOptions } from 'ngx-mgauge';
@Component({
selector: 'app-component',
templateUrl: 'app.html'
})
export class AppComponent {
options: NgxMGaugeOptions;
constructor() {
this.options = new NgxMGaugeOptions();
this.options.type = 'arch';
this.options.cap = 'round';
this.options.size = 150;
this.options.thick = 12;
this.options.foregroundColor = '#1e88e5';
this.options.backgroundColor = '#e4e4e4';
this.options.showExtremum = false;
}
}<ngx-mgauge [value]="value"
[label]="parameter"
[append]="unit"
[options]="options">
</ngx-mgauge>Configuration Properties
| Name | Default value | Possible values |
|---|---|---|
label |
undefined |
Any String |
append |
undefined |
Any string |
prepend |
undefined |
Any String |
value* |
undefined |
Any numeric value |
min |
0 |
Any numeric value |
max |
100 |
Any numeric value |
options* |
none |
{} |
thresholds |
none |
{} |
Options
| Name | Default value | Possible values |
|---|---|---|
size |
150 |
Positive Integer |
type |
"arch" |
"full", "semi", "arch"
|
cap |
"round" |
"round", "butt"
|
thick |
12 |
Any Positive Integer |
foregroundColor |
#1e88e5 |
Any color value string |
backgroundColor |
#e4e4e4 |
Any color value string |
fillColor |
#dcedc8 |
Any color value string |
showExtremum |
true |
Show Min and Max value |
import { Component } from '@angular/core';
import { NgxMGaugeOptions } from 'ngx-mgauge';
@Component({ ... })
export class AppComponent {
options: NgxMGaugeOptions;
constructor() {
this.options = new NgxMGaugeOptions();
this.options.type = 'arch';
this.options.cap = 'round';
this.options.size = 150;
this.options.thick = 12;
this.options.foregroundColor = '#1e88e5';
this.options.backgroundColor = '#e4e4e4';
this.options.fillColor = '#dcedc8';
this.options.showExtremum = false;
}
}<ngx-mgauge ... [options]="options"></ngx-mgauge>Configure Threshold Color Ranges
@Component({ ... })
export class AppComponent {
...
thresholdsConfig = {
0: {color: '#FB8C00'},
30: {color: '#7CB342'},
70: {color: '#e53935'}
};
...
}<ngx-mgauge ... [thresholds]="thresholdsConfig"></ngx-mgauge>License
Copyright (c) 2017 Marcin Murawski. Licensed under the MIT License (MIT)
