sudacode/ghostfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Add data management (#1230)

Browse Source 
* Add data management for benchmarks
This commit is contained in:
Thomas Kaul
2022-09-06 20:39:27 +02:00
committed by GitHub
parent 00e402d286
commit 3ad99c9991
16 changed files with 182 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.ts
View File

@@ -14,8 +14,7 @@ import {
getDateFormatString,
getLocale
} from '@ghostfolio/common/helper';
import { User } from '@ghostfolio/common/interfaces';
import { LineChartItem } from '@ghostfolio/ui/line-chart/interfaces/line-chart.interface';
import { LineChartItem, User } from '@ghostfolio/common/interfaces';
import { DataSource, MarketData } from '@prisma/client';
import {
addDays,

4
apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.html
View File

@@ -1,4 +1,4 @@
<div class="align-items-center d-flex mb-4">
<div class="align-items-center d-flex">
<div class="align-items-center d-flex flex-grow-1 h5 mb-0 text-truncate">
<span i18n>Benchmarks</span>
<sup i18n>Beta</sup>
@@ -12,7 +12,7 @@
<mat-label i18n>Compare with...</mat-label>
<mat-select
name="benchmark"
[value]="value"
[value]="benchmark"
(selectionChange)="onChangeBenchmark($event.value)"
>
<mat-option *ngFor="let benchmark of benchmarks" [value]="benchmark">{{

94
apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts
View File

@@ -3,9 +3,11 @@ import 'chartjs-adapter-date-fns';
import {
ChangeDetectionStrategy,
Component,
EventEmitter,
Input,
OnChanges,
OnDestroy,
Output,
ViewChild
} from '@angular/core';
import {
@@ -17,12 +19,13 @@ import { primaryColorRgb, secondaryColorRgb } from '@ghostfolio/common/config';
import {
getBackgroundColor,
getDateFormatString,
getTextColor,
parseDate,
transformTickToAbbreviation
getTextColor
} from '@ghostfolio/common/helper';
import { UniqueAsset, User } from '@ghostfolio/common/interfaces';
import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface';
import {
LineChartItem,
UniqueAsset,
User
} from '@ghostfolio/common/interfaces';
import {
Chart,
LineController,
@@ -33,7 +36,6 @@ import {
Tooltip
} from 'chart.js';
import annotationPlugin from 'chartjs-plugin-annotation';
import { addDays, isAfter, parseISO, subDays } from 'date-fns';
@Component({
selector: 'gf-benchmark-comparator',
@@ -42,21 +44,20 @@ import { addDays, isAfter, parseISO, subDays } from 'date-fns';
styleUrls: ['./benchmark-comparator.component.scss']
})
export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
@Input() benchmarkDataItems: LineChartItem[] = [];
@Input() benchmarks: UniqueAsset[];
@Input() currency: string;
@Input() daysInMarket: number;
@Input() investments: InvestmentItem[];
@Input() isInPercent = false;
@Input() locale: string;
@Input() performanceDataItems: LineChartItem[];
@Input() user: User;
@Output() benchmarkChanged = new EventEmitter<UniqueAsset>();
@ViewChild('chartCanvas') chartCanvas;
public benchmark: UniqueAsset;
public chart: Chart;
public isLoading = true;
public value;
private data: InvestmentItem[];
public constructor() {
Chart.register(
@@ -74,13 +75,13 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
}
public ngOnChanges() {
if (this.investments) {
if (this.performanceDataItems) {
this.initialize();
}
}
public onChangeBenchmark(aBenchmark: any) {
console.log(aBenchmark);
public onChangeBenchmark(aBenchmark: UniqueAsset) {
this.benchmarkChanged.next(aBenchmark);
}
public ngOnDestroy() {
@@ -90,61 +91,26 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
private initialize() {
this.isLoading = true;
// Create a clone
this.data = this.investments.map((a) => Object.assign({}, a));
if (this.data?.length > 0) {
// Extend chart by 5% of days in market (before)
const firstItem = this.data[0];
this.data.unshift({
...firstItem,
date: subDays(
parseISO(firstItem.date),
this.daysInMarket * 0.05 || 90
).toISOString(),
investment: 0
});
// Extend chart by 5% of days in market (after)
const lastItem = this.data[this.data.length - 1];
this.data.push({
...lastItem,
date: addDays(
parseDate(lastItem.date),
this.daysInMarket * 0.05 || 90
).toISOString()
});
}
const data = {
labels: this.data.map((investmentItem) => {
return investmentItem.date;
labels: this.performanceDataItems.map(({ date }) => {
return date;
}),
datasets: [
{
backgroundColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`,
borderColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`,
borderWidth: 2,
data: this.data.map((position) => {
return position.investment;
data: this.performanceDataItems.map(({ value }) => {
return value;
}),
label: $localize`Deposit`,
segment: {
borderColor: (context: unknown) =>
this.isInFuture(
context,
`rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b}, 0.67)`
),
borderDash: (context: unknown) => this.isInFuture(context, [2, 2])
},
stepped: true
label: $localize`Portfolio`
},
{
backgroundColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`,
borderColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`,
borderWidth: 2,
data: this.data.map((position) => {
return position.investment * 1.75;
data: this.benchmarkDataItems.map(({ value }) => {
return value;
}),
label: $localize`Benchmark`
}
@@ -212,7 +178,7 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
}
},
y: {
display: !this.isInPercent,
display: true,
grid: {
borderColor: `rgba(${getTextColor()}, 0.1)`,
color: `rgba(${getTextColor()}, 0.8)`,
@@ -222,7 +188,7 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
position: 'right',
ticks: {
callback: (value: number) => {
return transformTickToAbbreviation(value);
return `${value} %`;
},
display: true,
mirror: true,
@@ -243,8 +209,8 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
private getTooltipPluginConfiguration() {
return {
...getTooltipOptions({
locale: this.isInPercent ? undefined : this.locale,
unit: this.isInPercent ? undefined : this.currency
locale: this.locale,
unit: '%'
}),
mode: 'index',
position: <unknown>'top',
@@ -252,10 +218,4 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
yAlign: 'bottom'
};
}
private isInFuture<T>(aContext: any, aValue: T) {
return isAfter(new Date(aContext?.p1?.parsed?.x), new Date())
? aValue
: undefined;
}
}

2
apps/client/src/app/components/home-overview/home-overview.component.ts
View File

@@ -8,13 +8,13 @@ import {
} from '@ghostfolio/client/services/settings-storage.service';
import { UserService } from '@ghostfolio/client/services/user/user.service';
import {
LineChartItem,
PortfolioPerformance,
UniqueAsset,
User
} from '@ghostfolio/common/interfaces';
import { hasPermission, permissions } from '@ghostfolio/common/permissions';
import { DateRange } from '@ghostfolio/common/types';
import { LineChartItem } from '@ghostfolio/ui/line-chart/interfaces/line-chart.interface';
import { DeviceDetectorService } from 'ngx-device-detector';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

6
apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.component.ts
View File

@@ -9,9 +9,11 @@ import {
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { DataService } from '@ghostfolio/client/services/data.service';
import { DATE_FORMAT, downloadAsFile } from '@ghostfolio/common/helper';
import { EnhancedSymbolProfile } from '@ghostfolio/common/interfaces';
import {
EnhancedSymbolProfile,
LineChartItem
} from '@ghostfolio/common/interfaces';
import { OrderWithAccount } from '@ghostfolio/common/types';
import { LineChartItem } from '@ghostfolio/ui/line-chart/interfaces/line-chart.interface';
import { Tag } from '@prisma/client';
import { format, isSameMonth, isToday, parseISO } from 'date-fns';
import { Subject } from 'rxjs';

40
apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts
View File

@@ -2,7 +2,12 @@ import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
import { DataService } from '@ghostfolio/client/services/data.service';
import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
import { UserService } from '@ghostfolio/client/services/user/user.service';
import { Position, UniqueAsset, User } from '@ghostfolio/common/interfaces';
import {
HistoricalDataItem,
Position,
UniqueAsset,
User
} from '@ghostfolio/common/interfaces';
import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface';
import { GroupBy, ToggleOption } from '@ghostfolio/common/types';
import { differenceInDays } from 'date-fns';
@@ -18,10 +23,12 @@ import { takeUntil } from 'rxjs/operators';
templateUrl: './analysis-page.html'
})
export class AnalysisPageComponent implements OnDestroy, OnInit {
public benchmarkDataItems: HistoricalDataItem[] = [];
public benchmarks: UniqueAsset[];
public bottom3: Position[];
public daysInMarket: number;
public deviceType: string;
public firstOrderDate: Date;
public hasImpersonationId: boolean;
public investments: InvestmentItem[];
public investmentsByMonth: InvestmentItem[];
@@ -30,6 +37,7 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
{ label: $localize`Monthly`, value: 'month' },
{ label: $localize`Accumulating`, value: undefined }
];
public performanceDataItems: HistoricalDataItem[];
public top3: Position[];
public user: User;
@@ -56,6 +64,16 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
this.hasImpersonationId = !!aId;
});
this.dataService
.fetchChart({ range: 'max', version: 2 })
.pipe(takeUntil(this.unsubscribeSubject))
.subscribe(({ chart }) => {
this.firstOrderDate = new Date(chart?.[0]?.date);
this.performanceDataItems = chart;
this.changeDetectorRef.markForCheck();
});
this.dataService
.fetchInvestments()
.pipe(takeUntil(this.unsubscribeSubject))
@@ -106,6 +124,26 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
});
}
public onChangeBenchmark({ dataSource, symbol }: UniqueAsset) {
this.dataService
.fetchBenchmarkBySymbol({
dataSource,
symbol,
startDate: this.firstOrderDate
})
.pipe(takeUntil(this.unsubscribeSubject))
.subscribe(({ marketData }) => {
this.benchmarkDataItems = marketData.map(({ date, value }) => {
return {
date,
value
};
});
this.changeDetectorRef.markForCheck();
});
}
public onChangeGroupBy(aMode: GroupBy) {
this.mode = aMode;
}

6
apps/client/src/app/pages/portfolio/analysis/analysis-page.html
View File

@@ -4,13 +4,13 @@
<div class="col-lg">
<gf-benchmark-comparator
class="h-100"
[benchmarkDataItems]="benchmarkDataItems"
[benchmarks]="benchmarks"
[currency]="user?.settings?.baseCurrency"
[daysInMarket]="daysInMarket"
[isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
[investments]="investments"
[locale]="user?.settings?.locale"
[performanceDataItems]="performanceDataItems"
[user]="user"
(benchmarkChanged)="onChangeBenchmark($event)"
></gf-benchmark-comparator>
</div>
</div>

3
apps/client/src/app/pages/register/register-page.component.ts
View File

@@ -4,9 +4,8 @@ import { Router } from '@angular/router';
import { DataService } from '@ghostfolio/client/services/data.service';
import { InternetIdentityService } from '@ghostfolio/client/services/internet-identity.service';
import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
import { InfoItem } from '@ghostfolio/common/interfaces';
import { InfoItem, LineChartItem } from '@ghostfolio/common/interfaces';
import { hasPermission, permissions } from '@ghostfolio/common/permissions';
import { LineChartItem } from '@ghostfolio/ui/line-chart/interfaces/line-chart.interface';
import { Role } from '@prisma/client';
import { format } from 'date-fns';
import { DeviceDetectorService } from 'ngx-device-detector';

20
apps/client/src/app/services/data.service.ts
View File

@@ -14,11 +14,13 @@ import { UserItem } from '@ghostfolio/api/app/user/interfaces/user-item.interfac
import { UpdateUserSettingDto } from '@ghostfolio/api/app/user/update-user-setting.dto';
import { UpdateUserSettingsDto } from '@ghostfolio/api/app/user/update-user-settings.dto';
import { PropertyDto } from '@ghostfolio/api/services/property/property.dto';
import { DATE_FORMAT } from '@ghostfolio/common/helper';
import {
Access,
Accounts,
AdminData,
AdminMarketData,
BenchmarkMarketDataDetails,
BenchmarkResponse,
Export,
Filter,
@@ -31,12 +33,13 @@ import {
PortfolioPublicDetails,
PortfolioReport,
PortfolioSummary,
UniqueAsset,
User
} from '@ghostfolio/common/interfaces';
import { filterGlobalPermissions } from '@ghostfolio/common/permissions';
import { AccountWithValue, DateRange } from '@ghostfolio/common/types';
import { DataSource, Order as OrderModel } from '@prisma/client';
import { parseISO } from 'date-fns';
import { format, parseISO } from 'date-fns';
import { cloneDeep, groupBy } from 'lodash';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@@ -181,6 +184,21 @@ export class DataService {
return this.http.get<Access[]>('/api/v1/access');
}
public fetchBenchmarkBySymbol({
dataSource,
startDate,
symbol
}: {
startDate: Date;
} & UniqueAsset): Observable<BenchmarkMarketDataDetails> {
return this.http.get<BenchmarkMarketDataDetails>(
`/api/v1/benchmark/${dataSource}/${symbol}/${format(
startDate,
DATE_FORMAT
)}`
);
}
public fetchBenchmarks() {
return this.http.get<BenchmarkResponse>('/api/v1/benchmark');
}