Feature/improve empty states (#1090)

* Improve empty states

* Update changelog

CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Changed
+
+- Improved the empty state of the
+  - _Analysis_ section
+  - _Holdings_ section
+  - performance chart on the home page
+
 ### Fixed
 
 - Fixed the distorted tooltip in the performance chart on the home page

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

@@ -4,11 +4,20 @@
   <div class="row w-100">
     <div class="col p-0">
       <div class="chart-container mx-auto position-relative">
+        <div
+          *ngIf="hasPermissionToCreateOrder && historicalDataItems?.length === 0"
+          class="align-items-center d-flex h-100 justify-content-center w-100"
+        >
+          <div class="d-flex justify-content-center">
+            <gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
+          </div>
+        </div>
         <gf-line-chart
           class="position-absolute"
           symbol="Performance"
           [currency]="user?.settings?.baseCurrency"
           [historicalDataItems]="historicalDataItems"
+          [hidden]="historicalDataItems?.length === 0"
           [locale]="user?.settings?.locale"
           [ngClass]="{ 'pr-3': deviceType === 'mobile' }"
           [showGradient]="true"
@@ -17,14 +26,6 @@
           [showYAxis]="false"
         ></gf-line-chart>
       </div>
-      <div
-        *ngIf="hasPermissionToCreateOrder && historicalDataItems?.length === 0"
-        class="align-items-center d-flex h-100 justify-content-center w-100"
-      >
-        <div class="d-flex justify-content-center">
-          <gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
-        </div>
-      </div>
     </div>
   </div>
   <div class="overview-container row mt-1">

apps/client/src/app/components/investment-chart/investment-chart.component.scss

@@ -1,3 +1,7 @@
 :host {
   display: block;
+
+  ngx-skeleton-loader {
+    height: 100%;
+  }
 }

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

@@ -142,4 +142,15 @@
   </button>
 </div>
 
+<div
+  *ngIf="
+    dataSource.data.length === 0 && hasPermissionToCreateActivity && !isLoading
+  "
+  class="p-3 text-center"
+>
+  <gf-no-transactions-info-indicator
+    [hasBorder]="false"
+  ></gf-no-transactions-info-indicator>
+</div>
+
 <mat-paginator class="d-none" [pageSize]="pageSize"></mat-paginator>

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

@@ -27,6 +27,7 @@ import { Subject, Subscription } from 'rxjs';
 export class PositionsTableComponent implements OnChanges, OnDestroy, OnInit {
   @Input() baseCurrency: string;
   @Input() deviceType: string;
+  @Input() hasPermissionToCreateActivity: boolean;
   @Input() hasPermissionToShowValues = true;
   @Input() locale: string;
   @Input() pageSize = Number.MAX_SAFE_INTEGER;

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

@@ -1,11 +1,17 @@
 <div class="container">
-  <div class="investment-chart row">
+  <div class="row">
     <div class="col-lg">
       <h3 class="d-flex justify-content-center mb-3" i18n>Analysis</h3>
       <div class="mb-4">
         <div class="align-items-center d-flex mb-4">
-          <div class="flex-grow-1 h5 mb-0 text-truncate" i18n>
-            Investment Timeline
+          <div
+            class="align-items-center d-flex flex-grow-1 h5 mb-0 text-truncate"
+          >
+            <span i18n>Investment Timeline</span>
+            <gf-premium-indicator
+              *ngIf="user?.subscription?.type === 'Basic'"
+              class="ml-1"
+            ></gf-premium-indicator>
           </div>
           <gf-toggle
             class="d-none d-lg-block"
@@ -15,25 +21,27 @@
             (change)="onChangeGroupBy($event.value)"
           ></gf-toggle>
         </div>
-        <gf-investment-chart
-          class="h-100"
-          [currency]="user?.settings?.baseCurrency"
-          [daysInMarket]="daysInMarket"
-          [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
-          [investments]="investments"
-          [locale]="user?.settings?.locale"
-          [ngClass]="{ 'd-none': mode }"
-        ></gf-investment-chart>
-        <gf-investment-chart
-          class="h-100"
-          groupBy="month"
-          [currency]="user?.settings?.baseCurrency"
-          [daysInMarket]="daysInMarket"
-          [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
-          [investments]="investmentsByMonth"
-          [locale]="user?.settings?.locale"
-          [ngClass]="{ 'd-none': !mode }"
-        ></gf-investment-chart>
+        <div class="chart-container">
+          <gf-investment-chart
+            class="h-100"
+            [currency]="user?.settings?.baseCurrency"
+            [daysInMarket]="daysInMarket"
+            [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
+            [investments]="investments"
+            [locale]="user?.settings?.locale"
+            [ngClass]="{ 'd-none': mode }"
+          ></gf-investment-chart>
+          <gf-investment-chart
+            class="h-100"
+            groupBy="month"
+            [currency]="user?.settings?.baseCurrency"
+            [daysInMarket]="daysInMarket"
+            [isInPercent]="hasImpersonationId || user.settings.isRestrictedView"
+            [investments]="investmentsByMonth"
+            [locale]="user?.settings?.locale"
+            [ngClass]="{ 'd-none': !mode }"
+          ></gf-investment-chart>
+        </div>
       </div>
     </div>
   </div>

apps/client/src/app/pages/portfolio/analysis/analysis-page.module.ts

@@ -3,6 +3,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
 import { GfInvestmentChartModule } from '@ghostfolio/client/components/investment-chart/investment-chart.module';
 import { GfToggleModule } from '@ghostfolio/client/components/toggle/toggle.module';
+import { GfPremiumIndicatorModule } from '@ghostfolio/ui/premium-indicator';
 import { GfValueModule } from '@ghostfolio/ui/value';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
@@ -15,6 +16,7 @@ import { AnalysisPageComponent } from './analysis-page.component';
     AnalysisPageRoutingModule,
     CommonModule,
     GfInvestmentChartModule,
+    GfPremiumIndicatorModule,
     GfToggleModule,
     GfValueModule,
     MatCardModule,

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

@@ -1,11 +1,7 @@
 :host {
   display: block;
 
-  .investment-chart {
-    .mat-card {
-      .mat-card-content {
-        aspect-ratio: 16 / 9;
-      }
-    }
+  .chart-container {
+    aspect-ratio: 16 / 9;
   }
 }

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

@@ -15,10 +15,14 @@
       <gf-positions-table
         [baseCurrency]="user?.settings?.baseCurrency"
         [deviceType]="deviceType"
+        [hasPermissionToCreateActivity]="hasPermissionToCreateOrder"
         [locale]="user?.settings?.locale"
         [positions]="positionsArray"
       ></gf-positions-table>
-      <div *ngIf="hasPermissionToCreateOrder" class="text-center">
+      <div
+        *ngIf="hasPermissionToCreateOrder && positionsArray?.length > 0"
+        class="text-center"
+      >
         <a
           class="mt-3"
           i18n

libs/ui/src/lib/premium-indicator/premium-indicator.component.html

@@ -1,5 +1,6 @@
 <a
   class="align-items-center d-flex"
+  title="Upgrade to Ghostfolio Premium"
   [ngStyle]="{ 'pointer-events': enableLink ? 'initial' : 'none' }"
   [routerLink]="['/pricing']"
   ><ion-icon class="text-muted" name="diamond-outline"></ion-icon