Add a new symbol allocation chart

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

@@ -42,10 +42,12 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
   public sectors: {
     [name: string]: { name: string; value: number };
   };
+  public symbols: {
+    [name: string]: { name: string; value: number };
+  };
   public user: User;
 
   private unsubscribeSubject = new Subject<void>();
-
   /**
    * @constructor
    */
@@ -108,6 +110,12 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
     };
     this.positions = {};
     this.positionsArray = [];
+    this.symbols = {
+      [UNKNOWN_KEY]: {
+        name: UNKNOWN_KEY,
+        value: 0
+      }
+    };
     this.sectors = {
       [UNKNOWN_KEY]: {
         name: UNKNOWN_KEY,
@@ -139,6 +147,12 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
       };
       this.positionsArray.push(position);
 
+      if(this.symbols[symbol] === undefined) {
+        this.symbols[symbol] = { name: symbol, value: position.value };
+      } else {
+        this.symbols[symbol].value += position.value;
+      }
+
       if (position.assetClass !== AssetClass.CASH) {
         // Prepare analysis data by continents, countries and sectors except for cash
 

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

@@ -5,6 +5,30 @@
     </div>
   </div>
   <div class="proportion-charts row">
+    <div class="col-md-6">
+      <mat-card class="mb-3">
+        <mat-card-header class="w-100">
+          <mat-card-title i18n>By Symbol</mat-card-title>
+          <gf-toggle
+            [defaultValue]="period"
+            [isLoading]="false"
+            [options]="periodOptions"
+            (change)="onChangePeriod($event.value)"
+          ></gf-toggle>
+        </mat-card-header>
+        <mat-card-content>
+          <gf-portfolio-proportion-chart
+            [baseCurrency]="user?.settings?.baseCurrency"
+            [isInPercent]="false"
+            [keys]="['name']"
+            [locale]="user?.settings?.locale"
+            [maxItems]="10"
+            [positions]="symbols"
+          ></gf-portfolio-proportion-chart>
+        </mat-card-content>
+      </mat-card>
+    </div>
+
     <div class="col-md-6">
       <mat-card class="mb-3">
         <mat-card-header class="w-100">