|  | @ -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: { | 
			
		
	
	
		
		
			
				
					|  | 
 |