Release 1.208.0 (#1415)

* Add pagination to activities table

.github/ISSUE_TEMPLATE/bug_report.md

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

.prettierrc

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

.vscode/launch.json

@@ -5,11 +5,11 @@
       "name": "Debug Jest File",
       "type": "node",
       "request": "launch",
-      "program": "${workspaceFolder}/node_modules/@angular/cli/bin/ng",
+      "program": "${workspaceFolder}/node_modules/@nrwl/cli/bin/nx",
       "args": [
         "test",
         "--codeCoverage=false",
-        "--testFile=${workspaceFolder}/apps/api/src/models/portfolio.spec.ts"
+        "--testFile=${workspaceFolder}/apps/api/src/app/portfolio/portfolio-calculator-novn-buy-and-sell.spec.ts"
       ],
       "cwd": "${workspaceFolder}",
       "console": "internalConsole"

CHANGELOG.md

@@ -5,6 +5,140 @@ 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.208.0 - 03.11.2022
+
+### Added
+
+- Added pagination to the activities table
+
+### Changed
+
+- Restructured the actions in the admin control panel
+
+### Fixed
+
+- Fixed the calculation in the portfolio evolution chart
+
+## 1.207.0 - 31.10.2022
+
+### Added
+
+- Added support for translated labels of asset and asset sub class
+- Added support for dates in _ISO 8601_ date format (`YYYY-MM-DD`) in the activities import
+
+### Changed
+
+- Darkened the background color of the dark mode
+
+### Fixed
+
+- Fixed the public page
+- Improved the loading indicator of the portfolio evolution chart
+
+## 1.206.2 - 20.10.2022
+
+### Changed
+
+- Fixed the `rxjs` version to `7.5.6` (resolutions)
+- Migrated the `angular.json` to `project.json` files in the `Nx` workspace
+- Upgraded `nestjs` from version `9.0.7` to `9.1.4`
+- Upgraded `Nx` from version `14.6.4` to `15.0.0`
+
+### Fixed
+
+- Fixed the performance calculation including `SELL` activities with a significant performance gain
+
+## 1.205.2 - 16.10.2022
+
+### Changed
+
+- Persisted the language on url change
+- Improved the portfolio evolution chart
+- Refactored the appearance (dark mode) in user settings (from `appearance` to `colorScheme`)
+- Improved the wording on the landing page
+
+## 1.204.1 - 15.10.2022
+
+### Added
+
+- Added support to change the appearance (dark mode) in user settings
+- Added the total amount chart to the investment timeline
+- Setup the `prettier` plugin `prettier-plugin-organize-attributes`
+
+### Changed
+
+- Respected the current date in the _FIRE_ calculator
+- Simplified the settings management in the admin control panel
+- Renamed the data source type `RAKUTEN` to `RAPID_API`
+
+### Fixed
+
+- Fixed some links in the blog posts
+- Fixed the alignment of the value component on the allocations page
+
+### Todo
+
+- Rename the environment variable from `RAKUTEN_RAPID_API_KEY` to `RAPID_API_API_KEY`
+
+## 1.203.0 - 08.10.2022
+
+### Added
+
+- Supported a progressive line animation in the line chart component
+
+### Changed
+
+- Moved the benchmark comparator from experimental to general availability
+- Improved the user interface of the benchmark comparator
+
+### Fixed
+
+- Fixed an issue in the performance and chart calculation of today
+- Fixed the alignment of the value component in the admin control panel
+
+## 1.202.0 - 07.10.2022
+
+### Added
+
+- Added support for a translated 4% rule in the _FIRE_ section
+
+### Changed
+
+- Improved the caching of the benchmarks in the markets overview (only cache if fetching was successful)
+- Improved the wording in the twitter bot service
+
+### Fixed
+
+- Fixed the support for cryptocurrencies having a symbol with less than 3 characters (e.g. `SC-USD`)
+- Fixed the text truncation in the value component
+
+## 1.201.0 - 01.10.2022
+
+### Added
+
+- Added a blog post: _Hacktoberfest 2022_
+
+### Changed
+
+- Improved the usage of the value component in the admin control panel
+- Improved the language localization for Español (`es`)
+
+### Fixed
+
+- Fixed the usage of the value component on the allocations page
+
+## 1.200.0 - 01.10.2022
+
+### Added
+
+- Added a mini statistics section to the landing page including pulls on _Docker Hub_
+- Added an _As seen in_ section to the landing page
+- Added support for an icon in the value component
+
+### Changed
+
+- Upgraded `prisma` from version `4.1.1` to `4.4.0`
+
 ## 1.199.1 - 27.09.2022
 
 ### Added
@@ -890,8 +1024,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
-- Display the value in base currency in the accounts table on mobile
-- Display the value in base currency in the activities table on mobile
+- Displayed the value in base currency in the accounts table on mobile
+- Displayed the value in base currency in the activities table on mobile
 - Renamed `orders` to `activities` in import and export functionality
 - Harmonized the algebraic sign of `currentGrossPerformancePercent` and `currentNetPerformancePercent` with `currentGrossPerformance` and `currentNetPerformance`
 - Improved the pricing page

Dockerfile

@@ -25,7 +25,6 @@ RUN yarn install
 COPY ./decorate-angular-cli.js decorate-angular-cli.js
 RUN node decorate-angular-cli.js
 
-COPY ./angular.json angular.json
 COPY ./nx.json nx.json
 COPY ./replace.build.js replace.build.js
 COPY ./jest.preset.js jest.preset.js

README.md

@@ -128,7 +128,7 @@ docker-compose --env-file ./.env -f docker/docker-compose.build.yml up -d
 Open http://localhost:3333 in your browser and accomplish these steps:
 
 1. Create a new user via _Get Started_ (this first user will get the role `ADMIN`)
-1. Go to the _Admin Control Panel_ and click _Gather All Data_ to fetch historical data
+1. Go to the _Market Data_ tab in the _Admin Control Panel_ and click _Gather All Data_ to fetch historical data
 1. Click _Sign out_ and check out the _Live Demo_
 
 #### Upgrade Version
@@ -158,7 +158,7 @@ Please follow the instructions of the Ghostfolio [Unraid Community App](https://
 1. Run `yarn database:setup` to initialize the database schema and populate your database with (example) data
 1. Start the server and the client (see [_Development_](#Development))
 1. Create a new user via _Get Started_ (this first user will get the role `ADMIN`)
-1. Go to the _Admin Control Panel_ and click _Gather All Data_ to fetch historical data
+1. Go to the _Market Data_ tab in the _Admin Control Panel_ and click _Gather All Data_ to fetch historical data
 1. Click _Sign out_ and check out the _Live Demo_
 
 ### Start Server
@@ -190,20 +190,22 @@ Run `yarn test`
 
 ## Public API
 
+### Authorization: Bearer Token
+
+Set the header for each request as follows:
+
+```
+"Authorization": "Bearer eyJh..."
+```
+
+You can get the _Bearer Token_ via `GET http://localhost:3333/api/v1/auth/anonymous/<INSERT_SECURITY_TOKEN_OF_ACCOUNT>` or `curl -s http://localhost:3333/api/v1/auth/anonymous/<INSERT_SECURITY_TOKEN_OF_ACCOUNT>`.
+
 ### Import Activities
 
 #### Request
 
 `POST http://localhost:3333/api/v1/import`
 
-#### Authorization: Bearer Token
-
-Set the header as follows:
-
-```
-"Authorization": "Bearer eyJh..."
-```
-
 #### Body
 
 ```

angular.json

@@ -1,395 +0,0 @@
-{
-  "version": 1,
-  "projects": {
-    "api": {
-      "$schema": "../../node_modules/nx/schemas/project-schema.json",
-      "root": "apps/api",
-      "sourceRoot": "apps/api/src",
-      "projectType": "application",
-      "prefix": "api",
-      "schematics": {},
-      "architect": {
-        "build": {
-          "builder": "@nrwl/node:webpack",
-          "options": {
-            "outputPath": "dist/apps/api",
-            "main": "apps/api/src/main.ts",
-            "tsConfig": "apps/api/tsconfig.app.json",
-            "assets": ["apps/api/src/assets"]
-          },
-          "configurations": {
-            "production": {
-              "generatePackageJson": true,
-              "optimization": true,
-              "extractLicenses": true,
-              "inspect": false,
-              "fileReplacements": [
-                {
-                  "replace": "apps/api/src/environments/environment.ts",
-                  "with": "apps/api/src/environments/environment.prod.ts"
-                }
-              ]
-            }
-          },
-          "outputs": ["{options.outputPath}"]
-        },
-        "serve": {
-          "builder": "@nrwl/node:node",
-          "options": {
-            "buildTarget": "api:build"
-          }
-        },
-        "lint": {
-          "builder": "@nrwl/linter:eslint",
-          "options": {
-            "lintFilePatterns": ["apps/api/**/*.ts"]
-          }
-        },
-        "test": {
-          "builder": "@nrwl/jest:jest",
-          "options": {
-            "jestConfig": "apps/api/jest.config.ts",
-            "passWithNoTests": true
-          },
-          "outputs": ["coverage/apps/api"]
-        }
-      },
-      "tags": []
-    },
-    "client": {
-      "$schema": "../../node_modules/nx/schemas/project-schema.json",
-      "projectType": "application",
-      "schematics": {
-        "@schematics/angular:component": {
-          "style": "scss"
-        }
-      },
-      "root": "apps/client",
-      "sourceRoot": "apps/client/src",
-      "prefix": "gf",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "outputPath": "dist/apps/client",
-            "index": "apps/client/src/index.html",
-            "main": "apps/client/src/main.ts",
-            "polyfills": "apps/client/src/polyfills.ts",
-            "tsConfig": "apps/client/tsconfig.app.json",
-            "assets": [
-              {
-                "glob": "assetlinks.json",
-                "input": "apps/client/src/assets",
-                "output": "./../.well-known"
-              },
-              {
-                "glob": "CHANGELOG.md",
-                "input": "",
-                "output": "./../assets"
-              },
-              {
-                "glob": "LICENSE",
-                "input": "",
-                "output": "./../assets"
-              },
-              {
-                "glob": "robots.txt",
-                "input": "apps/client/src/assets",
-                "output": "./../"
-              },
-              {
-                "glob": "sitemap.xml",
-                "input": "apps/client/src/assets",
-                "output": "./../"
-              },
-              {
-                "glob": "**/*",
-                "input": "node_modules/ionicons/dist/ionicons",
-                "output": "./../ionicons"
-              },
-              {
-                "glob": "**/*.js",
-                "input": "node_modules/ionicons/dist/",
-                "output": "./../"
-              },
-              {
-                "glob": "**/*",
-                "input": "apps/client/src/assets",
-                "output": "./../assets/"
-              }
-            ],
-            "styles": ["apps/client/src/styles.scss"],
-            "scripts": ["node_modules/marked/marked.min.js"],
-            "vendorChunk": true,
-            "extractLicenses": false,
-            "buildOptimizer": false,
-            "sourceMap": true,
-            "optimization": false,
-            "namedChunks": true
-          },
-          "configurations": {
-            "development-de": {
-              "baseHref": "/de/",
-              "localize": ["de"]
-            },
-            "development-en": {
-              "baseHref": "/en/",
-              "localize": ["en"]
-            },
-            "development-es": {
-              "baseHref": "/es/",
-              "localize": ["es"]
-            },
-            "development-it": {
-              "baseHref": "/it/",
-              "localize": ["it"]
-            },
-            "development-nl": {
-              "baseHref": "/nl/",
-              "localize": ["nl"]
-            },
-            "production": {
-              "fileReplacements": [
-                {
-                  "replace": "apps/client/src/environments/environment.ts",
-                  "with": "apps/client/src/environments/environment.prod.ts"
-                }
-              ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "namedChunks": false,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "2mb",
-                  "maximumError": "5mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
-                }
-              ]
-            }
-          },
-          "outputs": ["{options.outputPath}"],
-          "defaultConfiguration": ""
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "options": {
-            "browserTarget": "client:build",
-            "proxyConfig": "apps/client/proxy.conf.json"
-          },
-          "configurations": {
-            "development-de": {
-              "browserTarget": "client:build:development-de"
-            },
-            "development-en": {
-              "browserTarget": "client:build:development-en"
-            },
-            "development-es": {
-              "browserTarget": "client:build:development-es"
-            },
-            "development-it": {
-              "browserTarget": "client:build:development-it"
-            },
-            "development-nl": {
-              "browserTarget": "client:build:development-nl"
-            },
-            "production": {
-              "browserTarget": "client:build:production"
-            }
-          }
-        },
-        "extract-i18n": {
-          "builder": "ng-extract-i18n-merge:ng-extract-i18n-merge",
-          "options": {
-            "browserTarget": "client:build",
-            "includeContext": true,
-            "outputPath": "src/locales",
-            "targetFiles": [
-              "messages.de.xlf",
-              "messages.es.xlf",
-              "messages.it.xlf",
-              "messages.nl.xlf"
-            ]
-          }
-        },
-        "lint": {
-          "builder": "@nrwl/linter:eslint",
-          "options": {
-            "lintFilePatterns": ["apps/client/**/*.ts"]
-          }
-        },
-        "test": {
-          "builder": "@nrwl/jest:jest",
-          "options": {
-            "jestConfig": "apps/client/jest.config.ts",
-            "passWithNoTests": true
-          },
-          "outputs": ["coverage/apps/client"]
-        }
-      },
-      "i18n": {
-        "locales": {
-          "de": {
-            "baseHref": "/de/",
-            "translation": "apps/client/src/locales/messages.de.xlf"
-          },
-          "es": {
-            "baseHref": "/es/",
-            "translation": "apps/client/src/locales/messages.es.xlf"
-          },
-          "it": {
-            "baseHref": "/it/",
-            "translation": "apps/client/src/locales/messages.it.xlf"
-          },
-          "nl": {
-            "baseHref": "/nl/",
-            "translation": "apps/client/src/locales/messages.nl.xlf"
-          }
-        },
-        "sourceLocale": "en"
-      },
-      "tags": []
-    },
-    "client-e2e": {
-      "$schema": "../../node_modules/nx/schemas/project-schema.json",
-      "root": "apps/client-e2e",
-      "sourceRoot": "apps/client-e2e/src",
-      "projectType": "application",
-      "architect": {
-        "e2e": {
-          "builder": "@nrwl/cypress:cypress",
-          "options": {
-            "cypressConfig": "apps/client-e2e/cypress.json",
-            "tsConfig": "apps/client-e2e/tsconfig.e2e.json",
-            "devServerTarget": "client:serve"
-          },
-          "configurations": {
-            "production": {
-              "devServerTarget": "client:serve:production"
-            }
-          }
-        }
-      },
-      "tags": [],
-      "implicitDependencies": ["client"]
-    },
-    "common": {
-      "$schema": "../../node_modules/nx/schemas/project-schema.json",
-      "root": "libs/common",
-      "sourceRoot": "libs/common/src",
-      "projectType": "library",
-      "architect": {
-        "lint": {
-          "builder": "@nrwl/linter:eslint",
-          "options": {
-            "lintFilePatterns": ["libs/common/**/*.ts"]
-          }
-        },
-        "test": {
-          "builder": "@nrwl/jest:jest",
-          "outputs": ["coverage/libs/common"],
-          "options": {
-            "jestConfig": "libs/common/jest.config.ts",
-            "passWithNoTests": true
-          }
-        }
-      },
-      "tags": []
-    },
-    "ui": {
-      "$schema": "../../node_modules/nx/schemas/project-schema.json",
-      "projectType": "library",
-      "schematics": {
-        "@schematics/angular:component": {
-          "style": "scss"
-        }
-      },
-      "root": "libs/ui",
-      "sourceRoot": "libs/ui/src",
-      "prefix": "gf",
-      "architect": {
-        "test": {
-          "builder": "@nrwl/jest:jest",
-          "outputs": ["coverage/libs/ui"],
-          "options": {
-            "jestConfig": "libs/ui/jest.config.ts",
-            "passWithNoTests": true
-          }
-        },
-        "lint": {
-          "builder": "@nrwl/linter:eslint",
-          "options": {
-            "lintFilePatterns": ["libs/ui/src/**/*.ts", "libs/ui/src/**/*.html"]
-          }
-        },
-        "storybook": {
-          "builder": "@storybook/angular:start-storybook",
-          "options": {
-            "port": 4400,
-            "configDir": "libs/ui/.storybook",
-            "browserTarget": "ui:build-storybook",
-            "compodoc": false
-          },
-          "configurations": {
-            "ci": {
-              "quiet": true
-            }
-          }
-        },
-        "build-storybook": {
-          "builder": "@storybook/angular:build-storybook",
-          "outputs": ["{options.outputPath}"],
-          "options": {
-            "outputDir": "dist/storybook/ui",
-            "configDir": "libs/ui/.storybook",
-            "browserTarget": "ui:build-storybook",
-            "compodoc": false
-          },
-          "configurations": {
-            "ci": {
-              "quiet": true
-            }
-          }
-        }
-      },
-      "tags": []
-    },
-    "ui-e2e": {
-      "$schema": "../../node_modules/nx/schemas/project-schema.json",
-      "root": "apps/ui-e2e",
-      "sourceRoot": "apps/ui-e2e/src",
-      "projectType": "application",
-      "architect": {
-        "e2e": {
-          "builder": "@nrwl/cypress:cypress",
-          "options": {
-            "cypressConfig": "apps/ui-e2e/cypress.json",
-            "devServerTarget": "ui:storybook",
-            "tsConfig": "apps/ui-e2e/tsconfig.json"
-          },
-          "configurations": {
-            "ci": {
-              "devServerTarget": "ui:storybook:ci"
-            }
-          }
-        },
-        "lint": {
-          "builder": "@nrwl/linter:eslint",
-          "options": {
-            "lintFilePatterns": ["apps/ui-e2e/**/*.{js,ts}"]
-          }
-        }
-      },
-      "tags": [],
-      "implicitDependencies": ["ui"]
-    }
-  }
-}

apps/api/project.json

@@ -0,0 +1,56 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/api/src",
+  "projectType": "application",
+  "prefix": "api",
+  "generators": {},
+  "targets": {
+    "build": {
+      "executor": "@nrwl/webpack:webpack",
+      "options": {
+        "outputPath": "dist/apps/api",
+        "main": "apps/api/src/main.ts",
+        "tsConfig": "apps/api/tsconfig.app.json",
+        "assets": ["apps/api/src/assets"],
+        "target": "node",
+        "compiler": "tsc"
+      },
+      "configurations": {
+        "production": {
+          "generatePackageJson": true,
+          "optimization": true,
+          "extractLicenses": true,
+          "inspect": false,
+          "fileReplacements": [
+            {
+              "replace": "apps/api/src/environments/environment.ts",
+              "with": "apps/api/src/environments/environment.prod.ts"
+            }
+          ]
+        }
+      },
+      "outputs": ["{options.outputPath}"]
+    },
+    "serve": {
+      "executor": "@nrwl/node:node",
+      "options": {
+        "buildTarget": "api:build"
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "options": {
+        "lintFilePatterns": ["apps/api/**/*.ts"]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "options": {
+        "jestConfig": "apps/api/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "outputs": ["{workspaceRoot}/coverage/apps/api"]
+    }
+  },
+  "tags": []
+}

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

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

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

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

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

@@ -73,6 +73,7 @@ export class BenchmarkService {
     }
 
     const allTimeHighs = await Promise.all(promises);
+    let storeInCache = true;
 
     benchmarks = allTimeHighs.map((allTimeHigh, index) => {
       const { marketPrice } =
@@ -85,6 +86,8 @@ export class BenchmarkService {
           allTimeHigh,
           marketPrice
         );
+      } else {
+        storeInCache = false;
       }
 
       return {
@@ -100,11 +103,13 @@ export class BenchmarkService {
       };
     });
 
-    await this.redisCacheService.set(
-      this.CACHE_KEY_BENCHMARKS,
-      JSON.stringify(benchmarks),
-      ms('4 hours') / 1000
-    );
+    if (storeInCache) {
+      await this.redisCacheService.set(
+        this.CACHE_KEY_BENCHMARKS,
+        JSON.stringify(benchmarks),
+        ms('4 hours') / 1000
+      );
+    }
 
     return benchmarks;
   }

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

@@ -58,6 +58,11 @@ export class FrontendMiddleware implements NestMiddleware {
       req.path === '/en/blog/2022/08/500-stars-on-github/'
     ) {
       featureGraphicPath = 'assets/images/blog/500-stars-on-github.jpg';
+    } else if (
+      req.path === '/en/blog/2022/10/hacktoberfest-2022' ||
+      req.path === '/en/blog/2022/10/hacktoberfest-2022/'
+    ) {
+      featureGraphicPath = 'assets/images/blog/hacktoberfest-2022.png';
     }
 
     if (

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

@@ -145,6 +145,27 @@ export class InfoService {
     });
   }
 
+  private async countDockerHubPulls(): Promise<number> {
+    try {
+      const get = bent(
+        `https://hub.docker.com/v2/repositories/ghostfolio/ghostfolio`,
+        'GET',
+        'json',
+        200,
+        {
+          'User-Agent': 'request'
+        }
+      );
+
+      const { pull_count } = await get();
+      return pull_count;
+    } catch (error) {
+      Logger.error(error, 'InfoService');
+
+      return undefined;
+    }
+  }
+
   private async countGitHubContributors(): Promise<number> {
     try {
       const get = bent(
@@ -245,6 +266,8 @@ export class InfoService {
     const activeUsers1d = await this.countActiveUsers(1);
     const activeUsers30d = await this.countActiveUsers(30);
     const newUsers30d = await this.countNewUsers(30);
+
+    const dockerHubPulls = await this.countDockerHubPulls();
     const gitHubContributors = await this.countGitHubContributors();
     const gitHubStargazers = await this.countGitHubStargazers();
     const slackCommunityUsers = await this.countSlackCommunityUsers();
@@ -252,6 +275,7 @@ export class InfoService {
     statistics = {
       activeUsers1d,
       activeUsers30d,
+      dockerHubPulls,
       gitHubContributors,
       gitHubStargazers,
       newUsers30d,

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

@@ -3,8 +3,8 @@ import { nullifyValuesInObjects } from '@ghostfolio/api/helper/object.helper';
 import { RedactValuesInResponseInterceptor } from '@ghostfolio/api/interceptors/redact-values-in-response.interceptor';
 import { TransformDataSourceInRequestInterceptor } from '@ghostfolio/api/interceptors/transform-data-source-in-request.interceptor';
 import { TransformDataSourceInResponseInterceptor } from '@ghostfolio/api/interceptors/transform-data-source-in-response.interceptor';
+import { ApiService } from '@ghostfolio/api/services/api/api.service';
 import { ImpersonationService } from '@ghostfolio/api/services/impersonation.service';
-import { Filter } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import type { RequestWithUser } from '@ghostfolio/common/types';
 import {
@@ -36,6 +36,7 @@ import { UpdateOrderDto } from './update-order.dto';
 @Controller('order')
 export class OrderController {
   public constructor(
+    private readonly apiService: ApiService,
     private readonly impersonationService: ImpersonationService,
     private readonly orderService: OrderService,
     @Inject(REQUEST) private readonly request: RequestWithUser,
@@ -73,30 +74,11 @@ export class OrderController {
     @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 filters = this.apiService.buildFiltersFromQueryParams({
+      filterByAccounts,
+      filterByAssetClasses,
+      filterByTags
+    });
 
     const impersonationUserId =
       await this.impersonationService.validateImpersonationId(

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

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

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

@@ -21,6 +21,17 @@ function mockGetValue(symbol: string, date: Date) {
 
       return { marketPrice: 0 };
 
+    case 'BTCUSD':
+      if (isSameDay(parseDate('2015-01-01'), date)) {
+        return { marketPrice: 314.25 };
+      } else if (isSameDay(parseDate('2017-12-31'), date)) {
+        return { marketPrice: 14156.4 };
+      } else if (isSameDay(parseDate('2018-01-01'), date)) {
+        return { marketPrice: 13657.2 };
+      }
+
+      return { marketPrice: 0 };
+
     case 'NOVN.SW':
       if (isSameDay(parseDate('2022-04-11'), date)) {
         return { marketPrice: 87.8 };

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

@@ -0,0 +1,110 @@
+import { CurrentRateService } from '@ghostfolio/api/app/portfolio/current-rate.service';
+import { parseDate } from '@ghostfolio/common/helper';
+import Big from 'big.js';
+
+import { CurrentRateServiceMock } from './current-rate.service.mock';
+import { PortfolioCalculator } from './portfolio-calculator';
+
+jest.mock('@ghostfolio/api/app/portfolio/current-rate.service', () => {
+  return {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    CurrentRateService: jest.fn().mockImplementation(() => {
+      return CurrentRateServiceMock;
+    })
+  };
+});
+
+describe('PortfolioCalculator', () => {
+  let currentRateService: CurrentRateService;
+
+  beforeEach(() => {
+    currentRateService = new CurrentRateService(null, null, null);
+  });
+
+  describe('get current positions', () => {
+    it.only('with BTCUSD buy and sell partially', async () => {
+      const portfolioCalculator = new PortfolioCalculator({
+        currentRateService,
+        currency: 'CHF',
+        orders: [
+          {
+            currency: 'CHF',
+            date: '2015-01-01',
+            dataSource: 'YAHOO',
+            fee: new Big(0),
+            name: 'Bitcoin USD',
+            quantity: new Big(2),
+            symbol: 'BTCUSD',
+            type: 'BUY',
+            unitPrice: new Big(320.43)
+          },
+          {
+            currency: 'CHF',
+            date: '2017-12-31',
+            dataSource: 'YAHOO',
+            fee: new Big(0),
+            name: 'Bitcoin USD',
+            quantity: new Big(1),
+            symbol: 'BTCUSD',
+            type: 'SELL',
+            unitPrice: new Big(14156.4)
+          }
+        ]
+      });
+
+      portfolioCalculator.computeTransactionPoints();
+
+      const spy = jest
+        .spyOn(Date, 'now')
+        .mockImplementation(() => parseDate('2018-01-01').getTime());
+
+      const currentPositions = await portfolioCalculator.getCurrentPositions(
+        parseDate('2015-01-01')
+      );
+
+      const investments = portfolioCalculator.getInvestments();
+
+      const investmentsByMonth = portfolioCalculator.getInvestmentsByMonth();
+
+      spy.mockRestore();
+
+      expect(currentPositions).toEqual({
+        currentValue: new Big('13657.2'),
+        errors: [],
+        grossPerformance: new Big('27172.74'),
+        grossPerformancePercentage: new Big('42.40043067128546016291'),
+        hasErrors: false,
+        netPerformance: new Big('27172.74'),
+        netPerformancePercentage: new Big('42.40043067128546016291'),
+        positions: [
+          {
+            averagePrice: new Big('320.43'),
+            currency: 'CHF',
+            dataSource: 'YAHOO',
+            firstBuyDate: '2015-01-01',
+            grossPerformance: new Big('27172.74'),
+            grossPerformancePercentage: new Big('42.40043067128546016291'),
+            investment: new Big('320.43'),
+            netPerformance: new Big('27172.74'),
+            netPerformancePercentage: new Big('42.40043067128546016291'),
+            marketPrice: 13657.2,
+            quantity: new Big('1'),
+            symbol: 'BTCUSD',
+            transactionCount: 2
+          }
+        ],
+        totalInvestment: new Big('320.43')
+      });
+
+      expect(investments).toEqual([
+        { date: '2015-01-01', investment: new Big('640.86') },
+        { date: '2017-12-31', investment: new Big('320.43') }
+      ]);
+
+      expect(investmentsByMonth).toEqual([
+        { date: '2015-01-01', investment: new Big('640.86') },
+        { date: '2017-12-01', investment: new Big('-14156.4') }
+      ]);
+    });
+  });
+});

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

@@ -22,7 +22,7 @@ describe('PortfolioCalculator', () => {
   });
 
   describe('get current positions', () => {
-    it.only('with BALN.SW buy and sell', async () => {
+    it.only('with NOVN.SW buy and sell partially', async () => {
       const portfolioCalculator = new PortfolioCalculator({
         currentRateService,
         currency: 'CHF',

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

@@ -0,0 +1,130 @@
+import { CurrentRateService } from '@ghostfolio/api/app/portfolio/current-rate.service';
+import { parseDate } from '@ghostfolio/common/helper';
+import Big from 'big.js';
+
+import { CurrentRateServiceMock } from './current-rate.service.mock';
+import { PortfolioCalculator } from './portfolio-calculator';
+
+jest.mock('@ghostfolio/api/app/portfolio/current-rate.service', () => {
+  return {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    CurrentRateService: jest.fn().mockImplementation(() => {
+      return CurrentRateServiceMock;
+    })
+  };
+});
+
+describe('PortfolioCalculator', () => {
+  let currentRateService: CurrentRateService;
+
+  beforeEach(() => {
+    currentRateService = new CurrentRateService(null, null, null);
+  });
+
+  describe('get current positions', () => {
+    it.only('with NOVN.SW buy and sell', async () => {
+      const portfolioCalculator = new PortfolioCalculator({
+        currentRateService,
+        currency: 'CHF',
+        orders: [
+          {
+            currency: 'CHF',
+            date: '2022-03-07',
+            dataSource: 'YAHOO',
+            fee: new Big(0),
+            name: 'Novartis AG',
+            quantity: new Big(2),
+            symbol: 'NOVN.SW',
+            type: 'BUY',
+            unitPrice: new Big(75.8)
+          },
+          {
+            currency: 'CHF',
+            date: '2022-04-08',
+            dataSource: 'YAHOO',
+            fee: new Big(0),
+            name: 'Novartis AG',
+            quantity: new Big(2),
+            symbol: 'NOVN.SW',
+            type: 'SELL',
+            unitPrice: new Big(85.73)
+          }
+        ]
+      });
+
+      portfolioCalculator.computeTransactionPoints();
+
+      const spy = jest
+        .spyOn(Date, 'now')
+        .mockImplementation(() => parseDate('2022-04-11').getTime());
+
+      const chartData = await portfolioCalculator.getChartData(
+        parseDate('2022-03-07')
+      );
+
+      const currentPositions = await portfolioCalculator.getCurrentPositions(
+        parseDate('2022-03-07')
+      );
+
+      const investments = portfolioCalculator.getInvestments();
+
+      const investmentsByMonth = portfolioCalculator.getInvestmentsByMonth();
+
+      spy.mockRestore();
+
+      expect(chartData[0]).toEqual({
+        date: '2022-03-07',
+        netPerformanceInPercentage: 0,
+        netPerformance: 0,
+        totalInvestment: 151.6,
+        value: 151.6
+      });
+
+      expect(chartData[chartData.length - 1]).toEqual({
+        date: '2022-04-11',
+        netPerformanceInPercentage: 13.100263852242744,
+        netPerformance: 19.86,
+        totalInvestment: 0,
+        value: 19.86
+      });
+
+      expect(currentPositions).toEqual({
+        currentValue: new Big('0'),
+        errors: [],
+        grossPerformance: new Big('19.86'),
+        grossPerformancePercentage: new Big('0.13100263852242744063'),
+        hasErrors: false,
+        netPerformance: new Big('19.86'),
+        netPerformancePercentage: new Big('0.13100263852242744063'),
+        positions: [
+          {
+            averagePrice: new Big('0'),
+            currency: 'CHF',
+            dataSource: 'YAHOO',
+            firstBuyDate: '2022-03-07',
+            grossPerformance: new Big('19.86'),
+            grossPerformancePercentage: new Big('0.13100263852242744063'),
+            investment: new Big('0'),
+            netPerformance: new Big('19.86'),
+            netPerformancePercentage: new Big('0.13100263852242744063'),
+            marketPrice: 87.8,
+            quantity: new Big('0'),
+            symbol: 'NOVN.SW',
+            transactionCount: 2
+          }
+        ],
+        totalInvestment: new Big('0')
+      });
+
+      expect(investments).toEqual([
+        { date: '2022-03-07', investment: new Big('151.6') },
+        { date: '2022-04-08', investment: new Big('0') }
+      ]);
+
+      expect(investmentsByMonth).toEqual([
+        { date: '2022-03-01', investment: new Big('151.6') },
+        { date: '2022-04-01', investment: new Big('-171.46') }
+      ]);
+    });
+  });
+});

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

@@ -14,6 +14,7 @@ import {
   format,
   isAfter,
   isBefore,
+  isSameDay,
   isSameMonth,
   isSameYear,
   max,
@@ -187,7 +188,9 @@ export class PortfolioCalculator {
       day = addDays(day, step);
     }
 
-    dates.push(resetHours(end));
+    if (!isSameDay(last(dates), end)) {
+      dates.push(resetHours(end));
+    }
 
     for (const item of transactionPointsBeforeEndDate[firstIndex - 1].items) {
       dataGatheringItems.push({
@@ -231,21 +234,28 @@ export class PortfolioCalculator {
       [symbol: string]: { [date: string]: Big };
     } = {};
 
+    const maxInvestmentValuesBySymbol: {
+      [symbol: string]: { [date: string]: Big };
+    } = {};
+
     const totalNetPerformanceValues: { [date: string]: Big } = {};
     const totalInvestmentValues: { [date: string]: Big } = {};
+    const maxTotalInvestmentValues: { [date: string]: Big } = {};
 
     for (const symbol of Object.keys(symbols)) {
-      const { netPerformanceValues, investmentValues } = this.getSymbolMetrics({
-        end,
-        marketSymbolMap,
-        start,
-        step,
-        symbol,
-        isChartMode: true
-      });
+      const { investmentValues, maxInvestmentValues, netPerformanceValues } =
+        this.getSymbolMetrics({
+          end,
+          marketSymbolMap,
+          start,
+          step,
+          symbol,
+          isChartMode: true
+        });
 
       netPerformanceValuesBySymbol[symbol] = netPerformanceValues;
       investmentValuesBySymbol[symbol] = investmentValues;
+      maxInvestmentValuesBySymbol[symbol] = maxInvestmentValues;
     }
 
     for (const currentDate of dates) {
@@ -264,19 +274,28 @@ export class PortfolioCalculator {
         totalInvestmentValues[dateString] =
           totalInvestmentValues[dateString] ?? new Big(0);
 
+        maxTotalInvestmentValues[dateString] =
+          maxTotalInvestmentValues[dateString] ?? new Big(0);
+
         if (investmentValuesBySymbol[symbol]?.[dateString]) {
           totalInvestmentValues[dateString] = totalInvestmentValues[
             dateString
           ].add(investmentValuesBySymbol[symbol][dateString]);
         }
+
+        if (maxInvestmentValuesBySymbol[symbol]?.[dateString]) {
+          maxTotalInvestmentValues[dateString] = maxTotalInvestmentValues[
+            dateString
+          ].add(maxInvestmentValuesBySymbol[symbol][dateString]);
+        }
       }
     }
 
     return Object.keys(totalNetPerformanceValues).map((date) => {
-      const netPerformanceInPercentage = totalInvestmentValues[date].eq(0)
+      const netPerformanceInPercentage = maxTotalInvestmentValues[date].eq(0)
         ? 0
         : totalNetPerformanceValues[date]
-            .div(totalInvestmentValues[date])
+            .div(maxTotalInvestmentValues[date])
             .mul(100)
             .toNumber();
 
@@ -284,7 +303,10 @@ export class PortfolioCalculator {
         date,
         netPerformanceInPercentage,
         netPerformance: totalNetPerformanceValues[date].toNumber(),
-        value: netPerformanceInPercentage
+        totalInvestment: totalInvestmentValues[date].toNumber(),
+        value: totalInvestmentValues[date]
+          .plus(totalNetPerformanceValues[date])
+          .toNumber()
       };
     });
   }
@@ -893,13 +915,14 @@ export class PortfolioCalculator {
     let initialValue: Big;
     let investmentAtStartDate: Big;
     const investmentValues: { [date: string]: Big } = {};
+    const maxInvestmentValues: { [date: string]: Big } = {};
     let lastAveragePrice = new Big(0);
-    let lastTransactionInvestment = new Big(0);
-    let lastValueOfInvestmentBeforeTransaction = new Big(0);
+    // let lastTransactionInvestment = new Big(0);
+    // let lastValueOfInvestmentBeforeTransaction = new Big(0);
     let maxTotalInvestment = new Big(0);
     const netPerformanceValues: { [date: string]: Big } = {};
-    let timeWeightedGrossPerformancePercentage = new Big(1);
-    let timeWeightedNetPerformancePercentage = new Big(1);
+    // let timeWeightedGrossPerformancePercentage = new Big(1);
+    // let timeWeightedNetPerformancePercentage = new Big(1);
     let totalInvestment = new Big(0);
     let totalInvestmentWithGrossPerformanceFromSell = new Big(0);
     let totalUnits = new Big(0);
@@ -994,6 +1017,12 @@ export class PortfolioCalculator {
     for (let i = 0; i < orders.length; i += 1) {
       const order = orders[i];
 
+      if (PortfolioCalculator.ENABLE_LOGGING) {
+        console.log();
+        console.log();
+        console.log(i + 1, order.type, order.itemType);
+      }
+
       if (order.itemType === 'start') {
         // Take the unit price of the order as the market price if there are no
         // orders of this symbol before the start date
@@ -1021,9 +1050,21 @@ export class PortfolioCalculator {
         valueAtStartDate = valueOfInvestmentBeforeTransaction;
       }
 
-      const transactionInvestment = order.quantity
-        .mul(order.unitPrice)
-        .mul(this.getFactor(order.type));
+      const transactionInvestment =
+        order.type === 'BUY'
+          ? order.quantity.mul(order.unitPrice).mul(this.getFactor(order.type))
+          : totalUnits.gt(0)
+          ? totalInvestment
+              .div(totalUnits)
+              .mul(order.quantity)
+              .mul(this.getFactor(order.type))
+          : new Big(0);
+
+      if (PortfolioCalculator.ENABLE_LOGGING) {
+        console.log('totalInvestment', totalInvestment.toNumber());
+        console.log('order.quantity', order.quantity.toNumber());
+        console.log('transactionInvestment', transactionInvestment.toNumber());
+      }
 
       totalInvestment = totalInvestment.plus(transactionInvestment);
 
@@ -1072,58 +1113,69 @@ export class PortfolioCalculator {
         ? new Big(0)
         : totalInvestmentWithGrossPerformanceFromSell.div(totalUnits);
 
+      if (PortfolioCalculator.ENABLE_LOGGING) {
+        console.log(
+          'totalInvestmentWithGrossPerformanceFromSell',
+          totalInvestmentWithGrossPerformanceFromSell.toNumber()
+        );
+        console.log(
+          'grossPerformanceFromSells',
+          grossPerformanceFromSells.toNumber()
+        );
+      }
+
       const newGrossPerformance = valueOfInvestment
-        .minus(totalInvestmentWithGrossPerformanceFromSell)
+        .minus(totalInvestment)
         .plus(grossPerformanceFromSells);
 
-      if (
-        i > indexOfStartOrder &&
-        !lastValueOfInvestmentBeforeTransaction
-          .plus(lastTransactionInvestment)
-          .eq(0)
-      ) {
-        const grossHoldingPeriodReturn = valueOfInvestmentBeforeTransaction
-          .minus(
-            lastValueOfInvestmentBeforeTransaction.plus(
-              lastTransactionInvestment
-            )
-          )
-          .div(
-            lastValueOfInvestmentBeforeTransaction.plus(
-              lastTransactionInvestment
-            )
-          );
+      // if (
+      //   i > indexOfStartOrder &&
+      //   !lastValueOfInvestmentBeforeTransaction
+      //     .plus(lastTransactionInvestment)
+      //     .eq(0)
+      // ) {
+      // const grossHoldingPeriodReturn = valueOfInvestmentBeforeTransaction
+      //   .minus(
+      //     lastValueOfInvestmentBeforeTransaction.plus(
+      //       lastTransactionInvestment
+      //     )
+      //   )
+      //   .div(
+      //     lastValueOfInvestmentBeforeTransaction.plus(
+      //       lastTransactionInvestment
+      //     )
+      //   );
 
-        timeWeightedGrossPerformancePercentage =
-          timeWeightedGrossPerformancePercentage.mul(
-            new Big(1).plus(grossHoldingPeriodReturn)
-          );
+      // timeWeightedGrossPerformancePercentage =
+      //   timeWeightedGrossPerformancePercentage.mul(
+      //     new Big(1).plus(grossHoldingPeriodReturn)
+      //   );
 
-        const netHoldingPeriodReturn = valueOfInvestmentBeforeTransaction
-          .minus(fees.minus(feesAtStartDate))
-          .minus(
-            lastValueOfInvestmentBeforeTransaction.plus(
-              lastTransactionInvestment
-            )
-          )
-          .div(
-            lastValueOfInvestmentBeforeTransaction.plus(
-              lastTransactionInvestment
-            )
-          );
+      // const netHoldingPeriodReturn = valueOfInvestmentBeforeTransaction
+      //   .minus(fees.minus(feesAtStartDate))
+      //   .minus(
+      //     lastValueOfInvestmentBeforeTransaction.plus(
+      //       lastTransactionInvestment
+      //     )
+      //   )
+      //   .div(
+      //     lastValueOfInvestmentBeforeTransaction.plus(
+      //       lastTransactionInvestment
+      //     )
+      //   );
 
-        timeWeightedNetPerformancePercentage =
-          timeWeightedNetPerformancePercentage.mul(
-            new Big(1).plus(netHoldingPeriodReturn)
-          );
-      }
+      // timeWeightedNetPerformancePercentage =
+      //   timeWeightedNetPerformancePercentage.mul(
+      //     new Big(1).plus(netHoldingPeriodReturn)
+      //   );
+      // }
 
       grossPerformance = newGrossPerformance;
 
-      lastTransactionInvestment = transactionInvestment;
+      // lastTransactionInvestment = transactionInvestment;
 
-      lastValueOfInvestmentBeforeTransaction =
-        valueOfInvestmentBeforeTransaction;
+      // lastValueOfInvestmentBeforeTransaction =
+      //   valueOfInvestmentBeforeTransaction;
 
       if (order.itemType === 'start') {
         feesAtStartDate = fees;
@@ -1136,6 +1188,15 @@ export class PortfolioCalculator {
           .minus(fees.minus(feesAtStartDate));
 
         investmentValues[order.date] = totalInvestment;
+        maxInvestmentValues[order.date] = maxTotalInvestment;
+      }
+
+      if (PortfolioCalculator.ENABLE_LOGGING) {
+        console.log('totalInvestment', totalInvestment.toNumber());
+        console.log(
+          'totalGrossPerformance',
+          grossPerformance.minus(grossPerformanceAtStartDate).toNumber()
+        );
       }
 
       if (i === indexOfEndOrder) {
@@ -1143,11 +1204,11 @@ export class PortfolioCalculator {
       }
     }
 
-    timeWeightedGrossPerformancePercentage =
-      timeWeightedGrossPerformancePercentage.minus(1);
+    // timeWeightedGrossPerformancePercentage =
+    //   timeWeightedGrossPerformancePercentage.minus(1);
 
-    timeWeightedNetPerformancePercentage =
-      timeWeightedNetPerformancePercentage.minus(1);
+    // timeWeightedNetPerformancePercentage =
+    //   timeWeightedNetPerformancePercentage.minus(1);
 
     const totalGrossPerformance = grossPerformance.minus(
       grossPerformanceAtStartDate
@@ -1212,6 +1273,7 @@ export class PortfolioCalculator {
         Average price: ${averagePriceAtStartDate.toFixed(
           2
         )} -> ${averagePriceAtEndDate.toFixed(2)}
+        Total investment: ${totalInvestment.toFixed(2)}
         Max. total investment: ${maxTotalInvestment.toFixed(2)}
         Gross performance: ${totalGrossPerformance.toFixed(
           2
@@ -1227,6 +1289,7 @@ export class PortfolioCalculator {
       initialValue,
       grossPerformancePercentage,
       investmentValues,
+      maxInvestmentValues,
       netPerformancePercentage,
       netPerformanceValues,
       hasErrors: totalUnits.gt(0) && (!initialValue || !unitPriceAtEndDate),

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

@@ -7,18 +7,15 @@ import {
 import { RedactValuesInResponseInterceptor } from '@ghostfolio/api/interceptors/redact-values-in-response.interceptor';
 import { TransformDataSourceInRequestInterceptor } from '@ghostfolio/api/interceptors/transform-data-source-in-request.interceptor';
 import { TransformDataSourceInResponseInterceptor } from '@ghostfolio/api/interceptors/transform-data-source-in-response.interceptor';
+import { ApiService } from '@ghostfolio/api/services/api/api.service';
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
-import { parseDate } from '@ghostfolio/common/helper';
 import {
-  Filter,
-  PortfolioChart,
   PortfolioDetails,
   PortfolioInvestments,
   PortfolioPerformanceResponse,
   PortfolioPublicDetails,
-  PortfolioReport,
-  PortfolioSummary
+  PortfolioReport
 } from '@ghostfolio/common/interfaces';
 import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface';
 import type {
@@ -40,6 +37,7 @@ import {
 } from '@nestjs/common';
 import { REQUEST } from '@nestjs/core';
 import { AuthGuard } from '@nestjs/passport';
+import Big from 'big.js';
 import { StatusCodes, getReasonPhrase } from 'http-status-codes';
 
 import { PortfolioPositionDetail } from './interfaces/portfolio-position-detail.interface';
@@ -52,6 +50,7 @@ export class PortfolioController {
 
   public constructor(
     private readonly accessService: AccessService,
+    private readonly apiService: ApiService,
     private readonly configurationService: ConfigurationService,
     private readonly exchangeRateDataService: ExchangeRateDataService,
     private readonly portfolioService: PortfolioService,
@@ -61,55 +60,6 @@ export class PortfolioController {
     this.baseCurrency = this.configurationService.get('BASE_CURRENCY');
   }
 
-  @Get('chart')
-  @UseGuards(AuthGuard('jwt'))
-  public async getChart(
-    @Headers('impersonation-id') impersonationId: string,
-    @Query('range') range
-  ): Promise<PortfolioChart> {
-    const historicalDataContainer = await this.portfolioService.getChart(
-      impersonationId,
-      range
-    );
-
-    let chartData = historicalDataContainer.items;
-
-    let hasError = false;
-
-    chartData.forEach((chartDataItem) => {
-      if (hasNotDefinedValuesInObject(chartDataItem)) {
-        hasError = true;
-      }
-    });
-
-    if (
-      impersonationId ||
-      this.userService.isRestrictedView(this.request.user)
-    ) {
-      let maxValue = 0;
-
-      chartData.forEach((portfolioItem) => {
-        if (portfolioItem.value > maxValue) {
-          maxValue = portfolioItem.value;
-        }
-      });
-
-      chartData = chartData.map((historicalDataItem) => {
-        return {
-          ...historicalDataItem,
-          marketPrice: Number((historicalDataItem.value / maxValue).toFixed(2))
-        };
-      });
-    }
-
-    return {
-      hasError,
-      chart: chartData,
-      isAllTimeHigh: historicalDataContainer.isAllTimeHigh,
-      isAllTimeLow: historicalDataContainer.isAllTimeLow
-    };
-  }
-
   @Get('details')
   @UseGuards(AuthGuard('jwt'))
   @UseInterceptors(RedactValuesInResponseInterceptor)
@@ -118,37 +68,16 @@ export class PortfolioController {
     @Headers('impersonation-id') impersonationId: string,
     @Query('accounts') filterByAccounts?: string,
     @Query('assetClasses') filterByAssetClasses?: string,
-    @Query('range') range?: DateRange,
+    @Query('range') dateRange: DateRange = 'max',
     @Query('tags') filterByTags?: string
   ): Promise<PortfolioDetails & { hasError: boolean }> {
     let hasError = false;
 
-    const accountIds = filterByAccounts?.split(',') ?? [];
-    const 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'
-        };
-      })
-    ];
-
-    let portfolioSummary: PortfolioSummary;
+    const filters = this.apiService.buildFiltersFromQueryParams({
+      filterByAccounts,
+      filterByAssetClasses,
+      filterByTags
+    });
 
     const {
       accounts,
@@ -158,18 +87,18 @@ export class PortfolioController {
       holdings,
       summary,
       totalValueInBaseCurrency
-    } = await this.portfolioService.getDetails(
+    } = await this.portfolioService.getDetails({
+      dateRange,
+      filters,
       impersonationId,
-      this.request.user.id,
-      range,
-      filters
-    );
+      userId: this.request.user.id
+    });
 
     if (hasErrors || hasNotDefinedValuesInObject(holdings)) {
       hasError = true;
     }
 
-    portfolioSummary = summary;
+    let portfolioSummary = summary;
 
     if (
       impersonationId ||
@@ -254,6 +183,7 @@ export class PortfolioController {
   @UseGuards(AuthGuard('jwt'))
   public async getInvestments(
     @Headers('impersonation-id') impersonationId: string,
+    @Query('range') dateRange: DateRange = 'max',
     @Query('groupBy') groupBy?: GroupBy
   ): Promise<PortfolioInvestments> {
     if (
@@ -269,12 +199,16 @@ export class PortfolioController {
     let investments: InvestmentItem[];
 
     if (groupBy === 'month') {
-      investments = await this.portfolioService.getInvestments(
+      investments = await this.portfolioService.getInvestments({
+        dateRange,
         impersonationId,
-        'month'
-      );
+        groupBy: 'month'
+      });
     } else {
-      investments = await this.portfolioService.getInvestments(impersonationId);
+      investments = await this.portfolioService.getInvestments({
+        dateRange,
+        impersonationId
+      });
     }
 
     if (
@@ -292,33 +226,7 @@ export class PortfolioController {
       }));
     }
 
-    return { firstOrderDate: parseDate(investments[0]?.date), investments };
-  }
-
-  @Get('performance')
-  @UseGuards(AuthGuard('jwt'))
-  @UseInterceptors(TransformDataSourceInResponseInterceptor)
-  public async getPerformance(
-    @Headers('impersonation-id') impersonationId: string,
-    @Query('range') range
-  ): Promise<PortfolioPerformanceResponse> {
-    const performanceInformation = await this.portfolioService.getPerformance(
-      impersonationId,
-      range
-    );
-
-    if (
-      impersonationId ||
-      this.request.user.Settings.settings.viewMode === 'ZEN' ||
-      this.userService.isRestrictedView(this.request.user)
-    ) {
-      performanceInformation.performance = nullifyValuesInObject(
-        performanceInformation.performance,
-        ['currentGrossPerformance', 'currentValue']
-      );
-    }
-
-    return performanceInformation;
+    return { investments };
   }
 
   @Get('performance')
@@ -327,23 +235,42 @@ export class PortfolioController {
   @Version('2')
   public async getPerformanceV2(
     @Headers('impersonation-id') impersonationId: string,
-    @Query('range') dateRange
+    @Query('range') dateRange: DateRange = 'max'
   ): Promise<PortfolioPerformanceResponse> {
-    const performanceInformation = await this.portfolioService.getPerformanceV2(
-      {
-        dateRange,
-        impersonationId
-      }
-    );
+    const performanceInformation = await this.portfolioService.getPerformance({
+      dateRange,
+      impersonationId,
+      userId: this.request.user.id
+    });
 
     if (
       impersonationId ||
       this.request.user.Settings.settings.viewMode === 'ZEN' ||
       this.userService.isRestrictedView(this.request.user)
     ) {
+      performanceInformation.chart = performanceInformation.chart.map(
+        ({ date, netPerformanceInPercentage, totalInvestment, value }) => {
+          return {
+            date,
+            netPerformanceInPercentage,
+            totalInvestment: new Big(totalInvestment)
+              .div(performanceInformation.performance.totalInvestment)
+              .toNumber(),
+            value: new Big(value)
+              .div(performanceInformation.performance.currentValue)
+              .toNumber()
+          };
+        }
+      );
+
       performanceInformation.performance = nullifyValuesInObject(
         performanceInformation.performance,
-        ['currentGrossPerformance', 'currentNetPerformance', 'currentValue']
+        [
+          'currentGrossPerformance',
+          'currentNetPerformance',
+          'currentValue',
+          'totalInvestment'
+        ]
       );
     }
 
@@ -355,11 +282,11 @@ export class PortfolioController {
   @UseInterceptors(TransformDataSourceInResponseInterceptor)
   public async getPositions(
     @Headers('impersonation-id') impersonationId: string,
-    @Query('range') range
+    @Query('range') dateRange: DateRange = 'max'
   ): Promise<PortfolioPositions> {
     const result = await this.portfolioService.getPositions(
       impersonationId,
-      range
+      dateRange
     );
 
     if (
@@ -400,12 +327,12 @@ export class PortfolioController {
       hasDetails = user.subscription.type === 'Premium';
     }
 
-    const { holdings } = await this.portfolioService.getDetails(
-      access.userId,
-      access.userId,
-      'max',
-      [{ id: 'EQUITY', type: 'ASSET_CLASS' }]
-    );
+    const { holdings } = await this.portfolioService.getDetails({
+      dateRange: 'max',
+      filters: [{ id: 'EQUITY', type: 'ASSET_CLASS' }],
+      impersonationId: access.userId,
+      userId: user.id
+    });
 
     const portfolioPublicDetails: PortfolioPublicDetails = {
       hasDetails,

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

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

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

@@ -3,7 +3,6 @@ import { CashDetails } from '@ghostfolio/api/app/account/interfaces/cash-details
 import { OrderService } from '@ghostfolio/api/app/order/order.service';
 import { CurrentRateService } from '@ghostfolio/api/app/portfolio/current-rate.service';
 import { PortfolioOrder } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-order.interface';
-import { TimelineSpecification } from '@ghostfolio/api/app/portfolio/interfaces/timeline-specification.interface';
 import { TransactionPoint } from '@ghostfolio/api/app/portfolio/interfaces/transaction-point.interface';
 import { UserService } from '@ghostfolio/api/app/user/user.service';
 import { AccountClusterRiskCurrentInvestment } from '@ghostfolio/api/models/rules/account-cluster-risk/current-investment';
@@ -36,7 +35,8 @@ import {
   PortfolioSummary,
   Position,
   TimelinePosition,
-  UserSettings
+  UserSettings,
+  UserWithSettings
 } from '@ghostfolio/common/interfaces';
 import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface';
 import type {
@@ -67,11 +67,9 @@ import {
   isAfter,
   isBefore,
   max,
-  parse,
   parseISO,
   set,
   setDayOfYear,
-  startOfDay,
   subDays,
   subYears
 } from 'date-fns';
@@ -107,15 +105,19 @@ export class PortfolioService {
     this.baseCurrency = this.configurationService.get('BASE_CURRENCY');
   }
 
-  public async getAccounts(
-    aUserId: string,
-    aFilters?: Filter[],
+  public async getAccounts({
+    filters,
+    userId,
     withExcludedAccounts = false
-  ): Promise<AccountWithValue[]> {
-    const where: Prisma.AccountWhereInput = { userId: aUserId };
+  }: {
+    filters?: Filter[];
+    userId: string;
+    withExcludedAccounts?: boolean;
+  }): Promise<AccountWithValue[]> {
+    const where: Prisma.AccountWhereInput = { userId: userId };
 
-    if (aFilters?.[0].id && aFilters?.[0].type === 'ACCOUNT') {
-      where.id = aFilters[0].id;
+    if (filters?.[0].id && filters?.[0].type === 'ACCOUNT') {
+      where.id = filters[0].id;
     }
 
     const [accounts, details] = await Promise.all([
@@ -124,13 +126,12 @@ export class PortfolioService {
         include: { Order: true, Platform: true },
         orderBy: { name: 'asc' }
       }),
-      this.getDetails(
-        aUserId,
-        aUserId,
-        undefined,
-        aFilters,
-        withExcludedAccounts
-      )
+      this.getDetails({
+        filters,
+        withExcludedAccounts,
+        impersonationId: userId,
+        userId: this.request.user.id
+      })
     ]);
 
     const userCurrency = this.request.user.Settings.settings.baseCurrency;
@@ -168,16 +169,20 @@ export class PortfolioService {
     });
   }
 
-  public async getAccountsWithAggregations(
-    aUserId: string,
-    aFilters?: Filter[],
+  public async getAccountsWithAggregations({
+    filters,
+    userId,
     withExcludedAccounts = false
-  ): Promise<Accounts> {
-    const accounts = await this.getAccounts(
-      aUserId,
-      aFilters,
+  }: {
+    filters?: Filter[];
+    userId: string;
+    withExcludedAccounts?: boolean;
+  }): Promise<Accounts> {
+    const accounts = await this.getAccounts({
+      filters,
+      userId,
       withExcludedAccounts
-    );
+    });
     let totalBalanceInBaseCurrency = new Big(0);
     let totalValueInBaseCurrency = new Big(0);
     let transactionCount = 0;
@@ -200,11 +205,16 @@ export class PortfolioService {
     };
   }
 
-  public async getInvestments(
-    aImpersonationId: string,
-    groupBy?: GroupBy
-  ): Promise<InvestmentItem[]> {
-    const userId = await this.getUserId(aImpersonationId, this.request.user.id);
+  public async getInvestments({
+    dateRange,
+    impersonationId,
+    groupBy
+  }: {
+    dateRange: DateRange;
+    impersonationId: string;
+    groupBy?: GroupBy;
+  }): Promise<InvestmentItem[]> {
+    const userId = await this.getUserId(impersonationId, this.request.user.id);
 
     const { portfolioOrders, transactionPoints } =
       await this.getTransactionPoints({
@@ -276,108 +286,32 @@ export class PortfolioService {
       }
     }
 
-    return sortBy(investments, (investment) => {
+    investments = sortBy(investments, (investment) => {
       return investment.date;
     });
-  }
 
-  public async getChart(
-    aImpersonationId: string,
-    aDateRange: DateRange = 'max'
-  ): Promise<HistoricalDataContainer> {
-    const userId = await this.getUserId(aImpersonationId, this.request.user.id);
+    const startDate = this.getStartDate(
+      dateRange,
+      parseDate(investments[0]?.date)
+    );
 
-    const { portfolioOrders, transactionPoints } =
-      await this.getTransactionPoints({
-        userId
-      });
-
-    const portfolioCalculator = new PortfolioCalculator({
-      currency: this.request.user.Settings.settings.baseCurrency,
-      currentRateService: this.currentRateService,
-      orders: portfolioOrders
+    return investments.filter(({ date }) => {
+      return !isBefore(parseDate(date), startDate);
     });
-
-    portfolioCalculator.setTransactionPoints(transactionPoints);
-    if (transactionPoints.length === 0) {
-      return {
-        isAllTimeHigh: false,
-        isAllTimeLow: false,
-        items: []
-      };
-    }
-    let portfolioStart = parse(
-      transactionPoints[0].date,
-      DATE_FORMAT,
-      new Date()
-    );
-
-    // Get start date for the full portfolio because of because of the
-    // min and max calculation
-    portfolioStart = this.getStartDate('max', portfolioStart);
-
-    const timelineSpecification: TimelineSpecification[] = [
-      {
-        start: format(portfolioStart, DATE_FORMAT),
-        accuracy: 'day'
-      }
-    ];
-
-    const timelineInfo = await portfolioCalculator.calculateTimeline(
-      timelineSpecification,
-      format(new Date(), DATE_FORMAT)
-    );
-
-    const timeline = timelineInfo.timelinePeriods;
-
-    const items = timeline
-      .filter((timelineItem) => timelineItem !== null)
-      .map((timelineItem) => ({
-        date: timelineItem.date,
-        value: timelineItem.netPerformance.toNumber()
-      }));
-
-    let lastItem = null;
-    if (timeline.length > 0) {
-      lastItem = timeline[timeline.length - 1];
-    }
-
-    let isAllTimeHigh = timelineInfo.maxNetPerformance?.eq(
-      lastItem?.netPerformance ?? 0
-    );
-    let isAllTimeLow = timelineInfo.minNetPerformance?.eq(
-      lastItem?.netPerformance ?? 0
-    );
-    if (isAllTimeHigh && isAllTimeLow) {
-      isAllTimeHigh = false;
-      isAllTimeLow = false;
-    }
-
-    portfolioStart = startOfDay(
-      this.getStartDate(
-        aDateRange,
-        parse(transactionPoints[0].date, DATE_FORMAT, new Date())
-      )
-    );
-
-    return {
-      isAllTimeHigh,
-      isAllTimeLow,
-      items: items.filter((item) => {
-        // Filter items of date range
-        return !isAfter(portfolioStart, parseDate(item.date));
-      })
-    };
   }
 
-  public async getChartV2({
+  public async getChart({
     dateRange = 'max',
-    impersonationId
+    impersonationId,
+    userCurrency,
+    userId
   }: {
     dateRange?: DateRange;
     impersonationId: string;
+    userCurrency: string;
+    userId: string;
   }): Promise<HistoricalDataContainer> {
-    const userId = await this.getUserId(impersonationId, this.request.user.id);
+    userId = await this.getUserId(impersonationId, userId);
 
     const { portfolioOrders, transactionPoints } =
       await this.getTransactionPoints({
@@ -385,7 +319,7 @@ export class PortfolioService {
       });
 
     const portfolioCalculator = new PortfolioCalculator({
-      currency: this.request.user.Settings.settings.baseCurrency,
+      currency: userCurrency,
       currentRateService: this.currentRateService,
       orders: portfolioOrders
     });
@@ -421,29 +355,32 @@ export class PortfolioService {
     };
   }
 
-  public async getDetails(
-    aImpersonationId: string,
-    aUserId: string,
-    aDateRange: DateRange = 'max',
-    aFilters?: Filter[],
+  public async getDetails({
+    impersonationId,
+    dateRange = 'max',
+    filters,
+    userId,
     withExcludedAccounts = false
-  ): Promise<PortfolioDetails & { hasErrors: boolean }> {
-    const userId = await this.getUserId(aImpersonationId, aUserId);
+  }: {
+    impersonationId: string;
+    dateRange?: DateRange;
+    filters?: Filter[];
+    userId: string;
+    withExcludedAccounts?: boolean;
+  }): Promise<PortfolioDetails & { hasErrors: boolean }> {
+    userId = await this.getUserId(impersonationId, userId);
     const user = await this.userService.user({ id: userId });
+    const userCurrency = this.getUserCurrency(user);
 
     const emergencyFund = new Big(
       (user.Settings?.settings as UserSettings)?.emergencyFund ?? 0
     );
-    const userCurrency =
-      user.Settings?.settings.baseCurrency ??
-      this.request.user?.Settings?.settings.baseCurrency ??
-      this.baseCurrency;
 
     const { orders, portfolioOrders, transactionPoints } =
       await this.getTransactionPoints({
+        filters,
         userId,
-        withExcludedAccounts,
-        filters: aFilters
+        withExcludedAccounts
       });
 
     const portfolioCalculator = new PortfolioCalculator({
@@ -457,15 +394,15 @@ export class PortfolioService {
     const portfolioStart = parseDate(
       transactionPoints[0]?.date ?? format(new Date(), DATE_FORMAT)
     );
-    const startDate = this.getStartDate(aDateRange, portfolioStart);
+    const startDate = this.getStartDate(dateRange, portfolioStart);
     const currentPositions = await portfolioCalculator.getCurrentPositions(
       startDate
     );
 
     const cashDetails = await this.accountService.getCashDetails({
+      filters,
       userId,
-      currency: userCurrency,
-      filters: aFilters
+      currency: userCurrency
     });
 
     const holdings: PortfolioDetails['holdings'] = {};
@@ -475,10 +412,10 @@ export class PortfolioService {
     let filteredValueInBaseCurrency = currentPositions.currentValue;
 
     if (
-      aFilters?.length === 0 ||
-      (aFilters?.length === 1 &&
-        aFilters[0].type === 'ASSET_CLASS' &&
-        aFilters[0].id === 'CASH')
+      filters?.length === 0 ||
+      (filters?.length === 1 &&
+        filters[0].type === 'ASSET_CLASS' &&
+        filters[0].id === 'CASH')
     ) {
       filteredValueInBaseCurrency = filteredValueInBaseCurrency.plus(
         cashDetails.balanceInBaseCurrency
@@ -574,10 +511,10 @@ export class PortfolioService {
     }
 
     if (
-      aFilters?.length === 0 ||
-      (aFilters?.length === 1 &&
-        aFilters[0].type === 'ASSET_CLASS' &&
-        aFilters[0].id === 'CASH')
+      filters?.length === 0 ||
+      (filters?.length === 1 &&
+        filters[0].type === 'ASSET_CLASS' &&
+        filters[0].id === 'CASH')
     ) {
       const cashPositions = await this.getCashPositions({
         cashDetails,
@@ -593,15 +530,19 @@ export class PortfolioService {
     }
 
     const accounts = await this.getValueOfAccounts({
+      filters,
       orders,
       portfolioItemsNow,
       userCurrency,
       userId,
-      withExcludedAccounts,
-      filters: aFilters
+      withExcludedAccounts
     });
 
-    const summary = await this.getSummary(aImpersonationId);
+    const summary = await this.getSummary({
+      impersonationId,
+      userCurrency,
+      userId
+    });
 
     return {
       accounts,
@@ -621,8 +562,9 @@ export class PortfolioService {
     aImpersonationId: string,
     aSymbol: string
   ): Promise<PortfolioPositionDetail> {
-    const userCurrency = this.request.user.Settings.settings.baseCurrency;
     const userId = await this.getUserId(aImpersonationId, this.request.user.id);
+    const user = await this.userService.user({ id: userId });
+    const userCurrency = this.getUserCurrency(user);
 
     const orders = (
       await this.orderService.getOrders({
@@ -942,85 +884,18 @@ export class PortfolioService {
     };
   }
 
-  public async getPerformance(
-    aImpersonationId: string,
-    aDateRange: DateRange = 'max'
-  ): Promise<PortfolioPerformanceResponse> {
-    const userId = await this.getUserId(aImpersonationId, this.request.user.id);
-
-    const { portfolioOrders, transactionPoints } =
-      await this.getTransactionPoints({
-        userId
-      });
-
-    const portfolioCalculator = new PortfolioCalculator({
-      currency: this.request.user.Settings.settings.baseCurrency,
-      currentRateService: this.currentRateService,
-      orders: portfolioOrders
-    });
-
-    if (transactionPoints?.length <= 0) {
-      return {
-        hasErrors: false,
-        performance: {
-          currentGrossPerformance: 0,
-          currentGrossPerformancePercent: 0,
-          currentNetPerformance: 0,
-          currentNetPerformancePercent: 0,
-          currentValue: 0
-        }
-      };
-    }
-
-    portfolioCalculator.setTransactionPoints(transactionPoints);
-
-    const portfolioStart = parseDate(transactionPoints[0].date);
-    const startDate = this.getStartDate(aDateRange, portfolioStart);
-    const currentPositions = await portfolioCalculator.getCurrentPositions(
-      startDate
-    );
-
-    const hasErrors = currentPositions.hasErrors;
-    const currentValue = currentPositions.currentValue.toNumber();
-    const currentGrossPerformance = currentPositions.grossPerformance;
-    let currentGrossPerformancePercent =
-      currentPositions.grossPerformancePercentage;
-    const currentNetPerformance = currentPositions.netPerformance;
-    let currentNetPerformancePercent =
-      currentPositions.netPerformancePercentage;
-
-    if (currentGrossPerformance.mul(currentGrossPerformancePercent).lt(0)) {
-      // If algebraic sign is different, harmonize it
-      currentGrossPerformancePercent = currentGrossPerformancePercent.mul(-1);
-    }
-
-    if (currentNetPerformance.mul(currentNetPerformancePercent).lt(0)) {
-      // If algebraic sign is different, harmonize it
-      currentNetPerformancePercent = currentNetPerformancePercent.mul(-1);
-    }
-
-    return {
-      errors: currentPositions.errors,
-      hasErrors: currentPositions.hasErrors || hasErrors,
-      performance: {
-        currentValue,
-        currentGrossPerformance: currentGrossPerformance.toNumber(),
-        currentGrossPerformancePercent:
-          currentGrossPerformancePercent.toNumber(),
-        currentNetPerformance: currentNetPerformance.toNumber(),
-        currentNetPerformancePercent: currentNetPerformancePercent.toNumber()
-      }
-    };
-  }
-
-  public async getPerformanceV2({
+  public async getPerformance({
     dateRange = 'max',
-    impersonationId
+    impersonationId,
+    userId
   }: {
     dateRange?: DateRange;
     impersonationId: string;
+    userId: string;
   }): Promise<PortfolioPerformanceResponse> {
-    const userId = await this.getUserId(impersonationId, this.request.user.id);
+    userId = await this.getUserId(impersonationId, userId);
+    const user = await this.userService.user({ id: userId });
+    const userCurrency = this.getUserCurrency(user);
 
     const { portfolioOrders, transactionPoints } =
       await this.getTransactionPoints({
@@ -1028,7 +903,7 @@ export class PortfolioService {
       });
 
     const portfolioCalculator = new PortfolioCalculator({
-      currency: this.request.user.Settings.settings.baseCurrency,
+      currency: userCurrency,
       currentRateService: this.currentRateService,
       orders: portfolioOrders
     });
@@ -1036,13 +911,15 @@ export class PortfolioService {
     if (transactionPoints?.length <= 0) {
       return {
         chart: [],
+        firstOrderDate: undefined,
         hasErrors: false,
         performance: {
           currentGrossPerformance: 0,
           currentGrossPerformancePercent: 0,
           currentNetPerformance: 0,
           currentNetPerformancePercent: 0,
-          currentValue: 0
+          currentValue: 0,
+          totalInvestment: 0
         }
       };
     }
@@ -1063,6 +940,7 @@ export class PortfolioService {
     let currentNetPerformance = currentPositions.netPerformance;
     let currentNetPerformancePercent =
       currentPositions.netPerformancePercentage;
+    const totalInvestment = currentPositions.totalInvestment;
 
     // if (currentGrossPerformance.mul(currentGrossPerformancePercent).lt(0)) {
     //   // If algebraic sign is different, harmonize it
@@ -1074,9 +952,11 @@ export class PortfolioService {
     //   currentNetPerformancePercent = currentNetPerformancePercent.mul(-1);
     // }
 
-    const historicalDataContainer = await this.getChartV2({
+    const historicalDataContainer = await this.getChart({
       dateRange,
-      impersonationId
+      impersonationId,
+      userCurrency,
+      userId
     });
 
     const itemOfToday = historicalDataContainer.items.find((item) => {
@@ -1092,14 +972,24 @@ export class PortfolioService {
 
     return {
       chart: historicalDataContainer.items.map(
-        ({ date, netPerformanceInPercentage }) => {
+        ({
+          date,
+          netPerformance,
+          netPerformanceInPercentage,
+          totalInvestment,
+          value
+        }) => {
           return {
             date,
-            value: netPerformanceInPercentage
+            netPerformance,
+            netPerformanceInPercentage,
+            totalInvestment,
+            value
           };
         }
       ),
       errors: currentPositions.errors,
+      firstOrderDate: parseDate(historicalDataContainer.items[0]?.date),
       hasErrors: currentPositions.hasErrors || hasErrors,
       performance: {
         currentValue,
@@ -1107,14 +997,16 @@ export class PortfolioService {
         currentGrossPerformancePercent:
           currentGrossPerformancePercent.toNumber(),
         currentNetPerformance: currentNetPerformance.toNumber(),
-        currentNetPerformancePercent: currentNetPerformancePercent.toNumber()
+        currentNetPerformancePercent: currentNetPerformancePercent.toNumber(),
+        totalInvestment: totalInvestment.toNumber()
       }
     };
   }
 
   public async getReport(impersonationId: string): Promise<PortfolioReport> {
-    const currency = this.request.user.Settings.settings.baseCurrency;
     const userId = await this.getUserId(impersonationId, this.request.user.id);
+    const user = await this.userService.user({ id: userId });
+    const userCurrency = this.getUserCurrency(user);
 
     const { orders, portfolioOrders, transactionPoints } =
       await this.getTransactionPoints({
@@ -1128,7 +1020,7 @@ export class PortfolioService {
     }
 
     const portfolioCalculator = new PortfolioCalculator({
-      currency,
+      currency: userCurrency,
       currentRateService: this.currentRateService,
       orders: portfolioOrders
     });
@@ -1148,7 +1040,7 @@ export class PortfolioService {
       orders,
       portfolioItemsNow,
       userId,
-      userCurrency: currency
+      userCurrency
     });
     return {
       rules: {
@@ -1195,7 +1087,7 @@ export class PortfolioService {
             new FeeRatioInitialInvestment(
               this.exchangeRateDataService,
               currentPositions.totalInvestment.toNumber(),
-              this.getFees(orders).toNumber()
+              this.getFees({ orders, userCurrency }).toNumber()
             )
           ],
           <UserSettings>this.request.user.Settings.settings
@@ -1298,7 +1190,15 @@ export class PortfolioService {
     return cashPositions;
   }
 
-  private getDividend(orders: OrderWithAccount[], date = new Date(0)) {
+  private getDividend({
+    date = new Date(0),
+    orders,
+    userCurrency
+  }: {
+    date?: Date;
+    orders: OrderWithAccount[];
+    userCurrency: string;
+  }) {
     return orders
       .filter((order) => {
         // Filter out all orders before given date and type dividend
@@ -1311,7 +1211,7 @@ export class PortfolioService {
         return this.exchangeRateDataService.toCurrency(
           new Big(order.quantity).mul(order.unitPrice).toNumber(),
           order.SymbolProfile.currency,
-          this.request.user.Settings.settings.baseCurrency
+          userCurrency
         );
       })
       .reduce(
@@ -1320,7 +1220,15 @@ export class PortfolioService {
       );
   }
 
-  private getFees(orders: OrderWithAccount[], date = new Date(0)) {
+  private getFees({
+    date = new Date(0),
+    orders,
+    userCurrency
+  }: {
+    date?: Date;
+    orders: OrderWithAccount[];
+    userCurrency: string;
+  }) {
     return orders
       .filter((order) => {
         // Filter out all orders before given date
@@ -1330,7 +1238,7 @@ export class PortfolioService {
         return this.exchangeRateDataService.toCurrency(
           order.fee,
           order.SymbolProfile.currency,
-          this.request.user.Settings.settings.baseCurrency
+          userCurrency
         );
       })
       .reduce(
@@ -1379,14 +1287,22 @@ export class PortfolioService {
     return portfolioStart;
   }
 
-  private async getSummary(
-    aImpersonationId: string
-  ): Promise<PortfolioSummary> {
-    const userCurrency = this.request.user.Settings.settings.baseCurrency;
-    const userId = await this.getUserId(aImpersonationId, this.request.user.id);
+  private async getSummary({
+    impersonationId,
+    userCurrency,
+    userId
+  }: {
+    impersonationId: string;
+    userCurrency: string;
+    userId: string;
+  }): Promise<PortfolioSummary> {
+    userId = await this.getUserId(impersonationId, userId);
     const user = await this.userService.user({ id: userId });
 
-    const performanceInformation = await this.getPerformance(aImpersonationId);
+    const performanceInformation = await this.getPerformance({
+      impersonationId,
+      userId
+    });
 
     const { balanceInBaseCurrency } = await this.accountService.getCashDetails({
       userId,
@@ -1407,11 +1323,11 @@ export class PortfolioService {
       return account?.isExcluded ?? false;
     });
 
-    const dividend = this.getDividend(orders).toNumber();
+    const dividend = this.getDividend({ orders, userCurrency }).toNumber();
     const emergencyFund = new Big(
       (user.Settings?.settings as UserSettings)?.emergencyFund ?? 0
     );
-    const fees = this.getFees(orders).toNumber();
+    const fees = this.getFees({ orders, userCurrency }).toNumber();
     const firstOrderDate = orders[0]?.date;
     const items = this.getItems(orders).toNumber();
 
@@ -1679,4 +1595,12 @@ export class PortfolioService {
       })
       .reduce((previous, current) => previous + current, 0);
   }
+
+  private getUserCurrency(aUser: UserWithSettings) {
+    return (
+      aUser.Settings?.settings.baseCurrency ??
+      this.request.user?.Settings?.settings.baseCurrency ??
+      this.baseCurrency
+    );
+  }
 }

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

@@ -1,4 +1,8 @@
-import type { DateRange, ViewMode } from '@ghostfolio/common/types';
+import type {
+  ColorScheme,
+  DateRange,
+  ViewMode
+} from '@ghostfolio/common/types';
 import {
   IsBoolean,
   IsIn,
@@ -16,6 +20,10 @@ export class UpdateUserSettingDto {
   @IsOptional()
   benchmark?: string;
 
+  @IsIn(<ColorScheme[]>['DARK', 'LIGHT'])
+  @IsOptional()
+  colorScheme?: ColorScheme;
+
   @IsIn(<DateRange[]>['1d', '1y', '5y', 'max', 'ytd'])
   @IsOptional()
   dateRange?: DateRange;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -58,8 +58,15 @@ export class YahooFinanceService implements DataProviderInterface {
    *                  DOGEUSD -> DOGE-USD
    */
   public convertToYahooFinanceSymbol(aSymbol: string) {
-    if (aSymbol.includes(this.baseCurrency) && aSymbol.length >= 6) {
-      if (isCurrency(aSymbol.substring(0, aSymbol.length - 3))) {
+    if (
+      aSymbol.includes(this.baseCurrency) &&
+      aSymbol.length > this.baseCurrency.length
+    ) {
+      if (
+        isCurrency(
+          aSymbol.substring(0, aSymbol.length - this.baseCurrency.length)
+        )
+      ) {
         return `${aSymbol}=X`;
       } else if (
         this.cryptocurrencyService.isCryptocurrency(

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

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

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

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

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

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

apps/client-e2e/project.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/client-e2e/src",
+  "projectType": "application",
+  "targets": {
+    "e2e": {
+      "executor": "@nrwl/cypress:cypress",
+      "options": {
+        "cypressConfig": "apps/client-e2e/cypress.json",
+        "tsConfig": "apps/client-e2e/tsconfig.e2e.json",
+        "devServerTarget": "client:serve"
+      },
+      "configurations": {
+        "production": {
+          "devServerTarget": "client:serve:production"
+        }
+      }
+    }
+  },
+  "tags": [],
+  "implicitDependencies": ["client"]
+}

apps/client/project.json

@@ -0,0 +1,201 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "generators": {
+    "@schematics/angular:component": {
+      "style": "scss"
+    }
+  },
+  "sourceRoot": "apps/client/src",
+  "prefix": "gf",
+  "targets": {
+    "build": {
+      "executor": "@angular-devkit/build-angular:browser",
+      "options": {
+        "outputPath": "dist/apps/client",
+        "index": "apps/client/src/index.html",
+        "main": "apps/client/src/main.ts",
+        "polyfills": "apps/client/src/polyfills.ts",
+        "tsConfig": "apps/client/tsconfig.app.json",
+        "assets": [
+          {
+            "glob": "assetlinks.json",
+            "input": "apps/client/src/assets",
+            "output": "./../.well-known"
+          },
+          {
+            "glob": "CHANGELOG.md",
+            "input": "",
+            "output": "./../assets"
+          },
+          {
+            "glob": "LICENSE",
+            "input": "",
+            "output": "./../assets"
+          },
+          {
+            "glob": "robots.txt",
+            "input": "apps/client/src/assets",
+            "output": "./../"
+          },
+          {
+            "glob": "sitemap.xml",
+            "input": "apps/client/src/assets",
+            "output": "./../"
+          },
+          {
+            "glob": "**/*",
+            "input": "node_modules/ionicons/dist/ionicons",
+            "output": "./../ionicons"
+          },
+          {
+            "glob": "**/*.js",
+            "input": "node_modules/ionicons/dist/",
+            "output": "./../"
+          },
+          {
+            "glob": "**/*",
+            "input": "apps/client/src/assets",
+            "output": "./../assets/"
+          }
+        ],
+        "styles": ["apps/client/src/styles.scss"],
+        "scripts": ["node_modules/marked/marked.min.js"],
+        "vendorChunk": true,
+        "extractLicenses": false,
+        "buildOptimizer": false,
+        "sourceMap": true,
+        "optimization": false,
+        "namedChunks": true
+      },
+      "configurations": {
+        "development-de": {
+          "baseHref": "/de/",
+          "localize": ["de"]
+        },
+        "development-en": {
+          "baseHref": "/en/",
+          "localize": ["en"]
+        },
+        "development-es": {
+          "baseHref": "/es/",
+          "localize": ["es"]
+        },
+        "development-it": {
+          "baseHref": "/it/",
+          "localize": ["it"]
+        },
+        "development-nl": {
+          "baseHref": "/nl/",
+          "localize": ["nl"]
+        },
+        "production": {
+          "fileReplacements": [
+            {
+              "replace": "apps/client/src/environments/environment.ts",
+              "with": "apps/client/src/environments/environment.prod.ts"
+            }
+          ],
+          "optimization": true,
+          "outputHashing": "all",
+          "sourceMap": false,
+          "namedChunks": false,
+          "extractLicenses": true,
+          "vendorChunk": false,
+          "buildOptimizer": true,
+          "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "2mb",
+              "maximumError": "5mb"
+            },
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "6kb",
+              "maximumError": "10kb"
+            }
+          ]
+        }
+      },
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": ""
+    },
+    "serve": {
+      "executor": "@angular-devkit/build-angular:dev-server",
+      "options": {
+        "browserTarget": "client:build",
+        "proxyConfig": "apps/client/proxy.conf.json"
+      },
+      "configurations": {
+        "development-de": {
+          "browserTarget": "client:build:development-de"
+        },
+        "development-en": {
+          "browserTarget": "client:build:development-en"
+        },
+        "development-es": {
+          "browserTarget": "client:build:development-es"
+        },
+        "development-it": {
+          "browserTarget": "client:build:development-it"
+        },
+        "development-nl": {
+          "browserTarget": "client:build:development-nl"
+        },
+        "production": {
+          "browserTarget": "client:build:production"
+        }
+      }
+    },
+    "extract-i18n": {
+      "executor": "ng-extract-i18n-merge:ng-extract-i18n-merge",
+      "options": {
+        "browserTarget": "client:build",
+        "includeContext": true,
+        "outputPath": "src/locales",
+        "targetFiles": [
+          "messages.de.xlf",
+          "messages.es.xlf",
+          "messages.it.xlf",
+          "messages.nl.xlf"
+        ]
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "options": {
+        "lintFilePatterns": ["apps/client/**/*.ts"]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "options": {
+        "jestConfig": "apps/client/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "outputs": ["{workspaceRoot}/coverage/apps/client"]
+    }
+  },
+  "i18n": {
+    "locales": {
+      "de": {
+        "baseHref": "/de/",
+        "translation": "apps/client/src/locales/messages.de.xlf"
+      },
+      "es": {
+        "baseHref": "/es/",
+        "translation": "apps/client/src/locales/messages.es.xlf"
+      },
+      "it": {
+        "baseHref": "/it/",
+        "translation": "apps/client/src/locales/messages.it.xlf"
+      },
+      "nl": {
+        "baseHref": "/nl/",
+        "translation": "apps/client/src/locales/messages.nl.xlf"
+      }
+    },
+    "sourceLocale": "en"
+  },
+  "tags": []
+}

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

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

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

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

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

@@ -4,7 +4,7 @@
       <form class="align-items-center d-flex" [formGroup]="filterForm">
         <mat-form-field
           appearance="outline"
-          class="compact-with-outline flex-grow-1 mr-2 without-hint"
+          class="compact-with-outline without-hint w-100"
         >
           <mat-select formControlName="status">
             <mat-option></mat-option>
@@ -15,14 +15,6 @@
             >
           </mat-select>
         </mat-form-field>
-        <button
-          class="mt-1"
-          color="warn"
-          mat-flat-button
-          (click)="onDeleteJobs()"
-        >
-          <span i18n>Delete Jobs</span>
-        </button>
       </form>
       <table class="gf-table w-100">
         <thead>
@@ -35,7 +27,21 @@
             <th class="mat-header-cell px-1 py-2" i18n>Created</th>
             <th class="mat-header-cell px-1 py-2" i18n>Finished</th>
             <th class="mat-header-cell px-1 py-2" i18n>Status</th>
-            <th class="mat-header-cell px-1 py-2"></th>
+            <th class="mat-header-cell px-1 py-2">
+              <button
+                class="mx-1 no-min-width px-2"
+                mat-button
+                [matMenuTriggerFor]="jobsActionsMenu"
+                (click)="$event.stopPropagation()"
+              >
+                <ion-icon name="ellipsis-vertical"></ion-icon>
+              </button>
+              <mat-menu #jobsActionsMenu="matMenu" xPosition="before">
+                <button mat-menu-item (click)="onDeleteJobs()">
+                  <ng-container i18n>Delete Jobs</ng-container>
+                </button>
+              </mat-menu>
+            </th>
           </tr>
         </thead>
         <tbody>
@@ -102,12 +108,12 @@
                 <button
                   class="mx-1 no-min-width px-2"
                   mat-button
-                  [matMenuTriggerFor]="accountMenu"
+                  [matMenuTriggerFor]="jobActionsMenu"
                   (click)="$event.stopPropagation()"
                 >
                   <ion-icon name="ellipsis-vertical"></ion-icon>
                 </button>
-                <mat-menu #accountMenu="matMenu" xPosition="before">
+                <mat-menu #jobActionsMenu="matMenu" xPosition="before">
                   <button mat-menu-item (click)="onViewData(job.data)">
                     <ng-container i18n>View Data</ng-container>
                   </button>

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

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

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

@@ -150,6 +150,35 @@ export class AdminMarketDataComponent implements OnDestroy, OnInit {
       .subscribe(() => {});
   }
 
+  public onGather7Days() {
+    this.adminService
+      .gather7Days()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        setTimeout(() => {
+          window.location.reload();
+        }, 300);
+      });
+  }
+
+  public onGatherMax() {
+    this.adminService
+      .gatherMax()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        setTimeout(() => {
+          window.location.reload();
+        }, 300);
+      });
+  }
+
+  public onGatherProfileData() {
+    this.adminService
+      .gatherProfileData()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {});
+  }
+
   public onGatherProfileDataBySymbol({ dataSource, symbol }: UniqueAsset) {
     this.adminService
       .gatherProfileDataBySymbol({ dataSource, symbol })

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

@@ -13,10 +13,10 @@
     <div class="col">
       <table
         class="gf-table w-100"
+        mat-table
         matSort
         matSortActive="symbol"
         matSortDirection="asc"
-        mat-table
         [dataSource]="dataSource"
       >
         <ng-container matColumnDef="symbol">
@@ -101,17 +101,37 @@
         </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>
+          <th *matHeaderCellDef class="px-1 text-center" mat-header-cell>
             <button
               class="mx-1 no-min-width px-2"
               mat-button
-              [matMenuTriggerFor]="accountMenu"
+              [matMenuTriggerFor]="assetProfilesActionsMenu"
               (click)="$event.stopPropagation()"
             >
               <ion-icon name="ellipsis-vertical"></ion-icon>
             </button>
-            <mat-menu #accountMenu="matMenu" xPosition="before">
+            <mat-menu #assetProfilesActionsMenu="matMenu" xPosition="before">
+              <button mat-menu-item (click)="onGather7Days()">
+                <ng-container i18n>Gather Recent Data</ng-container>
+              </button>
+              <button mat-menu-item (click)="onGatherMax()">
+                <ng-container i18n>Gather All Data</ng-container>
+              </button>
+              <button mat-menu-item (click)="onGatherProfileData()">
+                <ng-container i18n>Gather Profile Data</ng-container>
+              </button>
+            </mat-menu>
+          </th>
+          <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+            <button
+              class="mx-1 no-min-width px-2"
+              mat-button
+              [matMenuTriggerFor]="assetProfileActionsMenu"
+              (click)="$event.stopPropagation()"
+            >
+              <ion-icon name="ellipsis-vertical"></ion-icon>
+            </button>
+            <mat-menu #assetProfileActionsMenu="matMenu" xPosition="before">
               <button
                 mat-menu-item
                 (click)="onGatherSymbol({dataSource: element.dataSource, symbol: element.symbol})"

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

@@ -1,6 +1,5 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { MatSlideToggleChange } from '@angular/material/slide-toggle';
-import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { CacheService } from '@ghostfolio/client/services/cache.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
@@ -43,7 +42,6 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
-    private adminService: AdminService,
     private cacheService: CacheService,
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
@@ -99,7 +97,7 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
       ...this.coupons,
       { code: this.generateCouponCode(16), duration: this.couponDuration }
     ];
-    this.putCoupons(coupons);
+    this.putAdminSetting({ key: PROPERTY_COUPONS, value: coupons });
   }
 
   public onAddCurrency() {
@@ -107,7 +105,7 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
 
     if (currency) {
       const currencies = uniq([...this.customCurrencies, currency]);
-      this.putCurrencies(currencies);
+      this.putAdminSetting({ key: PROPERTY_CURRENCIES, value: currencies });
     }
   }
 
@@ -124,7 +122,7 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
       const coupons = this.coupons.filter((coupon) => {
         return coupon.code !== aCouponCode;
       });
-      this.putCoupons(coupons);
+      this.putAdminSetting({ key: PROPERTY_COUPONS, value: coupons });
     }
   }
 
@@ -137,12 +135,12 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
       const currencies = this.customCurrencies.filter((currency) => {
         return currency !== aCurrency;
       });
-      this.putCurrencies(currencies);
+      this.putAdminSetting({ key: PROPERTY_CURRENCIES, value: currencies });
     }
   }
 
   public onDeleteSystemMessage() {
-    this.putSystemMessage('');
+    this.putAdminSetting({ key: PROPERTY_SYSTEM_MESSAGE, value: undefined });
   }
 
   public onFlushCache() {
@@ -162,44 +160,21 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
     }
   }
 
-  public onGather7Days() {
-    this.adminService
-      .gather7Days()
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(() => {
-        setTimeout(() => {
-          window.location.reload();
-        }, 300);
-      });
-  }
-
-  public onGatherMax() {
-    this.adminService
-      .gatherMax()
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(() => {
-        setTimeout(() => {
-          window.location.reload();
-        }, 300);
-      });
-  }
-
-  public onGatherProfileData() {
-    this.adminService
-      .gatherProfileData()
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(() => {});
-  }
-
   public onReadOnlyModeChange(aEvent: MatSlideToggleChange) {
-    this.setReadOnlyMode(aEvent.checked);
+    this.putAdminSetting({
+      key: PROPERTY_IS_READ_ONLY_MODE,
+      value: aEvent.checked ? true : undefined
+    });
   }
 
   public onSetSystemMessage() {
     const systemMessage = prompt($localize`Please set your system message:`);
 
     if (systemMessage) {
-      this.putSystemMessage(systemMessage);
+      this.putAdminSetting({
+        key: PROPERTY_SYSTEM_MESSAGE,
+        value: systemMessage
+      });
     }
   }
 
@@ -236,49 +211,10 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
     return couponCode;
   }
 
-  private putCoupons(aCoupons: Coupon[]) {
+  private putAdminSetting({ key, value }: { key: string; value: any }) {
     this.dataService
-      .putAdminSetting(PROPERTY_COUPONS, {
-        value: JSON.stringify(aCoupons)
-      })
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(() => {
-        setTimeout(() => {
-          window.location.reload();
-        }, 300);
-      });
-  }
-
-  private putCurrencies(aCurrencies: string[]) {
-    this.dataService
-      .putAdminSetting(PROPERTY_CURRENCIES, {
-        value: JSON.stringify(aCurrencies)
-      })
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(() => {
-        setTimeout(() => {
-          window.location.reload();
-        }, 300);
-      });
-  }
-
-  private putSystemMessage(aSystemMessage: string) {
-    this.dataService
-      .putAdminSetting(PROPERTY_SYSTEM_MESSAGE, {
-        value: aSystemMessage
-      })
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(() => {
-        setTimeout(() => {
-          window.location.reload();
-        }, 300);
-      });
-  }
-
-  private setReadOnlyMode(aValue: boolean) {
-    this.dataService
-      .putAdminSetting(PROPERTY_IS_READ_ONLY_MODE, {
-        value: aValue ? 'true' : ''
+      .putAdminSetting(key, {
+        value: value ? JSON.stringify(value) : undefined
       })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {

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

@@ -5,61 +5,25 @@
         <mat-card-content>
           <div class="d-flex my-3">
             <div class="w-50" i18n>User Count</div>
-            <div class="w-50">{{ userCount }}</div>
+            <div class="w-50">
+              <gf-value
+                precision="0"
+                [locale]="user?.settings?.locale"
+                [value]="userCount"
+              ></gf-value>
+            </div>
           </div>
           <div class="d-flex my-3">
             <div class="w-50" i18n>Activity Count</div>
             <div class="w-50">
-              <ng-container *ngIf="transactionCount">
-                {{ transactionCount }} ({{ transactionCount / userCount | number
-                : '1.2-2' }} <span i18n>per User</span>)
-              </ng-container>
-            </div>
-          </div>
-          <div class="d-flex my-3">
-            <div class="w-50" i18n>Data Management</div>
-            <div class="w-50">
-              <div class="overflow-hidden">
-                <div class="mb-2">
-                  <button
-                    color="accent"
-                    mat-flat-button
-                    (click)="onGather7Days()"
-                  >
-                    <ion-icon
-                      class="mr-1"
-                      name="cloud-download-outline"
-                    ></ion-icon>
-                    <span i18n>Gather Recent Data</span>
-                  </button>
-                </div>
-                <div class="mb-2">
-                  <button
-                    color="accent"
-                    mat-flat-button
-                    (click)="onGatherMax()"
-                  >
-                    <ion-icon
-                      class="mr-1"
-                      name="cloud-download-outline"
-                    ></ion-icon>
-                    <span i18n>Gather All Data</span>
-                  </button>
-                </div>
-                <div>
-                  <button
-                    class="mb-2 mr-2"
-                    color="accent"
-                    mat-flat-button
-                    (click)="onGatherProfileData()"
-                  >
-                    <ion-icon
-                      class="mr-1"
-                      name="cloud-download-outline"
-                    ></ion-icon>
-                    <span i18n>Gather Profile Data</span>
-                  </button>
-                </div>
+              <gf-value
+                precision="0"
+                [locale]="user?.settings?.locale"
+                [value]="transactionCount"
+              ></gf-value>
+              <div *ngIf="transactionCount && userCount">
+                {{ transactionCount / userCount | number : '1.2-2' }}
+                <span i18n>per User</span>
               </div>
             </div>
           </div>
@@ -108,10 +72,20 @@
               </div>
             </div>
           </div>
+          <div class="align-items-start d-flex my-3">
+            <div class="w-50" i18n>Benchmarks</div>
+            <div class="w-50">
+              <table>
+                <tr *ngFor="let benchmark of info?.benchmarks">
+                  <td class="pl-1">{{ benchmark.symbol }}</td>
+                </tr>
+              </table>
+            </div>
+          </div>
           <div *ngIf="hasPermissionForSystemMessage" class="d-flex my-3">
             <div class="w-50" i18n>System Message</div>
             <div class="w-50">
-              <div *ngIf="info.systemMessage">
+              <div *ngIf="info?.systemMessage">
                 <span>{{ info.systemMessage }}</span>
                 <button
                   class="mini-icon mx-1 no-min-width px-2"
@@ -122,7 +96,7 @@
                 </button>
               </div>
               <button
-                *ngIf="!info.systemMessage"
+                *ngIf="!info?.systemMessage"
                 color="accent"
                 mat-flat-button
                 (click)="onSetSystemMessage()"

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

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

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

@@ -1,8 +1,7 @@
-<div class="row">
+<div class="mb-2 row">
   <div class="col-md-6 col-xs-12 d-flex">
     <div class="align-items-center d-flex flex-grow-1 h5 mb-0 text-truncate">
-      <span i18n>Benchmarks</span>
-      <sup i18n>Beta</sup>
+      <span i18n>Performance</span>
       <gf-premium-indicator
         *ngIf="user?.subscription?.type === 'Basic'"
         class="ml-1"
@@ -14,6 +13,7 @@
       appearance="outline"
       class="w-100 without-hint"
       color="accent"
+      [hidden]="benchmarks?.length === 0"
     >
       <mat-label i18n>Compare with...</mat-label>
       <mat-select
@@ -21,6 +21,7 @@
         [value]="benchmark"
         (selectionChange)="onChangeBenchmark($event.value)"
       >
+        <mat-option [value]="null"></mat-option>
         <mat-option
           *ngFor="let symbolProfile of benchmarks"
           [value]="symbolProfile.id"
@@ -30,14 +31,6 @@
     </mat-form-field>
   </div>
 </div>
-<div *ngIf="user.settings.viewMode !== 'ZEN'" class="my-2 text-center">
-  <gf-toggle
-    [defaultValue]="user?.settings?.dateRange"
-    [isLoading]="isLoading"
-    [options]="dateRangeOptions"
-    (change)="onChangeDateRange($event.value)"
-  ></gf-toggle>
-</div>
 <div class="chart-container">
   <ngx-skeleton-loader
     *ngIf="isLoading"

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

@@ -10,7 +10,6 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
-import { ToggleComponent } from '@ghostfolio/client/components/toggle/toggle.component';
 import {
   getTooltipOptions,
   getTooltipPositionerMapTop,
@@ -24,7 +23,8 @@ import {
   parseDate
 } from '@ghostfolio/common/helper';
 import { LineChartItem, User } from '@ghostfolio/common/interfaces';
-import { DateRange } from '@ghostfolio/common/types';
+import { ColorScheme } from '@ghostfolio/common/types';
+import { SymbolProfile } from '@prisma/client';
 import {
   Chart,
   LineController,
@@ -35,7 +35,6 @@ import {
   Tooltip
 } from 'chart.js';
 import annotationPlugin from 'chartjs-plugin-annotation';
-import { SymbolProfile } from '@prisma/client';
 
 @Component({
   selector: 'gf-benchmark-comparator',
@@ -47,6 +46,7 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
   @Input() benchmarkDataItems: LineChartItem[] = [];
   @Input() benchmark: string;
   @Input() benchmarks: Partial<SymbolProfile>[];
+  @Input() colorScheme: ColorScheme;
   @Input() daysInMarket: number;
   @Input() isLoading: boolean;
   @Input() locale: string;
@@ -54,12 +54,10 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
   @Input() user: User;
 
   @Output() benchmarkChanged = new EventEmitter<string>();
-  @Output() dateRangeChanged = new EventEmitter<DateRange>();
 
   @ViewChild('chartCanvas') chartCanvas;
 
   public chart: Chart<any>;
-  public dateRangeOptions = ToggleComponent.DEFAULT_DATE_RANGE_OPTIONS;
 
   public constructor() {
     Chart.register(
@@ -86,10 +84,6 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
     this.benchmarkChanged.next(symbolProfileId);
   }
 
-  public onChangeDateRange(dateRange: DateRange) {
-    this.dateRangeChanged.next(dateRange);
-  }
-
   public ngOnDestroy() {
     this.chart?.destroy();
   }
@@ -135,7 +129,7 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
                 tension: 0
               },
               point: {
-                hoverBackgroundColor: getBackgroundColor(),
+                hoverBackgroundColor: getBackgroundColor(this.colorScheme),
                 hoverRadius: 2,
                 radius: 0
               }
@@ -146,7 +140,7 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
               annotation: {
                 annotations: {
                   yAxis: {
-                    borderColor: `rgba(${getTextColor()}, 0.1)`,
+                    borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
                     borderWidth: 1,
                     scaleID: 'y',
                     type: 'line',
@@ -159,7 +153,7 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
               },
               tooltip: this.getTooltipPluginConfiguration(),
               verticalHoverLine: {
-                color: `rgba(${getTextColor()}, 0.1)`
+                color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`
               }
             },
             responsive: true,
@@ -167,9 +161,9 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
               x: {
                 display: true,
                 grid: {
-                  borderColor: `rgba(${getTextColor()}, 0.1)`,
+                  borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
                   borderWidth: 1,
-                  color: `rgba(${getTextColor()}, 0.8)`,
+                  color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`,
                   display: false
                 },
                 type: 'time',
@@ -181,8 +175,8 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
               y: {
                 display: true,
                 grid: {
-                  borderColor: `rgba(${getTextColor()}, 0.1)`,
-                  color: `rgba(${getTextColor()}, 0.8)`,
+                  borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
+                  color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`,
                   display: false,
                   drawBorder: false
                 },
@@ -198,7 +192,9 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
               }
             }
           },
-          plugins: [getVerticalHoverLinePlugin(this.chartCanvas)],
+          plugins: [
+            getVerticalHoverLinePlugin(this.chartCanvas, this.colorScheme)
+          ],
           type: 'line'
         });
       }
@@ -208,6 +204,7 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
   private getTooltipPluginConfiguration() {
     return {
       ...getTooltipOptions({
+        colorScheme: this.colorScheme,
         locale: this.locale,
         unit: '%'
       }),

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

@@ -2,7 +2,6 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatSelectModule } from '@angular/material/select';
-import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { BenchmarkComparatorComponent } from './benchmark-comparator.component';
@@ -13,7 +12,6 @@ import { BenchmarkComparatorComponent } from './benchmark-comparator.component';
   imports: [
     CommonModule,
     FormsModule,
-    GfToggleModule,
     MatSelectModule,
     NgxSkeletonLoaderModule,
     ReactiveFormsModule

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

@@ -127,6 +127,7 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
             dataSource,
             symbol,
             baseCurrency: this.user?.settings?.baseCurrency,
+            colorScheme: this.user?.settings?.colorScheme,
             deviceType: this.deviceType,
             hasImpersonationId: this.hasImpersonationId,
             hasPermissionToReportDataGlitch: hasPermission(

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

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

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

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

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

@@ -107,8 +107,7 @@ export class HomeOverviewComponent implements OnDestroy, OnInit {
 
     this.dataService
       .fetchPortfolioPerformance({
-        range: this.user?.settings?.dateRange,
-        version: this.user?.settings?.isExperimentalFeatures ? 2 : 1
+        range: this.user?.settings?.dateRange
       })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((response) => {
@@ -117,35 +116,14 @@ export class HomeOverviewComponent implements OnDestroy, OnInit {
         this.performance = response.performance;
         this.isLoadingPerformance = false;
 
-        if (this.user?.settings?.isExperimentalFeatures) {
-          this.historicalDataItems = response.chart.map(({ date, value }) => {
+        this.historicalDataItems = response.chart.map(
+          ({ date, netPerformanceInPercentage }) => {
             return {
               date,
-              value
+              value: netPerformanceInPercentage
             };
-          });
-        } else {
-          this.dataService
-            .fetchChart({
-              range: this.user?.settings?.dateRange,
-              version: 1
-            })
-            .pipe(takeUntil(this.unsubscribeSubject))
-            .subscribe((chartData) => {
-              this.historicalDataItems = chartData.chart.map(
-                ({ date, value }) => {
-                  return {
-                    date,
-                    value
-                  };
-                }
-              );
-              this.isAllTimeHigh = chartData.isAllTimeHigh;
-              this.isAllTimeLow = chartData.isAllTimeLow;
-
-              this.changeDetectorRef.markForCheck();
-            });
-        }
+          }
+        );
 
         this.changeDetectorRef.markForCheck();
       });

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

@@ -15,16 +15,17 @@
         <gf-line-chart
           class="position-absolute"
           symbol="Performance"
-          [currency]="user?.settings?.isExperimentalFeatures ? undefined : user?.settings?.baseCurrency"
-          [historicalDataItems]="historicalDataItems"
+          unit="%"
+          [colorScheme]="user?.settings?.colorScheme"
           [hidden]="historicalDataItems?.length === 0"
+          [historicalDataItems]="historicalDataItems"
+          [isAnimated]="user?.settings?.dateRange === '1d' ? false : true"
           [locale]="user?.settings?.locale"
           [ngClass]="{ 'pr-3': deviceType === 'mobile' }"
           [showGradient]="true"
           [showLoader]="false"
           [showXAxis]="false"
           [showYAxis]="false"
-          [unit]="user?.settings?.isExperimentalFeatures ? '%' : undefined"
         ></gf-line-chart>
       </div>
     </div>

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

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

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

@@ -22,9 +22,6 @@
   <div class="row px-3 py-1">
     <div class="d-flex flex-grow-1" i18n>Sell</div>
     <div class="d-flex justify-content-end">
-      <span *ngIf="summary?.totalSell || summary?.totalSell === 0" class="mr-1"
-        >-</span
-      >
       <gf-value
         class="justify-content-end"
         [currency]="baseCurrency"

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

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

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

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

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

@@ -5,6 +5,7 @@ import {
   Router,
   RouterStateSnapshot
 } from '@angular/router';
+import { DataService } from '@ghostfolio/client/services/data.service';
 import { SettingsStorageService } from '@ghostfolio/client/services/settings-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { EMPTY } from 'rxjs';
@@ -30,6 +31,7 @@ export class AuthGuard implements CanActivate {
   ];
 
   constructor(
+    private dataService: DataService,
     private router: Router,
     private settingsStorageService: SettingsStorageService,
     private userService: UserService
@@ -74,8 +76,17 @@ export class AuthGuard implements CanActivate {
           const userLanguage = user?.settings?.language;
 
           if (userLanguage && document.documentElement.lang !== userLanguage) {
-            window.location.href = `../${userLanguage}`;
-            resolve(false);
+            this.dataService
+              .putUserSetting({ language: document.documentElement.lang })
+              .subscribe(() => {
+                this.userService.remove();
+
+                setTimeout(() => {
+                  window.location.reload();
+                }, 300);
+              });
+
+            resolve(true);
             return;
           } else if (
             state.url.startsWith('/home') &&

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

@@ -177,7 +177,7 @@
       <a
         class="py-2 w-100"
         color="primary"
-        mat-stroked-button
+        mat-flat-button
         [routerLink]="['/faq']"
         >FAQ</a
       >
@@ -189,7 +189,7 @@
       <a
         class="py-2 w-100"
         color="primary"
-        mat-stroked-button
+        mat-flat-button
         [routerLink]="['/about', 'changelog']"
         >Changelog & License</a
       >
@@ -198,7 +198,7 @@
       <a
         class="py-2 w-100"
         color="primary"
-        mat-stroked-button
+        mat-flat-button
         [routerLink]="['/about', 'privacy-policy']"
         >Privacy Policy</a
       >

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

@@ -42,6 +42,7 @@ export class AccountPageComponent implements OnDestroy, OnInit {
   signInWithFingerprintElement: MatSlideToggle;
 
   public accesses: Access[];
+  public appearancePlaceholder = $localize`Auto`;
   public baseCurrency: string;
   public coupon: number;
   public couponId: string;

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

@@ -167,7 +167,7 @@
                   </mat-form-field>
                 </div>
               </div>
-              <div class="d-flex">
+              <div class="d-flex mb-2">
                 <div class="align-items-center d-flex pr-1 pt-1 w-50">
                   <ng-container i18n>View Mode</ng-container>
                 </div>
@@ -190,6 +190,30 @@
                   </div>
                 </div>
               </div>
+              <div class="d-flex">
+                <div class="align-items-center d-flex pr-1 pt-1 w-50">
+                  <ng-container i18n>Appearance</ng-container>
+                </div>
+                <div class="pl-1 w-50">
+                  <mat-form-field
+                    appearance="outline"
+                    class="compact-with-outline w-100 without-hint"
+                  >
+                    <mat-select
+                      class="with-placeholder-as-option"
+                      name="colorScheme"
+                      [disabled]="!hasPermissionToUpdateUserSettings"
+                      [placeholder]="appearancePlaceholder"
+                      [value]="user?.settings?.colorScheme"
+                      (selectionChange)="onChangeUserSetting('colorScheme', $event.value)"
+                    >
+                      <mat-option i18n [value]="null">Auto</mat-option>
+                      <mat-option i18n value="LIGHT">Light</mat-option>
+                      <mat-option i18n value="DARK">Dark</mat-option>
+                    </mat-select>
+                  </mat-form-field>
+                </div>
+              </div>
             </form>
           </div>
           <div class="align-items-center d-flex mt-4 py-1">
@@ -243,8 +267,8 @@
       class="align-items-center d-flex justify-content-center"
       color="primary"
       mat-fab
-      [routerLink]="[]"
       [queryParams]="{ createDialog: true }"
+      [routerLink]="[]"
     >
       <ion-icon name="add-outline" size="large"></ion-icon>
     </a>

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,178 @@
+<div class="blog container">
+  <div class="row">
+    <div class="col-md-8 offset-md-2">
+      <article>
+        <div class="mb-4 text-center">
+          <h1 class="mb-1">Hacktoberfest 2022</h1>
+          <div class="mb-3 text-muted"><small>2022-10-01</small></div>
+          <img
+            alt="Hacktoberfest 2022 with Ghostfolio Teaser"
+            class="rounded w-100"
+            src="../assets/images/blog/hacktoberfest-2022.png"
+            title="Hacktoberfest 2022 with Ghostfolio"
+          />
+        </div>
+        <section class="mb-4">
+          <p>
+            We are very excited to join
+            <a href="https://hacktoberfest.com">Hacktoberfest</a> for the first
+            time with <a href="https://ghostfol.io">Ghostfolio</a> and meet new
+            and ambitious open-source contributors. Hacktoberfest is a
+            month-long celebration of open-source projects, their maintainers,
+            and the entire community of contributors. Each October, open source
+            maintainers from all over the world give extra attention to new
+            contributors while guiding them through their first pull requests on
+            <a href="https://github.com/ghostfolio/ghostfolio">GitHub</a>.
+          </p>
+        </section>
+        <section class="mb-4">
+          <h2 class="h4">About Ghostfolio</h2>
+          <p>
+            Ghostfolio is a modern web application to manage your personal
+            finance. The software presents the current assets in real time and
+            supports the decision making of future investments. Whether
+            rebalancing the asset classes (stocks, ETFs, cryptocurrencies, etc.)
+            of your portfolio or financing an apartment, Ghostfolio offers
+            solid, data-driven decision support.
+          </p>
+          <p>
+            Ghostfolio is written in
+            <a href="https://www.typescriptlang.org">TypeScript</a> and
+            organized as an <a href="https://nx.dev">Nx</a> workspace. The
+            backend is based on <a href="https://nestjs.com">NestJS</a> using
+            <a href="https://www.postgresql.org">PostgreSQL</a> as a database
+            together with <a href="https://www.prisma.io">Prisma</a> and
+            <a href="https://redis.io">Redis</a> for caching. The frontend is
+            built with <a href="https://angular.io">Angular</a>.
+          </p>
+        </section>
+        <section class="mb-4">
+          <h2 class="h4">How to contribute?</h2>
+          <p>
+            Every contribution matters. This can be implementing new features,
+            fixing bugs, refactoring the code, improving the documentation,
+            adding more unit tests, or translating into another language.
+          </p>
+          <p>
+            Are you not yet familiar with our code base? That is not a problem.
+            We have applied the label <code>hacktoberfest</code> to a few
+            <a
+              href="https://github.com/ghostfolio/ghostfolio/issues?q=is%3Aissue+is%3Aopen+label%3Ahacktoberfest"
+              >issues</a
+            >
+            and
+            <a
+              href="https://github.com/ghostfolio/ghostfolio/discussions?discussions_q=label%3Ahacktoberfest"
+              >ideas</a
+            >
+            that are well suited for newcomers.
+          </p>
+          <p>
+            The official Hacktoberfest website provides some valuable
+            <a
+              href="https://hacktoberfest.com/participation/#beginner-resources"
+              >resources for beginners</a
+            >
+            to start contributing in open source.
+          </p>
+        </section>
+        <section class="mb-4">
+          <h2 class="h4">Get support</h2>
+          <p>
+            If you have further questions or ideas, please join our growing
+            <a href="https://ghostfolio.slack.com">Slack community</a> or get in
+            touch on Twitter
+            <a href="https://twitter.com/ghostfolio_">@ghostfolio_</a> or by
+            email via <a href="mailto:hi@ghostfol.io">hi@ghostfol.io</a>.
+          </p>
+          <p>
+            We look forward to hearing from you.<br />
+            Thomas from Ghostfolio
+          </p>
+        </section>
+        <section class="mb-4">
+          <ul class="list-inline">
+            <li class="list-inline-item">
+              <span class="badge badge-light">Angular</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Community</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Cryptocurrency</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">ETF</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Finance</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Fintech</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Ghostfolio</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">GitHub</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Hacktoberfest</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Investment</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">NestJS</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Nx</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">October</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Open Source</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">OSS</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Personal Finance</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Portfolio</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Portfolio Tracker</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Prisma</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Software</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Stock</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">TypeScript</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Wealth</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Wealth Management</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Web3</span>
+            </li>
+            <li class="list-inline-item">
+              <span class="badge badge-light">Web 3.0</span>
+            </li>
+          </ul>
+        </section>
+      </article>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { Hacktoberfest2022RoutingModule } from './hacktoberfest-2022-page-routing.module';
+import { Hacktoberfest2022PageComponent } from './hacktoberfest-2022-page.component';
+
+@NgModule({
+  declarations: [Hacktoberfest2022PageComponent],
+  imports: [CommonModule, Hacktoberfest2022RoutingModule, RouterModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class Hacktoberfest2022PageModule {}

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

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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

@@ -2,6 +2,30 @@
   <div class="mb-5 row">
     <div class="col">
       <h3 class="mb-3 text-center" i18n>Blog</h3>
+      <mat-card class="mb-3">
+        <mat-card-content>
+          <div class="container p-0">
+            <div class="flex-nowrap no-gutters row">
+              <a
+                class="d-flex w-100"
+                href="../en/blog/2022/10/hacktoberfest-2022"
+              >
+                <div class="flex-grow-1">
+                  <div class="h6 m-0 text-truncate">Hacktoberfest 2022</div>
+                  <div class="d-flex text-muted">2022-10-01</div>
+                </div>
+                <div class="align-items-center d-flex">
+                  <ion-icon
+                    class="chevron text-muted"
+                    name="chevron-forward-outline"
+                    size="small"
+                  ></ion-icon>
+                </div>
+              </a>
+            </div>
+          </div>
+        </mat-card-content>
+      </mat-card>
       <mat-card class="mb-3">
         <mat-card-content>
           <div class="container p-0">

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

@@ -1,5 +1,9 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
+import { DataService } from '@ghostfolio/client/services/data.service';
+import { Statistics } from '@ghostfolio/common/interfaces/statistics.interface';
+import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { format } from 'date-fns';
+import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 
 @Component({
@@ -11,6 +15,9 @@ import { Subject } from 'rxjs';
 export class LandingPageComponent implements OnDestroy, OnInit {
   public currentYear = format(new Date(), 'yyyy');
   public demoAuthToken: string;
+  public deviceType: string;
+  public hasPermissionForStatistics: boolean;
+  public statistics: Statistics;
   public testimonials = [
     {
       author: 'Philipp',
@@ -36,9 +43,23 @@ export class LandingPageComponent implements OnDestroy, OnInit {
 
   private unsubscribeSubject = new Subject<void>();
 
-  public constructor() {}
+  public constructor(
+    private dataService: DataService,
+    private deviceService: DeviceDetectorService
+  ) {
+    const { globalPermissions, statistics } = this.dataService.fetchInfo();
 
-  public ngOnInit() {}
+    this.hasPermissionForStatistics = hasPermission(
+      globalPermissions,
+      permissions.enableStatistics
+    );
+
+    this.statistics = statistics;
+  }
+
+  public ngOnInit() {
+    this.deviceType = this.deviceService.getDeviceInfo().deviceType;
+  }
 
   public ngOnDestroy() {
     this.unsubscribeSubject.next();

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

@@ -1,10 +1,15 @@
 <div class="container">
   <div class="row">
     <div class="col text-center">
-      <h1 class="font-weight-bold intro my-5">
+      <h1 class="font-weight-bold intro mt-5">
         Manage your wealth like a boss
       </h1>
-      <div>
+      <p class="lead mb-4">
+        Ghostfolio is a privacy-first, open source dashboard for your personal
+        finances. Break down your asset allocation, know your net worth and make
+        solid, data-driven investment decisions.
+      </p>
+      <div class="mb-4">
         <a
           href="https://www.youtube.com/watch?v=yY6ObSQVJZk"
           target="_blank"
@@ -23,9 +28,9 @@
 </div>
 
 <div class="container">
-  <div class="button-container row">
+  <div class="button-container mb-5 row">
     <div class="align-items-center col d-flex justify-content-center">
-      <div class="py-5 text-center">
+      <div class="text-center">
         <a
           class="d-inline-block"
           color="primary"
@@ -42,15 +47,121 @@
     </div>
   </div>
 
-  <div class="row my-5">
+  <div *ngIf="hasPermissionForStatistics" class="row mb-5">
+    <div
+      class="col-md-4 d-flex my-1"
+      [ngClass]="{ 'justify-content-center': this.deviceType !== 'mobile' }"
+    >
+      <a
+        class="d-block"
+        title="Ghostfolio in Numbers: Monthly Active Users (MAU)"
+        [routerLink]="['/about']"
+      >
+        <gf-value
+          icon="people-outline"
+          size="large"
+          [value]="statistics?.activeUsers30d ?? '-'"
+          >Monthly Active Users</gf-value
+        >
+      </a>
+    </div>
+    <div
+      class="col-md-4 d-flex my-1"
+      [ngClass]="{ 'justify-content-center': this.deviceType !== 'mobile' }"
+    >
+      <a
+        class="d-block"
+        title="Ghostfolio in Numbers: Stars on GitHub"
+        [routerLink]="['/about']"
+      >
+        <gf-value
+          icon="star-outline"
+          size="large"
+          [value]="statistics?.gitHubStargazers ?? '-'"
+          >Stars on GitHub</gf-value
+        >
+      </a>
+    </div>
+    <div
+      class="col-md-4 d-flex my-1"
+      [ngClass]="{ 'justify-content-center': this.deviceType !== 'mobile' }"
+    >
+      <a
+        class="d-block"
+        title="Ghostfolio in Numbers: Pulls on Docker Hub"
+        [routerLink]="['/about']"
+      >
+        <gf-value
+          icon="cloud-download-outline"
+          size="large"
+          [value]="statistics?.dockerHubPulls ?? '-'"
+          >Pulls on Docker Hub</gf-value
+        >
+      </a>
+    </div>
+  </div>
+
+  <div class="row mb-5">
+    <div class="col-12 text-center text-muted"><small>As seen in</small></div>
+    <div class="col-md-2 d-flex justify-content-center my-1">
+      <a
+        class="d-block logo logo-alternative-to mask"
+        href="https://alternativeto.net"
+        target="_blank"
+        title="AlternativeTo - Crowdsourced software recommendations"
+      ></a>
+    </div>
+    <div class="col-md-2 d-flex justify-content-center my-1">
+      <a
+        class="d-block logo logo-awesome"
+        href="https://github.com/awesome-selfhosted/awesome-selfhosted"
+        target="_blank"
+        title="Awesome-Selfhosted: A list of Free Software network services and web applications which can be hosted on your own servers"
+      ></a>
+    </div>
+    <div class="col-md-2 d-flex justify-content-center my-1">
+      <a
+        class="d-block logo logo-openstartup"
+        href="https://openstartup.tm"
+        target="_blank"
+        title="Open Startup: The most complete list of open startups"
+      ></a>
+    </div>
+    <div class="col-md-2 d-flex justify-content-center my-1">
+      <a
+        class="d-block logo logo-privacy-tools mask"
+        href="https://www.privacytools.io"
+        target="_blank"
+        title="Privacy Tools: Software Alternatives and Encryption"
+      ></a>
+    </div>
+    <div class="col-md-2 d-flex justify-content-center my-1">
+      <a
+        class="d-block logo logo-product-hunt"
+        href="https://www.producthunt.com"
+        target="_blank"
+        title="Product Hunt – The best new products in tech."
+      ></a>
+    </div>
+    <div class="col-md-2 d-flex justify-content-center my-1">
+      <a
+        class="d-block logo logo-unraid mask"
+        href="https://unraid.net"
+        target="_blank"
+        title="Unraid | Unleash Your Hardware"
+      ></a>
+    </div>
+  </div>
+
+  <div class="pt-3 row">
     <div class="col text-center">
       <h2 class="h4 mb-1 text-center">
         Protect your <strong>assets</strong>. Refine your
         <strong>personal investment strategy</strong>.
       </h2>
-      <p class="lead">
+      <p class="lead m-0">
         Ghostfolio empowers busy people to keep track of stocks, ETFs or
-        cryptocurrencies and make solid, data-driven investment decisions.
+        cryptocurrencies without being tracked.
       </p>
     </div>
   </div>
@@ -58,20 +169,20 @@
   <div class="row my-3">
     <div class="col-md-4 my-2">
       <mat-card>
-        <mat-card-title class="text-center">360° View</mat-card-title>
+        <mat-card-title>360° View</mat-card-title>
         Get the full picture of your personal finances across multiple
         platforms.
       </mat-card>
     </div>
     <div class="col-md-4 my-2">
       <mat-card>
-        <mat-card-title class="text-center">Web3 Ready</mat-card-title>
+        <mat-card-title>Web3 Ready</mat-card-title>
         Use Ghostfolio anonymously and own your financial data.
       </mat-card>
     </div>
     <div class="col-md-4 my-2">
       <mat-card>
-        <mat-card-title class="text-center">Open Source</mat-card-title>
+        <mat-card-title>Open Source</mat-card-title>
         Benefit from continuous improvements through a strong community.
       </mat-card>
     </div>
@@ -123,7 +234,7 @@
         </li>
       </ul>
       <div class="mt-4 text-center">
-        <a [routerLink]="['/about']" mat-stroked-button
+        <a mat-stroked-button [routerLink]="['/about']"
           >Learn more about Ghostfolio</a
         >
       </div>
@@ -196,7 +307,7 @@
   </div>
 
   <div class="row my-5">
-    <div class="col-md-6 offset-md-3">
+    <div class="col">
       <h2 class="h4 mb-1 text-center">Are <strong>you</strong> ready?</h2>
       <p class="lead mb-3 text-center">
         Join now or check out the example account
@@ -240,7 +351,7 @@
   <div class="row">
     <div class="align-items-center d-flex flex-column w-100">
       <a
-        class="agplv3-logo"
+        class="logo logo-agplv3 mask"
         href="https://www.gnu.org/licenses/agpl-3.0.html"
         target="_blank"
         title="GNU Affero General Public License Version 3"

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

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { RouterModule } from '@angular/router';
 import { GfLogoModule } from '@ghostfolio/ui/logo';
+import { GfValueModule } from '@ghostfolio/ui/value';
 
 import { LandingPageRoutingModule } from './landing-page-routing.module';
 import { LandingPageComponent } from './landing-page.component';
@@ -13,6 +14,7 @@ import { LandingPageComponent } from './landing-page.component';
   imports: [
     CommonModule,
     GfLogoModule,
+    GfValueModule,
     LandingPageRoutingModule,
     MatButtonModule,
     MatCardModule,

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

@@ -3,16 +3,6 @@
 :host {
   display: block;
 
-  .agplv3-logo {
-    background-color: rgba(var(--dark-primary-text));
-    height: 3rem;
-    mask-image: url('/assets/images/AGPLv3-logo.svg');
-    mask-position: center;
-    mask-repeat: no-repeat;
-    mask-size: contain;
-    width: 7.5rem;
-  }
-
   .button-container {
     .mat-stroked-button {
       background-color: var(--light-background);
@@ -34,6 +24,58 @@
     }
   }
 
+  .logo {
+    height: 3rem;
+    width: 7.5rem;
+
+    &.mask {
+      background-color: rgba(var(--dark-secondary-text));
+      mask-position: center;
+      mask-repeat: no-repeat;
+      mask-size: contain;
+    }
+
+    &.logo-agplv3 {
+      mask-image: url('/assets/images/logo-AGPLv3.svg');
+    }
+
+    &.logo-alternative-to {
+      mask-image: url('/assets/images/logo-alternative-to.svg');
+    }
+
+    &.logo-awesome {
+      background-image: url('/assets/images/logo-awesome.png');
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+      filter: grayscale(1);
+    }
+
+    &.logo-openstartup {
+      background-image: url('/assets/images/logo-openstartup.png');
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+      filter: grayscale(1);
+    }
+
+    &.logo-privacy-tools {
+      mask-image: url('/assets/images/logo-privacy-tools.svg');
+    }
+
+    &.logo-product-hunt {
+      background-image: url('/assets/images/logo-product-hunt.png');
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+      filter: grayscale(1);
+    }
+
+    &.logo-unraid {
+      mask-image: url('/assets/images/logo-unraid.svg');
+    }
+  }
+
   .outro-inner-container {
     aspect-ratio: 16 / 9;
     max-height: 66vh;
@@ -56,16 +98,21 @@
 }
 
 :host-context(.is-dark-theme) {
-  .agplv3-logo {
-    background-color: rgba(var(--light-primary-text));
-  }
-
   .button-container {
     .mat-stroked-button {
       background-color: var(--dark-background);
     }
   }
 
+  .logo {
+    &.logo-agplv3,
+    &.logo-alternative-to,
+    &.logo-privacy-tools,
+    &.logo-unraid {
+      background-color: rgba(var(--light-primary-text));
+    }
+  }
+
   .outro-inner-container {
     div {
       background-image: url('/assets/intro-dark.jpg') !important;

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

@@ -19,6 +19,7 @@ import {
 } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { Market, ToggleOption } from '@ghostfolio/common/types';
+import { translate } from '@ghostfolio/ui/i18n';
 import { Account, AssetClass, DataSource } from '@prisma/client';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject, Subscription } from 'rxjs';
@@ -174,7 +175,7 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
           for (const assetClass of Object.keys(AssetClass)) {
             assetClassFilters.push({
               id: assetClass,
-              label: assetClass,
+              label: translate(assetClass),
               type: 'ASSET_CLASS'
             });
           }
@@ -450,6 +451,7 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
             dataSource,
             symbol,
             baseCurrency: this.user?.settings?.baseCurrency,
+            colorScheme: this.user?.settings?.colorScheme,
             deviceType: this.deviceType,
             hasImpersonationId: this.hasImpersonationId,
             hasPermissionToReportDataGlitch: hasPermission(

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

@@ -13,12 +13,12 @@
   <div class="row">
     <div class="col">
       <mat-card class="mb-3">
-        <mat-card-header class="overflow-hidden w-100">
-          <mat-card-title class="text-truncate" i18n
+        <mat-card-header class="mb-2 overflow-hidden w-100">
+          <mat-card-title class="m-0 text-truncate" i18n
             >Proportion of Net Worth</mat-card-title
           >
           <gf-value
-            class="align-items-end flex-grow-1 ml-2"
+            class="justify-content-end l-2"
             size="medium"
             [isPercent]="true"
             [value]="isLoading ? undefined : portfolioDetails?.filteredValueInPercentage"
@@ -50,6 +50,7 @@
           <gf-portfolio-proportion-chart
             cursor="pointer"
             [baseCurrency]="user?.settings?.baseCurrency"
+            [colorScheme]="user?.settings?.colorScheme"
             [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
             [keys]="['id']"
             [locale]="user?.settings?.locale"
@@ -79,6 +80,7 @@
         <mat-card-content>
           <gf-portfolio-proportion-chart
             [baseCurrency]="user?.settings?.baseCurrency"
+            [colorScheme]="user?.settings?.colorScheme"
             [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
             [keys]="['currency']"
             [locale]="user?.settings?.locale"
@@ -107,6 +109,7 @@
         <mat-card-content>
           <gf-portfolio-proportion-chart
             [baseCurrency]="user?.settings?.baseCurrency"
+            [colorScheme]="user?.settings?.colorScheme"
             [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
             [keys]="['assetClass', 'assetSubClass']"
             [locale]="user?.settings?.locale"
@@ -133,6 +136,7 @@
             class="mx-auto"
             cursor="pointer"
             [baseCurrency]="user?.settings?.baseCurrency"
+            [colorScheme]="user?.settings?.colorScheme"
             [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
             [keys]="['symbol']"
             [locale]="user?.settings?.locale"
@@ -163,6 +167,7 @@
         <mat-card-content>
           <gf-portfolio-proportion-chart
             [baseCurrency]="user?.settings?.baseCurrency"
+            [colorScheme]="user?.settings?.colorScheme"
             [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
             [keys]="['name']"
             [locale]="user?.settings?.locale"
@@ -192,6 +197,7 @@
         <mat-card-content>
           <gf-portfolio-proportion-chart
             [baseCurrency]="user?.settings?.baseCurrency"
+            [colorScheme]="user?.settings?.colorScheme"
             [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
             [keys]="['name']"
             [locale]="user?.settings?.locale"
@@ -220,6 +226,7 @@
         <mat-card-content>
           <gf-portfolio-proportion-chart
             [baseCurrency]="user?.settings?.baseCurrency"
+            [colorScheme]="user?.settings?.colorScheme"
             [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
             [keys]="['name']"
             [locale]="user?.settings?.locale"

apps/client/src/app/pages/portfolio/analysis/analysis-page.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 { UserService } from '@ghostfolio/client/services/user/user.service';
@@ -26,6 +27,7 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
   public benchmarkDataItems: HistoricalDataItem[] = [];
   public benchmarks: Partial<SymbolProfile>[];
   public bottom3: Position[];
+  public dateRangeOptions = ToggleComponent.DEFAULT_DATE_RANGE_OPTIONS;
   public daysInMarket: number;
   public deviceType: string;
   public firstOrderDate: Date;
@@ -33,12 +35,13 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
   public investments: InvestmentItem[];
   public investmentsByMonth: InvestmentItem[];
   public isLoadingBenchmarkComparator: boolean;
-  public mode: GroupBy;
+  public isLoadingInvestmentChart: boolean;
+  public mode: GroupBy = 'month';
   public modeOptions: ToggleOption[] = [
-    { label: $localize`Monthly`, value: 'month' },
-    { label: $localize`Accumulating`, value: undefined }
+    { label: $localize`Monthly`, value: 'month' }
   ];
   public performanceDataItems: HistoricalDataItem[];
+  public performanceDataItemsInPercentage: HistoricalDataItem[];
   public top3: Position[];
   public user: User;
 
@@ -122,37 +125,51 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
   }
 
   private update() {
-    if (this.user.settings.isExperimentalFeatures) {
-      this.isLoadingBenchmarkComparator = true;
-
-      this.dataService
-        .fetchPortfolioPerformance({
-          range: this.user?.settings?.dateRange,
-          version: 2
-        })
-        .pipe(takeUntil(this.unsubscribeSubject))
-        .subscribe(({ chart }) => {
-          this.firstOrderDate = new Date(chart?.[0]?.date ?? new Date());
-          this.performanceDataItems = chart;
-
-          this.updateBenchmarkDataItems();
-
-          this.changeDetectorRef.markForCheck();
-        });
-    }
+    this.isLoadingBenchmarkComparator = true;
+    this.isLoadingInvestmentChart = true;
 
     this.dataService
-      .fetchInvestments()
+      .fetchPortfolioPerformance({
+        range: this.user?.settings?.dateRange
+      })
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(({ firstOrderDate, investments }) => {
+      .subscribe(({ chart, firstOrderDate }) => {
+        this.firstOrderDate = firstOrderDate ?? new Date();
         this.daysInMarket = differenceInDays(new Date(), firstOrderDate);
-        this.investments = investments;
+
+        this.investments = [];
+        this.performanceDataItems = [];
+        this.performanceDataItemsInPercentage = [];
+
+        for (const {
+          date,
+          netPerformanceInPercentage,
+          totalInvestment,
+          value
+        } of chart) {
+          this.investments.push({ date, investment: totalInvestment });
+          this.performanceDataItems.push({
+            date,
+            value
+          });
+          this.performanceDataItemsInPercentage.push({
+            date,
+            value: netPerformanceInPercentage
+          });
+        }
+
+        this.isLoadingInvestmentChart = false;
+
+        this.updateBenchmarkDataItems();
 
         this.changeDetectorRef.markForCheck();
       });
 
     this.dataService
-      .fetchInvestmentsByMonth()
+      .fetchInvestments({
+        groupBy: 'month',
+        range: this.user?.settings?.dateRange
+      })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(({ investments }) => {
         this.investmentsByMonth = investments;
@@ -161,7 +178,7 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
       });
 
     this.dataService
-      .fetchPositions({ range: 'max' })
+      .fetchPositions({ range: this.user?.settings?.dateRange })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(({ positions }) => {
         const positionsSorted = sortBy(
@@ -210,6 +227,8 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
           this.changeDetectorRef.markForCheck();
         });
     } else {
+      this.benchmarkDataItems = [];
+
       this.isLoadingBenchmarkComparator = false;
     }
   }

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

@@ -1,19 +1,27 @@
 <div class="container">
-  <h3 class="d-flex justify-content-center mb-3" i18n>Analysis</h3>
-  <div *ngIf="user?.settings?.isExperimentalFeatures" class="mb-5 row">
+  <h3 class="d-flex justify-content-center" i18n>Analysis</h3>
+  <div *ngIf="user?.settings?.viewMode !== 'ZEN'" class="my-4 text-center">
+    <gf-toggle
+      [defaultValue]="user?.settings?.dateRange"
+      [isLoading]="isLoadingBenchmarkComparator"
+      [options]="dateRangeOptions"
+      (change)="onChangeDateRange($event.value)"
+    ></gf-toggle>
+  </div>
+  <div class="mb-5 row">
     <div class="col-lg">
       <gf-benchmark-comparator
         class="h-100"
         [benchmark]="user?.settings?.benchmark"
         [benchmarkDataItems]="benchmarkDataItems"
         [benchmarks]="benchmarks"
+        [colorScheme]="user?.settings?.colorScheme"
         [daysInMarket]="daysInMarket"
         [isLoading]="isLoadingBenchmarkComparator"
         [locale]="user?.settings?.locale"
-        [performanceDataItems]="performanceDataItems"
+        [performanceDataItems]="performanceDataItemsInPercentage"
         [user]="user"
         (benchmarkChanged)="onChangeBenchmark($event)"
-        (dateRangeChanged)="onChangeDateRange($event)"
       ></gf-benchmark-comparator>
     </div>
   </div>
@@ -96,6 +104,35 @@
     </div>
   </div>
 
+  <div class="mb-5 row">
+    <div class="col-lg">
+      <div class="align-items-center d-flex mb-4">
+        <div
+          class="align-items-center d-flex flex-grow-1 h5 mb-0 text-truncate"
+        >
+          <span i18n>Portfolio Evolution</span>
+          <gf-premium-indicator
+            *ngIf="user?.subscription?.type === 'Basic'"
+            class="ml-1"
+          ></gf-premium-indicator>
+        </div>
+      </div>
+      <div class="chart-container">
+        <gf-investment-chart
+          class="h-100"
+          [benchmarkDataItems]="investments"
+          [currency]="user?.settings?.baseCurrency"
+          [daysInMarket]="daysInMarket"
+          [historicalDataItems]="performanceDataItems"
+          [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
+          [isLoading]="isLoadingBenchmarkComparator"
+          [locale]="user?.settings?.locale"
+          [range]="user?.settings?.dateRange"
+        ></gf-investment-chart>
+      </div>
+    </div>
+  </div>
+
   <div class="row">
     <div class="col-lg">
       <div class="align-items-center d-flex mb-4">
@@ -117,24 +154,15 @@
         ></gf-toggle>
       </div>
       <div class="chart-container">
-        <gf-investment-chart
-          class="h-100"
-          [currency]="user?.settings?.baseCurrency"
-          [daysInMarket]="daysInMarket"
-          [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
-          [investments]="investments"
-          [locale]="user?.settings?.locale"
-          [ngClass]="{ 'd-none': mode }"
-        ></gf-investment-chart>
         <gf-investment-chart
           class="h-100"
           groupBy="month"
+          [benchmarkDataItems]="investmentsByMonth"
           [currency]="user?.settings?.baseCurrency"
           [daysInMarket]="daysInMarket"
           [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
-          [investments]="investmentsByMonth"
           [locale]="user?.settings?.locale"
-          [ngClass]="{ 'd-none': !mode }"
+          [range]="user?.settings?.dateRange"
           [savingsRate]="(hasImpersonationId || user.settings.isRestrictedView) ? undefined : user?.settings?.savingsRate"
         ></gf-investment-chart>
       </div>

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

@@ -5,6 +5,7 @@
       <div>
         <h4 class="mb-3" i18n>Calculator</h4>
         <gf-fire-calculator
+          [colorScheme]="user?.settings?.colorScheme"
           [currency]="user?.settings?.baseCurrency"
           [deviceType]="deviceType"
           [fireWealth]="fireWealth?.toNumber()"
@@ -35,7 +36,7 @@
         }"
       ></ngx-skeleton-loader>
     </div>
-    <div *ngIf="!isLoading">
+    <div *ngIf="!isLoading" i18n>
       If you retire today, you would be able to withdraw
       <span class="font-weight-bold"
         ><gf-value

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

@@ -13,6 +13,7 @@ import {
   User
 } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
+import { translate } from '@ghostfolio/ui/i18n';
 import { AssetClass, DataSource } from '@prisma/client';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject, Subscription } from 'rxjs';
@@ -130,7 +131,7 @@ export class HoldingsPageComponent implements OnDestroy, OnInit {
           for (const assetClass of Object.keys(AssetClass)) {
             assetClassFilters.push({
               id: assetClass,
-              label: assetClass,
+              label: translate(assetClass),
               type: 'ASSET_CLASS'
             });
           }
@@ -192,6 +193,7 @@ export class HoldingsPageComponent implements OnDestroy, OnInit {
             dataSource,
             symbol,
             baseCurrency: this.user?.settings?.baseCurrency,
+            colorScheme: this.user?.settings?.colorScheme,
             deviceType: this.deviceType,
             hasImpersonationId: this.hasImpersonationId,
             hasPermissionToReportDataGlitch: hasPermission(

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

@@ -14,6 +14,7 @@ import { CreateOrderDto } from '@ghostfolio/api/app/order/create-order.dto';
 import { UpdateOrderDto } from '@ghostfolio/api/app/order/update-order.dto';
 import { LookupItem } from '@ghostfolio/api/app/symbol/interfaces/lookup-item.interface';
 import { DataService } from '@ghostfolio/client/services/data.service';
+import { translate } from '@ghostfolio/ui/i18n';
 import { AssetClass, AssetSubClass, Type } from '@prisma/client';
 import { isUUID } from 'class-validator';
 import { isString } from 'lodash';
@@ -40,8 +41,12 @@ export class CreateOrUpdateTransactionDialog implements OnDestroy {
   @ViewChild('autocomplete') autocomplete;
 
   public activityForm: FormGroup;
-  public assetClasses = Object.keys(AssetClass);
-  public assetSubClasses = Object.keys(AssetSubClass);
+  public assetClasses = Object.keys(AssetClass).map((assetClass) => {
+    return { id: assetClass, label: translate(assetClass) };
+  });
+  public assetSubClasses = Object.keys(AssetSubClass).map((assetSubClass) => {
+    return { id: assetSubClass, label: translate(assetSubClass) };
+  });
   public currencies: string[] = [];
   public currentMarketPrice = null;
   public filteredLookupItems: LookupItem[];

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

@@ -4,17 +4,17 @@
   (keyup.enter)="activityForm.valid && onSubmit()"
   (ngSubmit)="onSubmit()"
 >
-  <h1 *ngIf="data.activity.id" mat-dialog-title i18n>Update activity</h1>
-  <h1 *ngIf="!data.activity.id" mat-dialog-title i18n>Add activity</h1>
+  <h1 *ngIf="data.activity.id" i18n mat-dialog-title>Update activity</h1>
+  <h1 *ngIf="!data.activity.id" i18n mat-dialog-title>Add activity</h1>
   <div class="flex-grow-1" mat-dialog-content>
     <div>
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Type</mat-label>
         <mat-select formControlName="type">
-          <mat-option value="BUY" i18n>BUY</mat-option>
-          <mat-option value="DIVIDEND" i18n>DIVIDEND</mat-option>
-          <mat-option value="ITEM" i18n>ITEM</mat-option>
-          <mat-option value="SELL" i18n>SELL</mat-option>
+          <mat-option i18n value="BUY">BUY</mat-option>
+          <mat-option i18n value="DIVIDEND">DIVIDEND</mat-option>
+          <mat-option i18n value="ITEM">ITEM</mat-option>
+          <mat-option i18n value="SELL">SELL</mat-option>
         </mat-select>
       </mat-form-field>
     </div>
@@ -156,8 +156,8 @@
           <mat-option [value]="null"></mat-option>
           <mat-option
             *ngFor="let assetClass of assetClasses"
-            [value]="assetClass"
-            >{{ assetClass }}</mat-option
+            [value]="assetClass.id"
+            >{{ assetClass.label }}</mat-option
           >
         </mat-select>
       </mat-form-field>
@@ -171,8 +171,8 @@
           <mat-option [value]="null"></mat-option>
           <mat-option
             *ngFor="let assetSubClass of assetSubClasses"
-            [value]="assetSubClass"
-            >{{ assetSubClass }}</mat-option
+            [value]="assetSubClass.id"
+            >{{ assetSubClass.label }}</mat-option
           >
         </mat-select>
       </mat-form-field>

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

@@ -188,7 +188,7 @@ export class TransactionsPageComponent implements OnDestroy, OnInit {
     input.type = 'file';
 
     input.onchange = (event) => {
-      this.snackBar.open('⏳' + $localize`Importing data...`);
+      this.snackBar.open('⏳ ' + $localize`Importing data...`);
 
       // Getting the file reference
       const file = (event.target as HTMLInputElement).files[0];
@@ -334,9 +334,13 @@ export class TransactionsPageComponent implements OnDestroy, OnInit {
   private handleImportSuccess() {
     this.fetchActivities();
 
-    this.snackBar.open('✅' + $localize`Import has been completed`, undefined, {
-      duration: 3000
-    });
+    this.snackBar.open(
+      '✅ ' + $localize`Import has been completed`,
+      undefined,
+      {
+        duration: 3000
+      }
+    );
   }
 
   private openCreateTransactionDialog(aActivity?: Activity): void {
@@ -405,6 +409,7 @@ export class TransactionsPageComponent implements OnDestroy, OnInit {
             dataSource,
             symbol,
             baseCurrency: this.user?.settings?.baseCurrency,
+            colorScheme: this.user?.settings?.colorScheme,
             deviceType: this.deviceType,
             hasImpersonationId: this.hasImpersonationId,
             hasPermissionToReportDataGlitch: hasPermission(

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

@@ -29,8 +29,8 @@
       class="align-items-center d-flex justify-content-center"
       color="primary"
       mat-fab
-      [routerLink]="[]"
       [queryParams]="{ createDialog: true }"
+      [routerLink]="[]"
     >
       <ion-icon name="add-outline" size="large"></ion-icon>
     </a>

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

@@ -25,7 +25,6 @@ import {
   Filter,
   InfoItem,
   OAuthResponse,
-  PortfolioChart,
   PortfolioDetails,
   PortfolioInvestments,
   PortfolioPerformanceResponse,
@@ -36,7 +35,13 @@ import {
 } from '@ghostfolio/common/interfaces';
 import { filterGlobalPermissions } from '@ghostfolio/common/permissions';
 import { AccountWithValue, DateRange } from '@ghostfolio/common/types';
-import { DataSource, Order as OrderModel } from '@prisma/client';
+import { translate } from '@ghostfolio/ui/i18n';
+import {
+  AssetClass,
+  AssetSubClass,
+  DataSource,
+  Order as OrderModel
+} from '@prisma/client';
 import { format, parseISO } from 'date-fns';
 import { cloneDeep, groupBy } from 'lodash';
 import { Observable } from 'rxjs';
@@ -74,60 +79,19 @@ export class DataService {
   }: {
     filters?: Filter[];
   }): Observable<Activities> {
-    let params = new HttpParams();
-
-    if (filters?.length > 0) {
-      const {
-        ACCOUNT: filtersByAccount,
-        ASSET_CLASS: filtersByAssetClass,
-        TAG: filtersByTag
-      } = groupBy(filters, (filter) => {
-        return filter.type;
-      });
-
-      if (filtersByAccount) {
-        params = params.append(
-          'accounts',
-          filtersByAccount
-            .map(({ id }) => {
-              return id;
-            })
-            .join(',')
-        );
-      }
-
-      if (filtersByAssetClass) {
-        params = params.append(
-          'assetClasses',
-          filtersByAssetClass
-            .map(({ id }) => {
-              return id;
-            })
-            .join(',')
-        );
-      }
-
-      if (filtersByTag) {
-        params = params.append(
-          'tags',
-          filtersByTag
-            .map(({ id }) => {
-              return id;
-            })
-            .join(',')
-        );
-      }
-    }
-
-    return this.http.get<any>('/api/v1/order', { params }).pipe(
-      map(({ activities }) => {
-        for (const activity of activities) {
-          activity.createdAt = parseISO(activity.createdAt);
-          activity.date = parseISO(activity.date);
-        }
-        return { activities };
+    return this.http
+      .get<any>('/api/v1/order', {
+        params: this.buildFiltersAsQueryParams({ filters })
       })
-    );
+      .pipe(
+        map(({ activities }) => {
+          for (const activity of activities) {
+            activity.createdAt = parseISO(activity.createdAt);
+            activity.date = parseISO(activity.date);
+          }
+          return { activities };
+        })
+      );
   }
 
   public fetchAdminData() {
@@ -135,30 +99,8 @@ export class DataService {
   }
 
   public fetchAdminMarketData({ filters }: { filters?: Filter[] }) {
-    let params = new HttpParams();
-
-    if (filters?.length > 0) {
-      const { ASSET_SUB_CLASS: filtersByAssetSubClass } = groupBy(
-        filters,
-        (filter) => {
-          return filter.type;
-        }
-      );
-
-      if (filtersByAssetSubClass) {
-        params = params.append(
-          'assetSubClasses',
-          filtersByAssetSubClass
-            .map(({ id }) => {
-              return id;
-            })
-            .join(',')
-        );
-      }
-    }
-
     return this.http.get<AdminMarketData>('/api/v1/admin/market-data', {
-      params
+      params: this.buildFiltersAsQueryParams({ filters })
     });
   }
 
@@ -201,12 +143,6 @@ export class DataService {
     return this.http.get<BenchmarkResponse>('/api/v1/benchmark');
   }
 
-  public fetchChart({ range, version }: { range: DateRange; version: number }) {
-    return this.http.get<PortfolioChart>(`/api/v${version}/portfolio/chart`, {
-      params: { range }
-    });
-  }
-
   public fetchExport(activityIds?: string[]) {
     let params = new HttpParams();
 
@@ -233,34 +169,19 @@ export class DataService {
     return info;
   }
 
-  public fetchInvestments(): Observable<PortfolioInvestments> {
-    return this.http.get<any>('/api/v1/portfolio/investments').pipe(
-      map((response) => {
-        if (response.firstOrderDate) {
-          response.firstOrderDate = parseISO(response.firstOrderDate);
-        }
-
-        return response;
-      })
+  public fetchInvestments({
+    groupBy,
+    range
+  }: {
+    groupBy?: 'month';
+    range: DateRange;
+  }) {
+    return this.http.get<PortfolioInvestments>(
+      '/api/v1/portfolio/investments',
+      { params: { groupBy, range } }
     );
   }
 
-  public fetchInvestmentsByMonth(): Observable<PortfolioInvestments> {
-    return this.http
-      .get<any>('/api/v1/portfolio/investments', {
-        params: { groupBy: 'month' }
-      })
-      .pipe(
-        map((response) => {
-          if (response.firstOrderDate) {
-            response.firstOrderDate = parseISO(response.firstOrderDate);
-          }
-
-          return response;
-        })
-      );
-  }
-
   public fetchSymbolItem({
     dataSource,
     includeHistoricalData,
@@ -306,54 +227,9 @@ export class DataService {
   }: {
     filters?: Filter[];
   }): Observable<PortfolioDetails> {
-    let params = new HttpParams();
-
-    if (filters?.length > 0) {
-      const {
-        ACCOUNT: filtersByAccount,
-        ASSET_CLASS: filtersByAssetClass,
-        TAG: filtersByTag
-      } = groupBy(filters, (filter) => {
-        return filter.type;
-      });
-
-      if (filtersByAccount) {
-        params = params.append(
-          'accounts',
-          filtersByAccount
-            .map(({ id }) => {
-              return id;
-            })
-            .join(',')
-        );
-      }
-
-      if (filtersByAssetClass) {
-        params = params.append(
-          'assetClasses',
-          filtersByAssetClass
-            .map(({ id }) => {
-              return id;
-            })
-            .join(',')
-        );
-      }
-
-      if (filtersByTag) {
-        params = params.append(
-          'tags',
-          filtersByTag
-            .map(({ id }) => {
-              return id;
-            })
-            .join(',')
-        );
-      }
-    }
-
     return this.http
       .get<any>('/api/v1/portfolio/details', {
-        params
+        params: this.buildFiltersAsQueryParams({ filters })
       })
       .pipe(
         map((response) => {
@@ -362,22 +238,40 @@ export class DataService {
               response.summary.firstOrderDate
             );
           }
+
+          if (response.holdings) {
+            for (const symbol of Object.keys(response.holdings)) {
+              response.holdings[symbol].assetClass = translate(
+                response.holdings[symbol].assetClass
+              );
+
+              response.holdings[symbol].assetSubClass = translate(
+                response.holdings[symbol].assetSubClass
+              );
+            }
+          }
+
           return response;
         })
       );
   }
 
   public fetchPortfolioPerformance({
-    range,
-    version
+    range
   }: {
     range: DateRange;
-    version: number;
-  }) {
-    return this.http.get<PortfolioPerformanceResponse>(
-      `/api/v${version}/portfolio/performance`,
-      { params: { range } }
-    );
+  }): Observable<PortfolioPerformanceResponse> {
+    return this.http
+      .get<any>(`/api/v2/portfolio/performance`, { params: { range } })
+      .pipe(
+        map((response) => {
+          if (response.firstOrderDate) {
+            response.firstOrderDate = parseISO(response.firstOrderDate);
+          }
+
+          return response;
+        })
+      );
   }
 
   public fetchPortfolioPublic(aId: string) {
@@ -410,6 +304,20 @@ export class DataService {
             }
           }
 
+          if (data.SymbolProfile) {
+            if (data.SymbolProfile.assetClass) {
+              data.SymbolProfile.assetClass = <AssetClass>(
+                translate(data.SymbolProfile.assetClass)
+              );
+            }
+
+            if (data.SymbolProfile.assetSubClass) {
+              data.SymbolProfile.assetSubClass = <AssetSubClass>(
+                translate(data.SymbolProfile.assetSubClass)
+              );
+            }
+          }
+
           return data;
         })
       );
@@ -458,4 +366,53 @@ export class DataService {
       couponCode
     });
   }
+
+  private buildFiltersAsQueryParams({ filters }: { filters?: Filter[] }) {
+    let params = new HttpParams();
+
+    if (filters?.length > 0) {
+      const {
+        ACCOUNT: filtersByAccount,
+        ASSET_CLASS: filtersByAssetClass,
+        TAG: filtersByTag
+      } = groupBy(filters, (filter) => {
+        return filter.type;
+      });
+
+      if (filtersByAccount) {
+        params = params.append(
+          'accounts',
+          filtersByAccount
+            .map(({ id }) => {
+              return id;
+            })
+            .join(',')
+        );
+      }
+
+      if (filtersByAssetClass) {
+        params = params.append(
+          'assetClasses',
+          filtersByAssetClass
+            .map(({ id }) => {
+              return id;
+            })
+            .join(',')
+        );
+      }
+
+      if (filtersByTag) {
+        params = params.append(
+          'tags',
+          filtersByTag
+            .map(({ id }) => {
+              return id;
+            })
+            .join(',')
+        );
+      }
+    }
+
+    return params;
+  }
 }

apps/client/src/app/services/import-transactions.service.ts

@@ -2,7 +2,7 @@ import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { CreateOrderDto } from '@ghostfolio/api/app/order/create-order.dto';
 import { Account, DataSource, Type } from '@prisma/client';
-import { parse } from 'date-fns';
+import { isMatch, parse, parseISO } from 'date-fns';
 import { isFinite } from 'lodash';
 import { parse as csvToJson } from 'papaparse';
 import { EMPTY } from 'rxjs';
@@ -153,13 +153,15 @@ export class ImportTransactionsService {
 
     for (const key of ImportTransactionsService.DATE_KEYS) {
       if (item[key]) {
-        try {
+        if (isMatch(item[key], 'dd-MM-yyyy')) {
           date = parse(item[key], 'dd-MM-yyyy', new Date()).toISOString();
-        } catch {}
-
-        try {
+        } else if (isMatch(item[key], 'dd/MM/yyyy')) {
           date = parse(item[key], 'dd/MM/yyyy', new Date()).toISOString();
-        } catch {}
+        } else {
+          try {
+            date = parseISO(item[key]).toISOString();
+          } catch {}
+        }
 
         if (date) {
           return date;

apps/client/src/assets/images/logo-privacy-tools.svg

@@ -0,0 +1,35 @@
+<svg version="1.2" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 508 101" width="508" height="101">
+  <title>horizontal-svg</title>
+  <style>
+    tspan { white-space:pre }
+    .shp0 { fill: #3498db }
+    .shp1 { fill: transparent }
+    .shp2 { fill: #8a9595 }
+  </style>
+  <g id="Logo">
+    <g id="Shield">
+      <g id="Layer">
+        <path id="Layer" class="shp0" d="M284.81 0C279.86 0.24 254.33 8.51 242.56 14.89C240.87 15.81 239.01 18.96 239 20.34C239 33 242.05 51.67 250.66 68.26L267.5 51.42C264.25 43.19 266.19 33.81 272.44 27.56C276.25 23.94 283.41 21.26 289.64 21.15C292.47 21.1 295.11 21.58 297.15 22.74C298.34 23.43 297.78 24.32 297.42 24.68L284.52 37.05C282.89 38.8 284.3 43.29 285.36 46.15C288.21 47.2 292.7 48.61 294.45 46.98L306.83 34.08C307.18 33.73 308.07 33.17 308.76 34.36C312.47 40.88 309.21 53.53 303.95 59.06C297.69 65.32 288.31 67.26 280.09 64L260.76 83.33C267.04 90.61 274.95 96.69 284.81 100.54C320.46 86.63 330.62 43.46 330.62 20.34C330.61 18.96 328.76 15.81 327.06 14.89C315.29 8.51 289.76 0.24 284.81 0L284.81 0Z" />
+        <g id="Layer">
+          <path id="Layer" class="shp1" d="M250.69 68.23C250.93 68.68 251.17 69.13 251.41 69.58C252.43 71.46 253.52 73.31 254.69 75.12C255.86 76.93 257.1 78.69 258.43 80.4C259.19 81.38 259.98 82.35 260.8 83.3L280.12 63.97C288.35 67.23 297.73 65.29 303.98 59.03C309.25 53.5 312.51 40.85 308.8 34.33C308.11 33.14 307.22 33.7 306.86 34.05L294.49 46.95C292.74 48.58 288.25 47.17 285.39 46.12C284.34 43.26 282.93 38.77 284.56 37.02L297.46 24.65C297.81 24.29 298.37 23.4 297.18 22.71C295.14 21.55 292.51 21.07 289.68 21.12C283.45 21.23 276.28 23.91 272.48 27.53C266.22 33.79 264.28 43.16 267.54 51.39L250.69 68.23Z" />
+        </g>
+      </g>
+    </g>
+    <g id="Tools">
+      <path id="Layer" class="shp2" d="M343.3 31.55L343.3 24.61L387.83 24.61L387.83 31.55L369.48 31.55L369.48 76.83L361.65 76.83L361.65 31.55L343.3 31.55Z" />
+      <path id="Layer" fill-rule="evenodd" class="shp2" d="M381.33 50.12C382.38 47.68 383.79 45.59 385.58 43.85C387.37 42.06 389.46 40.67 391.85 39.67C394.29 38.63 396.87 38.11 399.61 38.11C402.34 38.11 404.9 38.63 407.29 39.67C409.73 40.67 411.82 42.06 413.56 43.85C415.35 45.59 416.74 47.68 417.73 50.12C418.78 52.5 419.3 55.06 419.3 57.8C419.3 60.58 418.78 63.2 417.73 65.63C416.74 68.02 415.35 70.11 413.56 71.9C411.82 73.64 409.73 75.03 407.29 76.08C404.9 77.07 402.34 77.57 399.61 77.57C396.87 77.57 394.29 77.07 391.85 76.08C389.46 75.03 387.37 73.64 385.58 71.9C383.79 70.11 382.38 68.02 381.33 65.63C380.34 63.2 379.84 60.58 379.84 57.8C379.84 55.06 380.34 52.5 381.33 50.12ZM408.33 67.2C410.77 64.61 411.99 61.48 411.99 57.8C411.99 54.12 410.77 51.01 408.33 48.48C405.95 45.94 403.04 44.67 399.61 44.67C396.18 44.67 393.24 45.94 390.8 48.48C388.37 51.01 387.15 54.12 387.15 57.8C387.15 61.48 388.34 64.61 390.73 67.2C393.17 69.73 396.13 71 399.61 71C403.04 71 405.95 69.73 408.33 67.2Z" />
+      <path id="Layer" fill-rule="evenodd" class="shp2" d="M423.45 50.12C424.5 47.68 425.91 45.59 427.7 43.85C429.49 42.06 431.58 40.67 433.97 39.67C436.41 38.63 438.99 38.11 441.73 38.11C444.46 38.11 447.02 38.63 449.41 39.67C451.85 40.67 453.94 42.06 455.68 43.85C457.47 45.59 458.86 47.68 459.85 50.12C460.9 52.5 461.42 55.06 461.42 57.8C461.42 60.58 460.9 63.2 459.85 65.63C458.86 68.02 457.47 70.11 455.68 71.9C453.94 73.64 451.85 75.03 449.41 76.08C447.02 77.07 444.46 77.57 441.73 77.57C438.99 77.57 436.41 77.07 433.97 76.08C431.58 75.03 429.49 73.64 427.7 71.9C425.91 70.11 424.5 68.02 423.45 65.63C422.46 63.2 421.96 60.58 421.96 57.8C421.96 55.06 422.46 52.5 423.45 50.12ZM450.45 67.2C452.89 64.61 454.11 61.48 454.11 57.8C454.11 54.12 452.89 51.01 450.45 48.48C448.07 45.94 445.16 44.67 441.73 44.67C438.3 44.67 435.36 45.94 432.92 48.48C430.49 51.01 429.27 54.12 429.27 57.8C429.27 61.48 430.46 64.61 432.85 67.2C435.29 69.73 438.25 71 441.73 71C445.16 71 448.07 69.73 450.45 67.2Z" />
+      <path id="Layer" class="shp2" d="M473.1 22.97L473.1 76.83L465.64 76.83L465.64 24.61L473.1 22.97Z" />
+      <path id="Layer" class="shp2" d="M475.48 71.9L479.51 66.98C481.5 68.52 483.51 69.71 485.55 70.56C487.64 71.35 489.75 71.75 491.89 71.75C494.58 71.75 496.76 71.23 498.45 70.18C500.15 69.14 500.99 67.77 500.99 66.08C500.99 64.74 500.49 63.67 499.5 62.87C498.5 62.08 496.96 61.53 494.87 61.23L488.01 60.26C484.28 59.72 481.45 58.57 479.51 56.83C477.62 55.04 476.67 52.68 476.67 49.75C476.67 46.31 478.04 43.55 480.78 41.47C483.51 39.33 487.09 38.26 491.52 38.26C494.3 38.26 496.94 38.66 499.42 39.45C501.96 40.25 504.42 41.47 506.81 43.11L503 48.03C500.92 46.64 498.88 45.64 496.89 45.05C494.95 44.4 492.98 44.08 490.99 44.08C488.71 44.08 486.87 44.55 485.48 45.49C484.08 46.44 483.39 47.68 483.39 49.22C483.39 50.62 483.86 51.69 484.8 52.43C485.8 53.13 487.41 53.65 489.65 54L496.51 54.97C500.24 55.51 503.08 56.68 505.02 58.47C507.01 60.26 508 62.63 508 65.56C508 67.25 507.58 68.84 506.73 70.33C505.94 71.78 504.82 73.02 503.38 74.06C501.99 75.11 500.32 75.95 498.38 76.6C496.44 77.2 494.35 77.49 492.11 77.49C488.83 77.49 485.75 77.02 482.86 76.08C480.03 75.13 477.57 73.74 475.48 71.9L475.48 71.9Z" />
+    </g>
+    <g id="Privacy">
+      <path id="Layer" fill-rule="evenodd" class="shp2" d="M1.46 76.82L1.46 24.6L25.63 24.6C30.7 24.6 34.8 26.07 37.94 29.01C41.12 31.89 42.71 35.64 42.71 40.27C42.71 44.85 41.12 48.57 37.94 51.46C34.75 54.34 30.65 55.79 25.63 55.79L9.29 55.79L9.29 76.82L1.46 76.82ZM24.81 31.47L9.29 31.47L9.29 49.15L24.81 49.15C27.84 49.15 30.25 48.35 32.04 46.76C33.88 45.12 34.8 42.95 34.8 40.27C34.8 37.58 33.88 35.45 32.04 33.85C30.25 32.26 27.84 31.47 24.81 31.47L24.81 31.47Z" />
+      <path id="Layer" class="shp2" d="M46.91 76.82L46.91 38.85L54.37 38.85L54.37 43.7C55.51 41.86 56.98 40.47 58.77 39.52C60.56 38.53 62.57 38.03 64.81 38.03C65.61 38.03 66.3 38.08 66.9 38.18C67.5 38.28 68.07 38.43 68.62 38.63L68.62 45.34C67.92 45.09 67.2 44.89 66.45 44.74C65.71 44.6 64.96 44.52 64.22 44.52C62.03 44.52 60.06 45.12 58.32 46.31C56.63 47.46 55.31 49.17 54.37 51.46L54.37 76.82L46.91 76.82Z" />
+      <path id="Layer" class="shp2" d="M75.41 32.74C74.17 32.74 73.1 32.29 72.2 31.4C71.31 30.45 70.86 29.36 70.86 28.12C70.86 26.87 71.31 25.8 72.2 24.91C73.1 23.96 74.17 23.49 75.41 23.49C76.65 23.49 77.72 23.96 78.62 24.91C79.56 25.8 80.03 26.87 80.03 28.12C80.03 29.36 79.56 30.45 78.62 31.4C77.72 32.29 76.65 32.74 75.41 32.74L75.41 32.74ZM79.14 38.86L79.14 76.82L71.68 76.82L71.68 38.86L79.14 38.86Z" />
+      <path id="Layer" class="shp2" d="M97.33 76.82L80.92 38.85L89.12 38.85L100.98 67.27L112.84 38.85L120.83 38.85L104.41 76.82L97.33 76.82Z" />
+      <path id="Layer" fill-rule="evenodd" class="shp2" d="M134.56 77.5C130.43 77.5 127.08 76.43 124.49 74.29C121.9 72.15 120.61 69.37 120.61 65.94C120.61 62.36 121.98 59.55 124.71 57.51C127.45 55.42 131.2 54.38 135.98 54.38C137.82 54.38 139.61 54.57 141.35 54.97C143.09 55.32 144.75 55.82 146.35 56.46L146.35 52.44C146.35 49.75 145.55 47.74 143.96 46.39C142.37 45.05 140.08 44.38 137.1 44.38C135.36 44.38 133.54 44.65 131.65 45.2C129.76 45.7 127.65 46.49 125.31 47.59L122.55 41.99C125.39 40.65 128.07 39.68 130.61 39.08C133.14 38.44 135.65 38.11 138.14 38.11C143.06 38.11 146.87 39.31 149.55 41.7C152.29 44.03 153.66 47.36 153.66 51.69L153.66 76.83L146.35 76.83L146.35 73.55C144.66 74.89 142.84 75.88 140.9 76.53C138.96 77.18 136.85 77.5 134.56 77.5L134.56 77.5ZM127.77 65.79C127.77 67.63 128.54 69.12 130.08 70.26C131.68 71.41 133.74 71.98 136.28 71.98C138.26 71.98 140.1 71.68 141.8 71.09C143.49 70.49 145 69.59 146.35 68.4L146.35 61.84C144.9 61.04 143.39 60.47 141.8 60.12C140.2 59.72 138.46 59.52 136.57 59.52C133.89 59.52 131.75 60.09 130.16 61.24C128.57 62.38 127.77 63.9 127.77 65.79L127.77 65.79Z" />
+      <path id="Layer" class="shp2" d="M177.4 70.93C179.29 70.93 181.08 70.56 182.77 69.81C184.46 69.02 186.08 67.85 187.62 66.31L192.09 71.15C190.11 73.14 187.82 74.71 185.23 75.85C182.65 76.95 179.94 77.49 177.1 77.49C174.37 77.49 171.81 77 169.42 76C167.03 74.96 164.97 73.57 163.23 71.83C161.49 70.08 160.09 68.02 159.05 65.63C158.06 63.2 157.56 60.59 157.56 57.8C157.56 55.07 158.06 52.51 159.05 50.12C160.09 47.68 161.49 45.59 163.23 43.85C164.97 42.06 167.03 40.67 169.42 39.68C171.81 38.63 174.37 38.11 177.1 38.11C179.94 38.11 182.7 38.68 185.38 39.82C188.07 40.92 190.4 42.46 192.39 44.45L187.69 49.52C186.25 47.98 184.64 46.81 182.85 46.02C181.06 45.17 179.19 44.75 177.25 44.75C173.82 44.75 170.91 46.02 168.52 48.55C166.14 51.09 164.94 54.17 164.94 57.8C164.94 61.53 166.14 64.66 168.52 67.2C170.96 69.69 173.92 70.93 177.4 70.93L177.4 70.93Z" />
+      <path id="Layer" class="shp2" d="M204.75 80.4L206.24 76.97L191.1 38.85L199.31 38.85L210.42 67.87L222.65 38.85L230.71 38.85L212.36 81.37C210.62 85.4 208.63 88.28 206.39 90.02C204.15 91.81 201.29 92.71 197.81 92.71C197.02 92.71 196.27 92.66 195.57 92.56C194.93 92.51 194.36 92.41 193.86 92.26L193.86 85.7C194.36 85.8 194.85 85.87 195.35 85.92C195.9 85.97 196.52 85.99 197.22 85.99C198.91 85.99 200.37 85.52 201.62 84.58C202.91 83.68 203.95 82.29 204.75 80.4L204.75 80.4Z" />
+    </g>
+  </g>
+</svg>

apps/client/src/assets/images/logo-unraid.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 222.4 139.8">
+  <path fill="#ffffff" d="M146.70000000000002 130.2H135l-3 9h-6.5l13.4-38.5h8l13.4 38.5h-7.1l-10.6-31.6-5.8 16.9h8.2l1.7 5.7zM29.7 100.8v25.4c0 8.9-5.8 13.6-14.9 13.6-9 0-14.8-4.7-14.8-13.6v-25.4h6.5v25.4c0 5.2 3.2 7.9 8.2 7.9 5.2 0 8.4-2.7 8.4-7.9v-25.4h6.6zM50.9 112.7v26.5h-6.5v-38.5h6.1l17 26.5v-26.5H74v38.5h-6.1l-17-26.5zM171.3 100.8h6.5v38.5h-6.5v-38.5zM222.4 125.4c0 9-5.9 13.8-15.2 13.8h-14.5v-38.5h14.6c9.2 0 15.1 4.8 15.1 13.8v10.9zm-6.6-10.8c0-5.3-3.3-8.1-8.5-8.1h-8.1v27.1h8c5.3 0 8.6-2.8 8.6-8.1v-10.9zM108.3 124.7c4.3-1.6 6.9-5.3 6.9-11.5 0-8.7-5.1-12.4-12.8-12.4H88.8v38.5h6.5v-32.8h6.9c3.8 0 6.2 1.8 6.2 6.7s-2.4 6.8-6.2 6.8h-3.4l9.2 19.4h7.5l-7.2-14.7z" class="st0"></path>
+  <linearGradient id="SVGID_1_" x1="68.07" x2="154.073" y1="81.489" y2="-4.514" gradientUnits="userSpaceOnUse">
+    <stop offset="0" stop-color="#e32929"></stop>
+    <stop offset="1" stop-color="#ff8d30"></stop>
+  </linearGradient>
+  <path fill="url(#SVGID_1_)" d="M107.8 19.2h6.5v38.5h-6.5V19.2zM50.9 57.7h-6.5V19.2h6.5v38.5zm25.2 4.6h6.5V77h-6.5V62.3zM60.2 45.8h6.5v23.8h-6.5V45.8zm31.7 0h6.5v23.8h-6.5V45.8zm79.4-26.6h6.5v38.5h-6.5V19.2zm-25.2-4.5h-6.5V0h6.5v14.7zM162 31.1h-6.5V7.4h6.5v23.7zm-31.8 0h-6.5V7.4h6.5v23.7z"></path>
+</svg>

apps/client/src/assets/sitemap.xml

@@ -6,70 +6,74 @@
             http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
   <url>
     <loc>https://ghostfol.io</loc>
-    <lastmod>2022-09-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/de/blog/2021/07/hallo-ghostfolio</loc>
-    <lastmod>2022-09-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/about</loc>
-    <lastmod>2022-09-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/about/changelog</loc>
-    <lastmod>2022-09-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/blog</loc>
-    <lastmod>2022-09-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/blog/2021/07/hello-ghostfolio</loc>
-    <lastmod>2022-09-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/blog/2022/01/ghostfolio-first-months-in-open-source</loc>
-    <lastmod>2022-09-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/blog/2022/07/ghostfolio-meets-internet-identity</loc>
-    <lastmod>2022-09-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/blog/2022/07/how-do-i-get-my-finances-in-order</loc>
-    <lastmod>2022-09-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/blog/2022/08/500-stars-on-github</loc>
-    <lastmod>2022-09-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
+  </url>
+    <url>
+    <loc>https://ghostfol.io/en/blog/2022/10/hacktoberfest-2022</loc>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/demo</loc>
-    <lastmod>2022-09-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/faq</loc>
-    <lastmod>2022-09-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/features</loc>
-    <lastmod>2022-09-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/markets</loc>
-    <lastmod>2022-09-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/pricing</loc>
-    <lastmod>2022-09-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/register</loc>
-    <lastmod>2022-09-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/resources</loc>
-    <lastmod>2022-09-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
   </url>
 </urlset>

apps/client/src/index.html

@@ -6,65 +6,65 @@
     <meta charset="utf-8" />
     <meta content="yes" name="apple-mobile-web-app-capable" />
     <meta
+      content="Ghostfolio is a personal finance dashboard to keep track of your assets like stocks, ETFs or cryptocurrencies across multiple platforms."
       name="description"
-      content="Ghostfolio is a lightweight application to keep track of your financial assets like stocks, ETFs or cryptocurrencies across multiple platforms."
     />
     <meta
+      content="app, asset, cryptocurrency, dashboard, etf, finance, management, performance, portfolio, software, stock, trading, wealth, web3"
       name="keywords"
-      content="app, asset, cryptocurrency, etf, finance, management, performance, portfolio, software, stock, tracker, trading, wealth"
     />
-    <meta name="mobile-web-app-capable" content="yes" />
-    <meta name="twitter:card" content="summary_large_image" />
+    <meta content="yes" name="mobile-web-app-capable" />
+    <meta content="summary_large_image" name="twitter:card" />
     <meta
+      content="Ghostfolio is a personal finance dashboard to keep track of your assets like stocks, ETFs or cryptocurrencies"
       name="twitter:description"
-      content="Ghostfolio is a lightweight wealth management application for individuals to keep track of stocks, ETFs or cryptocurrencies"
     />
-    <meta name="twitter:image" content="${rootUrl}/${featureGraphicPath}" />
+    <meta content="${rootUrl}/${featureGraphicPath}" name="twitter:image" />
     <meta
+      content="Ghostfolio – Open Source Wealth Management Software"
       name="twitter:title"
-      content="Ghostfolio – Open Source Wealth Management Software"
     />
     <meta
-      name="viewport"
       content="initial-scale=1, viewport-fit=cover, width=device-width"
+      name="viewport"
     />
-    <meta property="og:description" content="" />
+    <meta content="" property="og:description" />
     <meta
+      content="Ghostfolio – Open Source Wealth Management Software"
       property="og:title"
-      content="Ghostfolio – Open Source Wealth Management Software"
     />
-    <meta property="og:type" content="website" />
-    <meta property="og:url" content="${rootUrl}${path}" />
-    <meta property="og:image" content="${rootUrl}/${featureGraphicPath}" />
-    <meta property="og:updated_time" content="2022-08-18T00:00:00+00:00" />
+    <meta content="website" property="og:type" />
+    <meta content="${rootUrl}${path}" property="og:url" />
+    <meta content="${rootUrl}/${featureGraphicPath}" property="og:image" />
+    <meta content="2022-10-16T00:00:00+00:00" property="og:updated_time" />
     <meta
-      property="og:site_name"
       content="Ghostfolio – Open Source Wealth Management Software"
+      property="og:site_name"
     />
 
     <link
+      href="../assets/apple-touch-icon.png"
       rel="apple-touch-icon"
       sizes="180x180"
-      href="../assets/apple-touch-icon.png"
     />
     <link
-      rel="icon"
-      type="image/png"
-      sizes="32x32"
       href="../assets/favicon-32x32.png"
+      rel="icon"
+      sizes="32x32"
+      type="image/png"
     />
     <link
-      rel="icon"
-      type="image/png"
-      sizes="16x16"
       href="../assets/favicon-16x16.png"
+      rel="icon"
+      sizes="16x16"
+      type="image/png"
     />
-    <link rel="manifest" href="../assets/site.webmanifest" />
+    <link href="../assets/site.webmanifest" rel="manifest" />
   </head>
   <body>
     <gf-root></gf-root>
 
-    <script type="module" src="../ionicons/ionicons.esm.js"></script>
+    <script src="../ionicons/ionicons.esm.js" type="module"></script>
     <script nomodule="" src="ionicons.js"></script>
 
     <noscript