import { Component , ViewChild } from '@angular/core' ; import { ColorService } from '@ux-aspects/ux-aspects' ; import { BaseChartDirective } from 'ng2-charts' ; import { BaseDocumentationSection } from '../../../../../components/base-documentation-section/base-documentation-section' ; import { DocumentationSectionComponent } from '../../../../../decorators/documentation-section-component' ; import { IPlayground } from '../../../../../interfaces/IPlayground' ; import { IPlaygroundProvider } from '../../../../../interfaces/IPlaygroundProvider' ; @ Component ( { selector : 'uxd-charts-live-chart' , templateUrl : './live-chart.component.html' } ) @ DocumentationSectionComponent ( 'ChartsLiveChartComponent' ) export class ChartsLiveChartComponent extends BaseDocumentationSection implements IPlaygroundProvider { playground : IPlayground = { files : { 'app.component.ts' : this . snippets . raw . liveChartTs , 'app.component.html' : this . snippets . raw . liveChartHtml , 'app.component.css' : this . snippets . raw . liveChartCss } , modules : [ { library : 'chart.js' } , { imports : [ 'ChartsModule' ] , library : 'ng2-charts' } , { imports : [ 'ColorServiceModule' ] , library : '@ux-aspects/ux-aspects' } ] } ; @ ViewChild ( BaseChartDirective , { static : true } ) baseChart : BaseChartDirective ; lineChartData : Chart . ChartDataSets [ ] ; lineChartOptions : Chart . ChartOptions ; lineChartLegend : boolean = false ; lineChartColors : any ; livedata : number [ ] = [ ] ; constructor ( colorService ) { super ( require . context ( './snippets/' , false , /(html|css|js|ts)$/ ) ) ; let gridColor = colorService . getColor ( 'grey6' ) . toHex ( ) ; let lineBorderColor = colorService . getColor ( 'chart1' ) . toRgb ( ) ; let lineFillColor = colorService . getColor ( 'chart1' ) . setAlpha ( 0.1 ) . toRgba ( ) ; this . updateChartData ( ) ; this . lineChartOptions = { maintainAspectRatio : false , responsive : true , animation : { duration : 0 } , elements : { line : { tension : 0 } } , scales : { xAxes : [ { type : 'linear' , position : 'bottom' , ticks : { min : 0 , max : 299 , step : 50 , fontSize : 0 } as Chart . LinearTickOptions , gridLines : { color : gridColor } } ] , yAxes : [ { ticks : { min : 0 , max : 100 , stepSize : 25 } as Chart . LinearTickOptions , gridLines : { color : gridColor } } ] } , tooltips : { enabled : false } } ; this . lineChartColors = [ { borderColor : lineBorderColor , backgroundColor : lineFillColor , pointBackgroundColor : 'transparent' , pointBorderColor : 'transparent' } ] ; setInterval ( ( ) => { this . updateChartData ( ) ; } , 40 ) ; } updateChartData ( ) { this . lineChartData = new Array < Chart . ChartDataSets > ( ) ; this . lineChartData . push ( { data : this . getRandomData ( ) , borderWidth : 1 } ) ; } getRandomData ( ) { if ( this . livedata . length ) { this . livedata = this . livedata . slice ( 1 ) ; } while ( this . livedata . length < 300 ) { let previous = this . livedata . length ? this . livedata [ this . livedata . length - 1 ] : 50 ; let y = previous + Math . random ( ) * 10 - 5 ; this . livedata . push ( y < 0 ? 0 : y > 100 ? 100 : y ) ; } let res = [ ] ; for ( let i = 0 ; i < this . livedata . length ; ++ i ) { res . push ( { x : i , y : this . livedata [ i ] } ) ; } return res ; } }