Feature/clean up analysis page (#155)
* Clean up analysis page * Update changelog
This commit is contained in:
Thomas
GitHub
parent
7da6478699
commit
194cf1ddcc
@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
|
||||
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||
|
||||
## Unreleased
|
||||
|
||||
### Changed
|
||||
|
||||
- Cleaned up the analysis page with an unused chart module
|
||||
|
||||
## 1.14.0 - 09.06.2021
|
||||
|
||||
### Added
|
||||
|
||||
@ -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 {}
|
||||
@ -191,26 +191,6 @@
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-block d-sm-none row">
|
||||
<div class="col-lg">
|
||||
<mat-card class="mb-3">
|
||||
<mat-card-content>
|
||||
<div class="d-flex align-items-center justify-content-center">
|
||||
<div class="mr-2">
|
||||
<ion-icon
|
||||
name="information-circle-outline"
|
||||
size="small"
|
||||
></ion-icon>
|
||||
</div>
|
||||
<div i18n>
|
||||
You can find more charts on your desktop:
|
||||
<a href="https://ghostfol.io" target="_blank">Ghostfol.io</a>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row world-map-chart">
|
||||
<div class="col-lg">
|
||||
<mat-card class="mb-3">
|
||||
@ -241,9 +221,6 @@
|
||||
>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<!--<gf-positions-chart
|
||||
[portfolioItems]="portfolioItems"
|
||||
></gf-positions-chart>-->
|
||||
<gf-investment-chart
|
||||
[portfolioItems]="portfolioItems"
|
||||
></gf-investment-chart>
|
||||
|
||||
@ -2,7 +2,6 @@ import { CommonModule } from '@angular/common';
|
||||
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { GfInvestmentChartModule } from '@ghostfolio/client/components/investment-chart/investment-chart.module';
|
||||
import { PortfolioPositionsChartModule } from '@ghostfolio/client/components/portfolio-positions-chart/portfolio-positions-chart.module';
|
||||
import { PortfolioProportionChartModule } from '@ghostfolio/client/components/portfolio-proportion-chart/portfolio-proportion-chart.module';
|
||||
import { GfPositionsTableModule } from '@ghostfolio/client/components/positions-table/positions-table.module';
|
||||
import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module';
|
||||
@ -22,7 +21,6 @@ import { AnalysisPageComponent } from './analysis-page.component';
|
||||
GfToggleModule,
|
||||
GfWorldMapChartModule,
|
||||
MatCardModule,
|
||||
PortfolioPositionsChartModule,
|
||||
PortfolioProportionChartModule
|
||||
],
|
||||
providers: [],
|
||||
|
||||
@ -75,7 +75,6 @@
|
||||
"cache-manager-redis-store": "2.0.0",
|
||||
"chart.js": "3.2.1",
|
||||
"chartjs-adapter-date-fns": "1.1.0-beta.1",
|
||||
"chartjs-chart-timeline": "0.4.0",
|
||||
"cheerio": "1.0.0-rc.6",
|
||||
"class-transformer": "0.3.2",
|
||||
"class-validator": "0.13.1",
|
||||
|
||||
@ -4081,11 +4081,6 @@ chartjs-adapter-date-fns@1.1.0-beta.1:
|
||||
resolved "https://registry.yarnpkg.com/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-1.1.0-beta.1.tgz#5502dbfe33ff62af44ce6a05df086d1be773469a"
|
||||
integrity sha512-VNhuZ86kXKOwh61CyRLP7hoFqAR7+gjnrtf7KYLt/Wfh3jIQs14l1h+nagtQoFaabIYIo6UD5/jJb2/J6zOPcw==
|
||||
|
||||
chartjs-chart-timeline@0.4.0:
|
||||
version "0.4.0"
|
||||
resolved "https://registry.yarnpkg.com/chartjs-chart-timeline/-/chartjs-chart-timeline-0.4.0.tgz#cbd25dc5ddb5c2b34289f8dd7a2a627d71e251e8"
|
||||
integrity sha512-a3iOFgMUXgEK9zyDFXlL7cfhO6z4DkeuGqok1xnNVNg12ciSt/k1jDBFk8JKN+sVNZfoqeGAFBT9zvb++iEWnA==
|
||||
|
||||
check-more-types@^2.24.0:
|
||||
version "2.24.0"
|
||||
resolved "https://registry.yarnpkg.com/check-more-types/-/check-more-types-2.24.0.tgz#1420ffb10fd444dcfc79b43891bbfffd32a84600"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user