import { Component , OnInit , OnDestroy , OnChanges , Input , HostBinding , ElementRef , NgZone , ChangeDetectionStrategy , ChangeDetectorRef } from '@angular/core' ; declare var G2 ; export interface G2MiniBarData { x : any ; y : any ; [ key ] : any ; } @ Component ( { selector : 'g2-mini-bar' , template : `` , styleUrls : [ './g2-mini-bar.component.less' ] , changeDetection : ChangeDetectionStrategy . OnPush , } ) export class G2MiniBarComponent implements OnInit , OnChanges , OnDestroy { private chart : any ; @ Input ( ) delay = 0 ; @ Input ( ) color = '#1890FF' ; @ Input ( ) @ HostBinding ( 'style.height.px' ) height = 56 ; @ Input ( ) barWidth = 5 ; @ Input ( ) padding : Array < string | number > = [ 8 , 8 , 8 , 8 ] ; @ Input ( ) data : G2MiniBarData [ ] = [ ] ; @ Input ( ) yTooltipSuffix = '' ; @ Input ( ) tooltipType : 'mini' | 'default' = 'default' ; @ Input ( ) axis = false ; @ Input ( ) legend = false ; constructor ( private el , private ngZone , private cdr ) { } private install ( ) { const { el , height , padding , yTooltipSuffix , tooltipType , axis , legend } = this ; const chart = ( this . chart = new G2 . Chart ( { container : el . nativeElement , forceFit : true , height , padding , } ) ) ; chart . source ( [ ] , { x : { type : 'cat' , } , y : { min : 0 , } , } ) ; chart . legend ( legend ) ; chart . axis ( axis ) ; chart . tooltip ( { type : tooltipType === 'mini' ? 'mini' : null , showTitle : false , hideMarkders : false , crosshairs : false , 'g2-tooltip' : { padding : 4 } , 'g2-tooltip-list-item' : { margin : `0px 4px` } , } ) ; chart . interval ( ) . position ( 'x*y' ) . tooltip ( 'x*y' , ( x , y ) => ( { name : x , value : y + yTooltipSuffix } ) ) ; chart . render ( ) ; this . attachChart ( ) ; } private attachChart ( ) { const { chart , height , padding , data , color , barWidth } = this ; if ( ! chart || ! data || data . length <= 0 ) { return ; } chart . get ( 'geoms' ) [ 0 ] . size ( barWidth ) . color ( color ) ; chart . set ( 'height' , height ) ; chart . set ( 'padding' , padding ) ; chart . changeData ( data ) ; } ngOnInit ( ) { this . ngZone . runOutsideAngular ( ( ) => setTimeout ( ( ) => this . install ( ) , this . delay ) ) ; } ngOnChanges ( ) { this . ngZone . runOutsideAngular ( ( ) => this . attachChart ( ) ) ; } ngOnDestroy ( ) { if ( this . chart ) { this . ngZone . runOutsideAngular ( ( ) => this . chart . destroy ( ) ) ; } } }