Release 1.183.0 (#1189)

* Add asset sub class filter

* Update changelog

.gitignore

@@ -24,15 +24,16 @@
 
 # misc
 /.angular/cache
+.env.prod
 /.sass-cache
 /connect.lock
 /coverage
 /dist
 /libpeerconnection.log
 npm-debug.log
-yarn-error.log
 testem.log
 /typings
+yarn-error.log
 
 # System Files
 .DS_Store

.travis.yml

@@ -2,7 +2,7 @@ language: node_js
 git:
   depth: false
 node_js:
-  - 14
+  - 16
 
 services:
   - docker

CHANGELOG.md

@@ -5,6 +5,290 @@ 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.183.0 - 24.08.2022
+
+### Added
+
+- Added a filter by asset sub class for the asset profiles in the admin control
+
+### Changed
+
+- Improved the language localization for German (`de`)
+
+## 1.182.0 - 23.08.2022
+
+### Changed
+
+- Improved the language localization for German (`de`)
+- Extended and made the columns of the asset profiles sortable in the admin control
+- Moved the asset profile details in the admin control panel to a dialog
+
+## 1.181.2 - 21.08.2022
+
+### Added
+
+- Added a language selector to the account page
+- Added support for translated labels in the value component
+
+### Changed
+
+- Integrated the commands `database:setup` and `database:migrate` into the container start
+
+### Fixed
+
+- Fixed a division by zero error in the benchmarks calculation
+
+### Todo
+
+- Apply manual data migration (`yarn database:migrate`) is not needed anymore
+
+## 1.180.1 - 18.08.2022
+
+### Added
+
+- Set up `ng-extract-i18n-merge` to improve the i18n extraction and merge workflow
+- Set up language localization for German (`de`)
+- Resolved the feature graphic of the blog post
+
+### Changed
+
+- Tagged template literal strings in components for localization with `$localize`
+
+### Fixed
+
+- Fixed the license component in the about page
+- Fixed the links to the blog posts
+
+## 1.179.5 - 15.08.2022
+
+### Added
+
+- Set up i18n support
+- Added a blog post: _500 Stars on GitHub_
+
+### Changed
+
+- Reduced the maximum width of the performance chart on the home page
+
+## 1.178.0 - 09.08.2022
+
+### Added
+
+- Added `url` to the symbol profile overrides model for manual adjustments
+- Added default values for `countries` and `sectors` of the symbol profile overrides model
+
+### Changed
+
+- Simplified the initialization of the exchange rate service
+- Improved the orders query for `assetClass` with symbol profile overrides
+- Improved the styling of the benchmarks in the markets overview
+
+### Todo
+
+- Apply data migration (`yarn database:migrate`)
+
+## 1.177.0 - 04.08.2022
+
+### Added
+
+- Added `GHOSTFOLIO` as a default to `DATA_SOURCES`
+- Added the `AGPLv3` logo to the landing page
+
+### Changed
+
+- Refactored the initialization of the exchange rate service
+- Upgraded `angular` from version `14.0.2` to `14.1.0`
+- Upgraded `nestjs` from version `8.4.7` to `9.0.7`
+- Upgraded `Nx` from version `14.3.5` to `14.5.1`
+- Upgraded `prisma` from version `3.15.2` to `4.1.1`
+
+### Fixed
+
+- Handled database connection errors (do not exit process)
+
+## 1.176.2 - 31.07.2022
+
+### Added
+
+- Added page titles
+
+### Changed
+
+- Improved the performance of data provider requests by introducing a maximum number of symbols per request (chunk size)
+- Changed the log level settings
+- Refactored the access of the environment variables in the bootstrap function (api)
+- Upgraded `Node.js` from version `14` to `16` (`Dockerfile`)
+
+### Todo
+
+- Upgrade to `Node.js` 16+
+
+## 1.175.0 - 29.07.2022
+
+### Added
+
+- Set up a Frequently Asked Questions (FAQ) page
+- Added the savings rate to the investment timeline grouped by month
+
+### Fixed
+
+- Added the symbols to the activities in the account detail dialog
+
+## 1.174.0 - 27.07.2022
+
+### Added
+
+- Support a note for activities
+
+### Todo
+
+- Apply data migration (`yarn database:migrate`)
+
+## 1.173.0 - 23.07.2022
+
+### Fixed
+
+- Fixed an issue with the currency inconsistency in the _Yahoo Finance_ service (convert from `USX` to `USD`)
+
+## 1.172.0 - 23.07.2022
+
+### Added
+
+- Added a blog post: _Ghostfolio meets Internet Identity_
+
+## 1.171.0 - 22.07.2022
+
+### Added
+
+- Added _Internet Identity_ as a new social login provider
+
+### Changed
+
+- Improved the empty state of the
+  - _Analysis_ section
+  - _Holdings_ section
+  - performance chart on the home page
+
+### Fixed
+
+- Fixed the distorted tooltip in the performance chart on the home page
+- Fixed a calculation issue of the current month in the investment timeline grouped by month
+
+### Todo
+
+- Apply data migration (`yarn database:migrate`)
+
+## 1.170.0 - 19.07.2022
+
+### Added
+
+- Added support for the tags in the create or edit transaction dialog
+- Added support for the cryptocurrency _TerraUSD_ (`UST-USD`)
+
+### Changed
+
+- Removed the alias from the user interface as a preparation to remove it from the `User` database schema
+- Removed the activities import limit for users with a subscription
+
+### Todo
+
+- Rename the environment variable from `MAX_ORDERS_TO_IMPORT` to `MAX_ACTIVITIES_TO_IMPORT`
+
+## 1.169.0 - 14.07.2022
+
+### Added
+
+- Added support for the cryptocurrency _Songbird_ (`SGB1-USD`)
+- Added support for the cryptocurrency _Terra 2.0_ (`LUNA2-USD`)
+- Added a blog post
+
+### Changed
+
+- Refreshed the cryptocurrencies list to support more coins by default
+- Upgraded `date-fns` from version `2.22.1` to `2.28.0`
+
+## 1.168.0 - 10.07.2022
+
+### Added
+
+- Extended the investment timeline grouped by month
+
+### Changed
+
+- Handled an occasional currency pair inconsistency in the _Yahoo Finance_ service (`GBP=X` instead of `USDGBP=X`)
+
+### Fixed
+
+- Fixed the content height of the account detail dialog
+
+## 1.167.0 - 07.07.2022
+
+### Added
+
+- Added _Markets_ to the public pages
+
+### Changed
+
+- Improved the _Create Account_ link in the _Live Demo_
+- Upgraded `ngx-markdown` from version `13.0.0` to `14.0.1`
+
+### Fixed
+
+- Fixed an issue in the _Holdings_ section for users without a subscription
+
+## 1.166.0 - 30.06.2022
+
+### Added
+
+- Added an account detail dialog
+
+### Changed
+
+- Improved the label of the (symbol) search
+- Refactored the demo account as a route (`/demo`)
+- Upgraded `nestjs` from version `8.2.3` to `8.4.7`
+- Upgraded `prisma` from version `3.14.0` to `3.15.2`
+- Upgraded `yahoo-finance2` from version `2.3.2` to `2.3.3`
+- Upgraded `zone.js` from version `0.11.4` to `0.11.6`
+
+## 1.165.0 - 25.06.2022
+
+### Added
+
+- Added an icon and name column to the positions table
+- Added a reusable premium indicator component
+
+### Changed
+
+- Moved the positions table to a dedicated section (_Holdings_)
+- Changed the data gathering by symbol endpoint to delete data first
+
+## 1.164.0 - 23.06.2022
+
+### Added
+
+- Added the positions table including performance to the public page
+
+## 1.163.0 - 22.06.2022
+
+### Changed
+
+- Improved the onboarding for iOS
+
+## 1.162.0 - 18.06.2022
+
+### Added
+
+- Added a _Privacy Policy_ page
+
+### Changed
+
+- Simplified the header
+
+### Fixed
+
+- Fixed an issue with the currency inconsistency in the _Yahoo Finance_ service (convert from `ILA` to `ILS`)
+
 ## 1.161.1 - 16.06.2022
 
 ### Added

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:14-alpine as builder
+FROM node:16-alpine as builder
 
 # Build application and add additional files
 
@@ -12,7 +12,7 @@ COPY ./package.json package.json
 COPY ./yarn.lock yarn.lock
 COPY ./prisma/schema.prisma prisma/schema.prisma
 
-RUN apk add --no-cache python3 g++ make openssl
+RUN apk add --no-cache python3 g++ make openssl git
 RUN yarn install
 
 # See https://github.com/nrwl/nx/issues/6586 for further details
@@ -45,8 +45,8 @@ COPY package.json /ghostfolio/dist/apps/api
 RUN yarn database:generate-typings
 
 # Image to run, copy everything needed from builder
-FROM node:14-alpine
+FROM node:16-alpine
 COPY --from=builder /ghostfolio/dist/apps /ghostfolio/apps
 WORKDIR /ghostfolio/apps/api
 EXPOSE 3333
-CMD [ "node", "main" ]
+CMD [  "yarn", "start:prod" ]

README.md

@@ -12,7 +12,7 @@
     <strong>Open Source Wealth Management Software</strong>
   </p>
   <p>
-    <a href="https://ghostfol.io"><strong>Live Demo</strong></a> | <a href="https://ghostfol.io/pricing"><strong>Ghostfolio Premium</strong></a> | <a href="https://ghostfol.io/blog"><strong>Blog</strong></a> | <a href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"><strong>Slack</strong></a> | <a href="https://twitter.com/ghostfolio_"><strong>Twitter</strong></a>
+    <a href="https://ghostfol.io"><strong>Ghostfol.io</strong></a> | <a href="https://ghostfol.io/demo"><strong>Live Demo</strong></a> | <a href="https://ghostfol.io/pricing"><strong>Ghostfolio Premium</strong></a> | <a href="https://ghostfol.io/faq"><strong>FAQ</strong></a> | <a href="https://ghostfol.io/blog"><strong>Blog</strong></a> | <a href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"><strong>Slack</strong></a> | <a href="https://twitter.com/ghostfolio_"><strong>Twitter</strong></a>
   </p>
   <p>
     <a href="#contributing">
@@ -81,6 +81,23 @@ The frontend is built with [Angular](https://angular.io) and uses [Angular Mater
 
 ## Self-hosting
 
+### Supported Environment Variables
+
+| Name                | Default Value | Description                                                                                                                         |
+| ------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| `ACCESS_TOKEN_SALT` |               | A random string used as salt for access tokens                                                                                      |
+| `BASE_CURRENCY`     | `USD`         | The base currency of the Ghostfolio application. Caution: This cannot be changed later!                                             |
+| `DATABASE_URL`      |               | The database connection URL, e.g. `postgresql://${POSTGRES_USER}:${POSTGRES_PASSWORD}@localhost:5432/${POSTGRES_DB}?sslmode=prefer` |
+| `HOST`              | `0.0.0.0`     | The host where the Ghostfolio application will run on                                                                               |
+| `JWT_SECRET_KEY`    |               | A random string used for _JSON Web Tokens_ (JWT)                                                                                    |
+| `PORT`              | `3333`        | The port where the Ghostfolio application will run on                                                                               |
+| `POSTGRES_DB`       |               | The name of the _PostgreSQL_ database                                                                                               |
+| `POSTGRES_PASSWORD` |               | The password of the _PostgreSQL_ database                                                                                           |
+| `POSTGRES_USER`     |               | The user of the _PostgreSQL_ database                                                                                               |
+| `REDIS_HOST`        | `localhost`   | The host where _Redis_ is running                                                                                                   |
+| `REDIS_PASSWORD`    |               | The password of _Redis_                                                                                                             |
+| `REDIS_PORT`        | `6379`        | The port where _Redis_ is running                                                                                                   |
+
 ### Run with Docker Compose
 
 #### Prerequisites
@@ -97,14 +114,6 @@ Run the following command to start the Docker images from [Docker Hub](https://h
 docker-compose --env-file ./.env -f docker/docker-compose.yml up -d
 ```
 
-##### Setup Database
-
-Run the following command to setup the database once Ghostfolio is running:
-
-```bash
-docker-compose --env-file ./.env -f docker/docker-compose.yml exec ghostfolio yarn database:setup
-```
-
 #### b. Build and run environment
 
 Run the following commands to build and start the Docker images:
@@ -114,14 +123,6 @@ docker-compose --env-file ./.env -f docker/docker-compose.build.yml build
 docker-compose --env-file ./.env -f docker/docker-compose.build.yml up -d
 ```
 
-##### Setup Database
-
-Run the following command to setup the database once Ghostfolio is running:
-
-```bash
-docker-compose --env-file ./.env -f docker/docker-compose.build.yml exec ghostfolio yarn database:setup
-```
-
 #### Fetch Historical Data
 
 Open http://localhost:3333 in your browser and accomplish these steps:
@@ -133,10 +134,10 @@ Open http://localhost:3333 in your browser and accomplish these steps:
 #### Upgrade Version
 
 1. Increase the version of the `ghostfolio/ghostfolio` Docker image in `docker/docker-compose.yml`
-1. Run the following command to start the new Docker image: `docker-compose --env-file ./.env -f docker/docker-compose.yml up -d`
-1. Then, run the following command to keep your database schema in sync: `docker-compose --env-file ./.env -f docker/docker-compose.yml exec ghostfolio yarn database:migrate`
+1. Run the following command to start the new Docker image: `docker-compose --env-file ./.env -f docker/docker-compose.yml up -d`  
+   At each start, the container will automatically apply the database schema migrations if needed.
 
-### Run with _Unraid_ (unofficial)
+### Run with _Unraid_ (Community)
 
 Please follow the instructions of the Ghostfolio [Unraid Community App](https://unraid.net/community/apps?q=ghostfolio).
 
@@ -145,7 +146,7 @@ Please follow the instructions of the Ghostfolio [Unraid Community App](https://
 ### Prerequisites
 
 - [Docker](https://www.docker.com/products/docker-desktop)
-- [Node.js](https://nodejs.org/en/download) (version 14+)
+- [Node.js](https://nodejs.org/en/download) (version 16+)
 - [Yarn](https://yarnpkg.com/en/docs/install)
 - A local copy of this Git repository (clone)
 
@@ -186,7 +187,7 @@ yarn database:push
 
 Run `yarn test`
 
-## Public API (experimental)
+## Public API
 
 ### Import Activities
 

angular.json

@@ -77,45 +77,49 @@
             "polyfills": "apps/client/src/polyfills.ts",
             "tsConfig": "apps/client/tsconfig.app.json",
             "assets": [
-              "apps/client/src/assets",
               {
                 "glob": "assetlinks.json",
                 "input": "apps/client/src/assets",
-                "output": "./.well-known"
+                "output": "./../.well-known"
               },
               {
                 "glob": "CHANGELOG.md",
                 "input": "",
-                "output": "./assets"
+                "output": "./../assets"
               },
               {
                 "glob": "LICENSE",
                 "input": "",
-                "output": "./assets"
+                "output": "./../assets"
               },
               {
                 "glob": "robots.txt",
                 "input": "apps/client/src/assets",
-                "output": "./"
+                "output": "./../"
               },
               {
                 "glob": "sitemap.xml",
                 "input": "apps/client/src/assets",
-                "output": "./"
+                "output": "./../"
               },
               {
                 "glob": "**/*",
                 "input": "node_modules/ionicons/dist/ionicons",
-                "output": "./ionicons"
+                "output": "./../ionicons"
               },
               {
                 "glob": "**/*.js",
                 "input": "node_modules/ionicons/dist/",
-                "output": "./"
+                "output": "./../"
+              },
+              {
+                "glob": "**/*",
+                "input": "apps/client/src/assets",
+                "output": "./../assets/"
               }
             ],
             "styles": ["apps/client/src/styles.scss"],
-            "scripts": ["node_modules/marked/lib/marked.js"],
+            "scripts": ["node_modules/marked/marked.min.js"],
             "vendorChunk": true,
             "extractLicenses": false,
             "buildOptimizer": false,
@@ -124,6 +128,14 @@
             "namedChunks": true
           },
           "configurations": {
+            "development-de": {
+              "baseHref": "/de/",
+              "localize": ["de"]
+            },
+            "development-en": {
+              "baseHref": "/en/",
+              "localize": ["en"]
+            },
             "production": {
               "fileReplacements": [
                 {
@@ -162,15 +174,24 @@
             "proxyConfig": "apps/client/proxy.conf.json"
           },
           "configurations": {
+            "development-de": {
+              "browserTarget": "client:build:development-de"
+            },
+            "development-en": {
+              "browserTarget": "client:build:development-en"
+            },
             "production": {
               "browserTarget": "client:build:production"
             }
           }
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "builder": "ng-extract-i18n-merge:ng-extract-i18n-merge",
           "options": {
-            "browserTarget": "client:build"
+            "browserTarget": "client:build",
+            "includeContext": true,
+            "outputPath": "src/locales",
+            "targetFiles": ["messages.de.xlf"]
           }
         },
         "lint": {
@@ -188,6 +209,15 @@
           "outputs": ["coverage/apps/client"]
         }
       },
+      "i18n": {
+        "locales": {
+          "de": {
+            "baseHref": "/de/",
+            "translation": "apps/client/src/locales/messages.de.xlf"
+          }
+        },
+        "sourceLocale": "en"
+      },
       "tags": []
     },
     "client-e2e": {

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

@@ -7,7 +7,10 @@ import {
 import { ImpersonationService } from '@ghostfolio/api/services/impersonation.service';
 import { Accounts } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
-import type { RequestWithUser } from '@ghostfolio/common/types';
+import type {
+  AccountWithValue,
+  RequestWithUser
+} from '@ghostfolio/common/types';
 import {
   Body,
   Controller,
@@ -123,13 +126,45 @@ export class AccountController {
 
   @Get(':id')
   @UseGuards(AuthGuard('jwt'))
-  public async getAccountById(@Param('id') id: string): Promise<AccountModel> {
-    return this.accountService.account({
-      id_userId: {
-        id,
-        userId: this.request.user.id
-      }
-    });
+  public async getAccountById(
+    @Headers('impersonation-id') impersonationId,
+    @Param('id') id: string
+  ): Promise<AccountWithValue> {
+    const impersonationUserId =
+      await this.impersonationService.validateImpersonationId(
+        impersonationId,
+        this.request.user.id
+      );
+
+    let accountsWithAggregations =
+      await this.portfolioService.getAccountsWithAggregations(
+        impersonationUserId || this.request.user.id,
+        [{ id, type: 'ACCOUNT' }]
+      );
+
+    if (
+      impersonationUserId ||
+      this.userService.isRestrictedView(this.request.user)
+    ) {
+      accountsWithAggregations = {
+        ...nullifyValuesInObject(accountsWithAggregations, [
+          'totalBalanceInBaseCurrency',
+          'totalValueInBaseCurrency'
+        ]),
+        accounts: nullifyValuesInObjects(accountsWithAggregations.accounts, [
+          'balance',
+          'balanceInBaseCurrency',
+          'convertedBalance',
+          'fee',
+          'quantity',
+          'unitPrice',
+          'value',
+          'valueInBaseCurrency'
+        ])
+      };
+    }
+
+    return accountsWithAggregations.accounts[0];
   }
 
   @Post()

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

@@ -8,7 +8,8 @@ import {
 import {
   AdminData,
   AdminMarketData,
-  AdminMarketDataDetails
+  AdminMarketDataDetails,
+  Filter
 } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import type { RequestWithUser } from '@ghostfolio/common/types';
@@ -22,6 +23,7 @@ import {
   Param,
   Post,
   Put,
+  Query,
   UseGuards
 } from '@nestjs/common';
 import { REQUEST } from '@nestjs/core';
@@ -226,7 +228,9 @@ export class AdminController {
 
   @Get('market-data')
   @UseGuards(AuthGuard('jwt'))
-  public async getMarketData(): Promise<AdminMarketData> {
+  public async getMarketData(
+    @Query('assetSubClasses') filterByAssetSubClasses?: string
+  ): Promise<AdminMarketData> {
     if (
       !hasPermission(
         this.request.user.permissions,
@@ -239,7 +243,18 @@ export class AdminController {
       );
     }
 
-    return this.adminService.getMarketData();
+    const assetSubClasses = filterByAssetSubClasses?.split(',') ?? [];
+
+    const filters: Filter[] = [
+      ...assetSubClasses.map((assetSubClass) => {
+        return <Filter>{
+          id: assetSubClass,
+          type: 'ASSET_SUB_CLASS'
+        };
+      })
+    ];
+
+    return this.adminService.getMarketData(filters);
   }
 
   @Get('market-data/:dataSource/:symbol')

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

@@ -1,6 +1,5 @@
 import { SubscriptionService } from '@ghostfolio/api/app/subscription/subscription.service';
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
-import { DataGatheringService } from '@ghostfolio/api/services/data-gathering.service';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 import { MarketDataService } from '@ghostfolio/api/services/market-data.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
@@ -12,11 +11,13 @@ import {
   AdminMarketData,
   AdminMarketDataDetails,
   AdminMarketDataItem,
+  Filter,
   UniqueAsset
 } from '@ghostfolio/common/interfaces';
 import { Injectable } from '@nestjs/common';
-import { Property } from '@prisma/client';
+import { AssetSubClass, Prisma, Property } from '@prisma/client';
 import { differenceInDays } from 'date-fns';
+import { groupBy } from 'lodash';
 
 @Injectable()
 export class AdminService {
@@ -24,7 +25,6 @@ export class AdminService {
 
   public constructor(
     private readonly configurationService: ConfigurationService,
-    private readonly dataGatheringService: DataGatheringService,
     private readonly exchangeRateDataService: ExchangeRateDataService,
     private readonly marketDataService: MarketDataService,
     private readonly prismaService: PrismaService,
@@ -65,14 +65,27 @@ export class AdminService {
     };
   }
 
-  public async getMarketData(): Promise<AdminMarketData> {
+  public async getMarketData(filters?: Filter[]): Promise<AdminMarketData> {
+    const where: Prisma.SymbolProfileWhereInput = {};
+
+    const { ASSET_SUB_CLASS: filtersByAssetSubClass } = groupBy(
+      filters,
+      (filter) => {
+        return filter.type;
+      }
+    );
+
     const marketData = await this.prismaService.marketData.groupBy({
       _count: true,
       by: ['dataSource', 'symbol']
     });
 
-    const currencyPairsToGather: AdminMarketDataItem[] =
-      this.exchangeRateDataService
+    let currencyPairsToGather: AdminMarketDataItem[] = [];
+
+    if (filtersByAssetSubClass) {
+      where.assetSubClass = AssetSubClass[filtersByAssetSubClass[0].id];
+    } else {
+      currencyPairsToGather = this.exchangeRateDataService
         .getCurrencyPairs()
         .map(({ dataSource, symbol }) => {
           const marketDataItemCount =
@@ -86,17 +99,24 @@ export class AdminService {
           return {
             dataSource,
             marketDataItemCount,
-            symbol
+            symbol,
+            countriesCount: 0,
+            sectorsCount: 0
           };
         });
+    }
 
     const symbolProfilesToGather: AdminMarketDataItem[] = (
       await this.prismaService.symbolProfile.findMany({
+        where,
         orderBy: [{ symbol: 'asc' }],
         select: {
           _count: {
             select: { Order: true }
           },
+          assetClass: true,
+          assetSubClass: true,
+          countries: true,
           dataSource: true,
           Order: {
             orderBy: [{ date: 'asc' }],
@@ -104,10 +124,14 @@ export class AdminService {
             take: 1
           },
           scraperConfiguration: true,
+          sectors: true,
           symbol: true
         }
       })
     ).map((symbolProfile) => {
+      const countriesCount = symbolProfile.countries
+        ? Object.keys(symbolProfile.countries).length
+        : 0;
       const marketDataItemCount =
         marketData.find((marketDataItem) => {
           return (
@@ -115,10 +139,17 @@ export class AdminService {
             marketDataItem.symbol === symbolProfile.symbol
           );
         })?._count ?? 0;
+      const sectorsCount = symbolProfile.sectors
+        ? Object.keys(symbolProfile.sectors).length
+        : 0;
 
       return {
+        countriesCount,
         marketDataItemCount,
+        sectorsCount,
         activityCount: symbolProfile._count.Order,
+        assetClass: symbolProfile.assetClass,
+        assetSubClass: symbolProfile.assetSubClass,
         dataSource: symbolProfile.dataSource,
         date: symbolProfile.Order?.[0]?.date,
         symbol: symbolProfile.symbol
@@ -174,7 +205,6 @@ export class AdminService {
         _count: {
           select: { Account: true, Order: true }
         },
-        alias: true,
         Analytics: {
           select: {
             activityCount: true,
@@ -194,7 +224,7 @@ export class AdminService {
     });
 
     return usersWithAnalytics.map(
-      ({ _count, alias, Analytics, createdAt, id, Subscription }) => {
+      ({ _count, Analytics, createdAt, id, Subscription }) => {
         const daysSinceRegistration =
           differenceInDays(new Date(), createdAt) + 1;
         const engagement = Analytics.activityCount / daysSinceRegistration;
@@ -206,7 +236,6 @@ export class AdminService {
           : undefined;
 
         return {
-          alias,
           createdAt,
           engagement,
           id,

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

@@ -1,6 +1,17 @@
+import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 import { Controller } from '@nestjs/common';
 
 @Controller()
 export class AppController {
-  public constructor() {}
+  public constructor(
+    private readonly exchangeRateDataService: ExchangeRateDataService
+  ) {
+    this.initialize();
+  }
+
+  private async initialize() {
+    try {
+      await this.exchangeRateDataService.initialize();
+    } catch {}
+  }
 }

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

@@ -10,7 +10,7 @@ import { ExchangeRateDataModule } from '@ghostfolio/api/services/exchange-rate-d
 import { PrismaModule } from '@ghostfolio/api/services/prisma.module';
 import { TwitterBotModule } from '@ghostfolio/api/services/twitter-bot/twitter-bot.module';
 import { BullModule } from '@nestjs/bull';
-import { Module } from '@nestjs/common';
+import { MiddlewareConsumer, Module, RequestMethod } from '@nestjs/common';
 import { ConfigModule } from '@nestjs/config';
 import { ScheduleModule } from '@nestjs/schedule';
 import { ServeStaticModule } from '@nestjs/serve-static';
@@ -23,6 +23,7 @@ import { AuthModule } from './auth/auth.module';
 import { BenchmarkModule } from './benchmark/benchmark.module';
 import { CacheModule } from './cache/cache.module';
 import { ExportModule } from './export/export.module';
+import { FrontendMiddleware } from './frontend.middleware';
 import { ImportModule } from './import/import.module';
 import { InfoModule } from './info/info.module';
 import { OrderModule } from './order/order.module';
@@ -82,4 +83,10 @@ import { UserModule } from './user/user.module';
   controllers: [AppController],
   providers: [CronService]
 })
-export class AppModule {}
+export class AppModule {
+  configure(consumer: MiddlewareConsumer) {
+    consumer
+      .apply(FrontendMiddleware)
+      .forRoutes({ path: '*', method: RequestMethod.ALL });
+  }
+}

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

@@ -1,5 +1,7 @@
 import { WebAuthService } from '@ghostfolio/api/app/auth/web-auth.service';
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
+import { DEFAULT_LANGUAGE_CODE } from '@ghostfolio/common/config';
+import { OAuthResponse } from '@ghostfolio/common/interfaces';
 import {
   Body,
   Controller,
@@ -31,7 +33,9 @@ export class AuthController {
   ) {}
 
   @Get('anonymous/:accessToken')
-  public async accessTokenLogin(@Param('accessToken') accessToken: string) {
+  public async accessTokenLogin(
+    @Param('accessToken') accessToken: string
+  ): Promise<OAuthResponse> {
     try {
       const authToken = await this.authService.validateAnonymousLogin(
         accessToken
@@ -59,9 +63,34 @@ export class AuthController {
     const jwt: string = req.user.jwt;
 
     if (jwt) {
-      res.redirect(`${this.configurationService.get('ROOT_URL')}/auth/${jwt}`);
+      res.redirect(
+        `${this.configurationService.get(
+          'ROOT_URL'
+        )}/${DEFAULT_LANGUAGE_CODE}/auth/${jwt}`
+      );
     } else {
-      res.redirect(`${this.configurationService.get('ROOT_URL')}/auth`);
+      res.redirect(
+        `${this.configurationService.get(
+          'ROOT_URL'
+        )}/${DEFAULT_LANGUAGE_CODE}/auth`
+      );
+    }
+  }
+
+  @Get('internet-identity/:principalId')
+  public async internetIdentityLogin(
+    @Param('principalId') principalId: string
+  ): Promise<OAuthResponse> {
+    try {
+      const authToken = await this.authService.validateInternetIdentityLogin(
+        principalId
+      );
+      return { authToken };
+    } catch {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.FORBIDDEN),
+        StatusCodes.FORBIDDEN
+      );
     }
   }
 

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

@@ -2,6 +2,7 @@ import { UserService } from '@ghostfolio/api/app/user/user.service';
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { Injectable, InternalServerErrorException } from '@nestjs/common';
 import { JwtService } from '@nestjs/jwt';
+import { Provider } from '@prisma/client';
 
 import { ValidateOAuthLoginParams } from './interfaces/interfaces';
 
@@ -13,7 +14,7 @@ export class AuthService {
     private readonly userService: UserService
   ) {}
 
-  public async validateAnonymousLogin(accessToken: string) {
+  public async validateAnonymousLogin(accessToken: string): Promise<string> {
     return new Promise(async (resolve, reject) => {
       try {
         const hashedAccessToken = this.userService.createAccessToken(
@@ -26,7 +27,7 @@ export class AuthService {
         });
 
         if (user) {
-          const jwt: string = this.jwtService.sign({
+          const jwt = this.jwtService.sign({
             id: user.id
           });
 
@@ -40,6 +41,33 @@ export class AuthService {
     });
   }
 
+  public async validateInternetIdentityLogin(principalId: string) {
+    try {
+      const provider: Provider = 'INTERNET_IDENTITY';
+
+      let [user] = await this.userService.users({
+        where: { provider, thirdPartyId: principalId }
+      });
+
+      if (!user) {
+        // Create new user if not found
+        user = await this.userService.createUser({
+          provider,
+          thirdPartyId: principalId
+        });
+      }
+
+      return this.jwtService.sign({
+        id: user.id
+      });
+    } catch (error) {
+      throw new InternalServerErrorException(
+        'validateInternetIdentityLogin',
+        error.message
+      );
+    }
+  }
+
   public async validateOAuthLogin({
     provider,
     thirdPartyId
@@ -57,13 +85,14 @@ export class AuthService {
         });
       }
 
-      const jwt: string = this.jwtService.sign({
+      return this.jwtService.sign({
         id: user.id
       });
-
-      return jwt;
-    } catch (err) {
-      throw new InternalServerErrorException('validateOAuthLogin', err.message);
+    } catch (error) {
+      throw new InternalServerErrorException(
+        'validateOAuthLogin',
+        error.message
+      );
     }
   }
 }

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

@@ -3,8 +3,7 @@ import { TransformDataSourceInResponseInterceptor } from '@ghostfolio/api/interc
 import { PropertyService } from '@ghostfolio/api/services/property/property.service';
 import { PROPERTY_BENCHMARKS } from '@ghostfolio/common/config';
 import { BenchmarkResponse, UniqueAsset } from '@ghostfolio/common/interfaces';
-import { Controller, Get, UseGuards, UseInterceptors } from '@nestjs/common';
-import { AuthGuard } from '@nestjs/passport';
+import { Controller, Get, UseInterceptors } from '@nestjs/common';
 
 import { BenchmarkService } from './benchmark.service';
 
@@ -16,7 +15,6 @@ export class BenchmarkController {
   ) {}
 
   @Get()
-  @UseGuards(AuthGuard('jwt'))
   @UseInterceptors(TransformDataSourceInRequestInterceptor)
   @UseInterceptors(TransformDataSourceInResponseInterceptor)
   public async getBenchmark(): Promise<BenchmarkResponse> {

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

@@ -48,9 +48,13 @@ export class BenchmarkService {
     benchmarks = allTimeHighs.map((allTimeHigh, index) => {
       const { marketPrice } = quotes[benchmarkAssets[index].symbol];
 
-      const performancePercentFromAllTimeHigh = new Big(marketPrice)
-        .div(allTimeHigh)
-        .minus(1);
+      let performancePercentFromAllTimeHigh = new Big(0);
+
+      if (allTimeHigh) {
+        performancePercentFromAllTimeHigh = new Big(marketPrice)
+          .div(allTimeHigh)
+          .minus(1);
+      }
 
       return {
         marketCondition: this.getMarketCondition(

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

@@ -18,6 +18,7 @@ export class ExportService {
       orderBy: { date: 'desc' },
       select: {
         accountId: true,
+        comment: true,
         date: true,
         fee: true,
         id: true,
@@ -40,6 +41,7 @@ export class ExportService {
       activities: activities.map(
         ({
           accountId,
+          comment,
           date,
           fee,
           id,
@@ -50,6 +52,7 @@ export class ExportService {
         }) => {
           return {
             accountId,
+            comment,
             fee,
             id,
             quantity,

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

@@ -0,0 +1,81 @@
+import * as fs from 'fs';
+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 { NextFunction, Request, Response } from 'express';
+
+@Injectable()
+export class FrontendMiddleware implements NestMiddleware {
+  public indexHtmlDe = fs.readFileSync(
+    this.getPathOfIndexHtmlFile('de'),
+    'utf8'
+  );
+  public indexHtmlEn = fs.readFileSync(
+    this.getPathOfIndexHtmlFile(DEFAULT_LANGUAGE_CODE),
+    'utf8'
+  );
+
+  public constructor(
+    private readonly configurationService: ConfigurationService
+  ) {}
+
+  public use(req: Request, res: Response, next: NextFunction) {
+    let featureGraphicPath = 'assets/cover.png';
+
+    if (
+      req.path === '/en/blog/2022/08/500-stars-on-github' ||
+      req.path === '/en/blog/2022/08/500-stars-on-github/'
+    ) {
+      featureGraphicPath = 'assets/images/blog/500-stars-on-github.jpg';
+    }
+
+    if (req.path.startsWith('/api/') || this.isFileRequest(req.url)) {
+      // Skip
+      next();
+    } else if (req.path === '/de' || req.path.startsWith('/de/')) {
+      res.send(
+        this.interpolate(this.indexHtmlDe, {
+          featureGraphicPath,
+          languageCode: 'de',
+          path: req.path,
+          rootUrl: this.configurationService.get('ROOT_URL')
+        })
+      );
+    } else {
+      res.send(
+        this.interpolate(this.indexHtmlEn, {
+          featureGraphicPath,
+          languageCode: DEFAULT_LANGUAGE_CODE,
+          path: req.path,
+          rootUrl: this.configurationService.get('ROOT_URL')
+        })
+      );
+    }
+  }
+
+  private getPathOfIndexHtmlFile(aLocale: string) {
+    return path.join(__dirname, '..', 'client', aLocale, 'index.html');
+  }
+
+  private interpolate(template: string, context: any) {
+    return template.replace(/[$]{([^}]+)}/g, (_, objectPath) => {
+      const properties = objectPath.split('.');
+      return properties.reduce(
+        (previous, current) => previous?.[current],
+        context
+      );
+    });
+  }
+
+  private isFileRequest(filename: string) {
+    if (filename === '/assets/LICENSE') {
+      return true;
+    } else if (filename.includes('auth/ey')) {
+      return false;
+    }
+
+    return filename.split('.').pop() !== filename;
+  }
+}

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

@@ -34,8 +34,20 @@ export class ImportController {
       );
     }
 
+    let maxActivitiesToImport = this.configurationService.get(
+      'MAX_ACTIVITIES_TO_IMPORT'
+    );
+
+    if (
+      this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION') &&
+      this.request.user.subscription.type === 'Premium'
+    ) {
+      maxActivitiesToImport = Number.MAX_SAFE_INTEGER;
+    }
+
     try {
       return await this.importService.import({
+        maxActivitiesToImport,
         activities: importData.activities,
         userId: this.request.user.id
       });

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

@@ -17,9 +17,11 @@ export class ImportService {
 
   public async import({
     activities,
+    maxActivitiesToImport,
     userId
   }: {
     activities: Partial<CreateOrderDto>[];
+    maxActivitiesToImport: number;
     userId: string;
   }): Promise<void> {
     for (const activity of activities) {
@@ -32,7 +34,11 @@ export class ImportService {
       }
     }
 
-    await this.validateActivities({ activities, userId });
+    await this.validateActivities({
+      activities,
+      maxActivitiesToImport,
+      userId
+    });
 
     const accountIds = (await this.accountService.getAccounts(userId)).map(
       (account) => {
@@ -42,6 +48,7 @@ export class ImportService {
 
     for (const {
       accountId,
+      comment,
       currency,
       dataSource,
       date,
@@ -52,6 +59,7 @@ export class ImportService {
       unitPrice
     } of activities) {
       await this.orderService.createOrder({
+        comment,
         fee,
         quantity,
         type,
@@ -81,19 +89,15 @@ export class ImportService {
 
   private async validateActivities({
     activities,
+    maxActivitiesToImport,
     userId
   }: {
     activities: Partial<CreateOrderDto>[];
+    maxActivitiesToImport: number;
     userId: string;
   }) {
-    if (
-      activities?.length > this.configurationService.get('MAX_ORDERS_TO_IMPORT')
-    ) {
-      throw new Error(
-        `Too many activities (${this.configurationService.get(
-          'MAX_ORDERS_TO_IMPORT'
-        )} at most)`
-      );
+    if (activities?.length > maxActivitiesToImport) {
+      throw new Error(`Too many activities (${maxActivitiesToImport} at most)`);
     }
 
     const existingActivities = await this.orderService.orders({

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

@@ -63,6 +63,8 @@ export class InfoService {
       } else {
         info.fearAndGreedDataSource = ghostfolioFearAndGreedIndexDataSource;
       }
+
+      globalPermissions.push(permissions.enableFearAndGreedIndex);
     }
 
     if (this.configurationService.get('ENABLE_FEATURE_IMPORT')) {

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

@@ -1,30 +1,46 @@
-import { AssetClass, AssetSubClass, DataSource, Type } from '@prisma/client';
 import {
+  AssetClass,
+  AssetSubClass,
+  DataSource,
+  Tag,
+  Type
+} from '@prisma/client';
+import { Transform, TransformFnParams } from 'class-transformer';
+import {
+  IsArray,
   IsEnum,
   IsISO8601,
   IsNumber,
   IsOptional,
   IsString
 } from 'class-validator';
+import { isString } from 'lodash';
 
 export class CreateOrderDto {
-  @IsString()
   @IsOptional()
+  @IsString()
   accountId?: string;
 
-  @IsEnum(AssetClass, { each: true })
   @IsOptional()
+  @IsEnum(AssetClass, { each: true })
   assetClass?: AssetClass;
 
-  @IsEnum(AssetSubClass, { each: true })
   @IsOptional()
+  @IsEnum(AssetSubClass, { each: true })
   assetSubClass?: AssetSubClass;
 
+  @IsOptional()
+  @IsString()
+  @Transform(({ value }: TransformFnParams) =>
+    isString(value) ? value.trim() : value
+  )
+  comment?: string;
+
   @IsString()
   currency: string;
 
-  @IsEnum(DataSource, { each: true })
   @IsOptional()
+  @IsEnum(DataSource, { each: true })
   dataSource?: DataSource;
 
   @IsISO8601()
@@ -39,6 +55,10 @@ export class CreateOrderDto {
   @IsString()
   symbol: string;
 
+  @IsArray()
+  @IsOptional()
+  tags?: Tag[];
+
   @IsEnum(Type, { each: true })
   type: Type;
 

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

@@ -4,6 +4,7 @@ import { RedactValuesInResponseInterceptor } from '@ghostfolio/api/interceptors/
 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 { 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 {
@@ -17,6 +18,7 @@ import {
   Param,
   Post,
   Put,
+  Query,
   UseGuards,
   UseInterceptors
 } from '@nestjs/common';
@@ -66,8 +68,36 @@ export class OrderController {
   @UseInterceptors(RedactValuesInResponseInterceptor)
   @UseInterceptors(TransformDataSourceInResponseInterceptor)
   public async getAllOrders(
-    @Headers('impersonation-id') impersonationId
+    @Headers('impersonation-id') impersonationId,
+    @Query('accounts') filterByAccounts?: string,
+    @Query('assetClasses') filterByAssetClasses?: string,
+    @Query('tags') filterByTags?: string
   ): Promise<Activities> {
+    const accountIds = filterByAccounts?.split(',') ?? [];
+    const assetClasses = filterByAssetClasses?.split(',') ?? [];
+    const tagIds = filterByTags?.split(',') ?? [];
+
+    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,
@@ -76,6 +106,7 @@ export class OrderController {
     const userCurrency = this.request.user.Settings.currency;
 
     let activities = await this.orderService.getOrders({
+      filters,
       userCurrency,
       includeDrafts: true,
       userId: impersonationUserId || this.request.user.id

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

@@ -16,6 +16,7 @@ import {
   DataSource,
   Order,
   Prisma,
+  Tag,
   Type as TypeOfOrder
 } from '@prisma/client';
 import Big from 'big.js';
@@ -71,6 +72,7 @@ export class OrderService {
       currency?: string;
       dataSource?: DataSource;
       symbol?: string;
+      tags?: Tag[];
       userId: string;
     }
   ): Promise<Order> {
@@ -80,6 +82,8 @@ export class OrderService {
       return account.isDefault === true;
     });
 
+    const tags = data.tags ?? [];
+
     let Account = {
       connect: {
         id_userId: {
@@ -139,9 +143,15 @@ export class OrderService {
     delete data.accountId;
     delete data.assetClass;
     delete data.assetSubClass;
+
+    if (!data.comment) {
+      delete data.comment;
+    }
+
     delete data.currency;
     delete data.dataSource;
     delete data.symbol;
+    delete data.tags;
     delete data.userId;
 
     const orderData: Prisma.OrderCreateInput = data;
@@ -150,7 +160,12 @@ export class OrderService {
       data: {
         ...orderData,
         Account,
-        isDraft
+        isDraft,
+        tags: {
+          connect: tags.map(({ id }) => {
+            return { id };
+          })
+        }
       }
     });
   }
@@ -215,9 +230,10 @@ export class OrderService {
                 })
               },
               {
-                SymbolProfileOverrides: {
-                  is: null
-                }
+                OR: [
+                  { SymbolProfileOverrides: { is: null } },
+                  { SymbolProfileOverrides: { assetClass: null } }
+                ]
               }
             ]
           },
@@ -298,6 +314,7 @@ export class OrderService {
       currency?: string;
       dataSource?: DataSource;
       symbol?: string;
+      tags?: Tag[];
     };
     where: Prisma.OrderWhereUniqueInput;
   }): Promise<Order> {
@@ -305,6 +322,12 @@ export class OrderService {
       delete data.Account;
     }
 
+    if (!data.comment) {
+      data.comment = null;
+    }
+
+    const tags = data.tags ?? [];
+
     let isDraft = false;
 
     if (data.type === 'ITEM') {
@@ -331,11 +354,17 @@ export class OrderService {
     delete data.currency;
     delete data.dataSource;
     delete data.symbol;
+    delete data.tags;
 
     return this.prismaService.order.update({
       data: {
         ...data,
-        isDraft
+        isDraft,
+        tags: {
+          connect: tags.map(({ id }) => {
+            return { id };
+          })
+        }
       },
       where
     });

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

@@ -1,11 +1,20 @@
-import { AssetClass, AssetSubClass, DataSource, Type } from '@prisma/client';
 import {
+  AssetClass,
+  AssetSubClass,
+  DataSource,
+  Tag,
+  Type
+} from '@prisma/client';
+import { Transform, TransformFnParams } from 'class-transformer';
+import {
+  IsArray,
   IsEnum,
   IsISO8601,
   IsNumber,
   IsOptional,
   IsString
 } from 'class-validator';
+import { isString } from 'lodash';
 
 export class UpdateOrderDto {
   @IsOptional()
@@ -20,6 +29,13 @@ export class UpdateOrderDto {
   @IsOptional()
   assetSubClass?: AssetSubClass;
 
+  @IsOptional()
+  @IsString()
+  @Transform(({ value }: TransformFnParams) =>
+    isString(value) ? value.trim() : value
+  )
+  comment?: string;
+
   @IsString()
   currency: string;
 
@@ -41,6 +57,10 @@ export class UpdateOrderDto {
   @IsString()
   symbol: string;
 
+  @IsArray()
+  @IsOptional()
+  tags?: Tag[];
+
   @IsString()
   type: Type;
 

apps/api/src/app/portfolio/portfolio-calculator-baln-buy-and-sell.spec.ts

@@ -62,6 +62,10 @@ describe('PortfolioCalculator', () => {
         parseDate('2021-11-22')
       );
 
+      const investments = portfolioCalculator.getInvestments();
+
+      const investmentsByMonth = portfolioCalculator.getInvestmentsByMonth();
+
       spy.mockRestore();
 
       expect(currentPositions).toEqual({
@@ -91,6 +95,15 @@ describe('PortfolioCalculator', () => {
         ],
         totalInvestment: new Big('0')
       });
+
+      expect(investments).toEqual([
+        { date: '2021-11-22', investment: new Big('285.8') },
+        { date: '2021-11-30', investment: new Big('0') }
+      ]);
+
+      expect(investmentsByMonth).toEqual([
+        { date: '2021-11-01', investment: new Big('12.6') }
+      ]);
     });
   });
 });

apps/api/src/app/portfolio/portfolio-calculator-baln-buy.spec.ts

@@ -51,6 +51,10 @@ describe('PortfolioCalculator', () => {
         parseDate('2021-11-30')
       );
 
+      const investments = portfolioCalculator.getInvestments();
+
+      const investmentsByMonth = portfolioCalculator.getInvestmentsByMonth();
+
       spy.mockRestore();
 
       expect(currentPositions).toEqual({
@@ -80,6 +84,14 @@ describe('PortfolioCalculator', () => {
         ],
         totalInvestment: new Big('273.2')
       });
+
+      expect(investments).toEqual([
+        { date: '2021-11-30', investment: new Big('273.2') }
+      ]);
+
+      expect(investmentsByMonth).toEqual([
+        { date: '2021-11-01', investment: new Big('273.2') }
+      ]);
     });
   });
 });

apps/api/src/app/portfolio/portfolio-calculator-no-orders.spec.ts

@@ -39,6 +39,10 @@ describe('PortfolioCalculator', () => {
         new Date()
       );
 
+      const investments = portfolioCalculator.getInvestments();
+
+      const investmentsByMonth = portfolioCalculator.getInvestmentsByMonth();
+
       spy.mockRestore();
 
       expect(currentPositions).toEqual({
@@ -51,6 +55,10 @@ describe('PortfolioCalculator', () => {
         positions: [],
         totalInvestment: new Big(0)
       });
+
+      expect(investments).toEqual([]);
+
+      expect(investmentsByMonth).toEqual([]);
     });
   });
 });

apps/api/src/app/portfolio/portfolio-calculator-novn-buy-and-sell-partially.spec.ts

@@ -62,6 +62,10 @@ describe('PortfolioCalculator', () => {
         parseDate('2022-03-07')
       );
 
+      const investments = portfolioCalculator.getInvestments();
+
+      const investmentsByMonth = portfolioCalculator.getInvestmentsByMonth();
+
       spy.mockRestore();
 
       expect(currentPositions).toEqual({
@@ -91,6 +95,16 @@ describe('PortfolioCalculator', () => {
         ],
         totalInvestment: new Big('75.80')
       });
+
+      expect(investments).toEqual([
+        { date: '2022-03-07', investment: new Big('151.6') },
+        { date: '2022-04-08', investment: new Big('75.8') }
+      ]);
+
+      expect(investmentsByMonth).toEqual([
+        { date: '2022-03-01', investment: new Big('151.6') },
+        { date: '2022-04-01', investment: new Big('-85.73') }
+      ]);
     });
   });
 });

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

@@ -14,8 +14,11 @@ import {
   format,
   isAfter,
   isBefore,
+  isSameMonth,
+  isSameYear,
   max,
-  min
+  min,
+  set
 } from 'date-fns';
 import { first, flatten, isNumber, sortBy } from 'lodash';
 
@@ -323,6 +326,53 @@ export class PortfolioCalculator {
     });
   }
 
+  public getInvestmentsByMonth(): { date: string; investment: Big }[] {
+    if (this.orders.length === 0) {
+      return [];
+    }
+
+    const investments = [];
+    let currentDate: Date;
+    let investmentByMonth = new Big(0);
+
+    for (const [index, order] of this.orders.entries()) {
+      if (
+        isSameMonth(parseDate(order.date), currentDate) &&
+        isSameYear(parseDate(order.date), currentDate)
+      ) {
+        // Same month: Add up investments
+
+        investmentByMonth = investmentByMonth.plus(
+          order.quantity.mul(order.unitPrice).mul(this.getFactor(order.type))
+        );
+      } else {
+        // New month: Store previous month and reset
+
+        if (currentDate) {
+          investments.push({
+            date: format(set(currentDate, { date: 1 }), DATE_FORMAT),
+            investment: investmentByMonth
+          });
+        }
+
+        currentDate = parseDate(order.date);
+        investmentByMonth = order.quantity
+          .mul(order.unitPrice)
+          .mul(this.getFactor(order.type));
+      }
+
+      if (index === this.orders.length - 1) {
+        // Store current month (latest order)
+        investments.push({
+          date: format(set(currentDate, { date: 1 }), DATE_FORMAT),
+          investment: investmentByMonth
+        });
+      }
+    }
+
+    return investments;
+  }
+
   public async calculateTimeline(
     timelineSpecification: TimelineSpecification[],
     endDate: string

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

@@ -20,7 +20,12 @@ import {
   PortfolioReport,
   PortfolioSummary
 } from '@ghostfolio/common/interfaces';
-import type { DateRange, RequestWithUser } from '@ghostfolio/common/types';
+import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface';
+import type {
+  DateRange,
+  GroupBy,
+  RequestWithUser
+} from '@ghostfolio/common/types';
 import {
   Controller,
   Get,
@@ -190,21 +195,35 @@ export class PortfolioController {
       }
     }
 
-    const isBasicUser =
-      this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION') &&
-      this.request.user.subscription.type === 'Basic';
+    let hasDetails = true;
+    if (this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION')) {
+      hasDetails = this.request.user.subscription.type === 'Premium';
+    }
+
+    for (const [symbol, portfolioPosition] of Object.entries(holdings)) {
+      holdings[symbol] = {
+        ...portfolioPosition,
+        assetClass: hasDetails ? portfolioPosition.assetClass : undefined,
+        assetSubClass: hasDetails ? portfolioPosition.assetSubClass : undefined,
+        countries: hasDetails ? portfolioPosition.countries : [],
+        currency: hasDetails ? portfolioPosition.currency : undefined,
+        markets: hasDetails ? portfolioPosition.markets : undefined,
+        sectors: hasDetails ? portfolioPosition.sectors : []
+      };
+    }
 
     return {
       accounts,
       hasError,
-      holdings: isBasicUser ? {} : holdings
+      holdings
     };
   }
 
   @Get('investments')
   @UseGuards(AuthGuard('jwt'))
   public async getInvestments(
-    @Headers('impersonation-id') impersonationId: string
+    @Headers('impersonation-id') impersonationId: string,
+    @Query('groupBy') groupBy?: GroupBy
   ): Promise<PortfolioInvestments> {
     if (
       this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION') &&
@@ -216,9 +235,16 @@ export class PortfolioController {
       );
     }
 
-    let investments = await this.portfolioService.getInvestments(
-      impersonationId
-    );
+    let investments: InvestmentItem[];
+
+    if (groupBy === 'month') {
+      investments = await this.portfolioService.getInvestments(
+        impersonationId,
+        'month'
+      );
+    } else {
+      investments = await this.portfolioService.getInvestments(impersonationId);
+    }
 
     if (
       impersonationId ||
@@ -317,7 +343,7 @@ export class PortfolioController {
     const { holdings } = await this.portfolioService.getDetails(
       access.userId,
       access.userId,
-      '1d',
+      'max',
       [{ id: 'EQUITY', type: 'ASSET_CLASS' }]
     );
 
@@ -338,12 +364,15 @@ export class PortfolioController {
 
     for (const [symbol, portfolioPosition] of Object.entries(holdings)) {
       portfolioPublicDetails.holdings[symbol] = {
-        allocationCurrent: portfolioPosition.allocationCurrent,
+        allocationCurrent: portfolioPosition.value / totalValue,
         countries: hasDetails ? portfolioPosition.countries : [],
-        currency: portfolioPosition.currency,
-        markets: portfolioPosition.markets,
+        currency: hasDetails ? portfolioPosition.currency : undefined,
+        markets: hasDetails ? portfolioPosition.markets : undefined,
         name: portfolioPosition.name,
+        netPerformancePercent: portfolioPosition.netPerformancePercent,
         sectors: hasDetails ? portfolioPosition.sectors : [],
+        symbol: portfolioPosition.symbol,
+        url: portfolioPosition.url,
         value: portfolioPosition.value / totalValue
       };
     }

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

@@ -41,6 +41,7 @@ import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.in
 import type {
   AccountWithValue,
   DateRange,
+  GroupBy,
   Market,
   OrderWithAccount,
   RequestWithUser
@@ -50,6 +51,7 @@ import { REQUEST } from '@nestjs/core';
 import {
   AssetClass,
   DataSource,
+  Prisma,
   Tag,
   Type as TypeOfOrder
 } from '@prisma/client';
@@ -63,6 +65,7 @@ import {
   max,
   parse,
   parseISO,
+  set,
   setDayOfYear,
   startOfDay,
   subDays,
@@ -100,14 +103,23 @@ export class PortfolioService {
     this.baseCurrency = this.configurationService.get('BASE_CURRENCY');
   }
 
-  public async getAccounts(aUserId: string): Promise<AccountWithValue[]> {
+  public async getAccounts(
+    aUserId: string,
+    aFilters?: Filter[]
+  ): Promise<AccountWithValue[]> {
+    const where: Prisma.AccountWhereInput = { userId: aUserId };
+
+    if (aFilters?.[0].id && aFilters?.[0].type === 'ACCOUNT') {
+      where.id = aFilters[0].id;
+    }
+
     const [accounts, details] = await Promise.all([
       this.accountService.accounts({
+        where,
         include: { Order: true, Platform: true },
-        orderBy: { name: 'asc' },
-        where: { userId: aUserId }
+        orderBy: { name: 'asc' }
       }),
-      this.getDetails(aUserId, aUserId)
+      this.getDetails(aUserId, aUserId, undefined, aFilters)
     ]);
 
     const userCurrency = this.request.user.Settings.currency;
@@ -145,8 +157,11 @@ export class PortfolioService {
     });
   }
 
-  public async getAccountsWithAggregations(aUserId: string): Promise<Accounts> {
-    const accounts = await this.getAccounts(aUserId);
+  public async getAccountsWithAggregations(
+    aUserId: string,
+    aFilters?: Filter[]
+  ): Promise<Accounts> {
+    const accounts = await this.getAccounts(aUserId, aFilters);
     let totalBalanceInBaseCurrency = new Big(0);
     let totalValueInBaseCurrency = new Big(0);
     let transactionCount = 0;
@@ -170,7 +185,8 @@ export class PortfolioService {
   }
 
   public async getInvestments(
-    aImpersonationId: string
+    aImpersonationId: string,
+    groupBy?: GroupBy
   ): Promise<InvestmentItem[]> {
     const userId = await this.getUserId(aImpersonationId, this.request.user.id);
 
@@ -191,28 +207,57 @@ export class PortfolioService {
       return [];
     }
 
-    const investments = portfolioCalculator.getInvestments().map((item) => {
-      return {
-        date: item.date,
-        investment: item.investment.toNumber()
-      };
-    });
+    let investments: InvestmentItem[];
 
-    // Add investment of today
-    const investmentOfToday = investments.filter((investment) => {
-      return investment.date === format(new Date(), DATE_FORMAT);
-    });
-
-    if (investmentOfToday.length <= 0) {
-      const pastInvestments = investments.filter((investment) => {
-        return isBefore(parseDate(investment.date), new Date());
+    if (groupBy === 'month') {
+      investments = portfolioCalculator.getInvestmentsByMonth().map((item) => {
+        return {
+          date: item.date,
+          investment: item.investment.toNumber()
+        };
       });
-      const lastInvestment = pastInvestments[pastInvestments.length - 1];
 
-      investments.push({
-        date: format(new Date(), DATE_FORMAT),
-        investment: lastInvestment?.investment ?? 0
+      // Add investment of current month
+      const dateOfCurrentMonth = format(
+        set(new Date(), { date: 1 }),
+        DATE_FORMAT
+      );
+      const investmentOfCurrentMonth = investments.filter(({ date }) => {
+        return date === dateOfCurrentMonth;
       });
+
+      if (investmentOfCurrentMonth.length <= 0) {
+        investments.push({
+          date: dateOfCurrentMonth,
+          investment: 0
+        });
+      }
+    } else {
+      investments = portfolioCalculator
+        .getInvestments()
+        .map(({ date, investment }) => {
+          return {
+            date,
+            investment: investment.toNumber()
+          };
+        });
+
+      // Add investment of today
+      const investmentOfToday = investments.filter(({ date }) => {
+        return date === format(new Date(), DATE_FORMAT);
+      });
+
+      if (investmentOfToday.length <= 0) {
+        const pastInvestments = investments.filter(({ date }) => {
+          return isBefore(parseDate(date), new Date());
+        });
+        const lastInvestment = pastInvestments[pastInvestments.length - 1];
+
+        investments.push({
+          date: format(new Date(), DATE_FORMAT),
+          investment: lastInvestment?.investment ?? 0
+        });
+      }
     }
 
     return sortBy(investments, (investment) => {
@@ -273,7 +318,6 @@ export class PortfolioService {
       .filter((timelineItem) => timelineItem !== null)
       .map((timelineItem) => ({
         date: timelineItem.date,
-        marketPrice: timelineItem.value,
         value: timelineItem.netPerformance.toNumber()
       }));
 
@@ -442,6 +486,7 @@ export class PortfolioService {
         sectors: symbolProfile.sectors,
         symbol: item.symbol,
         transactionCount: item.transactionCount,
+        url: symbolProfile.url,
         value: value.toNumber()
       };
     }
@@ -1290,6 +1335,10 @@ export class PortfolioService {
 
     if (filters.length === 0) {
       currentAccounts = await this.accountService.getAccounts(userId);
+    } else if (filters.length === 1 && filters[0].type === 'ACCOUNT') {
+      currentAccounts = await this.accountService.accounts({
+        where: { id: filters[0].id }
+      });
     } else {
       const accountIds = uniq(
         orders.map(({ accountId }) => {

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

@@ -1,6 +1,9 @@
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { PropertyService } from '@ghostfolio/api/services/property/property.service';
-import { PROPERTY_COUPONS } from '@ghostfolio/common/config';
+import {
+  DEFAULT_LANGUAGE_CODE,
+  PROPERTY_COUPONS
+} from '@ghostfolio/common/config';
 import { Coupon } from '@ghostfolio/common/interfaces';
 import type { RequestWithUser } from '@ghostfolio/common/types';
 import {
@@ -93,7 +96,11 @@ export class SubscriptionController {
       'SubscriptionController'
     );
 
-    res.redirect(`${this.configurationService.get('ROOT_URL')}/account`);
+    res.redirect(
+      `${this.configurationService.get(
+        'ROOT_URL'
+      )}/${DEFAULT_LANGUAGE_CODE}/account`
+    );
   }
 
   @Post('stripe/checkout-session')

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

@@ -1,5 +1,6 @@
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { DEFAULT_LANGUAGE_CODE } from '@ghostfolio/common/config';
 import { SubscriptionType } from '@ghostfolio/common/types/subscription.type';
 import { Injectable, Logger } from '@nestjs/common';
 import { Subscription } from '@prisma/client';
@@ -33,7 +34,9 @@ export class SubscriptionService {
     userId: string;
   }) {
     const checkoutSessionCreateParams: Stripe.Checkout.SessionCreateParams = {
-      cancel_url: `${this.configurationService.get('ROOT_URL')}/account`,
+      cancel_url: `${this.configurationService.get(
+        'ROOT_URL'
+      )}/${DEFAULT_LANGUAGE_CODE}/account`,
       client_reference_id: userId,
       line_items: [
         {

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

@@ -46,7 +46,6 @@ export class SymbolController {
    * Must be after /lookup
    */
   @Get(':dataSource/:symbol')
-  @UseGuards(AuthGuard('jwt'))
   @UseInterceptors(TransformDataSourceInRequestInterceptor)
   @UseInterceptors(TransformDataSourceInResponseInterceptor)
   public async getSymbolData(

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

@@ -9,6 +9,10 @@ export class UpdateUserSettingDto {
   @IsOptional()
   isRestrictedView?: boolean;
 
+  @IsString()
+  @IsOptional()
+  language?: string;
+
   @IsString()
   @IsOptional()
   locale?: string;

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

@@ -36,14 +36,7 @@ export class UserService {
   }
 
   public async getUser(
-    {
-      Account,
-      alias,
-      id,
-      permissions,
-      Settings,
-      subscription
-    }: UserWithSettings,
+    { Account, id, permissions, Settings, subscription }: UserWithSettings,
     aLocale = locale
   ): Promise<IUser> {
     const access = await this.prismaService.access.findMany({
@@ -63,7 +56,6 @@ export class UserService {
     }
 
     return {
-      alias,
       id,
       permissions,
       subscription,
@@ -158,10 +150,6 @@ export class UserService {
 
     let currentPermissions = getPermissions(user.role);
 
-    if (this.configurationService.get('ENABLE_FEATURE_FEAR_AND_GREED_INDEX')) {
-      currentPermissions.push(permissions.accessFearAndGreedIndex);
-    }
-
     if (user.subscription?.type === 'Premium') {
       currentPermissions.push(permissions.reportDataGlitch);
     }

apps/api/src/assets/cryptocurrencies/custom.json

@@ -1,4 +1,7 @@
 {
   "LUNA1": "Terra",
-  "UNI1": "Uniswap"
+  "LUNA2": "Terra",
+  "SGB1": "Songbird",
+  "UNI1": "Uniswap",
+  "UST": "TerraUSD"
 }

apps/api/src/main.ts

@@ -1,11 +1,24 @@
 import { Logger, ValidationPipe, VersioningType } from '@nestjs/common';
+import { ConfigService } from '@nestjs/config';
 import { NestFactory } from '@nestjs/core';
 
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 
 async function bootstrap() {
-  const app = await NestFactory.create(AppModule);
+  const configApp = await NestFactory.create(AppModule);
+  const configService = configApp.get<ConfigService>(ConfigService);
+
+  const NODE_ENV =
+    configService.get<'development' | 'production'>('NODE_ENV') ??
+    'development';
+
+  const app = await NestFactory.create(AppModule, {
+    logger:
+      NODE_ENV === 'production'
+        ? ['error', 'log', 'warn']
+        : ['debug', 'error', 'log', 'verbose', 'warn']
+  });
   app.enableCors();
   app.enableVersioning({
     defaultVersion: '1',
@@ -20,11 +33,11 @@ async function bootstrap() {
     })
   );
 
-  const host = process.env.HOST || '0.0.0.0';
-  const port = process.env.PORT || 3333;
-  await app.listen(port, host, () => {
+  const HOST = configService.get<string>('HOST') || '0.0.0.0';
+  const PORT = configService.get<number>('PORT') || 3333;
+  await app.listen(PORT, HOST, () => {
     logLogo();
-    Logger.log(`Listening at http://${host}:${port}`);
+    Logger.log(`Listening at http://${HOST}:${PORT}`);
     Logger.log('');
   });
 }

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

@@ -15,7 +15,9 @@ export class ConfigurationService {
       BASE_CURRENCY: str({ default: 'USD' }),
       CACHE_TTL: num({ default: 1 }),
       DATA_SOURCE_PRIMARY: str({ default: DataSource.YAHOO }),
-      DATA_SOURCES: json({ default: [DataSource.YAHOO] }),
+      DATA_SOURCES: json({
+        default: [DataSource.GHOSTFOLIO, DataSource.YAHOO]
+      }),
       ENABLE_FEATURE_BLOG: bool({ default: false }),
       ENABLE_FEATURE_CUSTOM_SYMBOLS: bool({ default: false }),
       ENABLE_FEATURE_FEAR_AND_GREED_INDEX: bool({ default: false }),
@@ -33,8 +35,8 @@ export class ConfigurationService {
       GOOGLE_SHEETS_PRIVATE_KEY: str({ default: '' }),
       HOST: host({ default: '0.0.0.0' }),
       JWT_SECRET_KEY: str({}),
+      MAX_ACTIVITIES_TO_IMPORT: num({ default: Number.MAX_SAFE_INTEGER }),
       MAX_ITEM_IN_CACHE: num({ default: 9999 }),
-      MAX_ORDERS_TO_IMPORT: num({ default: Number.MAX_SAFE_INTEGER }),
       PORT: port({ default: 3333 }),
       RAKUTEN_RAPID_API_KEY: str({ default: '' }),
       REDIS_HOST: host({ default: 'localhost' }),

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

@@ -10,6 +10,7 @@ import ms from 'ms';
 
 import { DataGatheringProcessor } from './data-gathering.processor';
 import { ExchangeRateDataModule } from './exchange-rate-data.module';
+import { MarketDataModule } from './market-data.module';
 import { SymbolProfileModule } from './symbol-profile.module';
 
 @Module({
@@ -25,6 +26,7 @@ import { SymbolProfileModule } from './symbol-profile.module';
     DataEnhancerModule,
     DataProviderModule,
     ExchangeRateDataModule,
+    MarketDataModule,
     PrismaModule,
     SymbolProfileModule
   ],

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

@@ -17,6 +17,7 @@ import { DataProviderService } from './data-provider/data-provider.service';
 import { DataEnhancerInterface } from './data-provider/interfaces/data-enhancer.interface';
 import { ExchangeRateDataService } from './exchange-rate-data.service';
 import { IDataGatheringItem } from './interfaces/interfaces';
+import { MarketDataService } from './market-data.service';
 import { PrismaService } from './prisma.service';
 
 @Injectable()
@@ -28,6 +29,7 @@ export class DataGatheringService {
     private readonly dataGatheringQueue: Queue,
     private readonly dataProviderService: DataProviderService,
     private readonly exchangeRateDataService: ExchangeRateDataService,
+    private readonly marketDataService: MarketDataService,
     private readonly prismaService: PrismaService,
     private readonly symbolProfileService: SymbolProfileService
   ) {}
@@ -56,6 +58,8 @@ export class DataGatheringService {
   }
 
   public async gatherSymbol({ dataSource, symbol }: UniqueAsset) {
+    await this.marketDataService.deleteMany({ dataSource, symbol });
+
     const symbols = (await this.getSymbolsMax()).filter((dataGatheringItem) => {
       return (
         dataGatheringItem.dataSource === dataSource &&

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

@@ -168,6 +168,7 @@ export class DataProviderService {
     const response: {
       [symbol: string]: IDataProviderResponse;
     } = {};
+    const startTimeTotal = performance.now();
 
     const itemsGroupedByDataSource = groupBy(items, (item) => item.dataSource);
 
@@ -176,25 +177,59 @@ export class DataProviderService {
     for (const [dataSource, dataGatheringItems] of Object.entries(
       itemsGroupedByDataSource
     )) {
+      const dataProvider = this.getDataProvider(DataSource[dataSource]);
+
       const symbols = dataGatheringItems.map((dataGatheringItem) => {
         return dataGatheringItem.symbol;
       });
 
-      const promise = Promise.resolve(
-        this.getDataProvider(DataSource[dataSource]).getQuotes(symbols)
-      );
+      const maximumNumberOfSymbolsPerRequest =
+        dataProvider.getMaxNumberOfSymbolsPerRequest?.() ??
+        Number.MAX_SAFE_INTEGER;
+      for (
+        let i = 0;
+        i < symbols.length;
+        i += maximumNumberOfSymbolsPerRequest
+      ) {
+        const startTimeDataSource = performance.now();
 
-      promises.push(
-        promise.then((result) => {
-          for (const [symbol, dataProviderResponse] of Object.entries(result)) {
-            response[symbol] = dataProviderResponse;
-          }
-        })
-      );
+        const symbolsChunk = symbols.slice(
+          i,
+          i + maximumNumberOfSymbolsPerRequest
+        );
+
+        const promise = Promise.resolve(dataProvider.getQuotes(symbolsChunk));
+
+        promises.push(
+          promise.then((result) => {
+            for (const [symbol, dataProviderResponse] of Object.entries(
+              result
+            )) {
+              response[symbol] = dataProviderResponse;
+            }
+
+            Logger.debug(
+              `Fetched ${symbolsChunk.length} quotes from ${dataSource} in ${(
+                (performance.now() - startTimeDataSource) /
+                1000
+              ).toFixed(3)} seconds`
+            );
+          })
+        );
+      }
     }
 
     await Promise.all(promises);
 
+    Logger.debug('------------------------------------------------');
+    Logger.debug(
+      `Fetched ${items.length} quotes in ${(
+        (performance.now() - startTimeTotal) /
+        1000
+      ).toFixed(3)} seconds`
+    );
+    Logger.debug('================================================');
+
     return response;
   }
 

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

@@ -81,6 +81,12 @@ export class EodHistoricalDataService implements DataProviderInterface {
     }
   }
 
+  public getMaxNumberOfSymbolsPerRequest() {
+    // It is not recommended using more than 15-20 tickers per request
+    // https://eodhistoricaldata.com/financial-apis/live-realtime-stocks-api
+    return 20;
+  }
+
   public getName(): DataSource {
     return DataSource.EOD_HISTORICAL_DATA;
   }

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

@@ -20,6 +20,8 @@ export interface DataProviderInterface {
     [symbol: string]: { [date: string]: IDataProviderHistoricalResponse };
   }>; // TODO: Return only one symbol
 
+  getMaxNumberOfSymbolsPerRequest?(): number;
+
   getName(): DataSource;
 
   getQuotes(

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

@@ -37,10 +37,15 @@ export class YahooFinanceService implements DataProviderInterface {
   }
 
   public convertFromYahooFinanceSymbol(aYahooFinanceSymbol: string) {
-    const symbol = aYahooFinanceSymbol.replace(
+    let symbol = aYahooFinanceSymbol.replace(
       new RegExp(`-${this.baseCurrency}$`),
       this.baseCurrency
     );
+
+    if (symbol.includes('=X') && !symbol.includes(this.baseCurrency)) {
+      symbol = `${this.baseCurrency}${symbol}`;
+    }
+
     return symbol.replace('=X', '');
   }
 
@@ -181,6 +186,9 @@ export class YahooFinanceService implements DataProviderInterface {
         if (symbol === 'USDGBp') {
           // Convert GPB to GBp (pence)
           marketPrice = new Big(marketPrice).mul(100).toNumber();
+        } else if (symbol === 'USDILA') {
+          // Convert ILS to ILA
+          marketPrice = new Big(marketPrice).mul(100).toNumber();
         }
 
         response[symbol][format(historicalItem.date, DATE_FORMAT)] = {
@@ -200,6 +208,10 @@ export class YahooFinanceService implements DataProviderInterface {
     }
   }
 
+  public getMaxNumberOfSymbolsPerRequest() {
+    return 50;
+  }
+
   public getName(): DataSource {
     return DataSource.YAHOO;
   }
@@ -243,9 +255,31 @@ export class YahooFinanceService implements DataProviderInterface {
               .mul(100)
               .toNumber()
           };
+        } else if (
+          symbol === 'USDILS' &&
+          yahooFinanceSymbols.includes('USDILA=X')
+        ) {
+          // Convert ILS to ILA
+          response['USDILA'] = {
+            ...response[symbol],
+            currency: 'ILA',
+            marketPrice: new Big(response[symbol].marketPrice)
+              .mul(100)
+              .toNumber()
+          };
         }
       }
 
+      if (yahooFinanceSymbols.includes('USDUSX=X')) {
+        // Convert USD to USX (cent)
+        response['USDUSX'] = {
+          currency: 'USX',
+          dataSource: this.getName(),
+          marketPrice: new Big(1).mul(100).toNumber(),
+          marketState: 'open'
+        };
+      }
+
       return response;
     } catch (error) {
       Logger.error(error, 'YahooFinanceService');

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

@@ -22,9 +22,7 @@ export class ExchangeRateDataService {
     private readonly dataProviderService: DataProviderService,
     private readonly prismaService: PrismaService,
     private readonly propertyService: PropertyService
-  ) {
-    this.initialize();
-  }
+  ) {}
 
   public getCurrencies() {
     return this.currencies?.length > 0 ? this.currencies : [this.baseCurrency];
@@ -122,15 +120,6 @@ export class ExchangeRateDataService {
       return 0;
     }
 
-    const hasNaN = Object.values(this.exchangeRates).some((exchangeRate) => {
-      return isNaN(exchangeRate);
-    });
-
-    if (hasNaN) {
-      // Reinitialize if data is not loaded correctly
-      this.initialize();
-    }
-
     let factor = 1;
 
     if (aFromCurrency !== aToCurrency) {

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

@@ -23,8 +23,8 @@ export interface Environment extends CleanedEnvAccessors {
   GOOGLE_SHEETS_ID: string;
   GOOGLE_SHEETS_PRIVATE_KEY: string;
   JWT_SECRET_KEY: string;
+  MAX_ACTIVITIES_TO_IMPORT: number;
   MAX_ITEM_IN_CACHE: number;
-  MAX_ORDERS_TO_IMPORT: number;
   PORT: number;
   RAKUTEN_RAPID_API_KEY: string;
   REDIS_HOST: string;

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

@@ -1,15 +1,25 @@
-import { Injectable, OnModuleDestroy, OnModuleInit } from '@nestjs/common';
+import {
+  Injectable,
+  Logger,
+  OnModuleDestroy,
+  OnModuleInit
+} from '@nestjs/common';
 import { PrismaClient } from '@prisma/client';
 
 @Injectable()
 export class PrismaService
   extends PrismaClient
-  implements OnModuleInit, OnModuleDestroy {
-  async onModuleInit() {
-    await this.$connect();
+  implements OnModuleInit, OnModuleDestroy
+{
+  public async onModuleInit() {
+    try {
+      await this.$connect();
+    } catch (error) {
+      Logger.error(error, 'PrismaService');
+    }
   }
 
-  async onModuleDestroy() {
+  public async onModuleDestroy() {
     await this.$disconnect();
   }
 }

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

@@ -115,9 +115,16 @@ export class SymbolProfileService {
         }
 
         item.name = item.SymbolProfileOverrides?.name ?? item.name;
-        item.sectors =
-          (item.SymbolProfileOverrides.sectors as unknown as Sector[]) ??
-          item.sectors;
+
+        if (
+          (item.SymbolProfileOverrides.sectors as unknown as Sector[])?.length >
+          0
+        ) {
+          item.sectors = item.SymbolProfileOverrides
+            .sectors as unknown as Sector[];
+        }
+
+        item.url = item.SymbolProfileOverrides?.url ?? item.url;
 
         delete item.SymbolProfileOverrides;
       }

apps/client/src/app/adapter/custom-date-adapter.ts

@@ -5,9 +5,6 @@ import { getDateFormatString } from '@ghostfolio/common/helper';
 import { format, parse } from 'date-fns';
 
 export class CustomDateAdapter extends NativeDateAdapter {
-  /**
-   * @constructor
-   */
   public constructor(
     @Inject(MAT_DATE_LOCALE) public locale: string,
     @Inject(forwardRef(() => MAT_DATE_LOCALE)) matDateLocale: string,

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

@@ -1,5 +1,6 @@
 import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { RouterModule, Routes, TitleStrategy } from '@angular/router';
+import { PageTitleStrategy } from '@ghostfolio/client/services/page-title.strategy';
 
 import { ModulePreloadService } from './core/module-preload.service';
 
@@ -16,6 +17,13 @@ const routes: Routes = [
         (m) => m.ChangelogPageModule
       )
   },
+  {
+    path: 'about/privacy-policy',
+    loadChildren: () =>
+      import('./pages/about/privacy-policy/privacy-policy-page.module').then(
+        (m) => m.PrivacyPolicyPageModule
+      )
+  },
   {
     path: 'account',
     loadChildren: () =>
@@ -46,26 +54,57 @@ const routes: Routes = [
       import('./pages/blog/blog-page.module').then((m) => m.BlogPageModule)
   },
   {
-    path: 'de/blog/2021/07/hallo-ghostfolio',
+    path: 'blog/2021/07/hallo-ghostfolio',
     loadChildren: () =>
       import(
         './pages/blog/2021/07/hallo-ghostfolio/hallo-ghostfolio-page.module'
       ).then((m) => m.HalloGhostfolioPageModule)
   },
   {
-    path: 'en/blog/2021/07/hello-ghostfolio',
+    path: 'blog/2021/07/hello-ghostfolio',
     loadChildren: () =>
       import(
         './pages/blog/2021/07/hello-ghostfolio/hello-ghostfolio-page.module'
       ).then((m) => m.HelloGhostfolioPageModule)
   },
   {
-    path: 'en/blog/2022/01/ghostfolio-first-months-in-open-source',
+    path: 'blog/2022/01/ghostfolio-first-months-in-open-source',
     loadChildren: () =>
       import(
         './pages/blog/2022/01/first-months-in-open-source/first-months-in-open-source-page.module'
       ).then((m) => m.FirstMonthsInOpenSourcePageModule)
   },
+  {
+    path: 'blog/2022/07/ghostfolio-meets-internet-identity',
+    loadChildren: () =>
+      import(
+        './pages/blog/2022/07/ghostfolio-meets-internet-identity/ghostfolio-meets-internet-identity-page.module'
+      ).then((m) => m.GhostfolioMeetsInternetIdentityPageModule)
+  },
+  {
+    path: 'blog/2022/07/how-do-i-get-my-finances-in-order',
+    loadChildren: () =>
+      import(
+        './pages/blog/2022/07/how-do-i-get-my-finances-in-order/how-do-i-get-my-finances-in-order-page.module'
+      ).then((m) => m.HowDoIGetMyFinancesInOrderPageModule)
+  },
+  {
+    path: 'blog/2022/08/500-stars-on-github',
+    loadChildren: () =>
+      import(
+        './pages/blog/2022/08/500-stars-on-github/500-stars-on-github-page.module'
+      ).then((m) => m.FiveHundredStarsOnGitHubPageModule)
+  },
+  {
+    path: 'demo',
+    loadChildren: () =>
+      import('./pages/demo/demo-page.module').then((m) => m.DemoPageModule)
+  },
+  {
+    path: 'faq',
+    loadChildren: () =>
+      import('./pages/faq/faq-page.module').then((m) => m.FaqPageModule)
+  },
   {
     path: 'features',
     loadChildren: () =>
@@ -78,6 +117,13 @@ const routes: Routes = [
     loadChildren: () =>
       import('./pages/home/home-page.module').then((m) => m.HomePageModule)
   },
+  {
+    path: 'markets',
+    loadChildren: () =>
+      import('./pages/markets/markets-page.module').then(
+        (m) => m.MarketsPageModule
+      )
+  },
   {
     path: 'p',
     loadChildren: () =>
@@ -120,6 +166,13 @@ const routes: Routes = [
         (m) => m.FirePageModule
       )
   },
+  {
+    path: 'portfolio/holdings',
+    loadChildren: () =>
+      import('./pages/portfolio/holdings/holdings-page.module').then(
+        (m) => m.HoldingsPageModule
+      )
+  },
   {
     path: 'portfolio/report',
     loadChildren: () =>
@@ -189,7 +242,10 @@ const routes: Routes = [
       }
     )
   ],
-  providers: [ModulePreloadService],
+  providers: [
+    ModulePreloadService,
+    { provide: TitleStrategy, useClass: PageTitleStrategy }
+  ],
   exports: [RouterModule]
 })
 export class AppRoutingModule {}

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

@@ -15,13 +15,17 @@
   >
     <div class="row">
       <div class="col-md-8 offset-md-2 text-center">
-        <a *ngIf="canCreateAccount" class="text-center" [routerLink]="['/']">
+        <a
+          *ngIf="canCreateAccount"
+          class="text-center"
+          [routerLink]="['/register']"
+        >
           <div
             class="cursor-pointer d-inline-block info-message px-3 py-2"
             (click)="onCreateAccount()"
           >
-            <span i18n>You are using the Live Demo.</span>
-            <a class="ml-2" href="#" i18n>Create Account</a>
+            <span>You are using the Live Demo.</span>
+            <span class="a ml-2">Create Account</span>
           </div></a
         >
         <div

apps/client/src/app/app.component.scss

@@ -17,7 +17,7 @@
         border-radius: 2rem;
         font-size: 80%;
 
-        a {
+        .a {
           color: rgba(var(--palette-primary-500), 1);
           font-weight: 500;
         }

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

@@ -1,6 +1,8 @@
 import { Platform } from '@angular/cdk/platform';
 import { HttpClientModule } from '@angular/common/http';
 import { NgModule } from '@angular/core';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatChipsModule } from '@angular/material/chips';
 import {
   DateAdapter,
   MAT_DATE_FORMATS,
@@ -38,6 +40,8 @@ export function NgxStripeFactory(): string {
     GfHeaderModule,
     HttpClientModule,
     MarkdownModule.forRoot(),
+    MatAutocompleteModule,
+    MatChipsModule,
     MaterialCssVarsModule.forRoot({
       darkThemeClass: 'is-dark-theme',
       isAutoContrast: true,

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

@@ -21,8 +21,10 @@
     <td *matCellDef="let element" class="px-1 text-nowrap" mat-cell>
       <ng-container *ngIf="element.type === 'PUBLIC'">
         <ion-icon class="mr-1" name="link-outline"></ion-icon>
-        <a href="{{ baseUrl }}/p/{{ element.id }}" target="_blank"
-          >{{ baseUrl }}/p/{{ element.id }}</a
+        <a
+          href="{{ baseUrl }}/{{ defaultLanguageCode }}/p/{{ element.id }}"
+          target="_blank"
+          >{{ baseUrl }}/{{ defaultLanguageCode }}/p/{{ element.id }}</a
         >
       </ng-container>
     </td>
@@ -41,8 +43,8 @@
         <ion-icon name="ellipsis-vertical"></ion-icon>
       </button>
       <mat-menu #transactionMenu="matMenu" xPosition="before">
-        <button i18n mat-menu-item (click)="onDeleteAccess(element.id)">
-          Revoke
+        <button mat-menu-item (click)="onDeleteAccess(element.id)">
+          <ng-container i18n>Revoke</ng-container>
         </button>
       </mat-menu>
     </td>

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

@@ -8,6 +8,7 @@ import {
   Output
 } from '@angular/core';
 import { MatTableDataSource } from '@angular/material/table';
+import { DEFAULT_LANGUAGE_CODE } from '@ghostfolio/common/config';
 import { Access } from '@ghostfolio/common/interfaces';
 
 @Component({
@@ -24,6 +25,7 @@ export class AccessTableComponent implements OnChanges, OnInit {
 
   public baseUrl = window.location.origin;
   public dataSource: MatTableDataSource<Access>;
+  public defaultLanguageCode = DEFAULT_LANGUAGE_CODE;
   public displayedColumns = [];
 
   public constructor() {}
@@ -44,7 +46,7 @@ export class AccessTableComponent implements OnChanges, OnInit {
 
   public onDeleteAccess(aId: string) {
     const confirmation = confirm(
-      'Do you really want to revoke this granted access?'
+      $localize`Do you really want to revoke this granted access?`
     );
 
     if (confirmation) {

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

@@ -10,7 +10,6 @@ import { AccessTableComponent } from './access-table.component';
   declarations: [AccessTableComponent],
   exports: [AccessTableComponent],
   imports: [CommonModule, MatButtonModule, MatMenuModule, MatTableModule],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfPortfolioAccessTableModule {}

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

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+
+  .mat-dialog-content {
+    max-height: unset;
+  }
+}

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

@@ -0,0 +1,112 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Inject,
+  OnDestroy,
+  OnInit
+} from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { DataService } from '@ghostfolio/client/services/data.service';
+import { UserService } from '@ghostfolio/client/services/user/user.service';
+import { downloadAsFile } from '@ghostfolio/common/helper';
+import { User } from '@ghostfolio/common/interfaces';
+import { OrderWithAccount } from '@ghostfolio/common/types';
+import { AccountType } from '@prisma/client';
+import { format, parseISO } from 'date-fns';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { AccountDetailDialogParams } from './interfaces/interfaces';
+
+@Component({
+  host: { class: 'd-flex flex-column h-100' },
+  selector: 'gf-account-detail-dialog',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: 'account-detail-dialog.html',
+  styleUrls: ['./account-detail-dialog.component.scss']
+})
+export class AccountDetailDialog implements OnDestroy, OnInit {
+  public accountType: AccountType;
+  public name: string;
+  public orders: OrderWithAccount[];
+  public platformName: string;
+  public user: User;
+  public valueInBaseCurrency: number;
+
+  private unsubscribeSubject = new Subject<void>();
+
+  public constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    @Inject(MAT_DIALOG_DATA) public data: AccountDetailDialogParams,
+    private dataService: DataService,
+    public dialogRef: MatDialogRef<AccountDetailDialog>,
+    private userService: UserService
+  ) {
+    this.userService.stateChanged
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((state) => {
+        if (state?.user) {
+          this.user = state.user;
+
+          this.changeDetectorRef.markForCheck();
+        }
+      });
+  }
+
+  public ngOnInit(): void {
+    this.dataService
+      .fetchAccount(this.data.accountId)
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(({ accountType, name, Platform, valueInBaseCurrency }) => {
+        this.accountType = accountType;
+        this.name = name;
+        this.platformName = Platform?.name;
+        this.valueInBaseCurrency = valueInBaseCurrency;
+
+        this.changeDetectorRef.markForCheck();
+      });
+
+    this.dataService
+      .fetchActivities({
+        filters: [{ id: this.data.accountId, type: 'ACCOUNT' }]
+      })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(({ activities }) => {
+        this.orders = activities;
+
+        this.changeDetectorRef.markForCheck();
+      });
+  }
+
+  public onClose(): void {
+    this.dialogRef.close();
+  }
+
+  public onExport() {
+    this.dataService
+      .fetchExport(
+        this.orders.map((order) => {
+          return order.id;
+        })
+      )
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((data) => {
+        downloadAsFile({
+          content: data,
+          fileName: `ghostfolio-export-${this.name
+            .replace(/\s+/g, '-')
+            .toLowerCase()}-${format(
+            parseISO(data.meta.date),
+            'yyyyMMddHHmm'
+          )}.json`,
+          format: 'json'
+        });
+      });
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+}

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

@@ -0,0 +1,56 @@
+<gf-dialog-header
+  mat-dialog-title
+  position="center"
+  [deviceType]="data.deviceType"
+  [title]="name"
+  (closeButtonClicked)="onClose()"
+></gf-dialog-header>
+
+<div class="flex-grow-1" mat-dialog-content>
+  <div class="container p-0">
+    <div class="row">
+      <div class="col-12 d-flex justify-content-center mb-3">
+        <gf-value
+          size="large"
+          [currency]="user?.settings?.baseCurrency"
+          [locale]="user?.settings?.locale"
+          [value]="valueInBaseCurrency"
+        ></gf-value>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-6 mb-3">
+        <gf-value size="medium" [value]="accountType">Account Type</gf-value>
+      </div>
+      <div class="col-6 mb-3">
+        <gf-value size="medium" [value]="platformName">Platform</gf-value>
+      </div>
+    </div>
+
+    <div *ngIf="orders?.length > 0" class="row">
+      <div class="col mb-3">
+        <div class="h5 mb-0" i18n>Activities</div>
+        <gf-activities-table
+          [activities]="orders"
+          [baseCurrency]="user?.settings?.baseCurrency"
+          [deviceType]="data.deviceType"
+          [hasPermissionToCreateActivity]="false"
+          [hasPermissionToExportActivities]="!hasImpersonationId"
+          [hasPermissionToFilter]="false"
+          [hasPermissionToImportActivities]="false"
+          [hasPermissionToOpenDetails]="false"
+          [locale]="user?.settings?.locale"
+          [showActions]="false"
+          (export)="onExport()"
+        ></gf-activities-table>
+      </div>
+    </div>
+  </div>
+</div>
+
+<gf-dialog-footer
+  mat-dialog-actions
+  [deviceType]="data.deviceType"
+  (closeButtonClicked)="onClose()"
+></gf-dialog-footer>

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

@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
+import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
+import { GfActivitiesTableModule } from '@ghostfolio/ui/activities-table/activities-table.module';
+import { GfValueModule } from '@ghostfolio/ui/value';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+
+import { AccountDetailDialog } from './account-detail-dialog.component';
+
+@NgModule({
+  declarations: [AccountDetailDialog],
+  imports: [
+    CommonModule,
+    GfActivitiesTableModule,
+    GfDialogFooterModule,
+    GfDialogHeaderModule,
+    GfValueModule,
+    MatButtonModule,
+    MatDialogModule,
+    NgxSkeletonLoaderModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GfAccountDetailDialogModule {}

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

@@ -0,0 +1,5 @@
+export interface AccountDetailDialogParams {
+  accountId: string;
+  deviceType: string;
+  hasImpersonationId: boolean;
+}

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

@@ -19,13 +19,8 @@
   </ng-container>
 
   <ng-container matColumnDef="currency">
-    <th
-      *matHeaderCellDef
-      class="d-none d-lg-table-cell px-1"
-      i18n
-      mat-header-cell
-    >
-      Currency
+    <th *matHeaderCellDef class="d-none d-lg-table-cell px-1" mat-header-cell>
+      <ng-container i18n>Currency</ng-container>
     </th>
     <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
       {{ element.currency }}
@@ -36,13 +31,8 @@
   </ng-container>
 
   <ng-container matColumnDef="platform">
-    <th
-      *matHeaderCellDef
-      class="d-none d-lg-table-cell px-1"
-      i18n
-      mat-header-cell
-    >
-      Platform
+    <th *matHeaderCellDef class="d-none d-lg-table-cell px-1" mat-header-cell>
+      <ng-container i18n>Platform</ng-container>
     </th>
     <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
       <div class="d-flex">
@@ -65,7 +55,7 @@
   <ng-container matColumnDef="transactions">
     <th *matHeaderCellDef class="px-1 text-right" mat-header-cell>
       <span class="d-block d-sm-none">#</span>
-      <span class="d-none d-sm-block" i18n>Transactions</span>
+      <span class="d-none d-sm-block" i18n>Activities</span>
     </th>
     <td *matCellDef="let element" class="px-1 text-right" mat-cell>
       <ng-container *ngIf="element.accountType === 'SECURITIES'">{{
@@ -81,10 +71,9 @@
     <th
       *matHeaderCellDef
       class="d-none d-lg-table-cell px-1 text-right"
-      i18n
       mat-header-cell
     >
-      Cash Balance
+      <ng-container i18n>Cash Balance</ng-container>
     </th>
     <td
       *matCellDef="let element"
@@ -116,10 +105,9 @@
     <th
       *matHeaderCellDef
       class="d-none d-lg-table-cell px-1 text-right"
-      i18n
       mat-header-cell
     >
-      Value
+      <ng-container i18n>Value</ng-container>
     </th>
     <td
       *matCellDef="let element"
@@ -151,10 +139,9 @@
     <th
       *matHeaderCellDef
       class="d-lg-none d-xl-none px-1 text-right"
-      i18n
       mat-header-cell
     >
-      Value
+      <ng-container i18n>Value</ng-container>
     </th>
     <td
       *matCellDef="let element"
@@ -212,7 +199,12 @@
   </ng-container>
 
   <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
-  <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
+  <tr
+    *matRowDef="let row; columns: displayedColumns"
+    class="cursor-pointer"
+    mat-row
+    (click)="onOpenAccountDetailDialog(row.id)"
+  ></tr>
   <tr
     *matFooterRowDef="displayedColumns"
     mat-footer-row

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

@@ -9,6 +9,7 @@ import {
   Output
 } from '@angular/core';
 import { MatTableDataSource } from '@angular/material/table';
+import { Router } from '@angular/router';
 import { Account as AccountModel } from '@prisma/client';
 import { Subject, Subscription } from 'rxjs';
 
@@ -39,7 +40,7 @@ export class AccountsTableComponent implements OnChanges, OnDestroy, OnInit {
 
   private unsubscribeSubject = new Subject<void>();
 
-  public constructor() {}
+  public constructor(private router: Router) {}
 
   public ngOnInit() {}
 
@@ -68,13 +69,21 @@ export class AccountsTableComponent implements OnChanges, OnDestroy, OnInit {
   }
 
   public onDeleteAccount(aId: string) {
-    const confirmation = confirm('Do you really want to delete this account?');
+    const confirmation = confirm(
+      $localize`Do you really want to delete this account?`
+    );
 
     if (confirmation) {
       this.accountDeleted.emit(aId);
     }
   }
 
+  public onOpenAccountDetailDialog(accountId: string) {
+    this.router.navigate([], {
+      queryParams: { accountId, accountDetailDialog: true }
+    });
+  }
+
   public onUpdateAccount(aAccount: AccountModel) {
     this.accountToUpdate.emit(aAccount);
   }

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

@@ -25,7 +25,6 @@ import { AccountsTableComponent } from './accounts-table.component';
     NgxSkeletonLoaderModule,
     RouterModule
   ],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfAccountsTableModule {}

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

@@ -30,9 +30,6 @@ export class AdminJobsComponent implements OnDestroy, OnInit {
 
   private unsubscribeSubject = new Subject<void>();
 
-  /**
-   * @constructor
-   */
   public constructor(
     private adminService: AdminService,
     private changeDetectorRef: ChangeDetectorRef,
@@ -52,9 +49,6 @@ export class AdminJobsComponent implements OnDestroy, OnInit {
       });
   }
 
-  /**
-   * Initializes the controller
-   */
   public ngOnInit() {
     this.filterForm = this.formBuilder.group({
       status: []

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

@@ -24,7 +24,7 @@
       <table class="gf-table w-100">
         <thead>
           <tr class="mat-header-row">
-            <th class="mat-header-cell px-1 py-2 text-right" i18n>#</th>
+            <th class="mat-header-cell px-1 py-2 text-right">#</th>
             <th class="mat-header-cell px-1 py-2" i18n>Type</th>
             <th class="mat-header-cell px-1 py-2" i18n>Symbol</th>
             <th class="mat-header-cell px-1 py-2" i18n>Data Source</th>
@@ -105,19 +105,18 @@
                   <ion-icon name="ellipsis-vertical"></ion-icon>
                 </button>
                 <mat-menu #accountMenu="matMenu" xPosition="before">
-                  <button i18n mat-menu-item (click)="onViewData(job.data)">
-                    View Data
+                  <button mat-menu-item (click)="onViewData(job.data)">
+                    <ng-container i18n>View Data</ng-container>
                   </button>
                   <button
-                    i18n
                     mat-menu-item
                     [disabled]="job.stacktrace?.length <= 0"
                     (click)="onViewStacktrace(job.stacktrace)"
                   >
-                    View Stacktrace
+                    <ng-container i18n>View Stacktrace</ng-container>
                   </button>
-                  <button i18n mat-menu-item (click)="onDeleteJob(job.id)">
-                    Delete Job
+                  <button mat-menu-item (click)="onDeleteJob(job.id)">
+                    <ng-container i18n>Delete Job</ng-container>
                   </button>
                 </mat-menu>
               </td>

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

@@ -9,7 +9,6 @@ import { GfMarketDataDetailDialogModule } from './market-data-detail-dialog/mark
   declarations: [AdminMarketDataDetailComponent],
   exports: [AdminMarketDataDetailComponent],
   imports: [CommonModule, GfLineChartModule, GfMarketDataDetailDialogModule],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfAdminMarketDataDetailModule {}

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

@@ -43,8 +43,8 @@
   </div>
   <div class="justify-content-end" mat-dialog-actions>
     <button i18n mat-button (click)="onCancel()">Cancel</button>
-    <button color="primary" i18n mat-flat-button (click)="onUpdate()">
-      Save
+    <button color="primary" mat-flat-button (click)="onUpdate()">
+      <ng-container i18n>Save</ng-container>
     </button>
   </div>
 </form>

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

@@ -11,7 +11,6 @@ import { MarketDataDetailDialog } from './market-data-detail-dialog.component';
 
 @NgModule({
   declarations: [MarketDataDetailDialog],
-  exports: [],
   imports: [
     CommonModule,
     FormsModule,
@@ -22,7 +21,6 @@ import { MarketDataDetailDialog } from './market-data-detail-dialog.component';
     MatInputModule,
     ReactiveFormsModule
   ],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfMarketDataDetailDialogModule {}

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

@@ -3,17 +3,27 @@ import {
   ChangeDetectorRef,
   Component,
   OnDestroy,
-  OnInit
+  OnInit,
+  ViewChild
 } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
+import { ActivatedRoute, Router } from '@angular/router';
 import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
-import { getDateFormatString } from '@ghostfolio/common/helper';
-import { UniqueAsset, User } from '@ghostfolio/common/interfaces';
+import { DATE_FORMAT, getDateFormatString } from '@ghostfolio/common/helper';
+import { Filter, UniqueAsset, User } from '@ghostfolio/common/interfaces';
 import { AdminMarketDataItem } from '@ghostfolio/common/interfaces/admin-market-data.interface';
-import { DataSource, MarketData } from '@prisma/client';
+import { AssetSubClass, DataSource } from '@prisma/client';
+import { format, parseISO } from 'date-fns';
+import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { distinctUntilChanged, switchMap, takeUntil } from 'rxjs/operators';
+
+import { AssetProfileDialog } from './asset-profile-dialog/asset-profile-dialog.component';
+import { AssetProfileDialogParams } from './asset-profile-dialog/interfaces/interfaces';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -22,24 +32,77 @@ import { takeUntil } from 'rxjs/operators';
   templateUrl: './admin-market-data.html'
 })
 export class AdminMarketDataComponent implements OnDestroy, OnInit {
+  @ViewChild(MatSort) sort: MatSort;
+
+  public activeFilters: Filter[] = [];
+  public allFilters: Filter[] = [
+    AssetSubClass.BOND,
+    AssetSubClass.COMMODITY,
+    AssetSubClass.CRYPTOCURRENCY,
+    AssetSubClass.ETF,
+    AssetSubClass.MUTUALFUND,
+    AssetSubClass.PRECIOUS_METAL,
+    AssetSubClass.PRIVATE_EQUITY,
+    AssetSubClass.STOCK
+  ].map((id) => {
+    return {
+      id,
+      label: id,
+      type: 'ASSET_SUB_CLASS'
+    };
+  });
   public currentDataSource: DataSource;
   public currentSymbol: string;
+  public dataSource: MatTableDataSource<AdminMarketDataItem> =
+    new MatTableDataSource();
   public defaultDateFormat: string;
-  public marketData: AdminMarketDataItem[] = [];
-  public marketDataDetails: MarketData[] = [];
+  public deviceType: string;
+  public displayedColumns = [
+    'symbol',
+    'dataSource',
+    'assetClass',
+    'assetSubClass',
+    'date',
+    'activityCount',
+    'marketDataItemCount',
+    'countriesCount',
+    'sectorsCount',
+    'actions'
+  ];
+  public filters$ = new Subject<Filter[]>();
+  public isLoading = false;
+  public placeholder = '';
   public user: User;
 
   private unsubscribeSubject = new Subject<void>();
 
-  /**
-   * @constructor
-   */
   public constructor(
     private adminService: AdminService,
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
+    private deviceService: DeviceDetectorService,
+    private dialog: MatDialog,
+    private route: ActivatedRoute,
+    private router: Router,
     private userService: UserService
   ) {
+    this.route.queryParams
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((params) => {
+        if (
+          params['assetProfileDialog'] &&
+          params['dataSource'] &&
+          params['dateOfFirstActivity'] &&
+          params['symbol']
+        ) {
+          this.openAssetProfileDialog({
+            dataSource: params['dataSource'],
+            dateOfFirstActivity: params['dateOfFirstActivity'],
+            symbol: params['symbol']
+          });
+        }
+      });
+
     this.userService.stateChanged
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((state) => {
@@ -53,11 +116,32 @@ export class AdminMarketDataComponent implements OnDestroy, OnInit {
       });
   }
 
-  /**
-   * Initializes the controller
-   */
   public ngOnInit() {
-    this.fetchAdminMarketData();
+    this.deviceType = this.deviceService.getDeviceInfo().deviceType;
+
+    this.filters$
+      .pipe(
+        distinctUntilChanged(),
+        switchMap((filters) => {
+          this.isLoading = true;
+          this.activeFilters = filters;
+          this.placeholder =
+            this.activeFilters.length <= 0 ? $localize`Filter by...` : '';
+
+          return this.dataService.fetchAdminMarketData({
+            filters: this.activeFilters
+          });
+        }),
+        takeUntil(this.unsubscribeSubject)
+      )
+      .subscribe(({ marketData }) => {
+        this.dataSource = new MatTableDataSource(marketData);
+        this.dataSource.sort = this.sort;
+
+        this.isLoading = false;
+
+        this.changeDetectorRef.markForCheck();
+      });
   }
 
   public onDeleteProfileData({ dataSource, symbol }: UniqueAsset) {
@@ -81,28 +165,19 @@ export class AdminMarketDataComponent implements OnDestroy, OnInit {
       .subscribe(() => {});
   }
 
-  public onMarketDataChanged(withRefresh: boolean = false) {
-    if (withRefresh) {
-      this.fetchAdminMarketData();
-      this.fetchAdminMarketDataBySymbol({
-        dataSource: this.currentDataSource,
-        symbol: this.currentSymbol
-      });
-    }
-  }
-
-  public setCurrentProfile({ dataSource, symbol }: UniqueAsset) {
-    this.marketDataDetails = [];
-
-    if (this.currentSymbol === symbol) {
-      this.currentDataSource = undefined;
-      this.currentSymbol = '';
-    } else {
-      this.currentDataSource = dataSource;
-      this.currentSymbol = symbol;
-
-      this.fetchAdminMarketDataBySymbol({ dataSource, symbol });
-    }
+  public onOpenAssetProfileDialog({
+    dataSource,
+    dateOfFirstActivity,
+    symbol
+  }: UniqueAsset & { dateOfFirstActivity: string }) {
+    this.router.navigate([], {
+      queryParams: {
+        dataSource,
+        symbol,
+        assetProfileDialog: true,
+        dateOfFirstActivity: format(parseISO(dateOfFirstActivity), DATE_FORMAT)
+      }
+    });
   }
 
   public ngOnDestroy() {
@@ -110,25 +185,40 @@ export class AdminMarketDataComponent implements OnDestroy, OnInit {
     this.unsubscribeSubject.complete();
   }
 
-  private fetchAdminMarketData() {
-    this.dataService
-      .fetchAdminMarketData()
+  private openAssetProfileDialog({
+    dataSource,
+    dateOfFirstActivity,
+    symbol
+  }: {
+    dataSource: DataSource;
+    dateOfFirstActivity: string;
+    symbol: string;
+  }) {
+    this.userService
+      .get()
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(({ marketData }) => {
-        this.marketData = marketData;
+      .subscribe((user) => {
+        this.user = user;
 
-        this.changeDetectorRef.markForCheck();
-      });
-  }
+        const dialogRef = this.dialog.open(AssetProfileDialog, {
+          autoFocus: false,
+          data: <AssetProfileDialogParams>{
+            dataSource,
+            dateOfFirstActivity,
+            symbol,
+            deviceType: this.deviceType,
+            locale: this.user?.settings?.locale
+          },
+          height: this.deviceType === 'mobile' ? '97.5vh' : '80vh',
+          width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+        });
 
-  private fetchAdminMarketDataBySymbol({ dataSource, symbol }: UniqueAsset) {
-    this.adminService
-      .fetchAdminMarketDataBySymbol({ dataSource, symbol })
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(({ marketData }) => {
-        this.marketDataDetails = marketData;
-
-        this.changeDetectorRef.markForCheck();
+        dialogRef
+          .afterClosed()
+          .pipe(takeUntil(this.unsubscribeSubject))
+          .subscribe(() => {
+            this.router.navigate(['.'], { relativeTo: this.route });
+          });
       });
   }
 }

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

@@ -1,79 +1,147 @@
 <div class="container">
   <div class="row">
     <div class="col">
-      <table class="gf-table w-100">
-        <thead>
-          <tr class="mat-header-row">
-            <th class="mat-header-cell px-1 py-2" i18n>Symbol</th>
-            <th class="mat-header-cell px-1 py-2" i18n>Data Source</th>
-            <th class="mat-header-cell px-1 py-2" i18n>First Activity</th>
-            <th class="mat-header-cell px-1 py-2" i18n>Activity Count</th>
-            <th class="mat-header-cell px-1 py-2" i18n>Historical Data</th>
-            <th class="mat-header-cell px-1 py-2"></th>
-          </tr>
-        </thead>
-        <tbody>
-          <ng-container *ngFor="let item of marketData; let i = index">
-            <tr
-              class="cursor-pointer mat-row"
-              (click)="setCurrentProfile({ dataSource: item.dataSource, symbol: item.symbol })"
+      <gf-activities-filter
+        [allFilters]="allFilters"
+        [isLoading]="isLoading"
+        [placeholder]="placeholder"
+        (valueChanged)="filters$.next($event)"
+      ></gf-activities-filter>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col">
+      <table
+        class="gf-table w-100"
+        matSort
+        matSortActive="symbol"
+        matSortDirection="asc"
+        mat-table
+        [dataSource]="dataSource"
+      >
+        <ng-container matColumnDef="symbol">
+          <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
+            <ng-container i18n>Symbol</ng-container>
+          </th>
+          <td *matCellDef="let element" class="px-1" mat-cell>
+            {{ element.symbol }}
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="dataSource">
+          <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
+            <ng-container i18n>Data Source</ng-container>
+          </th>
+          <td *matCellDef="let element" class="px-1" mat-cell>
+            {{ element.dataSource }}
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="assetClass">
+          <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
+            <ng-container i18n>Asset Class</ng-container>
+          </th>
+          <td *matCellDef="let element" class="px-1" mat-cell>
+            {{ element.assetClass }}
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="assetSubClass">
+          <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
+            <ng-container i18n>Asset Sub Class</ng-container>
+          </th>
+          <td *matCellDef="let element" class="px-1" mat-cell>
+            {{ element.assetSubClass }}
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="date">
+          <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
+            <ng-container i18n>First Activity</ng-container>
+          </th>
+          <td *matCellDef="let element" class="px-1" mat-cell>
+            {{ (element.date | date: defaultDateFormat) ?? '' }}
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="activityCount">
+          <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
+            <ng-container i18n>Activity Count</ng-container>
+          </th>
+          <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+            {{ element.activityCount }}
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="marketDataItemCount">
+          <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
+            <ng-container i18n>Historical Data</ng-container>
+          </th>
+          <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+            {{ element.marketDataItemCount }}
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="countriesCount">
+          <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
+            <ng-container i18n>Countries Count</ng-container>
+          </th>
+          <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+            {{ element.countriesCount }}
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="sectorsCount">
+          <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
+            <ng-container i18n>Sectors Count</ng-container>
+          </th>
+          <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+            {{ element.sectorsCount }}
+          </td>
+        </ng-container>
+
+        <ng-container matColumnDef="actions">
+          <th *matHeaderCellDef class="px-1 text-center" mat-header-cell></th>
+          <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+            <button
+              class="mx-1 no-min-width px-2"
+              mat-button
+              [matMenuTriggerFor]="accountMenu"
+              (click)="$event.stopPropagation()"
             >
-              <td class="mat-cell px-1 py-2">{{ item.symbol }}</td>
-              <td class="mat-cell px-1 py-2">{{ item.dataSource }}</td>
-              <td class="mat-cell px-1 py-2">
-                {{ (item.date | date: defaultDateFormat) ?? '' }}
-              </td>
-              <td class="mat-cell px-1 py-2">{{ item.activityCount }}</td>
-              <td class="mat-cell px-1 py-2">{{ item.marketDataItemCount }}</td>
-              <td class="mat-cell px-1 py-2">
-                <button
-                  class="mx-1 no-min-width px-2"
-                  mat-button
-                  [matMenuTriggerFor]="accountMenu"
-                  (click)="$event.stopPropagation()"
-                >
-                  <ion-icon name="ellipsis-vertical"></ion-icon>
-                </button>
-                <mat-menu #accountMenu="matMenu" xPosition="before">
-                  <button
-                    i18n
-                    mat-menu-item
-                    (click)="onGatherSymbol({dataSource: item.dataSource, symbol: item.symbol})"
-                  >
-                    Gather Data
-                  </button>
-                  <button
-                    i18n
-                    mat-menu-item
-                    (click)="onGatherProfileDataBySymbol({dataSource: item.dataSource, symbol: item.symbol})"
-                  >
-                    Gather Profile Data
-                  </button>
-                  <button
-                    i18n
-                    mat-menu-item
-                    [disabled]="item.activityCount !== 0"
-                    (click)="onDeleteProfileData({dataSource: item.dataSource, symbol: item.symbol})"
-                  >
-                    Delete Profile Data
-                  </button>
-                </mat-menu>
-              </td>
-            </tr>
-            <tr *ngIf="currentSymbol === item.symbol" class="mat-row">
-              <td class="p-1" colspan="6">
-                <gf-admin-market-data-detail
-                  [dataSource]="item.dataSource"
-                  [dateOfFirstActivity]="item.date"
-                  [locale]="user?.settings?.locale"
-                  [marketData]="marketDataDetails"
-                  [symbol]="item.symbol"
-                  (marketDataChanged)="onMarketDataChanged($event)"
-                ></gf-admin-market-data-detail>
-              </td>
-            </tr>
-          </ng-container>
-        </tbody>
+              <ion-icon name="ellipsis-vertical"></ion-icon>
+            </button>
+            <mat-menu #accountMenu="matMenu" xPosition="before">
+              <button
+                mat-menu-item
+                (click)="onGatherSymbol({dataSource: element.dataSource, symbol: element.symbol})"
+              >
+                <ng-container i18n>Gather Data</ng-container>
+              </button>
+              <button
+                mat-menu-item
+                (click)="onGatherProfileDataBySymbol({dataSource: element.dataSource, symbol: element.symbol})"
+              >
+                <ng-container i18n>Gather Profile Data</ng-container>
+              </button>
+              <button
+                mat-menu-item
+                [disabled]="element.activityCount !== 0"
+                (click)="onDeleteProfileData({dataSource: element.dataSource, symbol: element.symbol})"
+              >
+                <ng-container i18n>Delete</ng-container>
+              </button>
+            </mat-menu>
+          </td>
+        </ng-container>
+
+        <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+        <tr
+          *matRowDef="let row; columns: displayedColumns"
+          class="cursor-pointer"
+          mat-row
+          (click)="onOpenAssetProfileDialog({ dateOfFirstActivity: row.date, dataSource: row.dataSource, symbol: row.symbol })"
+        ></tr>
       </table>
     </div>
   </div>

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

@@ -2,17 +2,23 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
-import { GfAdminMarketDataDetailModule } from '@ghostfolio/client/components/admin-market-data-detail/admin-market-data-detail.module';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+import { GfActivitiesFilterModule } from '@ghostfolio/ui/activities-filter/activities-filter.module';
 
 import { AdminMarketDataComponent } from './admin-market-data.component';
+import { GfAssetProfileDialogModule } from './asset-profile-dialog/assset-profile-dialog.module';
 
 @NgModule({
   declarations: [AdminMarketDataComponent],
   imports: [
     CommonModule,
-    GfAdminMarketDataDetailModule,
+    GfActivitiesFilterModule,
+    GfAssetProfileDialogModule,
     MatButtonModule,
-    MatMenuModule
+    MatMenuModule,
+    MatSortModule,
+    MatTableModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.scss

@@ -0,0 +1,7 @@
+:host {
+  display: block;
+
+  .mat-dialog-content {
+    max-height: unset;
+  }
+}

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

@@ -0,0 +1,73 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Inject,
+  OnDestroy,
+  OnInit
+} from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { AdminService } from '@ghostfolio/client/services/admin.service';
+import { UniqueAsset } from '@ghostfolio/common/interfaces';
+import { MarketData } from '@prisma/client';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { AssetProfileDialogParams } from './interfaces/interfaces';
+
+@Component({
+  host: { class: 'd-flex flex-column h-100' },
+  selector: 'gf-asset-profile-dialog',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: 'asset-profile-dialog.html',
+  styleUrls: ['./asset-profile-dialog.component.scss']
+})
+export class AssetProfileDialog implements OnDestroy, OnInit {
+  public marketDataDetails: MarketData[] = [];
+
+  private unsubscribeSubject = new Subject<void>();
+
+  public constructor(
+    private adminService: AdminService,
+    private changeDetectorRef: ChangeDetectorRef,
+    public dialogRef: MatDialogRef<AssetProfileDialog>,
+    @Inject(MAT_DIALOG_DATA) public data: AssetProfileDialogParams
+  ) {}
+
+  public ngOnInit(): void {
+    this.initialize();
+  }
+
+  public onClose(): void {
+    this.dialogRef.close();
+  }
+
+  public onMarketDataChanged(withRefresh: boolean = false) {
+    if (withRefresh) {
+      this.initialize();
+    }
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
+  private fetchAdminMarketDataBySymbol({ dataSource, symbol }: UniqueAsset) {
+    this.adminService
+      .fetchAdminMarketDataBySymbol({ dataSource, symbol })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(({ marketData }) => {
+        this.marketDataDetails = marketData;
+
+        this.changeDetectorRef.markForCheck();
+      });
+  }
+
+  private initialize() {
+    this.fetchAdminMarketDataBySymbol({
+      dataSource: this.data.dataSource,
+      symbol: this.data.symbol
+    });
+  }
+}

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.html

@@ -0,0 +1,24 @@
+<gf-dialog-header
+  mat-dialog-title
+  position="center"
+  [deviceType]="data.deviceType"
+  [title]="data.symbol"
+  (closeButtonClicked)="onClose()"
+></gf-dialog-header>
+
+<div class="flex-grow-1" mat-dialog-content>
+  <gf-admin-market-data-detail
+    [dataSource]="data.dataSource"
+    [dateOfFirstActivity]="data.dateOfFirstActivity"
+    [locale]="data.locale"
+    [marketData]="marketDataDetails"
+    [symbol]="data.symbol"
+    (marketDataChanged)="onMarketDataChanged($event)"
+  ></gf-admin-market-data-detail>
+</div>
+
+<gf-dialog-footer
+  mat-dialog-actions
+  [deviceType]="data.deviceType"
+  (closeButtonClicked)="onClose()"
+></gf-dialog-footer>

apps/client/src/app/components/admin-market-data/asset-profile-dialog/assset-profile-dialog.module.ts

@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialogModule } from '@angular/material/dialog';
+import { GfAdminMarketDataDetailModule } from '@ghostfolio/client/components/admin-market-data-detail/admin-market-data-detail.module';
+import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
+import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
+
+import { AssetProfileDialog } from './asset-profile-dialog.component';
+
+@NgModule({
+  declarations: [AssetProfileDialog],
+  imports: [
+    CommonModule,
+    GfAdminMarketDataDetailModule,
+    GfDialogFooterModule,
+    GfDialogHeaderModule,
+    MatButtonModule,
+    MatDialogModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GfAssetProfileDialogModule {}

apps/client/src/app/components/admin-market-data/asset-profile-dialog/interfaces/interfaces.ts

@@ -0,0 +1,9 @@
+import { DataSource } from '@prisma/client';
+
+export interface AssetProfileDialogParams {
+  dateOfFirstActivity: string;
+  dataSource: DataSource;
+  deviceType: string;
+  locale: string;
+  symbol: string;
+}

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

@@ -42,9 +42,6 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
 
   private unsubscribeSubject = new Subject<void>();
 
-  /**
-   * @constructor
-   */
   public constructor(
     private adminService: AdminService,
     private cacheService: CacheService,
@@ -78,9 +75,6 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
       });
   }
 
-  /**
-   * Initializes the controller
-   */
   public ngOnInit() {
     this.fetchAdminData();
   }
@@ -109,7 +103,7 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
   }
 
   public onAddCurrency() {
-    const currency = prompt('Please add a currency:');
+    const currency = prompt($localize`Please add a currency:`);
 
     if (currency) {
       const currencies = uniq([...this.customCurrencies, currency]);
@@ -122,7 +116,9 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
   }
 
   public onDeleteCoupon(aCouponCode: string) {
-    const confirmation = confirm('Do you really want to delete this coupon?');
+    const confirmation = confirm(
+      $localize`Do you really want to delete this coupon?`
+    );
 
     if (confirmation === true) {
       const coupons = this.coupons.filter((coupon) => {
@@ -133,7 +129,9 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
   }
 
   public onDeleteCurrency(aCurrency: string) {
-    const confirmation = confirm('Do you really want to delete this currency?');
+    const confirmation = confirm(
+      $localize`Do you really want to delete this currency?`
+    );
 
     if (confirmation === true) {
       const currencies = this.customCurrencies.filter((currency) => {
@@ -148,7 +146,9 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
   }
 
   public onFlushCache() {
-    const confirmation = confirm('Do you really want to flush the cache?');
+    const confirmation = confirm(
+      $localize`Do you really want to flush the cache?`
+    );
 
     if (confirmation === true) {
       this.cacheService
@@ -196,7 +196,7 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
   }
 
   public onSetSystemMessage() {
-    const systemMessage = prompt('Please set your system message:');
+    const systemMessage = prompt($localize`Please set your system message:`);
 
     if (systemMessage) {
       this.putSystemMessage(systemMessage);

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

@@ -8,7 +8,7 @@
             <div class="w-50">{{ userCount }}</div>
           </div>
           <div class="d-flex my-3">
-            <div class="w-50" i18n>Transaction Count</div>
+            <div class="w-50" i18n>Activity Count</div>
             <div class="w-50">
               <ng-container *ngIf="transactionCount">
                 {{ transactionCount }} ({{ transactionCount / userCount | number
@@ -17,7 +17,7 @@
             </div>
           </div>
           <div class="d-flex my-3">
-            <div class="w-50" i18n>Data Gathering</div>
+            <div class="w-50" i18n>Data Management</div>
             <div class="w-50">
               <div class="overflow-hidden">
                 <div class="mb-2">

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

@@ -21,9 +21,6 @@ export class AdminUsersComponent implements OnDestroy, OnInit {
 
   private unsubscribeSubject = new Subject<void>();
 
-  /**
-   * @constructor
-   */
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
@@ -38,9 +35,6 @@ export class AdminUsersComponent implements OnDestroy, OnInit {
       });
   }
 
-  /**
-   * Initializes the controller
-   */
   public ngOnInit() {
     this.fetchAdminData();
   }
@@ -61,7 +55,9 @@ export class AdminUsersComponent implements OnDestroy, OnInit {
   }
 
   public onDeleteUser(aId: string) {
-    const confirmation = confirm('Do you really want to delete this user?');
+    const confirmation = confirm(
+      $localize`Do you really want to delete this user?`
+    );
 
     if (confirmation) {
       this.dataService

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

@@ -7,17 +7,17 @@
             <tr class="mat-header-row">
               <th class="mat-header-cell px-1 py-2 text-right">#</th>
               <th class="mat-header-cell px-1 py-2" i18n>User</th>
-              <th class="mat-header-cell px-1 py-2 text-right" i18n>
-                Registration
+              <th class="mat-header-cell px-1 py-2 text-right">
+                <ng-container i18n>Registration</ng-container>
               </th>
-              <th class="mat-header-cell px-1 py-2 text-right" i18n>
-                Accounts
+              <th class="mat-header-cell px-1 py-2 text-right">
+                <ng-container i18n>Accounts</ng-container>
               </th>
-              <th class="mat-header-cell px-1 py-2 text-right" i18n>
-                Activities
+              <th class="mat-header-cell px-1 py-2 text-right">
+                <ng-container i18n>Activities</ng-container>
               </th>
-              <th class="mat-header-cell px-1 py-2 text-right" i18n>
-                Engagement per Day
+              <th class="mat-header-cell px-1 py-2 text-right">
+                <ng-container i18n>Engagement per Day</ng-container>
               </th>
               <th class="mat-header-cell px-1 py-2" i18n>Last Request</th>
               <th class="mat-header-cell px-1 py-2"></th>
@@ -29,17 +29,15 @@
               <td class="mat-cell px-1 py-2">
                 <div class="d-flex align-items-center">
                   <span class="d-none d-sm-inline-block"
-                    >{{ userItem.alias || userItem.id }}</span
+                    >{{ userItem.id }}</span
                   >
                   <span class="d-inline-block d-sm-none"
-                    >{{ userItem.alias || (userItem.id | slice:0:5) +
-                    '...' }}</span
+                    >{{ (userItem.id | slice:0:5) + '...' }}</span
                   >
-                  <ion-icon
+                  <gf-premium-indicator
                     *ngIf="userItem?.subscription?.type === 'Premium'"
-                    class="ml-1 text-muted"
-                    name="diamond-outline"
-                  ></ion-icon>
+                    class="ml-1"
+                  ></gf-premium-indicator>
                 </div>
               </td>
               <td class="mat-cell px-1 py-2 text-right">

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

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
+import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 import { GfValueModule } from '@ghostfolio/ui/value';
 
 import { AdminUsersComponent } from './admin-users.component';
@@ -9,7 +10,13 @@ import { AdminUsersComponent } from './admin-users.component';
 @NgModule({
   declarations: [AdminUsersComponent],
   exports: [],
-  imports: [CommonModule, GfValueModule, MatButtonModule, MatMenuModule],
+  imports: [
+    CommonModule,
+    GfPremiumIndicatorModule,
+    GfValueModule,
+    MatButtonModule,
+    MatMenuModule
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfAdminUsersModule {}

apps/client/src/app/components/dialog-footer/dialog-footer.module.ts

@@ -8,7 +8,6 @@ import { DialogFooterComponent } from './dialog-footer.component';
   declarations: [DialogFooterComponent],
   exports: [DialogFooterComponent],
   imports: [CommonModule, MatButtonModule],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfDialogFooterModule {}

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

@@ -8,7 +8,6 @@ import { DialogHeaderComponent } from './dialog-header.component';
   declarations: [DialogHeaderComponent],
   exports: [DialogHeaderComponent],
   imports: [CommonModule, MatButtonModule],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfDialogHeaderModule {}

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

@@ -66,7 +66,9 @@
       >Resources</a
     >
     <a
-      *ngIf="hasPermissionForSubscription"
+      *ngIf="
+        hasPermissionForSubscription && user?.subscription?.type === 'Basic'
+      "
       class="d-none d-sm-block mx-1"
       i18n
       mat-flat-button
@@ -122,13 +124,11 @@
                 : 'radio-button-on-outline'
             "
           ></ion-icon>
-          <span *ngIf="user?.alias">{{ user.alias }}</span>
-          <span *ngIf="!user?.alias" i18n><span></span>Me</span>
+          <span i18n>Me</span>
         </button>
         <button
           *ngFor="let accessItem of user?.access"
           class="align-items-center d-flex"
-          disabled="false"
           mat-menu-item
           (click)="impersonateAccount(accessItem.id)"
         >
@@ -203,7 +203,9 @@
         >Resources</a
       >
       <a
-        *ngIf="hasPermissionForSubscription"
+        *ngIf="
+          hasPermissionForSubscription && user?.subscription?.type === 'Basic'
+        "
         class="d-block d-sm-none"
         i18n
         mat-menu-item
@@ -265,23 +267,34 @@
       [routerLink]="['/pricing']"
       >Pricing</a
     >
+    <a
+      *ngIf="hasPermissionToAccessFearAndGreedIndex"
+      class="d-none d-sm-block mx-1"
+      i18n
+      mat-flat-button
+      [ngClass]="{
+        'font-weight-bold': currentRoute === 'markets',
+        'text-decoration-underline': currentRoute === 'markets'
+      }"
+      [routerLink]="['/markets']"
+      >Markets</a
+    >
     <a
       class="d-none d-sm-block mx-1 no-min-width px-1"
       href="https://github.com/ghostfolio/ghostfolio"
       mat-flat-button
       ><ion-icon name="logo-github"></ion-icon
     ></a>
-    <button class="mx-1" i18n mat-flat-button (click)="openLoginDialog()">
-      Sign In
+    <button class="mx-1" mat-flat-button (click)="openLoginDialog()">
+      <ng-container i18n>Sign in</ng-container>
     </button>
     <a
       *ngIf="currentRoute !== 'register' && !info?.isReadOnlyMode"
       class="d-none d-sm-block"
       color="primary"
-      i18n
       mat-flat-button
       [routerLink]="['/register']"
-      >Get Started
+      ><ng-container i18n>Get started</ng-container>
     </a>
   </ng-container>
 </mat-toolbar>

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

@@ -37,6 +37,7 @@ export class HeaderComponent implements OnChanges {
   public hasPermissionForSocialLogin: boolean;
   public hasPermissionForSubscription: boolean;
   public hasPermissionToAccessAdminControl: boolean;
+  public hasPermissionToAccessFearAndGreedIndex: boolean;
   public impersonationId: string;
   public isMenuOpen: boolean;
 
@@ -73,6 +74,11 @@ export class HeaderComponent implements OnChanges {
       this.user?.permissions,
       permissions.accessAdminControl
     );
+
+    this.hasPermissionToAccessFearAndGreedIndex = hasPermission(
+      this.info?.globalPermissions,
+      permissions.enableFearAndGreedIndex
+    );
   }
 
   public impersonateAccount(aId: string) {
@@ -103,7 +109,7 @@ export class HeaderComponent implements OnChanges {
       data: {
         accessToken: '',
         hasPermissionToUseSocialLogin: this.hasPermissionForSocialLogin,
-        title: 'Sign in'
+        title: $localize`Sign in`
       },
       width: '30rem'
     });
@@ -117,7 +123,7 @@ export class HeaderComponent implements OnChanges {
             .loginAnonymous(data?.accessToken)
             .pipe(
               catchError(() => {
-                alert('Oops! Incorrect Security Token.');
+                alert($localize`Oops! Incorrect Security Token.`);
 
                 return EMPTY;
               }),

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

@@ -21,7 +21,6 @@ import { HeaderComponent } from './header.component';
     MatToolbarModule,
     RouterModule
   ],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfHeaderModule {}

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

@@ -2,6 +2,7 @@ import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { PositionDetailDialog } from '@ghostfolio/client/components/position/position-detail-dialog/position-detail-dialog.component';
+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 {
@@ -9,7 +10,6 @@ import {
   SettingsStorageService
 } from '@ghostfolio/client/services/settings-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
-import { defaultDateRangeOptions } from '@ghostfolio/common/config';
 import { Position, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { DateRange } from '@ghostfolio/common/types';
@@ -27,7 +27,7 @@ import { PositionDetailDialogParams } from '../position/position-detail-dialog/i
 })
 export class HomeHoldingsComponent implements OnDestroy, OnInit {
   public dateRange: DateRange;
-  public dateRangeOptions = defaultDateRangeOptions;
+  public dateRangeOptions = ToggleComponent.DEFAULT_DATE_RANGE_OPTIONS;
   public deviceType: string;
   public hasImpersonationId: boolean;
   public hasPermissionToCreateOrder: boolean;
@@ -36,9 +36,6 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
 
   private unsubscribeSubject = new Subject<void>();
 
-  /**
-   * @constructor
-   */
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
@@ -50,7 +47,7 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
     private settingsStorageService: SettingsStorageService,
     private userService: UserService
   ) {
-    route.queryParams
+    this.route.queryParams
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((params) => {
         if (
@@ -81,9 +78,6 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
       });
   }
 
-  /**
-   * Initializes the controller
-   */
   public ngOnInit() {
     this.deviceType = this.deviceService.getDeviceInfo().deviceType;
 

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

@@ -11,7 +11,6 @@ import { HomeHoldingsComponent } from './home-holdings.component';
 
 @NgModule({
   declarations: [HomeHoldingsComponent],
-  exports: [],
   imports: [
     CommonModule,
     GfPositionDetailDialogModule,
@@ -21,7 +20,6 @@ import { HomeHoldingsComponent } from './home-holdings.component';
     MatCardModule,
     RouterModule
   ],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfHomeHoldingsModule {}

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

@@ -21,6 +21,8 @@ import { takeUntil } from 'rxjs/operators';
 export class HomeMarketComponent implements OnDestroy, OnInit {
   public benchmarks: Benchmark[];
   public fearAndGreedIndex: number;
+  public fearLabel = $localize`Fear`;
+  public greedLabel = $localize`Greed`;
   public hasPermissionToAccessFearAndGreedIndex: boolean;
   public historicalData: HistoricalDataItem[];
   public info: InfoItem;
@@ -30,9 +32,6 @@ export class HomeMarketComponent implements OnDestroy, OnInit {
 
   private unsubscribeSubject = new Subject<void>();
 
-  /**
-   * @constructor
-   */
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
@@ -47,52 +46,49 @@ export class HomeMarketComponent implements OnDestroy, OnInit {
         if (state?.user) {
           this.user = state.user;
 
-          this.hasPermissionToAccessFearAndGreedIndex = hasPermission(
-            this.user.permissions,
-            permissions.accessFearAndGreedIndex
-          );
-
-          if (this.hasPermissionToAccessFearAndGreedIndex) {
-            this.dataService
-              .fetchSymbolItem({
-                dataSource: this.info.fearAndGreedDataSource,
-                includeHistoricalData: this.numberOfDays,
-                symbol: ghostfolioFearAndGreedIndexSymbol
-              })
-              .pipe(takeUntil(this.unsubscribeSubject))
-              .subscribe(({ historicalData, marketPrice }) => {
-                this.fearAndGreedIndex = marketPrice;
-                this.historicalData = [
-                  ...historicalData,
-                  {
-                    date: resetHours(new Date()).toISOString(),
-                    value: marketPrice
-                  }
-                ];
-                this.isLoading = false;
-
-                this.changeDetectorRef.markForCheck();
-              });
-          }
-
-          this.dataService
-            .fetchBenchmarks()
-            .pipe(takeUntil(this.unsubscribeSubject))
-            .subscribe(({ benchmarks }) => {
-              this.benchmarks = benchmarks;
-
-              this.changeDetectorRef.markForCheck();
-            });
-
           this.changeDetectorRef.markForCheck();
         }
       });
   }
 
-  /**
-   * Initializes the controller
-   */
-  public ngOnInit() {}
+  public ngOnInit() {
+    this.hasPermissionToAccessFearAndGreedIndex = hasPermission(
+      this.info?.globalPermissions,
+      permissions.enableFearAndGreedIndex
+    );
+
+    if (this.hasPermissionToAccessFearAndGreedIndex) {
+      this.dataService
+        .fetchSymbolItem({
+          dataSource: this.info.fearAndGreedDataSource,
+          includeHistoricalData: this.numberOfDays,
+          symbol: ghostfolioFearAndGreedIndexSymbol
+        })
+        .pipe(takeUntil(this.unsubscribeSubject))
+        .subscribe(({ historicalData, marketPrice }) => {
+          this.fearAndGreedIndex = marketPrice;
+          this.historicalData = [
+            ...historicalData,
+            {
+              date: resetHours(new Date()).toISOString(),
+              value: marketPrice
+            }
+          ];
+
+          this.changeDetectorRef.markForCheck();
+        });
+    }
+
+    this.dataService
+      .fetchBenchmarks()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(({ benchmarks }) => {
+        this.benchmarks = benchmarks;
+        this.isLoading = false;
+
+        this.changeDetectorRef.markForCheck();
+      });
+  }
 
   public ngOnDestroy() {
     this.unsubscribeSubject.next();

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

@@ -9,13 +9,13 @@
         class="mb-3"
         symbol="Fear & Greed Index"
         yMax="100"
-        yMaxLabel="Greed"
         yMin="0"
-        yMinLabel="Fear"
         [historicalDataItems]="historicalData"
         [locale]="user?.settings?.locale"
         [showXAxis]="true"
         [showYAxis]="true"
+        [yMaxLabel]="greedLabel"
+        [yMinLabel]="fearLabel"
       ></gf-line-chart>
       <gf-fear-and-greed-index
         class="d-flex justify-content-center"
@@ -28,16 +28,18 @@
   <div class="mb-3 row">
     <div class="col-xs-12 col-md-8 offset-md-2">
       <gf-benchmark
-        *ngFor="let benchmark of benchmarks"
-        class="py-2"
-        [benchmark]="benchmark"
+        [benchmarks]="benchmarks"
         [locale]="user?.settings?.locale"
       ></gf-benchmark>
-      <gf-benchmark
-        *ngIf="!benchmarks"
-        class="py-2"
-        [benchmark]="undefined"
-      ></gf-benchmark>
+      <ngx-skeleton-loader
+        *ngIf="isLoading"
+        animation="pulse"
+        class="px-2 py-3"
+        [theme]="{
+          height: '1.5rem',
+          width: '100%'
+        }"
+      ></ngx-skeleton-loader>
     </div>
   </div>
 </div>

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

@@ -3,19 +3,20 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { GfFearAndGreedIndexModule } from '@ghostfolio/client/components/fear-and-greed-index/fear-and-greed-index.module';
 import { GfBenchmarkModule } from '@ghostfolio/ui/benchmark/benchmark.module';
 import { GfLineChartModule } from '@ghostfolio/ui/line-chart/line-chart.module';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { HomeMarketComponent } from './home-market.component';
 
 @NgModule({
   declarations: [HomeMarketComponent],
-  exports: [],
+  exports: [HomeMarketComponent],
   imports: [
     CommonModule,
     GfBenchmarkModule,
     GfFearAndGreedIndexModule,
-    GfLineChartModule
+    GfLineChartModule,
+    NgxSkeletonLoaderModule
   ],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfHomeMarketModule {}

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

@@ -1,4 +1,5 @@
 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 {
@@ -6,7 +7,6 @@ import {
   SettingsStorageService
 } from '@ghostfolio/client/services/settings-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
-import { defaultDateRangeOptions } from '@ghostfolio/common/config';
 import {
   PortfolioPerformance,
   UniqueAsset,
@@ -26,7 +26,7 @@ import { takeUntil } from 'rxjs/operators';
 })
 export class HomeOverviewComponent implements OnDestroy, OnInit {
   public dateRange: DateRange;
-  public dateRangeOptions = defaultDateRangeOptions;
+  public dateRangeOptions = ToggleComponent.DEFAULT_DATE_RANGE_OPTIONS;
   public deviceType: string;
   public errors: UniqueAsset[];
   public hasError: boolean;
@@ -42,9 +42,6 @@ export class HomeOverviewComponent implements OnDestroy, OnInit {
 
   private unsubscribeSubject = new Subject<void>();
 
-  /**
-   * @constructor
-   */
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
@@ -69,9 +66,6 @@ export class HomeOverviewComponent implements OnDestroy, OnInit {
       });
   }
 
-  /**
-   * Initializes the controller
-   */
   public ngOnInit() {
     this.deviceType = this.deviceService.getDeviceInfo().deviceType;
 

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

@@ -2,26 +2,29 @@
   class="align-items-center container d-flex flex-column h-100 justify-content-center overview p-0 position-relative"
 >
   <div class="row w-100">
-    <div class="chart-container col">
-      <gf-line-chart
-        class="position-absolute"
-        symbol="Performance"
-        [currency]="user?.settings?.baseCurrency"
-        [historicalDataItems]="historicalDataItems"
-        [locale]="user?.settings?.locale"
-        [ngClass]="{ 'pr-3': deviceType === 'mobile' }"
-        [showGradient]="true"
-        [showLoader]="false"
-        [showXAxis]="false"
-        [showYAxis]="false"
-      ></gf-line-chart>
-      <div
-        *ngIf="hasPermissionToCreateOrder && historicalDataItems?.length === 0"
-        class="align-items-center d-flex h-100 justify-content-center w-100"
-      >
-        <div class="d-flex justify-content-center">
-          <gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
+    <div class="col p-0">
+      <div class="chart-container mx-auto position-relative">
+        <div
+          *ngIf="hasPermissionToCreateOrder && historicalDataItems?.length === 0"
+          class="align-items-center d-flex h-100 justify-content-center w-100"
+        >
+          <div class="d-flex justify-content-center">
+            <gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
+          </div>
         </div>
+        <gf-line-chart
+          class="position-absolute"
+          symbol="Performance"
+          [currency]="user?.settings?.baseCurrency"
+          [historicalDataItems]="historicalDataItems"
+          [hidden]="historicalDataItems?.length === 0"
+          [locale]="user?.settings?.locale"
+          [ngClass]="{ 'pr-3': deviceType === 'mobile' }"
+          [showGradient]="true"
+          [showLoader]="false"
+          [showXAxis]="false"
+          [showYAxis]="false"
+        ></gf-line-chart>
       </div>
     </div>
   </div>

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

@@ -10,7 +10,6 @@ import { HomeOverviewComponent } from './home-overview.component';
 
 @NgModule({
   declarations: [HomeOverviewComponent],
-  exports: [],
   imports: [
     CommonModule,
     GfLineChartModule,
@@ -19,7 +18,6 @@ import { HomeOverviewComponent } from './home-overview.component';
     GfToggleModule,
     RouterModule
   ],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfHomeOverviewModule {}

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

@@ -5,7 +5,8 @@
 
   .chart-container {
     aspect-ratio: 16 / 9;
-    max-height: 50vh;
+    height: auto;
+    max-width: 50rem;
 
     // Fallback for aspect-ratio (using padding hack)
     @supports not (aspect-ratio: 16 / 9) {

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

@@ -21,9 +21,6 @@ export class HomeSummaryComponent implements OnDestroy, OnInit {
 
   private unsubscribeSubject = new Subject<void>();
 
-  /**
-   * @constructor
-   */
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
@@ -46,9 +43,6 @@ export class HomeSummaryComponent implements OnDestroy, OnInit {
       });
   }
 
-  /**
-   * Initializes the controller
-   */
   public ngOnInit() {
     this.impersonationStorageService
       .onChangeHasImpersonation()

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

@@ -8,14 +8,12 @@ import { HomeSummaryComponent } from './home-summary.component';
 
 @NgModule({
   declarations: [HomeSummaryComponent],
-  exports: [],
   imports: [
     CommonModule,
     GfPortfolioSummaryModule,
     MatCardModule,
     RouterModule
   ],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfHomeSummaryModule {}