Release 1.209.0 (#1427)

* Improve usability by adding expected file format

* Update changelog

.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,71 @@ 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.209.0 - 05.11.2022
+
+### Added
+
+- Added the _Buy me a coffee_ button to the about page
+
+### Changed
+
+- Improved the usability of the activities import
+- Improved the usage of the premium indicator component
+- Removed the intro image in dark mode
+- Refactored the `TransactionsPageComponent` to `ActivitiesPageComponent`
+
+## 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

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/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

@@ -234,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) {
@@ -267,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();
 
@@ -899,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);
@@ -1000,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
@@ -1027,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);
 
@@ -1078,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;
@@ -1142,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) {
@@ -1149,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
@@ -1218,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
@@ -1233,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

@@ -10,7 +10,6 @@ import { TransformDataSourceInResponseInterceptor } from '@ghostfolio/api/interc
 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 {
   PortfolioDetails,
   PortfolioInvestments,
@@ -72,8 +71,13 @@ export class PortfolioController {
     @Query('range') dateRange: DateRange = 'max',
     @Query('tags') filterByTags?: string
   ): Promise<PortfolioDetails & { hasError: boolean }> {
+    let hasDetails = true;
     let hasError = false;
 
+    if (this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION')) {
+      hasDetails = this.request.user.subscription.type === 'Premium';
+    }
+
     const filters = this.apiService.buildFiltersFromQueryParams({
       filterByAccounts,
       filterByAssetClasses,
@@ -134,7 +138,13 @@ export class PortfolioController {
         accounts[name].current = current / totalValue;
         accounts[name].original = original / totalInvestment;
       }
+    }
 
+    if (
+      hasDetails === false ||
+      impersonationId ||
+      this.userService.isRestrictedView(this.request.user)
+    ) {
       portfolioSummary = nullifyValuesInObject(summary, [
         'cash',
         'committedFunds',
@@ -152,11 +162,6 @@ export class PortfolioController {
       ]);
     }
 
-    let hasDetails = true;
-    if (this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION')) {
-      hasDetails = this.request.user.subscription.type === 'Premium';
-    }
-
     for (const [symbol, portfolioPosition] of Object.entries(holdings)) {
       holdings[symbol] = {
         ...portfolioPosition,
@@ -176,7 +181,7 @@ export class PortfolioController {
       hasError,
       holdings,
       totalValueInBaseCurrency,
-      summary: hasDetails ? portfolioSummary : undefined
+      summary: portfolioSummary
     };
   }
 
@@ -187,16 +192,6 @@ export class PortfolioController {
     @Query('range') dateRange: DateRange = 'max',
     @Query('groupBy') groupBy?: GroupBy
   ): Promise<PortfolioInvestments> {
-    if (
-      this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION') &&
-      this.request.user.subscription.type === 'Basic'
-    ) {
-      throw new HttpException(
-        getReasonPhrase(StatusCodes.FORBIDDEN),
-        StatusCodes.FORBIDDEN
-      );
-    }
-
     let investments: InvestmentItem[];
 
     if (groupBy === 'month') {
@@ -227,6 +222,15 @@ export class PortfolioController {
       }));
     }
 
+    if (
+      this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION') &&
+      this.request.user.subscription.type === 'Basic'
+    ) {
+      investments = investments.map((item) => {
+        return nullifyValuesInObject(item, ['investment']);
+      });
+    }
+
     return { investments };
   }
 
@@ -238,12 +242,11 @@ export class PortfolioController {
     @Headers('impersonation-id') impersonationId: string,
     @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 ||
@@ -276,6 +279,17 @@ export class PortfolioController {
       );
     }
 
+    if (
+      this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION') &&
+      this.request.user.subscription.type === 'Basic'
+    ) {
+      performanceInformation.chart = performanceInformation.chart.map(
+        (item) => {
+          return nullifyValuesInObject(item, ['totalInvestment', 'value']);
+        }
+      );
+    }
+
     return performanceInformation;
   }
 
@@ -333,7 +347,7 @@ export class PortfolioController {
       dateRange: 'max',
       filters: [{ id: 'EQUITY', type: 'ASSET_CLASS' }],
       impersonationId: access.userId,
-      userId: access.userId
+      userId: user.id
     });
 
     const portfolioPublicDetails: PortfolioPublicDetails = {

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';
@@ -130,9 +128,9 @@ export class PortfolioService {
       }),
       this.getDetails({
         filters,
-        userId,
         withExcludedAccounts,
-        impersonationId: userId
+        impersonationId: userId,
+        userId: this.request.user.id
       })
     ]);
 
@@ -302,14 +300,18 @@ export class PortfolioService {
     });
   }
 
-  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({
@@ -317,7 +319,7 @@ export class PortfolioService {
       });
 
     const portfolioCalculator = new PortfolioCalculator({
-      currency: this.request.user.Settings.settings.baseCurrency,
+      currency: userCurrency,
       currentRateService: this.currentRateService,
       orders: portfolioOrders
     });
@@ -355,28 +357,24 @@ export class PortfolioService {
 
   public async getDetails({
     impersonationId,
-    userId,
     dateRange = 'max',
     filters,
+    userId,
     withExcludedAccounts = false
   }: {
     impersonationId: string;
-    userId: string;
     dateRange?: DateRange;
     filters?: Filter[];
+    userId: string;
     withExcludedAccounts?: boolean;
   }): Promise<PortfolioDetails & { hasErrors: boolean }> {
-    // TODO
     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({
@@ -540,7 +538,11 @@ export class PortfolioService {
       withExcludedAccounts
     });
 
-    const summary = await this.getSummary({ impersonationId });
+    const summary = await this.getSummary({
+      impersonationId,
+      userCurrency,
+      userId
+    });
 
     return {
       accounts,
@@ -560,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({
@@ -881,14 +884,18 @@ export class PortfolioService {
     };
   }
 
-  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({
@@ -896,7 +903,7 @@ export class PortfolioService {
       });
 
     const portfolioCalculator = new PortfolioCalculator({
-      currency: this.request.user.Settings.settings.baseCurrency,
+      currency: userCurrency,
       currentRateService: this.currentRateService,
       orders: portfolioOrders
     });
@@ -945,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) => {
@@ -995,8 +1004,9 @@ export class PortfolioService {
   }
 
   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({
@@ -1010,7 +1020,7 @@ export class PortfolioService {
     }
 
     const portfolioCalculator = new PortfolioCalculator({
-      currency,
+      currency: userCurrency,
       currentRateService: this.currentRateService,
       orders: portfolioOrders
     });
@@ -1030,7 +1040,7 @@ export class PortfolioService {
       orders,
       portfolioItemsNow,
       userId,
-      userCurrency: currency
+      userCurrency
     });
     return {
       rules: {
@@ -1077,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
@@ -1180,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
@@ -1193,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(
@@ -1202,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
@@ -1212,7 +1238,7 @@ export class PortfolioService {
         return this.exchangeRateDataService.toCurrency(
           order.fee,
           order.SymbolProfile.currency,
-          this.request.user.Settings.settings.baseCurrency
+          userCurrency
         );
       })
       .reduce(
@@ -1262,16 +1288,20 @@ export class PortfolioService {
   }
 
   private async getSummary({
-    impersonationId
+    impersonationId,
+    userCurrency,
+    userId
   }: {
     impersonationId: string;
+    userCurrency: string;
+    userId: string;
   }): Promise<PortfolioSummary> {
-    const userCurrency = this.request.user.Settings.settings.baseCurrency;
-    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 performanceInformation = await this.getPerformanceV2({
-      impersonationId
+    const performanceInformation = await this.getPerformance({
+      impersonationId,
+      userId
     });
 
     const { balanceInBaseCurrency } = await this.accountService.getCashDetails({
@@ -1293,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();
 
@@ -1565,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 { Appearance, DateRange, ViewMode } from '@ghostfolio/common/types';
+import type {
+  ColorScheme,
+  DateRange,
+  ViewMode
+} from '@ghostfolio/common/types';
 import {
   IsBoolean,
   IsIn,
@@ -8,10 +12,6 @@ import {
 } from 'class-validator';
 
 export class UpdateUserSettingDto {
-  @IsIn(<Appearance[]>['DARK', 'LIGHT'])
-  @IsOptional()
-  appearance?: Appearance;
-
   @IsOptional()
   @IsString()
   baseCurrency?: string;
@@ -20,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/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

@@ -148,8 +148,8 @@ const routes: Routes = [
   {
     path: 'portfolio/activities',
     loadChildren: () =>
-      import('./pages/portfolio/transactions/transactions-page.module').then(
-        (m) => m.TransactionsPageModule
+      import('./pages/portfolio/activities/activities-page.module').then(
+        (m) => m.ActivitiesPageModule
       )
   },
   {

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

@@ -13,7 +13,7 @@ import {
 } from '@ghostfolio/common/config';
 import { InfoItem, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
-import { Appearance } from '@ghostfolio/common/types';
+import { ColorScheme } from '@ghostfolio/common/types';
 import { MaterialCssVarsService } from 'angular-material-css-vars';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
@@ -78,7 +78,7 @@ export class AppComponent implements OnDestroy, OnInit {
           permissions.createUserAccount
         );
 
-        this.initializeTheme(this.user?.settings.appearance);
+        this.initializeTheme(this.user?.settings.colorScheme);
 
         this.changeDetectorRef.markForCheck();
       });
@@ -100,15 +100,15 @@ export class AppComponent implements OnDestroy, OnInit {
     this.unsubscribeSubject.complete();
   }
 
-  private initializeTheme(userPreferredAppearance?: Appearance) {
-    const isDarkTheme = userPreferredAppearance
-      ? userPreferredAppearance === 'DARK'
+  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) => {
-      if (!this.user?.settings.appearance) {
+      if (!this.user?.settings.colorScheme) {
         this.materialCssVarsService.setDarkTheme(event.matches);
       }
     });

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/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,
@@ -162,35 +160,6 @@ 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.putAdminSetting({
       key: PROPERTY_IS_READ_ONLY_MODE,

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

@@ -27,53 +27,6 @@
               </div>
             </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>
-              </div>
-            </div>
-          </div>
           <div class="align-items-start d-flex my-3">
             <div class="w-50" i18n>Exchange Rates</div>
             <div class="w-50">

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

@@ -18,6 +18,7 @@
       <mat-label i18n>Compare with...</mat-label>
       <mat-select
         name="benchmark"
+        [disabled]="user?.subscription?.type === 'Basic'"
         [value]="benchmark"
         (selectionChange)="onChangeBenchmark($event.value)"
       >

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

@@ -23,6 +23,8 @@ import {
   parseDate
 } from '@ghostfolio/common/helper';
 import { LineChartItem, User } from '@ghostfolio/common/interfaces';
+import { ColorScheme } from '@ghostfolio/common/types';
+import { SymbolProfile } from '@prisma/client';
 import {
   Chart,
   LineController,
@@ -33,7 +35,6 @@ import {
   Tooltip
 } from 'chart.js';
 import annotationPlugin from 'chartjs-plugin-annotation';
-import { SymbolProfile } from '@prisma/client';
 
 @Component({
   selector: 'gf-benchmark-comparator',
@@ -45,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;
@@ -127,7 +129,7 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
                 tension: 0
               },
               point: {
-                hoverBackgroundColor: getBackgroundColor(),
+                hoverBackgroundColor: getBackgroundColor(this.colorScheme),
                 hoverRadius: 2,
                 radius: 0
               }
@@ -138,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',
@@ -151,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,
@@ -159,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',
@@ -173,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
                 },
@@ -190,7 +192,9 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
               }
             }
           },
-          plugins: [getVerticalHoverLinePlugin(this.chartCanvas)],
+          plugins: [
+            getVerticalHoverLinePlugin(this.chartCanvas, this.colorScheme)
+          ],
           type: 'line'
         });
       }
@@ -200,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,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatSelectModule } from '@angular/material/select';
+import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { BenchmarkComparatorComponent } from './benchmark-comparator.component';
@@ -12,6 +13,7 @@ import { BenchmarkComparatorComponent } from './benchmark-comparator.component';
   imports: [
     CommonModule,
     FormsModule,
+    GfPremiumIndicatorModule,
     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-overview/home-overview.html

@@ -16,8 +16,9 @@
           class="position-absolute"
           symbol="Performance"
           unit="%"
-          [historicalDataItems]="historicalDataItems"
+          [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' }"

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

@@ -24,7 +24,7 @@ import {
 } from '@ghostfolio/common/helper';
 import { LineChartItem } from '@ghostfolio/common/interfaces';
 import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface';
-import { DateRange, GroupBy } from '@ghostfolio/common/types';
+import { ColorScheme, DateRange, GroupBy } from '@ghostfolio/common/types';
 import {
   BarController,
   BarElement,
@@ -38,6 +38,7 @@ import {
 } from 'chart.js';
 import annotationPlugin from 'chartjs-plugin-annotation';
 import { addDays, format, isAfter, parseISO, subDays } from 'date-fns';
+import { last } from 'lodash';
 
 @Component({
   selector: 'gf-investment-chart',
@@ -46,12 +47,14 @@ import { addDays, format, isAfter, parseISO, subDays } from 'date-fns';
   styleUrls: ['./investment-chart.component.scss']
 })
 export class InvestmentChartComponent implements OnChanges, OnDestroy {
-  @Input() benchmarkDataItems: LineChartItem[] = [];
+  @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;
@@ -59,9 +62,8 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
   @ViewChild('chartCanvas') chartCanvas;
 
   public chart: Chart<any>;
-  public isLoading = true;
-
-  private data: InvestmentItem[];
+  private investments: InvestmentItem[];
+  private values: LineChartItem[];
 
   public constructor() {
     Chart.register(
@@ -81,7 +83,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
   }
 
   public ngOnChanges() {
-    if (this.benchmarkDataItems && this.investments) {
+    if (this.benchmarkDataItems && this.historicalDataItems) {
       this.initialize();
     }
   }
@@ -91,46 +93,61 @@ 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.investments?.length > 0) {
+      let date: string;
 
-    if (!this.groupBy && this.data?.length > 0) {
       if (this.range === 'max') {
         // Extend chart by 5% of days in market (before)
-        const firstItem = this.data[0];
-        this.data.unshift({
-          ...firstItem,
-          date: format(
-            subDays(parseISO(firstItem.date), this.daysInMarket * 0.05 || 90),
-            DATE_FORMAT
+        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: format(
-          addDays(parseDate(lastItem.date), this.daysInMarket * 0.05 || 90),
-          DATE_FORMAT
-        )
+      date = format(
+        addDays(
+          parseDate(last(this.investments).date),
+          this.daysInMarket * 0.05 || 90
+        ),
+        DATE_FORMAT
+      );
+      this.investments.push({
+        date,
+        investment: last(this.investments).investment
       });
+      this.values.push({ date, value: last(this.values).value });
     }
 
     const data = {
-      labels: this.benchmarkDataItems.map(({ 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(({ date, 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
@@ -141,16 +158,16 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
             borderColor: (context: unknown) =>
               this.isInFuture(
                 context,
-                `rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b}, 0.67)`
+                `rgba(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b}, 0.67)`
               ),
             borderDash: (context: unknown) => this.isInFuture(context, [2, 2])
           },
           stepped: true
         },
         {
-          borderColor: `rgb(${secondaryColorRgb.r}, ${secondaryColorRgb.g}, ${secondaryColorRgb.b})`,
-          borderWidth: 1,
-          data: this.benchmarkDataItems.map(({ date, value }) => {
+          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
@@ -158,7 +175,15 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
           }),
           fill: false,
           label: $localize`Total Amount`,
-          pointRadius: 0
+          pointRadius: 0,
+          segment: {
+            borderColor: (context: unknown) =>
+              this.isInFuture(
+                context,
+                `rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b}, 0.67)`
+              ),
+            borderDash: (context: unknown) => this.isInFuture(context, [2, 2])
+          }
         }
       ]
     };
@@ -180,7 +205,7 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
                 tension: 0
               },
               point: {
-                hoverBackgroundColor: getBackgroundColor(),
+                hoverBackgroundColor: getBackgroundColor(this.colorScheme),
                 hoverRadius: 2,
                 radius: 0
               }
@@ -192,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: {
@@ -213,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',
@@ -226,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,
@@ -234,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',
@@ -248,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
                 },
@@ -265,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,9 +20,10 @@
     </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"
@@ -188,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"
@@ -199,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

@@ -96,6 +96,20 @@
             title="Ghostfolio is an independent & bootstrapped business"
           ></div>
         </div>
+        <div
+          *ngIf="!hasPermissionForSubscription"
+          class="d-flex justify-content-center"
+        >
+          <a
+            href="https://www.buymeacoffee.com/ghostfolio"
+            target="_blank"
+            title="Support Ghostfolio"
+            ><img
+              class="mb-2"
+              src="../assets/images/button-buy-me-a-coffee.png"
+              width="180"
+          /></a>
+        </div>
       </div>
     </div>
   </div>
@@ -177,7 +191,7 @@
       <a
         class="py-2 w-100"
         color="primary"
-        mat-stroked-button
+        mat-flat-button
         [routerLink]="['/faq']"
         >FAQ</a
       >
@@ -189,7 +203,7 @@
       <a
         class="py-2 w-100"
         color="primary"
-        mat-stroked-button
+        mat-flat-button
         [routerLink]="['/about', 'changelog']"
         >Changelog & License</a
       >
@@ -198,7 +212,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.html

@@ -200,12 +200,12 @@
                     class="compact-with-outline w-100 without-hint"
                   >
                     <mat-select
-                      name="appearance"
                       class="with-placeholder-as-option"
+                      name="colorScheme"
                       [disabled]="!hasPermissionToUpdateUserSettings"
                       [placeholder]="appearancePlaceholder"
-                      [value]="user.settings.appearance"
-                      (selectionChange)="onChangeUserSetting('appearance', $event.value)"
+                      [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>
@@ -267,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/landing/landing-page.component.ts

@@ -3,6 +3,7 @@ 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({
@@ -14,6 +15,7 @@ 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 = [
@@ -41,7 +43,10 @@ export class LandingPageComponent implements OnDestroy, OnInit {
 
   private unsubscribeSubject = new Subject<void>();
 
-  public constructor(private dataService: DataService) {
+  public constructor(
+    private dataService: DataService,
+    private deviceService: DeviceDetectorService
+  ) {
     const { globalPermissions, statistics } = this.dataService.fetchInfo();
 
     this.hasPermissionForStatistics = hasPermission(
@@ -52,7 +57,9 @@ export class LandingPageComponent implements OnDestroy, OnInit {
     this.statistics = statistics;
   }
 
-  public ngOnInit() {}
+  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"
@@ -43,7 +48,10 @@
   </div>
 
   <div *ngIf="hasPermissionForStatistics" class="row mb-5">
-    <div class="col-md-4 d-flex my-1">
+    <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)"
@@ -57,7 +65,10 @@
         >
       </a>
     </div>
-    <div class="col-md-4 d-flex my-1">
+    <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"
@@ -71,7 +82,10 @@
         >
       </a>
     </div>
-    <div class="col-md-4 d-flex my-1">
+    <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"
@@ -139,15 +153,15 @@
     </div>
   </div>
 
-  <div class="row my-5">
+  <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>
@@ -220,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>

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

@@ -114,9 +114,7 @@
   }
 
   .outro-inner-container {
-    div {
-      background-image: url('/assets/intro-dark.jpg') !important;
-    }
+    display: none;
   }
 
   .video {

apps/client/src/app/pages/portfolio/activities/activities-page-routing.module.ts

@@ -2,12 +2,12 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { AuthGuard } from '@ghostfolio/client/core/auth.guard';
 
-import { TransactionsPageComponent } from './transactions-page.component';
+import { ActivitiesPageComponent } from './activities-page.component';
 
 const routes: Routes = [
   {
     canActivate: [AuthGuard],
-    component: TransactionsPageComponent,
+    component: ActivitiesPageComponent,
     path: '',
     title: $localize`Activities`
   }
@@ -17,4 +17,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule]
 })
-export class TransactionsPageRoutingModule {}
+export class ActivitiesPageRoutingModule {}

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

@@ -10,35 +10,35 @@ import { PositionDetailDialog } from '@ghostfolio/client/components/position/pos
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { IcsService } from '@ghostfolio/client/services/ics/ics.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
-import { ImportTransactionsService } from '@ghostfolio/client/services/import-transactions.service';
+import { ImportActivitiesService } from '@ghostfolio/client/services/import-activities.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { downloadAsFile } from '@ghostfolio/common/helper';
 import { User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { DataSource, Order as OrderModel } from '@prisma/client';
 import { format, parseISO } from 'date-fns';
-import { isArray } from 'lodash';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject, Subscription } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
-import { CreateOrUpdateTransactionDialog } from './create-or-update-transaction-dialog/create-or-update-transaction-dialog.component';
-import { ImportTransactionDialog } from './import-transaction-dialog/import-transaction-dialog.component';
+import { CreateOrUpdateActivityDialog } from './create-or-update-activity-dialog/create-or-update-activity-dialog.component';
+import { ImportActivitiesDialog } from './import-activities-dialog/import-activities-dialog.component';
+import { ImportActivitiesDialogParams } from './import-activities-dialog/interfaces/interfaces';
 
 @Component({
   host: { class: 'page' },
-  selector: 'gf-transactions-page',
-  styleUrls: ['./transactions-page.scss'],
-  templateUrl: './transactions-page.html'
+  selector: 'gf-activities-page',
+  styleUrls: ['./activities-page.scss'],
+  templateUrl: './activities-page.html'
 })
-export class TransactionsPageComponent implements OnDestroy, OnInit {
+export class ActivitiesPageComponent implements OnDestroy, OnInit {
   public activities: Activity[];
   public defaultAccountId: string;
   public deviceType: string;
   public hasImpersonationId: boolean;
-  public hasPermissionToCreateOrder: boolean;
-  public hasPermissionToDeleteOrder: boolean;
-  public hasPermissionToImportOrders: boolean;
+  public hasPermissionToCreateActivity: boolean;
+  public hasPermissionToDeleteActivity: boolean;
+  public hasPermissionToImportActivities: boolean;
   public routeQueryParams: Subscription;
   public user: User;
 
@@ -51,24 +51,22 @@ export class TransactionsPageComponent implements OnDestroy, OnInit {
     private dialog: MatDialog,
     private icsService: IcsService,
     private impersonationStorageService: ImpersonationStorageService,
-    private importTransactionsService: ImportTransactionsService,
     private route: ActivatedRoute,
     private router: Router,
-    private snackBar: MatSnackBar,
     private userService: UserService
   ) {
     this.routeQueryParams = route.queryParams
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((params) => {
         if (params['createDialog']) {
-          this.openCreateTransactionDialog();
+          this.openCreateActivityDialog();
         } else if (params['editDialog']) {
           if (this.activities) {
-            const transaction = this.activities.find(({ id }) => {
-              return id === params['transactionId'];
+            const activity = this.activities.find(({ id }) => {
+              return id === params['activityId'];
             });
 
-            this.openUpdateTransactionDialog(transaction);
+            this.openUpdateActivityDialog(activity);
           } else {
             this.router.navigate(['.'], { relativeTo: this.route });
           }
@@ -96,7 +94,7 @@ export class TransactionsPageComponent implements OnDestroy, OnInit {
       .subscribe((aId) => {
         this.hasImpersonationId = !!aId;
 
-        this.hasPermissionToImportOrders =
+        this.hasPermissionToImportActivities =
           hasPermission(globalPermissions, permissions.enableImport) &&
           !this.hasImpersonationId;
       });
@@ -121,7 +119,10 @@ export class TransactionsPageComponent implements OnDestroy, OnInit {
       .subscribe(({ activities }) => {
         this.activities = activities;
 
-        if (this.hasPermissionToCreateOrder && this.activities?.length <= 0) {
+        if (
+          this.hasPermissionToCreateActivity &&
+          this.activities?.length <= 0
+        ) {
           this.router.navigate([], { queryParams: { createDialog: true } });
         }
 
@@ -129,11 +130,11 @@ export class TransactionsPageComponent implements OnDestroy, OnInit {
       });
   }
 
-  public onCloneTransaction(aActivity: Activity) {
-    this.openCreateTransactionDialog(aActivity);
+  public onCloneActivity(aActivity: Activity) {
+    this.openCreateActivityDialog(aActivity);
   }
 
-  public onDeleteTransaction(aId: string) {
+  public onDeleteActivity(aId: string) {
     this.dataService
       .deleteOrder(aId)
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -183,98 +184,30 @@ export class TransactionsPageComponent implements OnDestroy, OnInit {
   }
 
   public onImport() {
-    const input = document.createElement('input');
-    input.accept = 'application/JSON, .csv';
-    input.type = 'file';
+    const dialogRef = this.dialog.open(ImportActivitiesDialog, {
+      data: <ImportActivitiesDialogParams>{
+        deviceType: this.deviceType,
+        user: this.user
+      },
+      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+    });
 
-    input.onchange = (event) => {
-      this.snackBar.open('⏳' + $localize`Importing data...`);
-
-      // Getting the file reference
-      const file = (event.target as HTMLInputElement).files[0];
-
-      // Setting up the reader
-      const reader = new FileReader();
-      reader.readAsText(file, 'UTF-8');
-
-      reader.onload = async (readerEvent) => {
-        const fileContent = readerEvent.target.result as string;
-
-        try {
-          if (file.name.endsWith('.json')) {
-            const content = JSON.parse(fileContent);
-
-            if (!isArray(content.activities)) {
-              if (isArray(content.orders)) {
-                this.handleImportError({
-                  activities: [],
-                  error: {
-                    error: {
-                      message: [`orders needs to be renamed to activities`]
-                    }
-                  }
-                });
-                return;
-              } else {
-                throw new Error();
-              }
-            }
-
-            try {
-              await this.importTransactionsService.importJson({
-                content: content.activities
-              });
-
-              this.handleImportSuccess();
-            } catch (error) {
-              console.error(error);
-              this.handleImportError({ error, activities: content.activities });
-            }
-
-            return;
-          } else if (file.name.endsWith('.csv')) {
-            try {
-              await this.importTransactionsService.importCsv({
-                fileContent,
-                userAccounts: this.user.accounts
-              });
-
-              this.handleImportSuccess();
-            } catch (error) {
-              console.error(error);
-              this.handleImportError({
-                activities: error?.activities ?? [],
-                error: {
-                  error: { message: error?.error?.message ?? [error?.message] }
-                }
-              });
-            }
-
-            return;
-          }
-
-          throw new Error();
-        } catch (error) {
-          console.error(error);
-          this.handleImportError({
-            activities: [],
-            error: { error: { message: ['Unexpected format'] } }
-          });
-        }
-      };
-    };
-
-    input.click();
+    dialogRef
+      .afterClosed()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        this.fetchActivities();
+      });
   }
 
-  public onUpdateTransaction(aTransaction: OrderModel) {
+  public onUpdateActivity(aActivity: OrderModel) {
     this.router.navigate([], {
-      queryParams: { editDialog: true, transactionId: aTransaction.id }
+      queryParams: { activityId: aActivity.id, editDialog: true }
     });
   }
 
-  public openUpdateTransactionDialog(activity: Activity): void {
-    const dialogRef = this.dialog.open(CreateOrUpdateTransactionDialog, {
+  public openUpdateActivityDialog(activity: Activity): void {
+    const dialogRef = this.dialog.open(CreateOrUpdateActivityDialog, {
       data: {
         activity,
         accounts: this.user?.accounts?.filter((account) => {
@@ -312,41 +245,14 @@ export class TransactionsPageComponent implements OnDestroy, OnInit {
     this.unsubscribeSubject.complete();
   }
 
-  private handleImportError({
-    activities,
-    error
-  }: {
-    activities: any[];
-    error: any;
-  }) {
-    this.snackBar.dismiss();
-
-    this.dialog.open(ImportTransactionDialog, {
-      data: {
-        activities,
-        deviceType: this.deviceType,
-        messages: error?.error?.message
-      },
-      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
-    });
-  }
-
-  private handleImportSuccess() {
-    this.fetchActivities();
-
-    this.snackBar.open('✅' + $localize`Import has been completed`, undefined, {
-      duration: 3000
-    });
-  }
-
-  private openCreateTransactionDialog(aActivity?: Activity): void {
+  private openCreateActivityDialog(aActivity?: Activity): void {
     this.userService
       .get()
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((user) => {
         this.updateUser(user);
 
-        const dialogRef = this.dialog.open(CreateOrUpdateTransactionDialog, {
+        const dialogRef = this.dialog.open(CreateOrUpdateActivityDialog, {
           data: {
             accounts: this.user?.accounts?.filter((account) => {
               return account.accountType === 'SECURITIES';
@@ -405,6 +311,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(
@@ -433,11 +340,11 @@ export class TransactionsPageComponent implements OnDestroy, OnInit {
       return account.isDefault;
     })?.id;
 
-    this.hasPermissionToCreateOrder = hasPermission(
+    this.hasPermissionToCreateActivity = hasPermission(
       this.user.permissions,
       permissions.createOrder
     );
-    this.hasPermissionToDeleteOrder = hasPermission(
+    this.hasPermissionToDeleteActivity = hasPermission(
       this.user.permissions,
       permissions.deleteOrder
     );

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

@@ -6,14 +6,14 @@
         [activities]="activities"
         [baseCurrency]="user?.settings?.baseCurrency"
         [deviceType]="deviceType"
-        [hasPermissionToCreateActivity]="hasPermissionToCreateOrder"
+        [hasPermissionToCreateActivity]="hasPermissionToCreateActivity"
         [hasPermissionToExportActivities]="!hasImpersonationId"
-        [hasPermissionToImportActivities]="hasPermissionToImportOrders"
+        [hasPermissionToImportActivities]="hasPermissionToImportActivities"
         [locale]="user?.settings?.locale"
-        [showActions]="!hasImpersonationId && hasPermissionToDeleteOrder && !user.settings.isRestrictedView"
-        (activityDeleted)="onDeleteTransaction($event)"
-        (activityToClone)="onCloneTransaction($event)"
-        (activityToUpdate)="onUpdateTransaction($event)"
+        [showActions]="!hasImpersonationId && hasPermissionToDeleteActivity && !user.settings.isRestrictedView"
+        (activityDeleted)="onDeleteActivity($event)"
+        (activityToClone)="onCloneActivity($event)"
+        (activityToUpdate)="onUpdateActivity($event)"
         (export)="onExport($event)"
         (exportDrafts)="onExportDrafts($event)"
         (import)="onImport()"
@@ -22,15 +22,15 @@
   </div>
 
   <div
-    *ngIf="!hasImpersonationId && hasPermissionToCreateOrder && !user.settings.isRestrictedView"
+    *ngIf="!hasImpersonationId && hasPermissionToCreateActivity && !user.settings.isRestrictedView"
     class="fab-container"
   >
     <a
       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/portfolio/activities/activities-page.module.ts

@@ -0,0 +1,29 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { RouterModule } from '@angular/router';
+import { ImportActivitiesService } from '@ghostfolio/client/services/import-activities.service';
+import { GfActivitiesTableModule } from '@ghostfolio/ui/activities-table/activities-table.module';
+
+import { ActivitiesPageRoutingModule } from './activities-page-routing.module';
+import { ActivitiesPageComponent } from './activities-page.component';
+import { GfCreateOrUpdateActivityDialogModule } from './create-or-update-activity-dialog/create-or-update-activity-dialog.module';
+import { GfImportActivitiesDialogModule } from './import-activities-dialog/import-activities-dialog.module';
+
+@NgModule({
+  declarations: [ActivitiesPageComponent],
+  imports: [
+    ActivitiesPageRoutingModule,
+    CommonModule,
+    GfActivitiesTableModule,
+    GfCreateOrUpdateActivityDialogModule,
+    GfImportActivitiesDialogModule,
+    MatButtonModule,
+    MatSnackBarModule,
+    RouterModule
+  ],
+  providers: [ImportActivitiesService],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class ActivitiesPageModule {}

apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-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';
@@ -27,21 +28,25 @@ import {
   takeUntil
 } from 'rxjs/operators';
 
-import { CreateOrUpdateTransactionDialogParams } from './interfaces/interfaces';
+import { CreateOrUpdateActivityDialogParams } from './interfaces/interfaces';
 
 @Component({
   host: { class: 'h-100' },
-  selector: 'gf-create-or-update-transaction-dialog',
+  selector: 'gf-create-or-update-activity-dialog',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  styleUrls: ['./create-or-update-transaction-dialog.scss'],
-  templateUrl: 'create-or-update-transaction-dialog.html'
+  styleUrls: ['./create-or-update-activity-dialog.scss'],
+  templateUrl: 'create-or-update-activity-dialog.html'
 })
-export class CreateOrUpdateTransactionDialog implements OnDestroy {
+export class CreateOrUpdateActivityDialog 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[];
@@ -55,10 +60,10 @@ export class CreateOrUpdateTransactionDialog implements OnDestroy {
 
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
-    @Inject(MAT_DIALOG_DATA) public data: CreateOrUpdateTransactionDialogParams,
+    @Inject(MAT_DIALOG_DATA) public data: CreateOrUpdateActivityDialogParams,
     private dataService: DataService,
     private dateAdapter: DateAdapter<any>,
-    public dialogRef: MatDialogRef<CreateOrUpdateTransactionDialog>,
+    public dialogRef: MatDialogRef<CreateOrUpdateActivityDialog>,
     private formBuilder: FormBuilder,
     @Inject(MAT_DATE_LOCALE) private locale: string
   ) {}

apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-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/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.module.ts

@@ -13,10 +13,10 @@ import { MatSelectModule } from '@angular/material/select';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 import { GfValueModule } from '@ghostfolio/ui/value';
 
-import { CreateOrUpdateTransactionDialog } from './create-or-update-transaction-dialog.component';
+import { CreateOrUpdateActivityDialog } from './create-or-update-activity-dialog.component';
 
 @NgModule({
-  declarations: [CreateOrUpdateTransactionDialog],
+  declarations: [CreateOrUpdateActivityDialog],
   imports: [
     CommonModule,
     GfSymbolModule,
@@ -35,4 +35,4 @@ import { CreateOrUpdateTransactionDialog } from './create-or-update-transaction-
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
-export class GfCreateOrUpdateTransactionDialogModule {}
+export class GfCreateOrUpdateActivityDialogModule {}

apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/interfaces/interfaces.ts

@@ -2,7 +2,7 @@ import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interf
 import { User } from '@ghostfolio/common/interfaces';
 import { Account } from '@prisma/client';
 
-export interface CreateOrUpdateTransactionDialogParams {
+export interface CreateOrUpdateActivityDialogParams {
   accountId: string;
   accounts: Account[];
   activity: Activity;

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts

@@ -0,0 +1,176 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Inject,
+  OnDestroy
+} from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { ImportActivitiesService } from '@ghostfolio/client/services/import-activities.service';
+import { isArray } from 'lodash';
+import { Subject } from 'rxjs';
+
+import { ImportActivitiesDialogParams } from './interfaces/interfaces';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'gf-import-activities-dialog',
+  styleUrls: ['./import-activities-dialog.scss'],
+  templateUrl: 'import-activities-dialog.html'
+})
+export class ImportActivitiesDialog implements OnDestroy {
+  public details: any[] = [];
+  public errorMessages: string[] = [];
+
+  private unsubscribeSubject = new Subject<void>();
+
+  public constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    @Inject(MAT_DIALOG_DATA) public data: ImportActivitiesDialogParams,
+    public dialogRef: MatDialogRef<ImportActivitiesDialog>,
+    private importActivitiesService: ImportActivitiesService,
+    private snackBar: MatSnackBar
+  ) {}
+
+  public ngOnInit() {}
+
+  public onCancel(): void {
+    this.dialogRef.close();
+  }
+
+  public onImport() {
+    const input = document.createElement('input');
+    input.accept = 'application/JSON, .csv';
+    input.type = 'file';
+
+    input.onchange = (event) => {
+      this.snackBar.open('⏳ ' + $localize`Importing data...`);
+
+      // Getting the file reference
+      const file = (event.target as HTMLInputElement).files[0];
+
+      // Setting up the reader
+      const reader = new FileReader();
+      reader.readAsText(file, 'UTF-8');
+
+      reader.onload = async (readerEvent) => {
+        const fileContent = readerEvent.target.result as string;
+
+        console.log(fileContent);
+
+        try {
+          if (file.name.endsWith('.json')) {
+            const content = JSON.parse(fileContent);
+
+            if (!isArray(content.activities)) {
+              if (isArray(content.orders)) {
+                this.handleImportError({
+                  activities: [],
+                  error: {
+                    error: {
+                      message: [`orders needs to be renamed to activities`]
+                    }
+                  }
+                });
+                return;
+              } else {
+                throw new Error();
+              }
+            }
+
+            try {
+              await this.importActivitiesService.importJson({
+                content: content.activities
+              });
+
+              this.handleImportSuccess();
+            } catch (error) {
+              console.error(error);
+              this.handleImportError({ error, activities: content.activities });
+            }
+
+            return;
+          } else if (file.name.endsWith('.csv')) {
+            try {
+              await this.importActivitiesService.importCsv({
+                fileContent,
+                userAccounts: this.data.user.accounts
+              });
+
+              this.handleImportSuccess();
+            } catch (error) {
+              console.error(error);
+              this.handleImportError({
+                activities: error?.activities ?? [],
+                error: {
+                  error: { message: error?.error?.message ?? [error?.message] }
+                }
+              });
+            }
+
+            return;
+          }
+
+          throw new Error();
+        } catch (error) {
+          console.error(error);
+          this.handleImportError({
+            activities: [],
+            error: { error: { message: ['Unexpected format'] } }
+          });
+        }
+      };
+    };
+
+    input.click();
+  }
+
+  public onReset() {
+    this.details = [];
+    this.errorMessages = [];
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
+  private handleImportError({
+    activities,
+    error
+  }: {
+    activities: any[];
+    error: any;
+  }) {
+    this.snackBar.dismiss();
+
+    this.errorMessages = error?.error?.message;
+
+    for (const message of this.errorMessages) {
+      if (message.includes('activities.')) {
+        let [index] = message.split(' ');
+        index = index.replace('activities.', '');
+        [index] = index.split('.');
+
+        this.details.push(activities[index]);
+      } else {
+        this.details.push('');
+      }
+    }
+
+    this.changeDetectorRef.markForCheck();
+  }
+
+  private handleImportSuccess() {
+    this.snackBar.open(
+      '✅ ' + $localize`Import has been completed`,
+      undefined,
+      {
+        duration: 3000
+      }
+    );
+
+    this.dialogRef.close();
+  }
+}

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.html

@@ -0,0 +1,71 @@
+<gf-dialog-header
+  mat-dialog-title
+  [deviceType]="data.deviceType"
+  [title]="errorMessages.length === 0 ?  'Import Activities' : 'Import Activities Error'"
+  (closeButtonClicked)="onCancel()"
+></gf-dialog-header>
+
+<div class="flex-grow-1" mat-dialog-content>
+  <ng-container *ngIf="errorMessages.length === 0">
+    <div class="d-flex justify-content-center flex-column">
+      <button
+        class="py-3"
+        color="primary"
+        mat-stroked-button
+        (click)="onImport()"
+      >
+        <ion-icon class="mr-2" name="cloud-upload-outline"></ion-icon>
+        <span i18n>Choose File</span>
+      </button>
+      <p class="mb-0 mt-4 text-center">
+        <span class="mr-1" i18n>The following file formats are supported:</span>
+        <a
+          href="https://github.com/ghostfolio/ghostfolio/blob/main/test/import/ok.csv"
+          target="_blank"
+          >CSV</a
+        >
+        <span class="mx-1" i18n>or</span>
+        <a
+          href="https://github.com/ghostfolio/ghostfolio/blob/main/test/import/ok.json"
+          target="_blank"
+          >JSON</a
+        >
+      </p>
+    </div>
+  </ng-container>
+  <ng-container *ngIf="errorMessages.length > 0">
+    <mat-accordion displayMode="flat">
+      <mat-expansion-panel
+        *ngFor="let message of errorMessages; let i = index"
+        [disabled]="!details[i]"
+      >
+        <mat-expansion-panel-header class="pl-1">
+          <mat-panel-title>
+            <div class="d-flex">
+              <div class="align-items-center d-flex mr-2">
+                <ion-icon name="warning-outline"></ion-icon>
+              </div>
+              <div>{{ message }}</div>
+            </div>
+          </mat-panel-title>
+        </mat-expansion-panel-header>
+        <pre
+          *ngIf="details[i]"
+          class="m-0"
+        ><code>{{ details[i] | json }}</code></pre>
+      </mat-expansion-panel>
+    </mat-accordion>
+    <div class="mt-2">
+      <button mat-button (click)="onReset()">
+        <ion-icon class="mr-2" name="arrow-back-outline"></ion-icon>
+        <span i18n>Back</span>
+      </button>
+    </div>
+  </ng-container>
+</div>
+
+<gf-dialog-footer
+  mat-dialog-actions
+  [deviceType]="data.deviceType"
+  (closeButtonClicked)="onCancel()"
+></gf-dialog-footer>

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.module.ts

@@ -6,10 +6,10 @@ import { MatExpansionModule } from '@angular/material/expansion';
 import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
 import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
 
-import { ImportTransactionDialog } from './import-transaction-dialog.component';
+import { ImportActivitiesDialog } from './import-activities-dialog.component';
 
 @NgModule({
-  declarations: [ImportTransactionDialog],
+  declarations: [ImportActivitiesDialog],
   imports: [
     CommonModule,
     GfDialogFooterModule,
@@ -20,4 +20,4 @@ import { ImportTransactionDialog } from './import-transaction-dialog.component';
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
-export class GfImportTransactionDialogModule {}
+export class GfImportActivitiesDialogModule {}

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.scss

@@ -1,6 +1,10 @@
 :host {
   display: block;
 
+  a {
+    color: rgba(var(--palette-primary-500), 1);
+  }
+
   .mat-expansion-panel {
     background: none;
     box-shadow: none;

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/interfaces/interfaces.ts

@@ -0,0 +1,6 @@
+import { User } from '@ghostfolio/common/interfaces';
+
+export interface ImportActivitiesDialogParams {
+  deviceType: string;
+  user: User;
+}

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

@@ -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

@@ -35,6 +35,7 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
   public investments: InvestmentItem[];
   public investmentsByMonth: InvestmentItem[];
   public isLoadingBenchmarkComparator: boolean;
+  public isLoadingInvestmentChart: boolean;
   public mode: GroupBy = 'month';
   public modeOptions: ToggleOption[] = [
     { label: $localize`Monthly`, value: 'month' }
@@ -125,6 +126,7 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
 
   private update() {
     this.isLoadingBenchmarkComparator = true;
+    this.isLoadingInvestmentChart = true;
 
     this.dataService
       .fetchPortfolioPerformance({
@@ -156,6 +158,8 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
           });
         }
 
+        this.isLoadingInvestmentChart = false;
+
         this.updateBenchmarkDataItems();
 
         this.changeDetectorRef.markForCheck();

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

@@ -15,6 +15,7 @@
         [benchmark]="user?.settings?.benchmark"
         [benchmarkDataItems]="benchmarkDataItems"
         [benchmarks]="benchmarks"
+        [colorScheme]="user?.settings?.colorScheme"
         [daysInMarket]="daysInMarket"
         [isLoading]="isLoadingBenchmarkComparator"
         [locale]="user?.settings?.locale"
@@ -119,11 +120,12 @@
       <div class="chart-container">
         <gf-investment-chart
           class="h-100"
-          [benchmarkDataItems]="performanceDataItems"
+          [benchmarkDataItems]="investments"
           [currency]="user?.settings?.baseCurrency"
           [daysInMarket]="daysInMarket"
-          [investments]="investments"
+          [historicalDataItems]="performanceDataItems"
           [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
+          [isLoading]="isLoadingBenchmarkComparator"
           [locale]="user?.settings?.locale"
           [range]="user?.settings?.dateRange"
         ></gf-investment-chart>
@@ -155,9 +157,9 @@
         <gf-investment-chart
           class="h-100"
           groupBy="month"
+          [benchmarkDataItems]="investmentsByMonth"
           [currency]="user?.settings?.baseCurrency"
           [daysInMarket]="daysInMarket"
-          [investments]="investmentsByMonth"
           [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
           [locale]="user?.settings?.locale"
           [range]="user?.settings?.dateRange"

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

@@ -3,8 +3,15 @@
     <div class="col-lg">
       <h3 class="d-flex justify-content-center mb-3" i18n>FIRE</h3>
       <div>
-        <h4 class="mb-3" i18n>Calculator</h4>
+        <h4 class="align-items-center d-flex mb-3">
+          <span i18n>Calculator</span
+          ><gf-premium-indicator
+            *ngIf="user?.subscription?.type === 'Basic'"
+            class="ml-1"
+          ></gf-premium-indicator>
+        </h4>
         <gf-fire-calculator
+          [colorScheme]="user?.settings?.colorScheme"
           [currency]="user?.settings?.baseCurrency"
           [deviceType]="deviceType"
           [fireWealth]="fireWealth?.toNumber()"
@@ -17,7 +24,13 @@
     </div>
   </div>
   <div>
-    <h4 i18n>4% Rule</h4>
+    <h4 class="align-items-center d-flex">
+      <span i18n>4% Rule</span
+      ><gf-premium-indicator
+        *ngIf="user?.subscription?.type === 'Basic'"
+        class="ml-1"
+      ></gf-premium-indicator>
+    </h4>
     <div *ngIf="isLoading">
       <ngx-skeleton-loader
         animation="pulse"

apps/client/src/app/pages/portfolio/fire/fire-page.module.ts

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { GfFireCalculatorModule } from '@ghostfolio/ui/fire-calculator';
+import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 import { GfValueModule } from '@ghostfolio/ui/value';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
@@ -13,6 +14,7 @@ import { FirePageComponent } from './fire-page.component';
     CommonModule,
     FirePageRoutingModule,
     GfFireCalculatorModule,
+    GfPremiumIndicatorModule,
     GfValueModule,
     NgxSkeletonLoaderModule
   ],

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/portfolio-page.html

@@ -40,13 +40,7 @@
     </div>
     <div class="col-xs-12 col-md-6 mb-3">
       <mat-card class="d-flex flex-column h-100">
-        <h4 class="align-items-center d-flex">
-          <span i18n>Allocations</span>
-          <gf-premium-indicator
-            *ngIf="user?.subscription?.type === 'Basic'"
-            class="ml-1"
-          ></gf-premium-indicator>
-        </h4>
+        <h4 i18n>Allocations</h4>
         <div class="flex-grow-1" i18n>
           Check the allocations of your portfolio by account, asset class,
           currency, sector and region.
@@ -65,13 +59,7 @@
     </div>
     <div class="col-xs-12 col-md-6 mb-3">
       <mat-card class="d-flex flex-column h-100">
-        <h4 class="align-items-center d-flex">
-          <span i18n>Analysis</span>
-          <gf-premium-indicator
-            *ngIf="user?.subscription?.type === 'Basic'"
-            class="ml-1"
-          ></gf-premium-indicator>
-        </h4>
+        <h4 i18n>Analysis</h4>
         <div class="flex-grow-1" i18n>
           Ghostfolio Analysis visualizes your portfolio and shows your top and
           bottom performers.
@@ -90,13 +78,7 @@
     </div>
     <div class="col-xs-12 col-md-6 mb-3">
       <mat-card class="d-flex flex-column h-100">
-        <h4 class="align-items-center d-flex">
-          <span>X-ray</span>
-          <gf-premium-indicator
-            *ngIf="user?.subscription?.type === 'Basic'"
-            class="ml-1"
-          ></gf-premium-indicator>
-        </h4>
+        <h4>X-ray</h4>
         <div class="flex-grow-1" i18n>
           Ghostfolio X-ray uses static analysis to identify potential issues and
           risks in your portfolio.
@@ -111,13 +93,7 @@
     </div>
     <div class="col-xs-12 col-md-6 mb-3">
       <mat-card class="d-flex flex-column h-100">
-        <h4 class="align-items-center d-flex">
-          <span i18n>FIRE</span>
-          <gf-premium-indicator
-            *ngIf="user?.subscription?.type === 'Basic'"
-            class="ml-1"
-          ></gf-premium-indicator>
-        </h4>
+        <h4>FIRE</h4>
         <div class="flex-grow-1" i18n>
           Ghostfolio FIRE calculates metrics for the
           <i>Financial Independence, Retire Early</i> lifestyle.

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

@@ -3,7 +3,6 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { RouterModule } from '@angular/router';
-import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 
 import { PortfolioPageRoutingModule } from './portfolio-page-routing.module';
 import { PortfolioPageComponent } from './portfolio-page.component';
@@ -12,7 +11,6 @@ import { PortfolioPageComponent } from './portfolio-page.component';
   declarations: [PortfolioPageComponent],
   imports: [
     CommonModule,
-    GfPremiumIndicatorModule,
     MatButtonModule,
     MatCardModule,
     PortfolioPageRoutingModule,

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

@@ -14,21 +14,39 @@
         >
       </p>
       <div class="mb-4">
-        <h4 class="m-0">Currency Cluster Risks</h4>
+        <h4 class="align-items-center d-flex m-0">
+          <span>Currency Cluster Risks</span
+          ><gf-premium-indicator
+            *ngIf="user?.subscription?.type === 'Basic'"
+            class="ml-1"
+          ></gf-premium-indicator>
+        </h4>
         <gf-rules
           [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
           [rules]="currencyClusterRiskRules"
         ></gf-rules>
       </div>
       <div class="mb-4">
-        <h4 class="m-0">Account Cluster Risks</h4>
+        <h4 class="align-items-center d-flex m-0">
+          <span>Account Cluster Risks</span
+          ><gf-premium-indicator
+            *ngIf="user?.subscription?.type === 'Basic'"
+            class="ml-1"
+          ></gf-premium-indicator>
+        </h4>
         <gf-rules
           [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
           [rules]="accountClusterRiskRules"
         ></gf-rules>
       </div>
       <div>
-        <h4 class="m-0">Fees</h4>
+        <h4 class="align-items-center d-flex m-0">
+          <span>Fees</span
+          ><gf-premium-indicator
+            *ngIf="user?.subscription?.type === 'Basic'"
+            class="ml-1"
+          ></gf-premium-indicator>
+        </h4>
         <gf-rules
           [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
           [rules]="feeRules"

apps/client/src/app/pages/portfolio/report/report-page.module.ts

@@ -1,13 +1,19 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RulesModule } from '@ghostfolio/client/components/rules/rules.module';
+import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 
 import { ReportPageRoutingModule } from './report-page-routing.module';
 import { ReportPageComponent } from './report-page.component';
 
 @NgModule({
   declarations: [ReportPageComponent],
-  imports: [CommonModule, ReportPageRoutingModule, RulesModule],
+  imports: [
+    CommonModule,
+    GfPremiumIndicatorModule,
+    ReportPageRoutingModule,
+    RulesModule
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class ReportPageModule {}

apps/client/src/app/pages/portfolio/transactions/import-transaction-dialog/import-transaction-dialog.component.ts

@@ -1,50 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Inject,
-  OnDestroy
-} from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { Subject } from 'rxjs';
-
-import { ImportTransactionDialogParams } from './interfaces/interfaces';
-
-@Component({
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  selector: 'gf-import-transaction-dialog',
-  styleUrls: ['./import-transaction-dialog.scss'],
-  templateUrl: 'import-transaction-dialog.html'
-})
-export class ImportTransactionDialog implements OnDestroy {
-  public details: any[] = [];
-
-  private unsubscribeSubject = new Subject<void>();
-
-  public constructor(
-    @Inject(MAT_DIALOG_DATA) public data: ImportTransactionDialogParams,
-    public dialogRef: MatDialogRef<ImportTransactionDialog>
-  ) {}
-
-  public ngOnInit() {
-    for (const message of this.data.messages) {
-      if (message.includes('activities.')) {
-        let [index] = message.split(' ');
-        index = index.replace('activities.', '');
-        [index] = index.split('.');
-
-        this.details.push(this.data.activities[index]);
-      } else {
-        this.details.push('');
-      }
-    }
-  }
-
-  public onCancel(): void {
-    this.dialogRef.close();
-  }
-
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
-}

apps/client/src/app/pages/portfolio/transactions/import-transaction-dialog/import-transaction-dialog.html

@@ -1,36 +0,0 @@
-<gf-dialog-header
-  mat-dialog-title
-  title="Import Activities Error"
-  [deviceType]="data.deviceType"
-  (closeButtonClicked)="onCancel()"
-></gf-dialog-header>
-
-<div class="flex-grow-1" mat-dialog-content>
-  <mat-accordion displayMode="flat">
-    <mat-expansion-panel
-      *ngFor="let message of data.messages; let i = index"
-      [disabled]="!details[i]"
-    >
-      <mat-expansion-panel-header class="pl-1">
-        <mat-panel-title>
-          <div class="d-flex">
-            <div class="align-items-center d-flex mr-2">
-              <ion-icon name="warning-outline"></ion-icon>
-            </div>
-            <div>{{ message }}</div>
-          </div>
-        </mat-panel-title>
-      </mat-expansion-panel-header>
-      <pre
-        *ngIf="details[i]"
-        class="m-0"
-      ><code>{{ details[i] | json }}</code></pre>
-    </mat-expansion-panel>
-  </mat-accordion>
-</div>
-
-<gf-dialog-footer
-  mat-dialog-actions
-  [deviceType]="data.deviceType"
-  (closeButtonClicked)="onCancel()"
-></gf-dialog-footer>

apps/client/src/app/pages/portfolio/transactions/import-transaction-dialog/interfaces/interfaces.ts

@@ -1,5 +0,0 @@
-export interface ImportTransactionDialogParams {
-  activities: any[];
-  deviceType: string;
-  messages: string[];
-}

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

@@ -1,30 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import { RouterModule } from '@angular/router';
-import { ImportTransactionsService } from '@ghostfolio/client/services/import-transactions.service';
-import { GfActivitiesTableModule } from '@ghostfolio/ui/activities-table/activities-table.module';
-
-import { GfCreateOrUpdateTransactionDialogModule } from './create-or-update-transaction-dialog/create-or-update-transaction-dialog.module';
-import { GfImportTransactionDialogModule } from './import-transaction-dialog/import-transaction-dialog.module';
-import { TransactionsPageRoutingModule } from './transactions-page-routing.module';
-import { TransactionsPageComponent } from './transactions-page.component';
-
-@NgModule({
-  declarations: [TransactionsPageComponent],
-  exports: [],
-  imports: [
-    CommonModule,
-    GfActivitiesTableModule,
-    GfCreateOrUpdateTransactionDialogModule,
-    GfImportTransactionDialogModule,
-    MatButtonModule,
-    MatSnackBarModule,
-    RouterModule,
-    TransactionsPageRoutingModule
-  ],
-  providers: [ImportTransactionsService],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class TransactionsPageModule {}

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

@@ -32,8 +32,6 @@
   }
 
   .intro-container {
-    .intro {
-      background-image: url('/assets/intro-dark.jpg') !important;
-    }
+    display: none;
   }
 }

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

@@ -35,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';
@@ -232,6 +238,19 @@ 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;
         })
       );
@@ -285,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;
         })
       );

apps/client/src/app/services/import-activities.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';
@@ -11,7 +11,7 @@ import { catchError } from 'rxjs/operators';
 @Injectable({
   providedIn: 'root'
 })
-export class ImportTransactionsService {
+export class ImportActivitiesService {
   private static ACCOUNT_KEYS = ['account', 'accountid'];
   private static CURRENCY_KEYS = ['ccy', 'currency'];
   private static DATA_SOURCE_KEYS = ['datasource'];
@@ -90,7 +90,7 @@ export class ImportTransactionsService {
   }) {
     item = this.lowercaseKeys(item);
 
-    for (const key of ImportTransactionsService.ACCOUNT_KEYS) {
+    for (const key of ImportActivitiesService.ACCOUNT_KEYS) {
       if (item[key]) {
         return userAccounts.find((account) => {
           return (
@@ -115,7 +115,7 @@ export class ImportTransactionsService {
   }) {
     item = this.lowercaseKeys(item);
 
-    for (const key of ImportTransactionsService.CURRENCY_KEYS) {
+    for (const key of ImportActivitiesService.CURRENCY_KEYS) {
       if (item[key]) {
         return item[key];
       }
@@ -130,7 +130,7 @@ export class ImportTransactionsService {
   private parseDataSource({ item }: { item: any }) {
     item = this.lowercaseKeys(item);
 
-    for (const key of ImportTransactionsService.DATA_SOURCE_KEYS) {
+    for (const key of ImportActivitiesService.DATA_SOURCE_KEYS) {
       if (item[key]) {
         return DataSource[item[key].toUpperCase()];
       }
@@ -151,15 +151,17 @@ export class ImportTransactionsService {
     item = this.lowercaseKeys(item);
     let date: string;
 
-    for (const key of ImportTransactionsService.DATE_KEYS) {
+    for (const key of ImportActivitiesService.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;
@@ -184,7 +186,7 @@ export class ImportTransactionsService {
   }) {
     item = this.lowercaseKeys(item);
 
-    for (const key of ImportTransactionsService.FEE_KEYS) {
+    for (const key of ImportActivitiesService.FEE_KEYS) {
       if (isFinite(item[key])) {
         return item[key];
       }
@@ -207,7 +209,7 @@ export class ImportTransactionsService {
   }) {
     item = this.lowercaseKeys(item);
 
-    for (const key of ImportTransactionsService.QUANTITY_KEYS) {
+    for (const key of ImportActivitiesService.QUANTITY_KEYS) {
       if (isFinite(item[key])) {
         return item[key];
       }
@@ -230,7 +232,7 @@ export class ImportTransactionsService {
   }) {
     item = this.lowercaseKeys(item);
 
-    for (const key of ImportTransactionsService.SYMBOL_KEYS) {
+    for (const key of ImportActivitiesService.SYMBOL_KEYS) {
       if (item[key]) {
         return item[key];
       }
@@ -253,7 +255,7 @@ export class ImportTransactionsService {
   }) {
     item = this.lowercaseKeys(item);
 
-    for (const key of ImportTransactionsService.TYPE_KEYS) {
+    for (const key of ImportActivitiesService.TYPE_KEYS) {
       if (item[key]) {
         switch (item[key].toLowerCase()) {
           case 'buy':
@@ -287,7 +289,7 @@ export class ImportTransactionsService {
   }) {
     item = this.lowercaseKeys(item);
 
-    for (const key of ImportTransactionsService.UNIT_PRICE_KEYS) {
+    for (const key of ImportActivitiesService.UNIT_PRICE_KEYS) {
       if (isFinite(item[key])) {
         return item[key];
       }

apps/client/src/assets/sitemap.xml

@@ -6,74 +6,74 @@
             http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
   <url>
     <loc>https://ghostfol.io</loc>
-    <lastmod>2022-10-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-10-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-10-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-10-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-10-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-10-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-10-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-10-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-10-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-10-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-01T00:00:00+00:00</lastmod>
+    <lastmod>2022-10-16T00:00:00+00:00</lastmod>
   </url>
   <url>
     <loc>https://ghostfol.io/en/demo</loc>
-    <lastmod>2022-10-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-10-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-10-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-10-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-10-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-10-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-10-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

apps/client/src/styles.scss

@@ -17,7 +17,7 @@ $mat-css-light-theme-selector: '.is-light-theme';
 }
 
 :root {
-  --dark-background: rgb(39, 39, 39);
+  --dark-background: rgb(25, 25, 25);
   --font-family-sans-serif: Roboto, 'Helvetica Neue', sans-serif;
   --light-background: rgb(255, 255, 255);
 }
@@ -90,6 +90,10 @@ body {
       }
     }
 
+    .mat-paginator {
+      background-color: rgba(var(--palette-foreground-base-dark), 0.02);
+    }
+
     .svgMap-tooltip {
       background: var(--dark-background);
 
@@ -102,6 +106,15 @@ body {
       .mat-select-placeholder {
         color: rgba(var(--light-primary-text));
       }
+
+      &.mat-select-disabled {
+        .mat-select-placeholder {
+          color: rgba(
+            var(--palette-foreground-disabled-text-dark),
+            var(--palette-foreground-disabled-text-dark-alpha)
+          );
+        }
+      }
     }
   }
 }
@@ -211,6 +224,14 @@ ngx-skeleton-loader {
   }
 }
 
+.mat-paginator {
+  background-color: rgba(var(--palette-foreground-base-light), 0.02);
+
+  .mat-paginator-page-size {
+    display: none;
+  }
+}
+
 .no-min-width {
   min-width: unset !important;
 }
@@ -239,4 +260,13 @@ ngx-skeleton-loader {
   .mat-select-placeholder {
     color: rgba(var(--dark-primary-text));
   }
+
+  &.mat-select-disabled {
+    .mat-select-placeholder {
+      color: rgba(
+        var(--palette-foreground-disabled-text),
+        var(--palette-foreground-disabled-text-alpha)
+      );
+    }
+  }
 }

apps/ui-e2e/project.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/ui-e2e/src",
+  "projectType": "application",
+  "targets": {
+    "e2e": {
+      "executor": "@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": {
+      "executor": "@nrwl/linter:eslint",
+      "options": {
+        "lintFilePatterns": ["apps/ui-e2e/**/*.{js,ts}"]
+      }
+    }
+  },
+  "tags": [],
+  "implicitDependencies": ["ui"]
+}

libs/common/project.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/common/src",
+  "projectType": "library",
+  "targets": {
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "options": {
+        "lintFilePatterns": ["libs/common/**/*.ts"]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/libs/common"],
+      "options": {
+        "jestConfig": "libs/common/jest.config.ts",
+        "passWithNoTests": true
+      }
+    }
+  },
+  "tags": []
+}

libs/common/src/lib/chart-helper.ts

@@ -1,21 +1,24 @@
 import { Chart, TooltipPosition } from 'chart.js';
 
 import { getBackgroundColor, getTextColor } from './helper';
+import { ColorScheme } from './types';
 
 export function getTooltipOptions({
+  colorScheme,
   currency = '',
   locale = '',
   unit = ''
 }: {
+  colorScheme?: ColorScheme;
   currency?: string;
   locale?: string;
   unit?: string;
 } = {}) {
   return {
-    backgroundColor: getBackgroundColor(),
-    bodyColor: `rgb(${getTextColor()})`,
+    backgroundColor: getBackgroundColor(colorScheme),
+    bodyColor: `rgb(${getTextColor(colorScheme)})`,
     borderWidth: 1,
-    borderColor: `rgba(${getTextColor()}, 0.1)`,
+    borderColor: `rgba(${getTextColor(colorScheme)}, 0.1)`,
     callbacks: {
       label: (context) => {
         let label = context.dataset.label || '';
@@ -39,12 +42,12 @@ export function getTooltipOptions({
     },
     caretSize: 0,
     cornerRadius: 2,
-    footerColor: `rgb(${getTextColor()})`,
+    footerColor: `rgb(${getTextColor(colorScheme)})`,
     itemSort: (a, b) => {
       // Reverse order
       return b.datasetIndex - a.datasetIndex;
     },
-    titleColor: `rgb(${getTextColor()})`,
+    titleColor: `rgb(${getTextColor(colorScheme)})`,
     usePointStyle: true
   };
 }
@@ -62,7 +65,10 @@ export function getTooltipPositionerMapTop(
   };
 }
 
-export function getVerticalHoverLinePlugin(chartCanvas) {
+export function getVerticalHoverLinePlugin(
+  chartCanvas,
+  colorScheme?: ColorScheme
+) {
   return {
     afterDatasetsDraw: (chart, x, options) => {
       const active = chart.getActiveElements();
@@ -71,7 +77,7 @@ export function getVerticalHoverLinePlugin(chartCanvas) {
         return;
       }
 
-      const color = options.color || `rgb(${getTextColor()})`;
+      const color = options.color || `rgb(${getTextColor(colorScheme)})`;
       const width = options.width || 1;
 
       const {

libs/common/src/lib/config.ts

@@ -40,6 +40,7 @@ export const DATA_GATHERING_QUEUE_PRIORITY_HIGH = 1;
 
 export const DEFAULT_DATE_FORMAT_MONTH_YEAR = 'MMM yyyy';
 export const DEFAULT_LANGUAGE_CODE = 'en';
+export const DEFAULT_PAGE_SIZE = 50;
 
 export const GATHER_ASSET_PROFILE_PROCESS = 'GATHER_ASSET_PROFILE';
 export const GATHER_ASSET_PROFILE_PROCESS_OPTIONS: JobOptions = {

libs/common/src/lib/helper.ts

@@ -5,6 +5,7 @@ import { de, es, it, nl } from 'date-fns/locale';
 
 import { ghostfolioScraperApiSymbolPrefix, locale } from './config';
 import { Benchmark } from './interfaces';
+import { ColorScheme } from './types';
 
 const NUMERIC_REGEXP = /[-]{0,1}[\d]*[.,]{0,1}[\d]+/g;
 
@@ -58,9 +59,10 @@ export function extractNumberFromString(aString: string): number {
   }
 }
 
-export function getBackgroundColor() {
+export function getBackgroundColor(aColorScheme: ColorScheme) {
   return getCssVariable(
-    window.matchMedia('(prefers-color-scheme: dark)').matches
+    aColorScheme === 'DARK' ||
+      window.matchMedia('(prefers-color-scheme: dark)').matches
       ? '--dark-background'
       : '--light-background'
   );
@@ -133,9 +135,10 @@ export function getNumberFormatGroup(aLocale?: string) {
   }).value;
 }
 
-export function getTextColor() {
+export function getTextColor(aColorScheme: ColorScheme) {
   const cssVariable = getCssVariable(
-    window.matchMedia('(prefers-color-scheme: dark)').matches
+    aColorScheme === 'DARK' ||
+      window.matchMedia('(prefers-color-scheme: dark)').matches
       ? '--light-primary-text'
       : '--dark-primary-text'
   );

libs/common/src/lib/interfaces/user-settings.interface.ts

@@ -1,9 +1,9 @@
-import { DateRange, ViewMode, Appearance } from '@ghostfolio/common/types';
+import { ColorScheme, DateRange, ViewMode } from '@ghostfolio/common/types';
 
 export interface UserSettings {
-  appearance?: Appearance;
   baseCurrency?: string;
   benchmark?: string;
+  colorScheme?: ColorScheme;
   dateRange?: DateRange;
   emergencyFund?: number;
   isExperimentalFeatures?: boolean;

libs/common/src/lib/interfaces/user-with-settings.ts

@@ -1,5 +1,6 @@
 import { SubscriptionType } from '@ghostfolio/common/types/subscription.type';
 import { Account, Settings, User } from '@prisma/client';
+
 import { UserSettings } from './user-settings.interface';
 
 export type UserWithSettings = User & {

libs/common/src/lib/types/appearance.type.ts

@@ -1 +0,0 @@
-export type Appearance = 'DARK' | 'LIGHT';

libs/common/src/lib/types/color-scheme.ts

@@ -0,0 +1 @@
+export type ColorScheme = 'DARK' | 'LIGHT';

libs/common/src/lib/types/index.ts

@@ -1,5 +1,6 @@
 import type { AccessWithGranteeUser } from './access-with-grantee-user.type';
 import { AccountWithValue } from './account-with-value.type';
+import type { ColorScheme } from './color-scheme';
 import type { DateRange } from './date-range.type';
 import type { Granularity } from './granularity.type';
 import { GroupBy } from './group-by.type';
@@ -9,12 +10,11 @@ import type { OrderWithAccount } from './order-with-account.type';
 import type { RequestWithUser } from './request-with-user.type';
 import { ToggleOption } from './toggle-option.type';
 import type { ViewMode } from './view-mode.type';
-import type { Appearance } from './appearance.type';
 
 export type {
-  Appearance,
   AccessWithGranteeUser,
   AccountWithValue,
+  ColorScheme,
   DateRange,
   Granularity,
   GroupBy,

libs/ui/project.json

@@ -0,0 +1,57 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "generators": {
+    "@schematics/angular:component": {
+      "style": "scss"
+    }
+  },
+  "sourceRoot": "libs/ui/src",
+  "prefix": "gf",
+  "targets": {
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/libs/ui"],
+      "options": {
+        "jestConfig": "libs/ui/jest.config.ts",
+        "passWithNoTests": true
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "options": {
+        "lintFilePatterns": ["libs/ui/src/**/*.ts", "libs/ui/src/**/*.html"]
+      }
+    },
+    "storybook": {
+      "executor": "@storybook/angular:start-storybook",
+      "options": {
+        "port": 4400,
+        "configDir": "libs/ui/.storybook",
+        "browserTarget": "ui:build-storybook",
+        "compodoc": false
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@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": []
+}

libs/ui/src/lib/activities-filter/activities-filter.component.ts

@@ -18,6 +18,7 @@ import {
 } from '@angular/material/autocomplete';
 import { MatChipInputEvent } from '@angular/material/chips';
 import { Filter, FilterGroup } from '@ghostfolio/common/interfaces';
+import { translate } from '@ghostfolio/ui/i18n';
 import { groupBy } from 'lodash';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -136,7 +137,7 @@ export class ActivitiesFilterComponent implements OnChanges, OnDestroy {
 
     for (const type of Object.keys(filterGroupsMap)) {
       filterGroups.push({
-        name: <Filter['type']>type,
+        name: <Filter['type']>translate(type),
         filters: filterGroupsMap[type]
       });
     }

libs/ui/src/lib/activities-table/activities-table.component.html

@@ -9,10 +9,10 @@
 <div class="activities">
   <table
     class="gf-table w-100"
+    mat-table
     matSort
     matSortActive="date"
     matSortDirection="desc"
-    mat-table
     [dataSource]="dataSource"
   >
     <ng-container matColumnDef="count">
@@ -27,7 +27,11 @@
         class="d-none d-lg-table-cell px-1 text-right"
         mat-cell
       >
-        {{ dataSource.data.length - i }}
+        {{
+          dataSource.data.length > pageSize
+            ? dataSource.data.length - pageSize * pageIndex - i
+            : dataSource.data.length - i
+        }}
       </td>
       <td
         *matFooterCellDef
@@ -51,7 +55,7 @@
       <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
         <ng-container i18n>Type</ng-container>
       </th>
-      <td *matCellDef="let element" mat-cell class="px-1">
+      <td *matCellDef="let element" class="px-1" mat-cell>
         <div
           class="d-inline-flex p-1 type-badge"
           [ngClass]="{
@@ -389,6 +393,10 @@
     <tr
       *matRowDef="let row; columns: displayedColumns"
       mat-row
+      [ngClass]="{
+        'cursor-pointer':
+          hasPermissionToOpenDetails && !row.isDraft && row.type !== 'ITEM'
+      }"
       (click)="
         hasPermissionToOpenDetails &&
           !row.isDraft &&
@@ -398,10 +406,6 @@
             symbol: row.SymbolProfile.symbol
           })
       "
-      [ngClass]="{
-        'cursor-pointer':
-          hasPermissionToOpenDetails && !row.isDraft && row.type !== 'ITEM'
-      }"
     ></tr>
     <tr
       *matFooterRowDef="displayedColumns"
@@ -411,6 +415,18 @@
   </table>
 </div>
 
+<mat-paginator
+  showFirstLastButtons="true"
+  [ngClass]="{
+    'd-none':
+      isLoading ||
+      dataSource.data.length === 0 ||
+      dataSource.data.length <= pageSize
+  }"
+  [pageSize]="pageSize"
+  (page)="onChangePage($event)"
+></mat-paginator>
+
 <ngx-skeleton-loader
   *ngIf="isLoading"
   animation="pulse"

libs/ui/src/lib/activities-table/activities-table.component.ts

@@ -8,10 +8,12 @@ import {
   Output,
   ViewChild
 } from '@angular/core';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
 import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface';
+import { DEFAULT_PAGE_SIZE } from '@ghostfolio/common/config';
 import { getDateFormatString } from '@ghostfolio/common/helper';
 import { Filter, UniqueAsset } from '@ghostfolio/common/interfaces';
 import { OrderWithAccount } from '@ghostfolio/common/types';
@@ -37,6 +39,7 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
   @Input() hasPermissionToImportActivities: boolean;
   @Input() hasPermissionToOpenDetails = true;
   @Input() locale: string;
+  @Input() pageSize = DEFAULT_PAGE_SIZE;
   @Input() showActions: boolean;
   @Input() showSymbolColumn = true;
 
@@ -47,6 +50,7 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
   @Output() exportDrafts = new EventEmitter<string[]>();
   @Output() import = new EventEmitter<void>();
 
+  @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
 
   public allFilters: Filter[];
@@ -59,6 +63,7 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
   public isAfter = isAfter;
   public isLoading = true;
   public isUUID = isUUID;
+  public pageIndex = 0;
   public placeholder = '';
   public routeQueryParams: Subscription;
   public searchKeywords: string[] = [];
@@ -119,12 +124,20 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
         }
         return contains;
       };
+      this.dataSource.paginator = this.paginator;
       this.dataSource.sort = this.sort;
 
       this.updateFilters();
     }
   }
 
+  public onChangePage(page: PageEvent) {
+    this.pageIndex = page.pageIndex;
+
+    this.totalFees = this.getTotalFees();
+    this.totalValue = this.getTotalValue();
+  }
+
   public onCloneActivity(aActivity: OrderWithAccount) {
     this.activityToClone.emit(aActivity);
   }
@@ -231,6 +244,21 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
     return Object.values(fieldValueMap);
   }
 
+  private getPaginatedData() {
+    if (this.dataSource.data.length > this.pageSize) {
+      const sortedData = this.dataSource.sortData(
+        this.dataSource.filteredData,
+        this.dataSource.sort
+      );
+
+      return sortedData.slice(
+        this.pageIndex * this.pageSize,
+        (this.pageIndex + 1) * this.pageSize
+      );
+    }
+    return this.dataSource.filteredData;
+  }
+
   private getSearchableFieldValues(activities: OrderWithAccount[]): Filter[] {
     const fieldValueMap: { [id: string]: Filter } = {};
 
@@ -243,8 +271,8 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
 
   private getTotalFees() {
     let totalFees = new Big(0);
-
-    for (const activity of this.dataSource.filteredData) {
+    const paginatedData = this.getPaginatedData();
+    for (const activity of paginatedData) {
       if (isNumber(activity.feeInBaseCurrency)) {
         totalFees = totalFees.plus(activity.feeInBaseCurrency);
       } else {
@@ -257,8 +285,8 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
 
   private getTotalValue() {
     let totalValue = new Big(0);
-
-    for (const activity of this.dataSource.filteredData) {
+    const paginatedData = this.getPaginatedData();
+    for (const activity of paginatedData) {
       if (isNumber(activity.valueInBaseCurrency)) {
         if (activity.type === 'BUY' || activity.type === 'ITEM') {
           totalValue = totalValue.plus(activity.valueInBaseCurrency);

libs/ui/src/lib/activities-table/activities-table.module.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
@@ -26,6 +27,7 @@ import { ActivitiesTableComponent } from './activities-table.component';
     GfValueModule,
     MatButtonModule,
     MatMenuModule,
+    MatPaginatorModule,
     MatSortModule,
     MatTableModule,
     NgxSkeletonLoaderModule,

libs/ui/src/lib/fire-calculator/fire-calculator.component.stories.ts

@@ -1,4 +1,5 @@
 import '@angular/localize/init';
+
 import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';

libs/ui/src/lib/fire-calculator/fire-calculator.component.ts

@@ -16,6 +16,7 @@ import { FormBuilder, FormControl } from '@angular/forms';
 import { getTooltipOptions } from '@ghostfolio/common/chart-helper';
 import { primaryColorRgb } from '@ghostfolio/common/config';
 import { transformTickToAbbreviation } from '@ghostfolio/common/helper';
+import { ColorScheme } from '@ghostfolio/common/types';
 import {
   BarController,
   BarElement,
@@ -40,6 +41,7 @@ import { FireCalculatorService } from './fire-calculator.service';
 export class FireCalculatorComponent
   implements AfterViewInit, OnChanges, OnDestroy
 {
+  @Input() colorScheme: ColorScheme;
   @Input() currency: string;
   @Input() deviceType: string;
   @Input() fireWealth: number;
@@ -182,7 +184,7 @@ export class FireCalculatorComponent
           options: {
             plugins: {
               tooltip: {
-                ...getTooltipOptions(),
+                ...getTooltipOptions({ colorScheme: this.colorScheme }),
                 mode: 'index',
                 callbacks: {
                   footer: (items) => {

libs/ui/src/lib/i18n.ts

@@ -0,0 +1,38 @@
+import '@angular/localize/init';
+
+const locales = {
+  ACCOUNT: $localize`Account`,
+  ASSET_CLASS: $localize`Asset Class`,
+  EMERGENCY_FUND: $localize`Emergency Fund`,
+  OTHER: $localize`Other`,
+  SYMBOL: $localize`Symbol`,
+  TAG: $localize`Tag`,
+
+  // enum AssetClass
+  CASH: $localize`Cash`,
+  COMMODITY: $localize`Commodity`,
+  EQUITY: $localize`Equity`,
+  FIXED_INCOME: $localize`Fixed Income`,
+  REAL_ESTATE: $localize`Real Estate`,
+
+  // enum AssetSubClass
+  BOND: $localize`Bond`,
+  CRYPTOCURRENCY: $localize`Cryptocurrency`,
+  ETF: $localize`ETF`,
+  MUTUALFUND: $localize`Mutual Fund`,
+  PRECIOUS_METAL: $localize`Precious Metal`,
+  PRIVATE_EQUITY: $localize`Private Equity`,
+  STOCK: $localize`Stock`,
+
+  // Continents
+  Africa: $localize`Africa`,
+  Asia: $localize`Asia`,
+  Europe: $localize`Europe`,
+  'North America': $localize`North America`,
+  Oceania: $localize`Oceania`,
+  'South America': $localize`South America`
+};
+
+export function translate(aKey: string) {
+  return locales[aKey] ?? aKey;
+}

libs/ui/src/lib/line-chart/line-chart.component.ts

@@ -26,6 +26,7 @@ import {
   getTextColor
 } from '@ghostfolio/common/helper';
 import { LineChartItem } from '@ghostfolio/common/interfaces';
+import { ColorScheme } from '@ghostfolio/common/types';
 import {
   Chart,
   Filler,
@@ -46,6 +47,7 @@ import {
 export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
   @Input() benchmarkDataItems: LineChartItem[] = [];
   @Input() benchmarkLabel = '';
+  @Input() colorScheme: ColorScheme;
   @Input() currency: string;
   @Input() historicalDataItems: LineChartItem[];
   @Input() isAnimated = false;
@@ -140,7 +142,7 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
         0,
         `rgba(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b}, 0.01)`
       );
-      gradient.addColorStop(1, getBackgroundColor());
+      gradient.addColorStop(1, getBackgroundColor(this.colorScheme));
     }
 
     const data = {
@@ -192,7 +194,7 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
             aspectRatio: 16 / 9,
             elements: {
               point: {
-                hoverBackgroundColor: getBackgroundColor(),
+                hoverBackgroundColor: getBackgroundColor(this.colorScheme),
                 hoverRadius: 2
               }
             },
@@ -205,15 +207,15 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
               },
               tooltip: this.getTooltipPluginConfiguration(),
               verticalHoverLine: {
-                color: `rgba(${getTextColor()}, 0.1)`
+                color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`
               }
             },
             scales: {
               x: {
                 display: this.showXAxis,
                 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
                 },
                 time: {
@@ -225,8 +227,8 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
               y: {
                 display: this.showYAxis,
                 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
                 },
                 max: this.yMax,
@@ -263,7 +265,9 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
             },
             spanGaps: true
           },
-          plugins: [getVerticalHoverLinePlugin(this.chartCanvas)],
+          plugins: [
+            getVerticalHoverLinePlugin(this.chartCanvas, this.colorScheme)
+          ],
           type: 'line'
         });
       }
@@ -300,6 +304,7 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
   private getTooltipPluginConfiguration() {
     return {
       ...getTooltipOptions({
+        colorScheme: this.colorScheme,
         currency: this.currency,
         locale: this.locale,
         unit: this.unit