mirror of https://github.com/ghostfolio/ghostfolio
Thomas
4 years ago
committed by
GitHub
GitHub
9 changed files with 6 additions and 217 deletions
@ -1,12 +0,0 @@ |
|||
<ngx-skeleton-loader |
|||
*ngIf="isLoading" |
|||
animation="pulse" |
|||
[theme]="{ |
|||
height: '30rem', |
|||
width: '100%' |
|||
}" |
|||
></ngx-skeleton-loader> |
|||
<canvas |
|||
#timelineCanvas |
|||
[ngStyle]="{ display: isLoading ? 'none' : 'block' }" |
|||
></canvas> |
|||
@ -1,3 +0,0 @@ |
|||
:host { |
|||
display: block; |
|||
} |
|||
@ -1,158 +0,0 @@ |
|||
// import 'chartjs-chart-timeline';
|
|||
|
|||
import { |
|||
ChangeDetectionStrategy, |
|||
Component, |
|||
Input, |
|||
OnChanges, |
|||
OnInit |
|||
} from '@angular/core'; |
|||
import { PortfolioItem } from '@ghostfolio/common/interfaces'; |
|||
import { endOfDay, parseISO, startOfDay } from 'date-fns'; |
|||
|
|||
@Component({ |
|||
selector: 'gf-portfolio-positions-chart', |
|||
changeDetection: ChangeDetectionStrategy.OnPush, |
|||
templateUrl: './portfolio-positions-chart.component.html', |
|||
styleUrls: ['./portfolio-positions-chart.component.scss'] |
|||
}) |
|||
export class PortfolioPositionsChartComponent implements OnChanges, OnInit { |
|||
@Input() portfolioItems: PortfolioItem[]; |
|||
|
|||
// @ViewChild('timelineCanvas') timeline;
|
|||
|
|||
public isLoading = true; |
|||
|
|||
public constructor() {} |
|||
|
|||
public ngOnInit() {} |
|||
|
|||
public ngOnChanges() { |
|||
if (this.portfolioItems) { |
|||
this.initialize(); |
|||
} |
|||
} |
|||
|
|||
private initialize() { |
|||
this.isLoading = true; |
|||
|
|||
let datasets = []; |
|||
const fromToPosition = {}; |
|||
|
|||
this.portfolioItems.forEach((positionsByDay) => { |
|||
Object.keys(positionsByDay.positions).forEach((symbol) => { |
|||
if (fromToPosition[symbol]) { |
|||
fromToPosition[symbol].push({ |
|||
date: positionsByDay.date, |
|||
quantity: positionsByDay.positions[symbol].quantity |
|||
}); |
|||
} else { |
|||
fromToPosition[symbol] = [ |
|||
{ |
|||
date: positionsByDay.date, |
|||
quantity: positionsByDay.positions[symbol].quantity |
|||
} |
|||
]; |
|||
} |
|||
}); |
|||
}); |
|||
|
|||
Object.keys(fromToPosition).forEach((symbol) => { |
|||
let currentDate = null; |
|||
let currentQuantity = null; |
|||
let data = []; |
|||
let hasStock = false; |
|||
|
|||
fromToPosition[symbol].forEach((x, index) => { |
|||
if (x.quantity > 0 && index === 0) { |
|||
currentDate = x.date; |
|||
hasStock = true; |
|||
} |
|||
|
|||
if (x.quantity === 0 || index === fromToPosition[symbol].length - 1) { |
|||
if (hasStock) { |
|||
data.push([ |
|||
startOfDay(parseISO(currentDate)), |
|||
endOfDay(parseISO(x.date)), |
|||
currentQuantity |
|||
]); |
|||
hasStock = false; |
|||
} else { |
|||
// Do nothing
|
|||
} |
|||
} else { |
|||
if (hasStock) { |
|||
// Do nothing
|
|||
} else { |
|||
currentDate = x.date; |
|||
hasStock = true; |
|||
} |
|||
} |
|||
|
|||
currentQuantity = x.quantity; |
|||
}); |
|||
|
|||
if (data.length === 0) { |
|||
// Fill data for today
|
|||
data.push([ |
|||
startOfDay(new Date()), |
|||
endOfDay(new Date()), |
|||
currentQuantity |
|||
]); |
|||
} |
|||
|
|||
datasets.push({ data, symbol }); |
|||
}); |
|||
|
|||
// Sort by date
|
|||
datasets = datasets.sort((a: any, b: any) => { |
|||
return a.data[0][0].getTime() - b.data[0][0].getTime(); |
|||
}); |
|||
|
|||
/*new Chart(this.timeline.nativeElement, { |
|||
type: 'timeline', |
|||
options: { |
|||
elements: { |
|||
colorFunction: (text, data, dataset, index) => { |
|||
return `rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`; |
|||
}, |
|||
showText: false, |
|||
textPadding: 4 |
|||
}, |
|||
maintainAspectRatio: true, |
|||
responsive: true, |
|||
scales: { |
|||
xAxes: [ |
|||
{ |
|||
gridLines: { |
|||
display: false |
|||
}, |
|||
position: 'top', |
|||
time: { |
|||
unit: 'year' |
|||
} |
|||
} |
|||
], |
|||
yAxes: [ |
|||
{ |
|||
gridLines: { |
|||
display: false |
|||
}, |
|||
ticks: { |
|||
display: false |
|||
} |
|||
} |
|||
] |
|||
} |
|||
}, |
|||
data: { |
|||
datasets, |
|||
labels: datasets.map((dataset) => { |
|||
return dataset.symbol; |
|||
}) |
|||
} |
|||
});*/ |
|||
|
|||
this.isLoading = false; |
|||
} |
|||
} |
|||
@ -1,13 +0,0 @@ |
|||
import { CommonModule } from '@angular/common'; |
|||
import { NgModule } from '@angular/core'; |
|||
import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader'; |
|||
|
|||
import { PortfolioPositionsChartComponent } from './portfolio-positions-chart.component'; |
|||
|
|||
@NgModule({ |
|||
declarations: [PortfolioPositionsChartComponent], |
|||
exports: [PortfolioPositionsChartComponent], |
|||
imports: [CommonModule, NgxSkeletonLoaderModule], |
|||
providers: [] |
|||
}) |
|||
export class PortfolioPositionsChartModule {} |
|||
Loading…
Reference in new issue