Feature/improve treemap chart for holdings (#3563)

* Various improvements

* Introduce permission: accessHoldingsChart
* Improve style of toggle
* Add border radius

* Update changelog

apps/client/src/app/components/home-holdings/home-holdings.component.ts

@@ -28,6 +28,7 @@ import { takeUntil } from 'rxjs/operators';
 export class HomeHoldingsComponent implements OnDestroy, OnInit {
   public deviceType: string;
   public hasImpersonationId: boolean;
+  public hasPermissionToAccessHoldingsChart: boolean;
   public hasPermissionToCreateOrder: boolean;
   public holdings: PortfolioPosition[];
   public holdingType: HoldingType = 'ACTIVE';
@@ -65,20 +66,17 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
         if (state?.user) {
           this.user = state.user;
 
+          this.hasPermissionToAccessHoldingsChart = hasPermission(
+            this.user.permissions,
+            permissions.accessHoldingsChart
+          );
+
           this.hasPermissionToCreateOrder = hasPermission(
             this.user.permissions,
             permissions.createOrder
           );
 
-          this.holdings = undefined;
-
-          this.fetchHoldings()
-            .pipe(takeUntil(this.unsubscribeSubject))
-            .subscribe(({ holdings }) => {
-              this.holdings = holdings;
-
-              this.changeDetectorRef.markForCheck();
-            });
+          this.initialize();
 
           this.changeDetectorRef.markForCheck();
         }
@@ -88,22 +86,7 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
   public onChangeHoldingType(aHoldingType: HoldingType) {
     this.holdingType = aHoldingType;
 
-    if (this.holdingType === 'ACTIVE') {
-      this.viewModeFormControl.enable();
-    } else if (this.holdingType === 'CLOSED') {
-      this.viewModeFormControl.disable();
-      this.viewModeFormControl.setValue('TABLE');
-    }
-
-    this.holdings = undefined;
-
-    this.fetchHoldings()
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(({ holdings }) => {
-        this.holdings = holdings;
-
-        this.changeDetectorRef.markForCheck();
-      });
+    this.initialize();
   }
 
   public onSymbolClicked({ dataSource, symbol }: UniqueAsset) {
@@ -131,4 +114,27 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
       range: this.user?.settings?.dateRange
     });
   }
+
+  private initialize() {
+    this.viewModeFormControl.disable();
+
+    if (
+      this.hasPermissionToAccessHoldingsChart &&
+      this.holdingType === 'ACTIVE'
+    ) {
+      this.viewModeFormControl.enable();
+    } else if (this.holdingType === 'CLOSED') {
+      this.viewModeFormControl.setValue('TABLE');
+    }
+
+    this.holdings = undefined;
+
+    this.fetchHoldings()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(({ holdings }) => {
+        this.holdings = holdings;
+
+        this.changeDetectorRef.markForCheck();
+      });
+  }
 }

apps/client/src/app/components/home-holdings/home-holdings.html

@@ -14,10 +14,10 @@
                 [formControl]="viewModeFormControl"
                 [hideSingleSelectionIndicator]="true"
               >
-                <mat-button-toggle value="TABLE">
+                <mat-button-toggle i18n-title title="Table" value="TABLE">
                   <ion-icon name="reorder-four-outline" />
                 </mat-button-toggle>
-                <mat-button-toggle value="CHART">
+                <mat-button-toggle i18n-title title="Chart" value="CHART">
                   <ion-icon name="grid-outline" />
                 </mat-button-toggle>
               </mat-button-toggle-group>

apps/client/src/app/components/home-holdings/home-holdings.scss

@@ -1,3 +1,9 @@
 :host {
   display: block;
+
+  .mat-button-toggle-group {
+    .mat-button-toggle-appearance-standard {
+      --mat-standard-button-toggle-height: 1.5rem;
+    }
+  }
 }