Feature/include unavailable data in allocations by market chart (#2190)

* Include unavailable data in allocations by market chart

* Update changelog

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Changed
+
+- Extended the allocations by market chart on the allocations page by unavailable data
+
 ### Fixed
 
 - Considered liabilities in the total account value calculation

apps/api/src/app/portfolio/portfolio.service.ts

@@ -540,11 +540,13 @@ export class PortfolioService {
       const dataProviderResponse = dataProviderResponses[item.symbol];
 
       const markets: PortfolioPosition['markets'] = {
+        [UNKNOWN_KEY]: 0,
         developedMarkets: 0,
         emergingMarkets: 0,
         otherMarkets: 0
       };
       const marketsAdvanced: PortfolioPosition['marketsAdvanced'] = {
+        [UNKNOWN_KEY]: 0,
         asiaPacific: 0,
         emergingMarkets: 0,
         europe: 0,
@@ -553,48 +555,58 @@ export class PortfolioService {
         otherMarkets: 0
       };
 
-      for (const country of symbolProfile.countries) {
-        if (developedMarkets.includes(country.code)) {
-          markets.developedMarkets = new Big(markets.developedMarkets)
-            .plus(country.weight)
-            .toNumber();
-        } else if (emergingMarkets.includes(country.code)) {
-          markets.emergingMarkets = new Big(markets.emergingMarkets)
-            .plus(country.weight)
-            .toNumber();
-        } else {
-          markets.otherMarkets = new Big(markets.otherMarkets)
-            .plus(country.weight)
-            .toNumber();
-        }
+      if (symbolProfile.countries.length > 0) {
+        for (const country of symbolProfile.countries) {
+          if (developedMarkets.includes(country.code)) {
+            markets.developedMarkets = new Big(markets.developedMarkets)
+              .plus(country.weight)
+              .toNumber();
+          } else if (emergingMarkets.includes(country.code)) {
+            markets.emergingMarkets = new Big(markets.emergingMarkets)
+              .plus(country.weight)
+              .toNumber();
+          } else {
+            markets.otherMarkets = new Big(markets.otherMarkets)
+              .plus(country.weight)
+              .toNumber();
+          }
 
-        if (country.code === 'JP') {
-          marketsAdvanced.japan = new Big(marketsAdvanced.japan)
-            .plus(country.weight)
-            .toNumber();
-        } else if (country.code === 'CA' || country.code === 'US') {
-          marketsAdvanced.northAmerica = new Big(marketsAdvanced.northAmerica)
-            .plus(country.weight)
-            .toNumber();
-        } else if (asiaPacificMarkets.includes(country.code)) {
-          marketsAdvanced.asiaPacific = new Big(marketsAdvanced.asiaPacific)
-            .plus(country.weight)
-            .toNumber();
-        } else if (emergingMarkets.includes(country.code)) {
-          marketsAdvanced.emergingMarkets = new Big(
-            marketsAdvanced.emergingMarkets
-          )
-            .plus(country.weight)
-            .toNumber();
-        } else if (europeMarkets.includes(country.code)) {
-          marketsAdvanced.europe = new Big(marketsAdvanced.europe)
-            .plus(country.weight)
-            .toNumber();
-        } else {
-          marketsAdvanced.otherMarkets = new Big(marketsAdvanced.otherMarkets)
-            .plus(country.weight)
-            .toNumber();
+          if (country.code === 'JP') {
+            marketsAdvanced.japan = new Big(marketsAdvanced.japan)
+              .plus(country.weight)
+              .toNumber();
+          } else if (country.code === 'CA' || country.code === 'US') {
+            marketsAdvanced.northAmerica = new Big(marketsAdvanced.northAmerica)
+              .plus(country.weight)
+              .toNumber();
+          } else if (asiaPacificMarkets.includes(country.code)) {
+            marketsAdvanced.asiaPacific = new Big(marketsAdvanced.asiaPacific)
+              .plus(country.weight)
+              .toNumber();
+          } else if (emergingMarkets.includes(country.code)) {
+            marketsAdvanced.emergingMarkets = new Big(
+              marketsAdvanced.emergingMarkets
+            )
+              .plus(country.weight)
+              .toNumber();
+          } else if (europeMarkets.includes(country.code)) {
+            marketsAdvanced.europe = new Big(marketsAdvanced.europe)
+              .plus(country.weight)
+              .toNumber();
+          } else {
+            marketsAdvanced.otherMarkets = new Big(marketsAdvanced.otherMarkets)
+              .plus(country.weight)
+              .toNumber();
+          }
         }
+      } else {
+        markets[UNKNOWN_KEY] = new Big(markets[UNKNOWN_KEY])
+          .plus(value)
+          .toNumber();
+
+        marketsAdvanced[UNKNOWN_KEY] = new Big(marketsAdvanced[UNKNOWN_KEY])
+          .plus(value)
+          .toNumber();
       }
 
       holdings[item.symbol] = {

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

@@ -86,7 +86,7 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
       value: number;
     };
   };
-
+  public UNKNOWN_KEY = UNKNOWN_KEY;
   public user: User;
   public worldMapChartFormat: string;
 
@@ -229,20 +229,29 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
       }
     };
     this.markets = {
+      [UNKNOWN_KEY]: {
+        name: UNKNOWN_KEY,
+        value: 0
+      },
       developedMarkets: {
         name: 'developedMarkets',
-        value: undefined
+        value: 0
       },
       emergingMarkets: {
         name: 'emergingMarkets',
-        value: undefined
+        value: 0
       },
       otherMarkets: {
         name: 'otherMarkets',
-        value: undefined
+        value: 0
       }
     };
     this.marketsAdvanced = {
+      [UNKNOWN_KEY]: {
+        id: UNKNOWN_KEY,
+        name: UNKNOWN_KEY,
+        value: 0
+      },
       asiaPacific: {
         id: 'asiaPacific',
         name: translate('Asia-Pacific'),
@@ -346,16 +355,6 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
         // Prepare analysis data by continents, countries and sectors except for cash
 
         if (position.countries.length > 0) {
-          if (!this.markets.developedMarkets.value) {
-            this.markets.developedMarkets.value = 0;
-          }
-          if (!this.markets.emergingMarkets.value) {
-            this.markets.emergingMarkets.value = 0;
-          }
-          if (!this.markets.otherMarkets.value) {
-            this.markets.otherMarkets.value = 0;
-          }
-
           this.markets.developedMarkets.value +=
             position.markets.developedMarkets *
             (isNumber(position.valueInBaseCurrency)
@@ -447,6 +446,18 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
           )
             ? this.portfolioDetails.holdings[symbol].valueInBaseCurrency
             : this.portfolioDetails.holdings[symbol].valueInPercentage;
+
+          this.markets[UNKNOWN_KEY].value += isNumber(
+            position.valueInBaseCurrency
+          )
+            ? this.portfolioDetails.holdings[symbol].valueInBaseCurrency
+            : this.portfolioDetails.holdings[symbol].valueInPercentage;
+
+          this.marketsAdvanced[UNKNOWN_KEY].value += isNumber(
+            position.valueInBaseCurrency
+          )
+            ? this.portfolioDetails.holdings[symbol].valueInBaseCurrency
+            : this.portfolioDetails.holdings[symbol].valueInPercentage;
         }
 
         if (position.sectors.length > 0) {
@@ -511,7 +522,8 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
     const marketsTotal =
       this.markets.developedMarkets.value +
       this.markets.emergingMarkets.value +
-      this.markets.otherMarkets.value;
+      this.markets.otherMarkets.value +
+      this.markets[UNKNOWN_KEY].value;
 
     this.markets.developedMarkets.value =
       this.markets.developedMarkets.value / marketsTotal;
@@ -519,6 +531,8 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
       this.markets.emergingMarkets.value / marketsTotal;
     this.markets.otherMarkets.value =
       this.markets.otherMarkets.value / marketsTotal;
+    this.markets[UNKNOWN_KEY].value =
+      this.markets[UNKNOWN_KEY].value / marketsTotal;
   }
 
   public onAccountChartClicked({ symbol }: UniqueAsset) {

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

@@ -215,7 +215,7 @@
             ></gf-world-map-chart>
           </div>
           <div class="row">
-            <div class="col-xs-12 col-md-4 my-2">
+            <div class="col-xs-12 col-md-3 my-2">
               <gf-value
                 i18n
                 size="large"
@@ -224,7 +224,7 @@
                 >Developed Markets</gf-value
               >
             </div>
-            <div class="col-xs-12 col-md-4 my-2">
+            <div class="col-xs-12 col-md-3 my-2">
               <gf-value
                 i18n
                 size="large"
@@ -233,7 +233,7 @@
                 >Emerging Markets</gf-value
               >
             </div>
-            <div class="col-xs-12 col-md-4 my-2">
+            <div class="col-xs-12 col-md-3 my-2">
               <gf-value
                 i18n
                 size="large"
@@ -242,6 +242,15 @@
                 >Other Markets</gf-value
               >
             </div>
+            <div class="col-xs-12 col-md-3 my-2">
+              <gf-value
+                i18n
+                size="large"
+                [isPercent]="true"
+                [value]="markets?.[UNKNOWN_KEY]?.value"
+                >No data available</gf-value
+              >
+            </div>
           </div>
         </mat-card-content>
       </mat-card>

apps/client/src/app/pages/public/public-page.component.ts

@@ -44,6 +44,7 @@ export class PublicPageComponent implements OnInit {
   public symbols: {
     [name: string]: { name: string; symbol: string; value: number };
   };
+  public UNKNOWN_KEY = UNKNOWN_KEY;
 
   private id: string;
   private unsubscribeSubject = new Subject<void>();
@@ -99,6 +100,10 @@ export class PublicPageComponent implements OnInit {
       }
     };
     this.markets = {
+      [UNKNOWN_KEY]: {
+        name: UNKNOWN_KEY,
+        value: 0
+      },
       developedMarkets: {
         name: 'developedMarkets',
         value: 0
@@ -180,6 +185,9 @@ export class PublicPageComponent implements OnInit {
 
         this.countries[UNKNOWN_KEY].value +=
           this.portfolioPublicDetails.holdings[symbol].valueInBaseCurrency;
+
+        this.markets[UNKNOWN_KEY].value +=
+          this.portfolioPublicDetails.holdings[symbol].valueInBaseCurrency;
       }
 
       if (position.sectors.length > 0) {
@@ -214,7 +222,8 @@ export class PublicPageComponent implements OnInit {
     const marketsTotal =
       this.markets.developedMarkets.value +
       this.markets.emergingMarkets.value +
-      this.markets.otherMarkets.value;
+      this.markets.otherMarkets.value +
+      this.markets[UNKNOWN_KEY].value;
 
     this.markets.developedMarkets.value =
       this.markets.developedMarkets.value / marketsTotal;
@@ -222,6 +231,8 @@ export class PublicPageComponent implements OnInit {
       this.markets.emergingMarkets.value / marketsTotal;
     this.markets.otherMarkets.value =
       this.markets.otherMarkets.value / marketsTotal;
+    this.markets[UNKNOWN_KEY].value =
+      this.markets[UNKNOWN_KEY].value / marketsTotal;
   }
 
   public ngOnDestroy() {

apps/client/src/app/pages/public/public-page.html

@@ -84,7 +84,7 @@
             ></gf-world-map-chart>
           </div>
           <div class="row">
-            <div class="col-xs-12 col-md-4 my-2">
+            <div class="col-xs-12 col-md-3 my-2">
               <gf-value
                 i18n
                 size="large"
@@ -93,7 +93,7 @@
                 >Developed Markets</gf-value
               >
             </div>
-            <div class="col-xs-12 col-md-4 my-2">
+            <div class="col-xs-12 col-md-3 my-2">
               <gf-value
                 i18n
                 size="large"
@@ -102,7 +102,7 @@
                 >Emerging Markets</gf-value
               >
             </div>
-            <div class="col-xs-12 col-md-4 my-2">
+            <div class="col-xs-12 col-md-3 my-2">
               <gf-value
                 i18n
                 size="large"
@@ -111,6 +111,15 @@
                 >Other Markets</gf-value
               >
             </div>
+            <div class="col-xs-12 col-md-3 my-2">
+              <gf-value
+                i18n
+                size="large"
+                [isPercent]="true"
+                [value]="markets?.[UNKNOWN_KEY]?.value"
+                >No data available</gf-value
+              >
+            </div>
           </div>
         </mat-card-content>
       </mat-card>

libs/common/src/lib/types/market-advanced.type.ts

@@ -4,4 +4,5 @@ export type MarketAdvanced =
   | 'europe'
   | 'japan'
   | 'northAmerica'
-  | 'otherMarkets';
+  | 'otherMarkets'
+  | 'UNKNOWN';

libs/common/src/lib/types/market.type.ts

@@ -1 +1,5 @@
-export type Market = 'developedMarkets' | 'emergingMarkets' | 'otherMarkets';
+export type Market =
+  | 'developedMarkets'
+  | 'emergingMarkets'
+  | 'otherMarkets'
+  | 'UNKNOWN';