Release 1.55.0 (#383)

* Fix create or edit transaction dialog

* Update changelog

.storybook/main.js

@@ -0,0 +1,11 @@
+module.exports = {
+  stories: [],
+  addons: ['@storybook/addon-essentials']
+  // uncomment the property below if you want to apply some webpack config globally
+  // webpackFinal: async (config, { configType }) => {
+  //   // Make whatever fine-grained changes you need that should apply to all storybook configs
+
+  //   // Return the altered config
+  //   return config;
+  // },
+};

.storybook/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.base.json",
+  "exclude": [
+    "../**/*.spec.js",
+    "../**/*.spec.ts",
+    "../**/*.spec.tsx",
+    "../**/*.spec.jsx"
+  ],
+  "include": ["../**/*"]
+}

CHANGELOG.md

@@ -5,6 +5,146 @@ 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).
 
+## 1.55.0 - 20.09.2021
+
+### Changed
+
+- Removed the default value of the data source attribute
+- Upgraded `@storybook` dependencies
+
+### Fixed
+
+- Fixed an issue in the create or edit transaction dialog
+
+### Todo
+
+- Apply data migration (`yarn prisma migrate deploy`)
+
+## 1.54.0 - 18.09.2021
+
+### Added
+
+- Added the data source attribute to the symbol profile model
+
+### Changed
+
+- Respected the data source attribute in the data provider service
+- Respected the data source attribute in the symbol data endpoint
+- Improved the search functionality of the data management (multiple data sources)
+
+### Fixed
+
+- Hid the net performance in the _Presenter View_ (portfolio holdings and summary tab on the home page)
+- Hid the sign if the performance is zero in the value component
+
+### Todo
+
+- Apply data migration (`yarn prisma migrate deploy`)
+
+## 1.53.0 - 13.09.2021
+
+### Changed
+
+- Optimized the annualized performance calculation
+- Changed the data gathering selection from distinct orders to symbol profiles
+
+## 1.52.0 - 11.09.2021
+
+### Added
+
+- Added the annualized performance to the portfolio summary tab on the home page
+- Added the Ghostfolio Slack channel to the about page
+
+### Changed
+
+- Upgraded `@simplewebauthn/browser` and `@simplewebauthn/server` from version `3.0.0` to `4.1.0`
+
+### Fixed
+
+- Fixed the sign in with fingerprint for some android devices
+
+## 1.51.0 - 11.09.2021
+
+### Changed
+
+- Provided the name in the portfolio position endpoint
+
+## 1.50.0 - 11.09.2021
+
+### Fixed
+
+- Fixed the _Fear & Greed Index_ (market mood)
+- Fixed the overlap of the home button with tabs on iOS (_Add to Home Screen_)
+
+## 1.49.0 - 08.09.2021
+
+### Added
+
+- Added labels to the allocation chart by symbol on desktop
+
+## 1.48.0 - 07.09.2021
+
+### Added
+
+- Added the attribute `precision` in the value component
+
+### Fixed
+
+- Hid the performance in the _Presenter View_
+
+## 1.47.1 - 06.09.2021
+
+### Fixed
+
+- Fixed the search functionality for cryptocurrency symbols
+
+## 1.46.0 - 05.09.2021
+
+### Added
+
+- Extended the statistics section on the about page by the _GitHub_ contributors count
+- Set up _Storybook_
+  - Added a story for the logo component
+  - Added a story for the no transactions info component
+  - Added a story for the trend indicator component
+  - Added a story for the value component
+
+### Changed
+
+- Switched from gross to net performance
+- Restructured the portfolio summary tab on the home page (fees and net performance)
+
+## 1.45.0 - 04.09.2021
+
+### Added
+
+- Added a link below the holdings to manage the transactions
+- Added the allocation chart by symbol
+
+### Changed
+
+- Restructured the allocations page
+- Upgraded `angular` from version `12.0.4` to `12.2.4`
+- Upgraded `@angular/cdk` and `@angular/material` from version `12.0.6` to `12.2.4`
+- Upgraded `Nx` from version `12.5.4` to `12.8.0`
+- Upgraded `prisma` from version `2.24.1` to `2.30.2`
+
+### Fixed
+
+- Fixed the value formatting for integers (transactions count)
+
+## 1.44.0 - 30.08.2021
+
+### Changed
+
+- Extended the sub classification of assets by cash
+- Upgraded `svgmap` from version `2.1.1` to `2.6.0`
+
+### Fixed
+
+- Filtered out positions without any quantity in the positions table
+- Improved the symbol lookup: allow saving with valid symbol in create or edit transaction dialog
+
 ## 1.43.0 - 24.08.2021
 
 ### Added
@@ -21,7 +161,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Todo
 
-- Apply data migration (`yarn database:push`)
+- Apply data migration (`yarn prisma migrate deploy`)
 
 ## 1.41.0 - 21.08.2021
 
@@ -74,7 +214,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Todo
 
-- Apply data migration (`yarn database:push`)
+- Apply data migration (`yarn prisma migrate deploy`)
 
 ## 1.38.0 - 14.08.2021
 
@@ -134,7 +274,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Todo
 
-- Apply data migration (`yarn database:push`)
+- Apply data migration (`yarn prisma migrate deploy`)
 
 ## 1.34.0 - 07.08.2021
 

README.md

@@ -12,7 +12,7 @@
     <strong>Open Source Wealth Management Software made for Humans</strong>
   </p>
   <p>
-    <a href="https://ghostfol.io"><strong>Live Demo</strong></a> | <a href="https://ghostfol.io/pricing"><strong>Ghostfolio Premium</strong></a> | <a href="https://ghostfol.io/en/blog/2021/07/hello-ghostfolio"><strong>Blog</strong></a> | <a href="https://twitter.com/ghostfolio_"><strong>Twitter</strong></a>
+    <a href="https://ghostfol.io"><strong>Live Demo</strong></a> | <a href="https://ghostfol.io/pricing"><strong>Ghostfolio Premium</strong></a> | <a href="https://ghostfol.io/en/blog/2021/07/hello-ghostfolio"><strong>Blog</strong></a> | <a href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"><strong>Slack</strong></a> | <a href="https://twitter.com/ghostfolio_"><strong>Twitter</strong></a>
   </p>
   <p>
     <a href="#contributing">
@@ -62,7 +62,7 @@ Ghostfolio is for you if you are...
 
 - ✅ Create, update and delete transactions
 - ✅ Multi account management
-- ✅ Portfolio performance (`Today`, `YTD`, `1Y`, `5Y`, `Max`)
+- ✅ Portfolio performance: Time-weighted rate of return (TWR) for `Today`, `YTD`, `1Y`, `5Y`, `Max`
 - ✅ Various charts
 - ✅ Static analysis to identify potential risks in your portfolio
 - ✅ Dark Mode
@@ -116,6 +116,10 @@ Please make sure you have completed the instructions from [_Setup_](#Setup).
 
 Run `yarn start:client`
 
+### Start _Storybook_
+
+Run `yarn start:storybook`
+
 ## Testing
 
 Run `yarn test`
@@ -124,7 +128,7 @@ Run `yarn test`
 
 Ghostfolio is **100% free** and **open source**. We encourage and support an active and healthy community that accepts contributions from the public - including you.
 
-Not sure what to work on? We have got some ideas. Please tweet to [@ghostfolio\_](https://twitter.com/ghostfolio_) or send an e-mail to hi@ghostfol.io. We would love to hear from you.
+Not sure what to work on? We have got some ideas. Please join the Ghostfolio [Slack channel](https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg), tweet to [@ghostfolio\_](https://twitter.com/ghostfolio_) or send an e-mail to hi@ghostfol.io. We would love to hear from you.
 
 ## License
 

angular.json

@@ -6,13 +6,16 @@
   "defaultProject": "api",
   "schematics": {
     "@nrwl/angular:application": {
+      "linter": "eslint",
       "unitTestRunner": "jest",
       "e2eTestRunner": "cypress"
     },
     "@nrwl/angular:library": {
+      "linter": "eslint",
       "unitTestRunner": "jest"
     },
-    "@nrwl/nest": {}
+    "@nrwl/nest": {},
+    "@nrwl/angular:component": {}
   },
   "projects": {
     "api": {
@@ -239,6 +242,90 @@
           }
         }
       }
+    },
+    "ui": {
+      "projectType": "library",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
+      "root": "libs/ui",
+      "sourceRoot": "libs/ui/src",
+      "prefix": "gf",
+      "architect": {
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "outputs": ["coverage/libs/ui"],
+          "options": {
+            "jestConfig": "libs/ui/jest.config.js",
+            "passWithNoTests": true
+          }
+        },
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": ["libs/ui/src/**/*.ts", "libs/ui/src/**/*.html"]
+          }
+        },
+        "storybook": {
+          "builder": "@nrwl/storybook:storybook",
+          "options": {
+            "uiFramework": "@storybook/angular",
+            "port": 4400,
+            "config": {
+              "configFolder": "libs/ui/.storybook"
+            }
+          },
+          "configurations": {
+            "ci": {
+              "quiet": true
+            }
+          }
+        },
+        "build-storybook": {
+          "builder": "@nrwl/storybook:build",
+          "outputs": ["{options.outputPath}"],
+          "options": {
+            "uiFramework": "@storybook/angular",
+            "outputPath": "dist/storybook/ui",
+            "config": {
+              "configFolder": "libs/ui/.storybook"
+            }
+          },
+          "configurations": {
+            "ci": {
+              "quiet": true
+            }
+          }
+        }
+      }
+    },
+    "ui-e2e": {
+      "root": "apps/ui-e2e",
+      "sourceRoot": "apps/ui-e2e/src",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@nrwl/cypress:cypress",
+          "options": {
+            "cypressConfig": "apps/ui-e2e/cypress.json",
+            "devServerTarget": "ui:storybook",
+            "tsConfig": "apps/ui-e2e/tsconfig.json"
+          },
+          "configurations": {
+            "ci": {
+              "devServerTarget": "ui:storybook:ci"
+            }
+          }
+        },
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": ["apps/ui-e2e/**/*.{js,ts}"]
+          }
+        }
+      }
     }
   }
 }

apps/api/src/app/access/access.controller.ts

@@ -1,5 +1,5 @@
 import { Access } from '@ghostfolio/common/interfaces';
-import { RequestWithUser } from '@ghostfolio/common/types';
+import type { RequestWithUser } from '@ghostfolio/common/types';
 import { Controller, Get, Inject, UseGuards } from '@nestjs/common';
 import { REQUEST } from '@nestjs/core';
 import { AuthGuard } from '@nestjs/passport';

apps/api/src/app/account/account.controller.ts

@@ -6,7 +6,7 @@ import {
   hasPermission,
   permissions
 } from '@ghostfolio/common/permissions';
-import { RequestWithUser } from '@ghostfolio/common/types';
+import type { RequestWithUser } from '@ghostfolio/common/types';
 import {
   Body,
   Controller,

apps/api/src/app/admin/admin.controller.ts

@@ -5,7 +5,7 @@ import {
   hasPermission,
   permissions
 } from '@ghostfolio/common/permissions';
-import { RequestWithUser } from '@ghostfolio/common/types';
+import type { RequestWithUser } from '@ghostfolio/common/types';
 import {
   Controller,
   Get,

apps/api/src/app/auth-device/auth-device.controller.ts

@@ -4,7 +4,7 @@ import {
   hasPermission,
   permissions
 } from '@ghostfolio/common/permissions';
-import { RequestWithUser } from '@ghostfolio/common/types';
+import type { RequestWithUser } from '@ghostfolio/common/types';
 import {
   Controller,
   Delete,

apps/api/src/app/auth/auth.controller.ts

@@ -62,10 +62,10 @@ export class AuthController {
     }
   }
 
-  @Get('webauthn/generate-attestation-options')
+  @Get('webauthn/generate-registration-options')
   @UseGuards(AuthGuard('jwt'))
-  public async generateAttestationOptions() {
+  public async generateRegistrationOptions() {
-    return this.webAuthService.generateAttestationOptions();
+    return this.webAuthService.generateRegistrationOptions();
   }
 
   @Post('webauthn/verify-attestation')

apps/api/src/app/auth/web-auth.service.ts

@@ -2,7 +2,7 @@ import { AuthDeviceDto } from '@ghostfolio/api/app/auth-device/auth-device.dto';
 import { AuthDeviceService } from '@ghostfolio/api/app/auth-device/auth-device.service';
 import { UserService } from '@ghostfolio/api/app/user/user.service';
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
-import { RequestWithUser } from '@ghostfolio/common/types';
+import type { RequestWithUser } from '@ghostfolio/common/types';
 import {
   Inject,
   Injectable,
@@ -11,16 +11,16 @@ import {
 import { REQUEST } from '@nestjs/core';
 import { JwtService } from '@nestjs/jwt';
 import {
-  GenerateAssertionOptionsOpts,
+  GenerateAuthenticationOptionsOpts,
-  GenerateAttestationOptionsOpts,
+  GenerateRegistrationOptionsOpts,
-  VerifiedAssertion,
+  VerifiedAuthenticationResponse,
-  VerifiedAttestation,
+  VerifiedRegistrationResponse,
-  VerifyAssertionResponseOpts,
+  VerifyAuthenticationResponseOpts,
-  VerifyAttestationResponseOpts,
+  VerifyRegistrationResponseOpts,
-  generateAssertionOptions,
+  generateAuthenticationOptions,
-  generateAttestationOptions,
+  generateRegistrationOptions,
-  verifyAssertionResponse,
+  verifyAuthenticationResponse,
-  verifyAttestationResponse
+  verifyRegistrationResponse
 } from '@simplewebauthn/server';
 
 import {
@@ -46,10 +46,10 @@ export class WebAuthService {
     return this.configurationService.get('ROOT_URL');
   }
 
-  public async generateAttestationOptions() {
+  public async generateRegistrationOptions() {
     const user = this.request.user;
 
-    const opts: GenerateAttestationOptionsOpts = {
+    const opts: GenerateRegistrationOptionsOpts = {
       rpName: 'Ghostfolio',
       rpID: this.rpID,
       userID: user.id,
@@ -63,7 +63,7 @@ export class WebAuthService {
       }
     };
 
-    const options = generateAttestationOptions(opts);
+    const options = generateRegistrationOptions(opts);
 
     await this.userService.updateUser({
       data: {
@@ -84,27 +84,27 @@ export class WebAuthService {
     const user = this.request.user;
     const expectedChallenge = user.authChallenge;
 
-    let verification: VerifiedAttestation;
+    let verification: VerifiedRegistrationResponse;
     try {
-      const opts: VerifyAttestationResponseOpts = {
+      const opts: VerifyRegistrationResponseOpts = {
         credential,
         expectedChallenge,
         expectedOrigin: this.expectedOrigin,
         expectedRPID: this.rpID
       };
-      verification = await verifyAttestationResponse(opts);
+      verification = await verifyRegistrationResponse(opts);
     } catch (error) {
       console.error(error);
       throw new InternalServerErrorException(error.message);
     }
 
-    const { verified, attestationInfo } = verification;
+    const { registrationInfo, verified } = verification;
 
     const devices = await this.deviceService.authDevices({
       where: { userId: user.id }
     });
-    if (verified && attestationInfo) {
+    if (registrationInfo && verified) {
-      const { credentialPublicKey, credentialID, counter } = attestationInfo;
+      const { counter, credentialID, credentialPublicKey } = registrationInfo;
 
       let existingDevice = devices.find(
         (device) => device.credentialId === credentialID
@@ -115,9 +115,9 @@ export class WebAuthService {
          * Add the returned device to the user's list of devices
          */
         existingDevice = await this.deviceService.createAuthDevice({
+          counter,
           credentialPublicKey,
           credentialId: credentialID,
-          counter,
           User: { connect: { id: user.id } }
         });
       }
@@ -138,20 +138,20 @@ export class WebAuthService {
       throw new Error('Device not found');
     }
 
-    const opts: GenerateAssertionOptionsOpts = {
+    const opts: GenerateAuthenticationOptionsOpts = {
-      timeout: 60000,
       allowCredentials: [
         {
           id: device.credentialId,
-          type: 'public-key',
+          transports: ['internal'],
-          transports: ['internal']
+          type: 'public-key'
         }
       ],
-      userVerification: 'preferred',
+      rpID: this.rpID,
-      rpID: this.rpID
+      timeout: 60000,
+      userVerification: 'preferred'
     };
 
-    const options = generateAssertionOptions(opts);
+    const options = generateAuthenticationOptions(opts);
 
     await this.userService.updateUser({
       data: {
@@ -177,29 +177,29 @@ export class WebAuthService {
 
     const user = await this.userService.user({ id: device.userId });
 
-    let verification: VerifiedAssertion;
+    let verification: VerifiedAuthenticationResponse;
     try {
-      const opts: VerifyAssertionResponseOpts = {
+      const opts: VerifyAuthenticationResponseOpts = {
         credential,
-        expectedChallenge: `${user.authChallenge}`,
-        expectedOrigin: this.expectedOrigin,
-        expectedRPID: this.rpID,
         authenticator: {
           credentialID: device.credentialId,
           credentialPublicKey: device.credentialPublicKey,
           counter: device.counter
-        }
+        },
+        expectedChallenge: `${user.authChallenge}`,
+        expectedOrigin: this.expectedOrigin,
+        expectedRPID: this.rpID
       };
-      verification = verifyAssertionResponse(opts);
+      verification = verifyAuthenticationResponse(opts);
     } catch (error) {
       console.error(error);
       throw new InternalServerErrorException({ error: error.message });
     }
 
-    const { verified, assertionInfo } = verification;
+    const { verified, authenticationInfo } = verification;
 
     if (verified) {
-      device.counter = assertionInfo.newCounter;
+      device.counter = authenticationInfo.newCounter;
 
       await this.deviceService.updateAuthDevice({
         data: device,

apps/api/src/app/cache/cache.controller.ts

@@ -1,6 +1,6 @@
 import { CacheService } from '@ghostfolio/api/app/cache/cache.service';
 import { RedisCacheService } from '@ghostfolio/api/app/redis-cache/redis-cache.service';
-import { RequestWithUser } from '@ghostfolio/common/types';
+import type { RequestWithUser } from '@ghostfolio/common/types';
 import { Controller, Inject, Post, UseGuards } from '@nestjs/common';
 import { REQUEST } from '@nestjs/core';
 import { AuthGuard } from '@nestjs/passport';

apps/api/src/app/experimental/experimental.controller.ts

@@ -1,7 +1,7 @@
 import { baseCurrency, benchmarks } from '@ghostfolio/common/config';
 import { DATE_FORMAT } from '@ghostfolio/common/helper';
 import { isApiTokenAuthorized } from '@ghostfolio/common/permissions';
-import { RequestWithUser } from '@ghostfolio/common/types';
+import type { RequestWithUser } from '@ghostfolio/common/types';
 import {
   Body,
   Controller,

apps/api/src/app/export/export.controller.ts

@@ -1,5 +1,5 @@
 import { Export } from '@ghostfolio/common/interfaces';
-import { RequestWithUser } from '@ghostfolio/common/types';
+import type { RequestWithUser } from '@ghostfolio/common/types';
 import { Controller, Get, Inject, UseGuards } from '@nestjs/common';
 import { REQUEST } from '@nestjs/core';
 import { AuthGuard } from '@nestjs/passport';

apps/api/src/app/import/import.controller.ts

@@ -1,5 +1,5 @@
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
-import { RequestWithUser } from '@ghostfolio/common/types';
+import type { RequestWithUser } from '@ghostfolio/common/types';
 import {
   Body,
   Controller,

apps/api/src/app/info/info.service.ts

@@ -90,6 +90,27 @@ export class InfoService {
     });
   }
 
+  private async countGitHubContributors(): Promise<number> {
+    try {
+      const get = bent(
+        `https://api.github.com/repos/ghostfolio/ghostfolio/contributors`,
+        'GET',
+        'json',
+        200,
+        {
+          'User-Agent': 'request'
+        }
+      );
+
+      const contributors = await get();
+      return contributors?.length;
+    } catch (error) {
+      console.error(error);
+
+      return undefined;
+    }
+  }
+
   private async countGitHubStargazers(): Promise<number> {
     try {
       const get = bent(
@@ -131,11 +152,13 @@ export class InfoService {
 
     const activeUsers1d = await this.countActiveUsers(1);
     const activeUsers30d = await this.countActiveUsers(30);
+    const gitHubContributors = await this.countGitHubContributors();
     const gitHubStargazers = await this.countGitHubStargazers();
 
     return {
       activeUsers1d,
       activeUsers30d,
+      gitHubContributors,
       gitHubStargazers
     };
   }

apps/api/src/app/order/order.controller.ts

@@ -6,7 +6,7 @@ import {
   hasPermission,
   permissions
 } from '@ghostfolio/common/permissions';
-import { RequestWithUser } from '@ghostfolio/common/types';
+import type { RequestWithUser } from '@ghostfolio/common/types';
 import {
   Body,
   Controller,

apps/api/src/app/order/order.service.ts

@@ -56,7 +56,9 @@ export class OrderService {
       ]);
     }
 
-    this.dataGatheringService.gatherProfileData([data.symbol]);
+    this.dataGatheringService.gatherProfileData([
+      { dataSource: data.dataSource, symbol: data.symbol }
+    ]);
 
     await this.cacheService.flush();
 

apps/api/src/app/portfolio/current-rate.service.spec.ts

@@ -1,6 +1,6 @@
 import { DataProviderService } from '@ghostfolio/api/services/data-provider/data-provider.service';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
-import { Currency, MarketData } from '@prisma/client';
+import { Currency, DataSource, MarketData } from '@prisma/client';
 
 import { CurrentRateService } from './current-rate.service';
 import { MarketDataService } from './market-data.service';
@@ -14,6 +14,7 @@ jest.mock('./market-data.service', () => {
             date,
             symbol,
             createdAt: date,
+            dataSource: DataSource.YAHOO,
             id: 'aefcbe3a-ee10-4c4f-9f2d-8ffad7b05584',
             marketPrice: 1847.839966
           });
@@ -30,6 +31,7 @@ jest.mock('./market-data.service', () => {
           return Promise.resolve<MarketData[]>([
             {
               createdAt: dateRangeStart,
+              dataSource: DataSource.YAHOO,
               date: dateRangeStart,
               id: '8fa48fde-f397-4b0d-adbc-fb940e830e6d',
               marketPrice: 1841.823902,
@@ -37,6 +39,7 @@ jest.mock('./market-data.service', () => {
             },
             {
               createdAt: dateRangeEnd,
+              dataSource: DataSource.YAHOO,
               date: dateRangeEnd,
               id: '082d6893-df27-4c91-8a5d-092e84315b56',
               marketPrice: 1847.839966,
@@ -106,11 +109,11 @@ describe('CurrentRateService', () => {
     expect(
       await currentRateService.getValues({
         currencies: { AMZN: Currency.USD },
+        dataGatheringItems: [{ dataSource: DataSource.YAHOO, symbol: 'AMZN' }],
         dateQuery: {
           lt: new Date(Date.UTC(2020, 0, 2, 0, 0, 0)),
           gte: new Date(Date.UTC(2020, 0, 1, 0, 0, 0))
         },
-        symbols: ['AMZN'],
         userCurrency: Currency.CHF
       })
     ).toMatchObject([

apps/api/src/app/portfolio/current-rate.service.ts

@@ -2,6 +2,7 @@ import { DataProviderService } from '@ghostfolio/api/services/data-provider/data
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 import { resetHours } from '@ghostfolio/common/helper';
 import { Injectable } from '@nestjs/common';
+import { DataSource } from '@prisma/client';
 import { isBefore, isToday } from 'date-fns';
 import { flatten } from 'lodash';
 
@@ -25,7 +26,9 @@ export class CurrentRateService {
     userCurrency
   }: GetValueParams): Promise<GetValueObject> {
     if (isToday(date)) {
-      const dataProviderResult = await this.dataProviderService.get([symbol]);
+      const dataProviderResult = await this.dataProviderService.get([
+        { symbol, dataSource: DataSource.YAHOO }
+      ]);
       return {
         date: resetHours(date),
         marketPrice: dataProviderResult?.[symbol]?.marketPrice ?? 0,
@@ -55,8 +58,8 @@ export class CurrentRateService {
 
   public async getValues({
     currencies,
+    dataGatheringItems,
     dateQuery,
-    symbols,
     userCurrency
   }: GetValuesParams): Promise<GetValueObject[]> {
     const includeToday =
@@ -75,17 +78,20 @@ export class CurrentRateService {
     if (includeToday) {
       const today = resetHours(new Date());
       promises.push(
-        this.dataProviderService.get(symbols).then((dataResultProvider) => {
+        this.dataProviderService
+          .get(dataGatheringItems)
+          .then((dataResultProvider) => {
             const result = [];
-          for (const symbol of symbols) {
+            for (const dataGatheringItem of dataGatheringItems) {
               result.push({
-              symbol,
                 date: today,
                 marketPrice: this.exchangeRateDataService.toCurrency(
-                dataResultProvider?.[symbol]?.marketPrice ?? 0,
+                  dataResultProvider?.[dataGatheringItem.symbol]?.marketPrice ??
-                dataResultProvider?.[symbol]?.currency,
+                    0,
+                  dataResultProvider?.[dataGatheringItem.symbol]?.currency,
                   userCurrency
-              )
+                ),
+                symbol: dataGatheringItem.symbol
               });
             }
             return result;
@@ -93,6 +99,10 @@ export class CurrentRateService {
       );
     }
 
+    const symbols = dataGatheringItems.map((dataGatheringItem) => {
+      return dataGatheringItem.symbol;
+    });
+
     promises.push(
       this.marketDataService
         .getRange({

apps/api/src/app/portfolio/interfaces/current-positions.interface.ts

@@ -6,6 +6,9 @@ export interface CurrentPositions {
   positions: TimelinePosition[];
   grossPerformance: Big;
   grossPerformancePercentage: Big;
+  netAnnualizedPerformance: Big;
+  netPerformance: Big;
+  netPerformancePercentage: Big;
   currentValue: Big;
   totalInvestment: Big;
 }

apps/api/src/app/portfolio/interfaces/get-values-params.interface.ts

@@ -1,10 +1,11 @@
+import { IDataGatheringItem } from '@ghostfolio/api/services/interfaces/interfaces';
 import { Currency } from '@prisma/client';
 
 import { DateQuery } from './date-query.interface';
 
 export interface GetValuesParams {
   currencies: { [symbol: string]: Currency };
+  dataGatheringItems: IDataGatheringItem[];
   dateQuery: DateQuery;
-  symbols: string[];
   userCurrency: Currency;
 }

apps/api/src/app/portfolio/interfaces/portfolio-order.interface.ts

@@ -1,10 +1,12 @@
 import { OrderType } from '@ghostfolio/api/models/order-type';
-import { Currency } from '@prisma/client';
+import { Currency, DataSource } from '@prisma/client';
 import Big from 'big.js';
 
 export interface PortfolioOrder {
   currency: Currency;
   date: string;
+  dataSource: DataSource;
+  fee: Big;
   name: string;
   quantity: Big;
   symbol: string;

apps/api/src/app/portfolio/interfaces/portfolio-position-detail.interface.ts

@@ -11,6 +11,9 @@ export interface PortfolioPositionDetail {
   marketPrice: number;
   maxPrice: number;
   minPrice: number;
+  name: string;
+  netPerformance: number;
+  netPerformancePercent: number;
   quantity: number;
   symbol: string;
   transactionCount: number;

apps/api/src/app/portfolio/interfaces/timeline-period.interface.ts

@@ -4,5 +4,6 @@ export interface TimelinePeriod {
   date: string;
   grossPerformance: Big;
   investment: Big;
+  netPerformance: Big;
   value: Big;
 }

apps/api/src/app/portfolio/interfaces/transaction-point-symbol.interface.ts

@@ -1,8 +1,10 @@
-import { Currency } from '@prisma/client';
+import { Currency, DataSource } from '@prisma/client';
 import Big from 'big.js';
 
 export interface TransactionPointSymbol {
   currency: Currency;
+  dataSource: DataSource;
+  fee: Big;
   firstBuyDate: string;
   investment: Big;
   quantity: Big;

apps/api/src/app/portfolio/portfolio-calculator.ts

@@ -1,12 +1,14 @@
 import { OrderType } from '@ghostfolio/api/models/order-type';
+import { IDataGatheringItem } from '@ghostfolio/api/services/interfaces/interfaces';
 import { DATE_FORMAT, parseDate, resetHours } from '@ghostfolio/common/helper';
 import { TimelinePosition } from '@ghostfolio/common/interfaces';
-import { Currency } from '@prisma/client';
+import { Currency, DataSource } from '@prisma/client';
 import Big from 'big.js';
 import {
   addDays,
   addMonths,
   addYears,
+  differenceInDays,
   endOfDay,
   format,
   isAfter,
@@ -14,7 +16,7 @@ import {
   max,
   min
 } from 'date-fns';
-import { flatten } from 'lodash';
+import { flatten, isNumber } from 'lodash';
 
 import { CurrentRateService } from './current-rate.service';
 import { CurrentPositions } from './interfaces/current-positions.interface';
@@ -58,6 +60,8 @@ export class PortfolioCalculator {
           .plus(oldAccumulatedSymbol.quantity);
         currentTransactionPointItem = {
           currency: order.currency,
+          dataSource: order.dataSource,
+          fee: order.fee.plus(oldAccumulatedSymbol.fee),
           firstBuyDate: oldAccumulatedSymbol.firstBuyDate,
           investment: newQuantity.eq(0)
             ? new Big(0)
@@ -72,6 +76,8 @@ export class PortfolioCalculator {
       } else {
         currentTransactionPointItem = {
           currency: order.currency,
+          dataSource: order.dataSource,
+          fee: order.fee,
           firstBuyDate: order.date,
           investment: unitPrice.mul(order.quantity).mul(factor),
           quantity: order.quantity.mul(factor),
@@ -101,6 +107,23 @@ export class PortfolioCalculator {
     }
   }
 
+  public getAnnualizedPerformancePercent({
+    daysInMarket,
+    netPerformancePercent
+  }: {
+    daysInMarket: number;
+    netPerformancePercent: Big;
+  }): Big {
+    if (isNumber(daysInMarket) && daysInMarket > 0) {
+      const exponent = new Big(365).div(daysInMarket).toNumber();
+      return new Big(
+        Math.pow(netPerformancePercent.plus(1).toNumber(), exponent)
+      ).minus(1);
+    }
+
+    return new Big(0);
+  }
+
   public getTransactionPoints(): TransactionPoint[] {
     return this.transactionPoints;
   }
@@ -112,11 +135,14 @@ export class PortfolioCalculator {
   public async getCurrentPositions(start: Date): Promise<CurrentPositions> {
     if (!this.transactionPoints?.length) {
       return {
+        currentValue: new Big(0),
         hasErrors: false,
-        positions: [],
         grossPerformance: new Big(0),
         grossPerformancePercentage: new Big(0),
-        currentValue: new Big(0),
+        netAnnualizedPerformance: new Big(0),
+        netPerformance: new Big(0),
+        netPerformancePercentage: new Big(0),
+        positions: [],
         totalInvestment: new Big(0)
       };
     }
@@ -130,12 +156,15 @@ export class PortfolioCalculator {
     let firstTransactionPoint: TransactionPoint = null;
     let firstIndex = this.transactionPoints.length;
     const dates = [];
-    const symbols = new Set<string>();
+    const dataGatheringItems: IDataGatheringItem[] = [];
     const currencies: { [symbol: string]: Currency } = {};
 
     dates.push(resetHours(start));
     for (const item of this.transactionPoints[firstIndex - 1].items) {
-      symbols.add(item.symbol);
+      dataGatheringItems.push({
+        dataSource: item.dataSource,
+        symbol: item.symbol
+      });
       currencies[item.symbol] = item.currency;
     }
     for (let i = 0; i < this.transactionPoints.length; i++) {
@@ -155,10 +184,10 @@ export class PortfolioCalculator {
 
     const marketSymbols = await this.currentRateService.getValues({
       currencies,
+      dataGatheringItems,
       dateQuery: {
         in: dates
       },
-      symbols: Array.from(symbols),
       userCurrency: this.currency
     });
 
@@ -181,7 +210,9 @@ export class PortfolioCalculator {
     const startString = format(start, DATE_FORMAT);
 
     const holdingPeriodReturns: { [symbol: string]: Big } = {};
+    const netHoldingPeriodReturns: { [symbol: string]: Big } = {};
     const grossPerformance: { [symbol: string]: Big } = {};
+    const netPerformance: { [symbol: string]: Big } = {};
     const todayString = format(today, DATE_FORMAT);
 
     if (firstIndex > 0) {
@@ -190,6 +221,7 @@ export class PortfolioCalculator {
     const invalidSymbols = [];
     const lastInvestments: { [symbol: string]: Big } = {};
     const lastQuantities: { [symbol: string]: Big } = {};
+    const lastFees: { [symbol: string]: Big } = {};
     const initialValues: { [symbol: string]: Big } = {};
 
     for (let i = firstIndex; i < this.transactionPoints.length; i++) {
@@ -202,10 +234,6 @@ export class PortfolioCalculator {
 
       const items = this.transactionPoints[i].items;
       for (const item of items) {
-        let oldHoldingPeriodReturn = holdingPeriodReturns[item.symbol];
-        if (!oldHoldingPeriodReturn) {
-          oldHoldingPeriodReturn = new Big(1);
-        }
         if (!marketSymbolMap[nextDate]?.[item.symbol]) {
           invalidSymbols.push(item.symbol);
           hasErrors = true;
@@ -224,6 +252,13 @@ export class PortfolioCalculator {
         const itemValue = marketSymbolMap[currentDate]?.[item.symbol];
         let initialValue = itemValue?.mul(lastQuantity);
         let investedValue = itemValue?.mul(item.quantity);
+        const isFirstOrderAndIsStartBeforeCurrentDate =
+          i === firstIndex &&
+          isBefore(parseDate(this.transactionPoints[i].date), start);
+        const lastFee: Big = lastFees[item.symbol] ?? new Big(0);
+        const fee = isFirstOrderAndIsStartBeforeCurrentDate
+          ? new Big(0)
+          : item.fee.minus(lastFee);
         if (!isAfter(parseDate(currentDate), parseDate(item.firstBuyDate))) {
           initialValue = item.investment;
           investedValue = item.investment;
@@ -247,18 +282,26 @@ export class PortfolioCalculator {
           );
 
           const holdingPeriodReturn = endValue.div(initialValue.plus(cashFlow));
-          holdingPeriodReturns[item.symbol] =
+          holdingPeriodReturns[item.symbol] = (
-            oldHoldingPeriodReturn.mul(holdingPeriodReturn);
+            holdingPeriodReturns[item.symbol] ?? new Big(1)
-          let oldGrossPerformance = grossPerformance[item.symbol];
+          ).mul(holdingPeriodReturn);
-          if (!oldGrossPerformance) {
+          grossPerformance[item.symbol] = (
-            oldGrossPerformance = new Big(0);
+            grossPerformance[item.symbol] ?? new Big(0)
-          }
+          ).plus(endValue.minus(investedValue));
-          const currentPerformance = endValue.minus(investedValue);
+
-          grossPerformance[item.symbol] =
+          const netHoldingPeriodReturn = endValue.div(
-            oldGrossPerformance.plus(currentPerformance);
+            initialValue.plus(cashFlow).plus(fee)
+          );
+          netHoldingPeriodReturns[item.symbol] = (
+            netHoldingPeriodReturns[item.symbol] ?? new Big(1)
+          ).mul(netHoldingPeriodReturn);
+          netPerformance[item.symbol] = (
+            netPerformance[item.symbol] ?? new Big(0)
+          ).plus(endValue.minus(investedValue).minus(fee));
         }
         lastInvestments[item.symbol] = item.investment;
         lastQuantities[item.symbol] = item.quantity;
+        lastFees[item.symbol] = item.fee;
       }
     }
 
@@ -272,6 +315,7 @@ export class PortfolioCalculator {
           ? new Big(0)
           : item.investment.div(item.quantity),
         currency: item.currency,
+        dataSource: item.dataSource,
         firstBuyDate: item.firstBuyDate,
         grossPerformance: isValid
           ? grossPerformance[item.symbol] ?? null
@@ -282,15 +326,17 @@ export class PortfolioCalculator {
             : null,
         investment: item.investment,
         marketPrice: marketValue?.toNumber() ?? null,
+        netPerformance: isValid ? netPerformance[item.symbol] ?? null : null,
+        netPerformancePercentage:
+          isValid && netHoldingPeriodReturns[item.symbol]
+            ? netHoldingPeriodReturns[item.symbol].minus(1)
+            : null,
         quantity: item.quantity,
         symbol: item.symbol,
         transactionCount: item.transactionCount
       });
     }
-    const overall = this.calculateOverallGrossPerformance(
+    const overall = this.calculateOverallPerformance(positions, initialValues);
-      positions,
-      initialValues
-    );
 
     return {
       ...overall,
@@ -378,7 +424,7 @@ export class PortfolioCalculator {
     return flatten(timelinePeriods);
   }
 
-  private calculateOverallGrossPerformance(
+  private calculateOverallPerformance(
     positions: TimelinePosition[],
     initialValues: { [p: string]: Big }
   ) {
@@ -387,7 +433,14 @@ export class PortfolioCalculator {
     let totalInvestment = new Big(0);
     let grossPerformance = new Big(0);
     let grossPerformancePercentage = new Big(0);
+    let netPerformance = new Big(0);
+    let netPerformancePercentage = new Big(0);
     let completeInitialValue = new Big(0);
+    let netAnnualizedPerformance = new Big(0);
+
+    // use Date.now() to use the mock for today
+    const today = new Date(Date.now());
+
     for (const currentPosition of positions) {
       if (currentPosition.marketPrice) {
         currentValue = currentValue.add(
@@ -401,6 +454,7 @@ export class PortfolioCalculator {
         grossPerformance = grossPerformance.plus(
           currentPosition.grossPerformance
         );
+        netPerformance = netPerformance.plus(currentPosition.netPerformance);
       } else if (!currentPosition.quantity.eq(0)) {
         hasErrors = true;
       }
@@ -414,6 +468,18 @@ export class PortfolioCalculator {
         grossPerformancePercentage = grossPerformancePercentage.plus(
           currentPosition.grossPerformancePercentage.mul(currentInitialValue)
         );
+        netAnnualizedPerformance = netAnnualizedPerformance.plus(
+          this.getAnnualizedPerformancePercent({
+            daysInMarket: differenceInDays(
+              today,
+              parseDate(currentPosition.firstBuyDate)
+            ),
+            netPerformancePercent: currentPosition.netPerformancePercentage
+          }).mul(currentInitialValue)
+        );
+        netPerformancePercentage = netPerformancePercentage.plus(
+          currentPosition.netPerformancePercentage.mul(currentInitialValue)
+        );
       } else if (!currentPosition.quantity.eq(0)) {
         console.error(
           `Initial value is missing for symbol ${currentPosition.symbol}`
@@ -425,6 +491,10 @@ export class PortfolioCalculator {
     if (!completeInitialValue.eq(0)) {
       grossPerformancePercentage =
         grossPerformancePercentage.div(completeInitialValue);
+      netPerformancePercentage =
+        netPerformancePercentage.div(completeInitialValue);
+      netAnnualizedPerformance =
+        netAnnualizedPerformance.div(completeInitialValue);
     }
 
     return {
@@ -432,6 +502,9 @@ export class PortfolioCalculator {
       grossPerformance,
       grossPerformancePercentage,
       hasErrors,
+      netAnnualizedPerformance,
+      netPerformance,
+      netPerformancePercentage,
       totalInvestment
     };
   }
@@ -442,30 +515,35 @@ export class PortfolioCalculator {
     endDate: Date
   ): Promise<TimelinePeriod[]> {
     let investment: Big = new Big(0);
+    let fees: Big = new Big(0);
 
     const marketSymbolMap: {
       [date: string]: { [symbol: string]: Big };
     } = {};
     if (j >= 0) {
       const currencies: { [name: string]: Currency } = {};
-      const symbols: string[] = [];
+      const dataGatheringItems: IDataGatheringItem[] = [];
 
       for (const item of this.transactionPoints[j].items) {
         currencies[item.symbol] = item.currency;
-        symbols.push(item.symbol);
+        dataGatheringItems.push({
+          dataSource: item.dataSource,
+          symbol: item.symbol
+        });
         investment = investment.add(item.investment);
+        fees = fees.add(item.fee);
       }
 
       let marketSymbols: GetValueObject[] = [];
-      if (symbols.length > 0) {
+      if (dataGatheringItems.length > 0) {
         try {
           marketSymbols = await this.currentRateService.getValues({
+            currencies,
+            dataGatheringItems,
             dateQuery: {
               gte: startDate,
               lt: endOfDay(endDate)
             },
-            symbols,
-            currencies,
             userCurrency: this.currency
           });
         } catch (error) {
@@ -490,7 +568,7 @@ export class PortfolioCalculator {
       }
     }
 
-    const results = [];
+    const results: TimelinePeriod[] = [];
     for (
       let currentDate = startDate;
       isBefore(currentDate, endDate);
@@ -513,11 +591,13 @@ export class PortfolioCalculator {
         }
       }
       if (!invalid) {
+        const grossPerformance = value.minus(investment);
         const result = {
-          date: currentDateAsString,
+          grossPerformance,
-          grossPerformance: value.minus(investment),
           investment,
-          value
+          value,
+          date: currentDateAsString,
+          netPerformance: grossPerformance.minus(fees)
         };
         results.push(result);
       }

apps/api/src/app/portfolio/portfolio.controller.ts

@@ -11,7 +11,7 @@ import {
   PortfolioSummary
 } from '@ghostfolio/common/interfaces';
 import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface';
-import { RequestWithUser } from '@ghostfolio/common/types';
+import type { RequestWithUser } from '@ghostfolio/common/types';
 import {
   Controller,
   Get,
@@ -223,6 +223,7 @@ export class PortfolioController {
         return nullifyValuesInObject(position, [
           'grossPerformance',
           'investment',
+          'netPerformance',
           'quantity'
         ]);
       });
@@ -246,6 +247,7 @@ export class PortfolioController {
         'cash',
         'committedFunds',
         'currentGrossPerformance',
+        'currentNetPerformance',
         'currentValue',
         'fees',
         'netWorth',
@@ -276,6 +278,7 @@ export class PortfolioController {
         position = nullifyValuesInObject(position, [
           'grossPerformance',
           'investment',
+          'netPerformance',
           'quantity'
         ]);
       }

apps/api/src/app/portfolio/portfolio.service.ts

@@ -26,14 +26,13 @@ import { DATE_FORMAT, parseDate } from '@ghostfolio/common/helper';
 import {
   PortfolioDetails,
   PortfolioPerformance,
-  PortfolioPosition,
   PortfolioReport,
   PortfolioSummary,
   Position,
   TimelinePosition
 } from '@ghostfolio/common/interfaces';
 import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface';
-import {
+import type {
   DateRange,
   OrderWithAccount,
   RequestWithUser
@@ -48,6 +47,7 @@ import {
 } from '@prisma/client';
 import Big from 'big.js';
 import {
+  differenceInDays,
   endOfToday,
   format,
   isAfter,
@@ -59,7 +59,7 @@ import {
   subDays,
   subYears
 } from 'date-fns';
-import { isEmpty } from 'lodash';
+import { isEmpty, isNumber } from 'lodash';
 
 import {
   HistoricalDataItem,
@@ -148,7 +148,7 @@ export class PortfolioService {
       .map((timelineItem) => ({
         date: timelineItem.date,
         marketPrice: timelineItem.value,
-        value: timelineItem.grossPerformance.toNumber()
+        value: timelineItem.netPerformance.toNumber()
       }));
   }
 
@@ -191,12 +191,18 @@ export class PortfolioService {
     );
     const totalValue = currentPositions.currentValue.plus(cashDetails.balance);
 
+    const dataGatheringItems = currentPositions.positions.map((position) => {
+      return {
+        dataSource: position.dataSource,
+        symbol: position.symbol
+      };
+    });
     const symbols = currentPositions.positions.map(
       (position) => position.symbol
     );
 
     const [dataProviderResponses, symbolProfiles] = await Promise.all([
-      this.dataProviderService.get(symbols),
+      this.dataProviderService.get(dataGatheringItems),
       this.symbolProfileService.getSymbolProfiles(symbols)
     ]);
 
@@ -211,6 +217,11 @@ export class PortfolioService {
     }
 
     for (const item of currentPositions.positions) {
+      if (item.quantity.lte(0)) {
+        // Ignore positions without any quantity
+        continue;
+      }
+
       const value = item.quantity.mul(item.marketPrice);
       const symbolProfile = symbolProfileMap[item.symbol];
       const dataProviderResponse = dataProviderResponses[item.symbol];
@@ -229,6 +240,8 @@ export class PortfolioService {
         marketPrice: item.marketPrice,
         marketState: dataProviderResponse.marketState,
         name: symbolProfile.name,
+        netPerformance: item.netPerformance?.toNumber() ?? 0,
+        netPerformancePercent: item.netPerformancePercentage?.toNumber() ?? 0,
         quantity: item.quantity.toNumber(),
         sectors: symbolProfile.sectors,
         symbol: item.symbol,
@@ -276,6 +289,9 @@ export class PortfolioService {
         marketPrice: undefined,
         maxPrice: undefined,
         minPrice: undefined,
+        name: undefined,
+        netPerformance: undefined,
+        netPerformancePercent: undefined,
         quantity: undefined,
         symbol: aSymbol,
         transactionCount: undefined
@@ -283,10 +299,13 @@ export class PortfolioService {
     }
 
     const positionCurrency = orders[0].currency;
+    const name = orders[0].SymbolProfile?.name ?? '';
 
     const portfolioOrders: PortfolioOrder[] = orders.map((order) => ({
       currency: order.currency,
+      dataSource: order.dataSource,
       date: format(order.date, DATE_FORMAT),
+      fee: new Big(order.fee),
       name: order.SymbolProfile?.name,
       quantity: new Big(order.quantity),
       symbol: order.symbol,
@@ -314,13 +333,14 @@ export class PortfolioService {
       const {
         averagePrice,
         currency,
+        dataSource,
         firstBuyDate,
         marketPrice,
         quantity,
         transactionCount
       } = position;
 
-      // Convert investment and gross performance to currency of user
+      // Convert investment, gross and net performance to currency of user
       const userCurrency = this.request.user.Settings.currency;
       const investment = this.exchangeRateDataService.toCurrency(
         position.investment.toNumber(),
@@ -332,9 +352,14 @@ export class PortfolioService {
         currency,
         userCurrency
       );
+      const netPerformance = this.exchangeRateDataService.toCurrency(
+        position.netPerformance.toNumber(),
+        currency,
+        userCurrency
+      );
 
       const historicalData = await this.dataProviderService.getHistorical(
-        [aSymbol],
+        [{ dataSource, symbol: aSymbol }],
         'day',
         parseISO(firstBuyDate),
         new Date()
@@ -393,19 +418,24 @@ export class PortfolioService {
         marketPrice,
         maxPrice,
         minPrice,
+        name,
+        netPerformance,
         transactionCount,
         averagePrice: averagePrice.toNumber(),
         grossPerformancePercent: position.grossPerformancePercentage.toNumber(),
         historicalData: historicalDataArray,
+        netPerformancePercent: position.netPerformancePercentage.toNumber(),
         quantity: quantity.toNumber(),
         symbol: aSymbol
       };
     } else {
-      const currentData = await this.dataProviderService.get([aSymbol]);
+      const currentData = await this.dataProviderService.get([
+        { dataSource: DataSource.YAHOO, symbol: aSymbol }
+      ]);
       const marketPrice = currentData[aSymbol]?.marketPrice;
 
       let historicalData = await this.dataProviderService.getHistorical(
-        [aSymbol],
+        [{ dataSource: DataSource.YAHOO, symbol: aSymbol }],
         'day',
         portfolioStart,
         new Date()
@@ -439,6 +469,7 @@ export class PortfolioService {
         marketPrice,
         maxPrice,
         minPrice,
+        name,
         averagePrice: 0,
         currency: currentData[aSymbol]?.currency,
         firstBuyDate: undefined,
@@ -446,6 +477,8 @@ export class PortfolioService {
         grossPerformancePercent: undefined,
         historicalData: historicalDataArray,
         investment: 0,
+        netPerformance: undefined,
+        netPerformancePercent: undefined,
         quantity: 0,
         symbol: aSymbol,
         transactionCount: undefined
@@ -484,10 +517,16 @@ export class PortfolioService {
     const positions = currentPositions.positions.filter(
       (item) => !item.quantity.eq(0)
     );
+    const dataGatheringItem = positions.map((position) => {
+      return {
+        dataSource: position.dataSource,
+        symbol: position.symbol
+      };
+    });
     const symbols = positions.map((position) => position.symbol);
 
     const [dataProviderResponses, symbolProfiles] = await Promise.all([
-      this.dataProviderService.get(symbols),
+      this.dataProviderService.get(dataGatheringItem),
       this.symbolProfileService.getSymbolProfiles(symbols)
     ]);
 
@@ -509,6 +548,9 @@ export class PortfolioService {
           investment: new Big(position.investment).toNumber(),
           marketState: dataProviderResponses[position.symbol].marketState,
           name: symbolProfileMap[position.symbol].name,
+          netPerformance: position.netPerformance?.toNumber() ?? null,
+          netPerformancePercentage:
+            position.netPerformancePercentage?.toNumber() ?? null,
           quantity: new Big(position.quantity).toNumber()
         };
       })
@@ -532,8 +574,11 @@ export class PortfolioService {
       return {
         hasErrors: false,
         performance: {
+          annualizedPerformancePercent: 0,
           currentGrossPerformance: 0,
           currentGrossPerformancePercent: 0,
+          currentNetPerformance: 0,
+          currentNetPerformancePercent: 0,
           currentValue: 0
         }
       };
@@ -548,16 +593,25 @@ export class PortfolioService {
     );
 
     const hasErrors = currentPositions.hasErrors;
+    const annualizedPerformancePercent =
+      currentPositions.netAnnualizedPerformance.toNumber();
     const currentValue = currentPositions.currentValue.toNumber();
     const currentGrossPerformance =
       currentPositions.grossPerformance.toNumber();
     const currentGrossPerformancePercent =
       currentPositions.grossPerformancePercentage.toNumber();
+    const currentNetPerformance = currentPositions.netPerformance.toNumber();
+    const currentNetPerformancePercent =
+      currentPositions.netPerformancePercentage.toNumber();
+
     return {
       hasErrors: currentPositions.hasErrors || hasErrors,
       performance: {
+        annualizedPerformancePercent,
         currentGrossPerformance,
         currentGrossPerformancePercent,
+        currentNetPerformance,
+        currentNetPerformancePercent,
         currentValue: currentValue
       }
     };
@@ -719,6 +773,7 @@ export class PortfolioService {
       allocationCurrent: cashValue.div(value).toNumber(),
       allocationInvestment: cashValue.div(investment).toNumber(),
       assetClass: AssetClass.CASH,
+      assetSubClass: AssetClass.CASH,
       countries: [],
       currency: Currency.CHF,
       grossPerformance: 0,
@@ -727,6 +782,8 @@ export class PortfolioService {
       marketPrice: 0,
       marketState: MarketState.open,
       name: 'Cash',
+      netPerformance: 0,
+      netPerformancePercent: 0,
       quantity: 0,
       sectors: [],
       symbol: ghostfolioCashSymbol,
@@ -772,7 +829,15 @@ export class PortfolioService {
     const userCurrency = this.request.user.Settings.currency;
     const portfolioOrders: PortfolioOrder[] = orders.map((order) => ({
       currency: order.currency,
+      dataSource: order.dataSource,
       date: format(order.date, DATE_FORMAT),
+      fee: new Big(
+        this.exchangeRateDataService.toCurrency(
+          order.fee,
+          order.currency,
+          userCurrency
+        )
+      ),
       name: order.SymbolProfile?.name,
       quantity: new Big(order.quantity),
       symbol: order.symbol,

apps/api/src/app/subscription/subscription.controller.ts

@@ -1,5 +1,5 @@
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
-import { RequestWithUser } from '@ghostfolio/common/types';
+import type { RequestWithUser } from '@ghostfolio/common/types';
 import {
   Body,
   Controller,

apps/api/src/app/symbol/symbol.controller.ts

@@ -1,4 +1,4 @@
-import { RequestWithUser } from '@ghostfolio/common/types';
+import type { RequestWithUser } from '@ghostfolio/common/types';
 import {
   Controller,
   Get,
@@ -10,7 +10,9 @@ import {
 } from '@nestjs/common';
 import { REQUEST } from '@nestjs/core';
 import { AuthGuard } from '@nestjs/passport';
+import { DataSource } from '@prisma/client';
 import { StatusCodes, getReasonPhrase } from 'http-status-codes';
+import { isEmpty } from 'lodash';
 
 import { LookupItem } from './interfaces/lookup-item.interface';
 import { SymbolItem } from './interfaces/symbol-item.interface';
@@ -45,9 +47,28 @@ export class SymbolController {
   /**
    * Must be after /lookup
    */
-  @Get(':symbol')
+  @Get(':dataSource/:symbol')
   @UseGuards(AuthGuard('jwt'))
-  public async getPosition(@Param('symbol') symbol): Promise<SymbolItem> {
+  public async getSymbolData(
-    return this.symbolService.get(symbol);
+    @Param('dataSource') dataSource: DataSource,
+    @Param('symbol') symbol: string
+  ): Promise<SymbolItem> {
+    if (!DataSource[dataSource]) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.NOT_FOUND),
+        StatusCodes.NOT_FOUND
+      );
+    }
+
+    const result = await this.symbolService.get({ dataSource, symbol });
+
+    if (!result || isEmpty(result)) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.NOT_FOUND),
+        StatusCodes.NOT_FOUND
+      );
+    }
+
+    return result;
   }
 }

apps/api/src/app/symbol/symbol.service.ts

@@ -1,4 +1,5 @@
 import { DataProviderService } from '@ghostfolio/api/services/data-provider/data-provider.service';
+import { IDataGatheringItem } from '@ghostfolio/api/services/interfaces/interfaces';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
 import { Injectable } from '@nestjs/common';
 import { Currency, DataSource } from '@prisma/client';
@@ -13,17 +14,21 @@ export class SymbolService {
     private readonly prismaService: PrismaService
   ) {}
 
-  public async get(aSymbol: string): Promise<SymbolItem> {
+  public async get(dataGatheringItem: IDataGatheringItem): Promise<SymbolItem> {
-    const response = await this.dataProviderService.get([aSymbol]);
+    const response = await this.dataProviderService.get([dataGatheringItem]);
-    const { currency, dataSource, marketPrice } = response[aSymbol];
+    const { currency, marketPrice } = response[dataGatheringItem.symbol] ?? {};
 
+    if (dataGatheringItem.dataSource && marketPrice) {
       return {
-      dataSource,
         marketPrice,
-      currency: <Currency>(<unknown>currency)
+        currency: <Currency>(<unknown>currency),
+        dataSource: dataGatheringItem.dataSource
       };
     }
 
+    return undefined;
+  }
+
   public async lookup(aQuery: string): Promise<{ items: LookupItem[] }> {
     const results: { items: LookupItem[] } = { items: [] };
 

apps/api/src/app/user/user.controller.ts

@@ -4,7 +4,7 @@ import {
   hasPermission,
   permissions
 } from '@ghostfolio/common/permissions';
-import { RequestWithUser } from '@ghostfolio/common/types';
+import type { RequestWithUser } from '@ghostfolio/common/types';
 import {
   Body,
   Controller,

apps/api/src/services/data-gathering.service.ts

@@ -1,15 +1,13 @@
-import { benchmarks, currencyPairs } from '@ghostfolio/common/config';
 import {
-  DATE_FORMAT,
+  benchmarks,
-  getUtc,
+  currencyPairs,
-  isGhostfolioScraperApiSymbol,
+  ghostfolioFearAndGreedIndexSymbol
-  resetHours
+} from '@ghostfolio/common/config';
-} from '@ghostfolio/common/helper';
+import { DATE_FORMAT, getUtc, resetHours } from '@ghostfolio/common/helper';
 import { Injectable } from '@nestjs/common';
 import { DataSource } from '@prisma/client';
 import {
   differenceInHours,
-  endOfToday,
   format,
   getDate,
   getMonth,
@@ -119,20 +117,17 @@ export class DataGatheringService {
     }
   }
 
-  public async gatherProfileData(aSymbols?: string[]) {
+  public async gatherProfileData(aDataGatheringItems?: IDataGatheringItem[]) {
     console.log('Profile data gathering has been started.');
     console.time('data-gathering-profile');
 
-    let symbols = aSymbols;
+    let dataGatheringItems = aDataGatheringItems;
 
-    if (!symbols) {
+    if (!dataGatheringItems) {
-      const dataGatheringItems = await this.getSymbolsProfileData();
+      dataGatheringItems = await this.getSymbolsProfileData();
-      symbols = dataGatheringItems.map((dataGatheringItem) => {
-        return dataGatheringItem.symbol;
-      });
     }
 
-    const currentData = await this.dataProviderService.get(symbols);
+    const currentData = await this.dataProviderService.get(dataGatheringItems);
 
     for (const [
       symbol,
@@ -211,6 +206,7 @@ export class DataGatheringService {
           try {
             await this.prismaService.marketData.create({
               data: {
+                dataSource,
                 symbol,
                 date: currentDate,
                 marketPrice: lastMarketPrice
@@ -295,7 +291,7 @@ export class DataGatheringService {
       benchmarksToGather.push({
         dataSource: DataSource.RAKUTEN,
         date: startDate,
-        symbol: 'GF.FEAR_AND_GREED_INDEX'
+        symbol: ghostfolioFearAndGreedIndexSymbol
       });
     }
 
@@ -305,24 +301,17 @@ export class DataGatheringService {
   private async getSymbols7D(): Promise<IDataGatheringItem[]> {
     const startDate = subDays(resetHours(new Date()), 7);
 
-    const distinctOrders = await this.prismaService.order.findMany({
+    const symbolProfilesToGather = (
-      distinct: ['symbol'],
+      await this.prismaService.symbolProfile.findMany({
         orderBy: [{ symbol: 'asc' }],
-      select: { dataSource: true, symbol: true },
+        select: {
-      where: {
+          dataSource: true,
-        date: {
+          symbol: true
-          lt: endOfToday() // no draft
         }
-      }
-    });
-
-    const distinctOrdersWithDate: IDataGatheringItem[] = distinctOrders
-      .filter((distinctOrder) => {
-        return !isGhostfolioScraperApiSymbol(distinctOrder.symbol);
       })
-      .map((distinctOrder) => {
+    ).map((symbolProfile) => {
       return {
-          ...distinctOrder,
+        ...symbolProfile,
         date: startDate
       };
     });
@@ -344,7 +333,7 @@ export class DataGatheringService {
       ...this.getBenchmarksToGather(startDate),
       ...customSymbolsToGather,
       ...currencyPairsToGather,
-      ...distinctOrdersWithDate
+      ...symbolProfilesToGather
     ];
   }
 
@@ -364,14 +353,12 @@ export class DataGatheringService {
       }
     );
 
-    const distinctOrders = await this.prismaService.order.findMany({
+    const symbolProfilesToGather =
-      distinct: ['symbol'],
+      await this.prismaService.symbolProfile.findMany({
-      orderBy: [{ date: 'asc' }],
+        orderBy: [{ symbol: 'asc' }],
-      select: { dataSource: true, date: true, symbol: true },
+        select: {
-      where: {
+          dataSource: true,
-        date: {
+          symbol: true
-          lt: endOfToday() // no draft
-        }
         }
       });
 
@@ -379,7 +366,7 @@ export class DataGatheringService {
       ...this.getBenchmarksToGather(startDate),
       ...customSymbolsToGather,
       ...currencyPairsToGather,
-      ...distinctOrders
+      ...symbolProfilesToGather
     ];
   }
 

apps/api/src/services/data-provider/data-provider.service.ts

@@ -6,11 +6,7 @@ import {
   IDataProviderResponse
 } from '@ghostfolio/api/services/interfaces/interfaces';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
-import {
+import { DATE_FORMAT } from '@ghostfolio/common/helper';
-  DATE_FORMAT,
-  isGhostfolioScraperApiSymbol,
-  isRakutenRapidApiSymbol
-} from '@ghostfolio/common/helper';
 import { Granularity } from '@ghostfolio/common/types';
 import { Injectable } from '@nestjs/common';
 import { DataSource, MarketData } from '@prisma/client';
@@ -19,7 +15,10 @@ import { format } from 'date-fns';
 import { AlphaVantageService } from './alpha-vantage/alpha-vantage.service';
 import { GhostfolioScraperApiService } from './ghostfolio-scraper-api/ghostfolio-scraper-api.service';
 import { RakutenRapidApiService } from './rakuten-rapid-api/rakuten-rapid-api.service';
-import { YahooFinanceService } from './yahoo-finance/yahoo-finance.service';
+import {
+  YahooFinanceService,
+  convertToYahooFinanceSymbol
+} from './yahoo-finance/yahoo-finance.service';
 
 @Injectable()
 export class DataProviderService {
@@ -34,49 +33,32 @@ export class DataProviderService {
     this.rakutenRapidApiService?.setPrisma(this.prismaService);
   }
 
-  public async get(
+  public async get(items: IDataGatheringItem[]): Promise<{
-    aSymbols: string[]
+    [symbol: string]: IDataProviderResponse;
-  ): Promise<{ [symbol: string]: IDataProviderResponse }> {
+  }> {
-    if (aSymbols.length === 1) {
+    const response: {
-      const symbol = aSymbols[0];
+      [symbol: string]: IDataProviderResponse;
+    } = {};
 
-      if (isGhostfolioScraperApiSymbol(symbol)) {
+    for (const item of items) {
-        return this.ghostfolioScraperApiService.get(aSymbols);
+      if (item.dataSource === DataSource.ALPHA_VANTAGE) {
-      } else if (isRakutenRapidApiSymbol(symbol)) {
+        response[item.symbol] = (
-        return this.rakutenRapidApiService.get(aSymbols);
+          await this.alphaVantageService.get([item.symbol])
-      }
+        )[item.symbol];
-    }
+      } else if (item.dataSource === DataSource.GHOSTFOLIO) {
-
+        response[item.symbol] = (
-    const yahooFinanceSymbols = aSymbols.filter((symbol) => {
+          await this.ghostfolioScraperApiService.get([item.symbol])
-      return (
+        )[item.symbol];
-        !isGhostfolioScraperApiSymbol(symbol) &&
+      } else if (item.dataSource === DataSource.RAKUTEN) {
-        !isRakutenRapidApiSymbol(symbol)
+        response[item.symbol] = (
-      );
+          await this.rakutenRapidApiService.get([item.symbol])
-    });
+        )[item.symbol];
-
+      } else if (item.dataSource === DataSource.YAHOO) {
-    const response = await this.yahooFinanceService.get(yahooFinanceSymbols);
+        response[item.symbol] = (
-
+          await this.yahooFinanceService.get([
-    const ghostfolioScraperApiSymbols = aSymbols.filter((symbol) => {
+            convertToYahooFinanceSymbol(item.symbol)
-      return isGhostfolioScraperApiSymbol(symbol);
+          ])
-    });
+        )[item.symbol];
-
-    for (const symbol of ghostfolioScraperApiSymbols) {
-      if (symbol) {
-        const ghostfolioScraperApiResult =
-          await this.ghostfolioScraperApiService.get([symbol]);
-        response[symbol] = ghostfolioScraperApiResult[symbol];
-      }
-    }
-
-    const rakutenRapidApiSymbols = aSymbols.filter((symbol) => {
-      return isRakutenRapidApiSymbol(symbol);
-    });
-
-    for (const symbol of rakutenRapidApiSymbols) {
-      if (symbol) {
-        const rakutenRapidApiResult =
-          await this.ghostfolioScraperApiService.get([symbol]);
-        response[symbol] = rakutenRapidApiResult[symbol];
       }
     }
 
@@ -84,7 +66,7 @@ export class DataProviderService {
   }
 
   public async getHistorical(
-    aSymbols: string[],
+    aItems: IDataGatheringItem[],
     aGranularity: Granularity = 'month',
     from: Date,
     to: Date
@@ -108,8 +90,17 @@ export class DataProviderService {
           )}'`
         : '';
 
+    const dataSources = aItems.map((item) => {
+      return item.dataSource;
+    });
+    const symbols = aItems.map((item) => {
+      return item.symbol;
+    });
+
     try {
-      const queryRaw = `SELECT * FROM "MarketData" WHERE "symbol" IN ('${aSymbols.join(
+      const queryRaw = `SELECT * FROM "MarketData" WHERE "dataSource" IN ('${dataSources.join(
+        `','`
+      )}') AND "symbol" IN ('${symbols.join(
         `','`
       )}') ${granularityQuery} ${rangeQuery} ORDER BY date;`;
 
@@ -168,13 +159,24 @@ export class DataProviderService {
   }
 
   public async search(aSymbol: string): Promise<{ items: LookupItem[] }> {
-    const { items } = await this.getDataProvider(
+    const promises: Promise<{ items: LookupItem[] }>[] = [];
-      <DataSource>this.configurationService.get('DATA_SOURCES')[0]
+    let lookupItems: LookupItem[] = [];
-    ).search(aSymbol);
 
-    const filteredItems = items.filter((item) => {
+    for (const dataSource of this.configurationService.get('DATA_SOURCES')) {
+      promises.push(
+        this.getDataProvider(DataSource[dataSource]).search(aSymbol)
+      );
+    }
+
+    const searchResults = await Promise.all(promises);
+
+    searchResults.forEach((searchResult) => {
+      lookupItems = lookupItems.concat(searchResult.items);
+    });
+
+    const filteredItems = lookupItems.filter((lookupItem) => {
       // Only allow symbols with supported currency
-      return item.currency ? true : false;
+      return lookupItem.currency ? true : false;
     });
 
     return {

apps/api/src/services/data-provider/rakuten-rapid-api/rakuten-rapid-api.service.ts

@@ -1,6 +1,7 @@
 import { LookupItem } from '@ghostfolio/api/app/symbol/interfaces/lookup-item.interface';
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { ghostfolioFearAndGreedIndexSymbol } from '@ghostfolio/common/config';
 import {
   DATE_FORMAT,
   getToday,
@@ -47,11 +48,11 @@ export class RakutenRapidApiService implements DataProviderInterface {
     try {
       const symbol = aSymbols[0];
 
-      if (symbol === 'GF.FEAR_AND_GREED_INDEX') {
+      if (symbol === ghostfolioFearAndGreedIndexSymbol) {
         const fgi = await this.getFearAndGreedIndex();
 
         return {
-          'GF.FEAR_AND_GREED_INDEX': {
+          [ghostfolioFearAndGreedIndexSymbol]: {
             currency: undefined,
             dataSource: DataSource.RAKUTEN,
             marketPrice: fgi.now.value,
@@ -82,7 +83,7 @@ export class RakutenRapidApiService implements DataProviderInterface {
     try {
       const symbol = aSymbols[0];
 
-      if (symbol === 'GF.FEAR_AND_GREED_INDEX') {
+      if (symbol === ghostfolioFearAndGreedIndexSymbol) {
         const fgi = await this.getFearAndGreedIndex();
 
         try {
@@ -93,6 +94,7 @@ export class RakutenRapidApiService implements DataProviderInterface {
           await this.prismaService.marketData.create({
             data: {
               symbol,
+              dataSource: DataSource.RAKUTEN,
               date: subWeeks(getToday(), 1),
               marketPrice: fgi.oneWeekAgo.value
             }
@@ -101,6 +103,7 @@ export class RakutenRapidApiService implements DataProviderInterface {
           await this.prismaService.marketData.create({
             data: {
               symbol,
+              dataSource: DataSource.RAKUTEN,
               date: subMonths(getToday(), 1),
               marketPrice: fgi.oneMonthAgo.value
             }
@@ -109,6 +112,7 @@ export class RakutenRapidApiService implements DataProviderInterface {
           await this.prismaService.marketData.create({
             data: {
               symbol,
+              dataSource: DataSource.RAKUTEN,
               date: subYears(getToday(), 1),
               marketPrice: fgi.oneYearAgo.value
             }
@@ -118,7 +122,7 @@ export class RakutenRapidApiService implements DataProviderInterface {
         } catch {}
 
         return {
-          'GF.FEAR_AND_GREED_INDEX': {
+          [ghostfolioFearAndGreedIndexSymbol]: {
             [format(getYesterday(), DATE_FORMAT)]: {
               marketPrice: fgi.previousClose.value
             }

apps/api/src/services/data-provider/yahoo-finance/yahoo-finance.service.ts

@@ -43,16 +43,12 @@ export class YahooFinanceService implements DataProviderInterface {
   }
 
   public async get(
-    aSymbols: string[]
+    aYahooFinanceSymbols: string[]
   ): Promise<{ [symbol: string]: IDataProviderResponse }> {
-    if (aSymbols.length <= 0) {
+    if (aYahooFinanceSymbols.length <= 0) {
       return {};
     }
 
-    const yahooSymbols = aSymbols.map((symbol) => {
-      return this.convertToYahooSymbol(symbol);
-    });
-
     try {
       const response: { [symbol: string]: IDataProviderResponse } = {};
 
@@ -60,12 +56,12 @@ export class YahooFinanceService implements DataProviderInterface {
         [symbol: string]: IYahooFinanceQuoteResponse;
       } = await yahooFinance.quote({
         modules: ['price', 'summaryProfile'],
-        symbols: yahooSymbols
+        symbols: aYahooFinanceSymbols
       });
 
-      for (const [yahooSymbol, value] of Object.entries(data)) {
+      for (const [yahooFinanceSymbol, value] of Object.entries(data)) {
         // Convert symbols back
-        const symbol = convertFromYahooSymbol(yahooSymbol);
+        const symbol = convertFromYahooFinanceSymbol(yahooFinanceSymbol);
 
         const { assetClass, assetSubClass } = this.parseAssetClass(value.price);
 
@@ -136,15 +132,15 @@ export class YahooFinanceService implements DataProviderInterface {
       return {};
     }
 
-    const yahooSymbols = aSymbols.map((symbol) => {
+    const yahooFinanceSymbols = aSymbols.map((symbol) => {
-      return this.convertToYahooSymbol(symbol);
+      return convertToYahooFinanceSymbol(symbol);
     });
 
     try {
       const historicalData: {
         [symbol: string]: IYahooFinanceHistoricalResponse[];
       } = await yahooFinance.historical({
-        symbols: yahooSymbols,
+        symbols: yahooFinanceSymbols,
         from: format(from, DATE_FORMAT),
         to: format(to, DATE_FORMAT)
       });
@@ -153,9 +149,11 @@ export class YahooFinanceService implements DataProviderInterface {
         [symbol: string]: { [date: string]: IDataProviderHistoricalResponse };
       } = {};
 
-      for (const [yahooSymbol, timeSeries] of Object.entries(historicalData)) {
+      for (const [yahooFinanceSymbol, timeSeries] of Object.entries(
+        historicalData
+      )) {
         // Convert symbols back
-        const symbol = convertFromYahooSymbol(yahooSymbol);
+        const symbol = convertFromYahooFinanceSymbol(yahooFinanceSymbol);
         response[symbol] = {};
 
         timeSeries.forEach((timeSerie) => {
@@ -175,7 +173,7 @@ export class YahooFinanceService implements DataProviderInterface {
   }
 
   public async search(aSymbol: string): Promise<{ items: LookupItem[] }> {
-    let items: LookupItem[] = [];
+    const items: LookupItem[] = [];
 
     try {
       const get = bent(
@@ -192,19 +190,6 @@ export class YahooFinanceService implements DataProviderInterface {
           // filter out undefined symbols
           return quote.symbol;
         })
-        .filter(({ quoteType }) => {
-          return quoteType === 'EQUITY' || quoteType === 'ETF';
-        })
-        .map(({ symbol }) => {
-          return symbol;
-        });
-
-      const marketData = await this.get(symbols);
-
-      items = searchResult.quotes
-        .filter((quote) => {
-          return quote.isYahooFinance;
-        })
         .filter(({ quoteType }) => {
           return (
             quoteType === 'CRYPTOCURRENCY' ||
@@ -220,42 +205,25 @@ export class YahooFinanceService implements DataProviderInterface {
 
           return true;
         })
-        .map(({ longname, shortname, symbol }) => {
+        .map(({ symbol }) => {
-          return {
+          return symbol;
-            currency: marketData[symbol]?.currency,
-            dataSource: DataSource.YAHOO,
-            name: longname || shortname,
-            symbol: convertFromYahooSymbol(symbol)
-          };
         });
+
+      const marketData = await this.get(symbols);
+
+      for (const [symbol, value] of Object.entries(marketData)) {
+        items.push({
+          symbol,
+          currency: value.currency,
+          dataSource: DataSource.YAHOO,
+          name: value.name
+        });
+      }
     } catch {}
 
     return { items };
   }
 
-  /**
-   * Converts a symbol to a Yahoo symbol
-   *
-   * Currency:        USDCHF=X
-   * Cryptocurrency:  BTC-USD
-   */
-  private convertToYahooSymbol(aSymbol: string) {
-    if (isCurrency(aSymbol)) {
-      if (isCrypto(aSymbol)) {
-        // Add a dash before the last three characters
-        // BTCUSD  -> BTC-USD
-        // DOGEUSD -> DOGE-USD
-        return `${aSymbol.substring(0, aSymbol.length - 3)}-${aSymbol.substring(
-          aSymbol.length - 3
-        )}`;
-      }
-
-      return `${aSymbol}=X`;
-    }
-
-    return aSymbol;
-  }
-
   private parseAssetClass(aPrice: IYahooFinancePrice): {
     assetClass: AssetClass;
     assetSubClass: AssetSubClass;
@@ -290,7 +258,30 @@ export class YahooFinanceService implements DataProviderInterface {
   }
 }
 
-export const convertFromYahooSymbol = (aSymbol: string) => {
+export const convertFromYahooFinanceSymbol = (aYahooFinanceSymbol: string) => {
-  const symbol = aSymbol.replace('-', '');
+  const symbol = aYahooFinanceSymbol.replace('-', '');
   return symbol.replace('=X', '');
 };
+
+/**
+ * Converts a symbol to a Yahoo Finance symbol
+ *
+ * Currency:        USDCHF=X
+ * Cryptocurrency:  BTC-USD
+ */
+export const convertToYahooFinanceSymbol = (aSymbol: string) => {
+  if (isCurrency(aSymbol)) {
+    if (isCrypto(aSymbol)) {
+      // Add a dash before the last three characters
+      // BTCUSD  -> BTC-USD
+      // DOGEUSD -> DOGE-USD
+      return `${aSymbol.substring(0, aSymbol.length - 3)}-${aSymbol.substring(
+        aSymbol.length - 3
+      )}`;
+    }
+
+    return `${aSymbol}=X`;
+  }
+
+  return aSymbol;
+};

apps/api/src/services/exchange-rate-data.service.ts

@@ -1,15 +1,16 @@
 import { currencyPairs } from '@ghostfolio/common/config';
 import { DATE_FORMAT, getYesterday } from '@ghostfolio/common/helper';
 import { Injectable } from '@nestjs/common';
-import { Currency } from '@prisma/client';
+import { Currency, DataSource } from '@prisma/client';
 import { format } from 'date-fns';
 import { isEmpty, isNumber } from 'lodash';
 
 import { DataProviderService } from './data-provider/data-provider.service';
+import { IDataGatheringItem } from './interfaces/interfaces';
 
 @Injectable()
 export class ExchangeRateDataService {
-  private currencyPairs: string[] = [];
+  private currencyPairs: IDataGatheringItem[] = [];
   private exchangeRates: { [currencyPair: string]: number } = {};
 
   public constructor(private dataProviderService: DataProviderService) {
@@ -20,8 +21,8 @@ export class ExchangeRateDataService {
     this.currencyPairs = [];
     this.exchangeRates = {};
 
-    for (const { currency1, currency2 } of currencyPairs) {
+    for (const { currency1, currency2, dataSource } of currencyPairs) {
-      this.addCurrencyPairs(currency1, currency2);
+      this.addCurrencyPairs({ currency1, currency2, dataSource });
     }
 
     await this.loadCurrencies();
@@ -39,8 +40,8 @@ export class ExchangeRateDataService {
       // Load currencies directly from data provider as a fallback
       // if historical data is not yet available
       const historicalData = await this.dataProviderService.get(
-        this.currencyPairs.map((currencyPair) => {
+        this.currencyPairs.map(({ dataSource, symbol }) => {
-          return currencyPair;
+          return { dataSource, symbol };
         })
       );
 
@@ -67,21 +68,21 @@ export class ExchangeRateDataService {
       };
     });
 
-    this.currencyPairs.forEach((pair) => {
+    this.currencyPairs.forEach(({ symbol }) => {
-      const [currency1, currency2] = pair.match(/.{1,3}/g);
+      const [currency1, currency2] = symbol.match(/.{1,3}/g);
       const date = format(getYesterday(), DATE_FORMAT);
 
-      this.exchangeRates[pair] = resultExtended[pair]?.[date]?.marketPrice;
+      this.exchangeRates[symbol] = resultExtended[symbol]?.[date]?.marketPrice;
 
-      if (!this.exchangeRates[pair]) {
+      if (!this.exchangeRates[symbol]) {
         // Not found, calculate indirectly via USD
-        this.exchangeRates[pair] =
+        this.exchangeRates[symbol] =
           resultExtended[`${currency1}${Currency.USD}`]?.[date]?.marketPrice *
           resultExtended[`${Currency.USD}${currency2}`]?.[date]?.marketPrice;
 
         // Calculate the opposite direction
         this.exchangeRates[`${currency2}${currency1}`] =
-          1 / this.exchangeRates[pair];
+          1 / this.exchangeRates[symbol];
       }
     });
   }
@@ -123,8 +124,22 @@ export class ExchangeRateDataService {
     return aValue;
   }
 
-  private addCurrencyPairs(aCurrency1: Currency, aCurrency2: Currency) {
+  private addCurrencyPairs({
-    this.currencyPairs.push(`${aCurrency1}${aCurrency2}`);
+    currency1,
-    this.currencyPairs.push(`${aCurrency2}${aCurrency1}`);
+    currency2,
+    dataSource
+  }: {
+    currency1: Currency;
+    currency2: Currency;
+    dataSource: DataSource;
+  }) {
+    this.currencyPairs.push({
+      dataSource,
+      symbol: `${currency1}${currency2}`
+    });
+    this.currencyPairs.push({
+      dataSource,
+      symbol: `${currency2}${currency1}`
+    });
   }
 }

apps/client/src/app/components/accounts-table/accounts-table.module.ts

@@ -5,10 +5,10 @@ import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
+import { GfValueModule } from '@ghostfolio/ui/value';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfSymbolIconModule } from '../symbol-icon/symbol-icon.module';
-import { GfValueModule } from '../value/value.module';
 import { AccountsTableComponent } from './accounts-table.component';
 
 @NgModule({

apps/client/src/app/components/header/header.module.ts

@@ -5,7 +5,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { RouterModule } from '@angular/router';
 import { LoginWithAccessTokenDialogModule } from '@ghostfolio/client/components/login-with-access-token-dialog/login-with-access-token-dialog.module';
-import { GfLogoModule } from '@ghostfolio/client/components/logo/logo.module';
+import { GfLogoModule } from '@ghostfolio/ui/logo';
 
 import { HeaderComponent } from './header.component';
 

apps/client/src/app/components/performance-chart-dialog/performance-chart-dialog.module.ts

@@ -3,12 +3,12 @@ import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { GfLineChartModule } from '@ghostfolio/client/components/line-chart/line-chart.module';
+import { GfValueModule } from '@ghostfolio/ui/value';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfDialogFooterModule } from '../dialog-footer/dialog-footer.module';
 import { GfDialogHeaderModule } from '../dialog-header/dialog-header.module';
 import { GfFearAndGreedIndexModule } from '../fear-and-greed-index/fear-and-greed-index.module';
-import { GfValueModule } from '../value/value.module';
 import { PerformanceChartDialog } from './performance-chart-dialog.component';
 
 @NgModule({

apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html

@@ -37,7 +37,7 @@
         [colorizeSign]="true"
         [isCurrency]="true"
         [locale]="locale"
-        [value]="isLoading ? undefined : performance?.currentGrossPerformance"
+        [value]="isLoading ? undefined : performance?.currentNetPerformance"
       ></gf-value>
     </div>
     <div class="col">
@@ -46,7 +46,7 @@
         [isPercent]="true"
         [locale]="locale"
         [value]="
-          isLoading ? undefined : performance?.currentGrossPerformancePercent
+          isLoading ? undefined : performance?.currentNetPerformancePercent
         "
       ></gf-value>
     </div>

apps/client/src/app/components/portfolio-performance/portfolio-performance.component.ts

@@ -52,7 +52,7 @@ export class PortfolioPerformanceComponent implements OnChanges, OnInit {
 
         new CountUp(
           'value',
-          this.performance?.currentGrossPerformancePercent * 100,
+          this.performance?.currentNetPerformancePercent * 100,
           {
             decimalPlaces: 2,
             duration: 0.75,

apps/client/src/app/components/portfolio-performance/portfolio-performance.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { GfValueModule } from '@ghostfolio/ui/value';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
-import { GfValueModule } from '../value/value.module';
 import { PortfolioPerformanceComponent } from './portfolio-performance.component';
 
 @NgModule({

apps/client/src/app/components/portfolio-proportion-chart/portfolio-proportion-chart.component.ts

@@ -16,6 +16,7 @@ import { LinearScale } from 'chart.js';
 import { ArcElement } from 'chart.js';
 import { DoughnutController } from 'chart.js';
 import { Chart } from 'chart.js';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
 import * as Color from 'color';
 
 @Component({
@@ -32,6 +33,7 @@ export class PortfolioProportionChartComponent
   @Input() keys: string[];
   @Input() locale: string;
   @Input() maxItems?: number;
+  @Input() showLabels = false;
   @Input() positions: {
     [symbol: string]: Pick<PortfolioPosition, 'type'> & { value: number };
   };
@@ -48,7 +50,13 @@ export class PortfolioProportionChartComponent
   };
 
   public constructor() {
-    Chart.register(ArcElement, DoughnutController, LinearScale, Tooltip);
+    Chart.register(
+      ArcElement,
+      ChartDataLabels,
+      DoughnutController,
+      LinearScale,
+      Tooltip
+    );
   }
 
   public ngOnInit() {}
@@ -167,7 +175,8 @@ export class PortfolioProportionChartComponent
         // Reuse color
         item.color = this.colorMap[symbol];
       } else {
-        const color = this.getColorPalette()[index];
+        const color =
+          this.getColorPalette()[index % this.getColorPalette().length];
 
         // Store color for reuse
         this.colorMap[symbol] = color;
@@ -234,7 +243,30 @@ export class PortfolioProportionChartComponent
           data,
           options: {
             cutout: '70%',
+            layout: {
+              padding: this.showLabels === true ? 100 : 0
+            },
             plugins: {
+              datalabels: {
+                color: (context) => {
+                  return this.getColorPalette()[
+                    context.dataIndex % this.getColorPalette().length
+                  ];
+                },
+                display: this.showLabels === true ? 'auto' : false,
+                labels: {
+                  index: {
+                    align: 'end',
+                    anchor: 'end',
+                    formatter: (value, context) => {
+                      return value > 0
+                        ? context.chart.data.labels[context.dataIndex]
+                        : '';
+                    },
+                    offset: 8
+                  }
+                }
+              },
               legend: { display: false },
               tooltip: {
                 callbacks: {

apps/client/src/app/components/portfolio-summary/portfolio-summary.component.html

@@ -9,23 +9,6 @@
   <div class="row">
     <div class="col"><hr /></div>
   </div>
-  <div class="row px-3">
-    <div class="d-flex flex-grow-1" i18n>
-      Fees for {{ summary?.ordersCount }} {summary?.ordersCount, plural, =1
-      {order} other {orders}}
-    </div>
-    <div class="d-flex justify-content-end">
-      <gf-value
-        class="justify-content-end"
-        [currency]="baseCurrency"
-        [locale]="locale"
-        [value]="isLoading ? undefined : summary?.fees"
-      ></gf-value>
-    </div>
-  </div>
-  <div class="row">
-    <div class="col"><hr /></div>
-  </div>
   <div class="row px-3 py-1">
     <div class="d-flex flex-grow-1" i18n>Buy</div>
     <div class="d-flex justify-content-end">
@@ -66,7 +49,7 @@
     </div>
   </div>
   <div class="row px-3 py-1">
-    <div class="d-flex flex-grow-1" i18n>Absolute Performance</div>
+    <div class="d-flex flex-grow-1" i18n>Absolute Gross Performance</div>
     <div class="d-flex justify-content-end">
       <gf-value
         class="justify-content-end"
@@ -77,7 +60,7 @@
     </div>
   </div>
   <div class="row px-3 py-1">
-    <div class="d-flex flex-grow-1 ml-3" i18n>Performance (TWR)</div>
+    <div class="d-flex flex-grow-1 ml-3" i18n>Gross Performance (TWR)</div>
     <div class="d-flex flex-column flex-wrap justify-content-end">
       <gf-value
         class="justify-content-end"
@@ -91,6 +74,48 @@
       ></gf-value>
     </div>
   </div>
+  <div class="row px-3 py-1">
+    <div class="d-flex flex-grow-1" i18n>
+      Fees for {{ summary?.ordersCount }} {summary?.ordersCount, plural, =1
+      {order} other {orders}}
+    </div>
+    <div class="d-flex justify-content-end">
+      <span *ngIf="summary?.fees || summary?.fees === 0" class="mr-1">-</span>
+      <gf-value
+        class="justify-content-end"
+        [currency]="baseCurrency"
+        [locale]="locale"
+        [value]="isLoading ? undefined : summary?.fees"
+      ></gf-value>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col"><hr /></div>
+  </div>
+  <div class="row px-3 py-1">
+    <div class="d-flex flex-grow-1" i18n>Absolute Net Performance</div>
+    <div class="d-flex justify-content-end">
+      <gf-value
+        class="justify-content-end"
+        [currency]="baseCurrency"
+        [locale]="locale"
+        [value]="isLoading ? undefined : summary?.currentNetPerformance"
+      ></gf-value>
+    </div>
+  </div>
+  <div class="row px-3 py-1">
+    <div class="d-flex flex-grow-1 ml-3" i18n>Net Performance (TWR)</div>
+    <div class="d-flex flex-column flex-wrap justify-content-end">
+      <gf-value
+        class="justify-content-end"
+        position="end"
+        [colorizeSign]="true"
+        [isPercent]="true"
+        [locale]="locale"
+        [value]="isLoading ? undefined : summary?.currentNetPerformancePercent"
+      ></gf-value>
+    </div>
+  </div>
   <div class="row">
     <div class="col"><hr /></div>
   </div>
@@ -121,7 +146,7 @@
     <div class="col"><hr /></div>
   </div>
   <div class="row px-3 py-1">
-    <div class="d-flex flex-grow-1" i18n>Net Worth</div>
+    <div class="d-flex flex-grow-1 font-weight-bold" i18n>Net Worth</div>
     <div class="d-flex justify-content-end">
       <gf-value
         class="justify-content-end"
@@ -131,4 +156,17 @@
       ></gf-value>
     </div>
   </div>
+  <div class="row px-3 py-1">
+    <div class="d-flex flex-grow-1 ml-3" i18n>Annualized Performance</div>
+    <div class="d-flex flex-column flex-wrap justify-content-end">
+      <gf-value
+        class="justify-content-end"
+        position="end"
+        [colorizeSign]="true"
+        [isPercent]="true"
+        [locale]="locale"
+        [value]="isLoading ? undefined : summary?.annualizedPerformancePercent"
+      ></gf-value>
+    </div>
+  </div>
 </div>

apps/client/src/app/components/portfolio-summary/portfolio-summary.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { GfValueModule } from '@ghostfolio/ui/value';
 
-import { GfValueModule } from '../value/value.module';
 import { PortfolioSummaryComponent } from './portfolio-summary.component';
 
 @NgModule({

apps/client/src/app/components/position/position-detail-dialog/interfaces/interfaces.ts

@@ -3,5 +3,4 @@ export interface PositionDetailDialogParams {
   deviceType: string;
   locale: string;
   symbol: string;
-  title: string;
 }

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

@@ -34,7 +34,11 @@ export class PositionDetailDialog implements OnDestroy {
   public marketPrice: number;
   public maxPrice: number;
   public minPrice: number;
+  public name: string;
+  public netPerformance: number;
+  public netPerformancePercent: number;
   public quantity: number;
+  public symbol: string;
   public transactionCount: number;
 
   private unsubscribeSubject = new Subject<void>();
@@ -60,7 +64,11 @@ export class PositionDetailDialog implements OnDestroy {
           marketPrice,
           maxPrice,
           minPrice,
+          name,
+          netPerformance,
+          netPerformancePercent,
           quantity,
+          symbol,
           transactionCount
         }) => {
           this.averagePrice = averagePrice;
@@ -86,7 +94,11 @@ export class PositionDetailDialog implements OnDestroy {
           this.marketPrice = marketPrice;
           this.maxPrice = maxPrice;
           this.minPrice = minPrice;
+          this.name = name;
+          this.netPerformance = netPerformance;
+          this.netPerformancePercent = netPerformancePercent;
           this.quantity = quantity;
+          this.symbol = symbol;
           this.transactionCount = transactionCount;
 
           if (isToday(parseISO(this.firstBuyDate))) {

apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html

@@ -1,7 +1,7 @@
 <gf-dialog-header
   mat-dialog-title
   [deviceType]="data.deviceType"
-  [title]="data.title ?? data.symbol"
+  [title]="name ?? symbol"
   (closeButtonClicked)="onClose()"
 ></gf-dialog-header>
 
@@ -25,7 +25,7 @@
           [colorizeSign]="true"
           [currency]="data.baseCurrency"
           [locale]="data.locale"
-          [value]="grossPerformance"
+          [value]="netPerformance"
         ></gf-value>
       </div>
       <div class="col-6 mb-3">
@@ -35,7 +35,7 @@
           [colorizeSign]="true"
           [isPercent]="true"
           [locale]="data.locale"
-          [value]="grossPerformancePercent"
+          [value]="netPerformancePercent"
         ></gf-value>
       </div>
       <div class="col-6 mb-3">
@@ -80,7 +80,8 @@
         <gf-value
           label="Quantity"
           size="medium"
-          [isCurrency]="true"
+          [locale]="data.locale"
+          [precision]="2"
           [value]="quantity"
         ></gf-value>
       </div>
@@ -102,9 +103,8 @@
       </div>
       <div class="col-6 mb-3">
         <gf-value
-          label="Transactions"
           size="medium"
-          [isCurrency]="true"
+          [label]="transactionCount === 1 ? 'Transaction' : 'Transactions'"
           [locale]="data.locale"
           [value]="transactionCount"
         ></gf-value>

apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.module.ts

@@ -3,11 +3,11 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { GfLineChartModule } from '@ghostfolio/client/components/line-chart/line-chart.module';
+import { GfValueModule } from '@ghostfolio/ui/value';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfDialogFooterModule } from '../../dialog-footer/dialog-footer.module';
 import { GfDialogHeaderModule } from '../../dialog-header/dialog-header.module';
-import { GfValueModule } from '../../value/value.module';
 import { PositionDetailDialog } from './position-detail-dialog.component';
 
 @NgModule({

apps/client/src/app/components/position/position.component.html

@@ -11,7 +11,7 @@
           [isLoading]="isLoading"
           [marketState]="position?.marketState"
           [range]="range"
-          [value]="position?.grossPerformancePercentage"
+          [value]="position?.netPerformancePercentage"
         ></gf-trend-indicator>
       </div>
       <div *ngIf="isLoading" class="flex-grow-1">
@@ -47,13 +47,13 @@
             [colorizeSign]="true"
             [currency]="baseCurrency"
             [locale]="locale"
-            [value]="position?.grossPerformance"
+            [value]="position?.netPerformance"
           ></gf-value>
           <gf-value
             [colorizeSign]="true"
             [isPercent]="true"
             [locale]="locale"
-            [value]="position?.grossPerformancePercentage"
+            [value]="position?.netPerformancePercentage"
           ></gf-value>
         </div>
       </div>

apps/client/src/app/components/position/position.component.ts

@@ -64,8 +64,7 @@ export class PositionComponent implements OnDestroy, OnInit {
         baseCurrency: this.baseCurrency,
         deviceType: this.deviceType,
         locale: this.locale,
-        symbol: this.position?.symbol,
+        symbol: this.position?.symbol
-        title: this.position?.name
       },
       height: this.deviceType === 'mobile' ? '97.5vh' : '80vh',
       width: this.deviceType === 'mobile' ? '100vw' : '50rem'

apps/client/src/app/components/position/position.module.ts

@@ -3,10 +3,10 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatDialogModule } from '@angular/material/dialog';
 import { RouterModule } from '@angular/router';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
+import { GfTrendIndicatorModule } from '@ghostfolio/ui/trend-indicator';
+import { GfValueModule } from '@ghostfolio/ui/value';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
-import { GfTrendIndicatorModule } from '../trend-indicator/trend-indicator.module';
-import { GfValueModule } from '../value/value.module';
 import { GfPositionDetailDialogModule } from './position-detail-dialog/position-detail-dialog.module';
 import { PositionComponent } from './position.component';
 

apps/client/src/app/components/positions-table/positions-table.component.html

@@ -30,7 +30,7 @@
           [colorizeSign]="true"
           [isPercent]="true"
           [locale]="locale"
-          [value]="isLoading ? undefined : element.grossPerformancePercent"
+          [value]="isLoading ? undefined : element.netPerformancePercent"
         ></gf-value>
       </div>
     </td>
@@ -87,7 +87,7 @@
     }"
     (click)="
       !this.ignoreAssetClasses.includes(row.assetClass) &&
-        onOpenPositionDialog({ symbol: row.symbol, title: row.name })
+        onOpenPositionDialog({ symbol: row.symbol })
     "
   ></tr>
 </table>

apps/client/src/app/components/positions-table/positions-table.component.ts

@@ -57,14 +57,9 @@ export class PositionsTableComponent implements OnChanges, OnDestroy, OnInit {
     this.routeQueryParams = route.queryParams
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((params) => {
-        if (
+        if (params['positionDetailDialog'] && params['symbol']) {
-          params['positionDetailDialog'] &&
-          params['symbol'] &&
-          params['title']
-        ) {
           this.openPositionDialog({
-            symbol: params['symbol'],
+            symbol: params['symbol']
-            title: params['title']
           });
         }
       });
@@ -96,15 +91,9 @@ export class PositionsTableComponent implements OnChanges, OnDestroy, OnInit {
     this.dataSource.filter = filterValue.trim().toLowerCase();
   }*/
 
-  public onOpenPositionDialog({
+  public onOpenPositionDialog({ symbol }: { symbol: string }): void {
-    symbol,
-    title
-  }: {
-    symbol: string;
-    title: string;
-  }): void {
     this.router.navigate([], {
-      queryParams: { positionDetailDialog: true, symbol, title }
+      queryParams: { positionDetailDialog: true, symbol }
     });
   }
 
@@ -116,18 +105,11 @@ export class PositionsTableComponent implements OnChanges, OnDestroy, OnInit {
     });
   }
 
-  public openPositionDialog({
+  public openPositionDialog({ symbol }: { symbol: string }): void {
-    symbol,
-    title
-  }: {
-    symbol: string;
-    title: string;
-  }): void {
     const dialogRef = this.dialog.open(PositionDetailDialog, {
       autoFocus: false,
       data: {
         symbol,
-        title,
         baseCurrency: this.baseCurrency,
         deviceType: this.deviceType,
         locale: this.locale

apps/client/src/app/components/positions-table/positions-table.module.ts

@@ -8,12 +8,12 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
+import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
+import { GfValueModule } from '@ghostfolio/ui/value';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
-import { GfNoTransactionsInfoModule } from '../no-transactions-info/no-transactions-info.module';
 import { GfPositionDetailDialogModule } from '../position/position-detail-dialog/position-detail-dialog.module';
 import { GfSymbolIconModule } from '../symbol-icon/symbol-icon.module';
-import { GfValueModule } from '../value/value.module';
 import { PositionsTableComponent } from './positions-table.component';
 
 @NgModule({

apps/client/src/app/components/positions/positions.module.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
 
-import { GfNoTransactionsInfoModule } from '../no-transactions-info/no-transactions-info.module';
 import { GfPositionModule } from '../position/position.module';
 import { PositionsComponent } from './positions.component';
 

apps/client/src/app/components/rules/rules.module.ts

@@ -3,8 +3,8 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { GfRuleModule } from '@ghostfolio/client/components/rule/rule.module';
+import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
 
-import { GfNoTransactionsInfoModule } from '../no-transactions-info/no-transactions-info.module';
 import { GfPositionModule } from '../position/position.module';
 import { RulesComponent } from './rules.component';
 

apps/client/src/app/components/toggle/toggle.component.html

@@ -1,4 +1,8 @@
-<mat-radio-group [formControl]="option" (change)="onValueChange()">
+<mat-radio-group
+  class="text-nowrap"
+  [formControl]="option"
+  (change)="onValueChange()"
+>
   <mat-radio-button
     *ngFor="let option of options"
     [disabled]="isLoading"

apps/client/src/app/components/transactions-table/transactions-table.component.html

@@ -255,8 +255,7 @@
     mat-row
     (click)="
       onOpenPositionDialog({
-        symbol: row.symbol,
+        symbol: row.symbol
-        title: row.SymbolProfile?.name
       })
     "
   ></tr>

apps/client/src/app/components/transactions-table/transactions-table.component.ts

@@ -86,8 +86,7 @@ export class TransactionsTableComponent
       .subscribe((params) => {
         if (params['positionDetailDialog'] && params['symbol']) {
           this.openPositionDialog({
-            symbol: params['symbol'],
+            symbol: params['symbol']
-            title: params['title']
           });
         }
       });
@@ -196,15 +195,9 @@ export class TransactionsTableComponent
     this.import.emit();
   }
 
-  public onOpenPositionDialog({
+  public onOpenPositionDialog({ symbol }: { symbol: string }): void {
-    symbol,
-    title
-  }: {
-    symbol: string;
-    title: string;
-  }): void {
     this.router.navigate([], {
-      queryParams: { positionDetailDialog: true, symbol, title }
+      queryParams: { positionDetailDialog: true, symbol }
     });
   }
 
@@ -216,18 +209,11 @@ export class TransactionsTableComponent
     this.transactionToClone.emit(aTransaction);
   }
 
-  public openPositionDialog({
+  public openPositionDialog({ symbol }: { symbol: string }): void {
-    symbol,
-    title
-  }: {
-    symbol: string;
-    title: string;
-  }): void {
     const dialogRef = this.dialog.open(PositionDetailDialog, {
       autoFocus: false,
       data: {
         symbol,
-        title,
         baseCurrency: this.baseCurrency,
         deviceType: this.deviceType,
         locale: this.locale

apps/client/src/app/components/transactions-table/transactions-table.module.ts

@@ -10,11 +10,11 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
+import { GfValueModule } from '@ghostfolio/ui/value';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfPositionDetailDialogModule } from '../position/position-detail-dialog/position-detail-dialog.module';
 import { GfSymbolIconModule } from '../symbol-icon/symbol-icon.module';
-import { GfValueModule } from '../value/value.module';
 import { TransactionsTableComponent } from './transactions-table.component';
 
 @NgModule({

apps/client/src/app/pages/about/about-page.html

@@ -32,7 +32,12 @@
           </p>
           <p>
             If you encounter a bug or would like to suggest an improvement or a
-            new feature, please tweet to
+            new feature, please join the Ghostfolio
+            <a
+              href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"
+              title="Join the Ghostfolio Slack channel"
+              >Slack channel</a
+            >, tweet to
             <a
               href="https://twitter.com/ghostfolio_"
               title="Tweet to Ghostfolio on Twitter"
@@ -65,6 +70,14 @@
             >
               <ion-icon name="mail" size="large"></ion-icon>
             </a>
+            <a
+              class="mx-2"
+              href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"
+              mat-icon-button
+              title="Join the Ghostfolio Slack channel"
+            >
+              <ion-icon name="logo-slack" size="large"></ion-icon>
+            </a>
             <a
               class="mx-2"
               href="https://github.com/ghostfolio/ghostfolio"
@@ -94,27 +107,37 @@
       <mat-card>
         <mat-card-content>
           <div class="row">
-            <div class="col-xs-12 col-md-4 my-2">
+            <div class="col-xs-12 col-md-3 my-2">
               <h3 class="mb-0" [hidden]="!statistics?.activeUsers1d">
                 {{ statistics?.activeUsers1d ?? '-' }}
               </h3>
               <div class="h6 mb-0">
-                Active Users <small class="text-muted">(Last 24 hours)</small>
+                <span i18n>Active Users</span>&nbsp;<small class="text-muted"
+                  >(Last 24 hours)</small
+                >
               </div>
             </div>
-            <div class="col-xs-12 col-md-4 my-2">
+            <div class="col-xs-12 col-md-3 my-2">
               <h3 class="mb-0" [hidden]="!statistics?.activeUsers30d">
                 {{ statistics?.activeUsers30d ?? '-' }}
               </h3>
               <div class="h6 mb-0">
-                Active Users <small class="text-muted">(Last 30 days)</small>
+                <span i18n>Active Users</span>&nbsp;<small class="text-muted"
+                  >(Last 30 days)</small
+                >
               </div>
             </div>
-            <div class="col-xs-12 col-md-4 my-2">
+            <div class="col-xs-12 col-md-3 my-2">
+              <h3 class="mb-0" [hidden]="!statistics?.gitHubContributors">
+                {{ statistics?.gitHubContributors ?? '-' }}
+              </h3>
+              <div class="h6 mb-0" i18n>Contributors on GitHub</div>
+            </div>
+            <div class="col-xs-12 col-md-3 my-2">
               <h3 class="mb-0" [hidden]="!statistics?.gitHubStargazers">
                 {{ statistics?.gitHubStargazers ?? '-' }}
               </h3>
-              <div class="h6 mb-0">Stars on GitHub</div>
+              <div class="h6 mb-0" i18n>Stars on GitHub</div>
             </div>
           </div>
         </mat-card-content>

apps/client/src/app/pages/home/home-page.component.ts

@@ -20,6 +20,7 @@ import {
   SettingsStorageService
 } from '@ghostfolio/client/services/settings-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { ghostfolioFearAndGreedIndexSymbol } from '@ghostfolio/common/config';
 import {
   PortfolioPerformance,
   PortfolioSummary,
@@ -28,6 +29,7 @@ import {
 } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { DateRange } from '@ghostfolio/common/types';
+import { DataSource } from '@prisma/client';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject, Subscription } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -58,6 +60,7 @@ export class HomePageComponent implements OnDestroy, OnInit {
   public fearAndGreedIndex: number;
   public hasImpersonationId: boolean;
   public hasPermissionToAccessFearAndGreedIndex: boolean;
+  public hasPermissionToCreateOrder: boolean;
   public hasPositions: boolean;
   public historicalDataItems: LineChartItem[];
   public isLoadingPerformance = true;
@@ -110,7 +113,10 @@ export class HomePageComponent implements OnDestroy, OnInit {
 
           if (this.hasPermissionToAccessFearAndGreedIndex) {
             this.dataService
-              .fetchSymbolItem('GF.FEAR_AND_GREED_INDEX')
+              .fetchSymbolItem({
+                dataSource: DataSource.RAKUTEN,
+                symbol: ghostfolioFearAndGreedIndexSymbol
+              })
               .pipe(takeUntil(this.unsubscribeSubject))
               .subscribe(({ marketPrice }) => {
                 this.fearAndGreedIndex = marketPrice;
@@ -119,6 +125,11 @@ export class HomePageComponent implements OnDestroy, OnInit {
               });
           }
 
+          this.hasPermissionToCreateOrder = hasPermission(
+            this.user.permissions,
+            permissions.createOrder
+          );
+
           this.changeDetectorRef.markForCheck();
         }
       });
@@ -135,6 +146,8 @@ export class HomePageComponent implements OnDestroy, OnInit {
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((aId) => {
         this.hasImpersonationId = !!aId;
+
+        this.changeDetectorRef.markForCheck();
       });
 
     this.dateRange =

apps/client/src/app/pages/home/home-page.html

@@ -91,8 +91,8 @@
               (change)="onChangeDateRange($event.value)"
             ></gf-toggle>
           </div>
-
+          <ng-container *ngIf="hasPositions === true">
-          <mat-card *ngIf="hasPositions === true" class="p-0">
+            <mat-card class="p-0">
               <mat-card-content>
                 <gf-positions
                   [baseCurrency]="user?.settings?.baseCurrency"
@@ -103,6 +103,16 @@
                 ></gf-positions>
               </mat-card-content>
             </mat-card>
+            <div *ngIf="hasPermissionToCreateOrder" class="text-center">
+              <a
+                class="mt-3"
+                i18n
+                mat-button
+                [routerLink]="['/portfolio', 'transactions']"
+                >Manage Transactions...</a
+              >
+            </div>
+          </ng-container>
           <div
             *ngIf="hasPositions === false"
             class="d-flex justify-content-center"

apps/client/src/app/pages/home/home-page.module.ts

@@ -5,12 +5,12 @@ import { MatCardModule } from '@angular/material/card';
 import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
 import { GfLineChartModule } from '@ghostfolio/client/components/line-chart/line-chart.module';
-import { GfNoTransactionsInfoModule } from '@ghostfolio/client/components/no-transactions-info/no-transactions-info.module';
 import { GfPerformanceChartDialogModule } from '@ghostfolio/client/components/performance-chart-dialog/performance-chart-dialog.module';
 import { GfPortfolioPerformanceModule } from '@ghostfolio/client/components/portfolio-performance/portfolio-performance.module';
 import { GfPortfolioSummaryModule } from '@ghostfolio/client/components/portfolio-summary/portfolio-summary.module';
 import { GfPositionsModule } from '@ghostfolio/client/components/positions/positions.module';
 import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module';
+import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
 
 import { HomePageRoutingModule } from './home-page-routing.module';
 import { HomePageComponent } from './home-page.component';

apps/client/src/app/pages/home/home-page.scss

@@ -16,6 +16,9 @@
     right: 0;
     top: 0;
 
+    margin-bottom: env(safe-area-inset-bottom);
+    margin-bottom: constant(safe-area-inset-bottom);
+
     ::ng-deep {
       .mat-tab-body-wrapper {
         height: 100%;

apps/client/src/app/pages/landing/landing-page.module.ts

@@ -3,7 +3,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
 import { GfLineChartModule } from '@ghostfolio/client/components/line-chart/line-chart.module';
-import { GfLogoModule } from '@ghostfolio/client/components/logo/logo.module';
+import { GfLogoModule } from '@ghostfolio/ui/logo';
 
 import { LandingPageRoutingModule } from './landing-page-routing.module';
 import { LandingPageComponent } from './landing-page.component';

apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts

@@ -42,6 +42,10 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
   public sectors: {
     [name: string]: { name: string; value: number };
   };
+  public symbols: {
+    [name: string]: { name: string; value: number };
+  };
+
   public user: User;
 
   private unsubscribeSubject = new Subject<void>();
@@ -114,6 +118,12 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
         value: 0
       }
     };
+    this.symbols = {
+      [UNKNOWN_KEY]: {
+        name: UNKNOWN_KEY,
+        value: 0
+      }
+    };
 
     for (const [name, { current, original }] of Object.entries(
       this.portfolioDetails.accounts
@@ -208,6 +218,13 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
               : this.portfolioDetails.holdings[symbol].value;
         }
       }
+
+      if (position.assetClass === AssetClass.EQUITY) {
+        this.symbols[symbol] = {
+          name: symbol,
+          value: aPeriod === 'original' ? position.investment : position.value
+        };
+      }
     }
   }
 

apps/client/src/app/pages/portfolio/allocations/allocations-page.html

@@ -5,10 +5,10 @@
     </div>
   </div>
   <div class="proportion-charts row">
-    <div class="col-md-6">
+    <div class="col-md-4">
       <mat-card class="mb-3">
-        <mat-card-header class="w-100">
+        <mat-card-header class="overflow-hidden w-100">
-          <mat-card-title i18n>By Account</mat-card-title>
+          <mat-card-title class="text-truncate" i18n>By Account</mat-card-title>
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -27,10 +27,12 @@
         </mat-card-content>
       </mat-card>
     </div>
-    <div class="col-md-6">
+    <div class="col-md-4">
       <mat-card class="mb-3">
-        <mat-card-header class="w-100">
+        <mat-card-header class="overflow-hidden w-100">
-          <mat-card-title i18n>By Asset Class</mat-card-title>
+          <mat-card-title class="text-truncate" i18n
+            >By Asset Class</mat-card-title
+          >
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -49,10 +51,12 @@
         </mat-card-content>
       </mat-card>
     </div>
-    <div class="col-md-6">
+    <div class="col-md-4">
       <mat-card class="mb-3">
-        <mat-card-header class="w-100">
+        <mat-card-header class="overflow-hidden w-100">
-          <mat-card-title i18n>By Currency</mat-card-title>
+          <mat-card-title class="text-truncate" i18n
+            >By Currency</mat-card-title
+          >
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -71,10 +75,34 @@
         </mat-card-content>
       </mat-card>
     </div>
-    <div class="col-md-6">
+    <div class="col-md-12 allocations-by-symbol">
       <mat-card class="mb-3">
-        <mat-card-header class="w-100">
+        <mat-card-header class="overflow-hidden w-100">
-          <mat-card-title i18n>By Sector</mat-card-title>
+          <mat-card-title class="text-truncate" i18n>By Symbol</mat-card-title>
+          <gf-toggle
+            [defaultValue]="period"
+            [isLoading]="false"
+            [options]="periodOptions"
+            (change)="onChangePeriod($event.value)"
+          ></gf-toggle>
+        </mat-card-header>
+        <mat-card-content>
+          <gf-portfolio-proportion-chart
+            class="mx-auto"
+            [baseCurrency]="user?.settings?.baseCurrency"
+            [isInPercent]="false"
+            [keys]="['name']"
+            [locale]="user?.settings?.locale"
+            [positions]="symbols"
+            [showLabels]="deviceType !== 'mobile'"
+          ></gf-portfolio-proportion-chart>
+        </mat-card-content>
+      </mat-card>
+    </div>
+    <div class="col-md-4">
+      <mat-card class="mb-3">
+        <mat-card-header class="overflow-hidden w-100">
+          <mat-card-title class="text-truncate" i18n>By Sector</mat-card-title>
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -94,10 +122,12 @@
         </mat-card-content>
       </mat-card>
     </div>
-    <div class="col-md-6">
+    <div class="col-md-4">
       <mat-card class="mb-3">
-        <mat-card-header class="w-100">
+        <mat-card-header class="overflow-hidden w-100">
-          <mat-card-title i18n>By Continent</mat-card-title>
+          <mat-card-title class="text-truncate" i18n
+            >By Continent</mat-card-title
+          >
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -116,10 +146,10 @@
         </mat-card-content>
       </mat-card>
     </div>
-    <div class="col-md-6">
+    <div class="col-md-4">
       <mat-card class="mb-3">
-        <mat-card-header class="w-100">
+        <mat-card-header class="overflow-hidden w-100">
-          <mat-card-title i18n>By Country</mat-card-title>
+          <mat-card-title class="text-truncate" i18n>By Country</mat-card-title>
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -143,8 +173,8 @@
   <div class="row world-map-chart">
     <div class="col-lg">
       <mat-card class="mb-3">
-        <mat-card-header class="w-100">
+        <mat-card-header class="overflow-hidden w-100">
-          <mat-card-title i18n>Regions</mat-card-title>
+          <mat-card-title class="text-truncate" i18n>Regions</mat-card-title>
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"

apps/client/src/app/pages/portfolio/allocations/allocations-page.scss

@@ -1,9 +1,7 @@
 :host {
-  .proportion-charts {
+  .allocations-by-symbol {
-    .mat-card {
+    gf-portfolio-proportion-chart {
-      .mat-card-content {
+      max-width: 80vh;
-        padding: 1rem 2rem;
-      }
     }
   }
 

apps/client/src/app/pages/portfolio/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.component.ts

@@ -3,7 +3,8 @@ import {
   ChangeDetectorRef,
   Component,
   Inject,
-  OnDestroy
+  OnDestroy,
+  ViewChild
 } from '@angular/core';
 import { FormControl, Validators } from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
@@ -11,8 +12,10 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { LookupItem } from '@ghostfolio/api/app/symbol/interfaces/lookup-item.interface';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { Currency } from '@prisma/client';
-import { Observable, Subject } from 'rxjs';
+import { isString } from 'lodash';
+import { EMPTY, Observable, Subject } from 'rxjs';
 import {
+  catchError,
   debounceTime,
   distinctUntilChanged,
   startWith,
@@ -30,13 +33,19 @@ import { CreateOrUpdateTransactionDialogParams } from './interfaces/interfaces';
   templateUrl: 'create-or-update-transaction-dialog.html'
 })
 export class CreateOrUpdateTransactionDialog implements OnDestroy {
+  @ViewChild('autocomplete') autocomplete;
+
   public currencies: Currency[] = [];
   public currentMarketPrice = null;
-  public filteredLookupItems: Observable<LookupItem[]>;
+  public filteredLookupItems: LookupItem[];
+  public filteredLookupItemsObservable: Observable<LookupItem[]>;
   public isLoading = false;
   public platforms: { id: string; name: string }[];
   public searchSymbolCtrl = new FormControl(
-    this.data.transaction.symbol,
+    {
+      dataSource: this.data.transaction.dataSource,
+      symbol: this.data.transaction.symbol
+    },
     Validators.required
   );
 
@@ -49,19 +58,27 @@ export class CreateOrUpdateTransactionDialog implements OnDestroy {
     @Inject(MAT_DIALOG_DATA) public data: CreateOrUpdateTransactionDialogParams
   ) {}
 
-  ngOnInit() {
+  public ngOnInit() {
     const { currencies, platforms } = this.dataService.fetchInfo();
 
     this.currencies = currencies;
     this.platforms = platforms;
 
-    this.filteredLookupItems = this.searchSymbolCtrl.valueChanges.pipe(
+    this.filteredLookupItemsObservable =
+      this.searchSymbolCtrl.valueChanges.pipe(
         startWith(''),
         debounceTime(400),
         distinctUntilChanged(),
-      switchMap((aQuery: string) => {
+        switchMap((query: string) => {
-        if (aQuery) {
+          if (isString(query)) {
-          return this.dataService.fetchSymbols(aQuery);
+            const filteredLookupItemsObservable =
+              this.dataService.fetchSymbols(query);
+
+            filteredLookupItemsObservable.subscribe((filteredLookupItems) => {
+              this.filteredLookupItems = filteredLookupItems;
+            });
+
+            return filteredLookupItemsObservable;
           }
 
           return [];
@@ -70,7 +87,10 @@ export class CreateOrUpdateTransactionDialog implements OnDestroy {
 
     if (this.data.transaction.symbol) {
       this.dataService
-        .fetchSymbolItem(this.data.transaction.symbol)
+        .fetchSymbolItem({
+          dataSource: this.data.transaction.dataSource,
+          symbol: this.data.transaction.symbol
+        })
         .pipe(takeUntil(this.unsubscribeSubject))
         .subscribe(({ marketPrice }) => {
           this.currentMarketPrice = marketPrice;
@@ -84,17 +104,68 @@ export class CreateOrUpdateTransactionDialog implements OnDestroy {
     this.data.transaction.unitPrice = this.currentMarketPrice;
   }
 
+  public displayFn(aLookupItem: LookupItem) {
+    return aLookupItem?.symbol ?? '';
+  }
+
+  public onBlurSymbol() {
+    const currentLookupItem = this.filteredLookupItems.find((lookupItem) => {
+      return lookupItem.symbol === this.data.transaction.symbol;
+    });
+
+    if (currentLookupItem) {
+      this.updateSymbol(currentLookupItem.symbol);
+    } else {
+      this.searchSymbolCtrl.setErrors({ incorrect: true });
+
+      this.data.transaction.currency = null;
+      this.data.transaction.dataSource = null;
+      this.data.transaction.symbol = null;
+    }
+
+    this.changeDetectorRef.markForCheck();
+  }
+
   public onCancel(): void {
     this.dialogRef.close();
   }
 
   public onUpdateSymbol(event: MatAutocompleteSelectedEvent) {
+    this.data.transaction.dataSource = event.option.value.dataSource;
+    this.updateSymbol(event.option.value.symbol);
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
+  private updateSymbol(symbol: string) {
     this.isLoading = true;
-    this.data.transaction.symbol = event.option.value;
+
+    this.searchSymbolCtrl.setErrors(null);
+
+    this.data.transaction.symbol = symbol;
 
     this.dataService
-      .fetchSymbolItem(this.data.transaction.symbol)
+      .fetchSymbolItem({
-      .pipe(takeUntil(this.unsubscribeSubject))
+        dataSource: this.data.transaction.dataSource,
+        symbol: this.data.transaction.symbol
+      })
+      .pipe(
+        catchError(() => {
+          this.data.transaction.currency = null;
+          this.data.transaction.dataSource = null;
+          this.data.transaction.unitPrice = null;
+
+          this.isLoading = false;
+
+          this.changeDetectorRef.markForCheck();
+
+          return EMPTY;
+        }),
+        takeUntil(this.unsubscribeSubject)
+      )
       .subscribe(({ currency, dataSource, marketPrice }) => {
         this.data.transaction.currency = currency;
         this.data.transaction.dataSource = dataSource;
@@ -105,17 +176,4 @@ export class CreateOrUpdateTransactionDialog implements OnDestroy {
         this.changeDetectorRef.markForCheck();
       });
   }
-
-  public onUpdateSymbolByTyping(value: string) {
-    this.data.transaction.currency = null;
-    this.data.transaction.dataSource = null;
-    this.data.transaction.unitPrice = null;
-
-    this.data.transaction.symbol = value;
-  }
-
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
 }

apps/client/src/app/pages/portfolio/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.html

@@ -28,18 +28,19 @@
           matInput
           required
           [formControl]="searchSymbolCtrl"
-          [matAutocomplete]="auto"
+          [matAutocomplete]="autocomplete"
-          (change)="onUpdateSymbolByTyping($event.target.value)"
+          (blur)="onBlurSymbol()"
         />
         <mat-autocomplete
-          #auto="matAutocomplete"
+          #autocomplete="matAutocomplete"
+          [displayWith]="displayFn"
           (optionSelected)="onUpdateSymbol($event)"
         >
           <ng-container>
             <mat-option
-              *ngFor="let lookupItem of filteredLookupItems | async"
+              *ngFor="let lookupItem of filteredLookupItemsObservable | async"
               class="autocomplete"
-              [value]="lookupItem.symbol"
+              [value]="lookupItem"
             >
               <span class="mr-2 symbol">{{ lookupItem.symbol | gfSymbol }}</span
               ><span><b>{{ lookupItem.name }}</b></span>

apps/client/src/app/pages/portfolio/transactions/create-or-update-transaction-dialog/create-or-update-transaction-dialog.module.ts

@@ -9,8 +9,8 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
-import { GfValueModule } from '@ghostfolio/client/components/value/value.module';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
+import { GfValueModule } from '@ghostfolio/ui/value';
 
 import { CreateOrUpdateTransactionDialog } from './create-or-update-transaction-dialog.component';
 

apps/client/src/app/pages/register/register-page.module.ts

@@ -3,7 +3,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { RouterModule } from '@angular/router';
-import { GfLogoModule } from '@ghostfolio/client/components/logo/logo.module';
+import { GfLogoModule } from '@ghostfolio/ui/logo';
 
 import { RegisterPageRoutingModule } from './register-page-routing.module';
 import { RegisterPageComponent } from './register-page.component';

apps/client/src/app/pages/webauthn/webauthn-page.module.ts

@@ -2,8 +2,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { GfLogoModule } from '@ghostfolio/client/components/logo/logo.module';
 import { WebauthnPageComponent } from '@ghostfolio/client/pages/webauthn/webauthn-page.component';
+import { GfLogoModule } from '@ghostfolio/ui/logo';
 
 import { WebauthnPageRoutingModule } from './webauthn-page-routing.module';
 

apps/client/src/app/pages/zen/zen-page.component.ts

@@ -19,6 +19,7 @@ import {
   Position,
   User
 } from '@ghostfolio/common/interfaces';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { DateRange } from '@ghostfolio/common/types';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
@@ -36,6 +37,7 @@ export class ZenPageComponent implements AfterViewInit, OnDestroy, OnInit {
   public dateRange: DateRange = 'max';
   public deviceType: string;
   public hasImpersonationId: boolean;
+  public hasPermissionToCreateOrder: boolean;
   public hasPositions: boolean;
   public historicalDataItems: LineChartItem[];
   public isLoadingPerformance = true;
@@ -63,6 +65,11 @@ export class ZenPageComponent implements AfterViewInit, OnDestroy, OnInit {
         if (state?.user) {
           this.user = state.user;
 
+          this.hasPermissionToCreateOrder = hasPermission(
+            this.user.permissions,
+            permissions.createOrder
+          );
+
           this.changeDetectorRef.markForCheck();
         }
       });
@@ -76,6 +83,8 @@ export class ZenPageComponent implements AfterViewInit, OnDestroy, OnInit {
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((aId) => {
         this.hasImpersonationId = !!aId;
+
+        this.changeDetectorRef.markForCheck();
       });
 
     this.update();

apps/client/src/app/pages/zen/zen-page.html

@@ -64,7 +64,8 @@
       <h3 class="d-flex justify-content-center mb-3" i18n>Holdings</h3>
       <div class="row">
         <div class="align-items-center col">
-          <mat-card *ngIf="hasPositions === true" class="p-0">
+          <ng-container *ngIf="hasPositions === true">
+            <mat-card class="p-0">
               <mat-card-content>
                 <gf-positions
                   [baseCurrency]="user?.settings?.baseCurrency"
@@ -75,6 +76,16 @@
                 ></gf-positions>
               </mat-card-content>
             </mat-card>
+            <div *ngIf="hasPermissionToCreateOrder" class="text-center">
+              <a
+                class="mt-3"
+                i18n
+                mat-button
+                [routerLink]="['/portfolio', 'transactions']"
+                >Manage Transactions...</a
+              >
+            </div>
+          </ng-container>
           <div
             *ngIf="hasPositions === false"
             class="d-flex justify-content-center"

apps/client/src/app/pages/zen/zen-page.module.ts

@@ -5,9 +5,9 @@ import { MatCardModule } from '@angular/material/card';
 import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
 import { GfLineChartModule } from '@ghostfolio/client/components/line-chart/line-chart.module';
-import { GfNoTransactionsInfoModule } from '@ghostfolio/client/components/no-transactions-info/no-transactions-info.module';
 import { GfPortfolioPerformanceModule } from '@ghostfolio/client/components/portfolio-performance/portfolio-performance.module';
 import { GfPositionsModule } from '@ghostfolio/client/components/positions/positions.module';
+import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
 
 import { ZenPageRoutingModule } from './zen-page-routing.module';
 import { ZenPageComponent } from './zen-page.component';

apps/client/src/app/pages/zen/zen-page.scss

@@ -12,6 +12,9 @@
     right: 0;
     top: 0;
 
+    margin-bottom: env(safe-area-inset-bottom);
+    margin-bottom: constant(safe-area-inset-bottom);
+
     ::ng-deep {
       .mat-tab-body-wrapper {
         height: 100%;

apps/client/src/app/services/data.service.ts

@@ -29,8 +29,11 @@ import {
 import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface';
 import { permissions } from '@ghostfolio/common/permissions';
 import { DateRange } from '@ghostfolio/common/types';
-import { Order as OrderModel } from '@prisma/client';
+import {
-import { Account as AccountModel } from '@prisma/client';
+  Account as AccountModel,
+  DataSource,
+  Order as OrderModel
+} from '@prisma/client';
 import { parseISO } from 'date-fns';
 import { cloneDeep } from 'lodash';
 import { Observable } from 'rxjs';
@@ -108,8 +111,14 @@ export class DataService {
     return info;
   }
 
-  public fetchSymbolItem(aSymbol: string) {
+  public fetchSymbolItem({
-    return this.http.get<SymbolItem>(`/api/symbol/${aSymbol}`);
+    dataSource,
+    symbol
+  }: {
+    dataSource: DataSource;
+    symbol: string;
+  }) {
+    return this.http.get<SymbolItem>(`/api/symbol/${dataSource}/${symbol}`);
   }
 
   public fetchPositions({

apps/client/src/app/services/web-authn.service.ts

@@ -6,7 +6,10 @@ import {
   PublicKeyCredentialRequestOptionsJSON
 } from '@ghostfolio/api/app/auth/interfaces/simplewebauthn';
 import { SettingsStorageService } from '@ghostfolio/client/services/settings-storage.service';
-import { startAssertion, startAttestation } from '@simplewebauthn/browser';
+import {
+  startAuthentication,
+  startRegistration
+} from '@simplewebauthn/browser';
 import { of } from 'rxjs';
 import { catchError, switchMap, tap } from 'rxjs/operators';
 
@@ -32,7 +35,7 @@ export class WebAuthnService {
   public register() {
     return this.http
       .get<PublicKeyCredentialCreationOptionsJSON>(
-        `/api/auth/webauthn/generate-attestation-options`,
+        `/api/auth/webauthn/generate-registration-options`,
         {}
       )
       .pipe(
@@ -41,7 +44,7 @@ export class WebAuthnService {
           return of(null);
         }),
         switchMap((attOps) => {
-          return startAttestation(attOps);
+          return startRegistration(attOps);
         }),
         switchMap((attResp) => {
           return this.http.post<AuthDeviceDto>(
@@ -83,7 +86,7 @@ export class WebAuthnService {
         { deviceId }
       )
       .pipe(
-        switchMap(startAssertion),
+        switchMap(startAuthentication),
         switchMap((assertionResponse) => {
           return this.http.post<{ authToken: string }>(
             `/api/auth/webauthn/verify-assertion`,

apps/client/src/index.html

@@ -27,7 +27,10 @@
       name="twitter:title"
       content="Ghostfolio – Open Source Wealth Management Software"
     />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="viewport"
+      content="initial-scale=1, viewport-fit=cover, width=device-width"
+    />
     <meta property="og:description" content="" />
     <meta
       property="og:title"

apps/ui-e2e/.eslintrc.json

@@ -0,0 +1,17 @@
+{
+  "extends": ["plugin:cypress/recommended", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["src/plugins/index.js"],
+      "rules": {
+        "@typescript-eslint/no-var-requires": "off",
+        "no-undef": "off"
+      }
+    }
+  ]
+}

apps/ui-e2e/cypress.json

@@ -0,0 +1,13 @@
+{
+  "fileServerFolder": ".",
+  "fixturesFolder": "./src/fixtures",
+  "integrationFolder": "./src/integration",
+  "modifyObstructiveCode": false,
+  "supportFile": "./src/support/index.ts",
+  "pluginsFile": "./src/plugins/index",
+  "video": true,
+  "videosFolder": "../../dist/cypress/apps/ui-e2e/videos",
+  "screenshotsFolder": "../../dist/cypress/apps/ui-e2e/screenshots",
+  "chromeWebSecurity": false,
+  "baseUrl": "http://localhost:4400"
+}

apps/ui-e2e/src/fixtures/example.json

@@ -0,0 +1,4 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io"
+}

apps/ui-e2e/src/integration/value/value.component.spec.ts

@@ -0,0 +1,6 @@
+describe('ui', () => {
+  beforeEach(() => cy.visit('/iframe.html?id=valuecomponent--loading'));
+  it('should render the component', () => {
+    cy.get('gf-value').should('exist');
+  });
+});

apps/ui-e2e/src/plugins/index.js

@@ -0,0 +1,22 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+const { preprocessTypescript } = require('@nrwl/cypress/plugins/preprocessor');
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+
+  // Preprocess Typescript file using Nx helper
+  on('file:preprocessor', preprocessTypescript(config));
+};

apps/ui-e2e/src/support/commands.ts

@@ -0,0 +1,33 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace Cypress {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface Chainable<Subject> {
+    login(email: string, password: string): void;
+  }
+}
+//
+// -- This is a parent command --
+Cypress.Commands.add('login', (email, password) => {
+  console.log('Custom command example: Login', email, password);
+});
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

apps/ui-e2e/src/support/index.ts

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';

apps/ui-e2e/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "sourceMap": false,
+    "outDir": "../../dist/out-tsc",
+    "allowJs": true,
+    "types": ["cypress", "node"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.js"]
+}

jest.config.js

@@ -1,7 +1,3 @@
-module.exports = {
+const { getJestProjects } = require('@nrwl/jest');
-  projects: [
+
-    '<rootDir>/apps/api',
+module.exports = { projects: getJestProjects() };
-    '<rootDir>/apps/client',
-    '<rootDir>/libs/common'
-  ]
-};

libs/common/src/lib/config.ts

@@ -13,7 +13,7 @@ export const currencyPairs: Partial<
     currency1: Currency;
     currency2: Currency;
   }
->[] = Object.keys(Currency)
+>[] = (Object.keys(Currency) as Array<keyof typeof Currency>)
   .filter((currency) => {
     return currency !== Currency.USD;
   })
@@ -28,6 +28,7 @@ export const currencyPairs: Partial<
 
 export const ghostfolioScraperApiSymbolPrefix = '_GF_';
 export const ghostfolioCashSymbol = `${ghostfolioScraperApiSymbolPrefix}CASH`;
+export const ghostfolioFearAndGreedIndexSymbol = `${ghostfolioScraperApiSymbolPrefix}FEAR_AND_GREED_INDEX`;
 
 export const locale = 'de-CH';
 

libs/common/src/lib/interfaces/portfolio-performance.interface.ts

@@ -1,5 +1,8 @@
 export interface PortfolioPerformance {
+  annualizedPerformancePercent: number;
   currentGrossPerformance: number;
   currentGrossPerformancePercent: number;
+  currentNetPerformance: number;
+  currentNetPerformancePercent: number;
   currentValue: number;
 }

libs/common/src/lib/interfaces/portfolio-position.interface.ts

@@ -8,7 +8,7 @@ export interface PortfolioPosition {
   allocationCurrent: number;
   allocationInvestment: number;
   assetClass?: AssetClass;
-  assetSubClass?: AssetSubClass;
+  assetSubClass?: AssetSubClass | 'CASH';
   countries: Country[];
   currency: Currency;
   exchange?: string;
@@ -20,6 +20,8 @@ export interface PortfolioPosition {
   marketPrice: number;
   marketState: MarketState;
   name: string;
+  netPerformance: number;
+  netPerformancePercent: number;
   quantity: number;
   sectors: Sector[];
   transactionCount: number;

libs/common/src/lib/interfaces/portfolio-summary.interface.ts

@@ -1,6 +1,7 @@
 import { PortfolioPerformance } from './portfolio-performance.interface';
 
 export interface PortfolioSummary extends PortfolioPerformance {
+  annualizedPerformancePercent: number;
   cash: number;
   committedFunds: number;
   fees: number;

libs/common/src/lib/interfaces/position.interface.ts

@@ -13,6 +13,8 @@ export interface Position {
   marketPrice?: number;
   marketState?: MarketState;
   name?: string;
+  netPerformance?: number;
+  netPerformancePercentage?: number;
   quantity: number;
   symbol: string;
   transactionCount: number;

libs/common/src/lib/interfaces/statistics.interface.ts

@@ -1,5 +1,6 @@
 export interface Statistics {
   activeUsers1d: number;
   activeUsers30d: number;
+  gitHubContributors: number;
   gitHubStargazers: number;
 }