import { Component , Input , AfterViewInit , AfterViewChecked , ViewChild } from '@angular/core' ; import { BehaviorSubject } from 'rxjs' ; import { Chart } from 'chart.js' ; import ChartDataLabels from 'chartjs-plugin-datalabels' ; @ Component ( { selector : 'cmdb-charts' , templateUrl : './charts.component.html' , styleUrls : [ './charts.component.scss' ] } ) export class ChartsComponent implements AfterViewInit , AfterViewChecked { @ ViewChild ( 'chartcanvas' , { static : false } ) public chartRef ; @ Input ( ) chartType : string ; @ Input ( ) labelColors : any [ ] ; @ Input ( ) chartOptions : { } ; private chart ; private labels = new BehaviorSubject < any [ ] > ( [ ] ) ; @ Input ( ) set dataLabels ( value ) { this . labels . next ( value ) ; } get dataLabels ( ) { return this . labels . getValue ( ) ; } private items = new BehaviorSubject < any [ ] > ( [ ] ) ; @ Input ( ) set dataItems ( value ) { this . items . next ( value ) ; } get dataItems ( ) { return this . items . getValue ( ) ; } ngAfterViewInit ( ) { this . chart = new Chart ( this . chartRef . nativeElement , { plugins : [ ChartDataLabels ] , type : this . chartType , data : { datasets : [ { backgroundColor : this . labelColors , datalabels : { color : '#FFF' , font : { size : 12 } } } ] } , } ) ; this . chart . data . labels = this . dataLabels ; this . chart . data . datasets [ 0 ] . data = this . dataItems ; this . chart . options = this . chartOptions ; this . chart . update ( true ) ; } ngAfterViewChecked ( ) { this . chart . update ( true ) ; } }