import { Component , Input , Output , EventEmitter , OnChanges , SimpleChanges } from '@angular/core' ; @ Component ( { selector : 'chart-bigbang' , templateUrl : 'chart-bigbang.component.html' , styleUrls : [ 'chart-bigbang.component.scss' ] } ) export class ChartBigbangComponent { @ Input ( ) data : any ; @ Input ( ) max : number ; @ Input ( ) rotation : any = 0 ; @ Input ( ) selected : string ; @ Input ( ) hovered : string ; @ Output ( ) select = new EventEmitter < any > ( ) ; @ Output ( ) hover = new EventEmitter < any > ( ) ; @ Input ( ) r : number = 500 ; cx : number = 0 ; cy : number = 0 ; alpha : number = 1 / 8 ; innerR : number = 0.2 ; minR : number = 0.22 ; @ Input ( ) height : number = 780 ; constructor ( ) { } ngOnChanges ( changes ) { if ( changes . selected ) { this . updateAlpha ( changes . selected ) ; } } getStripeSize ( amount ) { return this . max ? Math . max ( this . minR , Math . sqrt ( amount / this . max * ( 1 - Math . pow ( this . innerR , 2 ) ) + Math . pow ( this . innerR , 2 ) ) ) : this . minR ; } getCircleR ( ) { return this . innerR * this . r * 0.9 ; } getStripePath ( i , inner , outer ) { var innerRadius = inner * this . r ; var outerRadius = outer * this . r ; var size = this . data . length ? 1 / this . data . length : 0 ; var start = i / this . data . length ; return this . getDonutPath ( this . cx , this . cy , innerRadius , outerRadius , start , size ) ; } getDonutPath ( x , y , innerRadius , outerRadius , start , size ) { if ( size >= 1 ) size = 0.9999 ; innerRadius = Math . max ( innerRadius , 0 ) ; outerRadius = Math . max ( outerRadius , innerRadius ) ; size = Math . max ( size , 0 ) ; var startAngle = 2 * Math . PI * start ; var angle = 2 * Math . PI * size ; var startX1 = x + Math . sin ( startAngle ) * outerRadius ; var startY1 = y - Math . cos ( startAngle ) * outerRadius ; var endX1 = x + Math . sin ( startAngle + angle ) * outerRadius ; var endY1 = y - Math . cos ( startAngle + angle ) * outerRadius ; var startX2 = x + Math . sin ( startAngle + angle ) * innerRadius ; var startY2 = y - Math . cos ( startAngle + angle ) * innerRadius ; var endX2 = x + Math . sin ( startAngle ) * innerRadius ; var endY2 = y - Math . cos ( startAngle ) * innerRadius ; var outerArc = ( size > 0.5 ? 1 : 0 ) ; var properties = [ ] ; properties . push ( "M" + startX1 + "," + startY1 ) ; properties . push ( "A" + outerRadius + "," + outerRadius + " 0 " + outerArc + ",1 " + endX1 + "," + endY1 ) ; properties . push ( "L" + startX2 + "," + startY2 ) ; properties . push ( "A" + innerRadius + "," + innerRadius + " 0 " + outerArc + ",0 " + endX2 + "," + endY2 ) ; properties . push ( "Z" ) ; return properties . join ( " " ) ; } updateAlpha ( change ) { let prev = 0 ; this . data . some ( ( item , i ) => { if ( item . id === change . previousValue ) { prev = i ; return true ; } else return false ; } ) ; let next = 0 ; this . data . some ( ( item , i ) => { if ( item . id === change . currentValue ) { next = i ; return true ; } else return false ; } ) ; let diff = 0 ; if ( Math . abs ( next - prev ) <= this . data . length / 2 ) diff = next - prev ; else { if ( prev > next ) diff = next - prev + this . data . length ; else diff = next - prev - this . data . length ; } this . alpha += ( - 1 ) * diff * ( 1 / this . data . length ) ; } }