Clickable parent holdings (asset popup)

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

@@ -501,6 +501,7 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
                       allocationInPercentage:
                         parentHolding.valueInBaseCurrency / value,
                       name: holding.name,
+                      position: holding,
                       symbol: prettifySymbol(symbol),
                       valueInBaseCurrency: parentHolding.valueInBaseCurrency
                     }

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

@@ -347,6 +347,7 @@
             [locale]="user?.settings?.locale"
             [pageSize]="10"
             [topHoldings]="topHoldings"
+            (proportionChartClicked)="onSymbolChartClicked($event)"
           />
         </mat-card-content>
       </mat-card>

libs/ui/src/lib/top-holdings/top-holdings.component.html

@@ -76,9 +76,11 @@
                 let i = $index
               ) {
                 <div
+                  [class.cursor-pointer]="parentHolding?.symbol.length > 0"
                   [matTooltip]="parentHolding.name"
                   [style.background-color]="getColor(parentHolding?.symbol)"
                   [style.width.%]="100 * parentHolding?.allocationInPercentage"
+                  (click)="onClickOpenPositionModal(parentHolding.position)"
                 >
                   {{ parentHolding?.symbol }}
                 </div>
@@ -129,6 +131,8 @@
               <tr
                 *matRowDef="let row; columns: displayedHoldingParentColumns"
                 mat-row
+                [class.cursor-pointer]="row.position"
+                (click)="onClickOpenPositionModal(row.position)"
               ></tr>
             </table>
           </div>

libs/ui/src/lib/top-holdings/top-holdings.component.scss

@@ -31,6 +31,10 @@
         line-height: 2em;
         padding: 0 var(--table-padding);
         overflow: hidden;
+
+        &:hover {
+          filter: brightness(0.95);
+        }
       }
     }
 
@@ -50,6 +54,9 @@
 
     tr {
       height: auto;
+      &:hover {
+        filter: brightness(0.95);
+      }
     }
     th,
     td {

libs/ui/src/lib/top-holdings/top-holdings.component.ts

@@ -1,5 +1,9 @@
 import { getLocale } from '@ghostfolio/common/helper';
-import { HoldingWithParents } from '@ghostfolio/common/interfaces';
+import {
+  AssetProfileIdentifier,
+  HoldingWithParents,
+  PortfolioPosition
+} from '@ghostfolio/common/interfaces';
 import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import {
@@ -14,9 +18,11 @@ import {
   CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
   Component,
+  EventEmitter,
   Input,
   OnChanges,
   OnDestroy,
+  Output,
   ViewChild
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
@@ -24,6 +30,7 @@ import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { DataSource } from '@prisma/client';
 import { get } from 'lodash';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { Subject } from 'rxjs';
@@ -76,6 +83,15 @@ export class GfTopHoldingsComponent implements OnChanges, OnDestroy {
   @Input() locale = getLocale();
   @Input() pageSize = Number.MAX_SAFE_INTEGER;
   @Input() topHoldings: HoldingWithParents[];
+  @Input() positions: {
+    [symbol: string]: Pick<PortfolioPosition, 'type'> & {
+      dataSource?: DataSource;
+      name: string;
+      value: number;
+    };
+  } = {};
+
+  @Output() proportionChartClicked = new EventEmitter<AssetProfileIdentifier>();
 
   @ViewChild(MatPaginator) paginator: MatPaginator;
   @ViewChild(MatSort) sort: MatSort;
@@ -131,6 +147,13 @@ export class GfTopHoldingsComponent implements OnChanges, OnDestroy {
     }
   }
 
+  public onClickOpenPositionModal(holding: AssetProfileIdentifier) {
+    try {
+      console.log(holding);
+      this.proportionChartClicked.emit(holding);
+    } catch {}
+  }
+
   public ngOnChanges() {
     this.isLoading = true;