Finish allocations page

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;

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>

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: [],

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;
 }

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>