From b1187cf8808f07295f7dcbc045a49575f39e3ee3 Mon Sep 17 00:00:00 2001
From: Ivo Valchev <Ivo.V.Valchev@gmail.com>
Date: Fri, 3 Sep 2021 17:48:35 +0200
Subject: [PATCH] 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                                  |  1 +
 .../portfolio-proportion-chart.component.ts   |  3 ++-
 .../allocations/allocations-page.component.ts | 19 +++++++++++++++
 .../allocations/allocations-page.html         | 23 +++++++++++++++++++
 4 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 661754e4b..7c4528a8b 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/apps/client/src/app/components/portfolio-proportion-chart/portfolio-proportion-chart.component.ts b/apps/client/src/app/components/portfolio-proportion-chart/portfolio-proportion-chart.component.ts
index dd50d67c8..c1df83455 100644
--- a/apps/client/src/app/components/portfolio-proportion-chart/portfolio-proportion-chart.component.ts
+++ b/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;
diff --git a/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts b/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts
index f1dd34f87..812bf44ac 100644
--- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.component.ts
+++ b/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
+        };
+      }
     }
   }
 
diff --git a/apps/client/src/app/pages/portfolio/allocations/allocations-page.html b/apps/client/src/app/pages/portfolio/allocations/allocations-page.html
index f9fd44f08..6d16956be 100644
--- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.html
+++ b/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">