@ -24,7 +24,7 @@ import {
Input ,
Input ,
OnChanges ,
OnChanges ,
OnDestroy ,
OnDestroy ,
V iewChild
v iewChild
} from '@angular/core' ;
} from '@angular/core' ;
import {
import {
BarController ,
BarController ,
@ -55,20 +55,21 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
templateUrl : './investment-chart.component.html'
templateUrl : './investment-chart.component.html'
} )
} )
export class GfInvestmentChartComponent implements OnChanges , OnDestroy {
export class GfInvestmentChartComponent implements OnChanges , OnDestroy {
@Input ( ) benchmarkDataItems : InvestmentItem [ ] = [ ] ;
@Input ( ) public readonly benchmarkDataItems : InvestmentItem [ ] = [ ] ;
@Input ( ) benchmarkDataLabel = '' ;
@Input ( ) public readonly benchmarkDataLabel = '' ;
@Input ( ) colorScheme : ColorScheme ;
@Input ( ) public readonly colorScheme : ColorScheme ;
@Input ( ) currency : string ;
@Input ( ) public readonly currency : string ;
@Input ( ) groupBy : GroupBy ;
@Input ( ) public readonly groupBy : GroupBy ;
@Input ( ) historicalDataItems : LineChartItem [ ] = [ ] ;
@Input ( ) public readonly historicalDataItems : LineChartItem [ ] = [ ] ;
@Input ( ) isInPercentage = false ;
@Input ( ) public readonly isInPercentage = false ;
@Input ( ) isLoading = false ;
@Input ( ) public readonly isLoading = false ;
@Input ( ) locale = getLocale ( ) ;
@Input ( ) public readonly locale = getLocale ( ) ;
@Input ( ) savingsRate = 0 ;
@Input ( ) public readonly savingsRate = 0 ;
@ViewChild ( 'chartCanvas' ) chartCanvas : ElementRef < HTMLCanvasElement > ;
private readonly chartCanvas =
viewChild . required < ElementRef < HTMLCanvasElement > > ( 'chartCanvas' ) ;
public chart : Chart < 'bar' | 'line' > ;
private chart : Chart < 'bar' | 'line' > ;
private investments : InvestmentItem [ ] ;
private investments : InvestmentItem [ ] ;
private values : LineChartItem [ ] ;
private values : LineChartItem [ ] ;
@ -118,7 +119,7 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
borderWidth : this.groupBy ? 0 : 1 ,
borderWidth : this.groupBy ? 0 : 1 ,
data : this.investments.map ( ( { date , investment } ) = > {
data : this.investments.map ( ( { date , investment } ) = > {
return {
return {
x : parseDate ( date ) . getTime ( ) ,
x : parseDate ( date ) ? . getTime ( ) ? ? null ,
y : this.isInPercentage ? investment * 100 : investment
y : this.isInPercentage ? investment * 100 : investment
} ;
} ;
} ) ,
} ) ,
@ -138,7 +139,7 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
borderWidth : 2 ,
borderWidth : 2 ,
data : this.values.map ( ( { date , value } ) = > {
data : this.values.map ( ( { date , value } ) = > {
return {
return {
x : parseDate ( date ) . getTime ( ) ,
x : parseDate ( date ) ? . getTime ( ) ? ? null ,
y : this.isInPercentage ? value * 100 : value
y : this.isInPercentage ? value * 100 : value
} ;
} ;
} ) ,
} ) ,
@ -165,14 +166,16 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
this . getTooltipPluginConfiguration ( ) ;
this . getTooltipPluginConfiguration ( ) ;
const annotations = this . chart . options . plugins . annotation
const annotations = this . chart . options . plugins . annotation
. annotations as Record < string , AnnotationOptions < ' line ' > > ;
? . annotations as Record < string , AnnotationOptions < ' line ' > > ;
if ( this . savingsRate && annotations . savingsRate ) {
if ( this . savingsRate && annotations . savingsRate ) {
annotations . savingsRate . value = this . savingsRate ;
annotations . savingsRate . value = this . savingsRate ;
}
}
this . chart . update ( ) ;
this . chart . update ( ) ;
} else {
} else {
this . chart = new Chart ( this . chartCanvas . nativeElement , {
this . chart = new Chart < 'bar' | 'line' > (
this . chartCanvas ( ) . nativeElement ,
{
data : chartData ,
data : chartData ,
options : {
options : {
animation : false ,
animation : false ,
@ -278,10 +281,11 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
}
}
} ,
} ,
plugins : [
plugins : [
getVerticalHoverLinePlugin ( this . chartCanvas , this . colorScheme )
getVerticalHoverLinePlugin ( this . chartCanvas ( ) , this . colorScheme )
] ,
] ,
type : this . groupBy ? 'bar' : 'line'
type : this . groupBy ? 'bar' : 'line'
} ) ;
}
) ;
}
}
}
}
}
}
@ -305,8 +309,12 @@ export class GfInvestmentChartComponent implements OnChanges, OnDestroy {
}
}
private isInFuture < T > ( aContext : ScriptableLineSegmentContext , aValue : T ) {
private isInFuture < T > ( aContext : ScriptableLineSegmentContext , aValue : T ) {
return isAfter ( new Date ( aContext ? . p1 ? . parsed ? . x ) , new Date ( ) )
const xValue = aContext ? . p1 ? . parsed ? . x ;
? aValue
: undefined ;
if ( xValue == null ) {
return undefined ;
}
return isAfter ( new Date ( xValue ) , new Date ( ) ) ? aValue : undefined ;
}
}
}
}