| 
						
						
							
								
							
						
						
					 | 
					@ -10,16 +10,16 @@ import { | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					  ViewChild | 
					 | 
					 | 
					  ViewChild | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					} from '@angular/core'; | 
					 | 
					 | 
					} from '@angular/core'; | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					import { primaryColorRgb } from '@ghostfolio/common/config'; | 
					 | 
					 | 
					import { primaryColorRgb } from '@ghostfolio/common/config'; | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					import { PortfolioItem } from '@ghostfolio/common/interfaces'; | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					import { | 
					 | 
					 | 
					import { | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					  Chart, | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					  LinearScale, | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					  LineController, | 
					 | 
					 | 
					  LineController, | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					  LineElement, | 
					 | 
					 | 
					  LineElement, | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					  LinearScale, | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					  PointElement, | 
					 | 
					 | 
					  PointElement, | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					  TimeScale | 
					 | 
					 | 
					  TimeScale | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					} from 'chart.js'; | 
					 | 
					 | 
					} from 'chart.js'; | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					import { Chart } from 'chart.js'; | 
					 | 
					 | 
					 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					import { addMonths, isAfter, parseISO, subMonths } from 'date-fns'; | 
					 | 
					 | 
					import { addMonths, isAfter, parseISO, subMonths } from 'date-fns'; | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					 | 
					 | 
					 | 
					import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface'; | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					
 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					@Component({ | 
					 | 
					 | 
					@Component({ | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					  selector: 'gf-investment-chart', | 
					 | 
					 | 
					  selector: 'gf-investment-chart', | 
				
			
			
		
	
	
		
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
					@ -28,7 +28,7 @@ import { addMonths, isAfter, parseISO, subMonths } from 'date-fns'; | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					  styleUrls: ['./investment-chart.component.scss'] | 
					 | 
					 | 
					  styleUrls: ['./investment-chart.component.scss'] | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					}) | 
					 | 
					 | 
					}) | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					export class InvestmentChartComponent implements OnChanges, OnDestroy, OnInit { | 
					 | 
					 | 
					export class InvestmentChartComponent implements OnChanges, OnDestroy, OnInit { | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					  @Input() portfolioItems: PortfolioItem[]; | 
					 | 
					 | 
					  @Input() investments: InvestmentItem[]; | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					 | 
					 | 
					
 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					  @ViewChild('chartCanvas') chartCanvas; | 
					 | 
					 | 
					  @ViewChild('chartCanvas') chartCanvas; | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					
 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
	
		
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
					@ -48,7 +48,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy, OnInit { | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					  public ngOnInit() {} | 
					 | 
					 | 
					  public ngOnInit() {} | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					
 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					  public ngOnChanges() { | 
					 | 
					 | 
					  public ngOnChanges() { | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					    if (this.portfolioItems) { | 
					 | 
					 | 
					    if (this.investments) { | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					 | 
					 | 
					      this.initialize(); | 
					 | 
					 | 
					      this.initialize(); | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					    } | 
					 | 
					 | 
					    } | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					  } | 
					 | 
					 | 
					  } | 
				
			
			
		
	
	
		
		
			
				
					| 
						
						
						
							
								
							
						
					 | 
					@ -60,32 +60,32 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy, OnInit { | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					  private initialize() { | 
					 | 
					 | 
					  private initialize() { | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					    this.isLoading = true; | 
					 | 
					 | 
					    this.isLoading = true; | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					
 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					    if (this.portfolioItems?.length > 0) { | 
					 | 
					 | 
					    if (this.investments?.length > 0) { | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					 | 
					 | 
					      // Extend chart by three months (before)
 | 
					 | 
					 | 
					      // Extend chart by three months (before)
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					      const firstItem = this.portfolioItems[0]; | 
					 | 
					 | 
					      const firstItem = this.investments[0]; | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					      this.portfolioItems.unshift({ | 
					 | 
					 | 
					      this.investments.unshift({ | 
				
			
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					 | 
					 | 
					        ...firstItem, | 
					 | 
					 | 
					        ...firstItem, | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					        date: subMonths(parseISO(firstItem.date), 3).toISOString(), | 
					 | 
					 | 
					        date: subMonths(parseISO(firstItem.date), 3).toISOString(), | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					        investment: 0 | 
					 | 
					 | 
					        investment: 0 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					      }); | 
					 | 
					 | 
					      }); | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					
 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					      // Extend chart by three months (after)
 | 
					 | 
					 | 
					      // Extend chart by three months (after)
 | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					      const lastItem = this.portfolioItems[this.portfolioItems.length - 1]; | 
					 | 
					 | 
					      const lastItem = this.investments[this.investments.length - 1]; | 
				
			
			
				
				
			
		
	
		
		
			
				
					
					 | 
					 | 
					      this.portfolioItems.push({ | 
					 | 
					 | 
					      this.investments.push({ | 
				
			
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					 | 
					 | 
					        ...lastItem, | 
					 | 
					 | 
					        ...lastItem, | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					        date: addMonths(parseISO(lastItem.date), 3).toISOString() | 
					 | 
					 | 
					        date: addMonths(parseISO(lastItem.date), 3).toISOString() | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					      }); | 
					 | 
					 | 
					      }); | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					    } | 
					 | 
					 | 
					    } | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					
 | 
					 | 
					 | 
					
 | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					    const data = { | 
					 | 
					 | 
					    const data = { | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					      labels: this.portfolioItems.map((position) => { | 
					 | 
					 | 
					      labels: this.investments.map((position) => { | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					 | 
					 | 
					        return position.date; | 
					 | 
					 | 
					        return position.date; | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					      }), | 
					 | 
					 | 
					      }), | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					      datasets: [ | 
					 | 
					 | 
					      datasets: [ | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					        { | 
					 | 
					 | 
					        { | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					          borderColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`, | 
					 | 
					 | 
					          borderColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`, | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					          borderWidth: 2, | 
					 | 
					 | 
					          borderWidth: 2, | 
				
			
			
		
	
		
		
			
				
					
					 | 
					 | 
					          data: this.portfolioItems.map((position) => { | 
					 | 
					 | 
					          data: this.investments.map((position) => { | 
				
			
			
				
				
			
		
	
		
		
	
		
		
			
				
					 | 
					 | 
					            return position.investment; | 
					 | 
					 | 
					            return position.investment; | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					          }), | 
					 | 
					 | 
					          }), | 
				
			
			
		
	
		
		
			
				
					 | 
					 | 
					          segment: { | 
					 | 
					 | 
					          segment: { | 
				
			
			
		
	
	
		
		
			
				
					| 
						
							
								
							
						
						
						
					 | 
					
  |