Feature/add support for click in portfolio proportion chart (#729)

* Add support for click

* Update changelog

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

@@ -8,6 +8,7 @@ import {
 import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { DEFAULT_DATE_FORMAT } from '@ghostfolio/common/config';
+import { UniqueAsset } from '@ghostfolio/common/interfaces';
 import { AdminMarketDataItem } from '@ghostfolio/common/interfaces/admin-market-data.interface';
 import { DataSource, MarketData } from '@prisma/client';
 import { Subject } from 'rxjs';
@@ -44,39 +45,21 @@ export class AdminMarketDataComponent implements OnDestroy, OnInit {
     this.fetchAdminMarketData();
   }
 
-  public onDeleteProfileData({
-    dataSource,
-    symbol
-  }: {
-    dataSource: DataSource;
-    symbol: string;
-  }) {
+  public onDeleteProfileData({ dataSource, symbol }: UniqueAsset) {
     this.adminService
       .deleteProfileData({ dataSource, symbol })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {});
   }
 
-  public onGatherProfileDataBySymbol({
-    dataSource,
-    symbol
-  }: {
-    dataSource: DataSource;
-    symbol: string;
-  }) {
+  public onGatherProfileDataBySymbol({ dataSource, symbol }: UniqueAsset) {
     this.adminService
       .gatherProfileDataBySymbol({ dataSource, symbol })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(() => {});
   }
 
-  public onGatherSymbol({
-    dataSource,
-    symbol
-  }: {
-    dataSource: DataSource;
-    symbol: string;
-  }) {
+  public onGatherSymbol({ dataSource, symbol }: UniqueAsset) {
     this.adminService
       .gatherSymbol({ dataSource, symbol })
       .pipe(takeUntil(this.unsubscribeSubject))
@@ -93,13 +76,7 @@ export class AdminMarketDataComponent implements OnDestroy, OnInit {
     }
   }
 
-  public setCurrentProfile({
-    dataSource,
-    symbol
-  }: {
-    dataSource: DataSource;
-    symbol: string;
-  }) {
+  public setCurrentProfile({ dataSource, symbol }: UniqueAsset) {
     this.marketDataDetails = [];
 
     if (this.currentSymbol === symbol) {
@@ -129,13 +106,7 @@ export class AdminMarketDataComponent implements OnDestroy, OnInit {
       });
   }
 
-  private fetchAdminMarketDataBySymbol({
-    dataSource,
-    symbol
-  }: {
-    dataSource: DataSource;
-    symbol: string;
-  }) {
+  private fetchAdminMarketDataBySymbol({ dataSource, symbol }: UniqueAsset) {
     this.adminService
       .fetchAdminMarketDataBySymbol({ dataSource, symbol })
       .pipe(takeUntil(this.unsubscribeSubject))

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

@@ -13,8 +13,8 @@ import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
-import { PortfolioPosition } from '@ghostfolio/common/interfaces';
-import { AssetClass, DataSource, Order as OrderModel } from '@prisma/client';
+import { PortfolioPosition, UniqueAsset } from '@ghostfolio/common/interfaces';
+import { AssetClass, Order as OrderModel } from '@prisma/client';
 import { Subject, Subscription } from 'rxjs';
 
 @Component({
@@ -75,13 +75,7 @@ export class PositionsTableComponent implements OnChanges, OnDestroy, OnInit {
     this.dataSource.filter = filterValue.trim().toLowerCase();
   }*/
 
-  public onOpenPositionDialog({
-    dataSource,
-    symbol
-  }: {
-    dataSource: DataSource;
-    symbol: string;
-  }): void {
+  public onOpenPositionDialog({ dataSource, symbol }: UniqueAsset): void {
     this.router.navigate([], {
       queryParams: { dataSource, symbol, positionDetailDialog: true }
     });

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

@@ -10,6 +10,7 @@ import { prettifySymbol } from '@ghostfolio/common/helper';
 import {
   PortfolioDetails,
   PortfolioPosition,
+  UniqueAsset,
   User
 } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
@@ -64,7 +65,12 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
     [name: string]: { name: string; value: number };
   };
   public symbols: {
-    [name: string]: { name: string; symbol: string; value: number };
+    [name: string]: {
+      dataSource?: DataSource;
+      name: string;
+      symbol: string;
+      value: number;
+    };
   };
 
   public user: User;
@@ -281,6 +287,7 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
 
       if (position.assetClass === AssetClass.EQUITY) {
         this.symbols[prettifySymbol(symbol)] = {
+          dataSource: position.dataSource,
           name: position.name,
           symbol: prettifySymbol(symbol),
           value: aPeriod === 'original' ? position.investment : position.value
@@ -295,6 +302,14 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
     this.initializeAnalysisData(this.period);
   }
 
+  public onProportionChartClicked({ dataSource, symbol }: UniqueAsset) {
+    if (dataSource && symbol) {
+      this.router.navigate([], {
+        queryParams: { dataSource, symbol, positionDetailDialog: true }
+      });
+    }
+  }
+
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();

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

@@ -89,12 +89,14 @@
         <mat-card-content>
           <gf-portfolio-proportion-chart
             class="mx-auto"
+            cursor="pointer"
             [baseCurrency]="user?.settings?.baseCurrency"
             [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
             [keys]="['symbol']"
             [locale]="user?.settings?.locale"
             [positions]="symbols"
             [showLabels]="deviceType !== 'mobile'"
+            (proportionChartClicked)="onProportionChartClicked($event)"
           ></gf-portfolio-proportion-chart>
         </mat-card-content>
       </mat-card>

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

@@ -3,7 +3,10 @@ import { Injectable } from '@angular/core';
 import { UpdateMarketDataDto } from '@ghostfolio/api/app/admin/update-market-data.dto';
 import { IDataProviderHistoricalResponse } from '@ghostfolio/api/services/interfaces/interfaces';
 import { DATE_FORMAT } from '@ghostfolio/common/helper';
-import { AdminMarketDataDetails } from '@ghostfolio/common/interfaces';
+import {
+  AdminMarketDataDetails,
+  UniqueAsset
+} from '@ghostfolio/common/interfaces';
 import { DataSource, MarketData } from '@prisma/client';
 import { format, parseISO } from 'date-fns';
 import { Observable, map } from 'rxjs';
@@ -14,13 +17,7 @@ import { Observable, map } from 'rxjs';
 export class AdminService {
   public constructor(private http: HttpClient) {}
 
-  public deleteProfileData({
-    dataSource,
-    symbol
-  }: {
-    dataSource: DataSource;
-    symbol: string;
-  }) {
+  public deleteProfileData({ dataSource, symbol }: UniqueAsset) {
     return this.http.delete<void>(
       `/api/admin/profile-data/${dataSource}/${symbol}`
     );
@@ -53,13 +50,7 @@ export class AdminService {
     return this.http.post<void>(`/api/admin/gather/profile-data`, {});
   }
 
-  public gatherProfileDataBySymbol({
-    dataSource,
-    symbol
-  }: {
-    dataSource: DataSource;
-    symbol: string;
-  }) {
+  public gatherProfileDataBySymbol({ dataSource, symbol }: UniqueAsset) {
     return this.http.post<void>(
       `/api/admin/gather/profile-data/${dataSource}/${symbol}`,
       {}
@@ -70,10 +61,8 @@ export class AdminService {
     dataSource,
     date,
     symbol
-  }: {
-    dataSource: DataSource;
+  }: UniqueAsset & {
     date?: Date;
-    symbol: string;
   }) {
     let url = `/api/admin/gather/${dataSource}/${symbol}`;