ngx-mgauge v0.4.0

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-mgauge

Import 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

Options

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)