From 9555f599e0b89bd00cc320358cbbe42369f34fae Mon Sep 17 00:00:00 2001
From: Thomas <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 26 Mar 2022 10:49:52 +0100
Subject: [PATCH] Finish allocations page

---
 .../allocations/allocations-page.component.ts |  9 ++-
 .../allocations/allocations-page.html         | 60 ++++++++-----------
 .../allocations/allocations-page.module.ts    |  2 +
 apps/client/src/styles.scss                   |  4 ++
 libs/ui/src/lib/value/value.component.html    |  5 +-
 5 files changed, 40 insertions(+), 40 deletions(-)

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 7e4238e1c..c9267defd 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
@@ -237,11 +237,14 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
 
         if (position.countries.length > 0) {
           this.markets['DEVELOPED_MARKETS'].value +=
-            position.markets['DEVELOPED_MARKETS'] * position.value;
+            position.markets['DEVELOPED_MARKETS'] *
+            (aPeriod === 'original' ? position.investment : position.value);
           this.markets['EMERGING_MARKETS'].value +=
-            position.markets['EMERGING_MARKETS'] * position.value;
+            position.markets['EMERGING_MARKETS'] *
+            (aPeriod === 'original' ? position.investment : position.value);
           this.markets['OTHER_MARKETS'].value +=
-            position.markets['OTHER_MARKETS'] * position.value;
+            position.markets['OTHER_MARKETS'] *
+            (aPeriod === 'original' ? position.investment : position.value);
 
           for (const country of position.countries) {
             const { code, continent, name, weight } = country;
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 589ec4b2d..0abb19837 100644
--- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.html
+++ b/apps/client/src/app/pages/portfolio/allocations/allocations-page.html
@@ -172,42 +172,6 @@
       </mat-card>
     </div>
   </div>
-  <div class="row">
-    <div class="col-lg">
-      <mat-card class="mb-3">
-        <mat-card-content>
-          <div class="row">
-            <div class="col-xs-12 col-md-4 my-2">
-              <h3 class="mb-0">
-                {{ (markets?.DEVELOPED_MARKETS?.value | percent: '1.2-2') || '-'
-                }}
-              </h3>
-              <div class="h6 mb-0">
-                <span i18n>Developed Markets</span>
-              </div>
-            </div>
-            <div class="col-xs-12 col-md-4 my-2">
-              <h3 class="mb-0">
-                {{ (markets?.EMERGING_MARKETS?.value | percent: '1.2-2') || '-'
-                }}
-              </h3>
-              <div class="h6 mb-0">
-                <span i18n>Emerging Markets</span>
-              </div>
-            </div>
-            <div class="col-xs-12 col-md-4 my-2">
-              <h3 class="mb-0">
-                {{ (markets?.OTHER_MARKETS?.value | percent: '1.2-2') || '-' }}
-              </h3>
-              <div class="h6 mb-0">
-                <span i18n>Other Markets</span>
-              </div>
-            </div>
-          </div>
-        </mat-card-content>
-      </mat-card>
-    </div>
-  </div>
   <div class="row world-map-chart">
     <div class="col-lg">
       <mat-card class="mb-3">
@@ -226,6 +190,30 @@
             [countries]="countries"
             [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
           ></gf-world-map-chart>
+          <div class="row">
+            <div class="col-xs-12 col-md-4 d-flex justify-content-center">
+              <gf-value
+                label="Developed Markets"
+                size="large"
+                [value]="(markets?.DEVELOPED_MARKETS?.value | percent: '1.2-2') || '-'"
+              ></gf-value>
+            </div>
+            <div class="col-xs-12 col-md-4 d-flex justify-content-center">
+              <gf-value
+                label="Emerging Markets"
+                size="large"
+                [value]="(markets?.EMERGING_MARKETS?.value | percent: '1.2-2') || '-'"
+              ></gf-value>
+            </div>
+            <div class="col-xs-12 col-md-4 d-flex justify-content-center">
+              <gf-value
+                class="width-auto"
+                label="Other Markets"
+                size="large"
+                [value]="(markets?.OTHER_MARKETS?.value | percent: '1.2-2') || '-'"
+              ></gf-value>
+            </div>
+          </div>
         </mat-card-content>
       </mat-card>
     </div>
diff --git a/apps/client/src/app/pages/portfolio/allocations/allocations-page.module.ts b/apps/client/src/app/pages/portfolio/allocations/allocations-page.module.ts
index 809b29bd7..62dd05e4e 100644
--- a/apps/client/src/app/pages/portfolio/allocations/allocations-page.module.ts
+++ b/apps/client/src/app/pages/portfolio/allocations/allocations-page.module.ts
@@ -5,6 +5,7 @@ import { GfPositionsTableModule } from '@ghostfolio/client/components/positions-
 import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module';
 import { GfWorldMapChartModule } from '@ghostfolio/client/components/world-map-chart/world-map-chart.module';
 import { GfPortfolioProportionChartModule } from '@ghostfolio/ui/portfolio-proportion-chart/portfolio-proportion-chart.module';
+import { GfValueModule } from '@ghostfolio/ui/value';
 
 import { AllocationsPageRoutingModule } from './allocations-page-routing.module';
 import { AllocationsPageComponent } from './allocations-page.component';
@@ -19,6 +20,7 @@ import { AllocationsPageComponent } from './allocations-page.component';
     GfPositionsTableModule,
     GfToggleModule,
     GfWorldMapChartModule,
+    GfValueModule,
     MatCardModule
   ],
   providers: [],
diff --git a/apps/client/src/styles.scss b/apps/client/src/styles.scss
index ed670f1d4..81fefd2ee 100644
--- a/apps/client/src/styles.scss
+++ b/apps/client/src/styles.scss
@@ -184,6 +184,10 @@ ngx-skeleton-loader {
   text-decoration: underline !important;
 }
 
+.width-auto {
+  width: auto;
+}
+
 .with-info-message {
   height: calc(100vh - 5rem - 3.5rem) !important;
 }
diff --git a/libs/ui/src/lib/value/value.component.html b/libs/ui/src/lib/value/value.component.html
index e4f8b0f45..3533a749a 100644
--- a/libs/ui/src/lib/value/value.component.html
+++ b/libs/ui/src/lib/value/value.component.html
@@ -43,7 +43,10 @@
       </div>
     </ng-container>
   </div>
-  <small *ngIf="label">
+  <div *ngIf="label && size === 'large'">
+    {{ label }}
+  </div>
+  <small *ngIf="label && size !== 'large'">
     {{ label }}
   </small>
 </ng-container>