Release 1.205.2 (#1369)

* Improve wording

* Update changelog

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,45 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: '[BUG]'
+labels: ''
+assignees: ''
+---
+
+The Issue tracker is **ONLY** used for reporting bugs. New features should be discussed on our [Slack channel](https://ghostfolio.slack.com) or in [Discussions](https://github.com/ghostfolio/ghostfolio/discussions).
+
+**Bug Description**
+
+<!-- A clear and concise description of what the bug is. -->
+
+**To Reproduce**
+
+<!-- Steps to reproduce the behavior -->
+
+1.
+2.
+3.
+
+**Expected behavior**
+
+<!-- A clear and concise description of what you expected to happen. -->
+
+**Screenshots**
+
+<!-- If applicable, add screenshots to help explain your problem. -->
+
+**Logs**
+
+<!-- If applicable, add logs to help explain your problem. -->
+
+**Environment**
+
+<!-- Please complete the following information -->
+
+- Ghostfolio Version X.Y.Z
+- Browser
+- OS
+
+**Additional context**
+
+<!-- Add any other context about the problem here. -->

.prettierrc

@@ -1,4 +1,13 @@
 {
+  "attributeGroups": [
+    "$ANGULAR_ELEMENT_REF",
+    "$ANGULAR_STRUCTURAL_DIRECTIVE",
+    "$DEFAULT",
+    "$ANGULAR_INPUT",
+    "$ANGULAR_TWO_WAY_BINDING",
+    "$ANGULAR_OUTPUT"
+  ],
+  "attributeSort": "ASC",
   "endOfLine": "auto",
   "printWidth": 80,
   "singleQuote": true,

CHANGELOG.md

@@ -5,6 +5,225 @@ 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.205.2 - 16.10.2022
+
+### Changed
+
+- Persisted the language on url change
+- Improved the portfolio evolution chart
+- Refactored the appearance (dark mode) in user settings (from `appearance` to `colorScheme`)
+- Improved the wording on the landing page
+
+## 1.204.1 - 15.10.2022
+
+### Added
+
+- Added support to change the appearance (dark mode) in user settings
+- Added the total amount chart to the investment timeline
+- Setup the `prettier` plugin `prettier-plugin-organize-attributes`
+
+### Changed
+
+- Respected the current date in the _FIRE_ calculator
+- Simplified the settings management in the admin control panel
+- Renamed the data source type `RAKUTEN` to `RAPID_API`
+
+### Fixed
+
+- Fixed some links in the blog posts
+- Fixed the alignment of the value component on the allocations page
+
+### Todo
+
+- Rename the environment variable from `RAKUTEN_RAPID_API_KEY` to `RAPID_API_API_KEY`
+
+## 1.203.0 - 08.10.2022
+
+### Added
+
+- Supported a progressive line animation in the line chart component
+
+### Changed
+
+- Moved the benchmark comparator from experimental to general availability
+- Improved the user interface of the benchmark comparator
+
+### Fixed
+
+- Fixed an issue in the performance and chart calculation of today
+- Fixed the alignment of the value component in the admin control panel
+
+## 1.202.0 - 07.10.2022
+
+### Added
+
+- Added support for a translated 4% rule in the _FIRE_ section
+
+### Changed
+
+- Improved the caching of the benchmarks in the markets overview (only cache if fetching was successful)
+- Improved the wording in the twitter bot service
+
+### Fixed
+
+- Fixed the support for cryptocurrencies having a symbol with less than 3 characters (e.g. `SC-USD`)
+- Fixed the text truncation in the value component
+
+## 1.201.0 - 01.10.2022
+
+### Added
+
+- Added a blog post: _Hacktoberfest 2022_
+
+### Changed
+
+- Improved the usage of the value component in the admin control panel
+- Improved the language localization for Español (`es`)
+
+### Fixed
+
+- Fixed the usage of the value component on the allocations page
+
+## 1.200.0 - 01.10.2022
+
+### Added
+
+- Added a mini statistics section to the landing page including pulls on _Docker Hub_
+- Added an _As seen in_ section to the landing page
+- Added support for an icon in the value component
+
+### Changed
+
+- Upgraded `prisma` from version `4.1.1` to `4.4.0`
+
+## 1.199.1 - 27.09.2022
+
+### Added
+
+- Set up the language localization for Español (`es`)
+- Added support for sectors in mutual funds
+
+## 1.198.0 - 25.09.2022
+
+### Added
+
+- Added support to exclude an account from analysis
+- Set up the language localization for Nederlands (`nl`)
+
+## 1.197.0 - 24.09.2022
+
+### Added
+
+- Added the value of the active filter in percentage on the allocations page
+- Extended the feature overview page by multi-language support (English, German, Italian)
+
+### Changed
+
+- Combined the performance and chart calculation
+- Improved the style of various selectors (density)
+
+## 1.196.0 - 22.09.2022
+
+### Added
+
+- Set up the language localization for Italiano (`it`)
+- Extended the landing page
+
+## 1.195.0 - 20.09.2022
+
+### Changed
+
+- Improved the algorithm of the performance chart calculation
+
+### Fixed
+
+- Improved the chart tooltip of the benchmark comparator
+
+## 1.194.0 - 17.09.2022
+
+### Added
+
+- Added `NODE_ENV: production` to the `docker-compose` files (`docker-compose.yml` and `docker-compose.build.yml`)
+- Visualized the percentage of the active filter on the allocations page
+
+### Changed
+
+- Improved the language localization for German (`de`)
+
+### Fixed
+
+- Respected the end date in the performance chart calculation
+
+### Todo
+
+- Set `NODE_ENV: production` as in [docker-compose.yml](https://github.com/ghostfolio/ghostfolio/blob/main/docker/docker-compose.yml)
+
+## 1.193.0 - 14.09.2022
+
+### Changed
+
+- Sorted the benchmarks by name
+- Extended the pricing page
+
+### Fixed
+
+- Fixed the calculations of the exchange rate service by changing `USD` to the base currency
+- Fixed the missing assets during the local development
+
+## 1.192.0 - 11.09.2022
+
+### Changed
+
+- Simplified the configuration of the benchmarks: `symbolProfileId` instead of `dataSource` and `symbol`
+- Upgraded `yahoo-finance2` from version `2.3.3` to `2.3.6`
+
+### Fixed
+
+- Improved the loading indicator of the benchmark comparator
+- Improved the error handling in the benchmark calculation
+
+## 1.191.0 - 10.09.2022
+
+### Changed
+
+- Removed the `currency` and `viewMode` from the `User` database schema
+
+### Fixed
+
+- Allowed the date range change for the demo user
+
+## 1.190.0 - 10.09.2022
+
+### Added
+
+- Added the date range component to the benchmark comparator
+
+### Changed
+
+- Improved the mobile layout of the benchmark comparator
+- Migrated the date range setting from the locale storage to the user settings
+- Refactored the `currency` and `view mode` in the user settings
+
+## 1.189.0 - 08.09.2022
+
+### Changed
+
+- Distinguished between currency and unit in the chart tooltip
+
+### Fixed
+
+- Fixed the benchmark chart in the benchmark comparator (experimental)
+
+## 1.188.0 - 06.09.2022
+
+### Added
+
+- Added a benchmark comparator (experimental)
+
+### Fixed
+
+- Improved the asset profile details dialog for assets without a (first) activity in the admin control panel
+
 ## 1.187.0 - 03.09.2022
 
 ### Added
@@ -100,7 +319,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Set up `ng-extract-i18n-merge` to improve the i18n extraction and merge workflow
-- Set up language localization for German (`de`)
+- Set up the language localization for German (`de`)
 - Resolved the feature graphic of the blog post
 
 ### Changed
@@ -762,8 +981,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- Display the value in base currency in the accounts table on mobile
+- Displayed the value in base currency in the accounts table on mobile
-- Display the value in base currency in the activities table on mobile
+- Displayed the value in base currency in the activities table on mobile
 - Renamed `orders` to `activities` in import and export functionality
 - Harmonized the algebraic sign of `currentGrossPerformancePercent` and `currentNetPerformancePercent` with `currentGrossPerformance` and `currentNetPerformance`
 - Improved the pricing page

README.md

@@ -153,6 +153,7 @@ Please follow the instructions of the Ghostfolio [Unraid Community App](https://
 ### Setup
 
 1. Run `yarn install`
+1. Run `yarn build:dev` to build the source code including the assets
 1. Run `docker-compose --env-file ./.env -f docker/docker-compose.dev.yml up -d` to start [PostgreSQL](https://www.postgresql.org) and [Redis](https://redis.io)
 1. Run `yarn database:setup` to initialize the database schema and populate your database with (example) data
 1. Start the server and the client (see [_Development_](#Development))

angular.json

@@ -136,6 +136,18 @@
               "baseHref": "/en/",
               "localize": ["en"]
             },
+            "development-es": {
+              "baseHref": "/es/",
+              "localize": ["es"]
+            },
+            "development-it": {
+              "baseHref": "/it/",
+              "localize": ["it"]
+            },
+            "development-nl": {
+              "baseHref": "/nl/",
+              "localize": ["nl"]
+            },
             "production": {
               "fileReplacements": [
                 {
@@ -180,6 +192,15 @@
             "development-en": {
               "browserTarget": "client:build:development-en"
             },
+            "development-es": {
+              "browserTarget": "client:build:development-es"
+            },
+            "development-it": {
+              "browserTarget": "client:build:development-it"
+            },
+            "development-nl": {
+              "browserTarget": "client:build:development-nl"
+            },
             "production": {
               "browserTarget": "client:build:production"
             }
@@ -191,7 +212,12 @@
             "browserTarget": "client:build",
             "includeContext": true,
             "outputPath": "src/locales",
-            "targetFiles": ["messages.de.xlf"]
+            "targetFiles": [
+              "messages.de.xlf",
+              "messages.es.xlf",
+              "messages.it.xlf",
+              "messages.nl.xlf"
+            ]
           }
         },
         "lint": {
@@ -214,6 +240,18 @@
           "de": {
             "baseHref": "/de/",
             "translation": "apps/client/src/locales/messages.de.xlf"
+          },
+          "es": {
+            "baseHref": "/es/",
+            "translation": "apps/client/src/locales/messages.es.xlf"
+          },
+          "it": {
+            "baseHref": "/it/",
+            "translation": "apps/client/src/locales/messages.it.xlf"
+          },
+          "nl": {
+            "baseHref": "/nl/",
+            "translation": "apps/client/src/locales/messages.nl.xlf"
           }
         },
         "sourceLocale": "en"

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

@@ -95,9 +95,10 @@ export class AccountController {
       );
 
     let accountsWithAggregations =
-      await this.portfolioService.getAccountsWithAggregations(
+      await this.portfolioService.getAccountsWithAggregations({
-        impersonationUserId || this.request.user.id
+        userId: impersonationUserId || this.request.user.id,
-      );
+        withExcludedAccounts: true
+      });
 
     if (
       impersonationUserId ||
@@ -137,10 +138,11 @@ export class AccountController {
       );
 
     let accountsWithAggregations =
-      await this.portfolioService.getAccountsWithAggregations(
+      await this.portfolioService.getAccountsWithAggregations({
-        impersonationUserId || this.request.user.id,
+        filters: [{ id, type: 'ACCOUNT' }],
-        [{ id, type: 'ACCOUNT' }]
+        userId: impersonationUserId || this.request.user.id,
-      );
+        withExcludedAccounts: true
+      });
 
     if (
       impersonationUserId ||

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

@@ -107,15 +107,23 @@ export class AccountService {
   public async getCashDetails({
     currency,
     filters = [],
-    userId
+    userId,
+    withExcludedAccounts = false
   }: {
     currency: string;
     filters?: Filter[];
     userId: string;
+    withExcludedAccounts?: boolean;
   }): Promise<CashDetails> {
     let totalCashBalanceInBaseCurrency = new Big(0);
 
-    const where: Prisma.AccountWhereInput = { userId };
+    const where: Prisma.AccountWhereInput = {
+      userId
+    };
+
+    if (withExcludedAccounts === false) {
+      where.isExcluded = false;
+    }
 
     const {
       ACCOUNT: filtersByAccount,

apps/api/src/app/account/create-account.dto.ts

@@ -1,5 +1,11 @@
 import { AccountType } from '@prisma/client';
-import { IsNumber, IsString, ValidateIf } from 'class-validator';
+import {
+  IsBoolean,
+  IsNumber,
+  IsOptional,
+  IsString,
+  ValidateIf
+} from 'class-validator';
 
 export class CreateAccountDto {
   @IsString()
@@ -11,6 +17,10 @@ export class CreateAccountDto {
   @IsString()
   currency: string;
 
+  @IsBoolean()
+  @IsOptional()
+  isExcluded?: boolean;
+
   @IsString()
   name: string;
 

apps/api/src/app/account/update-account.dto.ts

@@ -1,5 +1,11 @@
 import { AccountType } from '@prisma/client';
-import { IsNumber, IsString, ValidateIf } from 'class-validator';
+import {
+  IsBoolean,
+  IsNumber,
+  IsOptional,
+  IsString,
+  ValidateIf
+} from 'class-validator';
 
 export class UpdateAccountDto {
   @IsString()
@@ -14,6 +20,10 @@ export class UpdateAccountDto {
   @IsString()
   id: string;
 
+  @IsBoolean()
+  @IsOptional()
+  isExcluded?: boolean;
+
   @IsString()
   name: string;
 

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

@@ -181,10 +181,10 @@ export class AdminService {
   public async putSetting(key: string, value: string) {
     let response: Property;
 
-    if (value === '') {
+    if (value) {
-      response = await this.propertyService.delete({ key });
-    } else {
       response = await this.propertyService.put({ key, value });
+    } else {
+      response = await this.propertyService.delete({ key });
     }
 
     if (key === PROPERTY_CURRENCIES) {

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

@@ -1,7 +1,18 @@
 import { TransformDataSourceInRequestInterceptor } from '@ghostfolio/api/interceptors/transform-data-source-in-request.interceptor';
 import { TransformDataSourceInResponseInterceptor } from '@ghostfolio/api/interceptors/transform-data-source-in-response.interceptor';
-import { BenchmarkResponse } from '@ghostfolio/common/interfaces';
+import {
-import { Controller, Get, UseInterceptors } from '@nestjs/common';
+  BenchmarkMarketDataDetails,
+  BenchmarkResponse
+} from '@ghostfolio/common/interfaces';
+import {
+  Controller,
+  Get,
+  Param,
+  UseGuards,
+  UseInterceptors
+} from '@nestjs/common';
+import { AuthGuard } from '@nestjs/passport';
+import { DataSource } from '@prisma/client';
 
 import { BenchmarkService } from './benchmark.service';
 
@@ -17,4 +28,21 @@ export class BenchmarkController {
       benchmarks: await this.benchmarkService.getBenchmarks()
     };
   }
+
+  @Get(':dataSource/:symbol/:startDateString')
+  @UseInterceptors(TransformDataSourceInRequestInterceptor)
+  @UseGuards(AuthGuard('jwt'))
+  public async getBenchmarkMarketDataBySymbol(
+    @Param('dataSource') dataSource: DataSource,
+    @Param('startDateString') startDateString: string,
+    @Param('symbol') symbol: string
+  ): Promise<BenchmarkMarketDataDetails> {
+    const startDate = new Date(startDateString);
+
+    return this.benchmarkService.getMarketDataBySymbol({
+      dataSource,
+      startDate,
+      symbol
+    });
+  }
 }

apps/api/src/app/benchmark/benchmark.module.ts

@@ -1,4 +1,5 @@
 import { RedisCacheModule } from '@ghostfolio/api/app/redis-cache/redis-cache.module';
+import { SymbolModule } from '@ghostfolio/api/app/symbol/symbol.module';
 import { ConfigurationModule } from '@ghostfolio/api/services/configuration.module';
 import { DataProviderModule } from '@ghostfolio/api/services/data-provider/data-provider.module';
 import { MarketDataModule } from '@ghostfolio/api/services/market-data.module';
@@ -18,6 +19,7 @@ import { BenchmarkService } from './benchmark.service';
     MarketDataModule,
     PropertyModule,
     RedisCacheModule,
+    SymbolModule,
     SymbolProfileModule
   ],
   providers: [BenchmarkService]

apps/api/src/app/benchmark/benchmark.service.spec.ts

@@ -0,0 +1,15 @@
+import { BenchmarkService } from './benchmark.service';
+
+describe('BenchmarkService', () => {
+  let benchmarkService: BenchmarkService;
+
+  beforeAll(async () => {
+    benchmarkService = new BenchmarkService(null, null, null, null, null, null);
+  });
+
+  it('calculateChangeInPercentage', async () => {
+    expect(benchmarkService.calculateChangeInPercentage(1, 2)).toEqual(1);
+    expect(benchmarkService.calculateChangeInPercentage(2, 2)).toEqual(0);
+    expect(benchmarkService.calculateChangeInPercentage(2, 1)).toEqual(-0.5);
+  });
+});

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

@@ -1,12 +1,23 @@
 import { RedisCacheService } from '@ghostfolio/api/app/redis-cache/redis-cache.service';
+import { SymbolService } from '@ghostfolio/api/app/symbol/symbol.service';
 import { DataProviderService } from '@ghostfolio/api/services/data-provider/data-provider.service';
 import { MarketDataService } from '@ghostfolio/api/services/market-data.service';
 import { PropertyService } from '@ghostfolio/api/services/property/property.service';
 import { SymbolProfileService } from '@ghostfolio/api/services/symbol-profile.service';
-import { PROPERTY_BENCHMARKS } from '@ghostfolio/common/config';
+import {
-import { BenchmarkResponse, UniqueAsset } from '@ghostfolio/common/interfaces';
+  MAX_CHART_ITEMS,
+  PROPERTY_BENCHMARKS
+} from '@ghostfolio/common/config';
+import { DATE_FORMAT } from '@ghostfolio/common/helper';
+import {
+  BenchmarkMarketDataDetails,
+  BenchmarkResponse,
+  UniqueAsset
+} from '@ghostfolio/common/interfaces';
 import { Injectable } from '@nestjs/common';
+import { SymbolProfile } from '@prisma/client';
 import Big from 'big.js';
+import { format } from 'date-fns';
 import ms from 'ms';
 
 @Injectable()
@@ -18,9 +29,18 @@ export class BenchmarkService {
     private readonly marketDataService: MarketDataService,
     private readonly propertyService: PropertyService,
     private readonly redisCacheService: RedisCacheService,
-    private readonly symbolProfileService: SymbolProfileService
+    private readonly symbolProfileService: SymbolProfileService,
+    private readonly symbolService: SymbolService
   ) {}
 
+  public calculateChangeInPercentage(baseValue: number, currentValue: number) {
+    if (baseValue && currentValue) {
+      return new Big(currentValue).div(baseValue).minus(1).toNumber();
+    }
+
+    return 0;
+  }
+
   public async getBenchmarks({ useCache = true } = {}): Promise<
     BenchmarkResponse['benchmarks']
   > {
@@ -38,62 +58,153 @@ export class BenchmarkService {
       } catch {}
     }
 
-    const benchmarkAssets: UniqueAsset[] =
+    const benchmarkAssetProfiles = await this.getBenchmarkAssetProfiles();
-      ((await this.propertyService.getByKey(
+
-        PROPERTY_BENCHMARKS
-      )) as UniqueAsset[]) ?? [];
     const promises: Promise<number>[] = [];
 
-    const [quotes, assetProfiles] = await Promise.all([
+    const quotes = await this.dataProviderService.getQuotes(
-      this.dataProviderService.getQuotes(benchmarkAssets),
+      benchmarkAssetProfiles.map(({ dataSource, symbol }) => {
-      this.symbolProfileService.getSymbolProfiles(benchmarkAssets)
+        return { dataSource, symbol };
-    ]);
+      })
+    );
 
-    for (const benchmarkAsset of benchmarkAssets) {
+    for (const { dataSource, symbol } of benchmarkAssetProfiles) {
-      promises.push(this.marketDataService.getMax(benchmarkAsset));
+      promises.push(this.marketDataService.getMax({ dataSource, symbol }));
     }
 
     const allTimeHighs = await Promise.all(promises);
+    let storeInCache = true;
 
     benchmarks = allTimeHighs.map((allTimeHigh, index) => {
-      const { marketPrice } = quotes[benchmarkAssets[index].symbol];
+      const { marketPrice } =
+        quotes[benchmarkAssetProfiles[index].symbol] ?? {};
 
-      let performancePercentFromAllTimeHigh = new Big(0);
+      let performancePercentFromAllTimeHigh = 0;
 
-      if (allTimeHigh) {
+      if (allTimeHigh && marketPrice) {
-        performancePercentFromAllTimeHigh = new Big(marketPrice)
+        performancePercentFromAllTimeHigh = this.calculateChangeInPercentage(
-          .div(allTimeHigh)
+          allTimeHigh,
-          .minus(1);
+          marketPrice
+        );
+      } else {
+        storeInCache = false;
       }
 
       return {
         marketCondition: this.getMarketCondition(
           performancePercentFromAllTimeHigh
         ),
-        name: assetProfiles.find(({ dataSource, symbol }) => {
+        name: benchmarkAssetProfiles[index].name,
-          return (
-            dataSource === benchmarkAssets[index].dataSource &&
-            symbol === benchmarkAssets[index].symbol
-          );
-        })?.name,
         performances: {
           allTimeHigh: {
-            performancePercent: performancePercentFromAllTimeHigh.toNumber()
+            performancePercent: performancePercentFromAllTimeHigh
           }
         }
       };
     });
 
-    await this.redisCacheService.set(
+    if (storeInCache) {
-      this.CACHE_KEY_BENCHMARKS,
+      await this.redisCacheService.set(
-      JSON.stringify(benchmarks),
+        this.CACHE_KEY_BENCHMARKS,
-      ms('4 hours') / 1000
+        JSON.stringify(benchmarks),
-    );
+        ms('4 hours') / 1000
+      );
+    }
 
     return benchmarks;
   }
 
-  private getMarketCondition(aPerformanceInPercent: Big) {
+  public async getBenchmarkAssetProfiles(): Promise<Partial<SymbolProfile>[]> {
-    return aPerformanceInPercent.lte(-0.2) ? 'BEAR_MARKET' : 'NEUTRAL_MARKET';
+    const symbolProfileIds: string[] = (
+      ((await this.propertyService.getByKey(PROPERTY_BENCHMARKS)) as {
+        symbolProfileId: string;
+      }[]) ?? []
+    ).map(({ symbolProfileId }) => {
+      return symbolProfileId;
+    });
+
+    const assetProfiles =
+      await this.symbolProfileService.getSymbolProfilesByIds(symbolProfileIds);
+
+    return assetProfiles
+      .map(({ dataSource, id, name, symbol }) => {
+        return {
+          dataSource,
+          id,
+          name,
+          symbol
+        };
+      })
+      .sort((a, b) => a.name.localeCompare(b.name));
+  }
+
+  public async getMarketDataBySymbol({
+    dataSource,
+    startDate,
+    symbol
+  }: { startDate: Date } & UniqueAsset): Promise<BenchmarkMarketDataDetails> {
+    const [currentSymbolItem, marketDataItems] = await Promise.all([
+      this.symbolService.get({
+        dataGatheringItem: {
+          dataSource,
+          symbol
+        }
+      }),
+      this.marketDataService.marketDataItems({
+        orderBy: {
+          date: 'asc'
+        },
+        where: {
+          dataSource,
+          symbol,
+          date: {
+            gte: startDate
+          }
+        }
+      })
+    ]);
+
+    const step = Math.round(
+      marketDataItems.length / Math.min(marketDataItems.length, MAX_CHART_ITEMS)
+    );
+
+    const marketPriceAtStartDate = marketDataItems?.[0]?.marketPrice ?? 0;
+    const response = {
+      marketData: [
+        ...marketDataItems
+          .filter((marketDataItem, index) => {
+            return index % step === 0;
+          })
+          .map((marketDataItem) => {
+            return {
+              date: format(marketDataItem.date, DATE_FORMAT),
+              value:
+                marketPriceAtStartDate === 0
+                  ? 0
+                  : this.calculateChangeInPercentage(
+                      marketPriceAtStartDate,
+                      marketDataItem.marketPrice
+                    ) * 100
+            };
+          })
+      ]
+    };
+
+    if (currentSymbolItem?.marketPrice) {
+      response.marketData.push({
+        date: format(new Date(), DATE_FORMAT),
+        value:
+          this.calculateChangeInPercentage(
+            marketPriceAtStartDate,
+            currentSymbolItem.marketPrice
+          ) * 100
+      });
+    }
+
+    return response;
+  }
+
+  private getMarketCondition(aPerformanceInPercent: number) {
+    return aPerformanceInPercent <= -0.2 ? 'BEAR_MARKET' : 'NEUTRAL_MARKET';
   }
 }

apps/api/src/app/frontend.middleware.ts

@@ -4,22 +4,51 @@ import * as path from 'path';
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { DEFAULT_LANGUAGE_CODE } from '@ghostfolio/common/config';
 import { Injectable, NestMiddleware } from '@nestjs/common';
+import { ConfigService } from '@nestjs/config';
 import { NextFunction, Request, Response } from 'express';
 
 @Injectable()
 export class FrontendMiddleware implements NestMiddleware {
-  public indexHtmlDe = fs.readFileSync(
+  public indexHtmlDe = '';
-    this.getPathOfIndexHtmlFile('de'),
+  public indexHtmlEn = '';
-    'utf8'
+  public indexHtmlEs = '';
-  );
+  public indexHtmlIt = '';
-  public indexHtmlEn = fs.readFileSync(
+  public indexHtmlNl = '';
-    this.getPathOfIndexHtmlFile(DEFAULT_LANGUAGE_CODE),
+  public isProduction: boolean;
-    'utf8'
-  );
 
   public constructor(
+    private readonly configService: ConfigService,
     private readonly configurationService: ConfigurationService
-  ) {}
+  ) {
+    const NODE_ENV =
+      this.configService.get<'development' | 'production'>('NODE_ENV') ??
+      'development';
+
+    this.isProduction = NODE_ENV === 'production';
+
+    try {
+      this.indexHtmlDe = fs.readFileSync(
+        this.getPathOfIndexHtmlFile('de'),
+        'utf8'
+      );
+      this.indexHtmlEn = fs.readFileSync(
+        this.getPathOfIndexHtmlFile(DEFAULT_LANGUAGE_CODE),
+        'utf8'
+      );
+      this.indexHtmlEs = fs.readFileSync(
+        this.getPathOfIndexHtmlFile('es'),
+        'utf8'
+      );
+      this.indexHtmlIt = fs.readFileSync(
+        this.getPathOfIndexHtmlFile('it'),
+        'utf8'
+      );
+      this.indexHtmlNl = fs.readFileSync(
+        this.getPathOfIndexHtmlFile('nl'),
+        'utf8'
+      );
+    } catch {}
+  }
 
   public use(req: Request, res: Response, next: NextFunction) {
     let featureGraphicPath = 'assets/cover.png';
@@ -29,9 +58,18 @@ export class FrontendMiddleware implements NestMiddleware {
       req.path === '/en/blog/2022/08/500-stars-on-github/'
     ) {
       featureGraphicPath = 'assets/images/blog/500-stars-on-github.jpg';
+    } else if (
+      req.path === '/en/blog/2022/10/hacktoberfest-2022' ||
+      req.path === '/en/blog/2022/10/hacktoberfest-2022/'
+    ) {
+      featureGraphicPath = 'assets/images/blog/hacktoberfest-2022.png';
     }
 
-    if (req.path.startsWith('/api/') || this.isFileRequest(req.url)) {
+    if (
+      req.path.startsWith('/api/') ||
+      this.isFileRequest(req.url) ||
+      !this.isProduction
+    ) {
       // Skip
       next();
     } else if (req.path === '/de' || req.path.startsWith('/de/')) {
@@ -43,6 +81,33 @@ export class FrontendMiddleware implements NestMiddleware {
           rootUrl: this.configurationService.get('ROOT_URL')
         })
       );
+    } else if (req.path === '/es' || req.path.startsWith('/es/')) {
+      res.send(
+        this.interpolate(this.indexHtmlEs, {
+          featureGraphicPath,
+          languageCode: 'es',
+          path: req.path,
+          rootUrl: this.configurationService.get('ROOT_URL')
+        })
+      );
+    } else if (req.path === '/it' || req.path.startsWith('/it/')) {
+      res.send(
+        this.interpolate(this.indexHtmlIt, {
+          featureGraphicPath,
+          languageCode: 'it',
+          path: req.path,
+          rootUrl: this.configurationService.get('ROOT_URL')
+        })
+      );
+    } else if (req.path === '/nl' || req.path.startsWith('/nl/')) {
+      res.send(
+        this.interpolate(this.indexHtmlNl, {
+          featureGraphicPath,
+          languageCode: 'nl',
+          path: req.path,
+          rootUrl: this.configurationService.get('ROOT_URL')
+        })
+      );
     } else {
       res.send(
         this.interpolate(this.indexHtmlEn, {

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

@@ -1,5 +1,6 @@
+import { TransformDataSourceInResponseInterceptor } from '@ghostfolio/api/interceptors/transform-data-source-in-response.interceptor';
 import { InfoItem } from '@ghostfolio/common/interfaces';
-import { Controller, Get } from '@nestjs/common';
+import { Controller, Get, UseInterceptors } from '@nestjs/common';
 
 import { InfoService } from './info.service';
 
@@ -8,6 +9,7 @@ export class InfoController {
   public constructor(private readonly infoService: InfoService) {}
 
   @Get()
+  @UseInterceptors(TransformDataSourceInResponseInterceptor)
   public async getInfo(): Promise<InfoItem> {
     return this.infoService.get();
   }

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

@@ -1,3 +1,4 @@
+import { BenchmarkModule } from '@ghostfolio/api/app/benchmark/benchmark.module';
 import { RedisCacheModule } from '@ghostfolio/api/app/redis-cache/redis-cache.module';
 import { ConfigurationModule } from '@ghostfolio/api/services/configuration.module';
 import { DataGatheringModule } from '@ghostfolio/api/services/data-gathering.module';
@@ -16,6 +17,7 @@ import { InfoService } from './info.service';
 @Module({
   controllers: [InfoController],
   imports: [
+    BenchmarkModule,
     ConfigurationModule,
     DataGatheringModule,
     DataProviderModule,

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

@@ -1,3 +1,4 @@
+import { BenchmarkService } from '@ghostfolio/api/app/benchmark/benchmark.service';
 import { RedisCacheService } from '@ghostfolio/api/app/redis-cache/redis-cache.service';
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
@@ -31,6 +32,7 @@ export class InfoService {
   private static CACHE_KEY_STATISTICS = 'STATISTICS';
 
   public constructor(
+    private readonly benchmarkService: BenchmarkService,
     private readonly configurationService: ConfigurationService,
     private readonly exchangeRateDataService: ExchangeRateDataService,
     private readonly jwtService: JwtService,
@@ -108,6 +110,7 @@ export class InfoService {
       platforms,
       systemMessage,
       baseCurrency: this.configurationService.get('BASE_CURRENCY'),
+      benchmarks: await this.benchmarkService.getBenchmarkAssetProfiles(),
       currencies: this.exchangeRateDataService.getCurrencies(),
       demoAuthToken: this.getDemoAuthToken(),
       statistics: await this.getStatistics(),
@@ -142,6 +145,27 @@ export class InfoService {
     });
   }
 
+  private async countDockerHubPulls(): Promise<number> {
+    try {
+      const get = bent(
+        `https://hub.docker.com/v2/repositories/ghostfolio/ghostfolio`,
+        'GET',
+        'json',
+        200,
+        {
+          'User-Agent': 'request'
+        }
+      );
+
+      const { pull_count } = await get();
+      return pull_count;
+    } catch (error) {
+      Logger.error(error, 'InfoService');
+
+      return undefined;
+    }
+  }
+
   private async countGitHubContributors(): Promise<number> {
     try {
       const get = bent(
@@ -242,6 +266,8 @@ export class InfoService {
     const activeUsers1d = await this.countActiveUsers(1);
     const activeUsers30d = await this.countActiveUsers(30);
     const newUsers30d = await this.countNewUsers(30);
+
+    const dockerHubPulls = await this.countDockerHubPulls();
     const gitHubContributors = await this.countGitHubContributors();
     const gitHubStargazers = await this.countGitHubStargazers();
     const slackCommunityUsers = await this.countSlackCommunityUsers();
@@ -249,6 +275,7 @@ export class InfoService {
     statistics = {
       activeUsers1d,
       activeUsers30d,
+      dockerHubPulls,
       gitHubContributors,
       gitHubStargazers,
       newUsers30d,

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

@@ -3,8 +3,8 @@ import { nullifyValuesInObjects } from '@ghostfolio/api/helper/object.helper';
 import { RedactValuesInResponseInterceptor } from '@ghostfolio/api/interceptors/redact-values-in-response.interceptor';
 import { TransformDataSourceInRequestInterceptor } from '@ghostfolio/api/interceptors/transform-data-source-in-request.interceptor';
 import { TransformDataSourceInResponseInterceptor } from '@ghostfolio/api/interceptors/transform-data-source-in-response.interceptor';
+import { ApiService } from '@ghostfolio/api/services/api/api.service';
 import { ImpersonationService } from '@ghostfolio/api/services/impersonation.service';
-import { Filter } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import type { RequestWithUser } from '@ghostfolio/common/types';
 import {
@@ -36,6 +36,7 @@ import { UpdateOrderDto } from './update-order.dto';
 @Controller('order')
 export class OrderController {
   public constructor(
+    private readonly apiService: ApiService,
     private readonly impersonationService: ImpersonationService,
     private readonly orderService: OrderService,
     @Inject(REQUEST) private readonly request: RequestWithUser,
@@ -73,43 +74,25 @@ export class OrderController {
     @Query('assetClasses') filterByAssetClasses?: string,
     @Query('tags') filterByTags?: string
   ): Promise<Activities> {
-    const accountIds = filterByAccounts?.split(',') ?? [];
+    const filters = this.apiService.buildFiltersFromQueryParams({
-    const assetClasses = filterByAssetClasses?.split(',') ?? [];
+      filterByAccounts,
-    const tagIds = filterByTags?.split(',') ?? [];
+      filterByAssetClasses,
-
+      filterByTags
-    const filters: Filter[] = [
+    });
-      ...accountIds.map((accountId) => {
-        return <Filter>{
-          id: accountId,
-          type: 'ACCOUNT'
-        };
-      }),
-      ...assetClasses.map((assetClass) => {
-        return <Filter>{
-          id: assetClass,
-          type: 'ASSET_CLASS'
-        };
-      }),
-      ...tagIds.map((tagId) => {
-        return <Filter>{
-          id: tagId,
-          type: 'TAG'
-        };
-      })
-    ];
 
     const impersonationUserId =
       await this.impersonationService.validateImpersonationId(
         impersonationId,
         this.request.user.id
       );
-    const userCurrency = this.request.user.Settings.currency;
+    const userCurrency = this.request.user.Settings.settings.baseCurrency;
 
     let activities = await this.orderService.getOrders({
       filters,
       userCurrency,
       includeDrafts: true,
-      userId: impersonationUserId || this.request.user.id
+      userId: impersonationUserId || this.request.user.id,
+      withExcludedAccounts: true
     });
 
     if (

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

@@ -2,6 +2,7 @@ import { AccountService } from '@ghostfolio/api/app/account/account.service';
 import { CacheModule } from '@ghostfolio/api/app/cache/cache.module';
 import { RedisCacheModule } from '@ghostfolio/api/app/redis-cache/redis-cache.module';
 import { UserModule } from '@ghostfolio/api/app/user/user.module';
+import { ApiModule } from '@ghostfolio/api/services/api/api.module';
 import { ConfigurationModule } from '@ghostfolio/api/services/configuration.module';
 import { DataGatheringModule } from '@ghostfolio/api/services/data-gathering.module';
 import { DataProviderModule } from '@ghostfolio/api/services/data-provider/data-provider.module';
@@ -18,6 +19,7 @@ import { OrderService } from './order.service';
   controllers: [OrderController],
   exports: [OrderService],
   imports: [
+    ApiModule,
     CacheModule,
     ConfigurationModule,
     DataGatheringModule,

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

@@ -189,13 +189,15 @@ export class OrderService {
     includeDrafts = false,
     types,
     userCurrency,
-    userId
+    userId,
+    withExcludedAccounts = false
   }: {
     filters?: Filter[];
     includeDrafts?: boolean;
     types?: TypeOfOrder[];
     userCurrency: string;
     userId: string;
+    withExcludedAccounts?: boolean;
   }): Promise<Activity[]> {
     const where: Prisma.OrderWhereInput = { userId };
 
@@ -284,24 +286,28 @@ export class OrderService {
         },
         orderBy: { date: 'asc' }
       })
-    ).map((order) => {
+    )
-      const value = new Big(order.quantity).mul(order.unitPrice).toNumber();
+      .filter((order) => {
+        return withExcludedAccounts || order.Account?.isExcluded === false;
+      })
+      .map((order) => {
+        const value = new Big(order.quantity).mul(order.unitPrice).toNumber();
 
-      return {
+        return {
-        ...order,
+          ...order,
-        value,
-        feeInBaseCurrency: this.exchangeRateDataService.toCurrency(
-          order.fee,
-          order.SymbolProfile.currency,
-          userCurrency
-        ),
-        valueInBaseCurrency: this.exchangeRateDataService.toCurrency(
           value,
-          order.SymbolProfile.currency,
+          feeInBaseCurrency: this.exchangeRateDataService.toCurrency(
-          userCurrency
+            order.fee,
-        )
+            order.SymbolProfile.currency,
-      };
+            userCurrency
-    });
+          ),
+          valueInBaseCurrency: this.exchangeRateDataService.toCurrency(
+            value,
+            order.SymbolProfile.currency,
+            userCurrency
+          )
+        };
+      });
   }
 
   public async updateOrder({

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

@@ -14,14 +14,14 @@ import {
   format,
   isAfter,
   isBefore,
+  isSameDay,
   isSameMonth,
   isSameYear,
-  isWithinInterval,
   max,
   min,
   set
 } from 'date-fns';
-import { first, flatten, isNumber, sortBy } from 'lodash';
+import { first, flatten, isNumber, last, sortBy } from 'lodash';
 
 import { CurrentRateService } from './current-rate.service';
 import { CurrentPositions } from './interfaces/current-positions.interface';
@@ -168,6 +168,133 @@ export class PortfolioCalculator {
     this.transactionPoints = transactionPoints;
   }
 
+  public async getChartData(start: Date, end = new Date(Date.now()), step = 1) {
+    const symbols: { [symbol: string]: boolean } = {};
+
+    const transactionPointsBeforeEndDate =
+      this.transactionPoints?.filter((transactionPoint) => {
+        return isBefore(parseDate(transactionPoint.date), end);
+      }) ?? [];
+
+    const firstIndex = transactionPointsBeforeEndDate.length;
+    const dates: Date[] = [];
+    const dataGatheringItems: IDataGatheringItem[] = [];
+    const currencies: { [symbol: string]: string } = {};
+
+    let day = start;
+
+    while (isBefore(day, end)) {
+      dates.push(resetHours(day));
+      day = addDays(day, step);
+    }
+
+    if (!isSameDay(last(dates), end)) {
+      dates.push(resetHours(end));
+    }
+
+    for (const item of transactionPointsBeforeEndDate[firstIndex - 1].items) {
+      dataGatheringItems.push({
+        dataSource: item.dataSource,
+        symbol: item.symbol
+      });
+      currencies[item.symbol] = item.currency;
+      symbols[item.symbol] = true;
+    }
+
+    const marketSymbols = await this.currentRateService.getValues({
+      currencies,
+      dataGatheringItems,
+      dateQuery: {
+        in: dates
+      },
+      userCurrency: this.currency
+    });
+
+    const marketSymbolMap: {
+      [date: string]: { [symbol: string]: Big };
+    } = {};
+
+    for (const marketSymbol of marketSymbols) {
+      const dateString = format(marketSymbol.date, DATE_FORMAT);
+      if (!marketSymbolMap[dateString]) {
+        marketSymbolMap[dateString] = {};
+      }
+      if (marketSymbol.marketPriceInBaseCurrency) {
+        marketSymbolMap[dateString][marketSymbol.symbol] = new Big(
+          marketSymbol.marketPriceInBaseCurrency
+        );
+      }
+    }
+
+    const netPerformanceValuesBySymbol: {
+      [symbol: string]: { [date: string]: Big };
+    } = {};
+
+    const investmentValuesBySymbol: {
+      [symbol: string]: { [date: string]: Big };
+    } = {};
+
+    const totalNetPerformanceValues: { [date: string]: Big } = {};
+    const totalInvestmentValues: { [date: string]: Big } = {};
+
+    for (const symbol of Object.keys(symbols)) {
+      const { netPerformanceValues, investmentValues } = this.getSymbolMetrics({
+        end,
+        marketSymbolMap,
+        start,
+        step,
+        symbol,
+        isChartMode: true
+      });
+
+      netPerformanceValuesBySymbol[symbol] = netPerformanceValues;
+      investmentValuesBySymbol[symbol] = investmentValues;
+    }
+
+    for (const currentDate of dates) {
+      const dateString = format(currentDate, DATE_FORMAT);
+
+      for (const symbol of Object.keys(netPerformanceValuesBySymbol)) {
+        totalNetPerformanceValues[dateString] =
+          totalNetPerformanceValues[dateString] ?? new Big(0);
+
+        if (netPerformanceValuesBySymbol[symbol]?.[dateString]) {
+          totalNetPerformanceValues[dateString] = totalNetPerformanceValues[
+            dateString
+          ].add(netPerformanceValuesBySymbol[symbol][dateString]);
+        }
+
+        totalInvestmentValues[dateString] =
+          totalInvestmentValues[dateString] ?? new Big(0);
+
+        if (investmentValuesBySymbol[symbol]?.[dateString]) {
+          totalInvestmentValues[dateString] = totalInvestmentValues[
+            dateString
+          ].add(investmentValuesBySymbol[symbol][dateString]);
+        }
+      }
+    }
+
+    return Object.keys(totalNetPerformanceValues).map((date) => {
+      const netPerformanceInPercentage = totalInvestmentValues[date].eq(0)
+        ? 0
+        : totalNetPerformanceValues[date]
+            .div(totalInvestmentValues[date])
+            .mul(100)
+            .toNumber();
+
+      return {
+        date,
+        netPerformanceInPercentage,
+        netPerformance: totalNetPerformanceValues[date].toNumber(),
+        totalInvestment: totalInvestmentValues[date].toNumber(),
+        value: totalInvestmentValues[date]
+          .plus(totalNetPerformanceValues[date])
+          .toNumber()
+      };
+    });
+  }
+
   public async getCurrentPositions(
     start: Date,
     end = new Date(Date.now())
@@ -710,15 +837,19 @@ export class PortfolioCalculator {
 
   private getSymbolMetrics({
     end,
+    isChartMode = false,
     marketSymbolMap,
     start,
+    step = 1,
     symbol
   }: {
     end: Date;
+    isChartMode?: boolean;
     marketSymbolMap: {
       [date: string]: { [symbol: string]: Big };
     };
     start: Date;
+    step?: number;
     symbol: string;
   }) {
     let orders: PortfolioOrderItem[] = this.orders.filter((order) => {
@@ -767,10 +898,12 @@ export class PortfolioCalculator {
     let grossPerformanceFromSells = new Big(0);
     let initialValue: Big;
     let investmentAtStartDate: Big;
+    const investmentValues: { [date: string]: Big } = {};
     let lastAveragePrice = new Big(0);
     let lastTransactionInvestment = new Big(0);
     let lastValueOfInvestmentBeforeTransaction = new Big(0);
     let maxTotalInvestment = new Big(0);
+    const netPerformanceValues: { [date: string]: Big } = {};
     let timeWeightedGrossPerformancePercentage = new Big(1);
     let timeWeightedNetPerformancePercentage = new Big(1);
     let totalInvestment = new Big(0);
@@ -805,6 +938,41 @@ export class PortfolioCalculator {
       unitPrice: unitPriceAtEndDate
     });
 
+    let day = start;
+    let lastUnitPrice: Big;
+
+    if (isChartMode) {
+      const datesWithOrders = {};
+
+      for (const order of orders) {
+        datesWithOrders[order.date] = true;
+      }
+
+      while (isBefore(day, end)) {
+        const hasDate = datesWithOrders[format(day, DATE_FORMAT)];
+
+        if (!hasDate) {
+          orders.push({
+            symbol,
+            currency: null,
+            date: format(day, DATE_FORMAT),
+            dataSource: null,
+            fee: new Big(0),
+            name: '',
+            quantity: new Big(0),
+            type: TypeOfOrder.BUY,
+            unitPrice:
+              marketSymbolMap[format(day, DATE_FORMAT)]?.[symbol] ??
+              lastUnitPrice
+          });
+        }
+
+        lastUnitPrice = last(orders).unitPrice;
+
+        day = addDays(day, step);
+      }
+    }
+
     // Sort orders so that the start and end placeholder order are at the right
     // position
     orders = sortBy(orders, (order) => {
@@ -967,6 +1135,18 @@ export class PortfolioCalculator {
         feesAtStartDate = fees;
         grossPerformanceAtStartDate = grossPerformance;
       }
+
+      if (isChartMode && i > indexOfStartOrder) {
+        netPerformanceValues[order.date] = grossPerformance
+          .minus(grossPerformanceAtStartDate)
+          .minus(fees.minus(feesAtStartDate));
+
+        investmentValues[order.date] = totalInvestment;
+      }
+
+      if (i === indexOfEndOrder) {
+        break;
+      }
     }
 
     timeWeightedGrossPerformancePercentage =
@@ -1052,7 +1232,9 @@ export class PortfolioCalculator {
     return {
       initialValue,
       grossPerformancePercentage,
+      investmentValues,
       netPerformancePercentage,
+      netPerformanceValues,
       hasErrors: totalUnits.gt(0) && (!initialValue || !unitPriceAtEndDate),
       netPerformance: totalNetPerformance,
       grossPerformance: totalGrossPerformance

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

@@ -7,18 +7,16 @@ import {
 import { RedactValuesInResponseInterceptor } from '@ghostfolio/api/interceptors/redact-values-in-response.interceptor';
 import { TransformDataSourceInRequestInterceptor } from '@ghostfolio/api/interceptors/transform-data-source-in-request.interceptor';
 import { TransformDataSourceInResponseInterceptor } from '@ghostfolio/api/interceptors/transform-data-source-in-response.interceptor';
+import { ApiService } from '@ghostfolio/api/services/api/api.service';
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 import { parseDate } from '@ghostfolio/common/helper';
 import {
-  Filter,
-  PortfolioChart,
   PortfolioDetails,
   PortfolioInvestments,
   PortfolioPerformanceResponse,
   PortfolioPublicDetails,
-  PortfolioReport,
+  PortfolioReport
-  PortfolioSummary
 } from '@ghostfolio/common/interfaces';
 import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface';
 import type {
@@ -40,7 +38,7 @@ import {
 } from '@nestjs/common';
 import { REQUEST } from '@nestjs/core';
 import { AuthGuard } from '@nestjs/passport';
-import { ViewMode } from '@prisma/client';
+import Big from 'big.js';
 import { StatusCodes, getReasonPhrase } from 'http-status-codes';
 
 import { PortfolioPositionDetail } from './interfaces/portfolio-position-detail.interface';
@@ -53,6 +51,7 @@ export class PortfolioController {
 
   public constructor(
     private readonly accessService: AccessService,
+    private readonly apiService: ApiService,
     private readonly configurationService: ConfigurationService,
     private readonly exchangeRateDataService: ExchangeRateDataService,
     private readonly portfolioService: PortfolioService,
@@ -62,75 +61,6 @@ export class PortfolioController {
     this.baseCurrency = this.configurationService.get('BASE_CURRENCY');
   }
 
-  @Get('chart')
-  @UseGuards(AuthGuard('jwt'))
-  public async getChart(
-    @Headers('impersonation-id') impersonationId: string,
-    @Query('range') range
-  ): Promise<PortfolioChart> {
-    const historicalDataContainer = await this.portfolioService.getChart(
-      impersonationId,
-      range
-    );
-
-    let chartData = historicalDataContainer.items;
-
-    let hasError = false;
-
-    chartData.forEach((chartDataItem) => {
-      if (hasNotDefinedValuesInObject(chartDataItem)) {
-        hasError = true;
-      }
-    });
-
-    if (
-      impersonationId ||
-      this.userService.isRestrictedView(this.request.user)
-    ) {
-      let maxValue = 0;
-
-      chartData.forEach((portfolioItem) => {
-        if (portfolioItem.value > maxValue) {
-          maxValue = portfolioItem.value;
-        }
-      });
-
-      chartData = chartData.map((historicalDataItem) => {
-        return {
-          ...historicalDataItem,
-          marketPrice: Number((historicalDataItem.value / maxValue).toFixed(2))
-        };
-      });
-    }
-
-    return {
-      hasError,
-      chart: chartData,
-      isAllTimeHigh: historicalDataContainer.isAllTimeHigh,
-      isAllTimeLow: historicalDataContainer.isAllTimeLow
-    };
-  }
-
-  @Get('chart')
-  @UseGuards(AuthGuard('jwt'))
-  @Version('2')
-  public async getChartV2(
-    @Headers('impersonation-id') impersonationId: string,
-    @Query('range') range
-  ): Promise<PortfolioChart> {
-    const historicalDataContainer = await this.portfolioService.getChartV2(
-      impersonationId,
-      range
-    );
-
-    return {
-      chart: historicalDataContainer.items,
-      hasError: false,
-      isAllTimeHigh: false,
-      isAllTimeLow: false
-    };
-  }
-
   @Get('details')
   @UseGuards(AuthGuard('jwt'))
   @UseInterceptors(RedactValuesInResponseInterceptor)
@@ -139,48 +69,38 @@ export class PortfolioController {
     @Headers('impersonation-id') impersonationId: string,
     @Query('accounts') filterByAccounts?: string,
     @Query('assetClasses') filterByAssetClasses?: string,
-    @Query('range') range?: DateRange,
+    @Query('range') dateRange: DateRange = 'max',
     @Query('tags') filterByTags?: string
   ): Promise<PortfolioDetails & { hasError: boolean }> {
     let hasError = false;
 
-    const accountIds = filterByAccounts?.split(',') ?? [];
+    const filters = this.apiService.buildFiltersFromQueryParams({
-    const assetClasses = filterByAssetClasses?.split(',') ?? [];
+      filterByAccounts,
-    const tagIds = filterByTags?.split(',') ?? [];
+      filterByAssetClasses,
+      filterByTags
+    });
 
-    const filters: Filter[] = [
+    const {
-      ...accountIds.map((accountId) => {
+      accounts,
-        return <Filter>{
+      filteredValueInBaseCurrency,
-          id: accountId,
+      filteredValueInPercentage,
-          type: 'ACCOUNT'
+      hasErrors,
-        };
+      holdings,
-      }),
+      summary,
-      ...assetClasses.map((assetClass) => {
+      totalValueInBaseCurrency
-        return <Filter>{
+    } = await this.portfolioService.getDetails({
-          id: assetClass,
+      dateRange,
-          type: 'ASSET_CLASS'
+      filters,
-        };
+      impersonationId,
-      }),
+      userId: this.request.user.id
-      ...tagIds.map((tagId) => {
+    });
-        return <Filter>{
-          id: tagId,
-          type: 'TAG'
-        };
-      })
-    ];
-
-    const { accounts, holdings, hasErrors } =
-      await this.portfolioService.getDetails(
-        impersonationId,
-        this.request.user.id,
-        range,
-        filters
-      );
 
     if (hasErrors || hasNotDefinedValuesInObject(holdings)) {
       hasError = true;
     }
 
+    let portfolioSummary = summary;
+
     if (
       impersonationId ||
       this.userService.isRestrictedView(this.request.user)
@@ -196,7 +116,7 @@ export class PortfolioController {
           return this.exchangeRateDataService.toCurrency(
             portfolioPosition.quantity * portfolioPosition.marketPrice,
             portfolioPosition.currency,
-            this.request.user.Settings.currency
+            this.request.user.Settings.settings.baseCurrency
           );
         })
         .reduce((a, b) => a + b, 0);
@@ -214,6 +134,22 @@ export class PortfolioController {
         accounts[name].current = current / totalValue;
         accounts[name].original = original / totalInvestment;
       }
+
+      portfolioSummary = nullifyValuesInObject(summary, [
+        'cash',
+        'committedFunds',
+        'currentGrossPerformance',
+        'currentNetPerformance',
+        'currentValue',
+        'dividend',
+        'emergencyFund',
+        'excludedAccountsAndActivities',
+        'fees',
+        'items',
+        'netWorth',
+        'totalBuy',
+        'totalSell'
+      ]);
     }
 
     let hasDetails = true;
@@ -235,8 +171,12 @@ export class PortfolioController {
 
     return {
       accounts,
+      filteredValueInBaseCurrency,
+      filteredValueInPercentage,
       hasError,
-      holdings
+      holdings,
+      totalValueInBaseCurrency,
+      summary: hasDetails ? portfolioSummary : undefined
     };
   }
 
@@ -244,6 +184,7 @@ export class PortfolioController {
   @UseGuards(AuthGuard('jwt'))
   public async getInvestments(
     @Headers('impersonation-id') impersonationId: string,
+    @Query('range') dateRange: DateRange = 'max',
     @Query('groupBy') groupBy?: GroupBy
   ): Promise<PortfolioInvestments> {
     if (
@@ -259,12 +200,16 @@ export class PortfolioController {
     let investments: InvestmentItem[];
 
     if (groupBy === 'month') {
-      investments = await this.portfolioService.getInvestments(
+      investments = await this.portfolioService.getInvestments({
+        dateRange,
         impersonationId,
-        'month'
+        groupBy: 'month'
-      );
+      });
     } else {
-      investments = await this.portfolioService.getInvestments(impersonationId);
+      investments = await this.portfolioService.getInvestments({
+        dateRange,
+        impersonationId
+      });
     }
 
     if (
@@ -282,29 +227,50 @@ export class PortfolioController {
       }));
     }
 
-    return { firstOrderDate: parseDate(investments[0]?.date), investments };
+    return { investments };
   }
 
   @Get('performance')
   @UseGuards(AuthGuard('jwt'))
   @UseInterceptors(TransformDataSourceInResponseInterceptor)
-  public async getPerformance(
+  @Version('2')
+  public async getPerformanceV2(
     @Headers('impersonation-id') impersonationId: string,
-    @Query('range') range
+    @Query('range') dateRange: DateRange = 'max'
   ): Promise<PortfolioPerformanceResponse> {
-    const performanceInformation = await this.portfolioService.getPerformance(
+    const performanceInformation = await this.portfolioService.getPerformance({
-      impersonationId,
+      dateRange,
-      range
+      impersonationId
-    );
+    });
 
     if (
       impersonationId ||
-      this.request.user.Settings.viewMode === ViewMode.ZEN ||
+      this.request.user.Settings.settings.viewMode === 'ZEN' ||
       this.userService.isRestrictedView(this.request.user)
     ) {
+      performanceInformation.chart = performanceInformation.chart.map(
+        ({ date, netPerformanceInPercentage, totalInvestment, value }) => {
+          return {
+            date,
+            netPerformanceInPercentage,
+            totalInvestment: new Big(totalInvestment)
+              .div(performanceInformation.performance.totalInvestment)
+              .toNumber(),
+            value: new Big(value)
+              .div(performanceInformation.performance.currentValue)
+              .toNumber()
+          };
+        }
+      );
+
       performanceInformation.performance = nullifyValuesInObject(
         performanceInformation.performance,
-        ['currentGrossPerformance', 'currentValue']
+        [
+          'currentGrossPerformance',
+          'currentNetPerformance',
+          'currentValue',
+          'totalInvestment'
+        ]
       );
     }
 
@@ -316,11 +282,11 @@ export class PortfolioController {
   @UseInterceptors(TransformDataSourceInResponseInterceptor)
   public async getPositions(
     @Headers('impersonation-id') impersonationId: string,
-    @Query('range') range
+    @Query('range') dateRange: DateRange = 'max'
   ): Promise<PortfolioPositions> {
     const result = await this.portfolioService.getPositions(
       impersonationId,
-      range
+      dateRange
     );
 
     if (
@@ -361,12 +327,12 @@ export class PortfolioController {
       hasDetails = user.subscription.type === 'Premium';
     }
 
-    const { holdings } = await this.portfolioService.getDetails(
+    const { holdings } = await this.portfolioService.getDetails({
-      access.userId,
+      dateRange: 'max',
-      access.userId,
+      filters: [{ id: 'EQUITY', type: 'ASSET_CLASS' }],
-      'max',
+      impersonationId: access.userId,
-      [{ id: 'EQUITY', type: 'ASSET_CLASS' }]
+      userId: access.userId
-    );
+    });
 
     const portfolioPublicDetails: PortfolioPublicDetails = {
       hasDetails,
@@ -379,7 +345,8 @@ export class PortfolioController {
         return this.exchangeRateDataService.toCurrency(
           portfolioPosition.quantity * portfolioPosition.marketPrice,
           portfolioPosition.currency,
-          this.request.user?.Settings?.currency ?? this.baseCurrency
+          this.request.user?.Settings?.settings.baseCurrency ??
+            this.baseCurrency
         );
       })
       .reduce((a, b) => a + b, 0);
@@ -402,46 +369,6 @@ export class PortfolioController {
     return portfolioPublicDetails;
   }
 
-  @Get('summary')
-  @UseGuards(AuthGuard('jwt'))
-  public async getSummary(
-    @Headers('impersonation-id') impersonationId
-  ): Promise<PortfolioSummary> {
-    if (
-      this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION') &&
-      this.request.user.subscription.type === 'Basic'
-    ) {
-      throw new HttpException(
-        getReasonPhrase(StatusCodes.FORBIDDEN),
-        StatusCodes.FORBIDDEN
-      );
-    }
-
-    let summary = await this.portfolioService.getSummary(impersonationId);
-
-    if (
-      impersonationId ||
-      this.userService.isRestrictedView(this.request.user)
-    ) {
-      summary = nullifyValuesInObject(summary, [
-        'cash',
-        'committedFunds',
-        'currentGrossPerformance',
-        'currentNetPerformance',
-        'currentValue',
-        'dividend',
-        'emergencyFund',
-        'fees',
-        'items',
-        'netWorth',
-        'totalBuy',
-        'totalSell'
-      ]);
-    }
-
-    return summary;
-  }
-
   @Get('position/:dataSource/:symbol')
   @UseInterceptors(TransformDataSourceInRequestInterceptor)
   @UseInterceptors(TransformDataSourceInResponseInterceptor)

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

@@ -2,6 +2,7 @@ import { AccessModule } from '@ghostfolio/api/app/access/access.module';
 import { AccountService } from '@ghostfolio/api/app/account/account.service';
 import { OrderModule } from '@ghostfolio/api/app/order/order.module';
 import { UserModule } from '@ghostfolio/api/app/user/user.module';
+import { ApiModule } from '@ghostfolio/api/services/api/api.module';
 import { ConfigurationModule } from '@ghostfolio/api/services/configuration.module';
 import { DataGatheringModule } from '@ghostfolio/api/services/data-gathering.module';
 import { DataProviderModule } from '@ghostfolio/api/services/data-provider/data-provider.module';
@@ -22,6 +23,7 @@ import { RulesService } from './rules.service';
   exports: [PortfolioService],
   imports: [
     AccessModule,
+    ApiModule,
     ConfigurationModule,
     DataGatheringModule,
     DataProviderModule,

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

@@ -5,7 +5,6 @@ import { CurrentRateService } from '@ghostfolio/api/app/portfolio/current-rate.s
 import { PortfolioOrder } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-order.interface';
 import { TimelineSpecification } from '@ghostfolio/api/app/portfolio/interfaces/timeline-specification.interface';
 import { TransactionPoint } from '@ghostfolio/api/app/portfolio/interfaces/transaction-point.interface';
-import { UserSettings } from '@ghostfolio/api/app/user/interfaces/user-settings.interface';
 import { UserService } from '@ghostfolio/api/app/user/user.service';
 import { AccountClusterRiskCurrentInvestment } from '@ghostfolio/api/models/rules/account-cluster-risk/current-investment';
 import { AccountClusterRiskInitialInvestment } from '@ghostfolio/api/models/rules/account-cluster-risk/initial-investment';
@@ -22,6 +21,7 @@ import { ImpersonationService } from '@ghostfolio/api/services/impersonation.ser
 import { SymbolProfileService } from '@ghostfolio/api/services/symbol-profile.service';
 import {
   ASSET_SUB_CLASS_EMERGENCY_FUND,
+  MAX_CHART_ITEMS,
   UNKNOWN_KEY
 } from '@ghostfolio/common/config';
 import { DATE_FORMAT, parseDate } from '@ghostfolio/common/helper';
@@ -35,7 +35,8 @@ import {
   PortfolioReport,
   PortfolioSummary,
   Position,
-  TimelinePosition
+  TimelinePosition,
+  UserSettings
 } from '@ghostfolio/common/interfaces';
 import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface';
 import type {
@@ -49,15 +50,17 @@ import type {
 import { Inject, Injectable } from '@nestjs/common';
 import { REQUEST } from '@nestjs/core';
 import {
+  Account,
   AssetClass,
   DataSource,
+  Order,
+  Platform,
   Prisma,
   Tag,
   Type as TypeOfOrder
 } from '@prisma/client';
 import Big from 'big.js';
 import {
-  addDays,
   differenceInDays,
   endOfToday,
   format,
@@ -72,7 +75,7 @@ import {
   subDays,
   subYears
 } from 'date-fns';
-import { isEmpty, last, sortBy, uniq, uniqBy } from 'lodash';
+import { isEmpty, sortBy, uniq, uniqBy } from 'lodash';
 
 import {
   HistoricalDataContainer,
@@ -86,7 +89,6 @@ const emergingMarkets = require('../../assets/countries/emerging-markets.json');
 
 @Injectable()
 export class PortfolioService {
-  private static readonly MAX_CHART_ITEMS = 250;
   private baseCurrency: string;
 
   public constructor(
@@ -105,14 +107,19 @@ export class PortfolioService {
     this.baseCurrency = this.configurationService.get('BASE_CURRENCY');
   }
 
-  public async getAccounts(
+  public async getAccounts({
-    aUserId: string,
+    filters,
-    aFilters?: Filter[]
+    userId,
-  ): Promise<AccountWithValue[]> {
+    withExcludedAccounts = false
-    const where: Prisma.AccountWhereInput = { userId: aUserId };
+  }: {
+    filters?: Filter[];
+    userId: string;
+    withExcludedAccounts?: boolean;
+  }): Promise<AccountWithValue[]> {
+    const where: Prisma.AccountWhereInput = { userId: userId };
 
-    if (aFilters?.[0].id && aFilters?.[0].type === 'ACCOUNT') {
+    if (filters?.[0].id && filters?.[0].type === 'ACCOUNT') {
-      where.id = aFilters[0].id;
+      where.id = filters[0].id;
     }
 
     const [accounts, details] = await Promise.all([
@@ -121,10 +128,15 @@ export class PortfolioService {
         include: { Order: true, Platform: true },
         orderBy: { name: 'asc' }
       }),
-      this.getDetails(aUserId, aUserId, undefined, aFilters)
+      this.getDetails({
+        filters,
+        userId,
+        withExcludedAccounts,
+        impersonationId: userId
+      })
     ]);
 
-    const userCurrency = this.request.user.Settings.currency;
+    const userCurrency = this.request.user.Settings.settings.baseCurrency;
 
     return accounts.map((account) => {
       let transactionCount = 0;
@@ -159,11 +171,20 @@ export class PortfolioService {
     });
   }
 
-  public async getAccountsWithAggregations(
+  public async getAccountsWithAggregations({
-    aUserId: string,
+    filters,
-    aFilters?: Filter[]
+    userId,
-  ): Promise<Accounts> {
+    withExcludedAccounts = false
-    const accounts = await this.getAccounts(aUserId, aFilters);
+  }: {
+    filters?: Filter[];
+    userId: string;
+    withExcludedAccounts?: boolean;
+  }): Promise<Accounts> {
+    const accounts = await this.getAccounts({
+      filters,
+      userId,
+      withExcludedAccounts
+    });
     let totalBalanceInBaseCurrency = new Big(0);
     let totalValueInBaseCurrency = new Big(0);
     let transactionCount = 0;
@@ -186,11 +207,16 @@ export class PortfolioService {
     };
   }
 
-  public async getInvestments(
+  public async getInvestments({
-    aImpersonationId: string,
+    dateRange,
-    groupBy?: GroupBy
+    impersonationId,
-  ): Promise<InvestmentItem[]> {
+    groupBy
-    const userId = await this.getUserId(aImpersonationId, this.request.user.id);
+  }: {
+    dateRange: DateRange;
+    impersonationId: string;
+    groupBy?: GroupBy;
+  }): Promise<InvestmentItem[]> {
+    const userId = await this.getUserId(impersonationId, this.request.user.id);
 
     const { portfolioOrders, transactionPoints } =
       await this.getTransactionPoints({
@@ -199,7 +225,7 @@ export class PortfolioService {
       });
 
     const portfolioCalculator = new PortfolioCalculator({
-      currency: this.request.user.Settings.currency,
+      currency: this.request.user.Settings.settings.baseCurrency,
       currentRateService: this.currentRateService,
       orders: portfolioOrders
     });
@@ -262,105 +288,28 @@ export class PortfolioService {
       }
     }
 
-    return sortBy(investments, (investment) => {
+    investments = sortBy(investments, (investment) => {
       return investment.date;
     });
-  }
 
-  public async getChart(
+    const startDate = this.getStartDate(
-    aImpersonationId: string,
+      dateRange,
-    aDateRange: DateRange = 'max'
+      parseDate(investments[0]?.date)
-  ): Promise<HistoricalDataContainer> {
+    );
-    const userId = await this.getUserId(aImpersonationId, this.request.user.id);
 
-    const { portfolioOrders, transactionPoints } =
+    return investments.filter(({ date }) => {
-      await this.getTransactionPoints({
+      return !isBefore(parseDate(date), startDate);
-        userId
-      });
-
-    const portfolioCalculator = new PortfolioCalculator({
-      currency: this.request.user.Settings.currency,
-      currentRateService: this.currentRateService,
-      orders: portfolioOrders
     });
-
-    portfolioCalculator.setTransactionPoints(transactionPoints);
-    if (transactionPoints.length === 0) {
-      return {
-        isAllTimeHigh: false,
-        isAllTimeLow: false,
-        items: []
-      };
-    }
-    let portfolioStart = parse(
-      transactionPoints[0].date,
-      DATE_FORMAT,
-      new Date()
-    );
-
-    // Get start date for the full portfolio because of because of the
-    // min and max calculation
-    portfolioStart = this.getStartDate('max', portfolioStart);
-
-    const timelineSpecification: TimelineSpecification[] = [
-      {
-        start: format(portfolioStart, DATE_FORMAT),
-        accuracy: 'day'
-      }
-    ];
-
-    const timelineInfo = await portfolioCalculator.calculateTimeline(
-      timelineSpecification,
-      format(new Date(), DATE_FORMAT)
-    );
-
-    const timeline = timelineInfo.timelinePeriods;
-
-    const items = timeline
-      .filter((timelineItem) => timelineItem !== null)
-      .map((timelineItem) => ({
-        date: timelineItem.date,
-        value: timelineItem.netPerformance.toNumber()
-      }));
-
-    let lastItem = null;
-    if (timeline.length > 0) {
-      lastItem = timeline[timeline.length - 1];
-    }
-
-    let isAllTimeHigh = timelineInfo.maxNetPerformance?.eq(
-      lastItem?.netPerformance ?? 0
-    );
-    let isAllTimeLow = timelineInfo.minNetPerformance?.eq(
-      lastItem?.netPerformance ?? 0
-    );
-    if (isAllTimeHigh && isAllTimeLow) {
-      isAllTimeHigh = false;
-      isAllTimeLow = false;
-    }
-
-    portfolioStart = startOfDay(
-      this.getStartDate(
-        aDateRange,
-        parse(transactionPoints[0].date, DATE_FORMAT, new Date())
-      )
-    );
-
-    return {
-      isAllTimeHigh,
-      isAllTimeLow,
-      items: items.filter((item) => {
-        // Filter items of date range
-        return !isAfter(portfolioStart, parseDate(item.date));
-      })
-    };
   }
 
-  public async getChartV2(
+  public async getChart({
-    aImpersonationId: string,
+    dateRange = 'max',
-    aDateRange: DateRange = 'max'
+    impersonationId
-  ): Promise<HistoricalDataContainer> {
+  }: {
-    const userId = await this.getUserId(aImpersonationId, this.request.user.id);
+    dateRange?: DateRange;
+    impersonationId: string;
+  }): Promise<HistoricalDataContainer> {
+    const userId = await this.getUserId(impersonationId, this.request.user.id);
 
     const { portfolioOrders, transactionPoints } =
       await this.getTransactionPoints({
@@ -368,7 +317,7 @@ export class PortfolioService {
       });
 
     const portfolioCalculator = new PortfolioCalculator({
-      currency: this.request.user.Settings.currency,
+      currency: this.request.user.Settings.settings.baseCurrency,
       currentRateService: this.currentRateService,
       orders: portfolioOrders
     });
@@ -384,71 +333,56 @@ export class PortfolioService {
     const endDate = new Date();
 
     const portfolioStart = parseDate(transactionPoints[0].date);
-    const startDate = this.getStartDate(aDateRange, portfolioStart);
+    const startDate = this.getStartDate(dateRange, portfolioStart);
 
     const daysInMarket = differenceInDays(new Date(), startDate);
     const step = Math.round(
-      daysInMarket / Math.min(daysInMarket, PortfolioService.MAX_CHART_ITEMS)
+      daysInMarket / Math.min(daysInMarket, MAX_CHART_ITEMS)
     );
 
-    const items: HistoricalDataItem[] = [];
+    const items = await portfolioCalculator.getChartData(
-
+      startDate,
-    let currentEndDate = startDate;
+      endDate,
-
+      step
-    while (isBefore(currentEndDate, endDate)) {
+    );
-      const currentPositions = await portfolioCalculator.getCurrentPositions(
-        startDate,
-        currentEndDate
-      );
-
-      items.push({
-        date: format(currentEndDate, DATE_FORMAT),
-        value: currentPositions.netPerformancePercentage.toNumber() * 100
-      });
-
-      currentEndDate = addDays(currentEndDate, step);
-    }
-
-    const today = new Date();
-
-    if (last(items)?.date !== format(today, DATE_FORMAT)) {
-      // Add today
-      const { netPerformancePercentage } =
-        await portfolioCalculator.getCurrentPositions(startDate, today);
-      items.push({
-        date: format(today, DATE_FORMAT),
-        value: netPerformancePercentage.toNumber() * 100
-      });
-    }
 
     return {
+      items,
       isAllTimeHigh: false,
-      isAllTimeLow: false,
+      isAllTimeLow: false
-      items: items
     };
   }
 
-  public async getDetails(
+  public async getDetails({
-    aImpersonationId: string,
+    impersonationId,
-    aUserId: string,
+    userId,
-    aDateRange: DateRange = 'max',
+    dateRange = 'max',
-    aFilters?: Filter[]
+    filters,
-  ): Promise<PortfolioDetails & { hasErrors: boolean }> {
+    withExcludedAccounts = false
-    const userId = await this.getUserId(aImpersonationId, aUserId);
+  }: {
+    impersonationId: string;
+    userId: string;
+    dateRange?: DateRange;
+    filters?: Filter[];
+    withExcludedAccounts?: boolean;
+  }): Promise<PortfolioDetails & { hasErrors: boolean }> {
+    // TODO
+    userId = await this.getUserId(impersonationId, userId);
     const user = await this.userService.user({ id: userId });
 
     const emergencyFund = new Big(
       (user.Settings?.settings as UserSettings)?.emergencyFund ?? 0
     );
     const userCurrency =
-      user.Settings?.currency ??
+      user.Settings?.settings.baseCurrency ??
-      this.request.user?.Settings?.currency ??
+      this.request.user?.Settings?.settings.baseCurrency ??
       this.baseCurrency;
 
     const { orders, portfolioOrders, transactionPoints } =
       await this.getTransactionPoints({
+        filters,
         userId,
-        filters: aFilters
+        withExcludedAccounts
       });
 
     const portfolioCalculator = new PortfolioCalculator({
@@ -462,24 +396,33 @@ export class PortfolioService {
     const portfolioStart = parseDate(
       transactionPoints[0]?.date ?? format(new Date(), DATE_FORMAT)
     );
-    const startDate = this.getStartDate(aDateRange, portfolioStart);
+    const startDate = this.getStartDate(dateRange, portfolioStart);
     const currentPositions = await portfolioCalculator.getCurrentPositions(
       startDate
     );
 
     const cashDetails = await this.accountService.getCashDetails({
+      filters,
       userId,
-      currency: userCurrency,
+      currency: userCurrency
-      filters: aFilters
     });
 
     const holdings: PortfolioDetails['holdings'] = {};
-    const totalInvestment = currentPositions.totalInvestment.plus(
+    const totalInvestmentInBaseCurrency = currentPositions.totalInvestment.plus(
-      cashDetails.balanceInBaseCurrency
-    );
-    const totalValue = currentPositions.currentValue.plus(
       cashDetails.balanceInBaseCurrency
     );
+    let filteredValueInBaseCurrency = currentPositions.currentValue;
+
+    if (
+      filters?.length === 0 ||
+      (filters?.length === 1 &&
+        filters[0].type === 'ASSET_CLASS' &&
+        filters[0].id === 'CASH')
+    ) {
+      filteredValueInBaseCurrency = filteredValueInBaseCurrency.plus(
+        cashDetails.balanceInBaseCurrency
+      );
+    }
 
     const dataGatheringItems = currentPositions.positions.map((position) => {
       return {
@@ -540,10 +483,12 @@ export class PortfolioService {
 
       holdings[item.symbol] = {
         markets,
-        allocationCurrent: totalValue.eq(0)
+        allocationCurrent: filteredValueInBaseCurrency.eq(0)
           ? 0
-          : value.div(totalValue).toNumber(),
+          : value.div(filteredValueInBaseCurrency).toNumber(),
-        allocationInvestment: item.investment.div(totalInvestment).toNumber(),
+        allocationInvestment: item.investment
+          .div(totalInvestmentInBaseCurrency)
+          .toNumber(),
         assetClass: symbolProfile.assetClass,
         assetSubClass: symbolProfile.assetSubClass,
         countries: symbolProfile.countries,
@@ -568,17 +513,17 @@ export class PortfolioService {
     }
 
     if (
-      aFilters?.length === 0 ||
+      filters?.length === 0 ||
-      (aFilters?.length === 1 &&
+      (filters?.length === 1 &&
-        aFilters[0].type === 'ASSET_CLASS' &&
+        filters[0].type === 'ASSET_CLASS' &&
-        aFilters[0].id === 'CASH')
+        filters[0].id === 'CASH')
     ) {
       const cashPositions = await this.getCashPositions({
         cashDetails,
         emergencyFund,
         userCurrency,
-        investment: totalInvestment,
+        investment: totalInvestmentInBaseCurrency,
-        value: totalValue
+        value: filteredValueInBaseCurrency
       });
 
       for (const symbol of Object.keys(cashPositions)) {
@@ -587,14 +532,27 @@ export class PortfolioService {
     }
 
     const accounts = await this.getValueOfAccounts({
+      filters,
       orders,
       portfolioItemsNow,
       userCurrency,
       userId,
-      filters: aFilters
+      withExcludedAccounts
     });
 
-    return { accounts, holdings, hasErrors: currentPositions.hasErrors };
+    const summary = await this.getSummary({ impersonationId });
+
+    return {
+      accounts,
+      holdings,
+      summary,
+      filteredValueInBaseCurrency: filteredValueInBaseCurrency.toNumber(),
+      filteredValueInPercentage: summary.netWorth
+        ? filteredValueInBaseCurrency.div(summary.netWorth).toNumber()
+        : 0,
+      hasErrors: currentPositions.hasErrors,
+      totalValueInBaseCurrency: summary.netWorth
+    };
   }
 
   public async getPosition(
@@ -602,11 +560,15 @@ export class PortfolioService {
     aImpersonationId: string,
     aSymbol: string
   ): Promise<PortfolioPositionDetail> {
-    const userCurrency = this.request.user.Settings.currency;
+    const userCurrency = this.request.user.Settings.settings.baseCurrency;
     const userId = await this.getUserId(aImpersonationId, this.request.user.id);
 
     const orders = (
-      await this.orderService.getOrders({ userCurrency, userId })
+      await this.orderService.getOrders({
+        userCurrency,
+        userId,
+        withExcludedAccounts: true
+      })
     ).filter(({ SymbolProfile }) => {
       return (
         SymbolProfile.dataSource === aDataSource &&
@@ -855,7 +817,7 @@ export class PortfolioService {
       });
 
     const portfolioCalculator = new PortfolioCalculator({
-      currency: this.request.user.Settings.currency,
+      currency: this.request.user.Settings.settings.baseCurrency,
       currentRateService: this.currentRateService,
       orders: portfolioOrders
     });
@@ -919,11 +881,14 @@ export class PortfolioService {
     };
   }
 
-  public async getPerformance(
+  public async getPerformance({
-    aImpersonationId: string,
+    dateRange = 'max',
-    aDateRange: DateRange = 'max'
+    impersonationId
-  ): Promise<PortfolioPerformanceResponse> {
+  }: {
-    const userId = await this.getUserId(aImpersonationId, this.request.user.id);
+    dateRange?: DateRange;
+    impersonationId: string;
+  }): Promise<PortfolioPerformanceResponse> {
+    const userId = await this.getUserId(impersonationId, this.request.user.id);
 
     const { portfolioOrders, transactionPoints } =
       await this.getTransactionPoints({
@@ -931,20 +896,23 @@ export class PortfolioService {
       });
 
     const portfolioCalculator = new PortfolioCalculator({
-      currency: this.request.user.Settings.currency,
+      currency: this.request.user.Settings.settings.baseCurrency,
       currentRateService: this.currentRateService,
       orders: portfolioOrders
     });
 
     if (transactionPoints?.length <= 0) {
       return {
+        chart: [],
+        firstOrderDate: undefined,
         hasErrors: false,
         performance: {
           currentGrossPerformance: 0,
           currentGrossPerformancePercent: 0,
           currentNetPerformance: 0,
           currentNetPerformancePercent: 0,
-          currentValue: 0
+          currentValue: 0,
+          totalInvestment: 0
         }
       };
     }
@@ -952,7 +920,7 @@ export class PortfolioService {
     portfolioCalculator.setTransactionPoints(transactionPoints);
 
     const portfolioStart = parseDate(transactionPoints[0].date);
-    const startDate = this.getStartDate(aDateRange, portfolioStart);
+    const startDate = this.getStartDate(dateRange, portfolioStart);
     const currentPositions = await portfolioCalculator.getCurrentPositions(
       startDate
     );
@@ -960,24 +928,59 @@ export class PortfolioService {
     const hasErrors = currentPositions.hasErrors;
     const currentValue = currentPositions.currentValue.toNumber();
     const currentGrossPerformance = currentPositions.grossPerformance;
-    let currentGrossPerformancePercent =
+    const currentGrossPerformancePercent =
       currentPositions.grossPerformancePercentage;
-    const currentNetPerformance = currentPositions.netPerformance;
+    let currentNetPerformance = currentPositions.netPerformance;
     let currentNetPerformancePercent =
       currentPositions.netPerformancePercentage;
+    const totalInvestment = currentPositions.totalInvestment;
 
-    if (currentGrossPerformance.mul(currentGrossPerformancePercent).lt(0)) {
+    // if (currentGrossPerformance.mul(currentGrossPerformancePercent).lt(0)) {
-      // If algebraic sign is different, harmonize it
+    //   // If algebraic sign is different, harmonize it
-      currentGrossPerformancePercent = currentGrossPerformancePercent.mul(-1);
+    //   currentGrossPerformancePercent = currentGrossPerformancePercent.mul(-1);
-    }
+    // }
 
-    if (currentNetPerformance.mul(currentNetPerformancePercent).lt(0)) {
+    // if (currentNetPerformance.mul(currentNetPerformancePercent).lt(0)) {
-      // If algebraic sign is different, harmonize it
+    //   // If algebraic sign is different, harmonize it
-      currentNetPerformancePercent = currentNetPerformancePercent.mul(-1);
+    //   currentNetPerformancePercent = currentNetPerformancePercent.mul(-1);
+    // }
+
+    const historicalDataContainer = await this.getChart({
+      dateRange,
+      impersonationId
+    });
+
+    const itemOfToday = historicalDataContainer.items.find((item) => {
+      return item.date === format(new Date(), DATE_FORMAT);
+    });
+
+    if (itemOfToday) {
+      currentNetPerformance = new Big(itemOfToday.netPerformance);
+      currentNetPerformancePercent = new Big(
+        itemOfToday.netPerformanceInPercentage
+      ).div(100);
     }
 
     return {
+      chart: historicalDataContainer.items.map(
+        ({
+          date,
+          netPerformance,
+          netPerformanceInPercentage,
+          totalInvestment,
+          value
+        }) => {
+          return {
+            date,
+            netPerformance,
+            netPerformanceInPercentage,
+            totalInvestment,
+            value
+          };
+        }
+      ),
       errors: currentPositions.errors,
+      firstOrderDate: parseDate(historicalDataContainer.items[0]?.date),
       hasErrors: currentPositions.hasErrors || hasErrors,
       performance: {
         currentValue,
@@ -985,13 +988,14 @@ export class PortfolioService {
         currentGrossPerformancePercent:
           currentGrossPerformancePercent.toNumber(),
         currentNetPerformance: currentNetPerformance.toNumber(),
-        currentNetPerformancePercent: currentNetPerformancePercent.toNumber()
+        currentNetPerformancePercent: currentNetPerformancePercent.toNumber(),
+        totalInvestment: totalInvestment.toNumber()
       }
     };
   }
 
   public async getReport(impersonationId: string): Promise<PortfolioReport> {
-    const currency = this.request.user.Settings.currency;
+    const currency = this.request.user.Settings.settings.baseCurrency;
     const userId = await this.getUserId(impersonationId, this.request.user.id);
 
     const { orders, portfolioOrders, transactionPoints } =
@@ -1045,7 +1049,7 @@ export class PortfolioService {
               accounts
             )
           ],
-          { baseCurrency: currency }
+          <UserSettings>this.request.user.Settings.settings
         ),
         currencyClusterRisk: await this.rulesService.evaluate(
           [
@@ -1066,7 +1070,7 @@ export class PortfolioService {
               currentPositions
             )
           ],
-          { baseCurrency: currency }
+          <UserSettings>this.request.user.Settings.settings
         ),
         fees: await this.rulesService.evaluate(
           [
@@ -1076,80 +1080,12 @@ export class PortfolioService {
               this.getFees(orders).toNumber()
             )
           ],
-          { baseCurrency: currency }
+          <UserSettings>this.request.user.Settings.settings
         )
       }
     };
   }
 
-  public async getSummary(aImpersonationId: string): Promise<PortfolioSummary> {
-    const userCurrency = this.request.user.Settings.currency;
-    const userId = await this.getUserId(aImpersonationId, this.request.user.id);
-    const user = await this.userService.user({ id: userId });
-
-    const performanceInformation = await this.getPerformance(aImpersonationId);
-
-    const { balanceInBaseCurrency } = await this.accountService.getCashDetails({
-      userId,
-      currency: userCurrency
-    });
-    const orders = await this.orderService.getOrders({
-      userCurrency,
-      userId
-    });
-    const dividend = this.getDividend(orders).toNumber();
-    const emergencyFund = new Big(
-      (user.Settings?.settings as UserSettings)?.emergencyFund ?? 0
-    );
-    const fees = this.getFees(orders).toNumber();
-    const firstOrderDate = orders[0]?.date;
-    const items = this.getItems(orders).toNumber();
-
-    const totalBuy = this.getTotalByType(orders, userCurrency, 'BUY');
-    const totalSell = this.getTotalByType(orders, userCurrency, 'SELL');
-
-    const cash = new Big(balanceInBaseCurrency).minus(emergencyFund).toNumber();
-    const committedFunds = new Big(totalBuy).minus(totalSell);
-
-    const netWorth = new Big(balanceInBaseCurrency)
-      .plus(performanceInformation.performance.currentValue)
-      .plus(items)
-      .toNumber();
-
-    const daysInMarket = differenceInDays(new Date(), firstOrderDate);
-
-    const annualizedPerformancePercent = new PortfolioCalculator({
-      currency: userCurrency,
-      currentRateService: this.currentRateService,
-      orders: []
-    })
-      .getAnnualizedPerformancePercent({
-        daysInMarket,
-        netPerformancePercent: new Big(
-          performanceInformation.performance.currentNetPerformancePercent
-        )
-      })
-      ?.toNumber();
-
-    return {
-      ...performanceInformation.performance,
-      annualizedPerformancePercent,
-      cash,
-      dividend,
-      fees,
-      firstOrderDate,
-      items,
-      netWorth,
-      totalBuy,
-      totalSell,
-      committedFunds: committedFunds.toNumber(),
-      emergencyFund: emergencyFund.toNumber(),
-      ordersCount: orders.filter((order) => {
-        return order.type === 'BUY' || order.type === 'SELL';
-      }).length
-    };
-  }
-
   private async getCashPositions({
     cashDetails,
     emergencyFund,
@@ -1257,7 +1193,7 @@ export class PortfolioService {
         return this.exchangeRateDataService.toCurrency(
           new Big(order.quantity).mul(order.unitPrice).toNumber(),
           order.SymbolProfile.currency,
-          this.request.user.Settings.currency
+          this.request.user.Settings.settings.baseCurrency
         );
       })
       .reduce(
@@ -1276,7 +1212,7 @@ export class PortfolioService {
         return this.exchangeRateDataService.toCurrency(
           order.fee,
           order.SymbolProfile.currency,
-          this.request.user.Settings.currency
+          this.request.user.Settings.settings.baseCurrency
         );
       })
       .reduce(
@@ -1298,7 +1234,7 @@ export class PortfolioService {
         return this.exchangeRateDataService.toCurrency(
           new Big(order.quantity).mul(order.unitPrice).toNumber(),
           order.SymbolProfile.currency,
-          this.request.user.Settings.currency
+          this.request.user.Settings.settings.baseCurrency
         );
       })
       .reduce(
@@ -1325,27 +1261,135 @@ export class PortfolioService {
     return portfolioStart;
   }
 
+  private async getSummary({
+    impersonationId
+  }: {
+    impersonationId: string;
+  }): Promise<PortfolioSummary> {
+    const userCurrency = this.request.user.Settings.settings.baseCurrency;
+    const userId = await this.getUserId(impersonationId, this.request.user.id);
+    const user = await this.userService.user({ id: userId });
+
+    const performanceInformation = await this.getPerformance({
+      impersonationId
+    });
+
+    const { balanceInBaseCurrency } = await this.accountService.getCashDetails({
+      userId,
+      currency: userCurrency
+    });
+    const orders = await this.orderService.getOrders({
+      userCurrency,
+      userId
+    });
+
+    const excludedActivities = (
+      await this.orderService.getOrders({
+        userCurrency,
+        userId,
+        withExcludedAccounts: true
+      })
+    ).filter(({ Account: account }) => {
+      return account?.isExcluded ?? false;
+    });
+
+    const dividend = this.getDividend(orders).toNumber();
+    const emergencyFund = new Big(
+      (user.Settings?.settings as UserSettings)?.emergencyFund ?? 0
+    );
+    const fees = this.getFees(orders).toNumber();
+    const firstOrderDate = orders[0]?.date;
+    const items = this.getItems(orders).toNumber();
+
+    const totalBuy = this.getTotalByType(orders, userCurrency, 'BUY');
+    const totalSell = this.getTotalByType(orders, userCurrency, 'SELL');
+
+    const cash = new Big(balanceInBaseCurrency).minus(emergencyFund).toNumber();
+    const committedFunds = new Big(totalBuy).minus(totalSell);
+    const totalOfExcludedActivities = new Big(
+      this.getTotalByType(excludedActivities, userCurrency, 'BUY')
+    ).minus(this.getTotalByType(excludedActivities, userCurrency, 'SELL'));
+
+    const cashDetailsWithExcludedAccounts =
+      await this.accountService.getCashDetails({
+        userId,
+        currency: userCurrency,
+        withExcludedAccounts: true
+      });
+
+    const excludedBalanceInBaseCurrency = new Big(
+      cashDetailsWithExcludedAccounts.balanceInBaseCurrency
+    ).minus(balanceInBaseCurrency);
+
+    const excludedAccountsAndActivities = excludedBalanceInBaseCurrency
+      .plus(totalOfExcludedActivities)
+      .toNumber();
+
+    const netWorth = new Big(balanceInBaseCurrency)
+      .plus(performanceInformation.performance.currentValue)
+      .plus(items)
+      .plus(excludedAccountsAndActivities)
+      .toNumber();
+
+    const daysInMarket = differenceInDays(new Date(), firstOrderDate);
+
+    const annualizedPerformancePercent = new PortfolioCalculator({
+      currency: userCurrency,
+      currentRateService: this.currentRateService,
+      orders: []
+    })
+      .getAnnualizedPerformancePercent({
+        daysInMarket,
+        netPerformancePercent: new Big(
+          performanceInformation.performance.currentNetPerformancePercent
+        )
+      })
+      ?.toNumber();
+
+    return {
+      ...performanceInformation.performance,
+      annualizedPerformancePercent,
+      cash,
+      dividend,
+      excludedAccountsAndActivities,
+      fees,
+      firstOrderDate,
+      items,
+      netWorth,
+      totalBuy,
+      totalSell,
+      committedFunds: committedFunds.toNumber(),
+      emergencyFund: emergencyFund.toNumber(),
+      ordersCount: orders.filter((order) => {
+        return order.type === 'BUY' || order.type === 'SELL';
+      }).length
+    };
+  }
+
   private async getTransactionPoints({
     filters,
     includeDrafts = false,
-    userId
+    userId,
+    withExcludedAccounts
   }: {
     filters?: Filter[];
     includeDrafts?: boolean;
     userId: string;
+    withExcludedAccounts?: boolean;
   }): Promise<{
     transactionPoints: TransactionPoint[];
     orders: OrderWithAccount[];
     portfolioOrders: PortfolioOrder[];
   }> {
     const userCurrency =
-      this.request.user?.Settings?.currency ?? this.baseCurrency;
+      this.request.user?.Settings?.settings.baseCurrency ?? this.baseCurrency;
 
     const orders = await this.orderService.getOrders({
       filters,
       includeDrafts,
       userCurrency,
       userId,
+      withExcludedAccounts,
       types: ['BUY', 'SELL']
     });
 
@@ -1397,17 +1441,22 @@ export class PortfolioService {
     orders,
     portfolioItemsNow,
     userCurrency,
-    userId
+    userId,
+    withExcludedAccounts
   }: {
     filters?: Filter[];
     orders: OrderWithAccount[];
     portfolioItemsNow: { [p: string]: TimelinePosition };
     userCurrency: string;
     userId: string;
+    withExcludedAccounts?: boolean;
   }) {
     const accounts: PortfolioDetails['accounts'] = {};
 
-    let currentAccounts = [];
+    let currentAccounts: (Account & {
+      Order?: Order[];
+      Platform?: Platform;
+    })[] = [];
 
     if (filters.length === 0) {
       currentAccounts = await this.accountService.getAccounts(userId);
@@ -1427,6 +1476,10 @@ export class PortfolioService {
       });
     }
 
+    currentAccounts = currentAccounts.filter((account) => {
+      return withExcludedAccounts || account.isExcluded === false;
+    });
+
     for (const account of currentAccounts) {
       const ordersByAccount = orders.filter(({ accountId }) => {
         return accountId === account.id;

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

@@ -1,5 +1,6 @@
 import { RuleSettings } from '@ghostfolio/api/models/interfaces/rule-settings.interface';
 import { Rule } from '@ghostfolio/api/models/rule';
+import { UserSettings } from '@ghostfolio/common/interfaces';
 import { Injectable } from '@nestjs/common';
 
 @Injectable()
@@ -8,7 +9,7 @@ export class RulesService {
 
   public async evaluate<T extends RuleSettings>(
     aRules: Rule<T>[],
-    aUserSettings: { baseCurrency: string }
+    aUserSettings: UserSettings
   ) {
     return aRules
       .filter((rule) => {

apps/api/src/app/user/interfaces/user-settings-params.interface.ts

@@ -1,7 +0,0 @@
-import { ViewMode } from '@prisma/client';
-
-export interface UserSettingsParams {
-  currency?: string;
-  userId: string;
-  viewMode?: ViewMode;
-}

apps/api/src/app/user/interfaces/user-settings.interface.ts

@@ -1,5 +0,0 @@
-export interface UserSettings {
-  emergencyFund?: number;
-  locale?: string;
-  isRestrictedView?: boolean;
-}

apps/api/src/app/user/update-user-setting.dto.ts

@@ -1,6 +1,33 @@
-import { IsBoolean, IsNumber, IsOptional, IsString } from 'class-validator';
+import type {
+  ColorScheme,
+  DateRange,
+  ViewMode
+} from '@ghostfolio/common/types';
+import {
+  IsBoolean,
+  IsIn,
+  IsNumber,
+  IsOptional,
+  IsString
+} from 'class-validator';
 
 export class UpdateUserSettingDto {
+  @IsOptional()
+  @IsString()
+  baseCurrency?: string;
+
+  @IsString()
+  @IsOptional()
+  benchmark?: string;
+
+  @IsIn(<ColorScheme[]>['DARK', 'LIGHT'])
+  @IsOptional()
+  colorScheme?: ColorScheme;
+
+  @IsIn(<DateRange[]>['1d', '1y', '5y', 'max', 'ytd'])
+  @IsOptional()
+  dateRange?: DateRange;
+
   @IsNumber()
   @IsOptional()
   emergencyFund?: number;
@@ -24,4 +51,8 @@ export class UpdateUserSettingDto {
   @IsNumber()
   @IsOptional()
   savingsRate?: number;
+
+  @IsIn(<ViewMode[]>['DEFAULT', 'ZEN'])
+  @IsOptional()
+  viewMode?: ViewMode;
 }

apps/api/src/app/user/update-user-settings.dto.ts

@@ -1,10 +0,0 @@
-import { ViewMode } from '@prisma/client';
-import { IsString } from 'class-validator';
-
-export class UpdateUserSettingsDto {
-  @IsString()
-  baseCurrency: string;
-
-  @IsString()
-  viewMode: ViewMode;
-}

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

@@ -1,7 +1,7 @@
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { PropertyService } from '@ghostfolio/api/services/property/property.service';
 import { PROPERTY_IS_READ_ONLY_MODE } from '@ghostfolio/common/config';
-import { User } from '@ghostfolio/common/interfaces';
+import { User, UserSettings } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import type { RequestWithUser } from '@ghostfolio/common/types';
 import {
@@ -22,12 +22,10 @@ import { JwtService } from '@nestjs/jwt';
 import { AuthGuard } from '@nestjs/passport';
 import { User as UserModel } from '@prisma/client';
 import { StatusCodes, getReasonPhrase } from 'http-status-codes';
+import { size } from 'lodash';
 
 import { UserItem } from './interfaces/user-item.interface';
-import { UserSettingsParams } from './interfaces/user-settings-params.interface';
-import { UserSettings } from './interfaces/user-settings.interface';
 import { UpdateUserSettingDto } from './update-user-setting.dto';
-import { UpdateUserSettingsDto } from './update-user-settings.dto';
 import { UserService } from './user.service';
 
 @Controller('user')
@@ -103,6 +101,12 @@ export class UserController {
   @UseGuards(AuthGuard('jwt'))
   public async updateUserSetting(@Body() data: UpdateUserSettingDto) {
     if (
+      size(data) === 1 &&
+      (data.benchmark || data.dateRange) &&
+      this.request.user.role === 'DEMO'
+    ) {
+      // Allow benchmark or date range change for demo user
+    } else if (
       !hasPermission(
         this.request.user.permissions,
         permissions.updateUserSettings
@@ -130,33 +134,4 @@ export class UserController {
       userId: this.request.user.id
     });
   }
-
-  @Put('settings')
-  @UseGuards(AuthGuard('jwt'))
-  public async updateUserSettings(@Body() data: UpdateUserSettingsDto) {
-    if (
-      !hasPermission(
-        this.request.user.permissions,
-        permissions.updateUserSettings
-      )
-    ) {
-      throw new HttpException(
-        getReasonPhrase(StatusCodes.FORBIDDEN),
-        StatusCodes.FORBIDDEN
-      );
-    }
-
-    const userSettings: UserSettingsParams = {
-      currency: data.baseCurrency,
-      userId: this.request.user.id
-    };
-
-    if (
-      hasPermission(this.request.user.permissions, permissions.updateViewMode)
-    ) {
-      userSettings.viewMode = data.viewMode;
-    }
-
-    return await this.userService.updateUserSettings(userSettings);
-  }
 }

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

@@ -4,19 +4,20 @@ import { PrismaService } from '@ghostfolio/api/services/prisma.service';
 import { PropertyService } from '@ghostfolio/api/services/property/property.service';
 import { TagService } from '@ghostfolio/api/services/tag/tag.service';
 import { PROPERTY_IS_READ_ONLY_MODE, locale } from '@ghostfolio/common/config';
-import { User as IUser, UserWithSettings } from '@ghostfolio/common/interfaces';
+import {
+  User as IUser,
+  UserSettings,
+  UserWithSettings
+} from '@ghostfolio/common/interfaces';
 import {
   getPermissions,
   hasRole,
   permissions
 } from '@ghostfolio/common/permissions';
 import { Injectable } from '@nestjs/common';
-import { Prisma, Role, User, ViewMode } from '@prisma/client';
+import { Prisma, Role, User } from '@prisma/client';
 import { sortBy } from 'lodash';
 
-import { UserSettingsParams } from './interfaces/user-settings-params.interface';
-import { UserSettings } from './interfaces/user-settings.interface';
-
 const crypto = require('crypto');
 
 @Injectable()
@@ -69,9 +70,7 @@ export class UserService {
       accounts: Account,
       settings: {
         ...(<UserSettings>Settings.settings),
-        baseCurrency: Settings?.currency ?? UserService.DEFAULT_CURRENCY,
+        locale: (<UserSettings>Settings.settings)?.locale ?? aLocale
-        locale: (<UserSettings>Settings.settings)?.locale ?? aLocale,
-        viewMode: Settings?.viewMode ?? ViewMode.DEFAULT
       }
     };
   }
@@ -89,7 +88,7 @@ export class UserService {
   }
 
   public isRestrictedView(aUser: UserWithSettings) {
-    return (aUser.Settings.settings as UserSettings)?.isRestrictedView ?? false;
+    return aUser.Settings.settings.isRestrictedView ?? false;
   }
 
   public async user(
@@ -126,21 +125,35 @@ export class UserService {
     };
 
     if (user?.Settings) {
-      if (!user.Settings.currency) {
+      if (!user.Settings.settings) {
-        // Set default currency if needed
+        user.Settings.settings = {};
-        user.Settings.currency = UserService.DEFAULT_CURRENCY;
       }
     } else if (user) {
       // Set default settings if needed
       user.Settings = {
-        currency: UserService.DEFAULT_CURRENCY,
+        settings: {},
-        settings: null,
         updatedAt: new Date(),
-        userId: user?.id,
+        userId: user?.id
-        viewMode: ViewMode.DEFAULT
       };
     }
 
+    // Set default value for base currency
+    if (!(user.Settings.settings as UserSettings)?.baseCurrency) {
+      (user.Settings.settings as UserSettings).baseCurrency =
+        UserService.DEFAULT_CURRENCY;
+    }
+
+    // Set default value for date range
+    (user.Settings.settings as UserSettings).dateRange =
+      (user.Settings.settings as UserSettings).viewMode === 'ZEN'
+        ? 'max'
+        : (user.Settings.settings as UserSettings)?.dateRange ?? 'max';
+
+    // Set default value for view mode
+    if (!(user.Settings.settings as UserSettings).viewMode) {
+      (user.Settings.settings as UserSettings).viewMode = 'DEFAULT';
+    }
+
     if (this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION')) {
       user.subscription =
         this.subscriptionService.getSubscription(Subscription);
@@ -221,7 +234,9 @@ export class UserService {
         },
         Settings: {
           create: {
-            currency: this.baseCurrency
+            settings: {
+              currency: this.baseCurrency
+            }
           }
         }
       }
@@ -295,7 +310,7 @@ export class UserService {
     userId: string;
     userSettings: UserSettings;
   }) {
-    const settings = userSettings as Prisma.JsonObject;
+    const settings = userSettings as unknown as Prisma.JsonObject;
 
     await this.prismaService.settings.upsert({
       create: {
@@ -317,33 +332,6 @@ export class UserService {
     return;
   }
 
-  public async updateUserSettings({
-    currency,
-    userId,
-    viewMode
-  }: UserSettingsParams) {
-    await this.prismaService.settings.upsert({
-      create: {
-        currency,
-        User: {
-          connect: {
-            id: userId
-          }
-        },
-        viewMode
-      },
-      update: {
-        currency,
-        viewMode
-      },
-      where: {
-        userId: userId
-      }
-    });
-
-    return;
-  }
-
   private getRandomString(length: number) {
     const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
     const result = [];

apps/api/src/interceptors/redact-values-in-response.interceptor.ts

@@ -41,6 +41,14 @@ export class RedactValuesInResponseInterceptor<T>
               return activity;
             });
           }
+
+          if (data.filteredValueInBaseCurrency) {
+            data.filteredValueInBaseCurrency = null;
+          }
+
+          if (data.totalValueInBaseCurrency) {
+            data.totalValueInBaseCurrency = null;
+          }
         }
 
         return data;

apps/api/src/interceptors/transform-data-source-in-response.interceptor.ts

@@ -5,6 +5,7 @@ import {
   Injectable,
   NestInterceptor
 } from '@nestjs/common';
+import { isArray } from 'lodash';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -36,6 +37,13 @@ export class TransformDataSourceInResponseInterceptor<T>
             });
           }
 
+          if (isArray(data.benchmarks)) {
+            data.benchmarks.map((benchmark) => {
+              benchmark.dataSource = encodeDataSource(benchmark.dataSource);
+              return benchmark;
+            });
+          }
+
           if (data.dataSource) {
             data.dataSource = encodeDataSource(data.dataSource);
           }

apps/api/src/models/interfaces/rule.interface.ts

@@ -1,5 +1,5 @@
 import { RuleSettings } from '@ghostfolio/api/models/interfaces/rule-settings.interface';
-import { UserSettings } from '@ghostfolio/api/models/interfaces/user-settings.interface';
+import { UserSettings } from '@ghostfolio/common/interfaces';
 
 import { EvaluationResult } from './evaluation-result.interface';
 

apps/api/src/models/interfaces/user-settings.interface.ts

@@ -1,3 +0,0 @@
-export interface UserSettings {
-  baseCurrency: string;
-}

apps/api/src/models/rule.ts

@@ -1,8 +1,7 @@
 import { RuleSettings } from '@ghostfolio/api/models/interfaces/rule-settings.interface';
-import { UserSettings } from '@ghostfolio/api/models/interfaces/user-settings.interface';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 import { groupBy } from '@ghostfolio/common/helper';
-import { TimelinePosition } from '@ghostfolio/common/interfaces';
+import { TimelinePosition, UserSettings } from '@ghostfolio/common/interfaces';
 
 import { EvaluationResult } from './interfaces/evaluation-result.interface';
 import { RuleInterface } from './interfaces/rule.interface';

apps/api/src/models/rules/account-cluster-risk/current-investment.ts

@@ -1,9 +1,9 @@
 import { RuleSettings } from '@ghostfolio/api/models/interfaces/rule-settings.interface';
-import { UserSettings } from '@ghostfolio/api/models/interfaces/user-settings.interface';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 import {
   PortfolioDetails,
-  PortfolioPosition
+  PortfolioPosition,
+  UserSettings
 } from '@ghostfolio/common/interfaces';
 
 import { Rule } from '../../rule';

apps/api/src/models/rules/account-cluster-risk/initial-investment.ts

@@ -1,9 +1,9 @@
 import { RuleSettings } from '@ghostfolio/api/models/interfaces/rule-settings.interface';
-import { UserSettings } from '@ghostfolio/api/models/interfaces/user-settings.interface';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 import {
   PortfolioDetails,
-  PortfolioPosition
+  PortfolioPosition,
+  UserSettings
 } from '@ghostfolio/common/interfaces';
 
 import { Rule } from '../../rule';

apps/api/src/models/rules/account-cluster-risk/single-account.ts

@@ -1,7 +1,6 @@
 import { RuleSettings } from '@ghostfolio/api/models/interfaces/rule-settings.interface';
-import { UserSettings } from '@ghostfolio/api/models/interfaces/user-settings.interface';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
-import { PortfolioDetails } from '@ghostfolio/common/interfaces';
+import { PortfolioDetails, UserSettings } from '@ghostfolio/common/interfaces';
 
 import { Rule } from '../../rule';
 

apps/api/src/models/rules/currency-cluster-risk/base-currency-current-investment.ts

@@ -1,7 +1,7 @@
 import { CurrentPositions } from '@ghostfolio/api/app/portfolio/interfaces/current-positions.interface';
 import { RuleSettings } from '@ghostfolio/api/models/interfaces/rule-settings.interface';
-import { UserSettings } from '@ghostfolio/api/models/interfaces/user-settings.interface';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
+import { UserSettings } from '@ghostfolio/common/interfaces';
 
 import { Rule } from '../../rule';
 

apps/api/src/models/rules/currency-cluster-risk/base-currency-initial-investment.ts

@@ -1,7 +1,7 @@
 import { CurrentPositions } from '@ghostfolio/api/app/portfolio/interfaces/current-positions.interface';
 import { RuleSettings } from '@ghostfolio/api/models/interfaces/rule-settings.interface';
-import { UserSettings } from '@ghostfolio/api/models/interfaces/user-settings.interface';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
+import { UserSettings } from '@ghostfolio/common/interfaces';
 
 import { Rule } from '../../rule';
 

apps/api/src/models/rules/currency-cluster-risk/current-investment.ts

@@ -1,7 +1,7 @@
 import { CurrentPositions } from '@ghostfolio/api/app/portfolio/interfaces/current-positions.interface';
 import { RuleSettings } from '@ghostfolio/api/models/interfaces/rule-settings.interface';
-import { UserSettings } from '@ghostfolio/api/models/interfaces/user-settings.interface';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
+import { UserSettings } from '@ghostfolio/common/interfaces';
 
 import { Rule } from '../../rule';
 

apps/api/src/models/rules/currency-cluster-risk/initial-investment.ts

@@ -1,7 +1,7 @@
 import { CurrentPositions } from '@ghostfolio/api/app/portfolio/interfaces/current-positions.interface';
 import { RuleSettings } from '@ghostfolio/api/models/interfaces/rule-settings.interface';
-import { UserSettings } from '@ghostfolio/api/models/interfaces/user-settings.interface';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
+import { UserSettings } from '@ghostfolio/common/interfaces';
 
 import { Rule } from '../../rule';
 

apps/api/src/models/rules/fees/fee-ratio-initial-investment.ts

@@ -1,6 +1,6 @@
 import { RuleSettings } from '@ghostfolio/api/models/interfaces/rule-settings.interface';
-import { UserSettings } from '@ghostfolio/api/models/interfaces/user-settings.interface';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
+import { UserSettings } from '@ghostfolio/common/interfaces';
 
 import { Rule } from '../../rule';
 

apps/api/src/services/api/api.module.ts

@@ -0,0 +1,9 @@
+import { Module } from '@nestjs/common';
+
+import { ApiService } from './api.service';
+
+@Module({
+  exports: [ApiService],
+  providers: [ApiService]
+})
+export class ApiModule {}

apps/api/src/services/api/api.service.ts

@@ -0,0 +1,42 @@
+import { Filter } from '@ghostfolio/common/interfaces';
+import { Injectable } from '@nestjs/common';
+
+@Injectable()
+export class ApiService {
+  public constructor() {}
+
+  public buildFiltersFromQueryParams({
+    filterByAccounts,
+    filterByAssetClasses,
+    filterByTags
+  }: {
+    filterByAccounts?: string;
+    filterByAssetClasses?: string;
+    filterByTags?: string;
+  }): Filter[] {
+    const accountIds = filterByAccounts?.split(',') ?? [];
+    const assetClasses = filterByAssetClasses?.split(',') ?? [];
+    const tagIds = filterByTags?.split(',') ?? [];
+
+    return [
+      ...accountIds.map((accountId) => {
+        return <Filter>{
+          id: accountId,
+          type: 'ACCOUNT'
+        };
+      }),
+      ...assetClasses.map((assetClass) => {
+        return <Filter>{
+          id: assetClass,
+          type: 'ASSET_CLASS'
+        };
+      }),
+      ...tagIds.map((tagId) => {
+        return <Filter>{
+          id: tagId,
+          type: 'TAG'
+        };
+      })
+    ];
+  }
+}

apps/api/src/services/configuration.service.ts

@@ -38,7 +38,7 @@ export class ConfigurationService {
       MAX_ACTIVITIES_TO_IMPORT: num({ default: Number.MAX_SAFE_INTEGER }),
       MAX_ITEM_IN_CACHE: num({ default: 9999 }),
       PORT: port({ default: 3333 }),
-      RAKUTEN_RAPID_API_KEY: str({ default: '' }),
+      RAPID_API_API_KEY: str({ default: '' }),
       REDIS_HOST: host({ default: 'localhost' }),
       REDIS_PASSWORD: str({ default: '' }),
       REDIS_PORT: port({ default: 6379 }),

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

@@ -280,7 +280,7 @@ export class DataGatheringService {
         return (
           dataSource !== DataSource.GHOSTFOLIO &&
           dataSource !== DataSource.MANUAL &&
-          dataSource !== DataSource.RAKUTEN
+          dataSource !== DataSource.RAPID_API
         );
       })
       .map(({ dataSource, symbol }) => {

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

@@ -5,7 +5,7 @@ import { EodHistoricalDataService } from '@ghostfolio/api/services/data-provider
 import { GhostfolioScraperApiService } from '@ghostfolio/api/services/data-provider/ghostfolio-scraper-api/ghostfolio-scraper-api.service';
 import { GoogleSheetsService } from '@ghostfolio/api/services/data-provider/google-sheets/google-sheets.service';
 import { ManualService } from '@ghostfolio/api/services/data-provider/manual/manual.service';
-import { RakutenRapidApiService } from '@ghostfolio/api/services/data-provider/rakuten-rapid-api/rakuten-rapid-api.service';
+import { RapidApiService } from '@ghostfolio/api/services/data-provider/rapid-api/rapid-api.service';
 import { YahooFinanceService } from '@ghostfolio/api/services/data-provider/yahoo-finance/yahoo-finance.service';
 import { PrismaModule } from '@ghostfolio/api/services/prisma.module';
 import { SymbolProfileModule } from '@ghostfolio/api/services/symbol-profile.module';
@@ -27,7 +27,7 @@ import { DataProviderService } from './data-provider.service';
     GhostfolioScraperApiService,
     GoogleSheetsService,
     ManualService,
-    RakutenRapidApiService,
+    RapidApiService,
     YahooFinanceService,
     {
       inject: [
@@ -36,7 +36,7 @@ import { DataProviderService } from './data-provider.service';
         GhostfolioScraperApiService,
         GoogleSheetsService,
         ManualService,
-        RakutenRapidApiService,
+        RapidApiService,
         YahooFinanceService
       ],
       provide: 'DataProviderInterfaces',
@@ -46,7 +46,7 @@ import { DataProviderService } from './data-provider.service';
         ghostfolioScraperApiService,
         googleSheetsService,
         manualService,
-        rakutenRapidApiService,
+        rapidApiService,
         yahooFinanceService
       ) => [
         alphaVantageService,
@@ -54,7 +54,7 @@ import { DataProviderService } from './data-provider.service';
         ghostfolioScraperApiService,
         googleSheetsService,
         manualService,
-        rakutenRapidApiService,
+        rapidApiService,
         yahooFinanceService
       ]
     }

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

@@ -1 +0,0 @@
-export interface IRakutenRapidApiResponse {}

apps/api/src/services/data-provider/rapid-api/interfaces/interfaces.ts

@@ -0,0 +1 @@
+export interface IRapidApiResponse {}

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

@@ -15,14 +15,14 @@ import bent from 'bent';
 import { format, subMonths, subWeeks, subYears } from 'date-fns';
 
 @Injectable()
-export class RakutenRapidApiService implements DataProviderInterface {
+export class RapidApiService implements DataProviderInterface {
   public constructor(
     private readonly configurationService: ConfigurationService,
     private readonly prismaService: PrismaService
   ) {}
 
   public canHandle(symbol: string) {
-    return !!this.configurationService.get('RAKUTEN_RAPID_API_KEY');
+    return !!this.configurationService.get('RAPID_API_API_KEY');
   }
 
   public async getAssetProfile(
@@ -103,7 +103,7 @@ export class RakutenRapidApiService implements DataProviderInterface {
   }
 
   public getName(): DataSource {
-    return DataSource.RAKUTEN;
+    return DataSource.RAPID_API;
   }
 
   public async getQuotes(
@@ -129,7 +129,7 @@ export class RakutenRapidApiService implements DataProviderInterface {
         };
       }
     } catch (error) {
-      Logger.error(error, 'RakutenRapidApiService');
+      Logger.error(error, 'RapidApiService');
     }
 
     return {};
@@ -155,16 +155,14 @@ export class RakutenRapidApiService implements DataProviderInterface {
         {
           useQueryString: true,
           'x-rapidapi-host': 'fear-and-greed-index.p.rapidapi.com',
-          'x-rapidapi-key': this.configurationService.get(
+          'x-rapidapi-key': this.configurationService.get('RAPID_API_API_KEY')
-            'RAKUTEN_RAPID_API_KEY'
-          )
         }
       );
 
       const { fgi } = await get();
       return fgi;
     } catch (error) {
-      Logger.error(error, 'RakutenRapidApiService');
+      Logger.error(error, 'RapidApiService');
 
       return undefined;
     }

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

@@ -6,6 +6,7 @@ import {
   IDataProviderHistoricalResponse,
   IDataProviderResponse
 } from '@ghostfolio/api/services/interfaces/interfaces';
+import { UNKNOWN_KEY } from '@ghostfolio/common/config';
 import { DATE_FORMAT, isCurrency } from '@ghostfolio/common/helper';
 import { Granularity } from '@ghostfolio/common/types';
 import { Injectable, Logger } from '@nestjs/common';
@@ -57,8 +58,15 @@ export class YahooFinanceService implements DataProviderInterface {
    *                  DOGEUSD -> DOGE-USD
    */
   public convertToYahooFinanceSymbol(aSymbol: string) {
-    if (aSymbol.includes(this.baseCurrency) && aSymbol.length >= 6) {
+    if (
-      if (isCurrency(aSymbol.substring(0, aSymbol.length - 3))) {
+      aSymbol.includes(this.baseCurrency) &&
+      aSymbol.length > this.baseCurrency.length
+    ) {
+      if (
+        isCurrency(
+          aSymbol.substring(0, aSymbol.length - this.baseCurrency.length)
+        )
+      ) {
         return `${aSymbol}=X`;
       } else if (
         this.cryptocurrencyService.isCryptocurrency(
@@ -90,7 +98,7 @@ export class YahooFinanceService implements DataProviderInterface {
     try {
       const symbol = this.convertToYahooFinanceSymbol(aSymbol);
       const assetProfile = await yahooFinance.quoteSummary(symbol, {
-        modules: ['price', 'summaryProfile']
+        modules: ['price', 'summaryProfile', 'topHoldings']
       });
 
       const { assetClass, assetSubClass } = this.parseAssetClass(
@@ -109,7 +117,16 @@ export class YahooFinanceService implements DataProviderInterface {
       });
       response.symbol = aSymbol;
 
-      if (
+      if (assetSubClass === AssetSubClass.MUTUALFUND) {
+        response.sectors = [];
+
+        for (const sectorWeighting of assetProfile.topHoldings
+          ?.sectorWeightings ?? []) {
+          for (const [sector, weight] of Object.entries(sectorWeighting)) {
+            response.sectors.push({ weight, name: this.parseSector(sector) });
+          }
+        }
+      } else if (
         assetSubClass === AssetSubClass.STOCK &&
         assetProfile.summaryProfile?.country
       ) {
@@ -183,10 +200,10 @@ export class YahooFinanceService implements DataProviderInterface {
       for (const historicalItem of historicalResult) {
         let marketPrice = historicalItem.close;
 
-        if (symbol === 'USDGBp') {
+        if (symbol === `${this.baseCurrency}GBp`) {
           // Convert GPB to GBp (pence)
           marketPrice = new Big(marketPrice).mul(100).toNumber();
-        } else if (symbol === 'USDILA') {
+        } else if (symbol === `${this.baseCurrency}ILA`) {
           // Convert ILS to ILA
           marketPrice = new Big(marketPrice).mul(100).toNumber();
         }
@@ -246,9 +263,12 @@ export class YahooFinanceService implements DataProviderInterface {
           marketPrice: quote.regularMarketPrice || 0
         };
 
-        if (symbol === 'USDGBP' && yahooFinanceSymbols.includes('USDGBp=X')) {
+        if (
+          symbol === `${this.baseCurrency}GBP` &&
+          yahooFinanceSymbols.includes(`${this.baseCurrency}GBp=X`)
+        ) {
           // Convert GPB to GBp (pence)
-          response['USDGBp'] = {
+          response[`${this.baseCurrency}GBp`] = {
             ...response[symbol],
             currency: 'GBp',
             marketPrice: new Big(response[symbol].marketPrice)
@@ -256,11 +276,11 @@ export class YahooFinanceService implements DataProviderInterface {
               .toNumber()
           };
         } else if (
-          symbol === 'USDILS' &&
+          symbol === `${this.baseCurrency}ILS` &&
-          yahooFinanceSymbols.includes('USDILA=X')
+          yahooFinanceSymbols.includes(`${this.baseCurrency}ILA=X`)
         ) {
           // Convert ILS to ILA
-          response['USDILA'] = {
+          response[`${this.baseCurrency}ILA`] = {
             ...response[symbol],
             currency: 'ILA',
             marketPrice: new Big(response[symbol].marketPrice)
@@ -270,9 +290,9 @@ export class YahooFinanceService implements DataProviderInterface {
         }
       }
 
-      if (yahooFinanceSymbols.includes('USDUSX=X')) {
+      if (yahooFinanceSymbols.includes(`${this.baseCurrency}USX=X`)) {
         // Convert USD to USX (cent)
-        response['USDUSX'] = {
+        response[`${this.baseCurrency}USX`] = {
           currency: 'USX',
           dataSource: this.getName(),
           marketPrice: new Big(1).mul(100).toNumber(),
@@ -434,4 +454,46 @@ export class YahooFinanceService implements DataProviderInterface {
 
     return { assetClass, assetSubClass };
   }
+
+  private parseSector(aString: string): string {
+    let sector = UNKNOWN_KEY;
+
+    switch (aString) {
+      case 'basic_materials':
+        sector = 'Basic Materials';
+        break;
+      case 'communication_services':
+        sector = 'Communication Services';
+        break;
+      case 'consumer_cyclical':
+        sector = 'Consumer Cyclical';
+        break;
+      case 'consumer_defensive':
+        sector = 'Consumer Staples';
+        break;
+      case 'energy':
+        sector = 'Energy';
+        break;
+      case 'financial_services':
+        sector = 'Financial Services';
+        break;
+      case 'healthcare':
+        sector = 'Healthcare';
+        break;
+      case 'industrials':
+        sector = 'Industrials';
+        break;
+      case 'realestate':
+        sector = 'Real Estate';
+        break;
+      case 'technology':
+        sector = 'Technology';
+        break;
+      case 'utilities':
+        sector = 'Utilities';
+        break;
+    }
+
+    return sector;
+  }
 }

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

@@ -99,10 +99,12 @@ export class ExchangeRateDataService {
       this.exchangeRates[symbol] = resultExtended[symbol]?.[date]?.marketPrice;
 
       if (!this.exchangeRates[symbol]) {
-        // Not found, calculate indirectly via USD
+        // Not found, calculate indirectly via base currency
         this.exchangeRates[symbol] =
-          resultExtended[`${currency1}${'USD'}`]?.[date]?.marketPrice *
+          resultExtended[`${currency1}${this.baseCurrency}`]?.[date]
-          resultExtended[`${'USD'}${currency2}`]?.[date]?.marketPrice;
+            ?.marketPrice *
+          resultExtended[`${this.baseCurrency}${currency2}`]?.[date]
+            ?.marketPrice;
 
         // Calculate the opposite direction
         this.exchangeRates[`${currency2}${currency1}`] =
@@ -126,9 +128,11 @@ export class ExchangeRateDataService {
       if (this.exchangeRates[`${aFromCurrency}${aToCurrency}`]) {
         factor = this.exchangeRates[`${aFromCurrency}${aToCurrency}`];
       } else {
-        // Calculate indirectly via USD
+        // Calculate indirectly via base currency
-        const factor1 = this.exchangeRates[`${aFromCurrency}${'USD'}`];
+        const factor1 =
-        const factor2 = this.exchangeRates[`${'USD'}${aToCurrency}`];
+          this.exchangeRates[`${aFromCurrency}${this.baseCurrency}`];
+        const factor2 =
+          this.exchangeRates[`${this.baseCurrency}${aToCurrency}`];
 
         factor = factor1 * factor2;
 
@@ -166,21 +170,6 @@ export class ExchangeRateDataService {
       currencies.push(account.currency);
     });
 
-    (
-      await this.prismaService.settings.findMany({
-        distinct: ['currency'],
-        orderBy: [{ currency: 'asc' }],
-        select: { currency: true },
-        where: {
-          currency: {
-            not: null
-          }
-        }
-      })
-    ).forEach((userSettings) => {
-      currencies.push(userSettings.currency);
-    });
-
     (
       await this.prismaService.symbolProfile.findMany({
         distinct: ['currency'],

apps/api/src/services/interfaces/environment.interface.ts

@@ -26,7 +26,7 @@ export interface Environment extends CleanedEnvAccessors {
   MAX_ACTIVITIES_TO_IMPORT: number;
   MAX_ITEM_IN_CACHE: number;
   PORT: number;
-  RAKUTEN_RAPID_API_KEY: string;
+  RAPID_API_API_KEY: string;
   REDIS_HOST: string;
   REDIS_PASSWORD: string;
   REDIS_PORT: number;

apps/api/src/services/property/property.dto.ts

@@ -1,6 +1,7 @@
-import { IsString } from 'class-validator';
+import { IsOptional, IsString } from 'class-validator';
 
 export class PropertyDto {
+  @IsOptional()
   @IsString()
   value: string;
 }

apps/api/src/services/symbol-profile.service.ts

@@ -64,6 +64,23 @@ export class SymbolProfileService {
       .then((symbolProfiles) => this.getSymbols(symbolProfiles));
   }
 
+  public async getSymbolProfilesByIds(
+    symbolProfileIds: string[]
+  ): Promise<EnhancedSymbolProfile[]> {
+    return this.prismaService.symbolProfile
+      .findMany({
+        include: { SymbolProfileOverrides: true },
+        where: {
+          id: {
+            in: symbolProfileIds.map((symbolProfileId) => {
+              return symbolProfileId;
+            })
+          }
+        }
+      })
+      .then((symbolProfiles) => this.getSymbols(symbolProfiles));
+  }
+
   /**
    * @deprecated
    */

apps/api/src/services/twitter-bot/twitter-bot.module.ts

@@ -1,7 +1,6 @@
 import { BenchmarkModule } from '@ghostfolio/api/app/benchmark/benchmark.module';
 import { SymbolModule } from '@ghostfolio/api/app/symbol/symbol.module';
 import { ConfigurationModule } from '@ghostfolio/api/services/configuration.module';
-import { PropertyModule } from '@ghostfolio/api/services/property/property.module';
 import { TwitterBotService } from '@ghostfolio/api/services/twitter-bot/twitter-bot.service';
 import { Module } from '@nestjs/common';
 

apps/api/src/services/twitter-bot/twitter-bot.service.ts

@@ -53,13 +53,15 @@ export class TwitterBotService {
           symbolItem.marketPrice
         );
 
-        let status = `Current Market Mood: ${emoji} ${text} (${symbolItem.marketPrice}/100)`;
+        let status = `Current market mood is ${emoji} ${text.toLowerCase()} (${
+          symbolItem.marketPrice
+        }/100)`;
 
         const benchmarkListing = await this.getBenchmarkListing(3);
 
         if (benchmarkListing?.length > 1) {
           status += '\n\n';
-          status += '±% from ATH\n';
+          status += '± from ATH in %\n';
           status += benchmarkListing;
         }
 

apps/client/src/app/app-routing.module.ts

@@ -95,6 +95,13 @@ const routes: Routes = [
         './pages/blog/2022/08/500-stars-on-github/500-stars-on-github-page.module'
       ).then((m) => m.FiveHundredStarsOnGitHubPageModule)
   },
+  {
+    path: 'blog/2022/10/hacktoberfest-2022',
+    loadChildren: () =>
+      import(
+        './pages/blog/2022/10/hacktoberfest-2022/hacktoberfest-2022-page.module'
+      ).then((m) => m.Hacktoberfest2022PageModule)
+  },
   {
     path: 'demo',
     loadChildren: () =>

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

@@ -13,6 +13,7 @@ import {
 } from '@ghostfolio/common/config';
 import { InfoItem, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
+import { ColorScheme } from '@ghostfolio/common/types';
 import { MaterialCssVarsService } from 'angular-material-css-vars';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
@@ -77,6 +78,8 @@ export class AppComponent implements OnDestroy, OnInit {
           permissions.createUserAccount
         );
 
+        this.initializeTheme(this.user?.settings.colorScheme);
+
         this.changeDetectorRef.markForCheck();
       });
   }
@@ -97,13 +100,17 @@ export class AppComponent implements OnDestroy, OnInit {
     this.unsubscribeSubject.complete();
   }
 
-  private initializeTheme() {
+  private initializeTheme(userPreferredColorScheme?: ColorScheme) {
-    this.materialCssVarsService.setDarkTheme(
+    const isDarkTheme = userPreferredColorScheme
-      window.matchMedia('(prefers-color-scheme: dark)').matches
+      ? userPreferredColorScheme === 'DARK'
-    );
+      : window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+    this.materialCssVarsService.setDarkTheme(isDarkTheme);
 
     window.matchMedia('(prefers-color-scheme: dark)').addListener((event) => {
-      this.materialCssVarsService.setDarkTheme(event.matches);
+      if (!this.user?.settings.colorScheme) {
+        this.materialCssVarsService.setDarkTheme(event.matches);
+      }
     });
 
     this.materialCssVarsService.setPrimaryColor(primaryColorHex);

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

@@ -61,7 +61,7 @@ export class AccountDetailDialog implements OnDestroy, OnInit {
       .subscribe(({ accountType, name, Platform, valueInBaseCurrency }) => {
         this.accountType = accountType;
         this.name = name;
-        this.platformName = Platform?.name;
+        this.platformName = Platform?.name ?? '-';
         this.valueInBaseCurrency = valueInBaseCurrency;
 
         this.changeDetectorRef.markForCheck();

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

@@ -21,10 +21,12 @@
 
     <div class="row">
       <div class="col-6 mb-3">
-        <gf-value size="medium" [value]="accountType">Account Type</gf-value>
+        <gf-value i18n size="medium" [value]="accountType"
+          >Account Type</gf-value
+        >
       </div>
       <div class="col-6 mb-3">
-        <gf-value size="medium" [value]="platformName">Platform</gf-value>
+        <gf-value i18n size="medium" [value]="platformName">Platform</gf-value>
       </div>
     </div>
 

apps/client/src/app/components/admin-jobs/admin-jobs.html

@@ -2,7 +2,10 @@
   <div class="row">
     <div class="col">
       <form class="align-items-center d-flex" [formGroup]="filterForm">
-        <mat-form-field appearance="outline" class="flex-grow-1">
+        <mat-form-field
+          appearance="outline"
+          class="compact-with-outline flex-grow-1 mr-2 without-hint"
+        >
           <mat-select formControlName="status">
             <mat-option></mat-option>
             <mat-option
@@ -13,7 +16,7 @@
           </mat-select>
         </mat-form-field>
         <button
-          class="ml-1"
+          class="mt-1"
           color="warn"
           mat-flat-button
           (click)="onDeleteJobs()"

apps/client/src/app/components/admin-market-data-detail/admin-market-data-detail.component.html

@@ -2,6 +2,7 @@
   <gf-line-chart
     class="mb-4"
     [historicalDataItems]="historicalDataItems"
+    [isAnimated]="true"
     [locale]="locale"
     [showXAxis]="true"
     [showYAxis]="true"

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

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

apps/client/src/app/components/admin-market-data/admin-market-data.component.ts

@@ -92,7 +92,6 @@ export class AdminMarketDataComponent implements OnDestroy, OnInit {
         if (
           params['assetProfileDialog'] &&
           params['dataSource'] &&
-          params['dateOfFirstActivity'] &&
           params['symbol']
         ) {
           this.openAssetProfileDialog({
@@ -170,12 +169,16 @@ export class AdminMarketDataComponent implements OnDestroy, OnInit {
     dateOfFirstActivity,
     symbol
   }: UniqueAsset & { dateOfFirstActivity: string }) {
+    try {
+      dateOfFirstActivity = format(parseISO(dateOfFirstActivity), DATE_FORMAT);
+    } catch {}
+
     this.router.navigate([], {
       queryParams: {
+        dateOfFirstActivity,
         dataSource,
         symbol,
-        assetProfileDialog: true,
+        assetProfileDialog: true
-        dateOfFirstActivity: format(parseISO(dateOfFirstActivity), DATE_FORMAT)
       }
     });
   }

apps/client/src/app/components/admin-overview/admin-overview.component.ts

@@ -99,7 +99,7 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
       ...this.coupons,
       { code: this.generateCouponCode(16), duration: this.couponDuration }
     ];
-    this.putCoupons(coupons);
+    this.putAdminSetting({ key: PROPERTY_COUPONS, value: coupons });
   }
 
   public onAddCurrency() {
@@ -107,7 +107,7 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
 
     if (currency) {
       const currencies = uniq([...this.customCurrencies, currency]);
-      this.putCurrencies(currencies);
+      this.putAdminSetting({ key: PROPERTY_CURRENCIES, value: currencies });
     }
   }
 
@@ -124,7 +124,7 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
       const coupons = this.coupons.filter((coupon) => {
         return coupon.code !== aCouponCode;
       });
-      this.putCoupons(coupons);
+      this.putAdminSetting({ key: PROPERTY_COUPONS, value: coupons });
     }
   }
 
@@ -137,12 +137,12 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
       const currencies = this.customCurrencies.filter((currency) => {
         return currency !== aCurrency;
       });
-      this.putCurrencies(currencies);
+      this.putAdminSetting({ key: PROPERTY_CURRENCIES, value: currencies });
     }
   }
 
   public onDeleteSystemMessage() {
-    this.putSystemMessage('');
+    this.putAdminSetting({ key: PROPERTY_SYSTEM_MESSAGE, value: undefined });
   }
 
   public onFlushCache() {
@@ -192,14 +192,20 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
   }
 
   public onReadOnlyModeChange(aEvent: MatSlideToggleChange) {
-    this.setReadOnlyMode(aEvent.checked);
+    this.putAdminSetting({
+      key: PROPERTY_IS_READ_ONLY_MODE,
+      value: aEvent.checked ? true : undefined
+    });
   }
 
   public onSetSystemMessage() {
     const systemMessage = prompt($localize`Please set your system message:`);
 
     if (systemMessage) {
-      this.putSystemMessage(systemMessage);
+      this.putAdminSetting({
+        key: PROPERTY_SYSTEM_MESSAGE,
+        value: systemMessage
+      });
     }
   }
 
@@ -236,49 +242,10 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
     return couponCode;
   }
 
-  private putCoupons(aCoupons: Coupon[]) {
+  private putAdminSetting({ key, value }: { key: string; value: any }) {
     this.dataService
-      .putAdminSetting(PROPERTY_COUPONS, {
+      .putAdminSetting(key, {
-        value: JSON.stringify(aCoupons)
+        value: value ? JSON.stringify(value) : undefined
-      })
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(() => {
-        setTimeout(() => {
-          window.location.reload();
-        }, 300);
-      });
-  }
-
-  private putCurrencies(aCurrencies: string[]) {
-    this.dataService
-      .putAdminSetting(PROPERTY_CURRENCIES, {
-        value: JSON.stringify(aCurrencies)
-      })
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(() => {
-        setTimeout(() => {
-          window.location.reload();
-        }, 300);
-      });
-  }
-
-  private putSystemMessage(aSystemMessage: string) {
-    this.dataService
-      .putAdminSetting(PROPERTY_SYSTEM_MESSAGE, {
-        value: aSystemMessage
-      })
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(() => {
-        setTimeout(() => {
-          window.location.reload();
-        }, 300);
-      });
-  }
-
-  private setReadOnlyMode(aValue: boolean) {
-    this.dataService
-      .putAdminSetting(PROPERTY_IS_READ_ONLY_MODE, {
-        value: aValue ? 'true' : ''
       })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {

apps/client/src/app/components/admin-overview/admin-overview.html

@@ -5,15 +5,26 @@
         <mat-card-content>
           <div class="d-flex my-3">
             <div class="w-50" i18n>User Count</div>
-            <div class="w-50">{{ userCount }}</div>
+            <div class="w-50">
+              <gf-value
+                precision="0"
+                [locale]="user?.settings?.locale"
+                [value]="userCount"
+              ></gf-value>
+            </div>
           </div>
           <div class="d-flex my-3">
             <div class="w-50" i18n>Activity Count</div>
             <div class="w-50">
-              <ng-container *ngIf="transactionCount">
+              <gf-value
-                {{ transactionCount }} ({{ transactionCount / userCount | number
+                precision="0"
-                : '1.2-2' }} <span i18n>per User</span>)
+                [locale]="user?.settings?.locale"
-              </ng-container>
+                [value]="transactionCount"
+              ></gf-value>
+              <div *ngIf="transactionCount && userCount">
+                {{ transactionCount / userCount | number : '1.2-2' }}
+                <span i18n>per User</span>
+              </div>
             </div>
           </div>
           <div class="d-flex my-3">
@@ -108,10 +119,20 @@
               </div>
             </div>
           </div>
+          <div class="align-items-start d-flex my-3">
+            <div class="w-50" i18n>Benchmarks</div>
+            <div class="w-50">
+              <table>
+                <tr *ngFor="let benchmark of info?.benchmarks">
+                  <td class="pl-1">{{ benchmark.symbol }}</td>
+                </tr>
+              </table>
+            </div>
+          </div>
           <div *ngIf="hasPermissionForSystemMessage" class="d-flex my-3">
             <div class="w-50" i18n>System Message</div>
             <div class="w-50">
-              <div *ngIf="info.systemMessage">
+              <div *ngIf="info?.systemMessage">
                 <span>{{ info.systemMessage }}</span>
                 <button
                   class="mini-icon mx-1 no-min-width px-2"
@@ -122,7 +143,7 @@
                 </button>
               </div>
               <button
-                *ngIf="!info.systemMessage"
+                *ngIf="!info?.systemMessage"
                 color="accent"
                 mat-flat-button
                 (click)="onSetSystemMessage()"
@@ -162,8 +183,11 @@
                 </button>
               </div>
               <div class="mt-2">
-                <form #couponForm="ngForm">
+                <form #couponForm="ngForm" class="align-items-center d-flex">
-                  <mat-form-field appearance="outline" class="mr-2">
+                  <mat-form-field
+                    appearance="outline"
+                    class="compact-with-outline mr-2 without-hint"
+                  >
                     <mat-select
                       name="duration"
                       [value]="couponDuration"
@@ -176,6 +200,7 @@
                     </mat-select>
                   </mat-form-field>
                   <button
+                    class="mt-1"
                     color="primary"
                     mat-flat-button
                     (click)="onAddCoupon()"

apps/client/src/app/components/admin-overview/admin-overview.module.ts

@@ -14,8 +14,8 @@ import { AdminOverviewComponent } from './admin-overview.component';
   declarations: [AdminOverviewComponent],
   exports: [],
   imports: [
-    FormsModule,
     CommonModule,
+    FormsModule,
     GfValueModule,
     MatButtonModule,
     MatCardModule,

apps/client/src/app/components/admin-users/admin-users.html

@@ -43,23 +43,23 @@
               <td class="mat-cell px-1 py-2 text-right">
                 {{ formatDistanceToNow(userItem.createdAt) }}
               </td>
-              <td class="mat-cell px-1 py-2">
+              <td class="mat-cell px-1 py-2 text-right">
                 <gf-value
-                  class="align-items-end"
+                  class="d-inline-block justify-content-end"
                   [locale]="user?.settings?.locale"
                   [value]="userItem.accountCount"
                 ></gf-value>
               </td>
-              <td class="mat-cell px-1 py-2">
+              <td class="mat-cell px-1 py-2 text-right">
                 <gf-value
-                  class="align-items-end"
+                  class="d-inline-block justify-content-end"
                   [locale]="user?.settings?.locale"
                   [value]="userItem.transactionCount"
                 ></gf-value>
               </td>
-              <td class="mat-cell px-1 py-2">
+              <td class="mat-cell px-1 py-2 text-right">
                 <gf-value
-                  class="align-items-end"
+                  class="d-inline-block justify-content-end"
                   [locale]="user?.settings?.locale"
                   [precision]="0"
                   [value]="userItem.engagement"

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

@@ -0,0 +1,48 @@
+<div class="mb-2 row">
+  <div class="col-md-6 col-xs-12 d-flex">
+    <div class="align-items-center d-flex flex-grow-1 h5 mb-0 text-truncate">
+      <span i18n>Performance</span>
+      <gf-premium-indicator
+        *ngIf="user?.subscription?.type === 'Basic'"
+        class="ml-1"
+      ></gf-premium-indicator>
+    </div>
+  </div>
+  <div class="col-md-6 col-xs-12 d-flex justify-content-end">
+    <mat-form-field
+      appearance="outline"
+      class="w-100 without-hint"
+      color="accent"
+      [hidden]="benchmarks?.length === 0"
+    >
+      <mat-label i18n>Compare with...</mat-label>
+      <mat-select
+        name="benchmark"
+        [value]="benchmark"
+        (selectionChange)="onChangeBenchmark($event.value)"
+      >
+        <mat-option [value]="null"></mat-option>
+        <mat-option
+          *ngFor="let symbolProfile of benchmarks"
+          [value]="symbolProfile.id"
+          >{{ symbolProfile.name }}</mat-option
+        >
+      </mat-select>
+    </mat-form-field>
+  </div>
+</div>
+<div class="chart-container">
+  <ngx-skeleton-loader
+    *ngIf="isLoading"
+    animation="pulse"
+    [theme]="{
+      height: '100%',
+      width: '100%'
+    }"
+  ></ngx-skeleton-loader>
+  <canvas
+    #chartCanvas
+    class="h-100"
+    [ngStyle]="{ display: isLoading ? 'none' : 'block' }"
+  ></canvas>
+</div>

apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.scss

@@ -0,0 +1,11 @@
+:host {
+  display: block;
+
+  .chart-container {
+    aspect-ratio: 16 / 9;
+
+    ngx-skeleton-loader {
+      height: 100%;
+    }
+  }
+}

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

@@ -0,0 +1,217 @@
+import 'chartjs-adapter-date-fns';
+
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  ViewChild
+} from '@angular/core';
+import {
+  getTooltipOptions,
+  getTooltipPositionerMapTop,
+  getVerticalHoverLinePlugin
+} from '@ghostfolio/common/chart-helper';
+import { primaryColorRgb, secondaryColorRgb } from '@ghostfolio/common/config';
+import {
+  getBackgroundColor,
+  getDateFormatString,
+  getTextColor,
+  parseDate
+} from '@ghostfolio/common/helper';
+import { LineChartItem, User } from '@ghostfolio/common/interfaces';
+import { ColorScheme } from '@ghostfolio/common/types';
+import { SymbolProfile } from '@prisma/client';
+import {
+  Chart,
+  LineController,
+  LineElement,
+  LinearScale,
+  PointElement,
+  TimeScale,
+  Tooltip
+} from 'chart.js';
+import annotationPlugin from 'chartjs-plugin-annotation';
+
+@Component({
+  selector: 'gf-benchmark-comparator',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './benchmark-comparator.component.html',
+  styleUrls: ['./benchmark-comparator.component.scss']
+})
+export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
+  @Input() benchmarkDataItems: LineChartItem[] = [];
+  @Input() benchmark: string;
+  @Input() benchmarks: Partial<SymbolProfile>[];
+  @Input() colorScheme: ColorScheme;
+  @Input() daysInMarket: number;
+  @Input() isLoading: boolean;
+  @Input() locale: string;
+  @Input() performanceDataItems: LineChartItem[];
+  @Input() user: User;
+
+  @Output() benchmarkChanged = new EventEmitter<string>();
+
+  @ViewChild('chartCanvas') chartCanvas;
+
+  public chart: Chart<any>;
+
+  public constructor() {
+    Chart.register(
+      annotationPlugin,
+      LinearScale,
+      LineController,
+      LineElement,
+      PointElement,
+      TimeScale,
+      Tooltip
+    );
+
+    Tooltip.positioners['top'] = (elements, position) =>
+      getTooltipPositionerMapTop(this.chart, position);
+  }
+
+  public ngOnChanges() {
+    if (this.performanceDataItems) {
+      this.initialize();
+    }
+  }
+
+  public onChangeBenchmark(symbolProfileId: string) {
+    this.benchmarkChanged.next(symbolProfileId);
+  }
+
+  public ngOnDestroy() {
+    this.chart?.destroy();
+  }
+
+  private initialize() {
+    const data = {
+      datasets: [
+        {
+          backgroundColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`,
+          borderColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`,
+          borderWidth: 2,
+          data: this.performanceDataItems.map(({ date, value }) => {
+            return { x: parseDate(date), y: value };
+          }),
+          label: $localize`Portfolio`
+        },
+        {
+          backgroundColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`,
+          borderColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`,
+          borderWidth: 2,
+          data: this.benchmarkDataItems.map(({ date, value }) => {
+            return { x: parseDate(date), y: value };
+          }),
+          label: $localize`Benchmark`
+        }
+      ]
+    };
+
+    if (this.chartCanvas) {
+      if (this.chart) {
+        this.chart.data = data;
+        this.chart.options.plugins.tooltip = <unknown>(
+          this.getTooltipPluginConfiguration()
+        );
+        this.chart.update();
+      } else {
+        this.chart = new Chart(this.chartCanvas.nativeElement, {
+          data,
+          options: {
+            animation: false,
+            elements: {
+              line: {
+                tension: 0
+              },
+              point: {
+                hoverBackgroundColor: getBackgroundColor(this.colorScheme),
+                hoverRadius: 2,
+                radius: 0
+              }
+            },
+            interaction: { intersect: false, mode: 'index' },
+            maintainAspectRatio: true,
+            plugins: <unknown>{
+              annotation: {
+                annotations: {
+                  yAxis: {
+                    borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
+                    borderWidth: 1,
+                    scaleID: 'y',
+                    type: 'line',
+                    value: 0
+                  }
+                }
+              },
+              legend: {
+                display: false
+              },
+              tooltip: this.getTooltipPluginConfiguration(),
+              verticalHoverLine: {
+                color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`
+              }
+            },
+            responsive: true,
+            scales: {
+              x: {
+                display: true,
+                grid: {
+                  borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
+                  borderWidth: 1,
+                  color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`,
+                  display: false
+                },
+                type: 'time',
+                time: {
+                  tooltipFormat: getDateFormatString(this.locale),
+                  unit: 'year'
+                }
+              },
+              y: {
+                display: true,
+                grid: {
+                  borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
+                  color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`,
+                  display: false,
+                  drawBorder: false
+                },
+                position: 'right',
+                ticks: {
+                  callback: (value: number) => {
+                    return `${value} %`;
+                  },
+                  display: true,
+                  mirror: true,
+                  z: 1
+                }
+              }
+            }
+          },
+          plugins: [
+            getVerticalHoverLinePlugin(this.chartCanvas, this.colorScheme)
+          ],
+          type: 'line'
+        });
+      }
+    }
+  }
+
+  private getTooltipPluginConfiguration() {
+    return {
+      ...getTooltipOptions({
+        colorScheme: this.colorScheme,
+        locale: this.locale,
+        unit: '%'
+      }),
+      mode: 'x',
+      position: <unknown>'top',
+      xAlign: 'center',
+      yAlign: 'bottom'
+    };
+  }
+}

apps/client/src/app/components/benchmark-comparator/benchmark-comparator.module.ts

@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatSelectModule } from '@angular/material/select';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+
+import { BenchmarkComparatorComponent } from './benchmark-comparator.component';
+
+@NgModule({
+  declarations: [BenchmarkComparatorComponent],
+  exports: [BenchmarkComparatorComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatSelectModule,
+    NgxSkeletonLoaderModule,
+    ReactiveFormsModule
+  ]
+})
+export class GfBenchmarkComparatorModule {}

apps/client/src/app/components/home-holdings/home-holdings.component.ts

@@ -5,10 +5,6 @@ import { PositionDetailDialog } from '@ghostfolio/client/components/position/pos
 import { ToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
-import {
-  RANGE,
-  SettingsStorageService
-} from '@ghostfolio/client/services/settings-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { Position, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
@@ -26,7 +22,6 @@ import { PositionDetailDialogParams } from '../position/position-detail-dialog/i
   templateUrl: './home-holdings.html'
 })
 export class HomeHoldingsComponent implements OnDestroy, OnInit {
-  public dateRange: DateRange;
   public dateRangeOptions = ToggleComponent.DEFAULT_DATE_RANGE_OPTIONS;
   public deviceType: string;
   public hasImpersonationId: boolean;
@@ -44,7 +39,6 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
     private impersonationStorageService: ImpersonationStorageService,
     private route: ActivatedRoute,
     private router: Router,
-    private settingsStorageService: SettingsStorageService,
     private userService: UserService
   ) {
     this.route.queryParams
@@ -73,7 +67,7 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
             permissions.createOrder
           );
 
-          this.changeDetectorRef.markForCheck();
+          this.update();
         }
       });
   }
@@ -88,18 +82,25 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
         this.hasImpersonationId = !!aId;
       });
 
-    this.dateRange =
-      this.user.settings.viewMode === 'ZEN'
-        ? 'max'
-        : <DateRange>this.settingsStorageService.getSetting(RANGE) ?? 'max';
-
     this.update();
   }
 
-  public onChangeDateRange(aDateRange: DateRange) {
+  public onChangeDateRange(dateRange: DateRange) {
-    this.dateRange = aDateRange;
+    this.dataService
-    this.settingsStorageService.setSetting(RANGE, this.dateRange);
+      .putUserSetting({ dateRange })
-    this.update();
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        this.userService.remove();
+
+        this.userService
+          .get()
+          .pipe(takeUntil(this.unsubscribeSubject))
+          .subscribe((user) => {
+            this.user = user;
+
+            this.changeDetectorRef.markForCheck();
+          });
+      });
   }
 
   public ngOnDestroy() {
@@ -126,6 +127,7 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
             dataSource,
             symbol,
             baseCurrency: this.user?.settings?.baseCurrency,
+            colorScheme: this.user?.settings?.colorScheme,
             deviceType: this.deviceType,
             hasImpersonationId: this.hasImpersonationId,
             hasPermissionToReportDataGlitch: hasPermission(
@@ -151,7 +153,7 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
     this.positions = undefined;
 
     this.dataService
-      .fetchPositions({ range: this.dateRange })
+      .fetchPositions({ range: this.user?.settings?.dateRange })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((response) => {
         this.positions = response.positions;

apps/client/src/app/components/home-holdings/home-holdings.html

@@ -1,7 +1,7 @@
 <div class="container justify-content-center p-3">
   <div *ngIf="user.settings.viewMode !== 'ZEN'" class="mb-3 text-center">
     <gf-toggle
-      [defaultValue]="dateRange"
+      [defaultValue]="user?.settings?.dateRange"
       [isLoading]="positions === undefined"
       [options]="dateRangeOptions"
       (change)="onChangeDateRange($event.value)"
@@ -17,7 +17,7 @@
             [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
             [locale]="user?.settings?.locale"
             [positions]="positions"
-            [range]="dateRange"
+            [range]="user?.settings?.dateRange"
           ></gf-positions>
         </mat-card-content>
       </mat-card>

apps/client/src/app/components/home-market/home-market.component.ts

@@ -24,7 +24,7 @@ export class HomeMarketComponent implements OnDestroy, OnInit {
   public fearLabel = $localize`Fear`;
   public greedLabel = $localize`Greed`;
   public hasPermissionToAccessFearAndGreedIndex: boolean;
-  public historicalData: HistoricalDataItem[];
+  public historicalDataItems: HistoricalDataItem[];
   public info: InfoItem;
   public isLoading = true;
   public readonly numberOfDays = 180;
@@ -67,7 +67,7 @@ export class HomeMarketComponent implements OnDestroy, OnInit {
         .pipe(takeUntil(this.unsubscribeSubject))
         .subscribe(({ historicalData, marketPrice }) => {
           this.fearAndGreedIndex = marketPrice;
-          this.historicalData = [
+          this.historicalDataItems = [
             ...historicalData,
             {
               date: resetHours(new Date()).toISOString(),

apps/client/src/app/components/home-market/home-market.html

@@ -10,7 +10,8 @@
         symbol="Fear & Greed Index"
         yMax="100"
         yMin="0"
-        [historicalDataItems]="historicalData"
+        [historicalDataItems]="historicalDataItems"
+        [isAnimated]="true"
         [locale]="user?.settings?.locale"
         [showXAxis]="true"
         [showYAxis]="true"

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

@@ -2,19 +2,15 @@ import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { ToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
-import {
-  RANGE,
-  SettingsStorageService
-} from '@ghostfolio/client/services/settings-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import {
+  LineChartItem,
   PortfolioPerformance,
   UniqueAsset,
   User
 } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { DateRange } from '@ghostfolio/common/types';
-import { LineChartItem } from '@ghostfolio/ui/line-chart/interfaces/line-chart.interface';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -25,7 +21,6 @@ import { takeUntil } from 'rxjs/operators';
   templateUrl: './home-overview.html'
 })
 export class HomeOverviewComponent implements OnDestroy, OnInit {
-  public dateRange: DateRange;
   public dateRangeOptions = ToggleComponent.DEFAULT_DATE_RANGE_OPTIONS;
   public deviceType: string;
   public errors: UniqueAsset[];
@@ -47,7 +42,6 @@ export class HomeOverviewComponent implements OnDestroy, OnInit {
     private dataService: DataService,
     private deviceService: DeviceDetectorService,
     private impersonationStorageService: ImpersonationStorageService,
-    private settingsStorageService: SettingsStorageService,
     private userService: UserService
   ) {
     this.userService.stateChanged
@@ -61,7 +55,7 @@ export class HomeOverviewComponent implements OnDestroy, OnInit {
             permissions.createOrder
           );
 
-          this.changeDetectorRef.markForCheck();
+          this.update();
         }
       });
   }
@@ -78,23 +72,28 @@ export class HomeOverviewComponent implements OnDestroy, OnInit {
         this.changeDetectorRef.markForCheck();
       });
 
-    this.dateRange =
-      this.user.settings.viewMode === 'ZEN'
-        ? 'max'
-        : <DateRange>this.settingsStorageService.getSetting(RANGE) ?? 'max';
-
     this.showDetails =
       !this.hasImpersonationId &&
       !this.user.settings.isRestrictedView &&
       this.user.settings.viewMode !== 'ZEN';
-
-    this.update();
   }
 
-  public onChangeDateRange(aDateRange: DateRange) {
+  public onChangeDateRange(dateRange: DateRange) {
-    this.dateRange = aDateRange;
+    this.dataService
-    this.settingsStorageService.setSetting(RANGE, this.dateRange);
+      .putUserSetting({ dateRange })
-    this.update();
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        this.userService.remove();
+
+        this.userService
+          .get()
+          .pipe(takeUntil(this.unsubscribeSubject))
+          .subscribe((user) => {
+            this.user = user;
+
+            this.changeDetectorRef.markForCheck();
+          });
+      });
   }
 
   public ngOnDestroy() {
@@ -103,36 +102,29 @@ export class HomeOverviewComponent implements OnDestroy, OnInit {
   }
 
   private update() {
+    this.historicalDataItems = null;
     this.isLoadingPerformance = true;
 
     this.dataService
-      .fetchChart({
+      .fetchPortfolioPerformance({
-        range: this.dateRange,
+        range: this.user?.settings?.dateRange
-        version: this.user?.settings?.isExperimentalFeatures ? 2 : 1
       })
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((chartData) => {
-        this.historicalDataItems = chartData.chart.map((chartDataItem) => {
-          return {
-            date: chartDataItem.date,
-            value: chartDataItem.value
-          };
-        });
-        this.isAllTimeHigh = chartData.isAllTimeHigh;
-        this.isAllTimeLow = chartData.isAllTimeLow;
-
-        this.changeDetectorRef.markForCheck();
-      });
-
-    this.dataService
-      .fetchPortfolioPerformance({ range: this.dateRange })
-      .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((response) => {
         this.errors = response.errors;
         this.hasError = response.hasErrors;
         this.performance = response.performance;
         this.isLoadingPerformance = false;
 
+        this.historicalDataItems = response.chart.map(
+          ({ date, netPerformanceInPercentage }) => {
+            return {
+              date,
+              value: netPerformanceInPercentage
+            };
+          }
+        );
+
         this.changeDetectorRef.markForCheck();
       });
 

apps/client/src/app/components/home-overview/home-overview.html

@@ -15,15 +15,17 @@
         <gf-line-chart
           class="position-absolute"
           symbol="Performance"
-          [historicalDataItems]="historicalDataItems"
+          unit="%"
+          [colorScheme]="user?.settings?.colorScheme"
           [hidden]="historicalDataItems?.length === 0"
+          [historicalDataItems]="historicalDataItems"
+          [isAnimated]="user?.settings?.dateRange === '1d' ? false : true"
           [locale]="user?.settings?.locale"
           [ngClass]="{ 'pr-3': deviceType === 'mobile' }"
           [showGradient]="true"
           [showLoader]="false"
           [showXAxis]="false"
           [showYAxis]="false"
-          [unit]="user?.settings?.isExperimentalFeatures ? '%' : user?.settings?.baseCurrency"
         ></gf-line-chart>
       </div>
     </div>
@@ -45,7 +47,7 @@
       ></gf-portfolio-performance>
       <div *ngIf="showDetails" class="text-center">
         <gf-toggle
-          [defaultValue]="dateRange"
+          [defaultValue]="user?.settings?.dateRange"
           [isLoading]="isLoadingPerformance"
           [options]="dateRangeOptions"
           (change)="onChangeDateRange($event.value)"

apps/client/src/app/components/home-summary/home-summary.component.ts

@@ -1,8 +1,18 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import {
+  MatSnackBar,
+  MatSnackBarRef,
+  TextOnlySnackBar
+} from '@angular/material/snack-bar';
+import { Router } from '@angular/router';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
-import { PortfolioSummary, User } from '@ghostfolio/common/interfaces';
+import {
+  InfoItem,
+  PortfolioSummary,
+  User
+} from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -14,8 +24,11 @@ import { takeUntil } from 'rxjs/operators';
 })
 export class HomeSummaryComponent implements OnDestroy, OnInit {
   public hasImpersonationId: boolean;
+  public hasPermissionForSubscription: boolean;
   public hasPermissionToUpdateUserSettings: boolean;
+  public info: InfoItem;
   public isLoading = true;
+  public snackBarRef: MatSnackBarRef<TextOnlySnackBar>;
   public summary: PortfolioSummary;
   public user: User;
 
@@ -25,8 +38,17 @@ export class HomeSummaryComponent implements OnDestroy, OnInit {
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
     private impersonationStorageService: ImpersonationStorageService,
+    private router: Router,
+    private snackBar: MatSnackBar,
     private userService: UserService
   ) {
+    this.info = this.dataService.fetchInfo();
+
+    this.hasPermissionForSubscription = hasPermission(
+      this.info?.globalPermissions,
+      permissions.enableSubscription
+    );
+
     this.userService.stateChanged
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((state) => {
@@ -38,7 +60,7 @@ export class HomeSummaryComponent implements OnDestroy, OnInit {
             permissions.updateUserSettings
           );
 
-          this.changeDetectorRef.markForCheck();
+          this.update();
         }
       });
   }
@@ -50,8 +72,6 @@ export class HomeSummaryComponent implements OnDestroy, OnInit {
       .subscribe((aId) => {
         this.hasImpersonationId = !!aId;
       });
-
-    this.update();
   }
 
   public onChangeEmergencyFund(emergencyFund: number) {
@@ -59,7 +79,16 @@ export class HomeSummaryComponent implements OnDestroy, OnInit {
       .putUserSetting({ emergencyFund })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {
-        this.update();
+        this.userService.remove();
+
+        this.userService
+          .get()
+          .pipe(takeUntil(this.unsubscribeSubject))
+          .subscribe((user) => {
+            this.user = user;
+
+            this.changeDetectorRef.markForCheck();
+          });
       });
   }
 
@@ -72,12 +101,30 @@ export class HomeSummaryComponent implements OnDestroy, OnInit {
     this.isLoading = true;
 
     this.dataService
-      .fetchPortfolioSummary()
+      .fetchPortfolioDetails({})
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((response) => {
+      .subscribe(({ summary }) => {
-        this.summary = response;
+        this.summary = summary;
         this.isLoading = false;
 
+        if (!this.summary) {
+          this.snackBarRef = this.snackBar.open(
+            $localize`This feature requires a subscription.`,
+            this.hasPermissionForSubscription
+              ? $localize`Upgrade Plan`
+              : undefined,
+            { duration: 6000 }
+          );
+
+          this.snackBarRef.afterDismissed().subscribe(() => {
+            this.snackBarRef = undefined;
+          });
+
+          this.snackBarRef.onAction().subscribe(() => {
+            this.router.navigate(['/pricing']);
+          });
+        }
+
         this.changeDetectorRef.markForCheck();
       });
 

apps/client/src/app/components/investment-chart/investment-chart.component.ts

@@ -15,14 +15,16 @@ import {
 } from '@ghostfolio/common/chart-helper';
 import { primaryColorRgb, secondaryColorRgb } from '@ghostfolio/common/config';
 import {
+  DATE_FORMAT,
   getBackgroundColor,
   getDateFormatString,
   getTextColor,
   parseDate,
   transformTickToAbbreviation
 } from '@ghostfolio/common/helper';
+import { LineChartItem } from '@ghostfolio/common/interfaces';
 import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface';
-import { GroupBy } from '@ghostfolio/common/types';
+import { ColorScheme, DateRange, GroupBy } from '@ghostfolio/common/types';
 import {
   BarController,
   BarElement,
@@ -35,7 +37,7 @@ import {
   Tooltip
 } from 'chart.js';
 import annotationPlugin from 'chartjs-plugin-annotation';
-import { addDays, isAfter, parseISO, subDays } from 'date-fns';
+import { addDays, format, isAfter, parseISO, subDays } from 'date-fns';
 
 @Component({
   selector: 'gf-investment-chart',
@@ -44,19 +46,24 @@ import { addDays, isAfter, parseISO, subDays } from 'date-fns';
   styleUrls: ['./investment-chart.component.scss']
 })
 export class InvestmentChartComponent implements OnChanges, OnDestroy {
+  @Input() benchmarkDataItems: InvestmentItem[] = [];
+  @Input() colorScheme: ColorScheme;
   @Input() currency: string;
   @Input() daysInMarket: number;
   @Input() groupBy: GroupBy;
-  @Input() investments: InvestmentItem[];
+  @Input() historicalDataItems: LineChartItem[] = [];
   @Input() isInPercent = false;
   @Input() locale: string;
+  @Input() range: DateRange = 'max';
   @Input() savingsRate = 0;
 
   @ViewChild('chartCanvas') chartCanvas;
 
-  public chart: Chart;
+  public chart: Chart<any>;
   public isLoading = true;
 
+  private data: InvestmentItem[];
+
   public constructor() {
     Chart.register(
       annotationPlugin,
@@ -75,7 +82,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
   }
 
   public ngOnChanges() {
-    if (this.investments) {
+    if (this.benchmarkDataItems && this.historicalDataItems) {
       this.initialize();
     }
   }
@@ -87,51 +94,72 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
   private initialize() {
     this.isLoading = true;
 
-    if (!this.groupBy && this.investments?.length > 0) {
+    // Create a clone
-      // Extend chart by 5% of days in market (before)
+    this.data = this.benchmarkDataItems.map((item) => Object.assign({}, item));
-      const firstItem = this.investments[0];
+
-      this.investments.unshift({
+    if (!this.groupBy && this.data?.length > 0) {
-        ...firstItem,
+      if (this.range === 'max') {
-        date: subDays(
+        // Extend chart by 5% of days in market (before)
-          parseISO(firstItem.date),
+        const firstItem = this.data[0];
-          this.daysInMarket * 0.05 || 90
+        this.data.unshift({
-        ).toISOString(),
+          ...firstItem,
-        investment: 0
+          date: format(
-      });
+            subDays(parseISO(firstItem.date), this.daysInMarket * 0.05 || 90),
+            DATE_FORMAT
+          ),
+          investment: 0
+        });
+      }
 
       // Extend chart by 5% of days in market (after)
-      const lastItem = this.investments[this.investments.length - 1];
+      const lastItem = this.data[this.data.length - 1];
-      this.investments.push({
+      this.data.push({
         ...lastItem,
-        date: addDays(
+        date: format(
-          parseDate(lastItem.date),
+          addDays(parseDate(lastItem.date), this.daysInMarket * 0.05 || 90),
-          this.daysInMarket * 0.05 || 90
+          DATE_FORMAT
-        ).toISOString()
+        )
       });
     }
 
     const data = {
-      labels: this.investments.map((investmentItem) => {
+      labels: this.historicalDataItems.map(({ date }) => {
-        return investmentItem.date;
+        return parseDate(date);
       }),
       datasets: [
         {
-          backgroundColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`,
+          backgroundColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`,
-          borderColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`,
+          borderColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`,
-          borderWidth: this.groupBy ? 0 : 2,
+          borderWidth: this.groupBy ? 0 : 1,
-          data: this.investments.map((position) => {
+          data: this.data.map(({ date, investment }) => {
-            return position.investment;
+            return {
+              x: parseDate(date),
+              y: this.isInPercent ? investment * 100 : investment
+            };
           }),
           label: $localize`Deposit`,
           segment: {
             borderColor: (context: unknown) =>
               this.isInFuture(
                 context,
-                `rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b}, 0.67)`
+                `rgba(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b}, 0.67)`
               ),
             borderDash: (context: unknown) => this.isInFuture(context, [2, 2])
           },
           stepped: true
+        },
+        {
+          borderColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`,
+          borderWidth: 2,
+          data: this.historicalDataItems.map(({ date, value }) => {
+            return {
+              x: parseDate(date),
+              y: this.isInPercent ? value * 100 : value
+            };
+          }),
+          fill: false,
+          label: $localize`Total Amount`,
+          pointRadius: 0
         }
       ]
     };
@@ -153,7 +181,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
                 tension: 0
               },
               point: {
-                hoverBackgroundColor: getBackgroundColor(),
+                hoverBackgroundColor: getBackgroundColor(this.colorScheme),
                 hoverRadius: 2,
                 radius: 0
               }
@@ -165,13 +193,13 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
                 annotations: {
                   savingsRate: this.savingsRate
                     ? {
-                        borderColor: `rgba(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b}, 0.75)`,
+                        borderColor: `rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b}, 0.75)`,
                         borderWidth: 1,
                         label: {
-                          backgroundColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`,
+                          backgroundColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`,
                           borderRadius: 2,
                           color: 'white',
-                          content: 'Savings Rate',
+                          content: $localize`Savings Rate`,
                           display: true,
                           font: { size: '10px', weight: 'normal' },
                           padding: {
@@ -186,7 +214,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
                       }
                     : undefined,
                   yAxis: {
-                    borderColor: `rgba(${getTextColor()}, 0.1)`,
+                    borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
                     borderWidth: 1,
                     scaleID: 'y',
                     type: 'line',
@@ -199,7 +227,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
               },
               tooltip: this.getTooltipPluginConfiguration(),
               verticalHoverLine: {
-                color: `rgba(${getTextColor()}, 0.1)`
+                color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`
               }
             },
             responsive: true,
@@ -207,9 +235,9 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
               x: {
                 display: true,
                 grid: {
-                  borderColor: `rgba(${getTextColor()}, 0.1)`,
+                  borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
                   borderWidth: this.groupBy ? 0 : 1,
-                  color: `rgba(${getTextColor()}, 0.8)`,
+                  color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`,
                   display: false
                 },
                 type: 'time',
@@ -221,8 +249,8 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
               y: {
                 display: !this.isInPercent,
                 grid: {
-                  borderColor: `rgba(${getTextColor()}, 0.1)`,
+                  borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
-                  color: `rgba(${getTextColor()}, 0.8)`,
+                  color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`,
                   display: false,
                   drawBorder: false
                 },
@@ -238,7 +266,9 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
               }
             }
           },
-          plugins: [getVerticalHoverLinePlugin(this.chartCanvas)],
+          plugins: [
+            getVerticalHoverLinePlugin(this.chartCanvas, this.colorScheme)
+          ],
           type: this.groupBy ? 'bar' : 'line'
         });
       }
@@ -250,8 +280,10 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
   private getTooltipPluginConfiguration() {
     return {
       ...getTooltipOptions({
+        colorScheme: this.colorScheme,
+        currency: this.isInPercent ? undefined : this.currency,
         locale: this.isInPercent ? undefined : this.locale,
-        unit: this.isInPercent ? undefined : this.currency
+        unit: this.isInPercent ? '%' : undefined
       }),
       mode: 'index',
       position: <unknown>'top',

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

@@ -172,6 +172,17 @@
       ></gf-value>
     </div>
   </div>
+  <div class="row px-3 py-1">
+    <div class="d-flex flex-grow-1" i18n>Excluded from Analysis</div>
+    <div class="d-flex justify-content-end">
+      <gf-value
+        class="justify-content-end"
+        [currency]="baseCurrency"
+        [locale]="locale"
+        [value]="isLoading ? undefined : summary?.excludedAccountsAndActivities"
+      ></gf-value>
+    </div>
+  </div>
   <div class="row">
     <div class="col"><hr /></div>
   </div>

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

@@ -1,7 +1,9 @@
+import { ColorScheme } from '@ghostfolio/common/types';
 import { DataSource } from '@prisma/client';
 
 export interface PositionDetailDialogParams {
   baseCurrency: string;
+  colorScheme: ColorScheme;
   dataSource: DataSource;
   deviceType: string;
   hasImpersonationId: boolean;

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

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

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

@@ -20,16 +20,18 @@
     </div>
 
     <gf-line-chart
-      class="mb-4"
       benchmarkLabel="Average Unit Price"
+      class="mb-4"
       [benchmarkDataItems]="benchmarkDataItems"
+      [colorScheme]="data.colorScheme"
+      [currency]="SymbolProfile?.currency"
       [historicalDataItems]="historicalDataItems"
+      [isAnimated]="true"
       [locale]="data.locale"
       [showGradient]="true"
       [showXAxis]="true"
       [showYAxis]="true"
       [symbol]="data.symbol"
-      [unit]="SymbolProfile?.currency"
     ></gf-line-chart>
 
     <div class="row">
@@ -187,6 +189,7 @@
             <div class="h5" i18n>Sectors</div>
             <gf-portfolio-proportion-chart
               [baseCurrency]="user?.settings?.baseCurrency"
+              [colorScheme]="data.colorScheme"
               [isInPercent]="true"
               [keys]="['name']"
               [locale]="user?.settings?.locale"
@@ -198,6 +201,7 @@
             <div class="h5" i18n>Countries</div>
             <gf-portfolio-proportion-chart
               [baseCurrency]="user?.settings?.baseCurrency"
+              [colorScheme]="data.colorScheme"
               [isInPercent]="true"
               [keys]="['name']"
               [locale]="user?.settings?.locale"

apps/client/src/app/core/auth.guard.ts

@@ -5,9 +5,9 @@ import {
   Router,
   RouterStateSnapshot
 } from '@angular/router';
+import { DataService } from '@ghostfolio/client/services/data.service';
 import { SettingsStorageService } from '@ghostfolio/client/services/settings-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
-import { ViewMode } from '@prisma/client';
 import { EMPTY } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 
@@ -31,6 +31,7 @@ export class AuthGuard implements CanActivate {
   ];
 
   constructor(
+    private dataService: DataService,
     private router: Router,
     private settingsStorageService: SettingsStorageService,
     private userService: UserService
@@ -75,18 +76,27 @@ export class AuthGuard implements CanActivate {
           const userLanguage = user?.settings?.language;
 
           if (userLanguage && document.documentElement.lang !== userLanguage) {
-            window.location.href = `../${userLanguage}`;
+            this.dataService
-            resolve(false);
+              .putUserSetting({ language: document.documentElement.lang })
+              .subscribe(() => {
+                this.userService.remove();
+
+                setTimeout(() => {
+                  window.location.reload();
+                }, 300);
+              });
+
+            resolve(true);
             return;
           } else if (
             state.url.startsWith('/home') &&
-            user.settings.viewMode === ViewMode.ZEN
+            user.settings.viewMode === 'ZEN'
           ) {
             this.router.navigate(['/zen']);
             resolve(false);
             return;
           } else if (state.url.startsWith('/start')) {
-            if (user.settings.viewMode === ViewMode.ZEN) {
+            if (user.settings.viewMode === 'ZEN') {
               this.router.navigate(['/zen']);
             } else {
               this.router.navigate(['/home']);
@@ -96,7 +106,7 @@ export class AuthGuard implements CanActivate {
             return;
           } else if (
             state.url.startsWith('/zen') &&
-            user.settings.viewMode === ViewMode.DEFAULT
+            user.settings.viewMode === 'DEFAULT'
           ) {
             this.router.navigate(['/home']);
             resolve(false);

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

@@ -108,7 +108,6 @@
           <div class="row">
             <div class="col-xs-12 col-md-4 my-2">
               <gf-value
-                i18n
                 size="large"
                 subLabel="(Last 24 hours)"
                 [value]="statistics?.activeUsers1d ?? '-'"
@@ -117,7 +116,6 @@
             </div>
             <div class="col-xs-12 col-md-4 my-2">
               <gf-value
-                i18n
                 size="large"
                 subLabel="(Last 30 days)"
                 [value]="statistics?.newUsers30d ?? '-'"
@@ -126,7 +124,6 @@
             </div>
             <div class="col-xs-12 col-md-4 my-2">
               <gf-value
-                i18n
                 size="large"
                 subLabel="(Last 30 days)"
                 [value]="statistics?.activeUsers30d ?? '-'"
@@ -139,7 +136,6 @@
                 href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"
               >
                 <gf-value
-                  i18n
                   size="large"
                   [value]="statistics?.slackCommunityUsers ?? '-'"
                   >Users in Slack community</gf-value
@@ -152,7 +148,6 @@
                 href="https://github.com/ghostfolio/ghostfolio/graphs/contributors"
               >
                 <gf-value
-                  i18n
                   size="large"
                   [value]="statistics?.gitHubContributors ?? '-'"
                   >Contributors on GitHub</gf-value
@@ -165,7 +160,6 @@
                 href="https://github.com/ghostfolio/ghostfolio/stargazers"
               >
                 <gf-value
-                  i18n
                   size="large"
                   [value]="statistics?.gitHubStargazers ?? '-'"
                   >Stars on GitHub</gf-value

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

@@ -42,6 +42,7 @@ export class AccountPageComponent implements OnDestroy, OnInit {
   signInWithFingerprintElement: MatSlideToggle;
 
   public accesses: Access[];
+  public appearancePlaceholder = $localize`Auto`;
   public baseCurrency: string;
   public coupon: number;
   public couponId: string;
@@ -54,7 +55,7 @@ export class AccountPageComponent implements OnDestroy, OnInit {
   public hasPermissionToUpdateViewMode: boolean;
   public hasPermissionToUpdateUserSettings: boolean;
   public language = document.documentElement.lang;
-  public locales = ['de', 'de-CH', 'en-GB', 'en-US'];
+  public locales = ['de', 'de-CH', 'en-GB', 'en-US', 'es', 'it', 'nl'];
   public price: number;
   public priceId: string;
   public snackBarRef: MatSnackBarRef<TextOnlySnackBar>;
@@ -175,29 +176,6 @@ export class AccountPageComponent implements OnDestroy, OnInit {
       });
   }
 
-  public onChangeUserSettings(aKey: string, aValue: string) {
-    const settings = { ...this.user.settings, [aKey]: aValue };
-
-    this.dataService
-      .putUserSettings({
-        baseCurrency: settings?.baseCurrency,
-        viewMode: settings?.viewMode
-      })
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(() => {
-        this.userService.remove();
-
-        this.userService
-          .get()
-          .pipe(takeUntil(this.unsubscribeSubject))
-          .subscribe((user) => {
-            this.user = user;
-
-            this.changeDetectorRef.markForCheck();
-          });
-      });
-  }
-
   public onCheckout() {
     this.dataService
       .createCheckoutSession({ couponId: this.couponId, priceId: this.priceId })
@@ -267,7 +245,7 @@ export class AccountPageComponent implements OnDestroy, OnInit {
         )
         .subscribe(() => {
           this.snackBarRef = this.snackBar.open(
-            '✅' + $localize`Coupon code has been redeemed`,
+            '✅ ' + $localize`Coupon code has been redeemed`,
             $localize`Reload`,
             {
               duration: 3000

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

@@ -94,12 +94,15 @@
                   <ng-container i18n>Base Currency</ng-container>
                 </div>
                 <div class="pl-1 w-50">
-                  <mat-form-field appearance="outline" class="w-100">
+                  <mat-form-field
+                    appearance="outline"
+                    class="compact-with-outline w-100 without-hint"
+                  >
                     <mat-select
                       name="baseCurrency"
                       [disabled]="!hasPermissionToUpdateUserSettings"
                       [value]="user.settings.baseCurrency"
-                      (selectionChange)="onChangeUserSettings('baseCurrency', $event.value)"
+                      (selectionChange)="onChangeUserSetting('baseCurrency', $event.value)"
                     >
                       <mat-option
                         *ngFor="let currency of currencies"
@@ -116,7 +119,10 @@
                   <div class="hint-text text-muted" i18n>Beta</div>
                 </div>
                 <div class="pl-1 w-50">
-                  <mat-form-field appearance="outline" class="w-100">
+                  <mat-form-field
+                    appearance="outline"
+                    class="compact-with-outline w-100 without-hint"
+                  >
                     <mat-select
                       name="language"
                       [disabled]="!hasPermissionToUpdateUserSettings"
@@ -126,6 +132,9 @@
                       <mat-option [value]="null"></mat-option>
                       <mat-option value="de">Deutsch</mat-option>
                       <mat-option value="en">English</mat-option>
+                      <mat-option value="es">Español</mat-option>
+                      <mat-option value="it">Italiano</mat-option>
+                      <mat-option value="nl">Nederlands</mat-option>
                     </mat-select>
                   </mat-form-field>
                 </div>
@@ -138,7 +147,10 @@
                   </div>
                 </div>
                 <div class="pl-1 w-50">
-                  <mat-form-field appearance="outline" class="w-100">
+                  <mat-form-field
+                    appearance="outline"
+                    class="compact-with-outline w-100 without-hint"
+                  >
                     <mat-select
                       name="locale"
                       [disabled]="!hasPermissionToUpdateUserSettings"
@@ -155,18 +167,21 @@
                   </mat-form-field>
                 </div>
               </div>
-              <div class="d-flex">
+              <div class="d-flex mb-2">
                 <div class="align-items-center d-flex pr-1 pt-1 w-50">
                   <ng-container i18n>View Mode</ng-container>
                 </div>
                 <div class="pl-1 w-50">
                   <div class="align-items-center d-flex overflow-hidden">
-                    <mat-form-field appearance="outline" class="w-100">
+                    <mat-form-field
+                      appearance="outline"
+                      class="compact-with-outline w-100 without-hint"
+                    >
                       <mat-select
                         name="viewMode"
                         [disabled]="!hasPermissionToUpdateViewMode"
                         [value]="user.settings.viewMode"
-                        (selectionChange)="onChangeUserSettings('viewMode', $event.value)"
+                        (selectionChange)="onChangeUserSetting('viewMode', $event.value)"
                       >
                         <mat-option value="DEFAULT">Default</mat-option>
                         <mat-option value="ZEN">Zen</mat-option>
@@ -175,6 +190,30 @@
                   </div>
                 </div>
               </div>
+              <div class="d-flex">
+                <div class="align-items-center d-flex pr-1 pt-1 w-50">
+                  <ng-container i18n>Appearance</ng-container>
+                </div>
+                <div class="pl-1 w-50">
+                  <mat-form-field
+                    appearance="outline"
+                    class="compact-with-outline w-100 without-hint"
+                  >
+                    <mat-select
+                      class="with-placeholder-as-option"
+                      name="colorScheme"
+                      [disabled]="!hasPermissionToUpdateUserSettings"
+                      [placeholder]="appearancePlaceholder"
+                      [value]="user?.settings?.colorScheme"
+                      (selectionChange)="onChangeUserSetting('colorScheme', $event.value)"
+                    >
+                      <mat-option i18n [value]="null">Auto</mat-option>
+                      <mat-option i18n value="LIGHT">Light</mat-option>
+                      <mat-option i18n value="DARK">Dark</mat-option>
+                    </mat-select>
+                  </mat-form-field>
+                </div>
+              </div>
             </form>
           </div>
           <div class="align-items-center d-flex mt-4 py-1">
@@ -228,8 +267,8 @@
       class="align-items-center d-flex justify-content-center"
       color="primary"
       mat-fab
-      [routerLink]="[]"
       [queryParams]="{ createDialog: true }"
+      [routerLink]="[]"
     >
       <ion-icon name="add-outline" size="large"></ion-icon>
     </a>

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

@@ -59,8 +59,8 @@ export class AccountsPageComponent implements OnDestroy, OnInit {
           this.openCreateAccountDialog();
         } else if (params['editDialog']) {
           if (this.accounts) {
-            const account = this.accounts.find((account) => {
+            const account = this.accounts.find(({ id }) => {
-              return account.id === params['accountId'];
+              return id === params['accountId'];
             });
 
             this.openUpdateAccountDialog(account);
@@ -155,6 +155,7 @@ export class AccountsPageComponent implements OnDestroy, OnInit {
     balance,
     currency,
     id,
+    isExcluded,
     name,
     platformId
   }: AccountModel): void {
@@ -165,6 +166,7 @@ export class AccountsPageComponent implements OnDestroy, OnInit {
           balance,
           currency,
           id,
+          isExcluded,
           name,
           platformId
         }
@@ -231,6 +233,7 @@ export class AccountsPageComponent implements OnDestroy, OnInit {
           accountType: AccountType.SECURITIES,
           balance: 0,
           currency: this.user?.settings?.baseCurrency,
+          isExcluded: false,
           name: null,
           platformId: null
         }

apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.html

@@ -50,6 +50,14 @@
         </mat-select>
       </mat-form-field>
     </div>
+    <div class="mb-3 px-2">
+      <mat-checkbox
+        color="primary"
+        name="isExcluded"
+        [(ngModel)]="data.account.isExcluded"
+        >Exclude from Analysis</mat-checkbox
+      >
+    </div>
     <div *ngIf="data.account.id">
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Account ID</mat-label>

apps/client/src/app/pages/accounts/create-or-update-account-dialog/create-or-update-account-dialog.module.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -15,6 +16,7 @@ import { CreateOrUpdateAccountDialog } from './create-or-update-account-dialog.c
     CommonModule,
     FormsModule,
     MatButtonModule,
+    MatCheckboxModule,
     MatDialogModule,
     MatFormFieldModule,
     MatInputModule,

apps/client/src/app/pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.html

@@ -119,7 +119,7 @@
             Anlagestrategie? Ich freue mich über alle, die Ghostfolio
             ausprobieren. Bist du überzeugt vom Potential der Software? Jede
             Unterstützung für Ghostfolio ist willkommen. Sei es mit einer
-            <a href="https://ghostfol.io/pricing">Ghostfolio Premium</a>
+            <a [routerLink]="['/pricing']">Ghostfolio Premium</a>
             Subscription zur Finanzierung des Hostings, einem positiven Rating
             im
             <a

apps/client/src/app/pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.html

@@ -115,7 +115,7 @@
             strategy? I'm happy for everyone who tries Ghostfolio. Are you
             convinced of its potential? Any support for Ghostfolio is welcome.
             Be it with a
-            <a href="https://ghostfol.io/pricing">Ghostfolio Premium</a>
+            <a [routerLink]="['/pricing']">Ghostfolio Premium</a>
             Subscription to finance the hosting, a positive rating in the
             <a
               href="https://play.google.com/store/apps/details?id=ch.dotsilver.ghostfolio.twa"

apps/client/src/app/pages/blog/2022/08/500-stars-on-github/500-stars-on-github-page.html

@@ -74,7 +74,7 @@
             <a [routerLink]="['/markets']">economic situation</a> at this time,
             the goal set at the beginning of the year to build a sustainable
             business and reach break-even with the SaaS offering (<a
-              [routerLink]="['/markets']"
+              [routerLink]="['/pricing']"
               >Ghostfolio Premium</a
             >) has been achieved. We will continue to leverage the revenue to
             further improve the fully managed cloud offering for our paying

apps/client/src/app/pages/blog/2022/10/hacktoberfest-2022/hacktoberfest-2022-page-routing.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
+
+import { Hacktoberfest2022PageComponent } from './hacktoberfest-2022-page.component';
+
+const routes: Routes = [
+  {
+    canActivate: [AuthGuard],
+    component: Hacktoberfest2022PageComponent,
+    path: '',
+    title: 'Hacktoberfest 2022'
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class Hacktoberfest2022RoutingModule {}

apps/client/src/app/pages/blog/2022/10/hacktoberfest-2022/hacktoberfest-2022-page.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  host: { class: 'page' },
+  selector: 'gf-hacktoberfest-2022-page',
+  styleUrls: ['./hacktoberfest-2022-page.scss'],
+  templateUrl: './hacktoberfest-2022-page.html'
+})
+export class Hacktoberfest2022PageComponent {}