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

Feature/improve experimental chart in account detail dialog (#3813)

Browse Source 
* Improve chart in account detail dialog

* Update changelog
This commit is contained in:
Thomas Kaul 2024-09-24 19:45:48 +02:00 committed by GitHub
parent 4a97e2bb54
commit bb445ddf2e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
10 changed files with 181 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
### Changed
- Improved the usability of various action menus by introducing horizontal lines to separate the delete action
- Improved the chart in the account detail dialog (experimental)
- Aligned the holdings and regions of the public page with the allocations page
- Considered the user’s language in the link of the access table to share the portfolio
- Improved the language localization for German (`de`)

59
apps/api/src/app/account-balance/account-balance.service.ts
View File

@ -2,14 +2,18 @@ import { PortfolioChangedEvent } from '@ghostfolio/api/events/portfolio-changed.
import { LogPerformance } from '@ghostfolio/api/interceptors/performance-logging/performance-logging.interceptor';
import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data/exchange-rate-data.service';
import { PrismaService } from '@ghostfolio/api/services/prisma/prisma.service';
import { resetHours } from '@ghostfolio/common/helper';
import { AccountBalancesResponse, Filter } from '@ghostfolio/common/interfaces';
import { UserWithSettings } from '@ghostfolio/common/types';
import { DATE_FORMAT, getSum, resetHours } from '@ghostfolio/common/helper';
import {
AccountBalancesResponse,
Filter,
HistoricalDataItem
} from '@ghostfolio/common/interfaces';
import { Injectable } from '@nestjs/common';
import { EventEmitter2 } from '@nestjs/event-emitter';
import { AccountBalance, Prisma } from '@prisma/client';
import { parseISO } from 'date-fns';
import { Big } from 'big.js';
import { format, parseISO } from 'date-fns';
import { CreateAccountBalanceDto } from './create-account-balance.dto';
@ -91,17 +95,55 @@ export class AccountBalanceService {
return accountBalance;
}
public async getAccountBalanceItems({
filters,
userCurrency,
userId
}: {
filters?: Filter[];
userCurrency: string;
userId: string;
}): Promise<HistoricalDataItem[]> {
const { balances } = await this.getAccountBalances({
filters,
userCurrency,
userId,
withExcludedAccounts: false // TODO
});
const accumulatedBalancesByDate: { [date: string]: HistoricalDataItem } =
{};
const lastBalancesByAccount: { [accountId: string]: Big } = {};
for (const { accountId, date, valueInBaseCurrency } of balances) {
const formattedDate = format(date, DATE_FORMAT);
lastBalancesByAccount[accountId] = new Big(valueInBaseCurrency);
const totalBalance = getSum(Object.values(lastBalancesByAccount));
// Add or update the accumulated balance for this date
accumulatedBalancesByDate[formattedDate] = {
date: formattedDate,
value: totalBalance.toNumber()
};
}
return Object.values(accumulatedBalancesByDate);
}
@LogPerformance
public async getAccountBalances({
filters,
user,
userCurrency,
userId,
withExcludedAccounts
}: {
filters?: Filter[];
user: UserWithSettings;
userCurrency: string;
userId: string;
withExcludedAccounts?: boolean;
}): Promise<AccountBalancesResponse> {
const where: Prisma.AccountBalanceWhereInput = { userId: user.id };
const where: Prisma.AccountBalanceWhereInput = { userId };
const accountFilter = filters?.find(({ type }) => {
return type === 'ACCOUNT';
@ -132,10 +174,11 @@ export class AccountBalanceService {
balances: balances.map((balance) => {
return {
...balance,
accountId: balance.Account.id,
valueInBaseCurrency: this.exchangeRateDataService.toCurrency(
balance.value,
balance.Account.currency,
user.Settings.settings.baseCurrency
userCurrency
)
};
})

3
apps/api/src/app/account/account.controller.ts
View File

@ -137,7 +137,8 @@ export class AccountController {
): Promise<AccountBalancesResponse> {
return this.accountBalanceService.getAccountBalances({
filters: [{ id, type: 'ACCOUNT' }],
user: this.request.user
userCurrency: this.request.user.Settings.settings.baseCurrency,
userId: this.request.user.id
});
}

50
apps/api/src/app/portfolio/calculator/portfolio-calculator.ts
View File

@ -104,6 +104,10 @@ export abstract class PortfolioCalculator {
let dateOfFirstActivity = new Date();
if (this.accountBalanceItems[0]) {
dateOfFirstActivity = parseDate(this.accountBalanceItems[0].date);
}
this.activities = activities
.map(
({
@ -269,6 +273,10 @@ export abstract class PortfolioCalculator {
)
});
for (const accountBalanceItem of this.accountBalanceItems) {
chartDateMap[accountBalanceItem.date] = true;
}
const chartDates = sortBy(Object.keys(chartDateMap), (chartDate) => {
return chartDate;
});
@ -447,9 +455,28 @@ export abstract class PortfolioCalculator {
}
}
let lastDate = chartDates[0];
const accountBalanceItemsMap = this.accountBalanceItems.reduce(
(map, { date, value }) => {
map[date] = new Big(value);
return map;
},
{} as { [date: string]: Big }
);
const accountBalanceMap: { [date: string]: Big } = {};
let lastKnownBalance = new Big(0);
for (const dateString of chartDates) {
if (accountBalanceItemsMap[dateString] !== undefined) {
// If there's an exact balance for this date, update lastKnownBalance
lastKnownBalance = accountBalanceItemsMap[dateString];
}
// Add the most recent balance to the accountBalanceMap
accountBalanceMap[dateString] = lastKnownBalance;
for (const symbol of Object.keys(valuesBySymbol)) {
const symbolValues = valuesBySymbol[symbol];
@ -492,18 +519,7 @@ export abstract class PortfolioCalculator {
accumulatedValuesByDate[dateString]
?.investmentValueWithCurrencyEffect ?? new Big(0)
).add(investmentValueWithCurrencyEffect),
totalAccountBalanceWithCurrencyEffect: this.accountBalanceItems.some(
({ date }) => {
return date === dateString;
}
)
? new Big(
this.accountBalanceItems.find(({ date }) => {
return date === dateString;
}).value
)
: (accumulatedValuesByDate[lastDate]
?.totalAccountBalanceWithCurrencyEffect ?? new Big(0)),
totalAccountBalanceWithCurrencyEffect: accountBalanceMap[dateString],
totalCurrentValue: (
accumulatedValuesByDate[dateString]?.totalCurrentValue ?? new Big(0)
).add(currentValue),
@ -537,8 +553,6 @@ export abstract class PortfolioCalculator {
).add(timeWeightedInvestmentValueWithCurrencyEffect)
};
}
lastDate = dateString;
}
const historicalData: HistoricalDataItem[] = Object.entries(
@ -733,12 +747,12 @@ export abstract class PortfolioCalculator {
timeWeightedInvestmentValue === 0
? 0
: netPerformanceWithCurrencyEffectSinceStartDate /
timeWeightedInvestmentValue,
timeWeightedInvestmentValue
// TODO: Add net worth with valuables
// netWorth: totalCurrentValueWithCurrencyEffect
// .plus(totalAccountBalanceWithCurrencyEffect)
// .toNumber()
netWorth: 0
// netWorth: 0
});
}
}
@ -815,7 +829,7 @@ export abstract class PortfolioCalculator {
endDate: Date;
startDate: Date;
step: number;
}) {
}): { [date: string]: true } {
// Create a map of all relevant chart dates:
// 1. Add transaction point dates
let chartDateMap = this.transactionPoints.reduce((result, { date }) => {

35
apps/api/src/app/portfolio/portfolio.service.ts
View File

@ -1058,35 +1058,12 @@ export class PortfolioService {
const user = await this.userService.user({ id: userId });
const userCurrency = this.getUserCurrency(user);
const accountBalances = await this.accountBalanceService.getAccountBalances(
{ filters, user, withExcludedAccounts }
);
let accountBalanceItems: HistoricalDataItem[] = Object.values(
// Reduce the array to a map with unique dates as keys
accountBalances.balances.reduce(
(
map: { [date: string]: HistoricalDataItem },
{ date, valueInBaseCurrency }
) => {
const formattedDate = format(date, DATE_FORMAT);
if (map[formattedDate]) {
// If the value exists, add the current value to the existing one
map[formattedDate].value += valueInBaseCurrency;
} else {
// Otherwise, initialize the value for that date
map[formattedDate] = {
date: formattedDate,
value: valueInBaseCurrency
};
}
return map;
},
{}
)
);
const accountBalanceItems =
await this.accountBalanceService.getAccountBalanceItems({
filters,
userId,
userCurrency
});
const { activities } =
await this.orderService.getOrdersForPortfolioCalculator({

2
apps/api/src/services/queues/portfolio-snapshot/portfolio-snapshot.module.ts
View File

@ -1,3 +1,4 @@
import { AccountBalanceModule } from '@ghostfolio/api/app/account-balance/account-balance.module';
import { OrderModule } from '@ghostfolio/api/app/order/order.module';
import { PortfolioCalculatorFactory } from '@ghostfolio/api/app/portfolio/calculator/portfolio-calculator.factory';
import { CurrentRateService } from '@ghostfolio/api/app/portfolio/current-rate.service';
@ -17,6 +18,7 @@ import { PortfolioSnapshotProcessor } from './portfolio-snapshot.processor';
@Module({
exports: [BullModule, PortfolioSnapshotService],
imports: [
AccountBalanceModule,
BullModule.registerQueue({
name: PORTFOLIO_SNAPSHOT_QUEUE
}),

10
apps/api/src/services/queues/portfolio-snapshot/portfolio-snapshot.processor.ts
View File

@ -1,3 +1,4 @@
import { AccountBalanceService } from '@ghostfolio/api/app/account-balance/account-balance.service';
import { OrderService } from '@ghostfolio/api/app/order/order.service';
import {
PerformanceCalculationType,
@ -24,6 +25,7 @@ import { IPortfolioSnapshotQueueJob } from './interfaces/portfolio-snapshot-queu
@Processor(PORTFOLIO_SNAPSHOT_QUEUE)
export class PortfolioSnapshotProcessor {
public constructor(
private readonly accountBalanceService: AccountBalanceService,
private readonly calculatorFactory: PortfolioCalculatorFactory,
private readonly configurationService: ConfigurationService,
private readonly orderService: OrderService,
@ -56,7 +58,15 @@ export class PortfolioSnapshotProcessor {
userId: job.data.userId
});
const accountBalanceItems =
await this.accountBalanceService.getAccountBalanceItems({
filters: job.data.filters,
userCurrency: job.data.userCurrency,
userId: job.data.userId
});
const portfolioCalculator = this.calculatorFactory.createCalculator({
accountBalanceItems,
activities,
calculationType: PerformanceCalculationType.TWR,
currency: job.data.userCurrency,

116
apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts
View File

@ -2,7 +2,7 @@ import { CreateAccountBalanceDto } from '@ghostfolio/api/app/account-balance/cre
import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface';
import { DataService } from '@ghostfolio/client/services/data.service';
import { UserService } from '@ghostfolio/client/services/user/user.service';
import { downloadAsFile } from '@ghostfolio/common/helper';
import { DATE_FORMAT, downloadAsFile } from '@ghostfolio/common/helper';
import {
AccountBalancesResponse,
HistoricalDataItem,
@ -27,7 +27,7 @@ import { Router } from '@angular/router';
import { Big } from 'big.js';
import { format, parseISO } from 'date-fns';
import { isNumber } from 'lodash';
import { Subject } from 'rxjs';
import { forkJoin, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { AccountDetailDialogParams } from './interfaces/interfaces';
@ -87,11 +87,7 @@ export class AccountDetailDialog implements OnDestroy, OnInit {
}
public ngOnInit() {
this.fetchAccount();
this.fetchAccountBalances();
this.fetchActivities();
this.fetchPortfolioHoldings();
this.fetchPortfolioPerformance();
this.initialize();
}
public onCloneActivity(aActivity: Activity) {
@ -111,9 +107,7 @@ export class AccountDetailDialog implements OnDestroy, OnInit {
.postAccountBalance(accountBalance)
.pipe(takeUntil(this.unsubscribeSubject))
.subscribe(() => {
this.fetchAccount();
this.fetchAccountBalances();
this.fetchPortfolioPerformance();
this.initialize();
});
}
@ -122,9 +116,7 @@ export class AccountDetailDialog implements OnDestroy, OnInit {
.deleteAccountBalance(aId)
.pipe(takeUntil(this.unsubscribeSubject))
.subscribe(() => {
this.fetchAccount();
this.fetchAccountBalances();
this.fetchPortfolioPerformance();
this.initialize();
});
}
@ -198,17 +190,6 @@ export class AccountDetailDialog implements OnDestroy, OnInit {
);
}
private fetchAccountBalances() {
this.dataService
.fetchAccountBalances(this.data.accountId)
.pipe(takeUntil(this.unsubscribeSubject))
.subscribe(({ balances }) => {
this.accountBalances = balances;
this.changeDetectorRef.markForCheck();
});
}
private fetchActivities() {
this.isLoadingActivities = true;
@ -229,6 +210,58 @@ export class AccountDetailDialog implements OnDestroy, OnInit {
});
}
private fetchChart() {
this.isLoadingChart = true;
forkJoin({
accountBalances: this.dataService
.fetchAccountBalances(this.data.accountId)
.pipe(takeUntil(this.unsubscribeSubject)),
portfolioPerformance: this.dataService
.fetchPortfolioPerformance({
filters: [
{
id: this.data.accountId,
type: 'ACCOUNT'
}
],
range: 'max',
withExcludedAccounts: true,
withItems: true
})
.pipe(takeUntil(this.unsubscribeSubject))
}).subscribe({
error: () => {
this.isLoadingChart = false;
},
next: ({ accountBalances, portfolioPerformance }) => {
this.accountBalances = accountBalances.balances;
if (portfolioPerformance.chart.length > 0) {
this.historicalDataItems = portfolioPerformance.chart.map(
({ date, netWorth, netWorthInPercentage }) => ({
date,
value: isNumber(netWorth) ? netWorth : netWorthInPercentage
})
);
} else {
this.historicalDataItems = this.accountBalances.map(
({ date, valueInBaseCurrency }) => {
return {
date: format(date, DATE_FORMAT),
value: valueInBaseCurrency
};
}
);
}
this.isLoadingChart = false;
this.changeDetectorRef.markForCheck();
}
});
}
private fetchPortfolioHoldings() {
this.dataService
.fetchPortfolioHoldings({
@ -247,36 +280,11 @@ export class AccountDetailDialog implements OnDestroy, OnInit {
});
}
private fetchPortfolioPerformance() {
this.isLoadingChart = true;
this.dataService
.fetchPortfolioPerformance({
filters: [
{
id: this.data.accountId,
type: 'ACCOUNT'
}
],
range: 'max',
withExcludedAccounts: true,
withItems: true
})
.pipe(takeUntil(this.unsubscribeSubject))
.subscribe(({ chart }) => {
this.historicalDataItems = chart.map(
({ date, netWorth, netWorthInPercentage }) => {
return {
date,
value: isNumber(netWorth) ? netWorth : netWorthInPercentage
};
}
);
this.isLoadingChart = false;
this.changeDetectorRef.markForCheck();
});
private initialize() {
this.fetchAccount();
this.fetchActivities();
this.fetchChart();
this.fetchPortfolioHoldings();
}
public ngOnDestroy() {

28
apps/client/src/app/components/account-detail-dialog/account-detail-dialog.html
View File

@ -20,20 +20,20 @@
</div>
</div>
<!-- TODO
<div class="chart-container mb-3">
<gf-investment-chart
class="h-100"
[currency]="user?.settings?.baseCurrency"
[historicalDataItems]="historicalDataItems"
[isInPercent]="
data.hasImpersonationId || user.settings.isRestrictedView
"
[isLoading]="isLoadingChart"
[locale]="user?.settings?.locale"
/>
</div>
-->
@if (user?.settings?.isExperimentalFeatures) {
<div class="chart-container mb-3">
<gf-investment-chart
class="h-100"
[currency]="user?.settings?.baseCurrency"
[historicalDataItems]="historicalDataItems"
[isInPercent]="
data.hasImpersonationId || user.settings.isRestrictedView
"
[isLoading]="isLoadingChart"
[locale]="user?.settings?.locale"
/>
</div>
}
<div class="mb-3 row">
<div class="col-6 mb-3">

2
libs/common/src/lib/interfaces/responses/account-balances-response.interface.ts
View File

@ -1,7 +1,7 @@
import { AccountBalance } from '@prisma/client';
export interface AccountBalancesResponse {
balances: (Pick<AccountBalance, 'date' | 'id' | 'value'> & {
balances: (Pick<AccountBalance, 'accountId' | 'date' | 'id' | 'value'> & {
valueInBaseCurrency: number;
})[];
}