Refactoring

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

@@ -185,10 +185,10 @@ export class GfAllocationsPageComponent implements OnInit {
     this.initialize();
   }
 
-  public onAccountChartClicked({ symbol }: AssetProfileIdentifier) {
-    if (symbol && symbol !== UNKNOWN_KEY) {
+  public onAccountChartClicked({ accountId }: { accountId: string }) {
+    if (accountId && accountId !== UNKNOWN_KEY) {
       this.router.navigate([], {
-        queryParams: { accountId: symbol, accountDetailDialog: true }
+        queryParams: { accountId, accountDetailDialog: true }
       });
     }
   }

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

@@ -0,0 +1,5 @@
+import { AssetProfileIdentifier } from '@ghostfolio/common/interfaces';
+
+export type PortfolioProportionChartClickEvent =
+  | AssetProfileIdentifier
+  | { accountId: string };

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

@@ -33,10 +33,7 @@ import Color from 'color';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import OpenColor from 'open-color';
 
-export interface PortfolioProportionChartClickEvent {
-  dataSource?: DataSource;
-  symbol: string;
-}
+import { PortfolioProportionChartClickEvent } from './interfaces/interfaces';
 
 const {
   blue,
@@ -359,7 +356,9 @@ export class GfPortfolioProportionChartComponent
                 const symbol = chart.data.labels?.[dataIndex] as string;
                 const dataSource = this.data[symbol]?.dataSource;
 
-                this.proportionChartClicked.emit({ dataSource, symbol });
+                this.proportionChartClicked.emit(
+                  dataSource ? { dataSource, symbol } : { accountId: symbol }
+                );
               } catch {}
             },
             onHover: (event, chartElement) => {