Release/1.141.1 (#863)

* Setup tagging system

* Update changelog

.github/FUNDING.yml

@@ -0,0 +1 @@
+custom: ['https://www.buymeacoffee.com/ghostfolio']

CHANGELOG.md

@@ -5,6 +5,138 @@ 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.141.1 - 24.04.2022
+
+### Added
+
+- Added the database migration
+
+### Todo
+
+- Apply data migration (`yarn database:migrate`)
+
+## 1.141.0 - 24.04.2022
+
+### Added
+
+- Added a tagging system for activities
+
+### Changed
+
+- Extracted the activities table filter to a dedicated component
+- Changed the url of the _Get Started_ link to `https://ghostfol.io` on the public page
+- Simplified `@@id` using multiple fields with `@id` in the database schema of (`Access`, `Order`, `Subscription`)
+- Upgraded `prisma` from version `3.11.1` to `3.12.0`
+
+### Todo
+
+- Apply data migration (`yarn database:migrate`)
+
+## 1.140.2 - 22.04.2022
+
+### Added
+
+- Added support for sub-labels in the value component
+- Added a symbol profile overrides model for manual adjustments
+
+### Changed
+
+- Reused the value component in the _Ghostfolio in Numbers_ section of the about page
+- Persisted the savings rate in the _FIRE_ calculator
+- Upgraded `yahoo-finance2` from version `2.3.0` to `2.3.1`
+
+### Fixed
+
+- Fixed the calculation of the total value for sell and dividend activities in the create or edit transaction dialog
+
+### Todo
+
+- Apply data migration (`yarn database:migrate`)
+
+## 1.139.0 - 18.04.2022
+
+### Added
+
+- Added the total amount to the tooltip in the chart of the _FIRE_ calculator
+
+### Changed
+
+- Beautified the ETF names in the symbol profile
+
+### Fixed
+
+- Fixed an issue with changing the investment horizon in the chart of the _FIRE_ calculator
+- Fixed an issue with the end dates in the `.ics` file of the future activities (drafts) export
+- Fixed the data source of the _Fear & Greed Index_ (market mood)
+
+## 1.138.0 - 16.04.2022
+
+### Added
+
+- Added support to export a single future activity (draft) as an `.ics` file
+- Added the _Boringly Getting Rich_ guide to the resources section
+
+### Changed
+
+- Separated the deposit and savings in the chart of the _FIRE_ calculator
+
+## 1.137.0 - 15.04.2022
+
+### Added
+
+- Added support to export future activities (drafts) as an `.ics` file
+
+### Changed
+
+- Migrated the search functionality to `yahoo-finance2`
+
+### Fixed
+
+- Fixed an issue in the average price / investment calculation for sell activities
+
+## 1.136.0 - 13.04.2022
+
+### Changed
+
+- Changed the _Total_ label to _Total Assets_ in the portfolio summary tab on the home page
+
+### Fixed
+
+- Fixed an issue with the calculation of the projected total amount in the _FIRE_ calculator
+- Fixed an issue with the loading state of the _FIRE_ calculator
+
+## 1.135.0 - 10.04.2022
+
+### Added
+
+- Added a calculator to the _FIRE_ section
+- Added support for the cryptocurrency _Terra_ (`LUNA1-USD`)
+- Added support for the cryptocurrency _THORChain_ (`RUNE-USD`)
+
+## 1.134.0 - 09.04.2022
+
+### Changed
+
+- Switched to the new calculation engine
+- Improved the 4% rule in the _FIRE_ section
+- Changed the background of the header to a solid color
+
+## 1.133.0 - 07.04.2022
+
+### Changed
+
+- Improved the empty state of the portfolio proportion chart component
+
+### Fixed
+
+- Fixed an issue with dates in the value component
+
+## 1.132.1 - 06.04.2022
+
+### Fixed
+
+- Fixed an issue with percentages in the value component
+
 ## 1.132.0 - 06.04.2022
 
 ### Added

README.md

@@ -246,6 +246,8 @@ Ghostfolio is **100% free** and **open source**. We encourage and support an act
 
 Not sure what to work on? We have got some ideas. Please join the Ghostfolio [Slack channel](https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg), tweet to [@ghostfolio\_](https://twitter.com/ghostfolio_) or send an e-mail to hi@ghostfol.io. We would love to hear from you.
 
+If you like to support this project, get **[Ghostfolio Premium](https://ghostfol.io/pricing)** or **[Buy me a coffee](https://www.buymeacoffee.com/ghostfolio)**.
+
 ## License
 
 © 2022 [Ghostfolio](https://ghostfol.io)

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

@@ -78,8 +78,12 @@ export class AccessController {
   @Delete(':id')
   @UseGuards(AuthGuard('jwt'))
   public async deleteAccess(@Param('id') id: string): Promise<AccessModule> {
+    const access = await this.accessService.access({ id });
+
     if (
-      !hasPermission(this.request.user.permissions, permissions.deleteAccess)
+      !hasPermission(this.request.user.permissions, permissions.deleteAccess) ||
+      !access ||
+      access.userId !== this.request.user.id
     ) {
       throw new HttpException(
         getReasonPhrase(StatusCodes.FORBIDDEN),
@@ -88,10 +92,7 @@ export class AccessController {
     }
 
     return this.accessService.deleteAccess({
-      id_userId: {
-        id,
-        userId: this.request.user.id
-      }
+      id
     });
   }
 }

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

@@ -1,4 +1,4 @@
-import { PortfolioServiceStrategy } from '@ghostfolio/api/app/portfolio/portfolio-service.strategy';
+import { PortfolioService } from '@ghostfolio/api/app/portfolio/portfolio.service';
 import { UserService } from '@ghostfolio/api/app/user/user.service';
 import {
   nullifyValuesInObject,
@@ -35,7 +35,7 @@ export class AccountController {
   public constructor(
     private readonly accountService: AccountService,
     private readonly impersonationService: ImpersonationService,
-    private readonly portfolioServiceStrategy: PortfolioServiceStrategy,
+    private readonly portfolioService: PortfolioService,
     @Inject(REQUEST) private readonly request: RequestWithUser,
     private readonly userService: UserService
   ) {}
@@ -91,9 +91,10 @@ export class AccountController {
         this.request.user.id
       );
 
-    let accountsWithAggregations = await this.portfolioServiceStrategy
-      .get()
-      .getAccountsWithAggregations(impersonationUserId || this.request.user.id);
+    let accountsWithAggregations =
+      await this.portfolioService.getAccountsWithAggregations(
+        impersonationUserId || this.request.user.id
+      );
 
     if (
       impersonationUserId ||

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

@@ -42,6 +42,7 @@ export class ExportService {
           accountId,
           date,
           fee,
+          id,
           quantity,
           SymbolProfile,
           type,
@@ -49,13 +50,14 @@ export class ExportService {
         }) => {
           return {
             accountId,
-            date,
             fee,
+            id,
             quantity,
             type,
             unitPrice,
             currency: SymbolProfile.currency,
             dataSource: SymbolProfile.dataSource,
+            date: date.toISOString(),
             symbol: type === 'ITEM' ? SymbolProfile.name : SymbolProfile.symbol
           };
         }

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

@@ -6,6 +6,7 @@ import { ExchangeRateDataModule } from '@ghostfolio/api/services/exchange-rate-d
 import { PrismaModule } from '@ghostfolio/api/services/prisma.module';
 import { PropertyModule } from '@ghostfolio/api/services/property/property.module';
 import { SymbolProfileModule } from '@ghostfolio/api/services/symbol-profile.module';
+import { TagModule } from '@ghostfolio/api/services/tag/tag.module';
 import { Module } from '@nestjs/common';
 import { JwtModule } from '@nestjs/jwt';
 
@@ -26,7 +27,8 @@ import { InfoService } from './info.service';
     PrismaModule,
     PropertyModule,
     RedisCacheModule,
-    SymbolProfileModule
+    SymbolProfileModule,
+    TagModule
   ],
   providers: [InfoService]
 })

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

@@ -4,6 +4,7 @@ import { DataGatheringService } from '@ghostfolio/api/services/data-gathering.se
 import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-data.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
 import { PropertyService } from '@ghostfolio/api/services/property/property.service';
+import { TagService } from '@ghostfolio/api/services/tag/tag.service';
 import {
   DEMO_USER_ID,
   PROPERTY_IS_READ_ONLY_MODE,
@@ -33,7 +34,8 @@ export class InfoService {
     private readonly jwtService: JwtService,
     private readonly prismaService: PrismaService,
     private readonly propertyService: PropertyService,
-    private readonly redisCacheService: RedisCacheService
+    private readonly redisCacheService: RedisCacheService,
+    private readonly tagService: TagService
   ) {}
 
   public async get(): Promise<InfoItem> {
@@ -52,9 +54,15 @@ export class InfoService {
     }
 
     if (this.configurationService.get('ENABLE_FEATURE_FEAR_AND_GREED_INDEX')) {
+      if (
+        this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION') === true
+      ) {
         info.fearAndGreedDataSource = encodeDataSource(
           ghostfolioFearAndGreedIndexDataSource
         );
+      } else {
+        info.fearAndGreedDataSource = ghostfolioFearAndGreedIndexDataSource;
+      }
     }
 
     if (this.configurationService.get('ENABLE_FEATURE_IMPORT')) {
@@ -99,7 +107,8 @@ export class InfoService {
       demoAuthToken: this.getDemoAuthToken(),
       lastDataGathering: await this.getLastDataGathering(),
       statistics: await this.getStatistics(),
-      subscriptions: await this.getSubscriptions()
+      subscriptions: await this.getSubscriptions(),
+      tags: await this.tagService.get()
     };
   }
 

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

@@ -42,8 +42,12 @@ export class OrderController {
   @Delete(':id')
   @UseGuards(AuthGuard('jwt'))
   public async deleteOrder(@Param('id') id: string): Promise<OrderModel> {
+    const order = await this.orderService.order({ id });
+
     if (
-      !hasPermission(this.request.user.permissions, permissions.deleteOrder)
+      !hasPermission(this.request.user.permissions, permissions.deleteOrder) ||
+      !order ||
+      order.userId !== this.request.user.id
     ) {
       throw new HttpException(
         getReasonPhrase(StatusCodes.FORBIDDEN),
@@ -52,10 +56,7 @@ export class OrderController {
     }
 
     return this.orderService.deleteOrder({
-      id_userId: {
-        id,
-        userId: this.request.user.id
-      }
+      id
     });
   }
 
@@ -135,23 +136,15 @@ export class OrderController {
   @UseGuards(AuthGuard('jwt'))
   @UseInterceptors(TransformDataSourceInRequestInterceptor)
   public async update(@Param('id') id: string, @Body() data: UpdateOrderDto) {
-    if (
-      !hasPermission(this.request.user.permissions, permissions.updateOrder)
-    ) {
-      throw new HttpException(
-        getReasonPhrase(StatusCodes.FORBIDDEN),
-        StatusCodes.FORBIDDEN
-      );
-    }
-
     const originalOrder = await this.orderService.order({
-      id_userId: {
-        id,
-        userId: this.request.user.id
-      }
+      id
     });
 
-    if (!originalOrder) {
+    if (
+      !hasPermission(this.request.user.permissions, permissions.updateOrder) ||
+      !originalOrder ||
+      originalOrder.userId !== this.request.user.id
+    ) {
       throw new HttpException(
         getReasonPhrase(StatusCodes.FORBIDDEN),
         StatusCodes.FORBIDDEN
@@ -183,10 +176,7 @@ export class OrderController {
         User: { connect: { id: this.request.user.id } }
       },
       where: {
-        id_userId: {
-          id,
-          userId: this.request.user.id
-        }
+        id
       }
     });
   }

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

@@ -152,11 +152,13 @@ export class OrderService {
 
   public async getOrders({
     includeDrafts = false,
+    tags,
     types,
     userCurrency,
     userId
   }: {
     includeDrafts?: boolean;
+    tags?: string[];
     types?: TypeOfOrder[];
     userCurrency: string;
     userId: string;
@@ -167,6 +169,18 @@ export class OrderService {
       where.isDraft = false;
     }
 
+    if (tags?.length > 0) {
+      where.tags = {
+        some: {
+          OR: tags.map((tag) => {
+            return {
+              name: tag
+            };
+          })
+        }
+      };
+    }
+
     if (types) {
       where.OR = types.map((type) => {
         return {

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

@@ -20,6 +20,13 @@ function mockGetValue(symbol: string, date: Date) {
 
       return { marketPrice: 0 };
 
+    case 'NOVN.SW':
+      if (isSameDay(parseDate('2022-04-11'), date)) {
+        return { marketPrice: 87.8 };
+      }
+
+      return { marketPrice: 0 };
+
     default:
       return { marketPrice: 0 };
   }

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

@@ -3,7 +3,7 @@ import { parseDate } from '@ghostfolio/common/helper';
 import Big from 'big.js';
 
 import { CurrentRateServiceMock } from './current-rate.service.mock';
-import { PortfolioCalculatorNew } from './portfolio-calculator-new';
+import { PortfolioCalculator } from './portfolio-calculator';
 
 jest.mock('@ghostfolio/api/app/portfolio/current-rate.service', () => {
   return {
@@ -14,7 +14,7 @@ jest.mock('@ghostfolio/api/app/portfolio/current-rate.service', () => {
   };
 });
 
-describe('PortfolioCalculatorNew', () => {
+describe('PortfolioCalculator', () => {
   let currentRateService: CurrentRateService;
 
   beforeEach(() => {
@@ -23,7 +23,7 @@ describe('PortfolioCalculatorNew', () => {
 
   describe('get current positions', () => {
     it.only('with BALN.SW buy and sell', async () => {
-      const portfolioCalculatorNew = new PortfolioCalculatorNew({
+      const portfolioCalculator = new PortfolioCalculator({
         currentRateService,
         currency: 'CHF',
         orders: [
@@ -52,13 +52,13 @@ describe('PortfolioCalculatorNew', () => {
         ]
       });
 
-      portfolioCalculatorNew.computeTransactionPoints();
+      portfolioCalculator.computeTransactionPoints();
 
       const spy = jest
         .spyOn(Date, 'now')
         .mockImplementation(() => parseDate('2021-12-18').getTime());
 
-      const currentPositions = await portfolioCalculatorNew.getCurrentPositions(
+      const currentPositions = await portfolioCalculator.getCurrentPositions(
         parseDate('2021-11-22')
       );
 

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

@@ -3,7 +3,7 @@ import { parseDate } from '@ghostfolio/common/helper';
 import Big from 'big.js';
 
 import { CurrentRateServiceMock } from './current-rate.service.mock';
-import { PortfolioCalculatorNew } from './portfolio-calculator-new';
+import { PortfolioCalculator } from './portfolio-calculator';
 
 jest.mock('@ghostfolio/api/app/portfolio/current-rate.service', () => {
   return {
@@ -14,7 +14,7 @@ jest.mock('@ghostfolio/api/app/portfolio/current-rate.service', () => {
   };
 });
 
-describe('PortfolioCalculatorNew', () => {
+describe('PortfolioCalculator', () => {
   let currentRateService: CurrentRateService;
 
   beforeEach(() => {
@@ -23,7 +23,7 @@ describe('PortfolioCalculatorNew', () => {
 
   describe('get current positions', () => {
     it.only('with BALN.SW buy', async () => {
-      const portfolioCalculatorNew = new PortfolioCalculatorNew({
+      const portfolioCalculator = new PortfolioCalculator({
         currentRateService,
         currency: 'CHF',
         orders: [
@@ -41,13 +41,13 @@ describe('PortfolioCalculatorNew', () => {
         ]
       });
 
-      portfolioCalculatorNew.computeTransactionPoints();
+      portfolioCalculator.computeTransactionPoints();
 
       const spy = jest
         .spyOn(Date, 'now')
         .mockImplementation(() => parseDate('2021-12-18').getTime());
 
-      const currentPositions = await portfolioCalculatorNew.getCurrentPositions(
+      const currentPositions = await portfolioCalculator.getCurrentPositions(
         parseDate('2021-11-30')
       );
 

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

@@ -1,73 +0,0 @@
-import Big from 'big.js';
-
-import { CurrentRateService } from './current-rate.service';
-import { PortfolioCalculatorNew } from './portfolio-calculator-new';
-
-describe('PortfolioCalculatorNew', () => {
-  let currentRateService: CurrentRateService;
-
-  beforeEach(() => {
-    currentRateService = new CurrentRateService(null, null, null);
-  });
-
-  describe('annualized performance percentage', () => {
-    const portfolioCalculatorNew = new PortfolioCalculatorNew({
-      currentRateService,
-      currency: 'USD',
-      orders: []
-    });
-
-    it('Get annualized performance', async () => {
-      expect(
-        portfolioCalculatorNew
-          .getAnnualizedPerformancePercent({
-            daysInMarket: NaN, // differenceInDays of date-fns returns NaN for the same day
-            netPerformancePercent: new Big(0)
-          })
-          .toNumber()
-      ).toEqual(0);
-
-      expect(
-        portfolioCalculatorNew
-          .getAnnualizedPerformancePercent({
-            daysInMarket: 0,
-            netPerformancePercent: new Big(0)
-          })
-          .toNumber()
-      ).toEqual(0);
-
-      /**
-       * Source: https://www.readyratios.com/reference/analysis/annualized_rate.html
-       */
-      expect(
-        portfolioCalculatorNew
-          .getAnnualizedPerformancePercent({
-            daysInMarket: 65, // < 1 year
-            netPerformancePercent: new Big(0.1025)
-          })
-          .toNumber()
-      ).toBeCloseTo(0.729705);
-
-      expect(
-        portfolioCalculatorNew
-          .getAnnualizedPerformancePercent({
-            daysInMarket: 365, // 1 year
-            netPerformancePercent: new Big(0.05)
-          })
-          .toNumber()
-      ).toBeCloseTo(0.05);
-
-      /**
-       * Source: https://www.investopedia.com/terms/a/annualized-total-return.asp#annualized-return-formula-and-calculation
-       */
-      expect(
-        portfolioCalculatorNew
-          .getAnnualizedPerformancePercent({
-            daysInMarket: 575, // > 1 year
-            netPerformancePercent: new Big(0.2374)
-          })
-          .toNumber()
-      ).toBeCloseTo(0.145);
-    });
-  });
-});

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

@@ -1,997 +0,0 @@
-import { TimelineInfoInterface } from '@ghostfolio/api/app/portfolio/interfaces/timeline-info.interface';
-import { IDataGatheringItem } from '@ghostfolio/api/services/interfaces/interfaces';
-import { DATE_FORMAT, parseDate, resetHours } from '@ghostfolio/common/helper';
-import {
-  ResponseError,
-  TimelinePosition,
-  UniqueAsset
-} from '@ghostfolio/common/interfaces';
-import { Logger } from '@nestjs/common';
-import { Type as TypeOfOrder } from '@prisma/client';
-import Big from 'big.js';
-import {
-  addDays,
-  addMilliseconds,
-  addMonths,
-  addYears,
-  endOfDay,
-  format,
-  isAfter,
-  isBefore,
-  max,
-  min
-} from 'date-fns';
-import { first, flatten, isNumber, sortBy } from 'lodash';
-
-import { CurrentRateService } from './current-rate.service';
-import { CurrentPositions } from './interfaces/current-positions.interface';
-import { GetValueObject } from './interfaces/get-value-object.interface';
-import { PortfolioOrderItem } from './interfaces/portfolio-calculator.interface';
-import { PortfolioOrder } from './interfaces/portfolio-order.interface';
-import { TimelinePeriod } from './interfaces/timeline-period.interface';
-import {
-  Accuracy,
-  TimelineSpecification
-} from './interfaces/timeline-specification.interface';
-import { TransactionPointSymbol } from './interfaces/transaction-point-symbol.interface';
-import { TransactionPoint } from './interfaces/transaction-point.interface';
-
-export class PortfolioCalculatorNew {
-  private static readonly CALCULATE_PERCENTAGE_PERFORMANCE_WITH_MAX_INVESTMENT =
-    true;
-
-  private static readonly ENABLE_LOGGING = false;
-
-  private currency: string;
-  private currentRateService: CurrentRateService;
-  private orders: PortfolioOrder[];
-  private transactionPoints: TransactionPoint[];
-
-  public constructor({
-    currency,
-    currentRateService,
-    orders
-  }: {
-    currency: string;
-    currentRateService: CurrentRateService;
-    orders: PortfolioOrder[];
-  }) {
-    this.currency = currency;
-    this.currentRateService = currentRateService;
-    this.orders = orders;
-
-    this.orders.sort((a, b) => a.date.localeCompare(b.date));
-  }
-
-  public computeTransactionPoints() {
-    this.transactionPoints = [];
-    const symbols: { [symbol: string]: TransactionPointSymbol } = {};
-
-    let lastDate: string = null;
-    let lastTransactionPoint: TransactionPoint = null;
-    for (const order of this.orders) {
-      const currentDate = order.date;
-
-      let currentTransactionPointItem: TransactionPointSymbol;
-      const oldAccumulatedSymbol = symbols[order.symbol];
-
-      const factor = this.getFactor(order.type);
-      const unitPrice = new Big(order.unitPrice);
-      if (oldAccumulatedSymbol) {
-        const newQuantity = order.quantity
-          .mul(factor)
-          .plus(oldAccumulatedSymbol.quantity);
-        currentTransactionPointItem = {
-          currency: order.currency,
-          dataSource: order.dataSource,
-          fee: order.fee.plus(oldAccumulatedSymbol.fee),
-          firstBuyDate: oldAccumulatedSymbol.firstBuyDate,
-          investment: newQuantity.eq(0)
-            ? new Big(0)
-            : unitPrice
-                .mul(order.quantity)
-                .mul(factor)
-                .plus(oldAccumulatedSymbol.investment),
-          quantity: newQuantity,
-          symbol: order.symbol,
-          transactionCount: oldAccumulatedSymbol.transactionCount + 1
-        };
-      } else {
-        currentTransactionPointItem = {
-          currency: order.currency,
-          dataSource: order.dataSource,
-          fee: order.fee,
-          firstBuyDate: order.date,
-          investment: unitPrice.mul(order.quantity).mul(factor),
-          quantity: order.quantity.mul(factor),
-          symbol: order.symbol,
-          transactionCount: 1
-        };
-      }
-
-      symbols[order.symbol] = currentTransactionPointItem;
-
-      const items = lastTransactionPoint?.items ?? [];
-      const newItems = items.filter(
-        (transactionPointItem) => transactionPointItem.symbol !== order.symbol
-      );
-      newItems.push(currentTransactionPointItem);
-      newItems.sort((a, b) => a.symbol.localeCompare(b.symbol));
-      if (lastDate !== currentDate || lastTransactionPoint === null) {
-        lastTransactionPoint = {
-          date: currentDate,
-          items: newItems
-        };
-        this.transactionPoints.push(lastTransactionPoint);
-      } else {
-        lastTransactionPoint.items = newItems;
-      }
-      lastDate = currentDate;
-    }
-  }
-
-  public getAnnualizedPerformancePercent({
-    daysInMarket,
-    netPerformancePercent
-  }: {
-    daysInMarket: number;
-    netPerformancePercent: Big;
-  }): Big {
-    if (isNumber(daysInMarket) && daysInMarket > 0) {
-      const exponent = new Big(365).div(daysInMarket).toNumber();
-      return new Big(
-        Math.pow(netPerformancePercent.plus(1).toNumber(), exponent)
-      ).minus(1);
-    }
-
-    return new Big(0);
-  }
-
-  public getTransactionPoints(): TransactionPoint[] {
-    return this.transactionPoints;
-  }
-
-  public setTransactionPoints(transactionPoints: TransactionPoint[]) {
-    this.transactionPoints = transactionPoints;
-  }
-
-  public async getCurrentPositions(start: Date): Promise<CurrentPositions> {
-    if (!this.transactionPoints?.length) {
-      return {
-        currentValue: new Big(0),
-        hasErrors: false,
-        grossPerformance: new Big(0),
-        grossPerformancePercentage: new Big(0),
-        netPerformance: new Big(0),
-        netPerformancePercentage: new Big(0),
-        positions: [],
-        totalInvestment: new Big(0)
-      };
-    }
-
-    const lastTransactionPoint =
-      this.transactionPoints[this.transactionPoints.length - 1];
-
-    // use Date.now() to use the mock for today
-    const today = new Date(Date.now());
-
-    let firstTransactionPoint: TransactionPoint = null;
-    let firstIndex = this.transactionPoints.length;
-    const dates = [];
-    const dataGatheringItems: IDataGatheringItem[] = [];
-    const currencies: { [symbol: string]: string } = {};
-
-    dates.push(resetHours(start));
-    for (const item of this.transactionPoints[firstIndex - 1].items) {
-      dataGatheringItems.push({
-        dataSource: item.dataSource,
-        symbol: item.symbol
-      });
-      currencies[item.symbol] = item.currency;
-    }
-    for (let i = 0; i < this.transactionPoints.length; i++) {
-      if (
-        !isBefore(parseDate(this.transactionPoints[i].date), start) &&
-        firstTransactionPoint === null
-      ) {
-        firstTransactionPoint = this.transactionPoints[i];
-        firstIndex = i;
-      }
-      if (firstTransactionPoint !== null) {
-        dates.push(resetHours(parseDate(this.transactionPoints[i].date)));
-      }
-    }
-
-    dates.push(resetHours(today));
-
-    const marketSymbols = await this.currentRateService.getValues({
-      currencies,
-      dataGatheringItems,
-      dateQuery: {
-        in: dates
-      },
-      userCurrency: this.currency
-    });
-
-    const marketSymbolMap: {
-      [date: string]: { [symbol: string]: Big };
-    } = {};
-
-    for (const marketSymbol of marketSymbols) {
-      const date = format(marketSymbol.date, DATE_FORMAT);
-      if (!marketSymbolMap[date]) {
-        marketSymbolMap[date] = {};
-      }
-      if (marketSymbol.marketPrice) {
-        marketSymbolMap[date][marketSymbol.symbol] = new Big(
-          marketSymbol.marketPrice
-        );
-      }
-    }
-
-    const todayString = format(today, DATE_FORMAT);
-
-    if (firstIndex > 0) {
-      firstIndex--;
-    }
-    const initialValues: { [symbol: string]: Big } = {};
-
-    const positions: TimelinePosition[] = [];
-    let hasAnySymbolMetricsErrors = false;
-
-    const errors: ResponseError['errors'] = [];
-
-    for (const item of lastTransactionPoint.items) {
-      const marketValue = marketSymbolMap[todayString]?.[item.symbol];
-
-      const {
-        grossPerformance,
-        grossPerformancePercentage,
-        hasErrors,
-        initialValue,
-        netPerformance,
-        netPerformancePercentage
-      } = this.getSymbolMetrics({
-        marketSymbolMap,
-        start,
-        symbol: item.symbol
-      });
-
-      hasAnySymbolMetricsErrors = hasAnySymbolMetricsErrors || hasErrors;
-      initialValues[item.symbol] = initialValue;
-
-      positions.push({
-        averagePrice: item.quantity.eq(0)
-          ? new Big(0)
-          : item.investment.div(item.quantity),
-        currency: item.currency,
-        dataSource: item.dataSource,
-        firstBuyDate: item.firstBuyDate,
-        grossPerformance: !hasErrors ? grossPerformance ?? null : null,
-        grossPerformancePercentage: !hasErrors
-          ? grossPerformancePercentage ?? null
-          : null,
-        investment: item.investment,
-        marketPrice: marketValue?.toNumber() ?? null,
-        netPerformance: !hasErrors ? netPerformance ?? null : null,
-        netPerformancePercentage: !hasErrors
-          ? netPerformancePercentage ?? null
-          : null,
-        quantity: item.quantity,
-        symbol: item.symbol,
-        transactionCount: item.transactionCount
-      });
-
-      if (hasErrors) {
-        errors.push({ dataSource: item.dataSource, symbol: item.symbol });
-      }
-    }
-
-    const overall = this.calculateOverallPerformance(positions, initialValues);
-
-    return {
-      ...overall,
-      errors,
-      positions,
-      hasErrors: hasAnySymbolMetricsErrors || overall.hasErrors
-    };
-  }
-
-  public getInvestments(): { date: string; investment: Big }[] {
-    if (this.transactionPoints.length === 0) {
-      return [];
-    }
-
-    return this.transactionPoints.map((transactionPoint) => {
-      return {
-        date: transactionPoint.date,
-        investment: transactionPoint.items.reduce(
-          (investment, transactionPointSymbol) =>
-            investment.plus(transactionPointSymbol.investment),
-          new Big(0)
-        )
-      };
-    });
-  }
-
-  public async calculateTimeline(
-    timelineSpecification: TimelineSpecification[],
-    endDate: string
-  ): Promise<TimelineInfoInterface> {
-    if (timelineSpecification.length === 0) {
-      return {
-        maxNetPerformance: new Big(0),
-        minNetPerformance: new Big(0),
-        timelinePeriods: []
-      };
-    }
-
-    const startDate = timelineSpecification[0].start;
-    const start = parseDate(startDate);
-    const end = parseDate(endDate);
-
-    const timelinePeriodPromises: Promise<TimelineInfoInterface>[] = [];
-    let i = 0;
-    let j = -1;
-    for (
-      let currentDate = start;
-      !isAfter(currentDate, end);
-      currentDate = this.addToDate(
-        currentDate,
-        timelineSpecification[i].accuracy
-      )
-    ) {
-      if (this.isNextItemActive(timelineSpecification, currentDate, i)) {
-        i++;
-      }
-      while (
-        j + 1 < this.transactionPoints.length &&
-        !isAfter(parseDate(this.transactionPoints[j + 1].date), currentDate)
-      ) {
-        j++;
-      }
-
-      let periodEndDate = currentDate;
-      if (timelineSpecification[i].accuracy === 'day') {
-        let nextEndDate = end;
-        if (j + 1 < this.transactionPoints.length) {
-          nextEndDate = parseDate(this.transactionPoints[j + 1].date);
-        }
-        periodEndDate = min([
-          addMonths(currentDate, 3),
-          max([currentDate, nextEndDate])
-        ]);
-      }
-      const timePeriodForDates = this.getTimePeriodForDate(
-        j,
-        currentDate,
-        endOfDay(periodEndDate)
-      );
-      currentDate = periodEndDate;
-      if (timePeriodForDates != null) {
-        timelinePeriodPromises.push(timePeriodForDates);
-      }
-    }
-
-    const timelineInfoInterfaces: TimelineInfoInterface[] = await Promise.all(
-      timelinePeriodPromises
-    );
-    const minNetPerformance = timelineInfoInterfaces
-      .map((timelineInfo) => timelineInfo.minNetPerformance)
-      .filter((performance) => performance !== null)
-      .reduce((minPerformance, current) => {
-        if (minPerformance.lt(current)) {
-          return minPerformance;
-        } else {
-          return current;
-        }
-      });
-
-    const maxNetPerformance = timelineInfoInterfaces
-      .map((timelineInfo) => timelineInfo.maxNetPerformance)
-      .filter((performance) => performance !== null)
-      .reduce((maxPerformance, current) => {
-        if (maxPerformance.gt(current)) {
-          return maxPerformance;
-        } else {
-          return current;
-        }
-      });
-
-    const timelinePeriods = timelineInfoInterfaces.map(
-      (timelineInfo) => timelineInfo.timelinePeriods
-    );
-
-    return {
-      maxNetPerformance,
-      minNetPerformance,
-      timelinePeriods: flatten(timelinePeriods)
-    };
-  }
-
-  private calculateOverallPerformance(
-    positions: TimelinePosition[],
-    initialValues: { [symbol: string]: Big }
-  ) {
-    let currentValue = new Big(0);
-    let grossPerformance = new Big(0);
-    let grossPerformancePercentage = new Big(0);
-    let hasErrors = false;
-    let netPerformance = new Big(0);
-    let netPerformancePercentage = new Big(0);
-    let sumOfWeights = new Big(0);
-    let totalInvestment = new Big(0);
-
-    for (const currentPosition of positions) {
-      if (currentPosition.marketPrice) {
-        currentValue = currentValue.plus(
-          new Big(currentPosition.marketPrice).mul(currentPosition.quantity)
-        );
-      } else {
-        hasErrors = true;
-      }
-
-      totalInvestment = totalInvestment.plus(currentPosition.investment);
-
-      if (currentPosition.grossPerformance) {
-        grossPerformance = grossPerformance.plus(
-          currentPosition.grossPerformance
-        );
-
-        netPerformance = netPerformance.plus(currentPosition.netPerformance);
-      } else if (!currentPosition.quantity.eq(0)) {
-        hasErrors = true;
-      }
-
-      if (currentPosition.grossPerformancePercentage) {
-        // Use the average from the initial value and the current investment as
-        // a weight
-        const weight = (initialValues[currentPosition.symbol] ?? new Big(0))
-          .plus(currentPosition.investment)
-          .div(2);
-
-        sumOfWeights = sumOfWeights.plus(weight);
-
-        grossPerformancePercentage = grossPerformancePercentage.plus(
-          currentPosition.grossPerformancePercentage.mul(weight)
-        );
-
-        netPerformancePercentage = netPerformancePercentage.plus(
-          currentPosition.netPerformancePercentage.mul(weight)
-        );
-      } else if (!currentPosition.quantity.eq(0)) {
-        Logger.warn(
-          `Missing initial value for symbol ${currentPosition.symbol} at ${currentPosition.firstBuyDate}`,
-          'PortfolioCalculatorNew'
-        );
-        hasErrors = true;
-      }
-    }
-
-    if (sumOfWeights.gt(0)) {
-      grossPerformancePercentage = grossPerformancePercentage.div(sumOfWeights);
-      netPerformancePercentage = netPerformancePercentage.div(sumOfWeights);
-    } else {
-      grossPerformancePercentage = new Big(0);
-      netPerformancePercentage = new Big(0);
-    }
-
-    return {
-      currentValue,
-      grossPerformance,
-      grossPerformancePercentage,
-      hasErrors,
-      netPerformance,
-      netPerformancePercentage,
-      totalInvestment
-    };
-  }
-
-  private async getTimePeriodForDate(
-    j: number,
-    startDate: Date,
-    endDate: Date
-  ): Promise<TimelineInfoInterface> {
-    let investment: Big = new Big(0);
-    let fees: Big = new Big(0);
-
-    const marketSymbolMap: {
-      [date: string]: { [symbol: string]: Big };
-    } = {};
-    if (j >= 0) {
-      const currencies: { [name: string]: string } = {};
-      const dataGatheringItems: IDataGatheringItem[] = [];
-
-      for (const item of this.transactionPoints[j].items) {
-        currencies[item.symbol] = item.currency;
-        dataGatheringItems.push({
-          dataSource: item.dataSource,
-          symbol: item.symbol
-        });
-        investment = investment.plus(item.investment);
-        fees = fees.plus(item.fee);
-      }
-
-      let marketSymbols: GetValueObject[] = [];
-      if (dataGatheringItems.length > 0) {
-        try {
-          marketSymbols = await this.currentRateService.getValues({
-            currencies,
-            dataGatheringItems,
-            dateQuery: {
-              gte: startDate,
-              lt: endOfDay(endDate)
-            },
-            userCurrency: this.currency
-          });
-        } catch (error) {
-          Logger.error(
-            `Failed to fetch info for date ${startDate} with exception`,
-            error,
-            'PortfolioCalculatorNew'
-          );
-          return null;
-        }
-      }
-
-      for (const marketSymbol of marketSymbols) {
-        const date = format(marketSymbol.date, DATE_FORMAT);
-        if (!marketSymbolMap[date]) {
-          marketSymbolMap[date] = {};
-        }
-        if (marketSymbol.marketPrice) {
-          marketSymbolMap[date][marketSymbol.symbol] = new Big(
-            marketSymbol.marketPrice
-          );
-        }
-      }
-    }
-
-    const results: TimelinePeriod[] = [];
-    let maxNetPerformance: Big = null;
-    let minNetPerformance: Big = null;
-    for (
-      let currentDate = startDate;
-      isBefore(currentDate, endDate);
-      currentDate = addDays(currentDate, 1)
-    ) {
-      let value = new Big(0);
-      const currentDateAsString = format(currentDate, DATE_FORMAT);
-      let invalid = false;
-      if (j >= 0) {
-        for (const item of this.transactionPoints[j].items) {
-          if (
-            !marketSymbolMap[currentDateAsString]?.hasOwnProperty(item.symbol)
-          ) {
-            invalid = true;
-            break;
-          }
-          value = value.plus(
-            item.quantity.mul(marketSymbolMap[currentDateAsString][item.symbol])
-          );
-        }
-      }
-      if (!invalid) {
-        const grossPerformance = value.minus(investment);
-        const netPerformance = grossPerformance.minus(fees);
-        if (
-          minNetPerformance === null ||
-          minNetPerformance.gt(netPerformance)
-        ) {
-          minNetPerformance = netPerformance;
-        }
-        if (
-          maxNetPerformance === null ||
-          maxNetPerformance.lt(netPerformance)
-        ) {
-          maxNetPerformance = netPerformance;
-        }
-
-        const result = {
-          grossPerformance,
-          investment,
-          netPerformance,
-          value,
-          date: currentDateAsString
-        };
-        results.push(result);
-      }
-    }
-
-    return {
-      maxNetPerformance,
-      minNetPerformance,
-      timelinePeriods: results
-    };
-  }
-
-  private getFactor(type: TypeOfOrder) {
-    let factor: number;
-
-    switch (type) {
-      case 'BUY':
-        factor = 1;
-        break;
-      case 'SELL':
-        factor = -1;
-        break;
-      default:
-        factor = 0;
-        break;
-    }
-
-    return factor;
-  }
-
-  private addToDate(date: Date, accuracy: Accuracy): Date {
-    switch (accuracy) {
-      case 'day':
-        return addDays(date, 1);
-      case 'month':
-        return addMonths(date, 1);
-      case 'year':
-        return addYears(date, 1);
-    }
-  }
-
-  private getSymbolMetrics({
-    marketSymbolMap,
-    start,
-    symbol
-  }: {
-    marketSymbolMap: {
-      [date: string]: { [symbol: string]: Big };
-    };
-    start: Date;
-    symbol: string;
-  }) {
-    let orders: PortfolioOrderItem[] = this.orders.filter((order) => {
-      return order.symbol === symbol;
-    });
-
-    if (orders.length <= 0) {
-      return {
-        hasErrors: false,
-        initialValue: new Big(0),
-        netPerformance: new Big(0),
-        netPerformancePercentage: new Big(0),
-        grossPerformance: new Big(0),
-        grossPerformancePercentage: new Big(0)
-      };
-    }
-
-    const dateOfFirstTransaction = new Date(first(orders).date);
-    const endDate = new Date(Date.now());
-
-    const unitPriceAtStartDate =
-      marketSymbolMap[format(start, DATE_FORMAT)]?.[symbol];
-
-    const unitPriceAtEndDate =
-      marketSymbolMap[format(endDate, DATE_FORMAT)]?.[symbol];
-
-    if (
-      !unitPriceAtEndDate ||
-      (!unitPriceAtStartDate && isBefore(dateOfFirstTransaction, start))
-    ) {
-      return {
-        hasErrors: true,
-        initialValue: new Big(0),
-        netPerformance: new Big(0),
-        netPerformancePercentage: new Big(0),
-        grossPerformance: new Big(0),
-        grossPerformancePercentage: new Big(0)
-      };
-    }
-
-    let averagePriceAtEndDate = new Big(0);
-    let averagePriceAtStartDate = new Big(0);
-    let feesAtStartDate = new Big(0);
-    let fees = new Big(0);
-    let grossPerformance = new Big(0);
-    let grossPerformanceAtStartDate = new Big(0);
-    let grossPerformanceFromSells = new Big(0);
-    let initialValue: Big;
-    let investmentAtStartDate: Big;
-    let lastAveragePrice = new Big(0);
-    let lastTransactionInvestment = new Big(0);
-    let lastValueOfInvestmentBeforeTransaction = new Big(0);
-    let maxTotalInvestment = new Big(0);
-    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);
-    let valueAtStartDate: Big;
-
-    // Add a synthetic order at the start and the end date
-    orders.push({
-      symbol,
-      currency: null,
-      date: format(start, DATE_FORMAT),
-      dataSource: null,
-      fee: new Big(0),
-      itemType: 'start',
-      name: '',
-      quantity: new Big(0),
-      type: TypeOfOrder.BUY,
-      unitPrice: unitPriceAtStartDate
-    });
-
-    orders.push({
-      symbol,
-      currency: null,
-      date: format(endDate, DATE_FORMAT),
-      dataSource: null,
-      fee: new Big(0),
-      itemType: 'end',
-      name: '',
-      quantity: new Big(0),
-      type: TypeOfOrder.BUY,
-      unitPrice: unitPriceAtEndDate
-    });
-
-    // Sort orders so that the start and end placeholder order are at the right
-    // position
-    orders = sortBy(orders, (order) => {
-      let sortIndex = new Date(order.date);
-
-      if (order.itemType === 'start') {
-        sortIndex = addMilliseconds(sortIndex, -1);
-      }
-
-      if (order.itemType === 'end') {
-        sortIndex = addMilliseconds(sortIndex, 1);
-      }
-
-      return sortIndex.getTime();
-    });
-
-    const indexOfStartOrder = orders.findIndex((order) => {
-      return order.itemType === 'start';
-    });
-
-    const indexOfEndOrder = orders.findIndex((order) => {
-      return order.itemType === 'end';
-    });
-
-    for (let i = 0; i < orders.length; i += 1) {
-      const order = orders[i];
-
-      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
-        order.unitPrice =
-          indexOfStartOrder === 0
-            ? orders[i + 1]?.unitPrice
-            : unitPriceAtStartDate;
-      }
-
-      // Calculate the average start price as soon as any units are held
-      if (
-        averagePriceAtStartDate.eq(0) &&
-        i >= indexOfStartOrder &&
-        totalUnits.gt(0)
-      ) {
-        averagePriceAtStartDate = totalInvestment.div(totalUnits);
-      }
-
-      const valueOfInvestmentBeforeTransaction = totalUnits.mul(
-        order.unitPrice
-      );
-
-      if (!investmentAtStartDate && i >= indexOfStartOrder) {
-        investmentAtStartDate = totalInvestment ?? new Big(0);
-        valueAtStartDate = valueOfInvestmentBeforeTransaction;
-      }
-
-      const transactionInvestment = order.quantity
-        .mul(order.unitPrice)
-        .mul(this.getFactor(order.type));
-
-      totalInvestment = totalInvestment.plus(transactionInvestment);
-
-      if (i >= indexOfStartOrder && totalInvestment.gt(maxTotalInvestment)) {
-        maxTotalInvestment = totalInvestment;
-      }
-
-      if (i === indexOfEndOrder && totalUnits.gt(0)) {
-        averagePriceAtEndDate = totalInvestment.div(totalUnits);
-      }
-
-      if (i >= indexOfStartOrder && !initialValue) {
-        if (
-          i === indexOfStartOrder &&
-          !valueOfInvestmentBeforeTransaction.eq(0)
-        ) {
-          initialValue = valueOfInvestmentBeforeTransaction;
-        } else if (transactionInvestment.gt(0)) {
-          initialValue = transactionInvestment;
-        }
-      }
-
-      fees = fees.plus(order.fee);
-
-      totalUnits = totalUnits.plus(
-        order.quantity.mul(this.getFactor(order.type))
-      );
-
-      const valueOfInvestment = totalUnits.mul(order.unitPrice);
-
-      const grossPerformanceFromSell =
-        order.type === TypeOfOrder.SELL
-          ? order.unitPrice.minus(lastAveragePrice).mul(order.quantity)
-          : new Big(0);
-
-      grossPerformanceFromSells = grossPerformanceFromSells.plus(
-        grossPerformanceFromSell
-      );
-
-      totalInvestmentWithGrossPerformanceFromSell =
-        totalInvestmentWithGrossPerformanceFromSell
-          .plus(transactionInvestment)
-          .plus(grossPerformanceFromSell);
-
-      lastAveragePrice = totalUnits.eq(0)
-        ? new Big(0)
-        : totalInvestmentWithGrossPerformanceFromSell.div(totalUnits);
-
-      const newGrossPerformance = valueOfInvestment
-        .minus(totalInvestmentWithGrossPerformanceFromSell)
-        .plus(grossPerformanceFromSells);
-
-      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)
-          );
-
-        const netHoldingPeriodReturn = valueOfInvestmentBeforeTransaction
-          .minus(fees.minus(feesAtStartDate))
-          .minus(
-            lastValueOfInvestmentBeforeTransaction.plus(
-              lastTransactionInvestment
-            )
-          )
-          .div(
-            lastValueOfInvestmentBeforeTransaction.plus(
-              lastTransactionInvestment
-            )
-          );
-
-        timeWeightedNetPerformancePercentage =
-          timeWeightedNetPerformancePercentage.mul(
-            new Big(1).plus(netHoldingPeriodReturn)
-          );
-      }
-
-      grossPerformance = newGrossPerformance;
-
-      lastTransactionInvestment = transactionInvestment;
-
-      lastValueOfInvestmentBeforeTransaction =
-        valueOfInvestmentBeforeTransaction;
-
-      if (order.itemType === 'start') {
-        feesAtStartDate = fees;
-        grossPerformanceAtStartDate = grossPerformance;
-      }
-    }
-
-    timeWeightedGrossPerformancePercentage =
-      timeWeightedGrossPerformancePercentage.minus(1);
-
-    timeWeightedNetPerformancePercentage =
-      timeWeightedNetPerformancePercentage.minus(1);
-
-    const totalGrossPerformance = grossPerformance.minus(
-      grossPerformanceAtStartDate
-    );
-
-    const totalNetPerformance = grossPerformance
-      .minus(grossPerformanceAtStartDate)
-      .minus(fees.minus(feesAtStartDate));
-
-    const maxInvestmentBetweenStartAndEndDate = valueAtStartDate.plus(
-      maxTotalInvestment.minus(investmentAtStartDate)
-    );
-
-    const grossPerformancePercentage =
-      PortfolioCalculatorNew.CALCULATE_PERCENTAGE_PERFORMANCE_WITH_MAX_INVESTMENT ||
-      averagePriceAtStartDate.eq(0) ||
-      averagePriceAtEndDate.eq(0) ||
-      orders[indexOfStartOrder].unitPrice.eq(0)
-        ? maxInvestmentBetweenStartAndEndDate.gt(0)
-          ? totalGrossPerformance.div(maxInvestmentBetweenStartAndEndDate)
-          : new Big(0)
-        : // This formula has the issue that buying more units with a price
-          // lower than the average buying price results in a positive
-          // performance even if the market price stays constant
-          unitPriceAtEndDate
-            .div(averagePriceAtEndDate)
-            .div(
-              orders[indexOfStartOrder].unitPrice.div(averagePriceAtStartDate)
-            )
-            .minus(1);
-
-    const feesPerUnit = totalUnits.gt(0)
-      ? fees.minus(feesAtStartDate).div(totalUnits)
-      : new Big(0);
-
-    const netPerformancePercentage =
-      PortfolioCalculatorNew.CALCULATE_PERCENTAGE_PERFORMANCE_WITH_MAX_INVESTMENT ||
-      averagePriceAtStartDate.eq(0) ||
-      averagePriceAtEndDate.eq(0) ||
-      orders[indexOfStartOrder].unitPrice.eq(0)
-        ? maxInvestmentBetweenStartAndEndDate.gt(0)
-          ? totalNetPerformance.div(maxInvestmentBetweenStartAndEndDate)
-          : new Big(0)
-        : // This formula has the issue that buying more units with a price
-          // lower than the average buying price results in a positive
-          // performance even if the market price stays constant
-          unitPriceAtEndDate
-            .minus(feesPerUnit)
-            .div(averagePriceAtEndDate)
-            .div(
-              orders[indexOfStartOrder].unitPrice.div(averagePriceAtStartDate)
-            )
-            .minus(1);
-
-    if (PortfolioCalculatorNew.ENABLE_LOGGING) {
-      console.log(
-        `
-        ${symbol}
-        Unit price: ${orders[indexOfStartOrder].unitPrice.toFixed(
-          2
-        )} -> ${unitPriceAtEndDate.toFixed(2)}
-        Average price: ${averagePriceAtStartDate.toFixed(
-          2
-        )} -> ${averagePriceAtEndDate.toFixed(2)}
-        Max. total investment: ${maxTotalInvestment.toFixed(2)}
-        Gross performance: ${totalGrossPerformance.toFixed(
-          2
-        )} / ${grossPerformancePercentage.mul(100).toFixed(2)}%
-        Fees per unit: ${feesPerUnit.toFixed(2)}
-        Net performance: ${totalNetPerformance.toFixed(
-          2
-        )} / ${netPerformancePercentage.mul(100).toFixed(2)}%`
-      );
-    }
-
-    return {
-      initialValue,
-      grossPerformancePercentage,
-      netPerformancePercentage,
-      hasErrors: totalUnits.gt(0) && (!initialValue || !unitPriceAtEndDate),
-      netPerformance: totalNetPerformance,
-      grossPerformance: totalGrossPerformance
-    };
-  }
-
-  private isNextItemActive(
-    timelineSpecification: TimelineSpecification[],
-    currentDate: Date,
-    i: number
-  ) {
-    return (
-      i + 1 < timelineSpecification.length &&
-      !isBefore(currentDate, parseDate(timelineSpecification[i + 1].start))
-    );
-  }
-}

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

@@ -3,7 +3,7 @@ import { parseDate } from '@ghostfolio/common/helper';
 import Big from 'big.js';
 
 import { CurrentRateServiceMock } from './current-rate.service.mock';
-import { PortfolioCalculatorNew } from './portfolio-calculator-new';
+import { PortfolioCalculator } from './portfolio-calculator';
 
 jest.mock('@ghostfolio/api/app/portfolio/current-rate.service', () => {
   return {
@@ -14,7 +14,7 @@ jest.mock('@ghostfolio/api/app/portfolio/current-rate.service', () => {
   };
 });
 
-describe('PortfolioCalculatorNew', () => {
+describe('PortfolioCalculator', () => {
   let currentRateService: CurrentRateService;
 
   beforeEach(() => {
@@ -23,19 +23,19 @@ describe('PortfolioCalculatorNew', () => {
 
   describe('get current positions', () => {
     it('with no orders', async () => {
-      const portfolioCalculatorNew = new PortfolioCalculatorNew({
+      const portfolioCalculator = new PortfolioCalculator({
         currentRateService,
         currency: 'CHF',
         orders: []
       });
 
-      portfolioCalculatorNew.computeTransactionPoints();
+      portfolioCalculator.computeTransactionPoints();
 
       const spy = jest
         .spyOn(Date, 'now')
         .mockImplementation(() => parseDate('2021-12-18').getTime());
 
-      const currentPositions = await portfolioCalculatorNew.getCurrentPositions(
+      const currentPositions = await portfolioCalculator.getCurrentPositions(
         new Date()
       );
 

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

@@ -0,0 +1,96 @@
+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 BALN.SW buy and sell', async () => {
+      const portfolioCalculator = new PortfolioCalculator({
+        currentRateService,
+        currency: 'CHF',
+        orders: [
+          {
+            currency: 'CHF',
+            date: '2022-03-07',
+            dataSource: 'YAHOO',
+            fee: new Big(1.3),
+            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(2.95),
+            name: 'Novartis AG',
+            quantity: new Big(1),
+            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 currentPositions = await portfolioCalculator.getCurrentPositions(
+        parseDate('2022-03-07')
+      );
+
+      spy.mockRestore();
+
+      expect(currentPositions).toEqual({
+        currentValue: new Big('87.8'),
+        errors: [],
+        grossPerformance: new Big('21.93'),
+        grossPerformancePercentage: new Big('0.14465699208443271768'),
+        hasErrors: false,
+        netPerformance: new Big('17.68'),
+        netPerformancePercentage: new Big('0.11662269129287598945'),
+        positions: [
+          {
+            averagePrice: new Big('75.80'),
+            currency: 'CHF',
+            dataSource: 'YAHOO',
+            firstBuyDate: '2022-03-07',
+            grossPerformance: new Big('21.93'),
+            grossPerformancePercentage: new Big('0.14465699208443271768'),
+            investment: new Big('75.80'),
+            netPerformance: new Big('17.68'),
+            netPerformancePercentage: new Big('0.11662269129287598945'),
+            marketPrice: 87.8,
+            quantity: new Big('1'),
+            symbol: 'NOVN.SW',
+            transactionCount: 2
+          }
+        ],
+        totalInvestment: new Big('75.80')
+      });
+    });
+  });
+});

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

@@ -1,15 +1,15 @@
 import { TimelineInfoInterface } from '@ghostfolio/api/app/portfolio/interfaces/timeline-info.interface';
 import { IDataGatheringItem } from '@ghostfolio/api/services/interfaces/interfaces';
 import { DATE_FORMAT, parseDate, resetHours } from '@ghostfolio/common/helper';
-import { TimelinePosition } from '@ghostfolio/common/interfaces';
+import { ResponseError, TimelinePosition } from '@ghostfolio/common/interfaces';
 import { Logger } from '@nestjs/common';
 import { Type as TypeOfOrder } from '@prisma/client';
 import Big from 'big.js';
 import {
   addDays,
+  addMilliseconds,
   addMonths,
   addYears,
-  differenceInDays,
   endOfDay,
   format,
   isAfter,
@@ -17,11 +17,12 @@ import {
   max,
   min
 } from 'date-fns';
-import { flatten, isNumber } from 'lodash';
+import { first, flatten, isNumber, sortBy } from 'lodash';
 
 import { CurrentRateService } from './current-rate.service';
 import { CurrentPositions } from './interfaces/current-positions.interface';
 import { GetValueObject } from './interfaces/get-value-object.interface';
+import { PortfolioOrderItem } from './interfaces/portfolio-calculator.interface';
 import { PortfolioOrder } from './interfaces/portfolio-order.interface';
 import { TimelinePeriod } from './interfaces/timeline-period.interface';
 import {
@@ -32,22 +33,39 @@ import { TransactionPointSymbol } from './interfaces/transaction-point-symbol.in
 import { TransactionPoint } from './interfaces/transaction-point.interface';
 
 export class PortfolioCalculator {
+  private static readonly CALCULATE_PERCENTAGE_PERFORMANCE_WITH_MAX_INVESTMENT =
+    true;
+
+  private static readonly ENABLE_LOGGING = false;
+
+  private currency: string;
+  private currentRateService: CurrentRateService;
+  private orders: PortfolioOrder[];
   private transactionPoints: TransactionPoint[];
 
-  public constructor(
-    private currentRateService: CurrentRateService,
-    private currency: string
-  ) {}
+  public constructor({
+    currency,
+    currentRateService,
+    orders
+  }: {
+    currency: string;
+    currentRateService: CurrentRateService;
+    orders: PortfolioOrder[];
+  }) {
+    this.currency = currency;
+    this.currentRateService = currentRateService;
+    this.orders = orders;
 
-  public computeTransactionPoints(orders: PortfolioOrder[]) {
-    orders.sort((a, b) => a.date.localeCompare(b.date));
+    this.orders.sort((a, b) => a.date.localeCompare(b.date));
+  }
 
+  public computeTransactionPoints() {
     this.transactionPoints = [];
     const symbols: { [symbol: string]: TransactionPointSymbol } = {};
 
     let lastDate: string = null;
     let lastTransactionPoint: TransactionPoint = null;
-    for (const order of orders) {
+    for (const order of this.orders) {
       const currentDate = order.date;
 
       let currentTransactionPointItem: TransactionPointSymbol;
@@ -59,17 +77,30 @@ export class PortfolioCalculator {
         const newQuantity = order.quantity
           .mul(factor)
           .plus(oldAccumulatedSymbol.quantity);
+
+        let investment = new Big(0);
+
+        if (newQuantity.gt(0)) {
+          if (order.type === 'BUY') {
+            investment = oldAccumulatedSymbol.investment.plus(
+              order.quantity.mul(unitPrice)
+            );
+          } else if (order.type === 'SELL') {
+            const averagePrice = oldAccumulatedSymbol.investment.div(
+              oldAccumulatedSymbol.quantity
+            );
+            investment = oldAccumulatedSymbol.investment.minus(
+              order.quantity.mul(averagePrice)
+            );
+          }
+        }
+
         currentTransactionPointItem = {
+          investment,
           currency: order.currency,
           dataSource: order.dataSource,
           fee: order.fee.plus(oldAccumulatedSymbol.fee),
           firstBuyDate: oldAccumulatedSymbol.firstBuyDate,
-          investment: newQuantity.eq(0)
-            ? new Big(0)
-            : unitPrice
-                .mul(order.quantity)
-                .mul(factor)
-                .plus(oldAccumulatedSymbol.investment),
           quantity: newQuantity,
           symbol: order.symbol,
           transactionCount: oldAccumulatedSymbol.transactionCount + 1
@@ -140,7 +171,6 @@ export class PortfolioCalculator {
         hasErrors: false,
         grossPerformance: new Big(0),
         grossPerformancePercentage: new Big(0),
-        netAnnualizedPerformance: new Big(0),
         netPerformance: new Big(0),
         netPerformancePercentage: new Big(0),
         positions: [],
@@ -195,6 +225,7 @@ export class PortfolioCalculator {
     const marketSymbolMap: {
       [date: string]: { [symbol: string]: Big };
     } = {};
+
     for (const marketSymbol of marketSymbols) {
       const date = format(marketSymbol.date, DATE_FORMAT);
       if (!marketSymbolMap[date]) {
@@ -207,112 +238,37 @@ export class PortfolioCalculator {
       }
     }
 
-    let hasErrors = false;
-    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) {
       firstIndex--;
     }
-    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++) {
-      const currentDate =
-        i === firstIndex ? startString : this.transactionPoints[i].date;
-      const nextDate =
-        i + 1 < this.transactionPoints.length
-          ? this.transactionPoints[i + 1].date
-          : todayString;
-
-      const items = this.transactionPoints[i].items;
-      for (const item of items) {
-        if (!marketSymbolMap[nextDate]?.[item.symbol]) {
-          invalidSymbols.push(item.symbol);
-          hasErrors = true;
-          Logger.warn(
-            `Missing value for symbol ${item.symbol} at ${nextDate}`,
-            'PortfolioCalculator'
-          );
-          continue;
-        }
-        let lastInvestment: Big = new Big(0);
-        let lastQuantity: Big = item.quantity;
-        if (lastInvestments[item.symbol] && lastQuantities[item.symbol]) {
-          lastInvestment = item.investment.minus(lastInvestments[item.symbol]);
-          lastQuantity = lastQuantities[item.symbol];
-        }
-
-        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;
-        }
-        if (i === firstIndex || !initialValues[item.symbol]) {
-          initialValues[item.symbol] = initialValue;
-        }
-        if (!item.quantity.eq(0)) {
-          if (!initialValue) {
-            invalidSymbols.push(item.symbol);
-            hasErrors = true;
-            Logger.warn(
-              `Missing value for symbol ${item.symbol} at ${currentDate}`,
-              'PortfolioCalculator'
-            );
-            continue;
-          }
-
-          const cashFlow = lastInvestment;
-          const endValue = marketSymbolMap[nextDate][item.symbol].mul(
-            item.quantity
-          );
-
-          const holdingPeriodReturn = endValue.div(initialValue.plus(cashFlow));
-          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;
-      }
-    }
-
     const positions: TimelinePosition[] = [];
+    let hasAnySymbolMetricsErrors = false;
+
+    const errors: ResponseError['errors'] = [];
 
     for (const item of lastTransactionPoint.items) {
       const marketValue = marketSymbolMap[todayString]?.[item.symbol];
-      const isValid = invalidSymbols.indexOf(item.symbol) === -1;
+
+      const {
+        grossPerformance,
+        grossPerformancePercentage,
+        hasErrors,
+        initialValue,
+        netPerformance,
+        netPerformancePercentage
+      } = this.getSymbolMetrics({
+        marketSymbolMap,
+        start,
+        symbol: item.symbol
+      });
+
+      hasAnySymbolMetricsErrors = hasAnySymbolMetricsErrors || hasErrors;
+      initialValues[item.symbol] = initialValue;
+
       positions.push({
         averagePrice: item.quantity.eq(0)
           ? new Big(0)
@@ -320,31 +276,33 @@ export class PortfolioCalculator {
         currency: item.currency,
         dataSource: item.dataSource,
         firstBuyDate: item.firstBuyDate,
-        grossPerformance: isValid
-          ? grossPerformance[item.symbol] ?? null
-          : null,
-        grossPerformancePercentage:
-          isValid && holdingPeriodReturns[item.symbol]
-            ? holdingPeriodReturns[item.symbol].minus(1)
+        grossPerformance: !hasErrors ? grossPerformance ?? null : null,
+        grossPerformancePercentage: !hasErrors
+          ? grossPerformancePercentage ?? null
           : 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)
+        netPerformance: !hasErrors ? netPerformance ?? null : null,
+        netPerformancePercentage: !hasErrors
+          ? netPerformancePercentage ?? null
           : null,
         quantity: item.quantity,
         symbol: item.symbol,
         transactionCount: item.transactionCount
       });
+
+      if (hasErrors) {
+        errors.push({ dataSource: item.dataSource, symbol: item.symbol });
       }
+    }
+
     const overall = this.calculateOverallPerformance(positions, initialValues);
 
     return {
       ...overall,
+      errors,
       positions,
-      hasErrors: hasErrors || overall.hasErrors
+      hasErrors: hasAnySymbolMetricsErrors || overall.hasErrors
     };
   }
 
@@ -462,20 +420,16 @@ export class PortfolioCalculator {
 
   private calculateOverallPerformance(
     positions: TimelinePosition[],
-    initialValues: { [p: string]: Big }
+    initialValues: { [symbol: string]: Big }
   ) {
-    let hasErrors = false;
     let currentValue = new Big(0);
-    let totalInvestment = new Big(0);
     let grossPerformance = new Big(0);
     let grossPerformancePercentage = new Big(0);
+    let hasErrors = false;
     let netPerformance = new Big(0);
     let netPerformancePercentage = new Big(0);
-    let completeInitialValue = new Big(0);
-    let netAnnualizedPerformance = new Big(0);
-
-    // use Date.now() to use the mock for today
-    const today = new Date(Date.now());
+    let sumOfWeights = new Big(0);
+    let totalInvestment = new Big(0);
 
     for (const currentPosition of positions) {
       if (currentPosition.marketPrice) {
@@ -485,36 +439,34 @@ export class PortfolioCalculator {
       } else {
         hasErrors = true;
       }
+
       totalInvestment = totalInvestment.plus(currentPosition.investment);
+
       if (currentPosition.grossPerformance) {
         grossPerformance = grossPerformance.plus(
           currentPosition.grossPerformance
         );
+
         netPerformance = netPerformance.plus(currentPosition.netPerformance);
       } else if (!currentPosition.quantity.eq(0)) {
         hasErrors = true;
       }
 
-      if (
-        currentPosition.grossPerformancePercentage &&
-        initialValues[currentPosition.symbol]
-      ) {
-        const currentInitialValue = initialValues[currentPosition.symbol];
-        completeInitialValue = completeInitialValue.plus(currentInitialValue);
+      if (currentPosition.grossPerformancePercentage) {
+        // Use the average from the initial value and the current investment as
+        // a weight
+        const weight = (initialValues[currentPosition.symbol] ?? new Big(0))
+          .plus(currentPosition.investment)
+          .div(2);
+
+        sumOfWeights = sumOfWeights.plus(weight);
+
         grossPerformancePercentage = grossPerformancePercentage.plus(
-          currentPosition.grossPerformancePercentage.mul(currentInitialValue)
-        );
-        netAnnualizedPerformance = netAnnualizedPerformance.plus(
-          this.getAnnualizedPerformancePercent({
-            daysInMarket: differenceInDays(
-              today,
-              parseDate(currentPosition.firstBuyDate)
-            ),
-            netPerformancePercent: currentPosition.netPerformancePercentage
-          }).mul(currentInitialValue)
+          currentPosition.grossPerformancePercentage.mul(weight)
         );
+
         netPerformancePercentage = netPerformancePercentage.plus(
-          currentPosition.netPerformancePercentage.mul(currentInitialValue)
+          currentPosition.netPerformancePercentage.mul(weight)
         );
       } else if (!currentPosition.quantity.eq(0)) {
         Logger.warn(
@@ -525,13 +477,12 @@ export class PortfolioCalculator {
       }
     }
 
-    if (!completeInitialValue.eq(0)) {
-      grossPerformancePercentage =
-        grossPerformancePercentage.div(completeInitialValue);
-      netPerformancePercentage =
-        netPerformancePercentage.div(completeInitialValue);
-      netAnnualizedPerformance =
-        netAnnualizedPerformance.div(completeInitialValue);
+    if (sumOfWeights.gt(0)) {
+      grossPerformancePercentage = grossPerformancePercentage.div(sumOfWeights);
+      netPerformancePercentage = netPerformancePercentage.div(sumOfWeights);
+    } else {
+      grossPerformancePercentage = new Big(0);
+      netPerformancePercentage = new Big(0);
     }
 
     return {
@@ -539,7 +490,6 @@ export class PortfolioCalculator {
       grossPerformance,
       grossPerformancePercentage,
       hasErrors,
-      netAnnualizedPerformance,
       netPerformance,
       netPerformancePercentage,
       totalInvestment
@@ -693,6 +643,356 @@ export class PortfolioCalculator {
     }
   }
 
+  private getSymbolMetrics({
+    marketSymbolMap,
+    start,
+    symbol
+  }: {
+    marketSymbolMap: {
+      [date: string]: { [symbol: string]: Big };
+    };
+    start: Date;
+    symbol: string;
+  }) {
+    let orders: PortfolioOrderItem[] = this.orders.filter((order) => {
+      return order.symbol === symbol;
+    });
+
+    if (orders.length <= 0) {
+      return {
+        hasErrors: false,
+        initialValue: new Big(0),
+        netPerformance: new Big(0),
+        netPerformancePercentage: new Big(0),
+        grossPerformance: new Big(0),
+        grossPerformancePercentage: new Big(0)
+      };
+    }
+
+    const dateOfFirstTransaction = new Date(first(orders).date);
+    const endDate = new Date(Date.now());
+
+    const unitPriceAtStartDate =
+      marketSymbolMap[format(start, DATE_FORMAT)]?.[symbol];
+
+    const unitPriceAtEndDate =
+      marketSymbolMap[format(endDate, DATE_FORMAT)]?.[symbol];
+
+    if (
+      !unitPriceAtEndDate ||
+      (!unitPriceAtStartDate && isBefore(dateOfFirstTransaction, start))
+    ) {
+      return {
+        hasErrors: true,
+        initialValue: new Big(0),
+        netPerformance: new Big(0),
+        netPerformancePercentage: new Big(0),
+        grossPerformance: new Big(0),
+        grossPerformancePercentage: new Big(0)
+      };
+    }
+
+    let averagePriceAtEndDate = new Big(0);
+    let averagePriceAtStartDate = new Big(0);
+    let feesAtStartDate = new Big(0);
+    let fees = new Big(0);
+    let grossPerformance = new Big(0);
+    let grossPerformanceAtStartDate = new Big(0);
+    let grossPerformanceFromSells = new Big(0);
+    let initialValue: Big;
+    let investmentAtStartDate: Big;
+    let lastAveragePrice = new Big(0);
+    let lastTransactionInvestment = new Big(0);
+    let lastValueOfInvestmentBeforeTransaction = new Big(0);
+    let maxTotalInvestment = new Big(0);
+    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);
+    let valueAtStartDate: Big;
+
+    // Add a synthetic order at the start and the end date
+    orders.push({
+      symbol,
+      currency: null,
+      date: format(start, DATE_FORMAT),
+      dataSource: null,
+      fee: new Big(0),
+      itemType: 'start',
+      name: '',
+      quantity: new Big(0),
+      type: TypeOfOrder.BUY,
+      unitPrice: unitPriceAtStartDate
+    });
+
+    orders.push({
+      symbol,
+      currency: null,
+      date: format(endDate, DATE_FORMAT),
+      dataSource: null,
+      fee: new Big(0),
+      itemType: 'end',
+      name: '',
+      quantity: new Big(0),
+      type: TypeOfOrder.BUY,
+      unitPrice: unitPriceAtEndDate
+    });
+
+    // Sort orders so that the start and end placeholder order are at the right
+    // position
+    orders = sortBy(orders, (order) => {
+      let sortIndex = new Date(order.date);
+
+      if (order.itemType === 'start') {
+        sortIndex = addMilliseconds(sortIndex, -1);
+      }
+
+      if (order.itemType === 'end') {
+        sortIndex = addMilliseconds(sortIndex, 1);
+      }
+
+      return sortIndex.getTime();
+    });
+
+    const indexOfStartOrder = orders.findIndex((order) => {
+      return order.itemType === 'start';
+    });
+
+    const indexOfEndOrder = orders.findIndex((order) => {
+      return order.itemType === 'end';
+    });
+
+    for (let i = 0; i < orders.length; i += 1) {
+      const order = orders[i];
+
+      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
+        order.unitPrice =
+          indexOfStartOrder === 0
+            ? orders[i + 1]?.unitPrice
+            : unitPriceAtStartDate;
+      }
+
+      // Calculate the average start price as soon as any units are held
+      if (
+        averagePriceAtStartDate.eq(0) &&
+        i >= indexOfStartOrder &&
+        totalUnits.gt(0)
+      ) {
+        averagePriceAtStartDate = totalInvestment.div(totalUnits);
+      }
+
+      const valueOfInvestmentBeforeTransaction = totalUnits.mul(
+        order.unitPrice
+      );
+
+      if (!investmentAtStartDate && i >= indexOfStartOrder) {
+        investmentAtStartDate = totalInvestment ?? new Big(0);
+        valueAtStartDate = valueOfInvestmentBeforeTransaction;
+      }
+
+      const transactionInvestment = order.quantity
+        .mul(order.unitPrice)
+        .mul(this.getFactor(order.type));
+
+      totalInvestment = totalInvestment.plus(transactionInvestment);
+
+      if (i >= indexOfStartOrder && totalInvestment.gt(maxTotalInvestment)) {
+        maxTotalInvestment = totalInvestment;
+      }
+
+      if (i === indexOfEndOrder && totalUnits.gt(0)) {
+        averagePriceAtEndDate = totalInvestment.div(totalUnits);
+      }
+
+      if (i >= indexOfStartOrder && !initialValue) {
+        if (
+          i === indexOfStartOrder &&
+          !valueOfInvestmentBeforeTransaction.eq(0)
+        ) {
+          initialValue = valueOfInvestmentBeforeTransaction;
+        } else if (transactionInvestment.gt(0)) {
+          initialValue = transactionInvestment;
+        }
+      }
+
+      fees = fees.plus(order.fee);
+
+      totalUnits = totalUnits.plus(
+        order.quantity.mul(this.getFactor(order.type))
+      );
+
+      const valueOfInvestment = totalUnits.mul(order.unitPrice);
+
+      const grossPerformanceFromSell =
+        order.type === TypeOfOrder.SELL
+          ? order.unitPrice.minus(lastAveragePrice).mul(order.quantity)
+          : new Big(0);
+
+      grossPerformanceFromSells = grossPerformanceFromSells.plus(
+        grossPerformanceFromSell
+      );
+
+      totalInvestmentWithGrossPerformanceFromSell =
+        totalInvestmentWithGrossPerformanceFromSell
+          .plus(transactionInvestment)
+          .plus(grossPerformanceFromSell);
+
+      lastAveragePrice = totalUnits.eq(0)
+        ? new Big(0)
+        : totalInvestmentWithGrossPerformanceFromSell.div(totalUnits);
+
+      const newGrossPerformance = valueOfInvestment
+        .minus(totalInvestmentWithGrossPerformanceFromSell)
+        .plus(grossPerformanceFromSells);
+
+      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)
+          );
+
+        const netHoldingPeriodReturn = valueOfInvestmentBeforeTransaction
+          .minus(fees.minus(feesAtStartDate))
+          .minus(
+            lastValueOfInvestmentBeforeTransaction.plus(
+              lastTransactionInvestment
+            )
+          )
+          .div(
+            lastValueOfInvestmentBeforeTransaction.plus(
+              lastTransactionInvestment
+            )
+          );
+
+        timeWeightedNetPerformancePercentage =
+          timeWeightedNetPerformancePercentage.mul(
+            new Big(1).plus(netHoldingPeriodReturn)
+          );
+      }
+
+      grossPerformance = newGrossPerformance;
+
+      lastTransactionInvestment = transactionInvestment;
+
+      lastValueOfInvestmentBeforeTransaction =
+        valueOfInvestmentBeforeTransaction;
+
+      if (order.itemType === 'start') {
+        feesAtStartDate = fees;
+        grossPerformanceAtStartDate = grossPerformance;
+      }
+    }
+
+    timeWeightedGrossPerformancePercentage =
+      timeWeightedGrossPerformancePercentage.minus(1);
+
+    timeWeightedNetPerformancePercentage =
+      timeWeightedNetPerformancePercentage.minus(1);
+
+    const totalGrossPerformance = grossPerformance.minus(
+      grossPerformanceAtStartDate
+    );
+
+    const totalNetPerformance = grossPerformance
+      .minus(grossPerformanceAtStartDate)
+      .minus(fees.minus(feesAtStartDate));
+
+    const maxInvestmentBetweenStartAndEndDate = valueAtStartDate.plus(
+      maxTotalInvestment.minus(investmentAtStartDate)
+    );
+
+    const grossPerformancePercentage =
+      PortfolioCalculator.CALCULATE_PERCENTAGE_PERFORMANCE_WITH_MAX_INVESTMENT ||
+      averagePriceAtStartDate.eq(0) ||
+      averagePriceAtEndDate.eq(0) ||
+      orders[indexOfStartOrder].unitPrice.eq(0)
+        ? maxInvestmentBetweenStartAndEndDate.gt(0)
+          ? totalGrossPerformance.div(maxInvestmentBetweenStartAndEndDate)
+          : new Big(0)
+        : // This formula has the issue that buying more units with a price
+          // lower than the average buying price results in a positive
+          // performance even if the market price stays constant
+          unitPriceAtEndDate
+            .div(averagePriceAtEndDate)
+            .div(
+              orders[indexOfStartOrder].unitPrice.div(averagePriceAtStartDate)
+            )
+            .minus(1);
+
+    const feesPerUnit = totalUnits.gt(0)
+      ? fees.minus(feesAtStartDate).div(totalUnits)
+      : new Big(0);
+
+    const netPerformancePercentage =
+      PortfolioCalculator.CALCULATE_PERCENTAGE_PERFORMANCE_WITH_MAX_INVESTMENT ||
+      averagePriceAtStartDate.eq(0) ||
+      averagePriceAtEndDate.eq(0) ||
+      orders[indexOfStartOrder].unitPrice.eq(0)
+        ? maxInvestmentBetweenStartAndEndDate.gt(0)
+          ? totalNetPerformance.div(maxInvestmentBetweenStartAndEndDate)
+          : new Big(0)
+        : // This formula has the issue that buying more units with a price
+          // lower than the average buying price results in a positive
+          // performance even if the market price stays constant
+          unitPriceAtEndDate
+            .minus(feesPerUnit)
+            .div(averagePriceAtEndDate)
+            .div(
+              orders[indexOfStartOrder].unitPrice.div(averagePriceAtStartDate)
+            )
+            .minus(1);
+
+    if (PortfolioCalculator.ENABLE_LOGGING) {
+      console.log(
+        `
+        ${symbol}
+        Unit price: ${orders[indexOfStartOrder].unitPrice.toFixed(
+          2
+        )} -> ${unitPriceAtEndDate.toFixed(2)}
+        Average price: ${averagePriceAtStartDate.toFixed(
+          2
+        )} -> ${averagePriceAtEndDate.toFixed(2)}
+        Max. total investment: ${maxTotalInvestment.toFixed(2)}
+        Gross performance: ${totalGrossPerformance.toFixed(
+          2
+        )} / ${grossPerformancePercentage.mul(100).toFixed(2)}%
+        Fees per unit: ${feesPerUnit.toFixed(2)}
+        Net performance: ${totalNetPerformance.toFixed(
+          2
+        )} / ${netPerformancePercentage.mul(100).toFixed(2)}%`
+      );
+    }
+
+    return {
+      initialValue,
+      grossPerformancePercentage,
+      netPerformancePercentage,
+      hasErrors: totalUnits.gt(0) && (!initialValue || !unitPriceAtEndDate),
+      netPerformance: totalNetPerformance,
+      grossPerformance: totalGrossPerformance
+    };
+  }
+
   private isNextItemActive(
     timelineSpecification: TimelineSpecification[],
     currentDate: Date,

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

@@ -1,26 +0,0 @@
-import type { RequestWithUser } from '@ghostfolio/common/types';
-import { Inject, Injectable } from '@nestjs/common';
-import { REQUEST } from '@nestjs/core';
-
-import { PortfolioService } from './portfolio.service';
-import { PortfolioServiceNew } from './portfolio.service-new';
-
-@Injectable()
-export class PortfolioServiceStrategy {
-  public constructor(
-    private readonly portfolioService: PortfolioService,
-    private readonly portfolioServiceNew: PortfolioServiceNew,
-    @Inject(REQUEST) private readonly request: RequestWithUser
-  ) {}
-
-  public get(newCalculationEngine?: boolean) {
-    if (
-      newCalculationEngine ||
-      this.request.user?.Settings?.settings?.['isNewCalculationEngine'] === true
-    ) {
-      return this.portfolioServiceNew;
-    }
-
-    return this.portfolioService;
-  }
-}

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

@@ -38,7 +38,7 @@ import { StatusCodes, getReasonPhrase } from 'http-status-codes';
 
 import { PortfolioPositionDetail } from './interfaces/portfolio-position-detail.interface';
 import { PortfolioPositions } from './interfaces/portfolio-positions.interface';
-import { PortfolioServiceStrategy } from './portfolio-service.strategy';
+import { PortfolioService } from './portfolio.service';
 
 @Controller('portfolio')
 export class PortfolioController {
@@ -46,7 +46,7 @@ export class PortfolioController {
     private readonly accessService: AccessService,
     private readonly configurationService: ConfigurationService,
     private readonly exchangeRateDataService: ExchangeRateDataService,
-    private readonly portfolioServiceStrategy: PortfolioServiceStrategy,
+    private readonly portfolioService: PortfolioService,
     @Inject(REQUEST) private readonly request: RequestWithUser,
     private readonly userService: UserService
   ) {}
@@ -57,9 +57,10 @@ export class PortfolioController {
     @Headers('impersonation-id') impersonationId: string,
     @Query('range') range
   ): Promise<PortfolioChart> {
-    const historicalDataContainer = await this.portfolioServiceStrategy
-      .get()
-      .getChart(impersonationId, range);
+    const historicalDataContainer = await this.portfolioService.getChart(
+      impersonationId,
+      range
+    );
 
     let chartData = historicalDataContainer.items;
 
@@ -104,24 +105,18 @@ export class PortfolioController {
   @UseInterceptors(TransformDataSourceInResponseInterceptor)
   public async getDetails(
     @Headers('impersonation-id') impersonationId: string,
-    @Query('range') range
+    @Query('range') range,
+    @Query('tags') tags?: string
   ): Promise<PortfolioDetails & { hasError: boolean }> {
-    if (
-      this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION') &&
-      this.request.user.subscription.type === 'Basic'
-    ) {
-      throw new HttpException(
-        getReasonPhrase(StatusCodes.FORBIDDEN),
-        StatusCodes.FORBIDDEN
-      );
-    }
-
     let hasError = false;
 
     const { accounts, holdings, hasErrors } =
-      await this.portfolioServiceStrategy
-        .get(true)
-        .getDetails(impersonationId, this.request.user.id, range);
+      await this.portfolioService.getDetails(
+        impersonationId,
+        this.request.user.id,
+        range,
+        tags?.split(',')
+      );
 
     if (hasErrors || hasNotDefinedValuesInObject(holdings)) {
       hasError = true;
@@ -162,7 +157,15 @@ export class PortfolioController {
       }
     }
 
-    return { accounts, hasError, holdings };
+    const isBasicUser =
+      this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION') &&
+      this.request.user.subscription.type === 'Basic';
+
+    return {
+      hasError,
+      accounts: tags ? {} : accounts,
+      holdings: isBasicUser ? {} : holdings
+    };
   }
 
   @Get('investments')
@@ -180,9 +183,9 @@ export class PortfolioController {
       );
     }
 
-    let investments = await this.portfolioServiceStrategy
-      .get()
-      .getInvestments(impersonationId);
+    let investments = await this.portfolioService.getInvestments(
+      impersonationId
+    );
 
     if (
       impersonationId ||
@@ -209,9 +212,10 @@ export class PortfolioController {
     @Headers('impersonation-id') impersonationId: string,
     @Query('range') range
   ): Promise<PortfolioPerformanceResponse> {
-    const performanceInformation = await this.portfolioServiceStrategy
-      .get()
-      .getPerformance(impersonationId, range);
+    const performanceInformation = await this.portfolioService.getPerformance(
+      impersonationId,
+      range
+    );
 
     if (
       impersonationId ||
@@ -234,9 +238,10 @@ export class PortfolioController {
     @Headers('impersonation-id') impersonationId: string,
     @Query('range') range
   ): Promise<PortfolioPositions> {
-    const result = await this.portfolioServiceStrategy
-      .get()
-      .getPositions(impersonationId, range);
+    const result = await this.portfolioService.getPositions(
+      impersonationId,
+      range
+    );
 
     if (
       impersonationId ||
@@ -276,9 +281,10 @@ export class PortfolioController {
       hasDetails = user.subscription.type === 'Premium';
     }
 
-    const { holdings } = await this.portfolioServiceStrategy
-      .get(true)
-      .getDetails(access.userId, access.userId);
+    const { holdings } = await this.portfolioService.getDetails(
+      access.userId,
+      access.userId
+    );
 
     const portfolioPublicDetails: PortfolioPublicDetails = {
       hasDetails,
@@ -330,9 +336,7 @@ export class PortfolioController {
       );
     }
 
-    let summary = await this.portfolioServiceStrategy
-      .get()
-      .getSummary(impersonationId);
+    let summary = await this.portfolioService.getSummary(impersonationId);
 
     if (
       impersonationId ||
@@ -366,9 +370,11 @@ export class PortfolioController {
     @Param('dataSource') dataSource,
     @Param('symbol') symbol
   ): Promise<PortfolioPositionDetail> {
-    let position = await this.portfolioServiceStrategy
-      .get()
-      .getPosition(dataSource, impersonationId, symbol);
+    let position = await this.portfolioService.getPosition(
+      dataSource,
+      impersonationId,
+      symbol
+    );
 
     if (position) {
       if (
@@ -409,6 +415,6 @@ export class PortfolioController {
       );
     }
 
-    return await this.portfolioServiceStrategy.get().getReport(impersonationId);
+    return await this.portfolioService.getReport(impersonationId);
   }
 }

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

@@ -13,15 +13,13 @@ import { SymbolProfileModule } from '@ghostfolio/api/services/symbol-profile.mod
 import { Module } from '@nestjs/common';
 
 import { CurrentRateService } from './current-rate.service';
-import { PortfolioServiceStrategy } from './portfolio-service.strategy';
 import { PortfolioController } from './portfolio.controller';
 import { PortfolioService } from './portfolio.service';
-import { PortfolioServiceNew } from './portfolio.service-new';
 import { RulesService } from './rules.service';
 
 @Module({
   controllers: [PortfolioController],
-  exports: [PortfolioServiceStrategy],
+  exports: [PortfolioService],
   imports: [
     AccessModule,
     ConfigurationModule,
@@ -39,8 +37,6 @@ import { RulesService } from './rules.service';
     AccountService,
     CurrentRateService,
     PortfolioService,
-    PortfolioServiceNew,
-    PortfolioServiceStrategy,
     RulesService
   ]
 })

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

@@ -5,7 +5,6 @@ import { CurrentRateService } from '@ghostfolio/api/app/portfolio/current-rate.s
 import { PortfolioOrder } from '@ghostfolio/api/app/portfolio/interfaces/portfolio-order.interface';
 import { TimelineSpecification } from '@ghostfolio/api/app/portfolio/interfaces/timeline-specification.interface';
 import { TransactionPoint } from '@ghostfolio/api/app/portfolio/interfaces/transaction-point.interface';
-import { PortfolioCalculator } from '@ghostfolio/api/app/portfolio/portfolio-calculator';
 import { UserSettings } from '@ghostfolio/api/app/user/interfaces/user-settings.interface';
 import { UserService } from '@ghostfolio/api/app/user/user.service';
 import { AccountClusterRiskCurrentInvestment } from '@ghostfolio/api/models/rules/account-cluster-risk/current-investment';
@@ -41,6 +40,7 @@ import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.in
 import type {
   AccountWithValue,
   DateRange,
+  Market,
   OrderWithAccount,
   RequestWithUser
 } from '@ghostfolio/common/types';
@@ -49,6 +49,7 @@ import { REQUEST } from '@nestjs/core';
 import { AssetClass, DataSource, Type as TypeOfOrder } from '@prisma/client';
 import Big from 'big.js';
 import {
+  differenceInDays,
   endOfToday,
   format,
   isAfter,
@@ -68,8 +69,12 @@ import {
   HistoricalDataItem,
   PortfolioPositionDetail
 } from './interfaces/portfolio-position-detail.interface';
+import { PortfolioCalculator } from './portfolio-calculator';
 import { RulesService } from './rules.service';
 
+const developedMarkets = require('../../assets/countries/developed-markets.json');
+const emergingMarkets = require('../../assets/countries/emerging-markets.json');
+
 @Injectable()
 export class PortfolioService {
   public constructor(
@@ -159,15 +164,18 @@ export class PortfolioService {
   ): Promise<InvestmentItem[]> {
     const userId = await this.getUserId(aImpersonationId, this.request.user.id);
 
-    const portfolioCalculator = new PortfolioCalculator(
-      this.currentRateService,
-      this.request.user.Settings.currency
-    );
-
-    const { transactionPoints } = await this.getTransactionPoints({
+    const { portfolioOrders, transactionPoints } =
+      await this.getTransactionPoints({
         userId,
         includeDrafts: true
       });
+
+    const portfolioCalculator = new PortfolioCalculator({
+      currency: this.request.user.Settings.currency,
+      currentRateService: this.currentRateService,
+      orders: portfolioOrders
+    });
+
     portfolioCalculator.setTransactionPoints(transactionPoints);
     if (transactionPoints.length === 0) {
       return [];
@@ -208,12 +216,17 @@ export class PortfolioService {
   ): Promise<HistoricalDataContainer> {
     const userId = await this.getUserId(aImpersonationId, this.request.user.id);
 
-    const portfolioCalculator = new PortfolioCalculator(
-      this.currentRateService,
-      this.request.user.Settings.currency
-    );
+    const { portfolioOrders, transactionPoints } =
+      await this.getTransactionPoints({
+        userId
+      });
+
+    const portfolioCalculator = new PortfolioCalculator({
+      currency: this.request.user.Settings.currency,
+      currentRateService: this.currentRateService,
+      orders: portfolioOrders
+    });
 
-    const { transactionPoints } = await this.getTransactionPoints({ userId });
     portfolioCalculator.setTransactionPoints(transactionPoints);
     if (transactionPoints.length === 0) {
       return {
@@ -290,7 +303,8 @@ export class PortfolioService {
   public async getDetails(
     aImpersonationId: string,
     aUserId: string,
-    aDateRange: DateRange = 'max'
+    aDateRange: DateRange = 'max',
+    tags?: string[]
   ): Promise<PortfolioDetails & { hasErrors: boolean }> {
     const userId = await this.getUserId(aImpersonationId, aUserId);
     const user = await this.userService.user({ id: userId });
@@ -302,15 +316,19 @@ export class PortfolioService {
       this.request.user?.Settings?.currency ??
       user.Settings?.currency ??
       baseCurrency;
-    const portfolioCalculator = new PortfolioCalculator(
-      this.currentRateService,
-      userCurrency
-    );
 
-    const { orders, transactionPoints } = await this.getTransactionPoints({
+    const { orders, portfolioOrders, transactionPoints } =
+      await this.getTransactionPoints({
+        tags,
         userId
       });
 
+    const portfolioCalculator = new PortfolioCalculator({
+      currency: userCurrency,
+      currentRateService: this.currentRateService,
+      orders: portfolioOrders
+    });
+
     portfolioCalculator.setTransactionPoints(transactionPoints);
 
     const portfolioStart = parseDate(
@@ -368,7 +386,31 @@ export class PortfolioService {
       const value = item.quantity.mul(item.marketPrice);
       const symbolProfile = symbolProfileMap[item.symbol];
       const dataProviderResponse = dataProviderResponses[item.symbol];
+
+      const markets: { [key in Market]: number } = {
+        developedMarkets: 0,
+        emergingMarkets: 0,
+        otherMarkets: 0
+      };
+
+      for (const country of symbolProfile.countries) {
+        if (developedMarkets.includes(country.code)) {
+          markets.developedMarkets = new Big(markets.developedMarkets)
+            .plus(country.weight)
+            .toNumber();
+        } else if (emergingMarkets.includes(country.code)) {
+          markets.emergingMarkets = new Big(markets.emergingMarkets)
+            .plus(country.weight)
+            .toNumber();
+        } else {
+          markets.otherMarkets = new Big(markets.otherMarkets)
+            .plus(country.weight)
+            .toNumber();
+        }
+      }
+
       holdings[item.symbol] = {
+        markets,
         allocationCurrent: value.div(totalValue).toNumber(),
         allocationInvestment: item.investment.div(totalInvestment).toNumber(),
         assetClass: symbolProfile.assetClass,
@@ -401,9 +443,11 @@ export class PortfolioService {
       value: totalValue
     });
 
+    if (tags === undefined) {
       for (const symbol of Object.keys(cashPositions)) {
         holdings[symbol] = cashPositions[symbol];
       }
+    }
 
     const accounts = await this.getValueOfAccounts(
       orders,
@@ -474,11 +518,13 @@ export class PortfolioService {
         unitPrice: new Big(order.unitPrice)
       }));
 
-    const portfolioCalculator = new PortfolioCalculator(
-      this.currentRateService,
-      positionCurrency
-    );
-    portfolioCalculator.computeTransactionPoints(portfolioOrders);
+    const portfolioCalculator = new PortfolioCalculator({
+      currency: positionCurrency,
+      currentRateService: this.currentRateService,
+      orders: portfolioOrders
+    });
+
+    portfolioCalculator.computeTransactionPoints();
     const transactionPoints = portfolioCalculator.getTransactionPoints();
 
     const portfolioStart = parseDate(transactionPoints[0].date);
@@ -657,12 +703,16 @@ export class PortfolioService {
   ): Promise<{ hasErrors: boolean; positions: Position[] }> {
     const userId = await this.getUserId(aImpersonationId, this.request.user.id);
 
-    const portfolioCalculator = new PortfolioCalculator(
-      this.currentRateService,
-      this.request.user.Settings.currency
-    );
+    const { portfolioOrders, transactionPoints } =
+      await this.getTransactionPoints({
+        userId
+      });
 
-    const { transactionPoints } = await this.getTransactionPoints({ userId });
+    const portfolioCalculator = new PortfolioCalculator({
+      currency: this.request.user.Settings.currency,
+      currentRateService: this.currentRateService,
+      orders: portfolioOrders
+    });
 
     if (transactionPoints?.length <= 0) {
       return {
@@ -730,18 +780,21 @@ export class PortfolioService {
   ): Promise<PortfolioPerformanceResponse> {
     const userId = await this.getUserId(aImpersonationId, this.request.user.id);
 
-    const portfolioCalculator = new PortfolioCalculator(
-      this.currentRateService,
-      this.request.user.Settings.currency
-    );
+    const { portfolioOrders, transactionPoints } =
+      await this.getTransactionPoints({
+        userId
+      });
 
-    const { transactionPoints } = await this.getTransactionPoints({ userId });
+    const portfolioCalculator = new PortfolioCalculator({
+      currency: this.request.user.Settings.currency,
+      currentRateService: this.currentRateService,
+      orders: portfolioOrders
+    });
 
     if (transactionPoints?.length <= 0) {
       return {
         hasErrors: false,
         performance: {
-          annualizedPerformancePercent: 0,
           currentGrossPerformance: 0,
           currentGrossPerformancePercent: 0,
           currentNetPerformance: 0,
@@ -760,26 +813,34 @@ export class PortfolioService {
     );
 
     const hasErrors = currentPositions.hasErrors;
-    const annualizedPerformancePercent =
-      currentPositions.netAnnualizedPerformance.toNumber();
     const currentValue = currentPositions.currentValue.toNumber();
-    const currentGrossPerformance =
-      currentPositions.grossPerformance.toNumber();
-    const currentGrossPerformancePercent =
-      currentPositions.grossPerformancePercentage.toNumber();
-    const currentNetPerformance = currentPositions.netPerformance.toNumber();
-    const currentNetPerformancePercent =
-      currentPositions.netPerformancePercentage.toNumber();
+    const currentGrossPerformance = currentPositions.grossPerformance;
+    let currentGrossPerformancePercent =
+      currentPositions.grossPerformancePercentage;
+    const currentNetPerformance = currentPositions.netPerformance;
+    let currentNetPerformancePercent =
+      currentPositions.netPerformancePercentage;
+
+    if (currentGrossPerformance.mul(currentGrossPerformancePercent).lt(0)) {
+      // If algebraic sign is different, harmonize it
+      currentGrossPerformancePercent = currentGrossPerformancePercent.mul(-1);
+    }
+
+    if (currentNetPerformance.mul(currentNetPerformancePercent).lt(0)) {
+      // If algebraic sign is different, harmonize it
+      currentNetPerformancePercent = currentNetPerformancePercent.mul(-1);
+    }
 
     return {
+      errors: currentPositions.errors,
       hasErrors: currentPositions.hasErrors || hasErrors,
       performance: {
-        annualizedPerformancePercent,
-        currentGrossPerformance,
-        currentGrossPerformancePercent,
-        currentNetPerformance,
-        currentNetPerformancePercent,
-        currentValue
+        currentValue,
+        currentGrossPerformance: currentGrossPerformance.toNumber(),
+        currentGrossPerformancePercent:
+          currentGrossPerformancePercent.toNumber(),
+        currentNetPerformance: currentNetPerformance.toNumber(),
+        currentNetPerformancePercent: currentNetPerformancePercent.toNumber()
       }
     };
   }
@@ -788,7 +849,8 @@ export class PortfolioService {
     const currency = this.request.user.Settings.currency;
     const userId = await this.getUserId(impersonationId, this.request.user.id);
 
-    const { orders, transactionPoints } = await this.getTransactionPoints({
+    const { orders, portfolioOrders, transactionPoints } =
+      await this.getTransactionPoints({
         userId
       });
 
@@ -798,10 +860,12 @@ export class PortfolioService {
       };
     }
 
-    const portfolioCalculator = new PortfolioCalculator(
-      this.currentRateService,
-      currency
-    );
+    const portfolioCalculator = new PortfolioCalculator({
+      currency,
+      currentRateService: this.currentRateService,
+      orders: portfolioOrders
+    });
+
     portfolioCalculator.setTransactionPoints(transactionPoints);
 
     const portfolioStart = parseDate(transactionPoints[0].date);
@@ -907,8 +971,24 @@ export class PortfolioService {
       .plus(items)
       .toNumber();
 
+    const daysInMarket = differenceInDays(new Date(), firstOrderDate);
+
+    const annualizedPerformancePercent = new PortfolioCalculator({
+      currency: userCurrency,
+      currentRateService: this.currentRateService,
+      orders: []
+    })
+      .getAnnualizedPerformancePercent({
+        daysInMarket,
+        netPerformancePercent: new Big(
+          performanceInformation.performance.currentNetPerformancePercent
+        )
+      })
+      ?.toNumber();
+
     return {
       ...performanceInformation.performance,
+      annualizedPerformancePercent,
       cash,
       dividend,
       fees,
@@ -917,8 +997,6 @@ export class PortfolioService {
       netWorth,
       totalBuy,
       totalSell,
-      annualizedPerformancePercent:
-        performanceInformation.performance.annualizedPerformancePercent,
       committedFunds: committedFunds.toNumber(),
       emergencyFund: emergencyFund.toNumber(),
       ordersCount: orders.filter((order) => {
@@ -937,8 +1015,8 @@ export class PortfolioService {
     cashDetails: CashDetails;
     emergencyFund: Big;
     investment: Big;
-    userCurrency: string;
     value: Big;
+    userCurrency: string;
   }) {
     const cashPositions: PortfolioDetails['holdings'] = {};
 
@@ -1104,25 +1182,29 @@ export class PortfolioService {
 
   private async getTransactionPoints({
     includeDrafts = false,
+    tags,
     userId
   }: {
     includeDrafts?: boolean;
+    tags?: string[];
     userId: string;
   }): Promise<{
     transactionPoints: TransactionPoint[];
     orders: OrderWithAccount[];
+    portfolioOrders: PortfolioOrder[];
   }> {
     const userCurrency = this.request.user?.Settings?.currency ?? baseCurrency;
 
     const orders = await this.orderService.getOrders({
       includeDrafts,
+      tags,
       userCurrency,
       userId,
       types: ['BUY', 'SELL']
     });
 
     if (orders.length <= 0) {
-      return { transactionPoints: [], orders: [] };
+      return { transactionPoints: [], orders: [], portfolioOrders: [] };
     }
 
     const portfolioOrders: PortfolioOrder[] = orders.map((order) => ({
@@ -1149,14 +1231,18 @@ export class PortfolioService {
       )
     }));
 
-    const portfolioCalculator = new PortfolioCalculator(
-      this.currentRateService,
-      userCurrency
-    );
-    portfolioCalculator.computeTransactionPoints(portfolioOrders);
+    const portfolioCalculator = new PortfolioCalculator({
+      currency: userCurrency,
+      currentRateService: this.currentRateService,
+      orders: portfolioOrders
+    });
+
+    portfolioCalculator.computeTransactionPoints();
+
     return {
       transactionPoints: portfolioCalculator.getTransactionPoints(),
-      orders
+      orders,
+      portfolioOrders
     };
   }
 

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

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

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

@@ -5,10 +5,6 @@ export class UpdateUserSettingDto {
   @IsOptional()
   emergencyFund?: number;
 
-  @IsBoolean()
-  @IsOptional()
-  isNewCalculationEngine?: boolean;
-
   @IsBoolean()
   @IsOptional()
   isRestrictedView?: boolean;
@@ -16,4 +12,8 @@ export class UpdateUserSettingDto {
   @IsString()
   @IsOptional()
   locale?: string;
+
+  @IsNumber()
+  @IsOptional()
+  savingsRate?: number;
 }

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

@@ -34,7 +34,7 @@ import { UserService } from './user.service';
 export class UserController {
   public constructor(
     private readonly configurationService: ConfigurationService,
-    private jwtService: JwtService,
+    private readonly jwtService: JwtService,
     private readonly propertyService: PropertyService,
     @Inject(REQUEST) private readonly request: RequestWithUser,
     private readonly userService: UserService

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

@@ -2,6 +2,7 @@ import { SubscriptionModule } from '@ghostfolio/api/app/subscription/subscriptio
 import { ConfigurationModule } from '@ghostfolio/api/services/configuration.module';
 import { PrismaModule } from '@ghostfolio/api/services/prisma.module';
 import { PropertyModule } from '@ghostfolio/api/services/property/property.module';
+import { TagModule } from '@ghostfolio/api/services/tag/tag.module';
 import { Module } from '@nestjs/common';
 import { JwtModule } from '@nestjs/jwt';
 
@@ -19,7 +20,8 @@ import { UserService } from './user.service';
     }),
     PrismaModule,
     PropertyModule,
-    SubscriptionModule
+    SubscriptionModule,
+    TagModule
   ],
   providers: [UserService]
 })

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

@@ -2,6 +2,7 @@ import { SubscriptionService } from '@ghostfolio/api/app/subscription/subscripti
 import { ConfigurationService } from '@ghostfolio/api/services/configuration.service';
 import { PrismaService } from '@ghostfolio/api/services/prisma.service';
 import { PropertyService } from '@ghostfolio/api/services/property/property.service';
+import { TagService } from '@ghostfolio/api/services/tag/tag.service';
 import {
   PROPERTY_IS_READ_ONLY_MODE,
   baseCurrency,
@@ -13,7 +14,6 @@ import {
   hasRole,
   permissions
 } from '@ghostfolio/common/permissions';
-import { SubscriptionType } from '@ghostfolio/common/types/subscription.type';
 import { Injectable } from '@nestjs/common';
 import { Prisma, Role, User, ViewMode } from '@prisma/client';
 
@@ -30,7 +30,8 @@ export class UserService {
     private readonly configurationService: ConfigurationService,
     private readonly prismaService: PrismaService,
     private readonly propertyService: PropertyService,
-    private readonly subscriptionService: SubscriptionService
+    private readonly subscriptionService: SubscriptionService,
+    private readonly tagService: TagService
   ) {}
 
   public async getUser(
@@ -51,12 +52,21 @@ export class UserService {
       orderBy: { User: { alias: 'asc' } },
       where: { GranteeUser: { id } }
     });
+    let tags = await this.tagService.getByUser(id);
+
+    if (
+      this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION') &&
+      subscription.type === 'Basic'
+    ) {
+      tags = [];
+    }
 
     return {
       alias,
       id,
       permissions,
       subscription,
+      tags,
       access: access.map((accessItem) => {
         return {
           alias: accessItem.User.alias,
@@ -147,13 +157,6 @@ export class UserService {
       user.subscription = this.subscriptionService.getSubscription(
         userFromDatabase?.Subscription
       );
-
-      if (user.subscription.type === SubscriptionType.Basic) {
-        user.permissions = user.permissions.filter((permission) => {
-          return permission !== permissions.updateViewMode;
-        });
-        user.Settings.viewMode = ViewMode.ZEN;
-      }
     }
 
     return user;

apps/api/src/services/cryptocurrency/custom-cryptocurrencies.json

@@ -4,8 +4,10 @@
   "ATOM": "Cosmos",
   "AVAX": "Avalanche",
   "DOT": "Polkadot",
+  "LUNA1": "Terra",
   "MATIC": "Polygon",
   "MINA": "Mina Protocol",
+  "RUNE": "THORChain",
   "SHIB": "Shiba Inu",
   "SOL": "Solana",
   "UNI3": "Uniswap"

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

@@ -17,8 +17,6 @@ import { format, subMonths, subWeeks, subYears } from 'date-fns';
 
 @Injectable()
 export class RakutenRapidApiService implements DataProviderInterface {
-  public static FEAR_AND_GREED_INDEX_NAME = 'Fear & Greed Index';
-
   public constructor(
     private readonly configurationService: ConfigurationService,
     private readonly prismaService: PrismaService

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

@@ -16,17 +16,17 @@ import {
   DataSource,
   SymbolProfile
 } from '@prisma/client';
-import * as bent from 'bent';
 import Big from 'big.js';
 import { countries } from 'countries-list';
 import { addDays, format, isSameDay } from 'date-fns';
 import yahooFinance from 'yahoo-finance2';
-import type { Price } from 'yahoo-finance2/dist/esm/src/modules/quoteSummary-iface';
+import type {
+  Price,
+  QuoteSummaryResult
+} from 'yahoo-finance2/dist/esm/src/modules/quoteSummary-iface';
 
 @Injectable()
 export class YahooFinanceService implements DataProviderInterface {
-  private readonly yahooFinanceHostname = 'https://query1.finance.yahoo.com';
-
   public constructor(
     private readonly cryptocurrencyService: CryptocurrencyService
   ) {}
@@ -92,8 +92,7 @@ export class YahooFinanceService implements DataProviderInterface {
       response.assetSubClass = assetSubClass;
       response.currency = assetProfile.price.currency;
       response.dataSource = this.getName();
-      response.name =
-        assetProfile.price.longName || assetProfile.price.shortName || symbol;
+      response.name = this.formatName(assetProfile);
       response.symbol = aSymbol;
 
       if (
@@ -244,16 +243,7 @@ export class YahooFinanceService implements DataProviderInterface {
     const items: LookupItem[] = [];
 
     try {
-      const get = bent(
-        `${this.yahooFinanceHostname}/v1/finance/search?q=${encodeURIComponent(
-          aQuery
-        )}&lang=en-US&region=US&quotesCount=8&newsCount=0&enableFuzzyQuery=false&quotesQueryId=tss_match_phrase_query&multiQuoteQueryId=multi_quote_single_token_query&newsQueryId=news_cie_vespa&enableCb=true&enableNavLinks=false&enableEnhancedTrivialQuery=true`,
-        'GET',
-        'json',
-        200
-      );
-
-      const searchResult = await get();
+      const searchResult = await yahooFinance.search(aQuery);
 
       const quotes = searchResult.quotes
         .filter((quote) => {
@@ -279,20 +269,24 @@ export class YahooFinanceService implements DataProviderInterface {
           return true;
         });
 
-      const marketData = await this.getQuotes(
+      const marketData = await yahooFinance.quote(
         quotes.map(({ symbol }) => {
           return symbol;
         })
       );
 
-      for (const [symbol, value] of Object.entries(marketData)) {
-        const quote = quotes.find((currentQuote: any) => {
-          return currentQuote.symbol === symbol;
+      for (const marketDataItem of marketData) {
+        const quote = quotes.find((currentQuote) => {
+          return currentQuote.symbol === marketDataItem.symbol;
         });
 
+        const symbol = this.convertFromYahooFinanceSymbol(
+          marketDataItem.symbol
+        );
+
         items.push({
           symbol,
-          currency: value.currency,
+          currency: marketDataItem.currency,
           dataSource: this.getName(),
           name: quote?.longname || quote?.shortname || symbol
         });
@@ -304,6 +298,25 @@ export class YahooFinanceService implements DataProviderInterface {
     return { items };
   }
 
+  private formatName(aAssetProfile: QuoteSummaryResult) {
+    let name = aAssetProfile.price.longName;
+
+    if (name) {
+      name = name.replace('iShares ETF (CH) - ', '');
+      name = name.replace('iShares III Public Limited Company - ', '');
+      name = name.replace('iShares VI Public Limited Company - ', '');
+      name = name.replace('iShares VII PLC - ', '');
+      name = name.replace('Multi Units Luxembourg - ', '');
+      name = name.replace('VanEck ETFs N.V. - ', '');
+      name = name.replace('Vaneck Vectors Ucits Etfs Plc - ', '');
+      name = name.replace('Vanguard Funds Public Limited Company - ', '');
+      name = name.replace('Vanguard Index Funds - ', '');
+      name = name.replace('Xtrackers (IE) Plc - ', '');
+    }
+
+    return name || aAssetProfile.price.shortName || aAssetProfile.price.symbol;
+  }
+
   private parseAssetClass(aPrice: Price): {
     assetClass: AssetClass;
     assetSubClass: AssetSubClass;

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

@@ -4,7 +4,12 @@ import { UNKNOWN_KEY } from '@ghostfolio/common/config';
 import { Country } from '@ghostfolio/common/interfaces/country.interface';
 import { Sector } from '@ghostfolio/common/interfaces/sector.interface';
 import { Injectable } from '@nestjs/common';
-import { DataSource, Prisma, SymbolProfile } from '@prisma/client';
+import {
+  DataSource,
+  Prisma,
+  SymbolProfile,
+  SymbolProfileOverrides
+} from '@prisma/client';
 import { continents, countries } from 'countries-list';
 
 import { ScraperConfiguration } from './data-provider/ghostfolio-scraper-api/interfaces/scraper-configuration.interface';
@@ -36,6 +41,7 @@ export class SymbolProfileService {
   ): Promise<EnhancedSymbolProfile[]> {
     return this.prismaService.symbolProfile
       .findMany({
+        include: { SymbolProfileOverrides: true },
         where: {
           symbol: {
             in: symbols
@@ -45,14 +51,38 @@ export class SymbolProfileService {
       .then((symbolProfiles) => this.getSymbols(symbolProfiles));
   }
 
-  private getSymbols(symbolProfiles: SymbolProfile[]): EnhancedSymbolProfile[] {
-    return symbolProfiles.map((symbolProfile) => ({
+  private getSymbols(
+    symbolProfiles: (SymbolProfile & {
+      SymbolProfileOverrides: SymbolProfileOverrides;
+    })[]
+  ): EnhancedSymbolProfile[] {
+    return symbolProfiles.map((symbolProfile) => {
+      const item = {
         ...symbolProfile,
         countries: this.getCountries(symbolProfile),
         scraperConfiguration: this.getScraperConfiguration(symbolProfile),
         sectors: this.getSectors(symbolProfile),
         symbolMapping: this.getSymbolMapping(symbolProfile)
-    }));
+      };
+
+      if (item.SymbolProfileOverrides) {
+        item.assetClass =
+          item.SymbolProfileOverrides.assetClass ?? item.assetClass;
+        item.assetSubClass =
+          item.SymbolProfileOverrides.assetSubClass ?? item.assetSubClass;
+        item.countries =
+          (item.SymbolProfileOverrides.sectors as unknown as Country[]) ??
+          item.countries;
+        item.name = item.SymbolProfileOverrides?.name ?? item.name;
+        item.sectors =
+          (item.SymbolProfileOverrides.sectors as unknown as Sector[]) ??
+          item.sectors;
+
+        delete item.SymbolProfileOverrides;
+      }
+
+      return item;
+    });
   }
 
   private getCountries(symbolProfile: SymbolProfile): Country[] {

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

@@ -0,0 +1,11 @@
+import { PrismaModule } from '@ghostfolio/api/services/prisma.module';
+import { Module } from '@nestjs/common';
+
+import { TagService } from './tag.service';
+
+@Module({
+  exports: [TagService],
+  imports: [PrismaModule],
+  providers: [TagService]
+})
+export class TagModule {}

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

@@ -0,0 +1,30 @@
+import { PrismaService } from '@ghostfolio/api/services/prisma.service';
+import { Injectable } from '@nestjs/common';
+
+@Injectable()
+export class TagService {
+  public constructor(private readonly prismaService: PrismaService) {}
+
+  public async get() {
+    return this.prismaService.tag.findMany({
+      orderBy: {
+        name: 'asc'
+      }
+    });
+  }
+
+  public async getByUser(userId: string) {
+    return this.prismaService.tag.findMany({
+      orderBy: {
+        name: 'asc'
+      },
+      where: {
+        orders: {
+          some: {
+            userId
+          }
+        }
+      }
+    });
+  }
+}

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

@@ -194,16 +194,17 @@
         <ion-icon name="ellipsis-vertical"></ion-icon>
       </button>
       <mat-menu #accountMenu="matMenu" xPosition="before">
-        <button i18n mat-menu-item (click)="onUpdateAccount(element)">
-          Edit
+        <button mat-menu-item (click)="onUpdateAccount(element)">
+          <ion-icon class="mr-2" name="create-outline"></ion-icon>
+          <span i18n>Edit</span>
         </button>
         <button
-          i18n
           mat-menu-item
           [disabled]="element.isDefault || element.Order?.length > 0"
           (click)="onDeleteAccount(element.id)"
         >
-          Delete
+          <ion-icon class="mr-2" name="trash-outline"></ion-icon>
+          <span i18n>Delete</span>
         </button>
       </mat-menu>
     </td>

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

@@ -68,12 +68,12 @@
                 </button>
                 <mat-menu #accountMenu="matMenu" xPosition="before">
                   <button
-                    i18n
                     mat-menu-item
                     [disabled]="userItem.id === user?.id"
                     (click)="onDeleteUser(userItem.id)"
                   >
-                    Delete
+                    <ion-icon class="mr-2" name="trash-outline"></ion-icon>
+                    <span i18n>Delete</span>
                   </button>
                 </mat-menu>
               </td>

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

@@ -5,7 +5,7 @@
   z-index: 999;
 
   .mat-toolbar {
-    background-color: rgba(var(--light-disabled-text));
+    background-color: var(--light-background);
 
     .spacer {
       flex: 1 1 auto;
@@ -27,6 +27,6 @@
 
 :host-context(.is-dark-theme) {
   .mat-toolbar {
-    background-color: rgba(39, 39, 39, $alpha-disabled-text);
+    background-color: var(--dark-background);
   }
 }

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

@@ -10,7 +10,10 @@ import {
   ViewChild
 } from '@angular/core';
 import { primaryColorRgb } from '@ghostfolio/common/config';
-import { parseDate } from '@ghostfolio/common/helper';
+import {
+  parseDate,
+  transformTickToAbbreviation
+} from '@ghostfolio/common/helper';
 import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface';
 import {
   Chart,
@@ -148,19 +151,10 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
                   display: false
                 },
                 ticks: {
-                  display: true,
-                  callback: (tickValue, index, ticks) => {
-                    if (index === 0 || index === ticks.length - 1) {
-                      // Only print last and first legend entry
-                      if (typeof tickValue === 'number') {
-                        return tickValue.toFixed(2);
-                      }
-
-                      return tickValue;
-                    }
-
-                    return '';
+                  callback: (value: number) => {
+                    return transformTickToAbbreviation(value);
                   },
+                  display: true,
                   mirror: true,
                   z: 1
                 }

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

@@ -119,7 +119,7 @@
     <div class="col"><hr /></div>
   </div>
   <div class="row px-3 py-1">
-    <div class="d-flex flex-grow-1" i18n>Total</div>
+    <div class="d-flex flex-grow-1" i18n>Total Assets</div>
     <div class="d-flex flex-column flex-wrap justify-content-end">
       <gf-value
         class="justify-content-end"

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

@@ -211,14 +211,14 @@ export class PositionDetailDialog implements OnDestroy, OnInit {
       )
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((data) => {
-        downloadAsFile(
-          data,
-          `ghostfolio-export-${this.SymbolProfile?.symbol}-${format(
+        downloadAsFile({
+          content: data,
+          fileName: `ghostfolio-export-${this.SymbolProfile?.symbol}-${format(
             parseISO(data.meta.date),
             'yyyyMMddHHmm'
           )}.json`,
-          'text/plain'
-        );
+          format: 'json'
+        });
       });
   }
 

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

@@ -111,6 +111,8 @@
         <gf-value
           label="First Buy Date"
           size="medium"
+          [isDate]="true"
+          [locale]="data.locale"
           [value]="firstBuyDate"
         ></gf-value>
       </div>

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

@@ -123,17 +123,6 @@
   }"
 ></ngx-skeleton-loader>
 
-<div
-  *ngIf="
-    dataSource.data.length === 0 && hasPermissionToCreateOrder && !isLoading
-  "
-  class="p-3 text-center"
->
-  <gf-no-transactions-info-indicator
-    [hasBorder]="false"
-  ></gf-no-transactions-info-indicator>
-</div>
-
 <div
   *ngIf="dataSource.data.length > pageSize && !isLoading"
   class="my-3 text-center"

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

@@ -27,7 +27,6 @@ import { Subject, Subscription } from 'rxjs';
 export class PositionsTableComponent implements OnChanges, OnDestroy, OnInit {
   @Input() baseCurrency: string;
   @Input() deviceType: string;
-  @Input() hasPermissionToCreateOrder: boolean;
   @Input() locale: string;
   @Input() positions: PortfolioPosition[];
 

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

@@ -109,38 +109,39 @@
         <mat-card-content>
           <div class="row">
             <div class="col-xs-12 col-md-4 my-2">
-              <h3 class="mb-0">{{ statistics?.activeUsers1d || '-' }}</h3>
-              <div class="h6 mb-0">
-                <span i18n>Active Users</span>&nbsp;<small class="text-muted"
-                  >(Last 24 hours)</small
-                >
-              </div>
+              <gf-value
+                label="Active Users"
+                size="large"
+                subLabel="(Last 24 hours)"
+                [value]="statistics?.activeUsers1d ?? '-'"
+              ></gf-value>
             </div>
             <div class="col-xs-12 col-md-4 my-2">
-              <h3 class="mb-0">{{ statistics?.newUsers30d ?? '-' }}</h3>
-              <div class="h6 mb-0">
-                <span i18n>New Users</span>&nbsp;<small class="text-muted"
-                  >(Last 30 days)</small
-                >
-              </div>
+              <gf-value
+                label="New Users"
+                size="large"
+                subLabel="(Last 30 days)"
+                [value]="statistics?.newUsers30d ?? '-'"
+              ></gf-value>
             </div>
             <div class="col-xs-12 col-md-4 my-2">
-              <h3 class="mb-0">{{ statistics?.activeUsers30d ?? '-' }}</h3>
-              <div class="h6 mb-0">
-                <span i18n>Active Users</span>&nbsp;<small class="text-muted"
-                  >(Last 30 days)</small
-                >
-              </div>
+              <gf-value
+                label="Active Users"
+                size="large"
+                subLabel="(Last 30 days)"
+                [value]="statistics?.activeUsers30d ?? '-'"
+              ></gf-value>
             </div>
             <div class="col-xs-12 col-md-4 my-2">
               <a
                 class="d-block"
                 href="https://join.slack.com/t/ghostfolio/shared_invite/zt-vsaan64h-F_I0fEo5M0P88lP9ibCxFg"
               >
-                <h3 class="mb-0">
-                  {{ statistics?.slackCommunityUsers ?? '-' }}
-                </h3>
-                <div class="h6 mb-0" i18n>Users in Slack community</div>
+                <gf-value
+                  label="Users in Slack community"
+                  size="large"
+                  [value]="statistics?.slackCommunityUsers ?? '-'"
+                ></gf-value>
               </a>
             </div>
             <div class="col-xs-12 col-md-4 my-2">
@@ -148,10 +149,11 @@
                 class="d-block"
                 href="https://github.com/ghostfolio/ghostfolio/graphs/contributors"
               >
-                <h3 class="mb-0">
-                  {{ statistics?.gitHubContributors ?? '-' }}
-                </h3>
-                <div class="h6 mb-0" i18n>Contributors on GitHub</div>
+                <gf-value
+                  label="Contributors on GitHub"
+                  size="large"
+                  [value]="statistics?.gitHubContributors ?? '-'"
+                ></gf-value>
               </a>
             </div>
             <div class="col-xs-12 col-md-4 my-2">
@@ -159,8 +161,11 @@
                 class="d-block"
                 href="https://github.com/ghostfolio/ghostfolio/stargazers"
               >
-                <h3 class="mb-0">{{ statistics?.gitHubStargazers ?? '-' }}</h3>
-                <div class="h6 mb-0" i18n>Stars on GitHub</div>
+                <gf-value
+                  label="Stars on GitHub"
+                  size="large"
+                  [value]="statistics?.gitHubStargazers ?? '-'"
+                ></gf-value>
               </a>
             </div>
           </div>

apps/client/src/app/pages/about/about-page.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 { MatCardModule } from '@angular/material/card';
+import { GfValueModule } from '@ghostfolio/ui/value';
 
 import { AboutPageRoutingModule } from './about-page-routing.module';
 import { AboutPageComponent } from './about-page.component';
@@ -12,6 +13,7 @@ import { AboutPageComponent } from './about-page.component';
   imports: [
     AboutPageRoutingModule,
     CommonModule,
+    GfValueModule,
     MatButtonModule,
     MatCardModule
   ],

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

@@ -222,24 +222,6 @@ export class AccountPageComponent implements OnDestroy, OnInit {
       });
   }
 
-  public onNewCalculationChange(aEvent: MatSlideToggleChange) {
-    this.dataService
-      .putUserSetting({ isNewCalculationEngine: aEvent.checked })
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(() => {
-        this.userService.remove();
-
-        this.userService
-          .get()
-          .pipe(takeUntil(this.unsubscribeSubject))
-          .subscribe((user) => {
-            this.user = user;
-
-            this.changeDetectorRef.markForCheck();
-          });
-      });
-  }
-
   public onRedeemCoupon() {
     let couponCode = prompt('Please enter your coupon code:');
     couponCode = couponCode?.trim();

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

@@ -139,11 +139,6 @@
               <div class="d-flex">
                 <div class="align-items-center d-flex pr-1 pt-1 w-50" i18n>
                   View Mode
-                  <ion-icon
-                    *ngIf="!hasPermissionToUpdateViewMode"
-                    class="mx-1 text-muted"
-                    name="diamond-outline"
-                  ></ion-icon>
                 </div>
                 <div class="pl-1 w-50">
                   <div class="align-items-center d-flex overflow-hidden">
@@ -174,23 +169,6 @@
               ></mat-slide-toggle>
             </div>
           </div>
-          <div
-            *ngIf="user?.subscription"
-            class="align-items-center d-flex mt-4 py-1"
-          >
-            <div class="pr-1 w-50">
-              <div i18n>New Calculation Engine</div>
-              <div class="hint-text text-muted" i18n>Experimental</div>
-            </div>
-            <div class="pl-1 w-50">
-              <mat-slide-toggle
-                color="primary"
-                [checked]="user.settings.isNewCalculationEngine"
-                [disabled]="!hasPermissionToUpdateUserSettings"
-                (change)="onNewCalculationChange($event)"
-              ></mat-slide-toggle>
-            </div>
-          </div>
         </mat-card-content>
       </mat-card>
     </div>

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

@@ -13,7 +13,6 @@ import {
   UniqueAsset,
   User
 } from '@ghostfolio/common/interfaces';
-import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { Market, ToggleOption } from '@ghostfolio/common/types';
 import { Account, AssetClass, DataSource } from '@prisma/client';
 import { DeviceDetectorService } from 'ngx-device-detector';
@@ -41,7 +40,6 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
   };
   public deviceType: string;
   public hasImpersonationId: boolean;
-  public hasPermissionToCreateOrder: boolean;
   public markets: {
     [key in Market]: { name: string; value: number };
   };
@@ -50,6 +48,7 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
     { label: 'Initial', value: 'original' },
     { label: 'Current', value: 'current' }
   ];
+  public placeholder = '';
   public portfolioDetails: PortfolioDetails;
   public positions: {
     [symbol: string]: Pick<
@@ -75,6 +74,7 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
       value: number;
     };
   };
+  public tags: string[] = [];
 
   public user: User;
 
@@ -122,34 +122,22 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
         this.hasImpersonationId = !!aId;
       });
 
-    this.dataService
-      .fetchPortfolioDetails({})
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((portfolioDetails) => {
-        this.portfolioDetails = portfolioDetails;
-
-        this.initializeAnalysisData(this.period);
-
-        this.changeDetectorRef.markForCheck();
-      });
-
     this.userService.stateChanged
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((state) => {
         if (state?.user) {
           this.user = state.user;
 
-          this.hasPermissionToCreateOrder = hasPermission(
-            this.user.permissions,
-            permissions.createOrder
-          );
+          this.tags = this.user.tags.map((tag) => {
+            return tag.name;
+          });
 
           this.changeDetectorRef.markForCheck();
         }
       });
   }
 
-  public initializeAnalysisData(aPeriod: string) {
+  public initialize() {
     this.accounts = {};
     this.continents = {
       [UNKNOWN_KEY]: {
@@ -192,6 +180,10 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
         value: 0
       }
     };
+  }
+
+  public initializeAnalysisData(aPeriod: string) {
+    this.initialize();
 
     for (const [id, { current, name, original }] of Object.entries(
       this.portfolioDetails.accounts
@@ -312,7 +304,7 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
         }
       }
 
-      if (position.assetClass === AssetClass.EQUITY) {
+      if (position.dataSource) {
         this.symbols[prettifySymbol(symbol)] = {
           dataSource: position.dataSource,
           name: position.name,
@@ -349,6 +341,25 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
     }
   }
 
+  public onUpdateFilters(tags: string[] = []) {
+    this.update(tags);
+  }
+
+  public update(tags?: string[]) {
+    this.initialize();
+
+    this.dataService
+      .fetchPortfolioDetails({ tags })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((portfolioDetails) => {
+        this.portfolioDetails = portfolioDetails;
+
+        this.initializeAnalysisData(this.period);
+
+        this.changeDetectorRef.markForCheck();
+      });
+  }
+
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();

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

@@ -2,6 +2,12 @@
   <div class="row">
     <div class="col">
       <h3 class="d-flex justify-content-center mb-3" i18n>Allocations</h3>
+      <gf-activities-filter
+        [allFilters]="tags"
+        [ngClass]="{ 'd-none': tags.length <= 0 }"
+        [placeholder]="placeholder"
+        (valueChanged)="onUpdateFilters($event)"
+      ></gf-activities-filter>
     </div>
   </div>
   <div class="proportion-charts row">
@@ -30,33 +36,14 @@
     <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 Asset Class</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
-            [baseCurrency]="user?.settings?.baseCurrency"
-            [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
-            [keys]="['assetClass', 'assetSubClass']"
-            [locale]="user?.settings?.locale"
-            [positions]="positions"
-          ></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 Currency</mat-card-title
-          >
+          <mat-card-title class="align-items-center d-flex text-truncate"
+            ><span i18n>By Currency</span
+            ><ion-icon
+              *ngIf="user?.subscription?.type === 'Basic'"
+              class="ml-1 text-muted"
+              name="diamond-outline"
+            ></ion-icon
+          ></mat-card-title>
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -75,10 +62,46 @@
         </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="align-items-center d-flex text-truncate"
+            ><span i18n>By Asset Class</span
+            ><ion-icon
+              *ngIf="user?.subscription?.type === 'Basic'"
+              class="ml-1 text-muted"
+              name="diamond-outline"
+            ></ion-icon
+          ></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
+            [baseCurrency]="user?.settings?.baseCurrency"
+            [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
+            [keys]="['assetClass', 'assetSubClass']"
+            [locale]="user?.settings?.locale"
+            [positions]="positions"
+          ></gf-portfolio-proportion-chart>
+        </mat-card-content>
+      </mat-card>
+    </div>
     <div class="col-md-12 allocations-by-symbol">
       <mat-card class="mb-3">
         <mat-card-header class="overflow-hidden w-100">
-          <mat-card-title class="text-truncate" i18n>By Symbol</mat-card-title>
+          <mat-card-title class="align-items-center d-flex text-truncate"
+            ><span i18n>By Symbol</span
+            ><ion-icon
+              *ngIf="user?.subscription?.type === 'Basic'"
+              class="ml-1 text-muted"
+              name="diamond-outline"
+            ></ion-icon
+          ></mat-card-title>
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -104,7 +127,14 @@
     <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>
+          <mat-card-title class="align-items-center d-flex text-truncate"
+            ><span i18n>By Sector</span
+            ><ion-icon
+              *ngIf="user?.subscription?.type === 'Basic'"
+              class="ml-1 text-muted"
+              name="diamond-outline"
+            ></ion-icon
+          ></mat-card-title>
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -127,9 +157,14 @@
     <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 Continent</mat-card-title
-          >
+          <mat-card-title class="align-items-center d-flex text-truncate"
+            ><span i18n>By Continent</span
+            ><ion-icon
+              *ngIf="user?.subscription?.type === 'Basic'"
+              class="ml-1 text-muted"
+              name="diamond-outline"
+            ></ion-icon
+          ></mat-card-title>
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -151,7 +186,14 @@
     <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 Country</mat-card-title>
+          <mat-card-title class="align-items-center d-flex text-truncate"
+            ><span i18n>By Country</span
+            ><ion-icon
+              *ngIf="user?.subscription?.type === 'Basic'"
+              class="ml-1 text-muted"
+              name="diamond-outline"
+            ></ion-icon
+          ></mat-card-title>
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -176,7 +218,14 @@
     <div class="col-lg">
       <mat-card class="mb-3">
         <mat-card-header class="overflow-hidden w-100">
-          <mat-card-title class="text-truncate" i18n>Regions</mat-card-title>
+          <mat-card-title class="align-items-center d-flex text-truncate"
+            ><span i18n>Regions</span
+            ><ion-icon
+              *ngIf="user?.subscription?.type === 'Basic'"
+              class="ml-1 text-muted"
+              name="diamond-outline"
+            ></ion-icon
+          ></mat-card-title>
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -225,7 +274,6 @@
       <gf-positions-table
         [baseCurrency]="user?.settings?.baseCurrency"
         [deviceType]="deviceType"
-        [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
         [locale]="user?.settings?.locale"
         [positions]="positionsArray"
       ></gf-positions-table>

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

@@ -4,6 +4,7 @@ import { MatCardModule } from '@angular/material/card';
 import { GfPositionsTableModule } from '@ghostfolio/client/components/positions-table/positions-table.module';
 import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module';
 import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';
+import { GfActivitiesFilterModule } from '@ghostfolio/ui/activities-filter/activities-filter.module';
 import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart/portfolio-proportion-chart.module';
 import { GfValueModule } from '@ghostfolio/ui/value';
 
@@ -16,6 +17,7 @@ import { AllocationsPageComponent } from './allocations-page.component';
   imports: [
     AllocationsPageRoutingModule,
     CommonModule,
+    GfActivitiesFilterModule,
     GfPortfolioProportionChartModule,
     GfPositionsTableModule,
     GfToggleModule,

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

@@ -1,9 +1,9 @@
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { DataService } from '@ghostfolio/client/services/data.service';
-import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { User } from '@ghostfolio/common/interfaces';
 import Big from 'big.js';
+import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -14,12 +14,12 @@ import { takeUntil } from 'rxjs/operators';
   templateUrl: './fire-page.html'
 })
 export class FirePageComponent implements OnDestroy, OnInit {
-  public fireWealth: number;
-  public hasImpersonationId: boolean;
+  public deviceType: string;
+  public fireWealth: Big;
   public isLoading = false;
   public user: User;
-  public withdrawalRatePerMonth: number;
-  public withdrawalRatePerYear: number;
+  public withdrawalRatePerMonth: Big;
+  public withdrawalRatePerYear: Big;
 
   private unsubscribeSubject = new Subject<void>();
 
@@ -29,7 +29,7 @@ export class FirePageComponent implements OnDestroy, OnInit {
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
-    private impersonationStorageService: ImpersonationStorageService,
+    private deviceService: DeviceDetectorService,
     private userService: UserService
   ) {}
 
@@ -38,13 +38,7 @@ export class FirePageComponent implements OnDestroy, OnInit {
    */
   public ngOnInit() {
     this.isLoading = true;
-
-    this.impersonationStorageService
-      .onChangeHasImpersonation()
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((aId) => {
-        this.hasImpersonationId = !!aId;
-      });
+    this.deviceType = this.deviceService.getDeviceInfo().deviceType;
 
     this.dataService
       .fetchPortfolioSummary()
@@ -54,14 +48,9 @@ export class FirePageComponent implements OnDestroy, OnInit {
           return;
         }
 
-        this.fireWealth = new Big(currentValue).plus(cash).toNumber();
-        this.withdrawalRatePerYear = new Big(this.fireWealth)
-          .mul(4)
-          .div(100)
-          .toNumber();
-        this.withdrawalRatePerMonth = new Big(this.withdrawalRatePerYear)
-          .div(12)
-          .toNumber();
+        this.fireWealth = new Big(currentValue);
+        this.withdrawalRatePerYear = this.fireWealth.mul(4).div(100);
+        this.withdrawalRatePerMonth = this.withdrawalRatePerYear.div(12);
 
         this.isLoading = false;
 
@@ -79,6 +68,13 @@ export class FirePageComponent implements OnDestroy, OnInit {
       });
   }
 
+  public onSavingsRateChange(savingsRate: number) {
+    this.dataService
+      .putUserSetting({ savingsRate })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {});
+  }
+
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();

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

@@ -2,7 +2,7 @@
   <div class="row">
     <div class="col-lg">
       <h3 class="d-flex justify-content-center mb-3" i18n>FIRE</h3>
-      <div class="mb-4">
+      <div class="mb-5">
         <h4 i18n>4% Rule</h4>
         <div *ngIf="isLoading">
           <ngx-skeleton-loader
@@ -27,7 +27,8 @@
             ><gf-value
               class="d-inline-block"
               [currency]="user?.settings?.baseCurrency"
-              [value]="withdrawalRatePerYear"
+              [locale]="user?.settings?.locale"
+              [value]="withdrawalRatePerYear?.toNumber()"
             ></gf-value>
             per year</span
           >
@@ -36,18 +37,31 @@
             ><gf-value
               class="d-inline-block"
               [currency]="user?.settings?.baseCurrency"
-              [value]="withdrawalRatePerMonth"
+              [locale]="user?.settings?.locale"
+              [value]="withdrawalRatePerMonth?.toNumber()"
             ></gf-value>
             per month</span
-          >, based on your net worth of
+          >, based on your total assets of
           <gf-value
             class="d-inline-block"
             [currency]="user?.settings?.baseCurrency"
-            [value]="fireWealth"
+            [locale]="user?.settings?.locale"
+            [value]="fireWealth?.toNumber()"
           ></gf-value>
-          (excluding emergency fund) and a withdrawal rate of 4%.
+          and a withdrawal rate of 4%.
         </div>
       </div>
     </div>
   </div>
+  <div>
+    <h4 class="mb-3" i18n>Calculator</h4>
+    <gf-fire-calculator
+      [currency]="user?.settings?.baseCurrency"
+      [deviceType]="deviceType"
+      [fireWealth]="fireWealth?.toNumber()"
+      [locale]="user?.settings?.locale"
+      [savingsRate]="user?.settings?.savingsRate"
+      (savingsRateChanged)="onSavingsRateChange($event)"
+    ></gf-fire-calculator>
+  </div>
 </div>

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

@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { GfFireCalculatorModule } from '@ghostfolio/ui/fire-calculator';
 import { GfValueModule } from '@ghostfolio/ui/value';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
@@ -11,6 +12,7 @@ import { FirePageComponent } from './fire-page.component';
   imports: [
     CommonModule,
     FirePageRoutingModule,
+    GfFireCalculatorModule,
     GfValueModule,
     NgxSkeletonLoaderModule
   ],

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

@@ -46,6 +46,7 @@ export class CreateOrUpdateTransactionDialog implements OnDestroy {
   public filteredLookupItemsObservable: Observable<LookupItem[]>;
   public isLoading = false;
   public platforms: { id: string; name: string }[];
+  public total = 0;
   public Validators = Validators;
 
   private unsubscribeSubject = new Subject<void>();
@@ -89,6 +90,25 @@ export class CreateOrUpdateTransactionDialog implements OnDestroy {
       unitPrice: [this.data.activity?.unitPrice, Validators.required]
     });
 
+    this.activityForm.valueChanges
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        if (
+          this.activityForm.controls['type'].value === 'BUY' ||
+          this.activityForm.controls['type'].value === 'ITEM'
+        ) {
+          this.total =
+            this.activityForm.controls['quantity'].value *
+              this.activityForm.controls['unitPrice'].value +
+              this.activityForm.controls['fee'].value ?? 0;
+        } else {
+          this.total =
+            this.activityForm.controls['quantity'].value *
+              this.activityForm.controls['unitPrice'].value -
+              this.activityForm.controls['fee'].value ?? 0;
+        }
+      });
+
     this.filteredLookupItemsObservable = this.activityForm.controls[
       'searchSymbol'
     ].valueChanges.pipe(
@@ -100,7 +120,9 @@ export class CreateOrUpdateTransactionDialog implements OnDestroy {
           const filteredLookupItemsObservable =
             this.dataService.fetchSymbols(query);
 
-          filteredLookupItemsObservable.subscribe((filteredLookupItems) => {
+          filteredLookupItemsObservable
+            .pipe(takeUntil(this.unsubscribeSubject))
+            .subscribe((filteredLookupItems) => {
               this.filteredLookupItems = filteredLookupItems;
             });
 
@@ -111,7 +133,9 @@ export class CreateOrUpdateTransactionDialog implements OnDestroy {
       })
     );
 
-    this.activityForm.controls['type'].valueChanges.subscribe((type: Type) => {
+    this.activityForm.controls['type'].valueChanges
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((type: Type) => {
         if (type === 'ITEM') {
           this.activityForm.controls['accountId'].removeValidators(
             Validators.required

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

@@ -138,9 +138,9 @@
   <div class="d-flex" mat-dialog-actions>
     <gf-value
       class="flex-grow-1"
-      [currency]="activityForm.controls['currency'].value"
+      [currency]="activityForm.controls['currency']?.value ?? data.user?.settings?.baseCurrency"
       [locale]="data.user?.settings?.locale"
-      [value]="activityForm.controls['fee'].value + (activityForm.controls['quantity'].value * activityForm.controls['unitPrice'].value) ?? 0"
+      [value]="total"
     ></gf-value>
     <div>
       <button i18n mat-button type="button" (click)="onCancel()">Cancel</button>

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

@@ -7,6 +7,7 @@ import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interf
 import { UpdateOrderDto } from '@ghostfolio/api/app/order/update-order.dto';
 import { PositionDetailDialog } from '@ghostfolio/client/components/position/position-detail-dialog/position-detail-dialog.component';
 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 { UserService } from '@ghostfolio/client/services/user/user.service';
@@ -50,6 +51,7 @@ export class TransactionsPageComponent implements OnDestroy, OnInit {
     private dataService: DataService,
     private deviceService: DeviceDetectorService,
     private dialog: MatDialog,
+    private icsService: IcsService,
     private impersonationStorageService: ImpersonationStorageService,
     private importTransactionsService: ImportTransactionsService,
     private route: ActivatedRoute,
@@ -152,14 +154,36 @@ export class TransactionsPageComponent implements OnDestroy, OnInit {
       .fetchExport(activityIds)
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((data) => {
-        downloadAsFile(
-          data,
-          `ghostfolio-export-${format(
+        for (const activity of data.activities) {
+          delete activity.id;
+        }
+
+        downloadAsFile({
+          content: data,
+          fileName: `ghostfolio-export-${format(
             parseISO(data.meta.date),
             'yyyyMMddHHmm'
           )}.json`,
-          'text/plain'
-        );
+          format: 'json'
+        });
+      });
+  }
+
+  public onExportDrafts(activityIds?: string[]) {
+    this.dataService
+      .fetchExport(activityIds)
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((data) => {
+        downloadAsFile({
+          content: this.icsService.transformActivitiesToIcsContent(
+            data.activities
+          ),
+          contentType: 'text/calendar',
+          fileName: `ghostfolio-draft${
+            data.activities.length > 1 ? 's' : ''
+          }-${format(parseISO(data.meta.date), 'yyyyMMddHHmmss')}.ics`,
+          format: 'string'
+        });
       });
   }
 

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

@@ -15,6 +15,7 @@
         (activityToClone)="onCloneTransaction($event)"
         (activityToUpdate)="onUpdateTransaction($event)"
         (export)="onExport($event)"
+        (exportDrafts)="onExportDrafts($event)"
         (import)="onImport()"
       ></gf-activities-table>
     </div>

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

@@ -119,7 +119,7 @@
         Ghostfolio empowers you to keep track of your wealth.
       </p>
       <div class="py-2 text-center">
-        <a color="primary" i18n mat-flat-button [routerLink]="['/']">
+        <a color="primary" href="https://ghostfol.io" i18n mat-flat-button>
           Get Started
         </a>
       </div>

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

@@ -1,18 +1,35 @@
 <div class="container">
   <div class="row">
     <div class="col">
-      <h3 class="d-flex justify-content-center mb-3" i18n>Resources</h3>
-      <mat-card class="mb-3">
-        <mat-card-content>
-          <h4 class="mb-3">Market</h4>
+      <h1 class="d-flex h3 justify-content-center mb-3" i18n>Resources</h1>
+      <h2 class="h4 mb-3">Guides</h2>
       <div class="mb-5">
         <div class="mb-4 media">
           <div class="media-body">
-                <h5 class="mt-0">Fear & Greed Index</h5>
+            <h3 class="h5 mt-0">Boringly Getting Rich</h3>
+            <div class="mb-1">
+              The <i>Boringly Getting Rich</i> guide supports you to get started
+              with investing. It introduces a strategy utilizing a broadly
+              diversified, low-cost portfolio excluding the risks of individual
+              stocks.
+            </div>
+            <div>
+              <a href="https://herget.me/investing-guide" target="_blank"
+                >Boringly Getting Rich →</a
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+      <h2 class="h4 mb-3">Market</h2>
+      <div class="mb-5">
+        <div class="mb-4 media">
+          <div class="media-body">
+            <h3 class="h5 mt-0">Fear & Greed Index</h3>
             <div class="mb-1">
               The fear and greed index was developed by <i>CNNMoney</i> to
-                  measure the primary emotions (fear and greed) that influence
-                  how much investors are willing to pay for stocks.
+              measure the primary emotions (fear and greed) that influence how
+              much investors are willing to pay for stocks.
             </div>
             <div>
               <a
@@ -25,12 +42,12 @@
         </div>
         <div class="media">
           <div class="media-body">
-                <h5 class="mt-0">Inflation Chart</h5>
+            <h3 class="h5 mt-0">Inflation Chart</h3>
             <div class="mb-1">
               Inflation Chart helps you find the intrinsic value of stock
-                  markets, stock prices, goods and services by adjusting them to
-                  the amount of the money supply (M0, M1, M2) or price of other
-                  goods (food or oil).
+              markets, stock prices, goods and services by adjusting them to the
+              amount of the money supply (M0, M1, M2) or price of other goods
+              (food or oil).
             </div>
             <div>
               <a href="https://inflationchart.com" target="_blank"
@@ -40,16 +57,15 @@
           </div>
         </div>
       </div>
-          <h4 class="mb-3">Glossary</h4>
+      <h2 class="h4 mb-3">Glossary</h2>
       <div>
         <div class="mb-4 media">
-              <!--<img src="" class="mr-3" />-->
           <div class="media-body">
-                <h5 class="mt-0">Buy and Hold</h5>
+            <h3 class="h5 mt-0">Buy and Hold</h3>
             <div class="mb-1">
-                  Buy and hold is a passive investment strategy where you buy
-                  assets and hold them for a long period regardless of
-                  fluctuations in the market.
+              Buy and hold is a passive investment strategy where you buy assets
+              and hold them for a long period regardless of fluctuations in the
+              market.
             </div>
             <div>
               <a
@@ -61,14 +77,13 @@
           </div>
         </div>
         <div class="mb-4 media">
-              <!--<img src="" class="mr-3" />-->
           <div class="media-body">
-                <h5 class="mt-0">Dollar-Cost Averaging (DCA)</h5>
+            <h3 class="h5 mt-0">Dollar-Cost Averaging (DCA)</h3>
             <div class="mb-1">
-                  Dollar-cost averaging is an investment strategy where you
-                  split the total amount to be invested across periodic
-                  purchases of a target asset to reduce the impact of volatility
-                  on the overall purchase.
+              Dollar-cost averaging is an investment strategy where you split
+              the total amount to be invested across periodic purchases of a
+              target asset to reduce the impact of volatility on the overall
+              purchase.
             </div>
             <div>
               <a
@@ -80,13 +95,12 @@
           </div>
         </div>
         <div class="media">
-              <!--<img src="" class="mr-3" />-->
           <div class="media-body">
-                <h5 class="mt-0">Financial Independence</h5>
+            <h3 class="h5 mt-0">Financial Independence</h3>
             <div class="mb-1">
-                  Financial independence is the status of having enough income,
-                  for example with a passive income like dividends, to cover
-                  your living expenses for the rest of your life.
+              Financial independence is the status of having enough income, for
+              example with a passive income like dividends, to cover your living
+              expenses for the rest of your life.
             </div>
             <div>
               <a
@@ -98,8 +112,6 @@
           </div>
         </div>
       </div>
-        </mat-card-content>
-      </mat-card>
     </div>
   </div>
 </div>

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

@@ -2,7 +2,6 @@
   color: rgb(var(--dark-primary-text));
   display: block;
 
-  .mat-card {
   a {
     color: rgba(var(--palette-primary-500), 1);
     font-weight: 500;
@@ -12,7 +11,6 @@
     }
   }
 }
-}
 
 :host-context(.is-dark-theme) {
   color: rgb(var(--light-primary-text));

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

@@ -182,9 +182,15 @@ export class DataService {
     );
   }
 
-  public fetchPortfolioDetails(aParams: { [param: string]: any }) {
+  public fetchPortfolioDetails({ tags }: { tags?: string[] }) {
+    let params = new HttpParams();
+
+    if (tags?.length > 0) {
+      params = params.append('tags', tags.join(','));
+    }
+
     return this.http.get<PortfolioDetails>('/api/v1/portfolio/details', {
-      params: aParams
+      params
     });
   }
 

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

@@ -0,0 +1,59 @@
+import { Injectable } from '@angular/core';
+import { capitalize } from '@ghostfolio/common/helper';
+import { Export } from '@ghostfolio/common/interfaces';
+import { Type } from '@prisma/client';
+import { format, parseISO } from 'date-fns';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class IcsService {
+  private readonly ICS_DATE_FORMAT = 'yyyyMMdd';
+  private readonly ICS_LINE_BREAK = '\r\n';
+
+  public constructor() {}
+
+  public transformActivitiesToIcsContent(
+    aActivities: Export['activities']
+  ): string {
+    const header = [
+      'BEGIN:VCALENDAR',
+      'VERSION:2.0',
+      'PRODID:-//Ghostfolio//NONSGML v1.0//EN'
+    ];
+    const events = aActivities.map((activity) => {
+      return this.getEvent({
+        date: parseISO(activity.date),
+        id: activity.id,
+        symbol: activity.symbol,
+        type: activity.type
+      });
+    });
+    const footer = ['END:VCALENDAR'];
+
+    return [...header, ...events, ...footer].join(this.ICS_LINE_BREAK);
+  }
+
+  private getEvent({
+    date,
+    id,
+    symbol,
+    type
+  }: {
+    date: Date;
+    id: string;
+    symbol: string;
+    type: Type;
+  }) {
+    const today = format(new Date(), this.ICS_DATE_FORMAT);
+
+    return [
+      'BEGIN:VEVENT',
+      `UID:${id}`,
+      `DTSTAMP:${today}T000000`,
+      `DTSTART;VALUE=DATE:${format(date, this.ICS_DATE_FORMAT)}`,
+      `SUMMARY:${capitalize(type)} ${symbol}`,
+      'END:VEVENT'
+    ].join(this.ICS_LINE_BREAK);
+  }
+}

libs/common/src/lib/helper.ts

@@ -12,17 +12,28 @@ export function decodeDataSource(encodedDataSource: string) {
   return Buffer.from(encodedDataSource, 'hex').toString();
 }
 
-export function downloadAsFile(
-  aContent: unknown,
-  aFileName: string,
-  aContentType: string
-) {
+export function downloadAsFile({
+  content,
+  contentType = 'text/plain',
+  fileName,
+  format
+}: {
+  content: unknown;
+  contentType?: string;
+  fileName: string;
+  format: 'json' | 'string';
+}) {
   const a = document.createElement('a');
-  const file = new Blob([JSON.stringify(aContent, undefined, '  ')], {
-    type: aContentType
+
+  if (format === 'json') {
+    content = JSON.stringify(content, undefined, '  ');
+  }
+
+  const file = new Blob([<string>content], {
+    type: contentType
   });
   a.href = URL.createObjectURL(file);
-  a.download = aFileName;
+  a.download = fileName;
   a.click();
 }
 
@@ -176,3 +187,7 @@ export function parseDate(date: string) {
 export function prettifySymbol(aSymbol: string): string {
   return aSymbol?.replace(ghostfolioScraperApiSymbolPrefix, '');
 }
+
+export function transformTickToAbbreviation(value: number) {
+  return value < 1000000 ? `${value / 1000}K` : `${value / 1000000}M`;
+}

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

@@ -5,5 +5,14 @@ export interface Export {
     date: string;
     version: string;
   };
-  activities: Partial<Order>[];
+  activities: (Omit<
+    Order,
+    | 'accountUserId'
+    | 'createdAt'
+    | 'date'
+    | 'isDraft'
+    | 'symbolProfileId'
+    | 'updatedAt'
+    | 'userId'
+  > & { date: string; symbol: string })[];
 }

libs/common/src/lib/interfaces/info-item.interface.ts

@@ -1,3 +1,4 @@
+import { Tag } from '@prisma/client';
 import { Statistics } from './statistics.interface';
 import { Subscription } from './subscription.interface';
 
@@ -13,4 +14,5 @@ export interface InfoItem {
   stripePublicKey?: string;
   subscriptions: Subscription[];
   systemMessage?: string;
+  tags: Tag[];
 }

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

@@ -1,5 +1,5 @@
 import { Access } from '@ghostfolio/api/app/user/interfaces/access.interface';
-import { Account } from '@prisma/client';
+import { Account, Tag } from '@prisma/client';
 
 import { UserSettings } from './user-settings.interface';
 
@@ -14,4 +14,5 @@ export interface User {
     expiresAt?: Date;
     type: 'Basic' | 'Premium';
   };
+  tags: Tag[];
 }

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

@@ -0,0 +1,33 @@
+<mat-form-field appearance="outline" class="w-100">
+  <ion-icon class="mr-1" matPrefix name="search-outline"></ion-icon>
+  <mat-chip-list #chipList aria-label="Search keywords">
+    <mat-chip
+      *ngFor="let searchKeyword of searchKeywords"
+      class="mx-1 my-0 px-2 py-0"
+      matChipRemove
+      [removable]="true"
+      (removed)="removeKeyword(searchKeyword)"
+    >
+      {{ searchKeyword | gfSymbol }}
+      <ion-icon class="ml-2" matPrefix name="close-outline"></ion-icon>
+    </mat-chip>
+    <input
+      #searchInput
+      name="close-outline"
+      [formControl]="searchControl"
+      [matAutocomplete]="autocomplete"
+      [matChipInputFor]="chipList"
+      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
+      [placeholder]="placeholder"
+      (matChipInputTokenEnd)="addKeyword($event)"
+    />
+  </mat-chip-list>
+  <mat-autocomplete
+    #autocomplete="matAutocomplete"
+    (optionSelected)="keywordSelected($event)"
+  >
+    <mat-option *ngFor="let filter of filters | async" [value]="filter">
+      {{ filter | gfSymbol }}
+    </mat-option>
+  </mat-autocomplete>
+</mat-form-field>

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

@@ -0,0 +1,22 @@
+@import '~apps/client/src/styles/ghostfolio-style';
+
+:host {
+  display: block;
+
+  ::ng-deep {
+    .mat-form-field-infix {
+      border-top: 0 solid transparent !important;
+    }
+  }
+
+  .mat-chip {
+    cursor: pointer;
+    min-height: 1.5rem !important;
+  }
+}
+
+:host-context(.is-dark-theme) {
+  .mat-form-field {
+    color: rgba(var(--light-primary-text));
+  }
+}

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

@@ -0,0 +1,108 @@
+import { COMMA, ENTER } from '@angular/cdk/keycodes';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  ViewChild
+} from '@angular/core';
+import { FormControl } from '@angular/forms';
+import {
+  MatAutocomplete,
+  MatAutocompleteSelectedEvent
+} from '@angular/material/autocomplete';
+import { MatChipInputEvent } from '@angular/material/chips';
+import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  selector: 'gf-activities-filter',
+  styleUrls: ['./activities-filter.component.scss'],
+  templateUrl: './activities-filter.component.html'
+})
+export class ActivitiesFilterComponent implements OnChanges, OnDestroy {
+  @Input() allFilters: string[];
+  @Input() placeholder: string;
+
+  @Output() valueChanged = new EventEmitter<string[]>();
+
+  @ViewChild('autocomplete') matAutocomplete: MatAutocomplete;
+  @ViewChild('searchInput') searchInput: ElementRef<HTMLInputElement>;
+
+  public filters$: Subject<string[]> = new BehaviorSubject([]);
+  public filters: Observable<string[]> = this.filters$.asObservable();
+  public searchControl = new FormControl();
+  public searchKeywords: string[] = [];
+  public separatorKeysCodes: number[] = [ENTER, COMMA];
+
+  private unsubscribeSubject = new Subject<void>();
+
+  public constructor() {
+    this.searchControl.valueChanges
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((keyword) => {
+        if (keyword) {
+          const filterValue = keyword.toLowerCase();
+          this.filters$.next(
+            this.allFilters.filter(
+              (filter) => filter.toLowerCase().indexOf(filterValue) === 0
+            )
+          );
+        } else {
+          this.filters$.next(this.allFilters);
+        }
+      });
+  }
+
+  public ngOnChanges() {
+    if (this.allFilters) {
+      this.updateFilter();
+    }
+  }
+
+  public addKeyword({ input, value }: MatChipInputEvent): void {
+    if (value?.trim()) {
+      this.searchKeywords.push(value.trim());
+      this.updateFilter();
+    }
+
+    // Reset the input value
+    if (input) {
+      input.value = '';
+    }
+
+    this.searchControl.setValue(null);
+  }
+
+  public keywordSelected(event: MatAutocompleteSelectedEvent): void {
+    this.searchKeywords.push(event.option.viewValue);
+    this.updateFilter();
+    this.searchInput.nativeElement.value = '';
+    this.searchControl.setValue(null);
+  }
+
+  public removeKeyword(keyword: string): void {
+    const index = this.searchKeywords.indexOf(keyword);
+
+    if (index >= 0) {
+      this.searchKeywords.splice(index, 1);
+      this.updateFilter();
+    }
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
+  private updateFilter() {
+    this.filters$.next(this.allFilters);
+
+    this.valueChanged.emit(this.searchKeywords);
+  }
+}

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

@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatInputModule } from '@angular/material/input';
+import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
+
+import { ActivitiesFilterComponent } from './activities-filter.component';
+
+@NgModule({
+  declarations: [ActivitiesFilterComponent],
+  exports: [ActivitiesFilterComponent],
+  imports: [
+    CommonModule,
+    GfSymbolModule,
+    MatAutocompleteModule,
+    MatChipsModule,
+    MatInputModule,
+    ReactiveFormsModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GfActivitiesFilterModule {}

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

@@ -1,40 +1,9 @@
-<mat-form-field
-  appearance="outline"
-  class="w-100"
+<gf-activities-filter
+  [allFilters]="allFilters"
   [ngClass]="{ 'd-none': !hasPermissionToFilter }"
->
-  <ion-icon class="mr-1" matPrefix name="search-outline"></ion-icon>
-  <mat-chip-list #chipList aria-label="Search keywords">
-    <mat-chip
-      *ngFor="let searchKeyword of searchKeywords"
-      class="mx-1 my-0 px-2 py-0"
-      matChipRemove
-      [removable]="true"
-      (removed)="removeKeyword(searchKeyword)"
-    >
-      {{ searchKeyword | gfSymbol }}
-      <ion-icon class="ml-2" matPrefix name="close-outline"></ion-icon>
-    </mat-chip>
-    <input
-      #searchInput
-      name="close-outline"
-      [formControl]="searchControl"
-      [matAutocomplete]="autocomplete"
-      [matChipInputFor]="chipList"
-      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
   [placeholder]="placeholder"
-      (matChipInputTokenEnd)="addKeyword($event)"
-    />
-  </mat-chip-list>
-  <mat-autocomplete
-    #autocomplete="matAutocomplete"
-    (optionSelected)="keywordSelected($event)"
-  >
-    <mat-option *ngFor="let filter of filters | async" [value]="filter">
-      {{ filter | gfSymbol }}
-    </mat-option>
-  </mat-autocomplete>
-</mat-form-field>
+  (valueChanged)="updateFilter($event)"
+></gf-activities-filter>
 
 <div class="activities">
   <table
@@ -271,6 +240,7 @@
       <td *matFooterCellDef class="d-none d-lg-table-cell px-1" mat-footer-cell>
         <div class="d-flex justify-content-end">
           <gf-value
+            *ngIf="totalValue !== null"
             [isAbsolute]="true"
             [isCurrency]="true"
             [locale]="locale"
@@ -302,6 +272,7 @@
       <td *matFooterCellDef class="d-lg-none d-xl-none px-1" mat-footer-cell>
         <div class="d-flex justify-content-end">
           <gf-value
+            *ngIf="totalValue !== null"
             [isAbsolute]="true"
             [isCurrency]="true"
             [locale]="locale"
@@ -356,11 +327,22 @@
             *ngIf="hasPermissionToExportActivities"
             class="align-items-center d-flex"
             mat-menu-item
+            [disabled]="dataSource.data.length === 0"
             (click)="onExport()"
           >
             <ion-icon class="mr-2" name="cloud-download-outline"></ion-icon>
             <span i18n>Export</span>
           </button>
+          <button
+            *ngIf="hasPermissionToExportActivities"
+            class="align-items-center d-flex"
+            mat-menu-item
+            [disabled]="!hasDrafts"
+            (click)="onExportDrafts()"
+          >
+            <ion-icon class="mr-2" name="calendar-clear-outline"></ion-icon>
+            <span i18n>Export Drafts as ICS</span>
+          </button>
         </mat-menu>
       </th>
       <td *matCellDef="let element" class="px-1 text-center" mat-cell>
@@ -374,14 +356,25 @@
           <ion-icon name="ellipsis-vertical"></ion-icon>
         </button>
         <mat-menu #activityMenu="matMenu" xPosition="before">
-          <button i18n mat-menu-item (click)="onUpdateActivity(element)">
-            Edit
+          <button mat-menu-item (click)="onUpdateActivity(element)">
+            <ion-icon class="mr-2" name="create-outline"></ion-icon>
+            <span i18n>Edit</span>
           </button>
-          <button i18n mat-menu-item (click)="onCloneActivity(element)">
-            Clone
+          <button mat-menu-item (click)="onCloneActivity(element)">
+            <ion-icon class="mr-2" name="copy-outline"></ion-icon>
+            <span i18n>Clone</span>
           </button>
-          <button i18n mat-menu-item (click)="onDeleteActivity(element.id)">
-            Delete
+          <button
+            mat-menu-item
+            [disabled]="!element.isDraft"
+            (click)="onExportDraft(element.id)"
+          >
+            <ion-icon class="mr-2" name="calendar-clear-outline"></ion-icon>
+            <span i18n>Export Draft as ICS</span>
+          </button>
+          <button mat-menu-item (click)="onDeleteActivity(element.id)">
+            <ion-icon class="mr-2" name="trash-outline"></ion-icon>
+            <span i18n>Delete</span>
           </button>
         </mat-menu>
       </td>

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

@@ -3,17 +3,6 @@
 :host {
   display: block;
 
-  ::ng-deep {
-    .mat-form-field-infix {
-      border-top: 0 solid transparent !important;
-    }
-  }
-
-  .mat-chip {
-    cursor: pointer;
-    min-height: 1.5rem !important;
-  }
-
   .activities {
     overflow-x: auto;
 
@@ -68,10 +57,6 @@
 }
 
 :host-context(.is-dark-theme) {
-  .mat-form-field {
-    color: rgba(var(--light-primary-text));
-  }
-
   .mat-table {
     td {
       &.mat-footer-cell {

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

@@ -1,8 +1,6 @@
-import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import {
   ChangeDetectionStrategy,
   Component,
-  ElementRef,
   EventEmitter,
   Input,
   OnChanges,
@@ -11,11 +9,6 @@ import {
   ViewChild
 } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import {
-  MatAutocomplete,
-  MatAutocompleteSelectedEvent
-} from '@angular/material/autocomplete';
-import { MatChipInputEvent } from '@angular/material/chips';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
@@ -27,8 +20,7 @@ import Big from 'big.js';
 import { isUUID } from 'class-validator';
 import { endOfToday, format, isAfter } from 'date-fns';
 import { isNumber } from 'lodash';
-import { BehaviorSubject, Observable, Subject, Subscription } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { Subject, Subscription } from 'rxjs';
 
 const SEARCH_PLACEHOLDER = 'Search for account, currency, symbol or type...';
 const SEARCH_STRING_SEPARATOR = ',';
@@ -56,18 +48,17 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
   @Output() activityToClone = new EventEmitter<OrderWithAccount>();
   @Output() activityToUpdate = new EventEmitter<OrderWithAccount>();
   @Output() export = new EventEmitter<string[]>();
+  @Output() exportDrafts = new EventEmitter<string[]>();
   @Output() import = new EventEmitter<void>();
 
-  @ViewChild('autocomplete') matAutocomplete: MatAutocomplete;
-  @ViewChild('searchInput') searchInput: ElementRef<HTMLInputElement>;
   @ViewChild(MatSort) sort: MatSort;
 
+  public allFilters: string[];
   public dataSource: MatTableDataSource<Activity> = new MatTableDataSource();
   public defaultDateFormat: string;
   public displayedColumns = [];
   public endOfToday = endOfToday();
-  public filters$: Subject<string[]> = new BehaviorSubject([]);
-  public filters: Observable<string[]> = this.filters$.asObservable();
+  public hasDrafts = false;
   public isAfter = isAfter;
   public isLoading = true;
   public isUUID = isUUID;
@@ -75,59 +66,12 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
   public routeQueryParams: Subscription;
   public searchControl = new FormControl();
   public searchKeywords: string[] = [];
-  public separatorKeysCodes: number[] = [ENTER, COMMA];
   public totalFees: number;
   public totalValue: number;
 
-  private allFilters: string[];
   private unsubscribeSubject = new Subject<void>();
 
-  public constructor(private router: Router) {
-    this.searchControl.valueChanges
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((keyword) => {
-        if (keyword) {
-          const filterValue = keyword.toLowerCase();
-          this.filters$.next(
-            this.allFilters.filter(
-              (filter) => filter.toLowerCase().indexOf(filterValue) === 0
-            )
-          );
-        } else {
-          this.filters$.next(this.allFilters);
-        }
-      });
-  }
-
-  public addKeyword({ input, value }: MatChipInputEvent): void {
-    if (value?.trim()) {
-      this.searchKeywords.push(value.trim());
-      this.updateFilter();
-    }
-
-    // Reset the input value
-    if (input) {
-      input.value = '';
-    }
-
-    this.searchControl.setValue(null);
-  }
-
-  public removeKeyword(keyword: string): void {
-    const index = this.searchKeywords.indexOf(keyword);
-
-    if (index >= 0) {
-      this.searchKeywords.splice(index, 1);
-      this.updateFilter();
-    }
-  }
-
-  public keywordSelected(event: MatAutocompleteSelectedEvent): void {
-    this.searchKeywords.push(event.option.viewValue);
-    this.updateFilter();
-    this.searchInput.nativeElement.value = '';
-    this.searchControl.setValue(null);
-  }
+  public constructor(private router: Router) {}
 
   public ngOnChanges() {
     this.displayedColumns = [
@@ -198,6 +142,22 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
     }
   }
 
+  public onExportDraft(aActivityId: string) {
+    this.exportDrafts.emit([aActivityId]);
+  }
+
+  public onExportDrafts() {
+    this.exportDrafts.emit(
+      this.dataSource.filteredData
+        .filter((activity) => {
+          return activity.isDraft;
+        })
+        .map((activity) => {
+          return activity.id;
+        })
+    );
+  }
+
   public onImport() {
     this.import.emit();
   }
@@ -212,32 +172,55 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
     this.activityToUpdate.emit(aActivity);
   }
 
-  public ngOnDestroy() {
-    this.unsubscribeSubject.next();
-    this.unsubscribeSubject.complete();
-  }
-
-  private updateFilter() {
-    this.dataSource.filter = this.searchKeywords.join(SEARCH_STRING_SEPARATOR);
-    const lowercaseSearchKeywords = this.searchKeywords.map((keyword) =>
+  public updateFilter(filters: string[] = []) {
+    this.dataSource.filter = filters.join(SEARCH_STRING_SEPARATOR);
+    const lowercaseSearchKeywords = filters.map((keyword) =>
       keyword.trim().toLowerCase()
     );
 
     this.placeholder =
       lowercaseSearchKeywords.length <= 0 ? SEARCH_PLACEHOLDER : '';
 
+    this.searchKeywords = filters;
+
     this.allFilters = this.getSearchableFieldValues(this.activities).filter(
       (item) => {
         return !lowercaseSearchKeywords.includes(item.trim().toLowerCase());
       }
     );
 
-    this.filters$.next(this.allFilters);
-
+    this.hasDrafts = this.dataSource.data.some((activity) => {
+      return activity.isDraft === true;
+    });
     this.totalFees = this.getTotalFees();
     this.totalValue = this.getTotalValue();
   }
 
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
+  private getFilterableValues(
+    activity: OrderWithAccount,
+    fieldValues: Set<string> = new Set<string>()
+  ): string[] {
+    fieldValues.add(activity.Account?.name);
+    fieldValues.add(activity.Account?.Platform?.name);
+    fieldValues.add(activity.SymbolProfile.currency);
+
+    if (!isUUID(activity.SymbolProfile.symbol)) {
+      fieldValues.add(activity.SymbolProfile.symbol);
+    }
+
+    fieldValues.add(activity.type);
+    fieldValues.add(format(activity.date, 'yyyy'));
+
+    return [...fieldValues].filter((item) => {
+      return item !== undefined;
+    });
+  }
+
   private getSearchableFieldValues(activities: OrderWithAccount[]): string[] {
     const fieldValues = new Set<string>();
 
@@ -266,26 +249,6 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
       });
   }
 
-  private getFilterableValues(
-    activity: OrderWithAccount,
-    fieldValues: Set<string> = new Set<string>()
-  ): string[] {
-    fieldValues.add(activity.Account?.name);
-    fieldValues.add(activity.Account?.Platform?.name);
-    fieldValues.add(activity.SymbolProfile.currency);
-
-    if (!isUUID(activity.SymbolProfile.symbol)) {
-      fieldValues.add(activity.SymbolProfile.symbol);
-    }
-
-    fieldValues.add(activity.type);
-    fieldValues.add(format(activity.date, 'yyyy'));
-
-    return [...fieldValues].filter((item) => {
-      return item !== undefined;
-    });
-  }
-
   private getTotalFees() {
     let totalFees = new Big(0);
 
@@ -308,7 +271,7 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
         if (activity.type === 'BUY' || activity.type === 'ITEM') {
           totalValue = totalValue.plus(activity.valueInBaseCurrency);
         } else if (activity.type === 'SELL') {
-          totalValue = totalValue.minus(activity.valueInBaseCurrency);
+          return null;
         }
       } else {
         return null;

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

@@ -1,16 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
-import { MatChipsModule } from '@angular/material/chips';
-import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
 import { GfSymbolIconModule } from '@ghostfolio/client/components/symbol-icon/symbol-icon.module';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
+import { GfActivitiesFilterModule } from '@ghostfolio/ui/activities-filter/activities-filter.module';
 import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
 import { GfValueModule } from '@ghostfolio/ui/value';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
@@ -22,19 +19,16 @@ import { ActivitiesTableComponent } from './activities-table.component';
   exports: [ActivitiesTableComponent],
   imports: [
     CommonModule,
+    GfActivitiesFilterModule,
     GfNoTransactionsInfoModule,
     GfSymbolIconModule,
     GfSymbolModule,
     GfValueModule,
-    MatAutocompleteModule,
     MatButtonModule,
-    MatChipsModule,
-    MatInputModule,
     MatMenuModule,
     MatSortModule,
     MatTableModule,
     NgxSkeletonLoaderModule,
-    ReactiveFormsModule,
     RouterModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

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

@@ -0,0 +1,65 @@
+<div class="container p-0">
+  <div class="row">
+    <div class="col-md-3">
+      <form class="" [formGroup]="calculatorForm">
+        <!--<mat-form-field appearance="outline">
+          <input formControlName="principalInvestmentAmount" matInput />
+        </mat-form-field>-->
+
+        <mat-form-field appearance="outline" class="w-100">
+          <mat-label i18n>Savings Rate</mat-label>
+          <input
+            formControlName="paymentPerPeriod"
+            matInput
+            step="100"
+            type="number"
+          />
+          <span class="ml-2" i18n matSuffix>{{ currency }} per month</span>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" class="w-100">
+          <mat-label i18n>Investment Horizon</mat-label>
+          <input formControlName="time" matInput type="number" />
+          <span class="ml-2" i18n matSuffix>years</span>
+        </mat-form-field>
+
+        <mat-form-field appearance="outline" class="w-100">
+          <mat-label i18n>Annual Interest Rate</mat-label>
+          <input
+            formControlName="annualInterestRate"
+            matInput
+            step="0.25"
+            type="number"
+          />
+          <span class="ml-2" i18n matSuffix>%</span>
+        </mat-form-field>
+
+        <gf-value
+          label="Projected Total Amount"
+          size="large"
+          [currency]="currency"
+          [isCurrency]="true"
+          [locale]="locale"
+          [value]="projectedTotalAmount"
+        ></gf-value>
+      </form>
+    </div>
+    <div class="col-md-9 text-center">
+      <div class="chart-container mb-4">
+        <ngx-skeleton-loader
+          *ngIf="isLoading"
+          animation="pulse"
+          [theme]="{
+            height: '100%',
+            width: '100%'
+          }"
+        ></ngx-skeleton-loader>
+        <canvas
+          #chartCanvas
+          class="h-100"
+          [ngStyle]="{ display: isLoading ? 'none' : 'block' }"
+        ></canvas>
+      </div>
+    </div>
+  </div>
+</div>

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

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

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

@@ -0,0 +1,48 @@
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { baseCurrency, locale } from '@ghostfolio/common/config';
+import { Meta, Story, moduleMetadata } from '@storybook/angular';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+
+import { GfValueModule } from '../value';
+import { FireCalculatorComponent } from './fire-calculator.component';
+import { FireCalculatorService } from './fire-calculator.service';
+
+export default {
+  title: 'FIRE Calculator',
+  component: FireCalculatorComponent,
+  decorators: [
+    moduleMetadata({
+      declarations: [FireCalculatorComponent],
+      imports: [
+        CommonModule,
+        FormsModule,
+        GfValueModule,
+        MatButtonModule,
+        MatFormFieldModule,
+        MatInputModule,
+        NgxSkeletonLoaderModule,
+        NoopAnimationsModule,
+        ReactiveFormsModule
+      ],
+      providers: [FireCalculatorService]
+    })
+  ]
+} as Meta<FireCalculatorComponent>;
+
+const Template: Story<FireCalculatorComponent> = (
+  args: FireCalculatorComponent
+) => ({
+  props: args
+});
+
+export const Simple = Template.bind({});
+Simple.args = {
+  currency: baseCurrency,
+  fireWealth: 0,
+  locale: locale
+};

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

@@ -0,0 +1,307 @@
+import 'chartjs-adapter-date-fns';
+
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  ViewChild
+} from '@angular/core';
+import { FormBuilder, FormControl } from '@angular/forms';
+import { primaryColorRgb } from '@ghostfolio/common/config';
+import { transformTickToAbbreviation } from '@ghostfolio/common/helper';
+import {
+  BarController,
+  BarElement,
+  CategoryScale,
+  Chart,
+  LinearScale,
+  Tooltip
+} from 'chart.js';
+import * as Color from 'color';
+import { isNumber } from 'lodash';
+import { Subject, takeUntil } from 'rxjs';
+
+import { FireCalculatorService } from './fire-calculator.service';
+
+@Component({
+  selector: 'gf-fire-calculator',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './fire-calculator.component.html',
+  styleUrls: ['./fire-calculator.component.scss']
+})
+export class FireCalculatorComponent
+  implements AfterViewInit, OnChanges, OnDestroy
+{
+  @Input() currency: string;
+  @Input() deviceType: string;
+  @Input() fireWealth: number;
+  @Input() locale: string;
+  @Input() savingsRate = 0;
+
+  @Output() savingsRateChanged = new EventEmitter<number>();
+
+  @ViewChild('chartCanvas') chartCanvas;
+
+  public calculatorForm = this.formBuilder.group({
+    annualInterestRate: new FormControl(),
+    paymentPerPeriod: new FormControl(),
+    principalInvestmentAmount: new FormControl(),
+    time: new FormControl()
+  });
+  public chart: Chart;
+  public isLoading = true;
+  public projectedTotalAmount: number;
+
+  private unsubscribeSubject = new Subject<void>();
+
+  /**
+   * @constructor
+   */
+  public constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    private fireCalculatorService: FireCalculatorService,
+    private formBuilder: FormBuilder
+  ) {
+    Chart.register(
+      BarController,
+      BarElement,
+      CategoryScale,
+      LinearScale,
+      Tooltip
+    );
+
+    this.calculatorForm.setValue({
+      annualInterestRate: 5,
+      paymentPerPeriod: this.savingsRate,
+      principalInvestmentAmount: 0,
+      time: 10
+    });
+
+    this.calculatorForm.valueChanges
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        this.initialize();
+      });
+
+    this.calculatorForm
+      .get('paymentPerPeriod')
+      .valueChanges.pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((savingsRate) => {
+        this.savingsRateChanged.emit(savingsRate);
+      });
+  }
+
+  public ngAfterViewInit() {
+    if (isNumber(this.fireWealth) && this.fireWealth >= 0) {
+      setTimeout(() => {
+        // Wait for the chartCanvas
+        this.calculatorForm.patchValue(
+          {
+            principalInvestmentAmount: this.fireWealth,
+            paymentPerPeriod: this.savingsRate ?? 0
+          },
+          {
+            emitEvent: false
+          }
+        );
+        this.calculatorForm.get('principalInvestmentAmount').disable();
+
+        this.changeDetectorRef.markForCheck();
+      });
+    }
+  }
+
+  public ngOnChanges() {
+    if (isNumber(this.fireWealth) && this.fireWealth >= 0) {
+      setTimeout(() => {
+        // Wait for the chartCanvas
+        this.calculatorForm.patchValue(
+          {
+            principalInvestmentAmount: this.fireWealth,
+            paymentPerPeriod: this.savingsRate ?? 0
+          },
+          {
+            emitEvent: false
+          }
+        );
+        this.calculatorForm.get('principalInvestmentAmount').disable();
+
+        this.changeDetectorRef.markForCheck();
+      });
+    }
+  }
+
+  public ngOnDestroy() {
+    this.chart?.destroy();
+
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
+  private initialize() {
+    this.isLoading = true;
+
+    const chartData = this.getChartData();
+
+    if (this.chartCanvas) {
+      if (this.chart) {
+        this.chart.data.labels = chartData.labels;
+
+        for (let index = 0; index < this.chart.data.datasets.length; index++) {
+          this.chart.data.datasets[index].data = chartData.datasets[index].data;
+        }
+
+        this.chart.update();
+      } else {
+        this.chart = new Chart(this.chartCanvas.nativeElement, {
+          data: chartData,
+          options: {
+            plugins: {
+              tooltip: {
+                itemSort: (a, b) => {
+                  // Reverse order
+                  return b.datasetIndex - a.datasetIndex;
+                },
+                mode: 'index',
+                callbacks: {
+                  footer: (items) => {
+                    const totalAmount = items.reduce(
+                      (a, b) => a + b.parsed.y,
+                      0
+                    );
+
+                    return `Total: ${new Intl.NumberFormat(this.locale, {
+                      currency: this.currency,
+                      currencyDisplay: 'code',
+                      style: 'currency'
+                    }).format(totalAmount)}`;
+                  },
+                  label: (context) => {
+                    let label = context.dataset.label || '';
+
+                    if (label) {
+                      label += ': ';
+                    }
+
+                    if (context.parsed.y !== null) {
+                      label += new Intl.NumberFormat(this.locale, {
+                        currency: this.currency,
+                        currencyDisplay: 'code',
+                        style: 'currency'
+                      }).format(context.parsed.y);
+                    }
+
+                    return label;
+                  }
+                }
+              }
+            },
+            responsive: true,
+            scales: {
+              x: {
+                grid: {
+                  display: false
+                },
+                stacked: true
+              },
+              y: {
+                display: this.deviceType !== 'mobile',
+                grid: {
+                  display: false
+                },
+                stacked: true,
+                ticks: {
+                  callback: (value: number) => {
+                    return transformTickToAbbreviation(value);
+                  }
+                }
+              }
+            }
+          },
+          type: 'bar'
+        });
+      }
+    }
+
+    this.isLoading = false;
+  }
+
+  private getChartData() {
+    const currentYear = new Date().getFullYear();
+    const labels = [];
+
+    // Principal investment amount
+    const P: number =
+      this.calculatorForm.get('principalInvestmentAmount').value || 0;
+
+    // Payment per period
+    const PMT: number = parseFloat(
+      this.calculatorForm.get('paymentPerPeriod').value
+    );
+
+    // Annual interest rate
+    const r: number = this.calculatorForm.get('annualInterestRate').value / 100;
+
+    // Time
+    const t: number = parseFloat(this.calculatorForm.get('time').value);
+
+    for (let year = currentYear; year < currentYear + t; year++) {
+      labels.push(year);
+    }
+
+    const datasetDeposit = {
+      backgroundColor: `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`,
+      data: [],
+      label: 'Deposit'
+    };
+
+    const datasetInterest = {
+      backgroundColor: Color(
+        `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`
+      )
+        .lighten(0.5)
+        .hex(),
+      data: [],
+      label: 'Interest'
+    };
+
+    const datasetSavings = {
+      backgroundColor: Color(
+        `rgb(${primaryColorRgb.r}, ${primaryColorRgb.g}, ${primaryColorRgb.b})`
+      )
+        .lighten(0.25)
+        .hex(),
+      data: [],
+      label: 'Savings'
+    };
+
+    for (let period = 1; period <= t; period++) {
+      const { interest, principal, totalAmount } =
+        this.fireCalculatorService.calculateCompoundInterest({
+          P,
+          period,
+          PMT,
+          r
+        });
+
+      datasetDeposit.data.push(this.fireWealth);
+      datasetInterest.data.push(interest.toNumber());
+      datasetSavings.data.push(principal.minus(this.fireWealth).toNumber());
+
+      if (period === t) {
+        this.projectedTotalAmount = totalAmount.toNumber();
+      }
+    }
+
+    return {
+      labels,
+      datasets: [datasetDeposit, datasetSavings, datasetInterest]
+    };
+  }
+}

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

@@ -0,0 +1,28 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+
+import { GfValueModule } from '../value';
+import { FireCalculatorComponent } from './fire-calculator.component';
+import { FireCalculatorService } from './fire-calculator.service';
+
+@NgModule({
+  declarations: [FireCalculatorComponent],
+  exports: [FireCalculatorComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    GfValueModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    NgxSkeletonLoaderModule,
+    ReactiveFormsModule
+  ],
+  providers: [FireCalculatorService]
+})
+export class GfFireCalculatorModule {}

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

@@ -0,0 +1,49 @@
+import { Injectable } from '@angular/core';
+import Big from 'big.js';
+
+@Injectable()
+export class FireCalculatorService {
+  private readonly COMPOUND_PERIOD = 12;
+  private readonly CONTRIBUTION_PERIOD = 12;
+
+  /**
+   * @constructor
+   */
+  public constructor() {}
+
+  public calculateCompoundInterest({
+    P,
+    period,
+    PMT,
+    r
+  }: {
+    P: number;
+    period: number;
+    PMT: number;
+    r: number;
+  }) {
+    let interest = new Big(0);
+    const principal = new Big(P).plus(
+      new Big(PMT).mul(this.CONTRIBUTION_PERIOD).mul(period)
+    );
+    let totalAmount = principal;
+
+    if (r) {
+      const compoundInterestForPrincipal = new Big(1)
+        .plus(new Big(r).div(this.COMPOUND_PERIOD))
+        .pow(new Big(this.COMPOUND_PERIOD).mul(period).toNumber());
+      const compoundInterest = new Big(P).mul(compoundInterestForPrincipal);
+      const contributionInterest = new Big(
+        new Big(PMT).mul(compoundInterestForPrincipal.minus(1))
+      ).div(new Big(r).div(this.CONTRIBUTION_PERIOD));
+      interest = compoundInterest.plus(contributionInterest).minus(principal);
+      totalAmount = compoundInterest.plus(contributionInterest);
+    }
+
+    return {
+      interest,
+      principal,
+      totalAmount
+    };
+  }
+}

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

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

libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts

@@ -246,6 +246,12 @@ export class PortfolioProportionChartComponent
       labels = labelSubCategory.concat(labels);
     }
 
+    if (datasets[0]?.data?.length === 0 || datasets[0]?.data?.[0] === 0) {
+      labels = [''];
+      datasets[0].backgroundColor = [this.colorMap[UNKNOWN_KEY]];
+      datasets[0].data[0] = Number.MAX_SAFE_INTEGER;
+    }
+
     const data = {
       datasets,
       labels
@@ -323,7 +329,9 @@ export class PortfolioProportionChartComponent
 
                     const percentage = (context.parsed * 100) / sum;
 
-                    if (this.isInPercent) {
+                    if (<number>context.raw === Number.MAX_SAFE_INTEGER) {
+                      return 'No data available';
+                    } else if (this.isInPercent) {
                       return [`${name ?? symbol}`, `${percentage.toFixed(2)}%`];
                     } else {
                       const value = <number>context.raw;

libs/ui/src/lib/value/value.component.html

@@ -10,14 +10,14 @@
       </ng-container>
       <div
         *ngIf="isPercent"
-        class="mb-0"
+        class="mb-0 value"
         [ngClass]="{ h2: size === 'large', h4: size === 'medium' }"
       >
         {{ formattedValue }}%
       </div>
       <div
         *ngIf="!isPercent"
-        class="mb-0"
+        class="mb-0 value"
         [ngClass]="{ h2: size === 'large', h4: size === 'medium' }"
       >
         <ng-container *ngIf="value === null">
@@ -36,7 +36,7 @@
     </ng-container>
     <ng-container *ngIf="isString">
       <div
-        class="mb-0 text-truncate"
+        class="mb-0 text-truncate value"
         [ngClass]="{ h2: size === 'large', h4: size === 'medium' }"
       >
         {{ formattedValue | titlecase }}
@@ -45,7 +45,8 @@
   </div>
   <ng-container *ngIf="label">
     <div *ngIf="size === 'large'">
-      {{ label }}
+      <span class="h6">{{ label }}</span>
+      <span *ngIf="subLabel" class="text-muted"> {{ subLabel }}</span>
     </div>
     <small *ngIf="size !== 'large'">
       {{ label }}

libs/ui/src/lib/value/value.component.scss

@@ -2,4 +2,8 @@
   display: flex;
   flex-direction: column;
   font-variant-numeric: tabular-nums;
+
+  .h2 {
+    line-height: 1;
+  }
 }

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

@@ -5,7 +5,6 @@ import {
   OnChanges
 } from '@angular/core';
 import { getLocale } from '@ghostfolio/common/helper';
-import { isDate, parseISO } from 'date-fns';
 import { isNumber } from 'lodash';
 
 @Component({
@@ -19,12 +18,14 @@ export class ValueComponent implements OnChanges {
   @Input() currency = '';
   @Input() isAbsolute = false;
   @Input() isCurrency = false;
+  @Input() isDate = false;
   @Input() isPercent = false;
   @Input() label = '';
   @Input() locale = getLocale();
   @Input() position = '';
   @Input() precision: number | undefined;
   @Input() size: 'large' | 'medium' | 'small' = 'small';
+  @Input() subLabel = '';
   @Input() value: number | string = '';
 
   public absoluteValue = 0;
@@ -100,17 +101,16 @@ export class ValueComponent implements OnChanges {
         this.isNumber = false;
         this.isString = true;
 
-        try {
-          if (isDate(parseISO(this.value))) {
-            this.formattedValue = new Date(
-              <string>this.value
-            ).toLocaleDateString(this.locale, {
+        if (this.isDate) {
+          this.formattedValue = new Date(<string>this.value).toLocaleDateString(
+            this.locale,
+            {
               day: '2-digit',
               month: '2-digit',
               year: 'numeric'
-            });
             }
-        } catch {
+          );
+        } else {
           this.formattedValue = this.value;
         }
       }
@@ -119,9 +119,5 @@ export class ValueComponent implements OnChanges {
     if (this.formattedValue === '0.00') {
       this.useAbsoluteValue = true;
     }
-
-    if (this.isPercent) {
-      this.formattedValue = '– ';
-    }
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ghostfolio",
-  "version": "1.132.0",
+  "version": "1.141.1",
   "homepage": "https://ghostfol.io",
   "license": "AGPL-3.0",
   "scripts": {
@@ -71,7 +71,7 @@
     "@nestjs/schedule": "1.0.2",
     "@nestjs/serve-static": "2.2.2",
     "@nrwl/angular": "13.8.5",
-    "@prisma/client": "3.11.1",
+    "@prisma/client": "3.12.0",
     "@simplewebauthn/browser": "4.1.0",
     "@simplewebauthn/server": "4.1.0",
     "@simplewebauthn/typescript-types": "4.0.0",
@@ -109,7 +109,7 @@
     "passport": "0.4.1",
     "passport-google-oauth20": "2.0.0",
     "passport-jwt": "4.0.0",
-    "prisma": "3.11.1",
+    "prisma": "3.12.0",
     "reflect-metadata": "0.1.13",
     "round-to": "5.0.0",
     "rxjs": "7.4.0",
@@ -118,7 +118,7 @@
     "tslib": "2.0.0",
     "twitter-api-v2": "1.10.3",
     "uuid": "8.3.2",
-    "yahoo-finance2": "2.3.0",
+    "yahoo-finance2": "2.3.1",
     "zone.js": "0.11.4"
   },
   "devDependencies": {

prisma/migrations/20220422174935_added_symbol_profile_overrides/migration.sql

@@ -0,0 +1,15 @@
+-- CreateTable
+CREATE TABLE "SymbolProfileOverrides" (
+    "assetClass" "AssetClass",
+    "assetSubClass" "AssetSubClass",
+    "countries" JSONB,
+    "name" TEXT,
+    "sectors" JSONB,
+    "symbolProfileId" TEXT NOT NULL,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "SymbolProfileOverrides_pkey" PRIMARY KEY ("symbolProfileId")
+);
+
+-- AddForeignKey
+ALTER TABLE "SymbolProfileOverrides" ADD CONSTRAINT "SymbolProfileOverrides_symbolProfileId_fkey" FOREIGN KEY ("symbolProfileId") REFERENCES "SymbolProfile"("id") ON DELETE RESTRICT ON UPDATE CASCADE;

prisma/migrations/20220422183831_added_commodity_to_asset_sub_class/migration.sql

@@ -0,0 +1,2 @@
+-- AlterEnum
+ALTER TYPE "AssetSubClass" ADD VALUE 'COMMODITY';

prisma/migrations/20220424064155_changed_various_ids_with_multiple_fields/migration.sql

@@ -0,0 +1,14 @@
+-- AlterTable
+ALTER TABLE "Access" DROP CONSTRAINT "Access_pkey",
+ADD CONSTRAINT "Access_pkey" PRIMARY KEY ("id");
+
+-- AlterTable
+ALTER TABLE "MarketData" ADD CONSTRAINT "MarketData_pkey" PRIMARY KEY ("id");
+
+-- AlterTable
+ALTER TABLE "Order" DROP CONSTRAINT "Order_pkey",
+ADD CONSTRAINT "Order_pkey" PRIMARY KEY ("id");
+
+-- AlterTable
+ALTER TABLE "Subscription" DROP CONSTRAINT "Subscription_pkey",
+ADD CONSTRAINT "Subscription_pkey" PRIMARY KEY ("id");

prisma/migrations/20220424152051_added_tags_to_order/migration.sql

@@ -0,0 +1,28 @@
+-- CreateTable
+CREATE TABLE "Tag" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+
+    CONSTRAINT "Tag_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "_OrderToTag" (
+    "A" TEXT NOT NULL,
+    "B" TEXT NOT NULL
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Tag_name_key" ON "Tag"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "_OrderToTag_AB_unique" ON "_OrderToTag"("A", "B");
+
+-- CreateIndex
+CREATE INDEX "_OrderToTag_B_index" ON "_OrderToTag"("B");
+
+-- AddForeignKey
+ALTER TABLE "_OrderToTag" ADD FOREIGN KEY ("A") REFERENCES "Order"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "_OrderToTag" ADD FOREIGN KEY ("B") REFERENCES "Tag"("id") ON DELETE CASCADE ON UPDATE CASCADE;

prisma/schema.prisma

@@ -13,12 +13,10 @@ model Access {
   createdAt     DateTime @default(now())
   GranteeUser   User?    @relation(fields: [granteeUserId], name: "accessGet", references: [id])
   granteeUserId String?
-  id            String   @default(uuid())
+  id            String   @id @default(uuid())
   updatedAt     DateTime @updatedAt
   User          User     @relation(fields: [userId], name: "accessGive", references: [id])
   userId        String
-
-  @@id([id, userId])
 }
 
 model Account {
@@ -61,7 +59,7 @@ model MarketData {
   createdAt   DateTime   @default(now())
   dataSource  DataSource
   date        DateTime
-  id          String     @default(uuid())
+  id          String     @id @default(uuid())
   symbol      String
   marketPrice Float
 
@@ -76,18 +74,17 @@ model Order {
   createdAt       DateTime      @default(now())
   date            DateTime
   fee             Float
-  id              String        @default(uuid())
+  id              String        @id @default(uuid())
   isDraft         Boolean       @default(false)
   quantity        Float
   SymbolProfile   SymbolProfile @relation(fields: [symbolProfileId], references: [id])
   symbolProfileId String
+  tags            Tag[]
   type            Type
   unitPrice       Float
   updatedAt       DateTime      @updatedAt
   User            User          @relation(fields: [userId], references: [id])
   userId          String
-
-  @@id([id, userId])
 }
 
 model Platform {
@@ -126,20 +123,36 @@ model SymbolProfile {
   sectors                Json?
   symbol                 String
   symbolMapping          Json?
+  SymbolProfileOverrides SymbolProfileOverrides?
   url                    String?
 
   @@unique([dataSource, symbol])
 }
 
+model SymbolProfileOverrides {
+  assetClass      AssetClass?
+  assetSubClass   AssetSubClass?
+  countries       Json?
+  name            String?
+  sectors         Json?
+  SymbolProfile   SymbolProfile  @relation(fields: [symbolProfileId], references: [id])
+  symbolProfileId String         @id
+  updatedAt       DateTime       @updatedAt
+}
+
 model Subscription {
   createdAt DateTime @default(now())
   expiresAt DateTime
-  id        String   @default(uuid())
+  id        String   @id @default(uuid())
   updatedAt DateTime @updatedAt
   User      User     @relation(fields: [userId], references: [id])
   userId    String
+}
 
-  @@id([id, userId])
+model Tag {
+  id     String  @id @default(uuid())
+  name   String  @unique
+  orders Order[]
 }
 
 model User {
@@ -176,6 +189,7 @@ enum AssetClass {
 
 enum AssetSubClass {
   BOND
+  COMMODITY
   CRYPTOCURRENCY
   ETF
   MUTUALFUND

yarn.lock

@@ -3487,22 +3487,22 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.1.tgz#728ecd95ab207aab8a9a4e421f0422db329232be"
   integrity sha512-HnUhk1Sy9IuKrxEMdIRCxpIqPw6BFsbYSEUO9p/hNw5sMld/+3OLMWQP80F8/db9qsv3qUjs7ZR5bS/R+iinXw==
 
-"@prisma/client@3.11.1":
-  version "3.11.1"
-  resolved "https://registry.yarnpkg.com/@prisma/client/-/client-3.11.1.tgz#bde6dec71ae133d04ce1c6658e3d76627a3c6dc7"
-  integrity sha512-B3C7zQG4HbjJzUr2Zg9UVkBJutbqq9/uqkl1S138+keZCubJrwizx3RuIvGwI+s+pm3qbsyNqXiZgL3Ir0fSng==
+"@prisma/client@3.12.0":
+  version "3.12.0"
+  resolved "https://registry.yarnpkg.com/@prisma/client/-/client-3.12.0.tgz#a0eb49ffea5c128dd11dffb896d7139a60073d12"
+  integrity sha512-4NEQjUcWja/NVBvfuDFscWSk1/rXg3+wj+TSkqXCb1tKlx/bsUE00rxsvOvGg7VZ6lw1JFpGkwjwmsOIc4zvQw==
   dependencies:
-    "@prisma/engines-version" "3.11.1-1.1a2506facaf1a4727b7c26850735e88ec779dee9"
+    "@prisma/engines-version" "3.12.0-37.22b822189f46ef0dc5c5b503368d1bee01213980"
 
-"@prisma/engines-version@3.11.1-1.1a2506facaf1a4727b7c26850735e88ec779dee9":
-  version "3.11.1-1.1a2506facaf1a4727b7c26850735e88ec779dee9"
-  resolved "https://registry.yarnpkg.com/@prisma/engines-version/-/engines-version-3.11.1-1.1a2506facaf1a4727b7c26850735e88ec779dee9.tgz#81a1835b495ad287ad7824dbd62f74e9eee90fb9"
-  integrity sha512-HkcsDniA4iNb/gi0iuyOJNAM7nD/LwQ0uJm15v360O5dee3TM4lWdSQiTYBMK6FF68ACUItmzSur7oYuUZ2zkQ==
+"@prisma/engines-version@3.12.0-37.22b822189f46ef0dc5c5b503368d1bee01213980":
+  version "3.12.0-37.22b822189f46ef0dc5c5b503368d1bee01213980"
+  resolved "https://registry.yarnpkg.com/@prisma/engines-version/-/engines-version-3.12.0-37.22b822189f46ef0dc5c5b503368d1bee01213980.tgz#829ca3d9d0d92555f44644606d4edfd45b2f5886"
+  integrity sha512-o+jo8d7ZEiVpcpNWUDh3fj2uPQpBxl79XE9ih9nkogJbhw6P33274SHnqheedZ7PyvPIK/mvU8MLNYgetgXPYw==
 
-"@prisma/engines@3.11.1-1.1a2506facaf1a4727b7c26850735e88ec779dee9":
-  version "3.11.1-1.1a2506facaf1a4727b7c26850735e88ec779dee9"
-  resolved "https://registry.yarnpkg.com/@prisma/engines/-/engines-3.11.1-1.1a2506facaf1a4727b7c26850735e88ec779dee9.tgz#09ac23f8f615a8586d8d44538060ada199fe872c"
-  integrity sha512-MILbsGnvmnhCbFGa2/iSnsyGyazU3afzD7ldjCIeLIGKkNBMSZgA2IvpYsAXl+6qFHKGrS3B2otKfV31dwMSQw==
+"@prisma/engines@3.12.0-37.22b822189f46ef0dc5c5b503368d1bee01213980":
+  version "3.12.0-37.22b822189f46ef0dc5c5b503368d1bee01213980"
+  resolved "https://registry.yarnpkg.com/@prisma/engines/-/engines-3.12.0-37.22b822189f46ef0dc5c5b503368d1bee01213980.tgz#e52e364084c4d05278f62768047b788665e64a45"
+  integrity sha512-zULjkN8yhzS7B3yeEz4aIym4E2w1ChrV12i14pht3ePFufvsAvBSoZ+tuXMvfSoNTgBS5E4bolRzLbMmbwkkMQ==
 
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.1"
@@ -15334,12 +15334,12 @@ pretty-hrtime@^1.0.3:
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
   integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
 
-prisma@3.11.1:
-  version "3.11.1"
-  resolved "https://registry.yarnpkg.com/prisma/-/prisma-3.11.1.tgz#fff9c0bcf83cb30c2e1d650882d5eb3c5565e028"
-  integrity sha512-aYn8bQwt1xwR2oSsVNHT4PXU7EhsThIwmpNB/MNUaaMx5OPLTro6VdNJe/sJssXFLxhamfWeMjwmpXjljo6xkg==
+prisma@3.12.0:
+  version "3.12.0"
+  resolved "https://registry.yarnpkg.com/prisma/-/prisma-3.12.0.tgz#9675e0e72407122759d3eadcb6d27cdccd3497bd"
+  integrity sha512-ltCMZAx1i0i9xuPM692Srj8McC665h6E5RqJom999sjtVSccHSD8Z+HSdBN2183h9PJKvC5dapkn78dd0NWMBg==
   dependencies:
-    "@prisma/engines" "3.11.1-1.1a2506facaf1a4727b7c26850735e88ec779dee9"
+    "@prisma/engines" "3.12.0-37.22b822189f46ef0dc5c5b503368d1bee01213980"
 
 prismjs@^1.21.0, prismjs@~1.24.0:
   version "1.24.1"
@@ -18836,10 +18836,10 @@ y18n@^5.0.5:
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
   integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
 
-yahoo-finance2@2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/yahoo-finance2/-/yahoo-finance2-2.3.0.tgz#81bd76732dfd38aa5d7019a97caf0f938c0127c2"
-  integrity sha512-7oj8n/WJH9MtX+q99WbHdjEVPdobTX8IyYjg7v4sDOh4f9ByT2Frxmp+Uj+rctrO0EiiD9QWTuwV4h8AemGuCg==
+yahoo-finance2@2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/yahoo-finance2/-/yahoo-finance2-2.3.1.tgz#d2cffbef78f6974e4e6a40487cc08ab133dc9fc5"
+  integrity sha512-QTXiiWgfrpVbSylchBgLqESZz+8+SyyDSqntjfZHxMIHa6d14xq+biNNDIeYd5SylcZ9Vt4zLmZXHN7EdLM1pA==
   dependencies:
     ajv "8.10.0"
     ajv-formats "2.1.1"