Introduce allocations by organization

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

@@ -65,7 +65,7 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
       | 'exchange'
       | 'name'
       | 'value'
-    >;
+    > & { organization: string };
   };
   public sectors: {
     [name: string]: { name: string; value: number };
@@ -276,7 +276,12 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
         assetSubClass: position.assetSubClass,
         currency: position.currency,
         exchange: position.exchange,
+        name: position.name,
+        organization: this.nameToOrganization({
+          assetClass: position.assetClass,
+          assetSubClass: position.assetSubClass,
           name: position.name
+        })
       };
 
       if (position.assetClass !== AssetClass.CASH) {
@@ -452,4 +457,23 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
           });
       });
   }
+
+  private nameToOrganization({
+    assetClass,
+    assetSubClass,
+    name
+  }: {
+    assetClass: AssetClass;
+    assetSubClass: PortfolioPosition['assetSubClass'];
+    name: string;
+  }) {
+    if (assetClass.toUpperCase() === 'CASH') {
+      return UNKNOWN_KEY;
+    } else if (assetSubClass === 'ETF' || name.includes('ETF')) {
+      const [firstWord] = name.split(' ');
+      return firstWord;
+    }
+
+    return name;
+  }
 }

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

@@ -100,6 +100,29 @@
         </mat-card-content>
       </mat-card>
     </div>
+    <div class="col-md-4">
+      <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 Organization</span
+            ><gf-premium-indicator
+              *ngIf="user?.subscription?.type === 'Basic'"
+              class="ml-1"
+            ></gf-premium-indicator
+          ></mat-card-title>
+        </mat-card-header>
+        <mat-card-content>
+          <gf-portfolio-proportion-chart
+            [baseCurrency]="user?.settings?.baseCurrency"
+            [colorScheme]="user?.settings?.colorScheme"
+            [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
+            [keys]="['organization']"
+            [locale]="user?.settings?.locale"
+            [positions]="positions"
+          ></gf-portfolio-proportion-chart>
+        </mat-card-content>
+      </mat-card>
+    </div>
     <div class="col-md-12 allocations-by-symbol">
       <mat-card appearance="outlined" class="mb-3">
         <mat-card-header class="overflow-hidden w-100">