import { Component , Input , ChangeDetectionStrategy } from '@angular/core' ; import { trigger , style , animate , transition } from '@angular/animations' ; import * as Swimlane from '@swimlane/ngx-charts' ; import { curveLinear } from 'd3-shape' ; param curve param xDomain @ Component ( { animations : [ trigger ( 'animationState' , [ transition ( ':enter' , [ style ( { opacity : 0 , transform : 'scale(0)' } ) , animate ( 250 , style ( { opacity : 1 , transform : 'scale(1)' } ) ) ] ) ] ) ] , changeDetection : ChangeDetectionStrategy . OnPush , selector : 'g[ngx-charts-bubble-series]' , templateUrl : './bubble-series.component.html' } ) export class BubbleSeriesComponent extends Swimlane . BubbleSeriesComponent { @ Input ( ) curve : any = curveLinear ; @ Input ( ) xDomain = [ 0 , 0 ] ; /**
     * Function to return calculated circle for bubble series
     */ getCircles ( ) { const seriesName = this . data . name ; const isActive = this . activeEntries && ! this . activeEntries . length ? true : this . isActive ( { name : seriesName } ) ; return this . data . series . map ( ( d , i ) => { if ( typeof d . y === 'undefined' || typeof d . x === 'undefined' ) { return null ; } const y = d . y ; const x = d . x ; const r = d . r ; const radius = this . rScale ( r || 1 ) ; const borderColor = d . borderColor || null ; const tooltipLabel = Swimlane . formatLabel ( d . name ) ; const cx = this . xScale ( x ) ; const cy = this . yScale ( y ) ; const color = d . color || this . colors . scaleType === 'linear' ? this . colors . getColor ( r ) : this . colors . getColor ( seriesName ) ; if ( ! d . opacity ) { d . opacity = 1 ; } const opacity = isActive ? d . opacity : d . opacity / 3 ; const max = d . max ; const min = d . min ; const shape = d . shape || 'circle' ; const errorBarWidth = ( this . xDomain [ 1 ] - this . xDomain [ 0 ] ) * 0.0125 ; const data = { radius : d . r , series : seriesName , value : d . y , ... d } ; let classNames = [ `circle-data-${ i }` ] ; if ( d . classNames ) { classNames = d . classNames . concat ( classNames ) ; } return { borderColor , classNames : classNames , color , cx , cy , data , errorBarWidth , isActive , label : x , max , min , opacity , r , radius , seriesName , shape , tooltipLabel , transform : `translate(${ cx },${ cy })` , value : y , x , y } ; } ) . filter ( circle => circle !== null ) ; } param circle getErrorPathLower ( circle ) { const path = `M${ this . xScale ( circle . x ) - 10 },${ this . yScale ( circle . min ) }L
        ${ this . xScale ( circle . x ) + 10 },${ this . yScale ( circle . min ) }` ; return path ; } param circle returns { any } getErrorPathUpper ( circle ) { const path = `M${ this . xScale ( circle . x ) - 10 },${ this . yScale ( circle . max ) }L
        ${ this . xScale ( circle . x ) + 10 },${ this . yScale ( circle . max ) }` ; return path ; } }