Feature/improve empty state of proportion chart (#811)

* Improve empty state

* Update changelog

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Changed
+
+- Improved the empty state of the portfolio proportion chart component
+
 ### Fixed
 
 - Fixed an issue with dates in the value component

apps/api/src/app/portfolio/portfolio.controller.ts

@@ -106,16 +106,6 @@ export class PortfolioController {
     @Headers('impersonation-id') impersonationId: string,
     @Query('range') range
   ): Promise<PortfolioDetails & { hasError: boolean }> {
-    if (
-      this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION') &&
-      this.request.user.subscription.type === 'Basic'
-    ) {
-      throw new HttpException(
-        getReasonPhrase(StatusCodes.FORBIDDEN),
-        StatusCodes.FORBIDDEN
-      );
-    }
-
     let hasError = false;
 
     const { accounts, holdings, hasErrors } =
@@ -162,7 +152,11 @@ export class PortfolioController {
       }
     }
 
-    return { accounts, hasError, holdings };
+    const isBasicUser =
+      this.configurationService.get('ENABLE_FEATURE_SUBSCRIPTION') &&
+      this.request.user.subscription.type === 'Basic';
+
+    return { accounts, hasError, holdings: isBasicUser ? {} : holdings };
   }
 
   @Get('investments')

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

@@ -147,13 +147,6 @@ export class UserService {
       user.subscription = this.subscriptionService.getSubscription(
         userFromDatabase?.Subscription
       );
-
-      if (user.subscription.type === SubscriptionType.Basic) {
-        user.permissions = user.permissions.filter((permission) => {
-          return permission !== permissions.updateViewMode;
-        });
-        user.Settings.viewMode = ViewMode.ZEN;
-      }
     }
 
     return user;

apps/client/src/app/components/positions-table/positions-table.component.html

@@ -123,17 +123,6 @@
   }"
 ></ngx-skeleton-loader>
 
-<div
-  *ngIf="
-    dataSource.data.length === 0 && hasPermissionToCreateOrder && !isLoading
-  "
-  class="p-3 text-center"
->
-  <gf-no-transactions-info-indicator
-    [hasBorder]="false"
-  ></gf-no-transactions-info-indicator>
-</div>
-
 <div
   *ngIf="dataSource.data.length > pageSize && !isLoading"
   class="my-3 text-center"

apps/client/src/app/components/positions-table/positions-table.component.ts

@@ -27,7 +27,6 @@ import { Subject, Subscription } from 'rxjs';
 export class PositionsTableComponent implements OnChanges, OnDestroy, OnInit {
   @Input() baseCurrency: string;
   @Input() deviceType: string;
-  @Input() hasPermissionToCreateOrder: boolean;
   @Input() locale: string;
   @Input() positions: PortfolioPosition[];
 

apps/client/src/app/pages/account/account-page.html

@@ -139,11 +139,6 @@
               <div class="d-flex">
                 <div class="align-items-center d-flex pr-1 pt-1 w-50" i18n>
                   View Mode
-                  <ion-icon
-                    *ngIf="!hasPermissionToUpdateViewMode"
-                    class="mx-1 text-muted"
-                    name="diamond-outline"
-                  ></ion-icon>
                 </div>
                 <div class="pl-1 w-50">
                   <div class="align-items-center d-flex overflow-hidden">

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

@@ -13,7 +13,6 @@ import {
   UniqueAsset,
   User
 } from '@ghostfolio/common/interfaces';
-import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { Market, ToggleOption } from '@ghostfolio/common/types';
 import { Account, AssetClass, DataSource } from '@prisma/client';
 import { DeviceDetectorService } from 'ngx-device-detector';
@@ -41,7 +40,6 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
   };
   public deviceType: string;
   public hasImpersonationId: boolean;
-  public hasPermissionToCreateOrder: boolean;
   public markets: {
     [key in Market]: { name: string; value: number };
   };
@@ -139,11 +137,6 @@ export class AllocationsPageComponent implements OnDestroy, OnInit {
         if (state?.user) {
           this.user = state.user;
 
-          this.hasPermissionToCreateOrder = hasPermission(
-            this.user.permissions,
-            permissions.createOrder
-          );
-
           this.changeDetectorRef.markForCheck();
         }
       });

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

@@ -30,33 +30,14 @@
     <div class="col-md-4">
       <mat-card class="mb-3">
         <mat-card-header class="overflow-hidden w-100">
-          <mat-card-title class="text-truncate" i18n
+          <mat-card-title class="align-items-center d-flex text-truncate"
-            >By Asset Class</mat-card-title
+            ><span i18n>By Currency</span
-          >
+            ><ion-icon
-          <gf-toggle
+              *ngIf="user?.subscription?.type === 'Basic'"
-            [defaultValue]="period"
+              class="ml-1 text-muted"
-            [isLoading]="false"
+              name="diamond-outline"
-            [options]="periodOptions"
+            ></ion-icon
-            (change)="onChangePeriod($event.value)"
+          ></mat-card-title>
-          ></gf-toggle>
-        </mat-card-header>
-        <mat-card-content>
-          <gf-portfolio-proportion-chart
-            [baseCurrency]="user?.settings?.baseCurrency"
-            [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
-            [keys]="['assetClass', 'assetSubClass']"
-            [locale]="user?.settings?.locale"
-            [positions]="positions"
-          ></gf-portfolio-proportion-chart>
-        </mat-card-content>
-      </mat-card>
-    </div>
-    <div class="col-md-4">
-      <mat-card class="mb-3">
-        <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"
@@ -75,10 +56,46 @@
         </mat-card-content>
       </mat-card>
     </div>
+    <div class="col-md-4">
+      <mat-card class="mb-3">
+        <mat-card-header class="overflow-hidden w-100">
+          <mat-card-title class="align-items-center d-flex text-truncate"
+            ><span i18n>By Asset Class</span
+            ><ion-icon
+              *ngIf="user?.subscription?.type === 'Basic'"
+              class="ml-1 text-muted"
+              name="diamond-outline"
+            ></ion-icon
+          ></mat-card-title>
+          <gf-toggle
+            [defaultValue]="period"
+            [isLoading]="false"
+            [options]="periodOptions"
+            (change)="onChangePeriod($event.value)"
+          ></gf-toggle>
+        </mat-card-header>
+        <mat-card-content>
+          <gf-portfolio-proportion-chart
+            [baseCurrency]="user?.settings?.baseCurrency"
+            [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
+            [keys]="['assetClass', 'assetSubClass']"
+            [locale]="user?.settings?.locale"
+            [positions]="positions"
+          ></gf-portfolio-proportion-chart>
+        </mat-card-content>
+      </mat-card>
+    </div>
     <div class="col-md-12 allocations-by-symbol">
       <mat-card class="mb-3">
         <mat-card-header class="overflow-hidden w-100">
-          <mat-card-title class="text-truncate" i18n>By Symbol</mat-card-title>
+          <mat-card-title class="align-items-center d-flex text-truncate"
+            ><span i18n>By Symbol</span
+            ><ion-icon
+              *ngIf="user?.subscription?.type === 'Basic'"
+              class="ml-1 text-muted"
+              name="diamond-outline"
+            ></ion-icon
+          ></mat-card-title>
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -104,7 +121,14 @@
     <div class="col-md-4">
       <mat-card class="mb-3">
         <mat-card-header class="overflow-hidden w-100">
-          <mat-card-title class="text-truncate" i18n>By Sector</mat-card-title>
+          <mat-card-title class="align-items-center d-flex text-truncate"
+            ><span i18n>By Sector</span
+            ><ion-icon
+              *ngIf="user?.subscription?.type === 'Basic'"
+              class="ml-1 text-muted"
+              name="diamond-outline"
+            ></ion-icon
+          ></mat-card-title>
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -127,9 +151,14 @@
     <div class="col-md-4">
       <mat-card class="mb-3">
         <mat-card-header class="overflow-hidden w-100">
-          <mat-card-title class="text-truncate" i18n
+          <mat-card-title class="align-items-center d-flex text-truncate"
-            >By Continent</mat-card-title
+            ><span i18n>By Continent</span
-          >
+            ><ion-icon
+              *ngIf="user?.subscription?.type === 'Basic'"
+              class="ml-1 text-muted"
+              name="diamond-outline"
+            ></ion-icon
+          ></mat-card-title>
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -151,7 +180,14 @@
     <div class="col-md-4">
       <mat-card class="mb-3">
         <mat-card-header class="overflow-hidden w-100">
-          <mat-card-title class="text-truncate" i18n>By Country</mat-card-title>
+          <mat-card-title class="align-items-center d-flex text-truncate"
+            ><span i18n>By Country</span
+            ><ion-icon
+              *ngIf="user?.subscription?.type === 'Basic'"
+              class="ml-1 text-muted"
+              name="diamond-outline"
+            ></ion-icon
+          ></mat-card-title>
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -176,7 +212,14 @@
     <div class="col-lg">
       <mat-card class="mb-3">
         <mat-card-header class="overflow-hidden w-100">
-          <mat-card-title class="text-truncate" i18n>Regions</mat-card-title>
+          <mat-card-title class="align-items-center d-flex text-truncate"
+            ><span i18n>Regions</span
+            ><ion-icon
+              *ngIf="user?.subscription?.type === 'Basic'"
+              class="ml-1 text-muted"
+              name="diamond-outline"
+            ></ion-icon
+          ></mat-card-title>
           <gf-toggle
             [defaultValue]="period"
             [isLoading]="false"
@@ -225,7 +268,6 @@
       <gf-positions-table
         [baseCurrency]="user?.settings?.baseCurrency"
         [deviceType]="deviceType"
-        [hasPermissionToCreateOrder]="hasPermissionToCreateOrder"
         [locale]="user?.settings?.locale"
         [positions]="positionsArray"
       ></gf-positions-table>

libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts

@@ -246,6 +246,12 @@ export class PortfolioProportionChartComponent
       labels = labelSubCategory.concat(labels);
     }
 
+    if (datasets[0]?.data?.length === 0 || datasets[0]?.data?.[0] === 0) {
+      labels = [''];
+      datasets[0].backgroundColor = [this.colorMap[UNKNOWN_KEY]];
+      datasets[0].data[0] = Number.MAX_SAFE_INTEGER;
+    }
+
     const data = {
       datasets,
       labels
@@ -323,7 +329,9 @@ export class PortfolioProportionChartComponent
 
                     const percentage = (context.parsed * 100) / sum;
 
-                    if (this.isInPercent) {
+                    if (<number>context.raw === Number.MAX_SAFE_INTEGER) {
+                      return 'No data available';
+                    } else if (this.isInPercent) {
                       return [`${name ?? symbol}`, `${percentage.toFixed(2)}%`];
                     } else {
                       const value = <number>context.raw;