Feature/restructure allocations page including allocations by symbol (#333)

* Restructure allocations page

* Update changelog

CHANGELOG.md

@@ -12,6 +12,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Added a link below the holdings to manage the transactions
 - Added the allocation chart by symbol
 
+### Changed
+
+- Restructured the allocations page
+
 ### Fixed
 
 - Fixed the value formatting for integers (transactions count)

apps/client/src/app/components/toggle/toggle.component.html

@@ -1,4 +1,8 @@
-<mat-radio-group [formControl]="option" (change)="onValueChange()">
+<mat-radio-group
+  class="text-nowrap"
+  [formControl]="option"
+  (change)="onValueChange()"
+>
   <mat-radio-button
     *ngFor="let option of options"
     [disabled]="isLoading"

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

@@ -219,9 +219,7 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
         }
       }
 
-      if (position.assetSubClass !== AssetClass.CASH) {
-        // Prepare analysis data by symbols except for cash
-
+      if (position.assetClass === AssetClass.EQUITY) {
         this.symbols[symbol] = {
           name: symbol,
           value: aPeriod === 'original' ? position.investment : position.value

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

@@ -5,10 +5,10 @@
     </div>
   </div>
   <div class="proportion-charts row">
-    <div class="col-md-6">
+    <div class="col-md-4">
       <mat-card class="mb-3">
-        <mat-card-header class="w-100">
-          <mat-card-title i18n>By Symbol</mat-card-title>
+        <mat-card-header class="overflow-hidden w-100">
+          <mat-card-title class="text-truncate" i18n>By Account</mat-card-title>
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -19,19 +19,20 @@
         <mat-card-content>
           <gf-portfolio-proportion-chart
             [baseCurrency]="user?.settings?.baseCurrency"
-            [isInPercent]="false"
+            [isInPercent]="hasImpersonationId"
             [keys]="['name']"
             [locale]="user?.settings?.locale"
-            [positions]="symbols"
+            [positions]="accounts"
           ></gf-portfolio-proportion-chart>
         </mat-card-content>
       </mat-card>
     </div>
-
-    <div class="col-md-6">
+    <div class="col-md-4">
       <mat-card class="mb-3">
-        <mat-card-header class="w-100">
-          <mat-card-title i18n>By Account</mat-card-title>
+        <mat-card-header class="overflow-hidden w-100">
+          <mat-card-title class="text-truncate" i18n
+            >By Asset Class</mat-card-title
+          >
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -42,18 +43,20 @@
         <mat-card-content>
           <gf-portfolio-proportion-chart
             [baseCurrency]="user?.settings?.baseCurrency"
-            [isInPercent]="hasImpersonationId"
-            [keys]="['name']"
+            [isInPercent]="true"
+            [keys]="['assetClass', 'assetSubClass']"
             [locale]="user?.settings?.locale"
-            [positions]="accounts"
+            [positions]="positions"
           ></gf-portfolio-proportion-chart>
         </mat-card-content>
       </mat-card>
     </div>
-    <div class="col-md-6">
+    <div class="col-md-4">
       <mat-card class="mb-3">
-        <mat-card-header class="w-100">
-          <mat-card-title i18n>By Asset Class</mat-card-title>
+        <mat-card-header class="overflow-hidden w-100">
+          <mat-card-title class="text-truncate" i18n
+            >By Currency</mat-card-title
+          >
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -65,17 +68,17 @@
           <gf-portfolio-proportion-chart
             [baseCurrency]="user?.settings?.baseCurrency"
             [isInPercent]="true"
-            [keys]="['assetClass', 'assetSubClass']"
+            [keys]="['currency']"
             [locale]="user?.settings?.locale"
             [positions]="positions"
           ></gf-portfolio-proportion-chart>
         </mat-card-content>
       </mat-card>
     </div>
-    <div class="col-md-6">
+    <div class="col-md-12 allocations-by-symbol">
       <mat-card class="mb-3">
-        <mat-card-header class="w-100">
-          <mat-card-title i18n>By Currency</mat-card-title>
+        <mat-card-header class="overflow-hidden w-100">
+          <mat-card-title class="text-truncate" i18n>By Symbol</mat-card-title>
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -85,19 +88,20 @@
         </mat-card-header>
         <mat-card-content>
           <gf-portfolio-proportion-chart
+            class="mx-auto"
             [baseCurrency]="user?.settings?.baseCurrency"
-            [isInPercent]="true"
-            [keys]="['currency']"
+            [isInPercent]="false"
+            [keys]="['name']"
             [locale]="user?.settings?.locale"
-            [positions]="positions"
+            [positions]="symbols"
           ></gf-portfolio-proportion-chart>
         </mat-card-content>
       </mat-card>
     </div>
-    <div class="col-md-6">
+    <div class="col-md-4">
       <mat-card class="mb-3">
-        <mat-card-header class="w-100">
-          <mat-card-title i18n>By Sector</mat-card-title>
+        <mat-card-header class="overflow-hidden w-100">
+          <mat-card-title class="text-truncate" i18n>By Sector</mat-card-title>
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -117,10 +121,12 @@
         </mat-card-content>
       </mat-card>
     </div>
-    <div class="col-md-6">
+    <div class="col-md-4">
       <mat-card class="mb-3">
-        <mat-card-header class="w-100">
-          <mat-card-title i18n>By Continent</mat-card-title>
+        <mat-card-header class="overflow-hidden w-100">
+          <mat-card-title class="text-truncate" i18n
+            >By Continent</mat-card-title
+          >
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -139,10 +145,10 @@
         </mat-card-content>
       </mat-card>
     </div>
-    <div class="col-md-6">
+    <div class="col-md-4">
       <mat-card class="mb-3">
-        <mat-card-header class="w-100">
-          <mat-card-title i18n>By Country</mat-card-title>
+        <mat-card-header class="overflow-hidden w-100">
+          <mat-card-title class="text-truncate" i18n>By Country</mat-card-title>
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -166,8 +172,8 @@
   <div class="row world-map-chart">
     <div class="col-lg">
       <mat-card class="mb-3">
-        <mat-card-header class="w-100">
-          <mat-card-title i18n>Regions</mat-card-title>
+        <mat-card-header class="overflow-hidden w-100">
+          <mat-card-title class="text-truncate" i18n>Regions</mat-card-title>
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"

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

@@ -1,9 +1,7 @@
 :host {
-  .proportion-charts {
-    .mat-card {
-      .mat-card-content {
-        padding: 1rem 2rem;
-      }
+  .allocations-by-symbol {
+    gf-portfolio-proportion-chart {
+      max-width: 67vh;
     }
   }