Thomas
3 years ago
committed by
GitHub
parent
7da6478699
commit
194cf1ddcc
@ -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