+
Platform
@if (selectedPlatform) {
@@ -51,8 +51,8 @@
class="ml-3"
matPrefix
[hasPlaceholder]="true"
- [tooltip]="selectedPlatform?.name"
- [url]="selectedPlatform?.url"
+ [tooltip]="selectedPlatform.name ?? ''"
+ [url]="selectedPlatform.url"
/>
}
{{ platformEntry.name }}
diff --git a/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts b/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts
index 62debb78a5..26e52678c7 100644
--- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts
+++ b/apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts
@@ -5,6 +5,7 @@ import {
DEFAULT_DATE_RANGE,
NUMERICAL_PRECISION_THRESHOLD_6_FIGURES
} from '@ghostfolio/common/config';
+import { SubscriptionType } from '@ghostfolio/common/enums';
import { canOpenHoldingDetail } from '@ghostfolio/common/helper';
import {
InvestmentItem,
@@ -93,6 +94,7 @@ export class GfAnalysisPageComponent implements OnInit {
protected isLoadingDividendTimelineChart: boolean;
protected isLoadingInvestmentChart: boolean;
protected isLoadingInvestmentTimelineChart: boolean;
+ protected isLoadingPerformanceTimelineChart: boolean;
protected isLoadingPortfolioPrompt: boolean;
protected readonly mode = signal('month');
protected readonly modeOptions: ToggleOption[] = [
@@ -103,7 +105,9 @@ export class GfAnalysisPageComponent implements OnInit {
protected readonly PerformanceCalculationType = PerformanceCalculationType;
protected performanceDataItems: LineChartItem[];
protected performanceDataItemsInPercentage: LineChartItem[];
- protected readonly portfolioEvolutionDataLabel = $localize`Investment`;
+ protected performancePercentagesByYear: InvestmentItem[];
+ protected readonly performanceTimelineDataLabel = $localize`Net Performance`;
+ protected readonly portfolioEvolutionDataLabel = $localize`Invested Capital`;
protected precision = 2;
protected savingsRatePerMonth: number | undefined;
protected streaks: PortfolioInvestmentsResponse['streaks'];
@@ -312,6 +316,37 @@ export class GfAnalysisPageComponent implements OnInit {
);
}
+ private fetchPerformanceByYear() {
+ this.isLoadingPerformanceTimelineChart = true;
+
+ this.dataService
+ .fetchPortfolioPerformance({
+ filters: this.userService.getFilters(),
+ groupBy: 'year',
+ range: this.user?.settings?.dateRange ?? DEFAULT_DATE_RANGE
+ })
+ .pipe(takeUntilDestroyed(this.destroyRef))
+ .subscribe(({ chart }) => {
+ this.performancePercentagesByYear = [];
+
+ for (const {
+ date,
+ netPerformanceInPercentageWithCurrencyEffect
+ } of chart ?? []) {
+ if (isNumber(netPerformanceInPercentageWithCurrencyEffect)) {
+ this.performancePercentagesByYear.push({
+ date,
+ investment: netPerformanceInPercentageWithCurrencyEffect
+ });
+ }
+ }
+
+ this.isLoadingPerformanceTimelineChart = false;
+
+ this.changeDetectorRef.markForCheck();
+ });
+ }
+
private update() {
this.isLoadingInvestmentChart = true;
@@ -420,6 +455,13 @@ export class GfAnalysisPageComponent implements OnInit {
this.fetchDividendsAndInvestments();
+ if (
+ this.user?.settings?.isExperimentalFeatures &&
+ this.user?.subscription?.type !== SubscriptionType.Basic
+ ) {
+ this.fetchPerformanceByYear();
+ }
+
this.changeDetectorRef.markForCheck();
}
diff --git a/apps/client/src/app/pages/portfolio/analysis/analysis-page.html b/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
index c39b774f4b..6f05dae069 100644
--- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
+++ b/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
@@ -430,6 +430,35 @@