/**
 * Angular 2 decorators and services
 */ import { Component , Input , OnChanges , OnInit , ViewChild } from '@angular/core' ; import * as GaugeChart from 'gauge-chart' ; /**
 * GaugeChart Component
 */ @ Component ( { selector : 'gauge-chart' , templateUrl : './gauge-chart.component.html' , styleUrls : [ './gauge-chart.component.scss' ] , } ) export class GaugeChartComponent implements OnInit , OnChanges { @ ViewChild ( 'gaugeArea' , { static : true } ) gaugeArea ; @ Input ( ) canvasWidth : number ; @ Input ( ) needleValue : number ; @ Input ( ) centralLabel : string ; @ Input ( ) options ; @ Input ( ) name : string ; @ Input ( ) nameFont : string ; @ Input ( ) bottomLabel : string ; @ Input ( ) bottomLabelFont : string ; public nameMargin : string ; public bottomLabelMargin : string ; private element ; private gaugeChart : any ; ngOnInit ( ) { if ( this . name ) { if ( ! this . nameFont ) { this . nameFont = '' + Math . round ( this . canvasWidth / 15 ) ; } this . nameMargin = '' + Math . round ( + this . nameFont / 4 ) ; } if ( this . bottomLabel ) { if ( ! this . bottomLabelFont ) { this . bottomLabelFont = '' + Math . round ( this . canvasWidth / 10 ) ; } this . bottomLabelMargin = '-' + this . bottomLabelFont ; } if ( this . optionsCheck ( ) ) { this . element = this . gaugeArea . nativeElement ; this . options . centralLabel = this . centralLabel ; this . gaugeChart = GaugeChart . gaugeChart ( this . element , this . canvasWidth , this . options ) ; this . gaugeChart . updateNeedle ( this . needleValue ) ; } } optionsCheck ( ) { if ( this . canvasWidth == null ) { console . warn ( 'gauge-chart warning: canvasWidth is not specified!' ) ; return false ; } else if ( this . needleValue == null ) { console . warn ( 'gauge-chart warning: needleValue is not specified!' ) ; return false ; } if ( this . centralLabel == null ) { this . centralLabel = '' ; } return true ; } ngOnChanges ( changes ) { if ( changes . needleValue && ! changes . needleValue . firstChange ) { if ( changes . needleValue . currentValue !== changes . needleValue . previousValue ) { this . needleValue = changes . needleValue . currentValue ; this . gaugeChart . updateNeedle ( this . needleValue ) ; } } if ( changes . centralLabel && ! changes . centralLabel . firstChange ) { if ( changes . centralLabel . currentValue !== changes . centralLabel . previousValue ) { this . gaugeChart . removeGauge ( ) ; this . centralLabel = changes . centralLabel . currentValue ; this . options . centralLabel = this . centralLabel ; this . gaugeChart = GaugeChart . gaugeChart ( this . element , this . canvasWidth , this . options ) ; this . gaugeChart . updateNeedle ( this . needleValue ) ; } } if ( changes . centralLabel && ! changes . centralLabel . firstChange ) { if ( changes . bottomLabel . currentValue !== changes . bottomLabel . previousValue ) { console . log ( changes . bottomLabel . currentValue ) ; } } } }