import { Component } from '@angular/core' ; import { ColorService } from '@ux-aspects/ux-aspects' ; import { BaseChartDirective } from 'ng2-charts' ; import { Chart } from 'chart.js' ; @ Component ( { selector : 'app' , templateUrl : './app.component.html' , styleUrls : [ './app.component.css' ] } ) export class AppComponent { barChartData : Chart . ChartDataSets [ ] ; barChartLabels : string [ ] ; barChartOptions : Chart . ChartOptions ; barChartLegend : boolean = false ; barChartColors : any ; labels : string [ ] = [ '.doc' , '.ppt' , '.pdf' , '.xls' , '.html' , '.txt' , '.png' , '.bmp' , '.gif' , '.svg' , '.ttf' , '.wav' ] ; data : number [ ] = [ 34 , 25 , 19 , 34 , 32 , 44 , 12 , 27 , 15 , 48 , 40 , 36 ] ; page : number = 0 ; pageSize : number = 4 ; constructor ( colorService ) { this . barChartLabels = this . getPageLabels ( ) ; this . barChartData = [ { data : this . getPageData ( ) , borderWidth : 1 , barPercentage : 0.5 , categoryPercentage : 1 } ] ; let gridColor = colorService . getColor ( 'grey6' ) . toHex ( ) ; let barBackgroundColor = colorService . getColor ( 'chart1' ) . setAlpha ( 0.1 ) . toRgba ( ) ; let barHoverBackgroundColor = colorService . getColor ( 'chart1' ) . setAlpha ( 0.2 ) . toRgba ( ) ; let barBorderColor = colorService . getColor ( 'chart1' ) . toHex ( ) ; let tooltipBackgroundColor = colorService . getColor ( 'grey2' ) . toHex ( ) ; this . barChartOptions = { maintainAspectRatio : false , responsive : true , animation : { duration : 0 } , scales : { xAxes : [ { gridLines : { color : 'transparent' } } ] , yAxes : [ { gridLines : { color : gridColor } , ticks : { min : 0 , max : 50 , stepSize : 10 } as Chart . LinearTickOptions } ] } , tooltips : { backgroundColor : tooltipBackgroundColor , cornerRadius : 0 , callbacks : { title : ( item ) => { return ; } , label : ( item ) => { return `x: ${ item . xLabel }, y: ${ item . yLabel }` ; } } , displayColors : false } as any } ; this . barChartColors = [ { backgroundColor : barBackgroundColor , hoverBackgroundColor : barHoverBackgroundColor , borderColor : barBorderColor } ] ; } getPageData ( ) { let startIdx = this . page * this . pageSize ; let endIdx = startIdx + this . pageSize ; return this . data . slice ( startIdx , endIdx ) ; } getPageLabels ( ) { let startIdx = this . page * this . pageSize ; let endIdx = startIdx + this . pageSize ; return this . labels . slice ( startIdx , endIdx ) ; } goToPreviousPage ( ) { if ( this . hasPreviousPage ( ) ) { this . page -= 1 ; this . barChartLabels = this . getPageLabels ( ) ; this . barChartData [ 0 ] . data = this . getPageData ( ) ; } } goToNextPage ( ) { if ( this . hasNextPage ( ) ) { this . page += 1 ; this . barChartLabels = this . getPageLabels ( ) ; this . barChartData [ 0 ] . data = this . getPageData ( ) ; } } hasNextPage ( ) { let nextPageIndex = ( this . page + 1 ) * this . pageSize ; return nextPageIndex < this . data . length ; } hasPreviousPage ( ) { return this . page > 0 ; } }