Add a new symbol allocation chart (#326)

* Add a new symbol allocation chart

* Update changelog

Co-authored-by: Thomas <4159106+dtslvr@users.noreply.github.com>

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Added a link below the holdings to manage the transactions
+- Added the allocation chart by symbol
 
 ### Fixed
 

apps/client/src/app/components/portfolio-proportion-chart/portfolio-proportion-chart.component.ts

@@ -167,7 +167,8 @@ export class PortfolioProportionChartComponent
         // Reuse color
         item.color = this.colorMap[symbol];
       } else {
-        const color = this.getColorPalette()[index];
+        const color =
+          this.getColorPalette()[index % this.getColorPalette().length];
 
         // Store color for reuse
         this.colorMap[symbol] = color;

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

@@ -42,6 +42,10 @@ 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>();
@@ -114,6 +118,12 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
         value: 0
       }
     };
+    this.symbols = {
+      [UNKNOWN_KEY]: {
+        name: UNKNOWN_KEY,
+        value: 0
+      }
+    };
 
     for (const [name, { current, original }] of Object.entries(
       this.portfolioDetails.accounts
@@ -208,6 +218,15 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
               : this.portfolioDetails.holdings[symbol].value;
         }
       }
+
+      if (position.assetSubClass !== AssetClass.CASH) {
+        // Prepare analysis data by symbols except for cash
+
+        this.symbols[symbol] = {
+          name: symbol,
+          value: aPeriod === 'original' ? position.investment : position.value
+        };
+      }
     }
   }
 

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

@@ -5,6 +5,29 @@
     </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"
+            [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">