Release 1.48.0 (#352)

* Nullify netPerformance

* Introduce precision

* Update changelog

.storybook/main.js

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

.storybook/tsconfig.json

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

CHANGELOG.md

@@ -5,6 +5,69 @@ 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.48.0 - 07.09.2021
+
+### Added
+
+- Added the attribute `precision` in the value component
+
+### Fixed
+
+- Hid the performance in the _Presenter View_
+
+## 1.47.1 - 06.09.2021
+
+### Fixed
+
+- Fixed the search functionality for cryptocurrency symbols
+
+## 1.46.0 - 05.09.2021
+
+### Added
+
+- Extended the statistics section on the about page by the _GitHub_ contributors count
+- Set up _Storybook_
+  - Added a story for the logo component
+  - Added a story for the no transactions info component
+  - Added a story for the trend indicator component
+  - Added a story for the value component
+
+### Changed
+
+- Switched from gross to net performance
+- Restructured the portfolio summary tab on the home page (fees and net performance)
+
+## 1.45.0 - 04.09.2021
+
+### Added
+
+- Added a link below the holdings to manage the transactions
+- Added the allocation chart by symbol
+
+### Changed
+
+- Restructured the allocations page
+- Upgraded `angular` from version `12.0.4` to `12.2.4`
+- Upgraded `@angular/cdk` and `@angular/material` from version `12.0.6` to `12.2.4`
+- Upgraded `Nx` from version `12.5.4` to `12.8.0`
+- Upgraded `prisma` from version `2.24.1` to `2.30.2`
+
+### Fixed
+
+- Fixed the value formatting for integers (transactions count)
+
+## 1.44.0 - 30.08.2021
+
+### Changed
+
+- Extended the sub classification of assets by cash
+- Upgraded `svgmap` from version `2.1.1` to `2.6.0`
+
+### Fixed
+
+- Filtered out positions without any quantity in the positions table
+- Improved the symbol lookup: allow saving with valid symbol in create or edit transaction dialog
+
 ## 1.43.0 - 24.08.2021
 
 ### Added

README.md

@@ -62,7 +62,7 @@ Ghostfolio is for you if you are...
 
 - ✅ Create, update and delete transactions
 - ✅ Multi account management
-- ✅ Portfolio performance (`Today`, `YTD`, `1Y`, `5Y`, `Max`)
+- ✅ Portfolio performance: Time-weighted rate of return (TWR) for `Today`, `YTD`, `1Y`, `5Y`, `Max`
 - ✅ Various charts
 - ✅ Static analysis to identify potential risks in your portfolio
 - ✅ Dark Mode
@@ -116,6 +116,10 @@ Please make sure you have completed the instructions from [_Setup_](#Setup).
 
 Run `yarn start:client`
 
+### Start _Storybook_
+
+Run `yarn start:storybook`
+
 ## Testing
 
 Run `yarn test`

angular.json

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

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

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

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

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

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

@@ -5,6 +5,7 @@ import Big from 'big.js';
 export interface PortfolioOrder {
   currency: Currency;
   date: string;
+  fee: Big;
   name: string;
   quantity: Big;
   symbol: string;

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

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

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

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

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

@@ -3,6 +3,7 @@ import Big from 'big.js';
 
 export interface TransactionPointSymbol {
   currency: Currency;
+  fee: Big;
   firstBuyDate: string;
   investment: Big;
   quantity: Big;

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

@@ -58,6 +58,7 @@ export class PortfolioCalculator {
           .plus(oldAccumulatedSymbol.quantity);
         currentTransactionPointItem = {
           currency: order.currency,
+          fee: order.fee.plus(oldAccumulatedSymbol.fee),
           firstBuyDate: oldAccumulatedSymbol.firstBuyDate,
           investment: newQuantity.eq(0)
             ? new Big(0)
@@ -72,6 +73,7 @@ export class PortfolioCalculator {
       } else {
         currentTransactionPointItem = {
           currency: order.currency,
+          fee: order.fee,
           firstBuyDate: order.date,
           investment: unitPrice.mul(order.quantity).mul(factor),
           quantity: order.quantity.mul(factor),
@@ -112,11 +114,13 @@ export class PortfolioCalculator {
   public async getCurrentPositions(start: Date): Promise<CurrentPositions> {
     if (!this.transactionPoints?.length) {
       return {
+        currentValue: new Big(0),
         hasErrors: false,
-        positions: [],
         grossPerformance: new Big(0),
         grossPerformancePercentage: new Big(0),
-        currentValue: new Big(0),
+        netPerformance: new Big(0),
+        netPerformancePercentage: new Big(0),
+        positions: [],
         totalInvestment: new Big(0)
       };
     }
@@ -181,7 +185,9 @@ export class PortfolioCalculator {
     const startString = format(start, DATE_FORMAT);
 
     const holdingPeriodReturns: { [symbol: string]: Big } = {};
+    const netHoldingPeriodReturns: { [symbol: string]: Big } = {};
     const grossPerformance: { [symbol: string]: Big } = {};
+    const netPerformance: { [symbol: string]: Big } = {};
     const todayString = format(today, DATE_FORMAT);
 
     if (firstIndex > 0) {
@@ -190,6 +196,7 @@ export class PortfolioCalculator {
     const invalidSymbols = [];
     const lastInvestments: { [symbol: string]: Big } = {};
     const lastQuantities: { [symbol: string]: Big } = {};
+    const lastFees: { [symbol: string]: Big } = {};
     const initialValues: { [symbol: string]: Big } = {};
 
     for (let i = firstIndex; i < this.transactionPoints.length; i++) {
@@ -202,10 +209,6 @@ export class PortfolioCalculator {
 
       const items = this.transactionPoints[i].items;
       for (const item of items) {
-        let oldHoldingPeriodReturn = holdingPeriodReturns[item.symbol];
-        if (!oldHoldingPeriodReturn) {
-          oldHoldingPeriodReturn = new Big(1);
-        }
         if (!marketSymbolMap[nextDate]?.[item.symbol]) {
           invalidSymbols.push(item.symbol);
           hasErrors = true;
@@ -224,6 +227,13 @@ export class PortfolioCalculator {
         const itemValue = marketSymbolMap[currentDate]?.[item.symbol];
         let initialValue = itemValue?.mul(lastQuantity);
         let investedValue = itemValue?.mul(item.quantity);
+        const isFirstOrderAndIsStartBeforeCurrentDate =
+          i === firstIndex &&
+          isBefore(parseDate(this.transactionPoints[i].date), start);
+        const lastFee: Big = lastFees[item.symbol] ?? new Big(0);
+        const fee = isFirstOrderAndIsStartBeforeCurrentDate
+          ? new Big(0)
+          : item.fee.minus(lastFee);
         if (!isAfter(parseDate(currentDate), parseDate(item.firstBuyDate))) {
           initialValue = item.investment;
           investedValue = item.investment;
@@ -247,18 +257,26 @@ export class PortfolioCalculator {
           );
 
           const holdingPeriodReturn = endValue.div(initialValue.plus(cashFlow));
-          holdingPeriodReturns[item.symbol] =
-            oldHoldingPeriodReturn.mul(holdingPeriodReturn);
-          let oldGrossPerformance = grossPerformance[item.symbol];
-          if (!oldGrossPerformance) {
-            oldGrossPerformance = new Big(0);
-          }
-          const currentPerformance = endValue.minus(investedValue);
-          grossPerformance[item.symbol] =
-            oldGrossPerformance.plus(currentPerformance);
+          holdingPeriodReturns[item.symbol] = (
+            holdingPeriodReturns[item.symbol] ?? new Big(1)
+          ).mul(holdingPeriodReturn);
+          grossPerformance[item.symbol] = (
+            grossPerformance[item.symbol] ?? new Big(0)
+          ).plus(endValue.minus(investedValue));
+
+          const netHoldingPeriodReturn = endValue.div(
+            initialValue.plus(cashFlow).plus(fee)
+          );
+          netHoldingPeriodReturns[item.symbol] = (
+            netHoldingPeriodReturns[item.symbol] ?? new Big(1)
+          ).mul(netHoldingPeriodReturn);
+          netPerformance[item.symbol] = (
+            netPerformance[item.symbol] ?? new Big(0)
+          ).plus(endValue.minus(investedValue).minus(fee));
         }
         lastInvestments[item.symbol] = item.investment;
         lastQuantities[item.symbol] = item.quantity;
+        lastFees[item.symbol] = item.fee;
       }
     }
 
@@ -282,15 +300,17 @@ export class PortfolioCalculator {
             : null,
         investment: item.investment,
         marketPrice: marketValue?.toNumber() ?? null,
+        netPerformance: isValid ? netPerformance[item.symbol] ?? null : null,
+        netPerformancePercentage:
+          isValid && netHoldingPeriodReturns[item.symbol]
+            ? netHoldingPeriodReturns[item.symbol].minus(1)
+            : null,
         quantity: item.quantity,
         symbol: item.symbol,
         transactionCount: item.transactionCount
       });
     }
-    const overall = this.calculateOverallGrossPerformance(
-      positions,
-      initialValues
-    );
+    const overall = this.calculateOverallPerformance(positions, initialValues);
 
     return {
       ...overall,
@@ -378,7 +398,7 @@ export class PortfolioCalculator {
     return flatten(timelinePeriods);
   }
 
-  private calculateOverallGrossPerformance(
+  private calculateOverallPerformance(
     positions: TimelinePosition[],
     initialValues: { [p: string]: Big }
   ) {
@@ -387,6 +407,8 @@ export class PortfolioCalculator {
     let totalInvestment = new Big(0);
     let grossPerformance = new Big(0);
     let grossPerformancePercentage = new Big(0);
+    let netPerformance = new Big(0);
+    let netPerformancePercentage = new Big(0);
     let completeInitialValue = new Big(0);
     for (const currentPosition of positions) {
       if (currentPosition.marketPrice) {
@@ -401,6 +423,7 @@ export class PortfolioCalculator {
         grossPerformance = grossPerformance.plus(
           currentPosition.grossPerformance
         );
+        netPerformance = netPerformance.plus(currentPosition.netPerformance);
       } else if (!currentPosition.quantity.eq(0)) {
         hasErrors = true;
       }
@@ -414,6 +437,9 @@ export class PortfolioCalculator {
         grossPerformancePercentage = grossPerformancePercentage.plus(
           currentPosition.grossPerformancePercentage.mul(currentInitialValue)
         );
+        netPerformancePercentage = netPerformancePercentage.plus(
+          currentPosition.netPerformancePercentage.mul(currentInitialValue)
+        );
       } else if (!currentPosition.quantity.eq(0)) {
         console.error(
           `Initial value is missing for symbol ${currentPosition.symbol}`
@@ -425,6 +451,8 @@ export class PortfolioCalculator {
     if (!completeInitialValue.eq(0)) {
       grossPerformancePercentage =
         grossPerformancePercentage.div(completeInitialValue);
+      netPerformancePercentage =
+        netPerformancePercentage.div(completeInitialValue);
     }
 
     return {
@@ -432,6 +460,8 @@ export class PortfolioCalculator {
       grossPerformance,
       grossPerformancePercentage,
       hasErrors,
+      netPerformance,
+      netPerformancePercentage,
       totalInvestment
     };
   }
@@ -442,6 +472,7 @@ export class PortfolioCalculator {
     endDate: Date
   ): Promise<TimelinePeriod[]> {
     let investment: Big = new Big(0);
+    let fees: Big = new Big(0);
 
     const marketSymbolMap: {
       [date: string]: { [symbol: string]: Big };
@@ -454,6 +485,7 @@ export class PortfolioCalculator {
         currencies[item.symbol] = item.currency;
         symbols.push(item.symbol);
         investment = investment.add(item.investment);
+        fees = fees.add(item.fee);
       }
 
       let marketSymbols: GetValueObject[] = [];
@@ -490,7 +522,7 @@ export class PortfolioCalculator {
       }
     }
 
-    const results = [];
+    const results: TimelinePeriod[] = [];
     for (
       let currentDate = startDate;
       isBefore(currentDate, endDate);
@@ -513,11 +545,13 @@ export class PortfolioCalculator {
         }
       }
       if (!invalid) {
+        const grossPerformance = value.minus(investment);
         const result = {
-          date: currentDateAsString,
-          grossPerformance: value.minus(investment),
+          grossPerformance,
           investment,
-          value
+          value,
+          date: currentDateAsString,
+          netPerformance: grossPerformance.minus(fees)
         };
         results.push(result);
       }

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

@@ -276,6 +276,7 @@ export class PortfolioController {
         position = nullifyValuesInObject(position, [
           'grossPerformance',
           'investment',
+          'netPerformance',
           'quantity'
         ]);
       }

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

@@ -26,7 +26,6 @@ import { DATE_FORMAT, parseDate } from '@ghostfolio/common/helper';
 import {
   PortfolioDetails,
   PortfolioPerformance,
-  PortfolioPosition,
   PortfolioReport,
   PortfolioSummary,
   Position,
@@ -148,7 +147,7 @@ export class PortfolioService {
       .map((timelineItem) => ({
         date: timelineItem.date,
         marketPrice: timelineItem.value,
-        value: timelineItem.grossPerformance.toNumber()
+        value: timelineItem.netPerformance.toNumber()
       }));
   }
 
@@ -211,6 +210,11 @@ export class PortfolioService {
     }
 
     for (const item of currentPositions.positions) {
+      if (item.quantity.lte(0)) {
+        // Ignore positions without any quantity
+        continue;
+      }
+
       const value = item.quantity.mul(item.marketPrice);
       const symbolProfile = symbolProfileMap[item.symbol];
       const dataProviderResponse = dataProviderResponses[item.symbol];
@@ -229,6 +233,8 @@ export class PortfolioService {
         marketPrice: item.marketPrice,
         marketState: dataProviderResponse.marketState,
         name: symbolProfile.name,
+        netPerformance: item.netPerformance?.toNumber() ?? 0,
+        netPerformancePercent: item.netPerformancePercentage?.toNumber() ?? 0,
         quantity: item.quantity.toNumber(),
         sectors: symbolProfile.sectors,
         symbol: item.symbol,
@@ -276,6 +282,8 @@ export class PortfolioService {
         marketPrice: undefined,
         maxPrice: undefined,
         minPrice: undefined,
+        netPerformance: undefined,
+        netPerformancePercent: undefined,
         quantity: undefined,
         symbol: aSymbol,
         transactionCount: undefined
@@ -287,6 +295,7 @@ export class PortfolioService {
     const portfolioOrders: PortfolioOrder[] = orders.map((order) => ({
       currency: order.currency,
       date: format(order.date, DATE_FORMAT),
+      fee: new Big(order.fee),
       name: order.SymbolProfile?.name,
       quantity: new Big(order.quantity),
       symbol: order.symbol,
@@ -320,7 +329,7 @@ export class PortfolioService {
         transactionCount
       } = position;
 
-      // Convert investment and gross performance to currency of user
+      // Convert investment, gross and net performance to currency of user
       const userCurrency = this.request.user.Settings.currency;
       const investment = this.exchangeRateDataService.toCurrency(
         position.investment.toNumber(),
@@ -332,6 +341,11 @@ export class PortfolioService {
         currency,
         userCurrency
       );
+      const netPerformance = this.exchangeRateDataService.toCurrency(
+        position.netPerformance.toNumber(),
+        currency,
+        userCurrency
+      );
 
       const historicalData = await this.dataProviderService.getHistorical(
         [aSymbol],
@@ -393,10 +407,12 @@ export class PortfolioService {
         marketPrice,
         maxPrice,
         minPrice,
+        netPerformance,
         transactionCount,
         averagePrice: averagePrice.toNumber(),
         grossPerformancePercent: position.grossPerformancePercentage.toNumber(),
         historicalData: historicalDataArray,
+        netPerformancePercent: position.netPerformancePercentage.toNumber(),
         quantity: quantity.toNumber(),
         symbol: aSymbol
       };
@@ -446,6 +462,8 @@ export class PortfolioService {
         grossPerformancePercent: undefined,
         historicalData: historicalDataArray,
         investment: 0,
+        netPerformance: undefined,
+        netPerformancePercent: undefined,
         quantity: 0,
         symbol: aSymbol,
         transactionCount: undefined
@@ -509,6 +527,9 @@ export class PortfolioService {
           investment: new Big(position.investment).toNumber(),
           marketState: dataProviderResponses[position.symbol].marketState,
           name: symbolProfileMap[position.symbol].name,
+          netPerformance: position.netPerformance?.toNumber() ?? null,
+          netPerformancePercentage:
+            position.netPerformancePercentage?.toNumber() ?? null,
           quantity: new Big(position.quantity).toNumber()
         };
       })
@@ -534,6 +555,8 @@ export class PortfolioService {
         performance: {
           currentGrossPerformance: 0,
           currentGrossPerformancePercent: 0,
+          currentNetPerformance: 0,
+          currentNetPerformancePercent: 0,
           currentValue: 0
         }
       };
@@ -553,11 +576,17 @@ export class PortfolioService {
       currentPositions.grossPerformance.toNumber();
     const currentGrossPerformancePercent =
       currentPositions.grossPerformancePercentage.toNumber();
+    const currentNetPerformance = currentPositions.netPerformance.toNumber();
+    const currentNetPerformancePercent =
+      currentPositions.netPerformancePercentage.toNumber();
+
     return {
       hasErrors: currentPositions.hasErrors || hasErrors,
       performance: {
         currentGrossPerformance,
         currentGrossPerformancePercent,
+        currentNetPerformance,
+        currentNetPerformancePercent,
         currentValue: currentValue
       }
     };
@@ -719,6 +748,7 @@ export class PortfolioService {
       allocationCurrent: cashValue.div(value).toNumber(),
       allocationInvestment: cashValue.div(investment).toNumber(),
       assetClass: AssetClass.CASH,
+      assetSubClass: AssetClass.CASH,
       countries: [],
       currency: Currency.CHF,
       grossPerformance: 0,
@@ -727,6 +757,8 @@ export class PortfolioService {
       marketPrice: 0,
       marketState: MarketState.open,
       name: 'Cash',
+      netPerformance: 0,
+      netPerformancePercent: 0,
       quantity: 0,
       sectors: [],
       symbol: ghostfolioCashSymbol,
@@ -773,6 +805,13 @@ export class PortfolioService {
     const portfolioOrders: PortfolioOrder[] = orders.map((order) => ({
       currency: order.currency,
       date: format(order.date, DATE_FORMAT),
+      fee: new Big(
+        this.exchangeRateDataService.toCurrency(
+          order.fee,
+          order.currency,
+          userCurrency
+        )
+      ),
       name: order.SymbolProfile?.name,
       quantity: new Big(order.quantity),
       symbol: order.symbol,

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

@@ -11,6 +11,7 @@ import {
 import { REQUEST } from '@nestjs/core';
 import { AuthGuard } from '@nestjs/passport';
 import { StatusCodes, getReasonPhrase } from 'http-status-codes';
+import { isEmpty } from 'lodash';
 
 import { LookupItem } from './interfaces/lookup-item.interface';
 import { SymbolItem } from './interfaces/symbol-item.interface';
@@ -48,6 +49,15 @@ export class SymbolController {
   @Get(':symbol')
   @UseGuards(AuthGuard('jwt'))
   public async getPosition(@Param('symbol') symbol): Promise<SymbolItem> {
-    return this.symbolService.get(symbol);
+    const result = await this.symbolService.get(symbol);
+
+    if (!result || isEmpty(result)) {
+      throw new HttpException(
+        getReasonPhrase(StatusCodes.NOT_FOUND),
+        StatusCodes.NOT_FOUND
+      );
+    }
+
+    return result;
   }
 }

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

@@ -15,13 +15,17 @@ export class SymbolService {
 
   public async get(aSymbol: string): Promise<SymbolItem> {
     const response = await this.dataProviderService.get([aSymbol]);
-    const { currency, dataSource, marketPrice } = response[aSymbol];
+    const { currency, dataSource, marketPrice } = response[aSymbol] ?? {};
 
-    return {
-      dataSource,
-      marketPrice,
-      currency: <Currency>(<unknown>currency)
-    };
+    if (currency && dataSource && marketPrice) {
+      return {
+        dataSource,
+        marketPrice,
+        currency: <Currency>(<unknown>currency)
+      };
+    }
+
+    return undefined;
   }
 
   public async lookup(aQuery: string): Promise<{ items: LookupItem[] }> {

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

@@ -19,7 +19,10 @@ import { format } from 'date-fns';
 import { AlphaVantageService } from './alpha-vantage/alpha-vantage.service';
 import { GhostfolioScraperApiService } from './ghostfolio-scraper-api/ghostfolio-scraper-api.service';
 import { RakutenRapidApiService } from './rakuten-rapid-api/rakuten-rapid-api.service';
-import { YahooFinanceService } from './yahoo-finance/yahoo-finance.service';
+import {
+  convertToYahooFinanceSymbol,
+  YahooFinanceService
+} from './yahoo-finance/yahoo-finance.service';
 
 @Injectable()
 export class DataProviderService {
@@ -47,12 +50,16 @@ export class DataProviderService {
       }
     }
 
-    const yahooFinanceSymbols = aSymbols.filter((symbol) => {
-      return (
-        !isGhostfolioScraperApiSymbol(symbol) &&
-        !isRakutenRapidApiSymbol(symbol)
-      );
-    });
+    const yahooFinanceSymbols = aSymbols
+      .filter((symbol) => {
+        return (
+          !isGhostfolioScraperApiSymbol(symbol) &&
+          !isRakutenRapidApiSymbol(symbol)
+        );
+      })
+      .map((symbol) => {
+        return convertToYahooFinanceSymbol(symbol);
+      });
 
     const response = await this.yahooFinanceService.get(yahooFinanceSymbols);
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -167,7 +167,8 @@ export class PortfolioProportionChartComponent
         // Reuse color
         item.color = this.colorMap[symbol];
       } else {
-        const color = this.getColorPalette()[index];
+        const color =
+          this.getColorPalette()[index % this.getColorPalette().length];
 
         // Store color for reuse
         this.colorMap[symbol] = color;

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

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

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

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

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

@@ -34,6 +34,8 @@ export class PositionDetailDialog implements OnDestroy {
   public marketPrice: number;
   public maxPrice: number;
   public minPrice: number;
+  public netPerformance: number;
+  public netPerformancePercent: number;
   public quantity: number;
   public transactionCount: number;
 
@@ -60,6 +62,8 @@ export class PositionDetailDialog implements OnDestroy {
           marketPrice,
           maxPrice,
           minPrice,
+          netPerformance,
+          netPerformancePercent,
           quantity,
           transactionCount
         }) => {
@@ -86,6 +90,8 @@ export class PositionDetailDialog implements OnDestroy {
           this.marketPrice = marketPrice;
           this.maxPrice = maxPrice;
           this.minPrice = minPrice;
+          this.netPerformance = netPerformance;
+          this.netPerformancePercent = netPerformancePercent;
           this.quantity = quantity;
           this.transactionCount = transactionCount;
 

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

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

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

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

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

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

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

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

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

@@ -30,7 +30,7 @@
           [colorizeSign]="true"
           [isPercent]="true"
           [locale]="locale"
-          [value]="isLoading ? undefined : element.grossPerformancePercent"
+          [value]="isLoading ? undefined : element.netPerformancePercent"
         ></gf-value>
       </div>
     </td>

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

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

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

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

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

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

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

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

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

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

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

@@ -94,27 +94,37 @@
       <mat-card>
         <mat-card-content>
           <div class="row">
-            <div class="col-xs-12 col-md-4 my-2">
+            <div class="col-xs-12 col-md-3 my-2">
               <h3 class="mb-0" [hidden]="!statistics?.activeUsers1d">
                 {{ statistics?.activeUsers1d ?? '-' }}
               </h3>
               <div class="h6 mb-0">
-                Active Users <small class="text-muted">(Last 24 hours)</small>
+                <span i18n>Active Users</span>&nbsp;<small class="text-muted"
+                  >(Last 24 hours)</small
+                >
               </div>
             </div>
-            <div class="col-xs-12 col-md-4 my-2">
+            <div class="col-xs-12 col-md-3 my-2">
               <h3 class="mb-0" [hidden]="!statistics?.activeUsers30d">
                 {{ statistics?.activeUsers30d ?? '-' }}
               </h3>
               <div class="h6 mb-0">
-                Active Users <small class="text-muted">(Last 30 days)</small>
+                <span i18n>Active Users</span>&nbsp;<small class="text-muted"
+                  >(Last 30 days)</small
+                >
               </div>
             </div>
-            <div class="col-xs-12 col-md-4 my-2">
+            <div class="col-xs-12 col-md-3 my-2">
+              <h3 class="mb-0" [hidden]="!statistics?.gitHubContributors">
+                {{ statistics?.gitHubContributors ?? '-' }}
+              </h3>
+              <div class="h6 mb-0" i18n>Contributors on GitHub</div>
+            </div>
+            <div class="col-xs-12 col-md-3 my-2">
               <h3 class="mb-0" [hidden]="!statistics?.gitHubStargazers">
                 {{ statistics?.gitHubStargazers ?? '-' }}
               </h3>
-              <div class="h6 mb-0">Stars on GitHub</div>
+              <div class="h6 mb-0" i18n>Stars on GitHub</div>
             </div>
           </div>
         </mat-card-content>

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

@@ -58,6 +58,7 @@ export class HomePageComponent implements OnDestroy, OnInit {
   public fearAndGreedIndex: number;
   public hasImpersonationId: boolean;
   public hasPermissionToAccessFearAndGreedIndex: boolean;
+  public hasPermissionToCreateOrder: boolean;
   public hasPositions: boolean;
   public historicalDataItems: LineChartItem[];
   public isLoadingPerformance = true;
@@ -119,6 +120,11 @@ export class HomePageComponent implements OnDestroy, OnInit {
               });
           }
 
+          this.hasPermissionToCreateOrder = hasPermission(
+            this.user.permissions,
+            permissions.createOrder
+          );
+
           this.changeDetectorRef.markForCheck();
         }
       });
@@ -135,6 +141,8 @@ export class HomePageComponent implements OnDestroy, OnInit {
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((aId) => {
         this.hasImpersonationId = !!aId;
+
+        this.changeDetectorRef.markForCheck();
       });
 
     this.dateRange =

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -11,8 +11,9 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { LookupItem } from '@ghostfolio/api/app/symbol/interfaces/lookup-item.interface';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { Currency } from '@prisma/client';
-import { Observable, Subject } from 'rxjs';
+import { EMPTY, Observable, Subject } from 'rxjs';
 import {
+  catchError,
   debounceTime,
   distinctUntilChanged,
   startWith,
@@ -49,7 +50,7 @@ export class CreateOrUpdateTransactionDialog implements OnDestroy {
     @Inject(MAT_DIALOG_DATA) public data: CreateOrUpdateTransactionDialogParams
   ) {}
 
-  ngOnInit() {
+  public ngOnInit() {
     const { currencies, platforms } = this.dataService.fetchInfo();
 
     this.currencies = currencies;
@@ -84,17 +85,45 @@ export class CreateOrUpdateTransactionDialog implements OnDestroy {
     this.data.transaction.unitPrice = this.currentMarketPrice;
   }
 
+  public onBlurSymbol() {
+    const symbol = this.searchSymbolCtrl.value;
+    this.updateSymbol(symbol);
+  }
+
   public onCancel(): void {
     this.dialogRef.close();
   }
 
   public onUpdateSymbol(event: MatAutocompleteSelectedEvent) {
+    this.updateSymbol(event.option.value);
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
+  private updateSymbol(symbol: string) {
     this.isLoading = true;
-    this.data.transaction.symbol = event.option.value;
+
+    this.data.transaction.symbol = symbol;
 
     this.dataService
       .fetchSymbolItem(this.data.transaction.symbol)
-      .pipe(takeUntil(this.unsubscribeSubject))
+      .pipe(
+        catchError(() => {
+          this.data.transaction.currency = null;
+          this.data.transaction.dataSource = null;
+          this.data.transaction.unitPrice = null;
+
+          this.isLoading = false;
+
+          this.changeDetectorRef.markForCheck();
+
+          return EMPTY;
+        }),
+        takeUntil(this.unsubscribeSubject)
+      )
       .subscribe(({ currency, dataSource, marketPrice }) => {
         this.data.transaction.currency = currency;
         this.data.transaction.dataSource = dataSource;
@@ -105,17 +134,4 @@ export class CreateOrUpdateTransactionDialog implements OnDestroy {
         this.changeDetectorRef.markForCheck();
       });
   }
-
-  public onUpdateSymbolByTyping(value: string) {
-    this.data.transaction.currency = null;
-    this.data.transaction.dataSource = null;
-    this.data.transaction.unitPrice = null;
-
-    this.data.transaction.symbol = value;
-  }
-
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
 }

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

@@ -29,7 +29,7 @@
           required
           [formControl]="searchSymbolCtrl"
           [matAutocomplete]="auto"
-          (change)="onUpdateSymbolByTyping($event.target.value)"
+          (blur)="onBlurSymbol()"
         />
         <mat-autocomplete
           #auto="matAutocomplete"

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

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

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

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

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

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

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

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

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

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

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

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

apps/ui-e2e/.eslintrc.json

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

apps/ui-e2e/cypress.json

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

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

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

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

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

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

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

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

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

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

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

apps/ui-e2e/tsconfig.json

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

jest.config.js

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

libs/common/src/lib/config.ts

@@ -13,7 +13,7 @@ export const currencyPairs: Partial<
     currency1: Currency;
     currency2: Currency;
   }
->[] = Object.keys(Currency)
+>[] = (Object.keys(Currency) as Array<keyof typeof Currency>)
   .filter((currency) => {
     return currency !== Currency.USD;
   })

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

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

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

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

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

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

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

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

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

@@ -9,6 +9,8 @@ export interface TimelinePosition {
   grossPerformancePercentage: Big;
   investment: Big;
   marketPrice: number;
+  netPerformance: Big;
+  netPerformancePercentage: Big;
   quantity: Big;
   symbol: string;
   transactionCount: number;

libs/ui/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nrwl/nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "gf",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "gf",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

libs/ui/.storybook/main.js

@@ -0,0 +1,24 @@
+const rootMain = require('../../../.storybook/main');
+
+module.exports = {
+  ...rootMain,
+
+  core: { ...rootMain.core, builder: 'webpack5' },
+
+  stories: [
+    ...rootMain.stories,
+    '../src/lib/**/*.stories.mdx',
+    '../src/lib/**/*.stories.@(js|jsx|ts|tsx)'
+  ],
+  addons: [...rootMain.addons],
+  webpackFinal: async (config, { configType }) => {
+    // apply any global webpack configs that might have been specified in .storybook/main.js
+    if (rootMain.webpackFinal) {
+      config = await rootMain.webpackFinal(config, { configType });
+    }
+
+    // add your own webpack tweaks if needed
+
+    return config;
+  }
+};

libs/ui/.storybook/preview-head.html

@@ -0,0 +1,8 @@
+<script
+  type="module"
+  src="https://unpkg.com/ionicons@5.5.1/dist/ionicons/ionicons.esm.js"
+></script>
+<script
+  nomodule
+  src="https://unpkg.com/ionicons@5.5.1/dist/ionicons/ionicons.js"
+></script>

libs/ui/.storybook/preview.js

@@ -0,0 +1,3 @@
+import '@angular/localize/init';
+
+import '!style-loader!css-loader!sass-loader!../../../apps/client/src/styles.scss';

libs/ui/.storybook/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "emitDecoratorMetadata": true
+  },
+
+  "exclude": ["../**/*.spec.ts"],
+  "include": ["../src/**/*", "*.js"]
+}

libs/ui/README.md

@@ -0,0 +1,7 @@
+# ui
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test ui` to execute the unit tests.

libs/ui/jest.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  displayName: 'ui',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+      stringifyContentPathRegex: '\\.(html|svg)$'
+    }
+  },
+  coverageDirectory: '../../coverage/libs/ui',
+  transform: {
+    '^.+\\.(ts|js|html)$': 'jest-preset-angular'
+  },
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment'
+  ]
+};

libs/ui/src/lib/logo/index.ts

@@ -0,0 +1 @@
+export * from './logo.module';

libs/ui/src/lib/logo/logo.component.stories.ts

@@ -0,0 +1,30 @@
+import { Meta, Story, moduleMetadata } from '@storybook/angular';
+
+import { LogoComponent } from './logo.component';
+
+export default {
+  title: 'Logo',
+  component: LogoComponent,
+  decorators: [
+    moduleMetadata({
+      imports: []
+    })
+  ]
+} as Meta<LogoComponent>;
+
+const Template: Story<LogoComponent> = (args: LogoComponent) => ({
+  props: args
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Large = Template.bind({});
+Large.args = {
+  size: 'large'
+};
+
+export const NoName = Template.bind({});
+NoName.args = {
+  hideName: true
+};

libs/ui/src/lib/logo/logo.component.ts

@@ -13,13 +13,12 @@ import {
   styleUrls: ['./logo.component.scss']
 })
 export class LogoComponent implements OnInit {
-  @HostBinding('class') @Input() size: 'large' | 'medium';
-  @Input() hideName: boolean;
+  @HostBinding('class') @Input() size: 'large' | 'medium' = 'medium';
+  @Input() hideName = false;
 
   public constructor() {}
 
   public ngOnInit() {
     this.hideName = this.hideName ?? false;
-    this.size = this.size ?? 'medium';
   }
 }

libs/ui/src/lib/no-transactions-info/index.ts

@@ -0,0 +1 @@
+export * from './no-transactions-info.module';

libs/ui/src/lib/no-transactions-info/no-transactions-info.component.stories.ts

@@ -0,0 +1,23 @@
+import { GfLogoModule } from '@ghostfolio/ui/logo';
+import { Meta, Story, moduleMetadata } from '@storybook/angular';
+
+import { NoTransactionsInfoComponent } from './no-transactions-info.component';
+
+export default {
+  title: 'No Transactions Info',
+  component: NoTransactionsInfoComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [GfLogoModule]
+    })
+  ]
+} as Meta<NoTransactionsInfoComponent>;
+
+const Template: Story<NoTransactionsInfoComponent> = (
+  args: NoTransactionsInfoComponent
+) => ({
+  props: args
+});
+
+export const Default = Template.bind({});
+Default.args = {};

libs/ui/src/lib/no-transactions-info/no-transactions-info.module.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
-import { GfLogoModule } from '@ghostfolio/client/components/logo/logo.module';
+import { GfLogoModule } from '@ghostfolio/ui/logo';
 
 import { NoTransactionsInfoComponent } from './no-transactions-info.component';
 

libs/ui/src/lib/trend-indicator/index.ts

@@ -0,0 +1 @@
+export * from './trend-indicator.module';

libs/ui/src/lib/trend-indicator/trend-indicator.component.stories.ts

@@ -0,0 +1,50 @@
+import { Meta, Story, moduleMetadata } from '@storybook/angular';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+
+import { TrendIndicatorComponent } from './trend-indicator.component';
+
+export default {
+  title: 'Trend Indicator',
+  component: TrendIndicatorComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [NgxSkeletonLoaderModule]
+    })
+  ]
+} as Meta<TrendIndicatorComponent>;
+
+const Template: Story<TrendIndicatorComponent> = (
+  args: TrendIndicatorComponent
+) => ({
+  props: args
+});
+
+export const Loading = Template.bind({});
+Loading.args = {
+  isLoading: true
+};
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Delayed = Template.bind({});
+Delayed.args = {
+  marketState: 'delayed',
+  range: '1d'
+};
+
+export const Down = Template.bind({});
+Down.args = {
+  value: -1
+};
+
+export const Up = Template.bind({});
+Up.args = {
+  value: 1
+};
+
+export const MarketClosed = Template.bind({});
+MarketClosed.args = {
+  marketState: 'closed',
+  range: '1d'
+};

libs/ui/src/lib/trend-indicator/trend-indicator.component.ts

@@ -1,10 +1,6 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  Input,
-  OnInit
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { MarketState } from '@ghostfolio/api/services/interfaces/interfaces';
+import { DateRange } from '@ghostfolio/common/types';
 
 @Component({
   selector: 'gf-trend-indicator',
@@ -12,13 +8,11 @@ import { MarketState } from '@ghostfolio/api/services/interfaces/interfaces';
   templateUrl: './trend-indicator.component.html',
   styleUrls: ['./trend-indicator.component.scss']
 })
-export class TrendIndicatorComponent implements OnInit {
-  @Input() isLoading: boolean;
-  @Input() marketState: MarketState;
-  @Input() range: string;
-  @Input() value: number;
+export class TrendIndicatorComponent {
+  @Input() isLoading = false;
+  @Input() marketState: MarketState = 'open';
+  @Input() range: DateRange = 'max';
+  @Input() value = 0;
 
   public constructor() {}
-
-  public ngOnInit() {}
 }

libs/ui/src/lib/value/index.ts

@@ -0,0 +1 @@
+export * from './value.module';

libs/ui/src/lib/value/value.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ValueComponent } from './value.component';
+
+describe('ValueComponent', () => {
+  let component: ValueComponent;
+  let fixture: ComponentFixture<ValueComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ValueComponent]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ValueComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

libs/ui/src/lib/value/value.component.stories.ts

@@ -0,0 +1,44 @@
+import { Meta, Story, moduleMetadata } from '@storybook/angular';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+
+import { ValueComponent } from './value.component';
+
+export default {
+  title: 'Value',
+  component: ValueComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [NgxSkeletonLoaderModule]
+    })
+  ]
+} as Meta<ValueComponent>;
+
+const Template: Story<ValueComponent> = (args: ValueComponent) => ({
+  props: args
+});
+
+export const Loading = Template.bind({});
+Loading.args = {
+  value: undefined
+};
+
+export const Currency = Template.bind({});
+Currency.args = {
+  currency: 'USD',
+  locale: 'en-US',
+  value: 7
+};
+
+export const Label = Template.bind({});
+Label.args = {
+  label: 'Label',
+  locale: 'en-US',
+  value: 7.25
+};
+
+export const Precision = Template.bind({});
+Precision.args = {
+  locale: 'en-US',
+  precision: 3,
+  value: 7.2534802394809285309
+};