Add Tag overview to allocation page

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

@@ -91,6 +91,10 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
   public topHoldingsMap: {
     [name: string]: { name: string; value: number };
   };
+  public tagHoldings: Holding[];
+  public tagHoldingsMap: {
+    [name: string]: { name: string; value: number };
+  };
   public totalValueInEtf = 0;
   public UNKNOWN_KEY = UNKNOWN_KEY;
   public user: User;
@@ -282,6 +286,7 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
       }
     };
     this.topHoldingsMap = {};
+    this.tagHoldingsMap = {};
   }
 
   private initializeAllocationsData() {
@@ -417,6 +422,22 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
           }
         }
 
+        if (position.tags.length > 0) {
+          for (const tag of position.tags) {
+            const { name } = tag;
+
+            if (this.tagHoldingsMap[name]?.value) {
+              this.tagHoldingsMap[name].value +=
+                position.valueInBaseCurrency ?? 0;
+            } else {
+              this.tagHoldingsMap[name] = {
+                name,
+                value: position.valueInBaseCurrency ?? 0
+              };
+            }
+          }
+        }
+
         if (position.sectors.length > 0) {
           for (const sector of position.sectors) {
             const { name, weight } = sector;
@@ -480,6 +501,29 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
       };
     }
 
+    this.tagHoldings = Object.values(this.tagHoldingsMap)
+      .map(({ name, value }) => {
+        if (this.hasImpersonationId || this.user.settings.isRestrictedView) {
+          return {
+            name,
+            allocationInPercentage: value,
+            valueInBaseCurrency: null
+          };
+        }
+
+        return {
+          name,
+          allocationInPercentage:
+            this.portfolioDetails.summary.currentValueInBaseCurrency > 0
+              ? value / this.portfolioDetails.summary.currentValueInBaseCurrency
+              : 0,
+          valueInBaseCurrency: value
+        };
+      })
+      .sort((a, b) => {
+        return b.allocationInPercentage - a.allocationInPercentage;
+      });
+
     this.topHoldings = Object.values(this.topHoldingsMap)
       .map(({ name, value }) => {
         if (this.hasImpersonationId || this.user.settings.isRestrictedView) {

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

@@ -327,6 +327,24 @@
         'd-none': !user?.settings?.isExperimentalFeatures
       }"
     >
+      <mat-card appearance="outlined" 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 Tag Holding</span>
+            @if (user?.subscription?.type === 'Basic') {
+              <gf-premium-indicator class="ml-1" />
+            }
+          </mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+          <gf-top-holdings
+            [baseCurrency]="user?.settings?.baseCurrency"
+            [locale]="user?.settings?.locale"
+            [pageSize]="10"
+            [topHoldings]="tagHoldings"
+          />
+        </mat-card-content>
+      </mat-card>
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-header class="overflow-hidden w-100">
           <mat-card-title class="align-items-center d-flex text-truncate">