Feature/introduce allocations by etf provider (#1870)

* Introduce allocations by etf provider

* Update changelog

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Added
+
+- Introduced the allocations by ETF provider chart on the allocations page
+
 ## 1.256.0 - 2023-04-17
 
 ### Added

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

@@ -65,7 +65,7 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
       | 'exchange'
       | 'name'
       | 'value'
-    >;
+    > & { etfProvider: string };
   };
   public sectors: {
     [name: string]: { name: string; value: number };
@@ -249,7 +249,7 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
   public initializeAnalysisData() {
     this.initialize();
 
-    for (const [id, { current, name, original }] of Object.entries(
+    for (const [id, { current, name }] of Object.entries(
       this.portfolioDetails.accounts
     )) {
       this.accounts[id] = {
@@ -275,6 +275,10 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
         assetClass: position.assetClass,
         assetSubClass: position.assetSubClass,
         currency: position.currency,
+        etfProvider: this.extractEtfProvider({
+          assetSubClass: position.assetSubClass,
+          name: position.name
+        }),
         exchange: position.exchange,
         name: position.name
       };
@@ -452,4 +456,19 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
           });
       });
   }
+
+  private extractEtfProvider({
+    assetSubClass,
+    name
+  }: {
+    assetSubClass: PortfolioPosition['assetSubClass'];
+    name: string;
+  }) {
+    if (assetSubClass === 'ETF') {
+      const [firstWord] = name.split(' ');
+      return firstWord;
+    }
+
+    return UNKNOWN_KEY;
+  }
 }

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

@@ -249,4 +249,29 @@
       </mat-card>
     </div>
   </div>
+  <div class="row">
+    <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 ETF Provider</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]="['etfProvider']"
+            [locale]="user?.settings?.locale"
+            [positions]="positions"
+          ></gf-portfolio-proportion-chart>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
 </div>