Feature/improve treemap chart for holdings (#3563)

* Various improvements

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

* Update changelog

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Improved the chart of the holdings tab on the home page (experimental)
+
 ## 2.95.0 - 2024-07-12
 
 ### Added

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

@@ -237,6 +237,7 @@ export class UserService {
 
         currentPermissions = without(
           currentPermissions,
+          permissions.accessHoldingsChart,
           permissions.createAccess
         );
 

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.initialize();
-
-          this.fetchHoldings()
-            .pipe(takeUntil(this.unsubscribeSubject))
-            .subscribe(({ holdings }) => {
-              this.holdings = holdings;
-
-              this.changeDetectorRef.markForCheck();
-            });
 
           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.initialize();
-      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();
-      });
   }
 
   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;
+    }
+  }
 }

libs/common/src/lib/permissions.ts

@@ -5,6 +5,7 @@ import { Role } from '@prisma/client';
 export const permissions = {
   accessAdminControl: 'accessAdminControl',
   accessAssistant: 'accessAssistant',
+  accessHoldingsChart: 'accessHoldingsChart',
   createAccess: 'createAccess',
   createAccount: 'createAccount',
   createAccountBalance: 'createAccountBalance',
@@ -47,6 +48,7 @@ export function getPermissions(aRole: Role): string[] {
       return [
         permissions.accessAdminControl,
         permissions.accessAssistant,
+        permissions.accessHoldingsChart,
         permissions.createAccess,
         permissions.createAccount,
         permissions.createAccountBalance,
@@ -72,11 +74,16 @@ export function getPermissions(aRole: Role): string[] {
       ];
 
     case 'DEMO':
-      return [permissions.accessAssistant, permissions.createUserAccount];
+      return [
+        permissions.accessAssistant,
+        permissions.accessHoldingsChart,
+        permissions.createUserAccount
+      ];
 
     case 'USER':
       return [
         permissions.accessAssistant,
+        permissions.accessHoldingsChart,
         permissions.createAccess,
         permissions.createAccount,
         permissions.createAccountBalance,

libs/ui/src/lib/treemap-chart/treemap-chart.component.ts

@@ -1,4 +1,3 @@
-import { getLocale } from '@ghostfolio/common/helper';
 import { PortfolioPosition, UniqueAsset } from '@ghostfolio/common/interfaces';
 
 import { CommonModule } from '@angular/common';
@@ -95,6 +94,7 @@ export class GfTreemapChartComponent
               return red[9];
             }
           },
+          borderRadius: 4,
           key: 'allocationInPercentage',
           labels: {
             align: 'left',