Release 1.145.0 (#884)

* Refactor filtering with an interface

* Filter by accounts

* Update changelog

CHANGELOG.md

@@ -5,6 +5,53 @@ 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.145.0 - 07.05.2022
+
+### Added
+
+- Added support for filtering by accounts on the allocations page
+- Added support for private equity
+- Extended the form to set the asset and asset sub class for (wealth) items
+
+### Changed
+
+- Refactored the filtering (activities table and allocations page)
+
+### Fixed
+
+- Fixed the tooltip update in the portfolio proportion chart component
+
+### Todo
+
+- Apply data migration (`yarn database:migrate`)
+
+## 1.144.0 - 30.04.2022
+
+### Added
+
+- Added support for commodities (via futures)
+- Added support for real estate
+
+### Changed
+
+- Improved the layout of the position detail dialog
+- Upgraded `yahoo-finance2` from version `2.3.1` to `2.3.2`
+
+### Fixed
+
+- Fixed the import validation for numbers equal 0
+- Fixed the color of the spinner in the activities filter component (dark mode)
+
+### Todo
+
+- Apply data migration (`yarn database:migrate`)
+
+## 1.143.0 - 26.04.2022
+
+### Changed
+
+- Improved the filtering by tags
+
 ## 1.142.0 - 25.04.2022
 
 ### Added

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

@@ -1,4 +1,4 @@
-import { DataSource, Type } from '@prisma/client';
+import { AssetClass, AssetSubClass, DataSource, Type } from '@prisma/client';
 import {
   IsEnum,
   IsISO8601,
@@ -10,14 +10,22 @@ import {
 export class CreateOrderDto {
   @IsString()
   @IsOptional()
-  accountId: string;
+  accountId?: string;
+
+  @IsEnum(AssetClass, { each: true })
+  @IsOptional()
+  assetClass?: AssetClass;
+
+  @IsEnum(AssetSubClass, { each: true })
+  @IsOptional()
+  assetSubClass?: AssetSubClass;
 
   @IsString()
   currency: string;
 
   @IsEnum(DataSource, { each: true })
   @IsOptional()
-  dataSource: DataSource;
+  dataSource?: DataSource;
 
   @IsISO8601()
   date: string;

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

@@ -171,6 +171,11 @@ export class OrderController {
               dataSource: data.dataSource,
               symbol: data.symbol
             }
+          },
+          update: {
+            assetClass: data.assetClass,
+            assetSubClass: data.assetSubClass,
+            name: data.symbol
           }
         },
         User: { connect: { id: this.request.user.id } }

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

@@ -4,11 +4,20 @@ 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 { SymbolProfileService } from '@ghostfolio/api/services/symbol-profile.service';
+import { Filter } from '@ghostfolio/common/interfaces';
 import { OrderWithAccount } from '@ghostfolio/common/types';
 import { Injectable } from '@nestjs/common';
-import { DataSource, Order, Prisma, Type as TypeOfOrder } from '@prisma/client';
+import {
+  AssetClass,
+  AssetSubClass,
+  DataSource,
+  Order,
+  Prisma,
+  Type as TypeOfOrder
+} from '@prisma/client';
 import Big from 'big.js';
 import { endOfToday, isAfter } from 'date-fns';
+import { groupBy } from 'lodash';
 import { v4 as uuidv4 } from 'uuid';
 
 import { Activity } from './interfaces/activities.interface';
@@ -55,6 +64,8 @@ export class OrderService {
   public async createOrder(
     data: Prisma.OrderCreateInput & {
       accountId?: string;
+      assetClass?: AssetClass;
+      assetSubClass?: AssetSubClass;
       currency?: string;
       dataSource?: DataSource;
       symbol?: string;
@@ -77,6 +88,8 @@ export class OrderService {
     };
 
     if (data.type === 'ITEM') {
+      const assetClass = data.assetClass;
+      const assetSubClass = data.assetSubClass;
       const currency = data.SymbolProfile.connectOrCreate.create.currency;
       const dataSource: DataSource = 'MANUAL';
       const id = uuidv4();
@@ -84,6 +97,8 @@ export class OrderService {
 
       Account = undefined;
       data.id = id;
+      data.SymbolProfile.connectOrCreate.create.assetClass = assetClass;
+      data.SymbolProfile.connectOrCreate.create.assetSubClass = assetSubClass;
       data.SymbolProfile.connectOrCreate.create.currency = currency;
       data.SymbolProfile.connectOrCreate.create.dataSource = dataSource;
       data.SymbolProfile.connectOrCreate.create.name = name;
@@ -120,6 +135,8 @@ export class OrderService {
     await this.cacheService.flush();
 
     delete data.accountId;
+    delete data.assetClass;
+    delete data.assetSubClass;
     delete data.currency;
     delete data.dataSource;
     delete data.symbol;
@@ -151,31 +168,44 @@ export class OrderService {
   }
 
   public async getOrders({
+    filters,
     includeDrafts = false,
-    tags,
     types,
     userCurrency,
     userId
   }: {
+    filters?: Filter[];
     includeDrafts?: boolean;
-    tags?: string[];
     types?: TypeOfOrder[];
     userCurrency: string;
     userId: string;
   }): Promise<Activity[]> {
     const where: Prisma.OrderWhereInput = { userId };
 
+    const { account: filtersByAccount, tag: filtersByTag } = groupBy(
+      filters,
+      (filter) => {
+        return filter.type;
+      }
+    );
+
+    if (filtersByAccount?.length > 0) {
+      where.accountId = {
+        in: filtersByAccount.map(({ id }) => {
+          return id;
+        })
+      };
+    }
+
     if (includeDrafts === false) {
       where.isDraft = false;
     }
 
-    if (tags?.length > 0) {
+    if (filtersByTag?.length > 0) {
       where.tags = {
         some: {
-          OR: tags.map((tag) => {
-            return {
-              name: tag
-            };
+          OR: filtersByTag.map(({ id }) => {
+            return { id };
           })
         }
       };
@@ -232,6 +262,8 @@ export class OrderService {
     where
   }: {
     data: Prisma.OrderUpdateInput & {
+      assetClass?: AssetClass;
+      assetSubClass?: AssetSubClass;
       currency?: string;
       dataSource?: DataSource;
       symbol?: string;
@@ -245,10 +277,10 @@ export class OrderService {
     let isDraft = false;
 
     if (data.type === 'ITEM') {
-      const name = data.SymbolProfile.connect.dataSource_symbol.symbol;
-
-      data.SymbolProfile = { update: { name } };
+      delete data.SymbolProfile.connect;
     } else {
+      delete data.SymbolProfile.update;
+
       isDraft = isAfter(data.date as Date, endOfToday());
 
       if (!isDraft) {
@@ -265,6 +297,8 @@ export class OrderService {
 
     await this.cacheService.flush();
 
+    delete data.assetClass;
+    delete data.assetSubClass;
     delete data.currency;
     delete data.dataSource;
     delete data.symbol;

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

@@ -1,10 +1,24 @@
-import { DataSource, Type } from '@prisma/client';
-import { IsISO8601, IsNumber, IsOptional, IsString } from 'class-validator';
+import { AssetClass, AssetSubClass, DataSource, Type } from '@prisma/client';
+import {
+  IsEnum,
+  IsISO8601,
+  IsNumber,
+  IsOptional,
+  IsString
+} from 'class-validator';
 
 export class UpdateOrderDto {
   @IsOptional()
   @IsString()
-  accountId: string;
+  accountId?: string;
+
+  @IsEnum(AssetClass, { each: true })
+  @IsOptional()
+  assetClass?: AssetClass;
+
+  @IsEnum(AssetSubClass, { each: true })
+  @IsOptional()
+  assetSubClass?: AssetSubClass;
 
   @IsString()
   currency: string;

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

@@ -11,6 +11,7 @@ import { ExchangeRateDataService } from '@ghostfolio/api/services/exchange-rate-
 import { baseCurrency } from '@ghostfolio/common/config';
 import { parseDate } from '@ghostfolio/common/helper';
 import {
+  Filter,
   PortfolioChart,
   PortfolioDetails,
   PortfolioInvestments,
@@ -19,7 +20,7 @@ import {
   PortfolioReport,
   PortfolioSummary
 } from '@ghostfolio/common/interfaces';
-import type { RequestWithUser } from '@ghostfolio/common/types';
+import type { DateRange, RequestWithUser } from '@ghostfolio/common/types';
 import {
   Controller,
   Get,
@@ -105,17 +106,36 @@ export class PortfolioController {
   @UseInterceptors(TransformDataSourceInResponseInterceptor)
   public async getDetails(
     @Headers('impersonation-id') impersonationId: string,
-    @Query('range') range,
-    @Query('tags') tags?: string
+    @Query('accounts') filterByAccounts?: string,
+    @Query('range') range?: DateRange,
+    @Query('tags') filterByTags?: string
   ): Promise<PortfolioDetails & { hasError: boolean }> {
     let hasError = false;
 
+    const accountIds = filterByAccounts?.split(',') ?? [];
+    const tagIds = filterByTags?.split(',') ?? [];
+
+    const filters: Filter[] = [
+      ...accountIds.map((accountId) => {
+        return <Filter>{
+          id: accountId,
+          type: 'account'
+        };
+      }),
+      ...tagIds.map((tagId) => {
+        return <Filter>{
+          id: tagId,
+          type: 'tag'
+        };
+      })
+    ];
+
     const { accounts, holdings, hasErrors } =
       await this.portfolioService.getDetails(
         impersonationId,
         this.request.user.id,
         range,
-        tags?.split(',')
+        filters
       );
 
     if (hasErrors || hasNotDefinedValuesInObject(holdings)) {
@@ -163,7 +183,7 @@ export class PortfolioController {
 
     return {
       hasError,
-      accounts: tags ? {} : accounts,
+      accounts: filters ? {} : accounts,
       holdings: isBasicUser ? {} : holdings
     };
   }

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

@@ -29,6 +29,7 @@ import {
 import { DATE_FORMAT, parseDate } from '@ghostfolio/common/helper';
 import {
   Accounts,
+  Filter,
   PortfolioDetails,
   PortfolioPerformanceResponse,
   PortfolioReport,
@@ -309,7 +310,7 @@ export class PortfolioService {
     aImpersonationId: string,
     aUserId: string,
     aDateRange: DateRange = 'max',
-    tags?: string[]
+    aFilters?: Filter[]
   ): Promise<PortfolioDetails & { hasErrors: boolean }> {
     const userId = await this.getUserId(aImpersonationId, aUserId);
     const user = await this.userService.user({ id: userId });
@@ -324,8 +325,8 @@ export class PortfolioService {
 
     const { orders, portfolioOrders, transactionPoints } =
       await this.getTransactionPoints({
-        tags,
-        userId
+        userId,
+        filters: aFilters
       });
 
     const portfolioCalculator = new PortfolioCalculator({
@@ -448,7 +449,7 @@ export class PortfolioService {
       value: totalValue
     });
 
-    if (tags === undefined) {
+    if (aFilters === undefined) {
       for (const symbol of Object.keys(cashPositions)) {
         holdings[symbol] = cashPositions[symbol];
       }
@@ -1195,12 +1196,12 @@ export class PortfolioService {
   }
 
   private async getTransactionPoints({
+    filters,
     includeDrafts = false,
-    tags,
     userId
   }: {
+    filters?: Filter[];
     includeDrafts?: boolean;
-    tags?: string[];
     userId: string;
   }): Promise<{
     transactionPoints: TransactionPoint[];
@@ -1210,8 +1211,8 @@ export class PortfolioService {
     const userCurrency = this.request.user?.Settings?.currency ?? baseCurrency;
 
     const orders = await this.orderService.getOrders({
+      filters,
       includeDrafts,
-      tags,
       userCurrency,
       userId,
       types: ['BUY', 'SELL']

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

@@ -20,10 +20,7 @@ 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,
-  QuoteSummaryResult
-} from 'yahoo-finance2/dist/esm/src/modules/quoteSummary-iface';
+import type { Price } from 'yahoo-finance2/dist/esm/src/modules/quoteSummary-iface';
 
 @Injectable()
 export class YahooFinanceService implements DataProviderInterface {
@@ -92,7 +89,12 @@ export class YahooFinanceService implements DataProviderInterface {
       response.assetSubClass = assetSubClass;
       response.currency = assetProfile.price.currency;
       response.dataSource = this.getName();
-      response.name = this.formatName(assetProfile);
+      response.name = this.formatName({
+        longName: assetProfile.price.longName,
+        quoteType: assetProfile.price.quoteType,
+        shortName: assetProfile.price.shortName,
+        symbol: assetProfile.price.symbol
+      });
       response.symbol = aSymbol;
 
       if (
@@ -247,7 +249,7 @@ export class YahooFinanceService implements DataProviderInterface {
 
       const quotes = searchResult.quotes
         .filter((quote) => {
-          // filter out undefined symbols
+          // Filter out undefined symbols
           return quote.symbol;
         })
         .filter(({ quoteType, symbol }) => {
@@ -256,7 +258,7 @@ export class YahooFinanceService implements DataProviderInterface {
               this.cryptocurrencyService.isCryptocurrency(
                 symbol.replace(new RegExp(`-${baseCurrency}$`), baseCurrency)
               )) ||
-            ['EQUITY', 'ETF', 'MUTUALFUND'].includes(quoteType)
+            ['EQUITY', 'ETF', 'FUTURE', 'MUTUALFUND'].includes(quoteType)
           );
         })
         .filter(({ quoteType, symbol }) => {
@@ -264,6 +266,9 @@ export class YahooFinanceService implements DataProviderInterface {
             // Only allow cryptocurrencies in base currency to avoid having redundancy in the database.
             // Transactions need to be converted manually to the base currency before
             return symbol.includes(baseCurrency);
+          } else if (quoteType === 'FUTURE') {
+            // Allow GC=F, but not MGC=F
+            return symbol.length === 4;
           }
 
           return true;
@@ -288,7 +293,12 @@ export class YahooFinanceService implements DataProviderInterface {
           symbol,
           currency: marketDataItem.currency,
           dataSource: this.getName(),
-          name: quote?.longname || quote?.shortname || symbol
+          name: this.formatName({
+            longName: quote.longname,
+            quoteType: quote.quoteType,
+            shortName: quote.shortname,
+            symbol: quote.symbol
+          })
         });
       }
     } catch (error) {
@@ -298,8 +308,18 @@ export class YahooFinanceService implements DataProviderInterface {
     return { items };
   }
 
-  private formatName(aAssetProfile: QuoteSummaryResult) {
-    let name = aAssetProfile.price.longName;
+  private formatName({
+    longName,
+    quoteType,
+    shortName,
+    symbol
+  }: {
+    longName: Price['longName'];
+    quoteType: Price['quoteType'];
+    shortName: Price['shortName'];
+    symbol: Price['symbol'];
+  }) {
+    let name = longName;
 
     if (name) {
       name = name.replace('iShares ETF (CH) - ', '');
@@ -314,7 +334,12 @@ export class YahooFinanceService implements DataProviderInterface {
       name = name.replace('Xtrackers (IE) Plc - ', '');
     }
 
-    return name || aAssetProfile.price.shortName || aAssetProfile.price.symbol;
+    if (quoteType === 'FUTURE') {
+      // "Gold Jun 22" -> "Gold"
+      name = shortName?.slice(0, -6);
+    }
+
+    return name || shortName || symbol;
   }
 
   private parseAssetClass(aPrice: Price): {
@@ -336,6 +361,20 @@ export class YahooFinanceService implements DataProviderInterface {
       case 'etf':
         assetClass = AssetClass.EQUITY;
         assetSubClass = AssetSubClass.ETF;
+        break;
+      case 'future':
+        assetClass = AssetClass.COMMODITY;
+        assetSubClass = AssetSubClass.COMMODITY;
+
+        if (
+          aPrice?.shortName?.toLowerCase()?.startsWith('gold') ||
+          aPrice?.shortName?.toLowerCase()?.startsWith('palladium') ||
+          aPrice?.shortName?.toLowerCase()?.startsWith('platinum') ||
+          aPrice?.shortName?.toLowerCase()?.startsWith('silver')
+        ) {
+          assetSubClass = AssetSubClass.PRECIOUS_METAL;
+        }
+
         break;
       case 'mutualfund':
         assetClass = AssetClass.EQUITY;

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

@@ -168,7 +168,7 @@
         </ng-container>
         <ng-template #charts>
           <div class="col-md-6 mb-3">
-            <div class="h4" i18n>Sectors</div>
+            <div class="h5" i18n>Sectors</div>
             <gf-portfolio-proportion-chart
               [baseCurrency]="user?.settings?.baseCurrency"
               [isInPercent]="true"
@@ -179,7 +179,7 @@
             ></gf-portfolio-proportion-chart>
           </div>
           <div class="col-md-6 mb-3">
-            <div class="h4" i18n>Countries</div>
+            <div class="h5" i18n>Countries</div>
             <gf-portfolio-proportion-chart
               [baseCurrency]="user?.settings?.baseCurrency"
               [isInPercent]="true"
@@ -192,32 +192,35 @@
         </ng-template>
       </ng-container>
     </div>
-  </div>
 
-  <div class="mb-3">
-    <div class="h4 mb-0" i18n>Activities</div>
-    <gf-activities-table
-      *ngIf="orders?.length > 0"
-      [activities]="orders"
-      [baseCurrency]="data.baseCurrency"
-      [deviceType]="data.deviceType"
-      [hasPermissionToCreateActivity]="false"
-      [hasPermissionToExportActivities]="!hasImpersonationId"
-      [hasPermissionToFilter]="false"
-      [hasPermissionToImportActivities]="false"
-      [hasPermissionToOpenDetails]="false"
-      [locale]="data.locale"
-      [showActions]="false"
-      [showSymbolColumn]="false"
-      (export)="onExport()"
-    ></gf-activities-table>
-  </div>
+    <div *ngIf="orders?.length > 0" class="row">
+      <div class="col mb-3">
+        <div class="h5 mb-0" i18n>Activities</div>
+        <gf-activities-table
+          [activities]="orders"
+          [baseCurrency]="data.baseCurrency"
+          [deviceType]="data.deviceType"
+          [hasPermissionToCreateActivity]="false"
+          [hasPermissionToExportActivities]="!hasImpersonationId"
+          [hasPermissionToFilter]="false"
+          [hasPermissionToImportActivities]="false"
+          [hasPermissionToOpenDetails]="false"
+          [locale]="data.locale"
+          [showActions]="false"
+          [showSymbolColumn]="false"
+          (export)="onExport()"
+        ></gf-activities-table>
+      </div>
+    </div>
 
-  <div *ngIf="tags?.length > 0">
-    <div class="h4" i18n>Tags</div>
-    <mat-chip-list>
-      <mat-chip *ngFor="let tag of tags">{{ tag.name }}</mat-chip>
-    </mat-chip-list>
+    <div *ngIf="tags?.length > 0" class="row">
+      <div class="col">
+        <div class="h5" i18n>Tags</div>
+        <mat-chip-list>
+          <mat-chip *ngFor="let tag of tags">{{ tag.name }}</mat-chip>
+        </mat-chip-list>
+      </div>
+    </div>
   </div>
 </div>
 

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

@@ -8,6 +8,7 @@ import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { UNKNOWN_KEY } from '@ghostfolio/common/config';
 import { prettifySymbol } from '@ghostfolio/common/helper';
 import {
+  Filter,
   PortfolioDetails,
   PortfolioPosition,
   UniqueAsset,
@@ -17,7 +18,7 @@ import { Market, ToggleOption } from '@ghostfolio/common/types';
 import { Account, AssetClass, DataSource } from '@prisma/client';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject, Subscription } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { distinctUntilChanged, switchMap, takeUntil } from 'rxjs/operators';
 
 @Component({
   host: { class: 'page' },
@@ -32,6 +33,7 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
       value: number;
     };
   };
+  public allFilters: Filter[];
   public continents: {
     [code: string]: { name: string; value: number };
   };
@@ -39,7 +41,9 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
     [code: string]: { name: string; value: number };
   };
   public deviceType: string;
+  public filters$ = new Subject<Filter[]>();
   public hasImpersonationId: boolean;
+  public isLoading = false;
   public markets: {
     [key in Market]: { name: string; value: number };
   };
@@ -74,7 +78,6 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
       value: number;
     };
   };
-  public tags: string[] = [];
 
   public user: User;
 
@@ -122,16 +125,52 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
         this.hasImpersonationId = !!aId;
       });
 
+    this.filters$
+      .pipe(
+        distinctUntilChanged(),
+        switchMap((filters) => {
+          this.isLoading = true;
+
+          return this.dataService.fetchPortfolioDetails({ filters });
+        }),
+        takeUntil(this.unsubscribeSubject)
+      )
+      .subscribe((portfolioDetails) => {
+        this.portfolioDetails = portfolioDetails;
+
+        this.initializeAnalysisData(this.period);
+
+        this.isLoading = false;
+
+        this.changeDetectorRef.markForCheck();
+      });
+
     this.userService.stateChanged
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((state) => {
         if (state?.user) {
           this.user = state.user;
 
-          this.tags = this.user.tags.map((tag) => {
-            return tag.name;
+          const accountFilters: Filter[] = this.user.accounts.map(
+            ({ id, name }) => {
+              return {
+                id: id,
+                label: name,
+                type: 'account'
+              };
+            }
+          );
+
+          const tagFilters: Filter[] = this.user.tags.map(({ id, name }) => {
+            return {
+              id,
+              label: name,
+              type: 'tag'
+            };
           });
 
+          this.allFilters = [...accountFilters, ...tagFilters];
+
           this.changeDetectorRef.markForCheck();
         }
       });
@@ -341,25 +380,6 @@ 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

@@ -3,10 +3,10 @@
     <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 }"
+        [allFilters]="allFilters"
+        [isLoading]="isLoading"
         [placeholder]="placeholder"
-        (valueChanged)="onUpdateFilters($event)"
+        (valueChanged)="filters$.next($event)"
       ></gf-activities-filter>
     </div>
   </div>

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

@@ -13,7 +13,7 @@ import { CreateOrderDto } from '@ghostfolio/api/app/order/create-order.dto';
 import { UpdateOrderDto } from '@ghostfolio/api/app/order/update-order.dto';
 import { LookupItem } from '@ghostfolio/api/app/symbol/interfaces/lookup-item.interface';
 import { DataService } from '@ghostfolio/client/services/data.service';
-import { Type } from '@prisma/client';
+import { AssetClass, AssetSubClass, Type } from '@prisma/client';
 import { isUUID } from 'class-validator';
 import { isString } from 'lodash';
 import { EMPTY, Observable, Subject } from 'rxjs';
@@ -39,7 +39,8 @@ export class CreateOrUpdateTransactionDialog implements OnDestroy {
   @ViewChild('autocomplete') autocomplete;
 
   public activityForm: FormGroup;
-
+  public assetClasses = Object.keys(AssetClass);
+  public assetSubClasses = Object.keys(AssetSubClass);
   public currencies: string[] = [];
   public currentMarketPrice = null;
   public filteredLookupItems: LookupItem[];
@@ -67,6 +68,8 @@ export class CreateOrUpdateTransactionDialog implements OnDestroy {
 
     this.activityForm = this.formBuilder.group({
       accountId: [this.data.activity?.accountId, Validators.required],
+      assetClass: [this.data.activity?.SymbolProfile?.assetClass],
+      assetSubClass: [this.data.activity?.SymbolProfile?.assetSubClass],
       currency: [
         this.data.activity?.SymbolProfile?.currency,
         Validators.required
@@ -234,6 +237,8 @@ export class CreateOrUpdateTransactionDialog implements OnDestroy {
   public onSubmit() {
     const activity: CreateOrderDto | UpdateOrderDto = {
       accountId: this.activityForm.controls['accountId'].value,
+      assetClass: this.activityForm.controls['assetClass'].value,
+      assetSubClass: this.activityForm.controls['assetSubClass'].value,
       currency: this.activityForm.controls['currency'].value,
       date: this.activityForm.controls['date'].value,
       dataSource: this.activityForm.controls['dataSource'].value,

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

@@ -134,6 +134,36 @@
         >
       </mat-form-field>
     </div>
+    <div
+      [ngClass]="{ 'd-none': activityForm.controls['type']?.value !== 'ITEM' }"
+    >
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>Asset Class</mat-label>
+        <mat-select formControlName="assetClass">
+          <mat-option [value]="null"></mat-option>
+          <mat-option
+            *ngFor="let assetClass of assetClasses"
+            [value]="assetClass"
+            >{{ assetClass }}</mat-option
+          >
+        </mat-select>
+      </mat-form-field>
+    </div>
+    <div
+      [ngClass]="{ 'd-none': activityForm.controls['type']?.value !== 'ITEM' }"
+    >
+      <mat-form-field appearance="outline" class="w-100">
+        <mat-label i18n>Asset Sub-Class</mat-label>
+        <mat-select formControlName="assetSubClass">
+          <mat-option [value]="null"></mat-option>
+          <mat-option
+            *ngFor="let assetSubClass of assetSubClasses"
+            [value]="assetSubClass"
+            >{{ assetSubClass }}</mat-option
+          >
+        </mat-select>
+      </mat-form-field>
+    </div>
     <div
       [ngClass]="{ 'd-none': activityForm.controls['tags']?.value?.length <= 0 }"
     >

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

@@ -19,6 +19,7 @@ import {
   AdminData,
   AdminMarketData,
   Export,
+  Filter,
   InfoItem,
   PortfolioChart,
   PortfolioDetails,
@@ -33,7 +34,7 @@ import { permissions } from '@ghostfolio/common/permissions';
 import { DateRange } from '@ghostfolio/common/types';
 import { DataSource, Order as OrderModel } from '@prisma/client';
 import { parseISO } from 'date-fns';
-import { cloneDeep } from 'lodash';
+import { cloneDeep, groupBy } from 'lodash';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 
@@ -182,11 +183,38 @@ export class DataService {
     );
   }
 
-  public fetchPortfolioDetails({ tags }: { tags?: string[] }) {
+  public fetchPortfolioDetails({ filters }: { filters?: Filter[] }) {
     let params = new HttpParams();
 
-    if (tags?.length > 0) {
-      params = params.append('tags', tags.join(','));
+    if (filters?.length > 0) {
+      const { account: filtersByAccount, tag: filtersByTag } = groupBy(
+        filters,
+        (filter) => {
+          return filter.type;
+        }
+      );
+
+      if (filtersByAccount) {
+        params = params.append(
+          'accounts',
+          filtersByAccount
+            .map(({ id }) => {
+              return id;
+            })
+            .join(',')
+        );
+      }
+
+      if (filtersByTag) {
+        params = params.append(
+          'tags',
+          filtersByTag
+            .map(({ id }) => {
+              return id;
+            })
+            .join(',')
+        );
+      }
     }
 
     return this.http.get<PortfolioDetails>('/api/v1/portfolio/details', {

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

@@ -3,7 +3,7 @@ import { Injectable } from '@angular/core';
 import { CreateOrderDto } from '@ghostfolio/api/app/order/create-order.dto';
 import { Account, DataSource, Type } from '@prisma/client';
 import { parse } from 'date-fns';
-import { isNumber } from 'lodash';
+import { isFinite } from 'lodash';
 import { parse as csvToJson } from 'papaparse';
 import { EMPTY } from 'rxjs';
 import { catchError } from 'rxjs/operators';
@@ -185,7 +185,7 @@ export class ImportTransactionsService {
     item = this.lowercaseKeys(item);
 
     for (const key of ImportTransactionsService.FEE_KEYS) {
-      if ((item[key] || item[key] === 0) && isNumber(item[key])) {
+      if (isFinite(item[key])) {
         return item[key];
       }
     }
@@ -208,7 +208,7 @@ export class ImportTransactionsService {
     item = this.lowercaseKeys(item);
 
     for (const key of ImportTransactionsService.QUANTITY_KEYS) {
-      if (item[key] && isNumber(item[key])) {
+      if (isFinite(item[key])) {
         return item[key];
       }
     }
@@ -288,7 +288,7 @@ export class ImportTransactionsService {
     item = this.lowercaseKeys(item);
 
     for (const key of ImportTransactionsService.UNIT_PRICE_KEYS) {
-      if (item[key] && isNumber(item[key])) {
+      if (isFinite(item[key])) {
         return item[key];
       }
     }

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

@@ -0,0 +1,5 @@
+export interface Filter {
+  id: string;
+  label?: string;
+  type: 'account' | 'tag';
+}

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

@@ -8,6 +8,7 @@ import {
 } from './admin-market-data.interface';
 import { Coupon } from './coupon.interface';
 import { Export } from './export.interface';
+import { Filter } from './filter.interface';
 import { InfoItem } from './info-item.interface';
 import { PortfolioChart } from './portfolio-chart.interface';
 import { PortfolioDetails } from './portfolio-details.interface';
@@ -38,6 +39,7 @@ export {
   AdminMarketDataItem,
   Coupon,
   Export,
+  Filter,
   InfoItem,
   PortfolioChart,
   PortfolioDetails,

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

@@ -2,13 +2,13 @@
   <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"
+      *ngFor="let filter of selectedFilters"
       class="mx-1 my-0 px-2 py-0"
       matChipRemove
       [removable]="true"
-      (removed)="removeKeyword(searchKeyword)"
+      (removed)="onRemoveFilter(filter)"
     >
-      {{ searchKeyword | gfSymbol }}
+      {{ filter.label | gfSymbol }}
       <ion-icon class="ml-2" matPrefix name="close-outline"></ion-icon>
     </mat-chip>
     <input
@@ -19,15 +19,20 @@
       [matChipInputFor]="chipList"
       [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
       [placeholder]="placeholder"
-      (matChipInputTokenEnd)="addKeyword($event)"
+      (matChipInputTokenEnd)="onAddFilter($event)"
     />
   </mat-chip-list>
   <mat-autocomplete
     #autocomplete="matAutocomplete"
-    (optionSelected)="keywordSelected($event)"
+    (optionSelected)="onSelectFilter($event)"
   >
     <mat-option *ngFor="let filter of filters | async" [value]="filter">
-      {{ filter | gfSymbol }}
+      {{ filter.label | gfSymbol }}
     </mat-option>
   </mat-autocomplete>
+  <mat-spinner
+    matSuffix
+    [diameter]="20"
+    [ngClass]="{ 'd-none': !isLoading }"
+  ></mat-spinner>
 </mat-form-field>

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

@@ -7,6 +7,12 @@
     .mat-form-field-infix {
       border-top: 0 solid transparent !important;
     }
+
+    .mat-spinner {
+      circle {
+        stroke: rgba(var(--dark-dividers));
+      }
+    }
   }
 
   .mat-chip {
@@ -19,4 +25,12 @@
   .mat-form-field {
     color: rgba(var(--light-primary-text));
   }
+
+  ::ng-deep {
+    .mat-spinner {
+      circle {
+        stroke: rgba(var(--light-dividers));
+      }
+    }
+  }
 }

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

@@ -8,6 +8,7 @@ import {
   OnChanges,
   OnDestroy,
   Output,
+  SimpleChanges,
   ViewChild
 } from '@angular/core';
 import { FormControl } from '@angular/forms';
@@ -16,6 +17,7 @@ import {
   MatAutocompleteSelectedEvent
 } from '@angular/material/autocomplete';
 import { MatChipInputEvent } from '@angular/material/chips';
+import { Filter } from '@ghostfolio/common/interfaces';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -26,18 +28,19 @@ import { takeUntil } from 'rxjs/operators';
   templateUrl: './activities-filter.component.html'
 })
 export class ActivitiesFilterComponent implements OnChanges, OnDestroy {
-  @Input() allFilters: string[];
+  @Input() allFilters: Filter[];
+  @Input() isLoading: boolean;
   @Input() placeholder: string;
 
-  @Output() valueChanged = new EventEmitter<string[]>();
+  @Output() valueChanged = new EventEmitter<Filter[]>();
 
   @ViewChild('autocomplete') matAutocomplete: MatAutocomplete;
   @ViewChild('searchInput') searchInput: ElementRef<HTMLInputElement>;
 
-  public filters$: Subject<string[]> = new BehaviorSubject([]);
-  public filters: Observable<string[]> = this.filters$.asObservable();
+  public filters$: Subject<Filter[]> = new BehaviorSubject([]);
+  public filters: Observable<Filter[]> = this.filters$.asObservable();
   public searchControl = new FormControl();
-  public searchKeywords: string[] = [];
+  public selectedFilters: Filter[] = [];
   public separatorKeysCodes: number[] = [ENTER, COMMA];
 
   private unsubscribeSubject = new Subject<void>();
@@ -45,29 +48,35 @@ export class ActivitiesFilterComponent implements OnChanges, OnDestroy {
   public constructor() {
     this.searchControl.valueChanges
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((keyword) => {
-        if (keyword) {
-          const filterValue = keyword.toLowerCase();
+      .subscribe((currentFilter: string) => {
+        if (currentFilter) {
           this.filters$.next(
-            this.allFilters.filter(
-              (filter) => filter.toLowerCase().indexOf(filterValue) === 0
-            )
+            this.allFilters
+              .filter((filter) => {
+                // Filter selected filters
+                return !this.selectedFilters.some((selectedFilter) => {
+                  return selectedFilter.id === filter.id;
+                });
+              })
+              .filter((filter) => {
+                return filter.label
+                  .toLowerCase()
+                  .startsWith(currentFilter?.toLowerCase());
+              })
+              .sort((a, b) => a.label.localeCompare(b.label))
           );
-        } else {
-          this.filters$.next(this.allFilters);
         }
       });
   }
 
-  public ngOnChanges() {
-    if (this.allFilters) {
+  public ngOnChanges(changes: SimpleChanges) {
+    if (changes.allFilters?.currentValue) {
       this.updateFilter();
     }
   }
 
-  public addKeyword({ input, value }: MatChipInputEvent): void {
+  public onAddFilter({ input, value }: MatChipInputEvent): void {
     if (value?.trim()) {
-      this.searchKeywords.push(value.trim());
       this.updateFilter();
     }
 
@@ -79,30 +88,39 @@ export class ActivitiesFilterComponent implements OnChanges, OnDestroy {
     this.searchControl.setValue(null);
   }
 
-  public keywordSelected(event: MatAutocompleteSelectedEvent): void {
-    this.searchKeywords.push(event.option.viewValue);
+  public onRemoveFilter(aFilter: Filter): void {
+    this.selectedFilters = this.selectedFilters.filter((filter) => {
+      return filter.id !== aFilter.id;
+    });
+
+    this.updateFilter();
+  }
+
+  public onSelectFilter(event: MatAutocompleteSelectedEvent): void {
+    this.selectedFilters.push(event.option.value);
     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.filters$.next(
+      this.allFilters
+        .filter((filter) => {
+          // Filter selected filters
+          return !this.selectedFilters.some((selectedFilter) => {
+            return selectedFilter.id === filter.id;
+          });
+        })
+        .sort((a, b) => a.label.localeCompare(b.label))
+    );
 
-    this.valueChanged.emit(this.searchKeywords);
+    // Emit an array with a new reference
+    this.valueChanged.emit([...this.selectedFilters]);
   }
 }

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

@@ -4,6 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatChipsModule } from '@angular/material/chips';
 import { MatInputModule } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
 
 import { ActivitiesFilterComponent } from './activities-filter.component';
@@ -17,6 +18,7 @@ import { ActivitiesFilterComponent } from './activities-filter.component';
     MatAutocompleteModule,
     MatChipsModule,
     MatInputModule,
+    MatProgressSpinnerModule,
     ReactiveFormsModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

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

@@ -1,8 +1,9 @@
 <gf-activities-filter
   [allFilters]="allFilters"
+  [isLoading]="isLoading"
   [ngClass]="{ 'd-none': !hasPermissionToFilter }"
   [placeholder]="placeholder"
-  (valueChanged)="updateFilter($event)"
+  (valueChanged)="filters$.next($event)"
 ></gf-activities-filter>
 
 <div class="activities">

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

@@ -14,13 +14,13 @@ import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
 import { Activity } from '@ghostfolio/api/app/order/interfaces/activities.interface';
 import { getDateFormatString } from '@ghostfolio/common/helper';
-import { UniqueAsset } from '@ghostfolio/common/interfaces';
+import { Filter, UniqueAsset } from '@ghostfolio/common/interfaces';
 import { OrderWithAccount } from '@ghostfolio/common/types';
 import Big from 'big.js';
 import { isUUID } from 'class-validator';
 import { endOfToday, format, isAfter } from 'date-fns';
 import { isNumber } from 'lodash';
-import { Subject, Subscription } from 'rxjs';
+import { distinctUntilChanged, Subject, Subscription, takeUntil } from 'rxjs';
 
 const SEARCH_PLACEHOLDER = 'Search for account, currency, symbol or type...';
 const SEARCH_STRING_SEPARATOR = ',';
@@ -53,11 +53,12 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
 
   @ViewChild(MatSort) sort: MatSort;
 
-  public allFilters: string[];
+  public allFilters: Filter[];
   public dataSource: MatTableDataSource<Activity> = new MatTableDataSource();
   public defaultDateFormat: string;
   public displayedColumns = [];
   public endOfToday = endOfToday();
+  public filters$ = new Subject<Filter[]>();
   public hasDrafts = false;
   public isAfter = isAfter;
   public isLoading = true;
@@ -71,7 +72,13 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
 
   private unsubscribeSubject = new Subject<void>();
 
-  public constructor(private router: Router) {}
+  public constructor(private router: Router) {
+    this.filters$
+      .pipe(distinctUntilChanged(), takeUntil(this.unsubscribeSubject))
+      .subscribe((filters) => {
+        this.updateFilters(filters);
+      });
+  }
 
   public ngOnChanges() {
     this.displayedColumns = [
@@ -95,11 +102,15 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
       });
     }
 
-    this.isLoading = true;
-
     this.defaultDateFormat = getDateFormatString(this.locale);
 
     if (this.activities) {
+      this.allFilters = this.getSearchableFieldValues(this.activities).map(
+        (label) => {
+          return { label, id: label, type: 'tag' };
+        }
+      );
+
       this.dataSource = new MatTableDataSource(this.activities);
       this.dataSource.filterPredicate = (data, filter) => {
         const dataString = this.getFilterableValues(data)
@@ -113,8 +124,8 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
         return contains;
       };
       this.dataSource.sort = this.sort;
-      this.updateFilter();
-      this.isLoading = false;
+
+      this.updateFilters();
     }
   }
 
@@ -172,30 +183,6 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
     this.activityToUpdate.emit(aActivity);
   }
 
-  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.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();
@@ -280,4 +267,32 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
 
     return totalValue.toNumber();
   }
+
+  private updateFilters(filters: Filter[] = []) {
+    this.isLoading = true;
+
+    this.dataSource.filter = filters
+      .map((filter) => {
+        return filter.label;
+      })
+      .join(SEARCH_STRING_SEPARATOR);
+    const lowercaseSearchKeywords = filters.map((filter) => {
+      return filter.label.trim().toLowerCase();
+    });
+
+    this.placeholder =
+      lowercaseSearchKeywords.length <= 0 ? SEARCH_PLACEHOLDER : '';
+
+    this.searchKeywords = filters.map((filter) => {
+      return filter.label;
+    });
+
+    this.hasDrafts = this.dataSource.filteredData.some((activity) => {
+      return activity.isDraft === true;
+    });
+    this.totalFees = this.getTotalFees();
+    this.totalValue = this.getTotalValue();
+
+    this.isLoading = false;
+  }
 }

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

@@ -15,7 +15,7 @@ import { getTextColor } from '@ghostfolio/common/helper';
 import { PortfolioPosition, UniqueAsset } from '@ghostfolio/common/interfaces';
 import { DataSource } from '@prisma/client';
 import Big from 'big.js';
-import { Tooltip } from 'chart.js';
+import { ChartConfiguration, Tooltip } from 'chart.js';
 import { LinearScale } from 'chart.js';
 import { ArcElement } from 'chart.js';
 import { DoughnutController } from 'chart.js';
@@ -192,13 +192,8 @@ export class PortfolioProportionChartComponent
         // Reuse color
         item.color = this.colorMap[symbol];
       } else {
-        const color =
+        item.color =
           this.getColorPalette()[index % this.getColorPalette().length];
-
-        // Store color for reuse
-        this.colorMap[symbol] = color;
-
-        item.color = color;
       }
     });
 
@@ -220,7 +215,7 @@ export class PortfolioProportionChartComponent
       });
     });
 
-    const datasets = [
+    const datasets: ChartConfiguration['data']['datasets'] = [
       {
         backgroundColor: chartDataSorted.map(([, item]) => {
           return item.color;
@@ -252,7 +247,7 @@ export class PortfolioProportionChartComponent
       datasets[0].data[0] = Number.MAX_SAFE_INTEGER;
     }
 
-    const data = {
+    const data: ChartConfiguration['data'] = {
       datasets,
       labels
     };
@@ -260,11 +255,14 @@ export class PortfolioProportionChartComponent
     if (this.chartCanvas) {
       if (this.chart) {
         this.chart.data = data;
+        this.chart.options.plugins.tooltip =
+          this.getTooltipPluginConfiguration(data);
         this.chart.update();
       } else {
         this.chart = new Chart(this.chartCanvas.nativeElement, {
           data,
           options: <unknown>{
+            animation: false,
             cutout: '70%',
             layout: {
               padding: this.showLabels === true ? 100 : 0
@@ -306,46 +304,7 @@ export class PortfolioProportionChartComponent
                 }
               },
               legend: { display: false },
-              tooltip: {
-                callbacks: {
-                  label: (context) => {
-                    const labelIndex =
-                      (data.datasets[context.datasetIndex - 1]?.data?.length ??
-                        0) + context.dataIndex;
-                    let symbol = context.chart.data.labels?.[labelIndex] ?? '';
-
-                    if (symbol === this.OTHER_KEY) {
-                      symbol = 'Other';
-                    } else if (symbol === UNKNOWN_KEY) {
-                      symbol = 'Unknown';
-                    }
-
-                    const name = this.positions[<string>symbol]?.name;
-
-                    let sum = 0;
-                    context.dataset.data.map((item) => {
-                      sum += item;
-                    });
-
-                    const percentage = (context.parsed * 100) / sum;
-
-                    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;
-                      return [
-                        `${name ?? symbol}`,
-                        `${value.toLocaleString(this.locale, {
-                          maximumFractionDigits: 2,
-                          minimumFractionDigits: 2
-                        })} ${this.baseCurrency} (${percentage.toFixed(2)}%)`
-                      ];
-                    }
-                  }
-                }
-              }
+              tooltip: this.getTooltipPluginConfiguration(data)
             }
           },
           plugins: [ChartDataLabels],
@@ -377,4 +336,47 @@ export class PortfolioProportionChartComponent
       '#cc5de8' // grape 5
     ];
   }
+
+  private getTooltipPluginConfiguration(data: ChartConfiguration['data']) {
+    return {
+      callbacks: {
+        label: (context) => {
+          const labelIndex =
+            (data.datasets[context.datasetIndex - 1]?.data?.length ?? 0) +
+            context.dataIndex;
+          let symbol = context.chart.data.labels?.[labelIndex] ?? '';
+
+          if (symbol === this.OTHER_KEY) {
+            symbol = 'Other';
+          } else if (symbol === UNKNOWN_KEY) {
+            symbol = 'Unknown';
+          }
+
+          const name = this.positions[<string>symbol]?.name;
+
+          let sum = 0;
+          for (const item of context.dataset.data) {
+            sum += item;
+          }
+
+          const percentage = (context.parsed * 100) / sum;
+
+          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;
+            return [
+              `${name ?? symbol}`,
+              `${value.toLocaleString(this.locale, {
+                maximumFractionDigits: 2,
+                minimumFractionDigits: 2
+              })} ${this.baseCurrency} (${percentage.toFixed(2)}%)`
+            ];
+          }
+        }
+      }
+    };
+  }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ghostfolio",
-  "version": "1.142.0",
+  "version": "1.145.0",
   "homepage": "https://ghostfol.io",
   "license": "AGPL-3.0",
   "scripts": {
@@ -118,7 +118,7 @@
     "tslib": "2.0.0",
     "twitter-api-v2": "1.10.3",
     "uuid": "8.3.2",
-    "yahoo-finance2": "2.3.1",
+    "yahoo-finance2": "2.3.2",
     "zone.js": "0.11.4"
   },
   "devDependencies": {

prisma/migrations/20220430083454_added_real_estate_to_asset_class/migration.sql

@@ -0,0 +1,2 @@
+-- AlterEnum
+ALTER TYPE "AssetClass" ADD VALUE 'REAL_ESTATE';

prisma/migrations/20220430083631_added_precious_metal_to_asset_sub_class/migration.sql

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

prisma/migrations/20220430193522_added_private_equity_to_asset_sub_class/migration.sql

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

prisma/schema.prisma

@@ -185,6 +185,7 @@ enum AssetClass {
   COMMODITY
   EQUITY
   FIXED_INCOME
+  REAL_ESTATE
 }
 
 enum AssetSubClass {
@@ -193,6 +194,8 @@ enum AssetSubClass {
   CRYPTOCURRENCY
   ETF
   MUTUALFUND
+  PRECIOUS_METAL
+  PRIVATE_EQUITY
   STOCK
 }
 

test/import/ok.csv

@@ -2,3 +2,4 @@ Date,Code,Currency,Price,Quantity,Action,Fee
 17/11/2021,MSFT,USD,0.62,5,dividend,0.00
 16/09/2021,MSFT,USD,298.580,5,buy,19.00
 01/01/2022,Penthouse Apartment,USD,500000.0,1,item,0.00
+06/06/2050,MSFT,USD,0.00,0,buy,0.00

test/import/ok.json

@@ -5,34 +5,43 @@
   },
   "activities": [
     {
-      "accountId": null,
-      "date": "2021-12-31T23:00:00.000Z",
+      "fee": 0,
+      "quantity": 0,
+      "type": "BUY",
+      "unitPrice": 0,
+      "currency": "USD",
+      "dataSource": "YAHOO",
+      "date": "2050-06-05T22:00:00.000Z",
+      "symbol": "MSFT"
+    },
+    {
       "fee": 0,
       "quantity": 1,
       "type": "ITEM",
       "unitPrice": 500000,
       "currency": "USD",
       "dataSource": "MANUAL",
+      "date": "2021-12-31T22:00:00.000Z",
       "symbol": "Penthouse Apartment"
     },
     {
-      "date": "2021-11-16T23:00:00.000Z",
       "fee": 0,
       "quantity": 5,
       "type": "DIVIDEND",
       "unitPrice": 0.62,
       "currency": "USD",
       "dataSource": "YAHOO",
+      "date": "2021-11-16T22:00:00.000Z",
       "symbol": "MSFT"
     },
     {
-      "date": "2021-09-15T22:00:00.000Z",
       "fee": 19,
       "quantity": 5,
       "type": "BUY",
       "unitPrice": 298.58,
       "currency": "USD",
       "dataSource": "YAHOO",
+      "date": "2021-09-15T22:00:00.000Z",
       "symbol": "MSFT"
     }
   ]

yarn.lock

@@ -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.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==
+yahoo-finance2@2.3.2:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/yahoo-finance2/-/yahoo-finance2-2.3.2.tgz#3643b5e14f752b1d5546427d760d515401ac2ac7"
+  integrity sha512-xOBaamD/mXN9ruc3TBOEhEIhP/N+efWo/wQf2PyYtB6N68iSGZVDt+4vdJN7ra+iCVq7FnSHTDH3K4Cvqy63lQ==
   dependencies:
     ajv "8.10.0"
     ajv-formats "2.1.1"