From 2571e5b8c081ce93ada7aed09b794176ee6f6356 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Fri, 22 Jul 2022 19:33:06 +0200
Subject: [PATCH] Feature/improve empty states (#1090)

* Improve empty states

* Update changelog
---
 CHANGELOG.md                                  |  7 +++
 .../home-overview/home-overview.html          | 17 +++---
 .../investment-chart.component.scss           |  4 ++
 .../positions-table.component.html            | 11 ++++
 .../positions-table.component.ts              |  1 +
 .../portfolio/analysis/analysis-page.html     | 52 +++++++++++--------
 .../analysis/analysis-page.module.ts          |  2 +
 .../portfolio/analysis/analysis-page.scss     |  8 +--
 .../portfolio/holdings/holdings-page.html     |  6 ++-
 .../premium-indicator.component.html          |  1 +
 10 files changed, 72 insertions(+), 37 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9d49d3fd3..0a5524580 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/apps/client/src/app/components/home-overview/home-overview.html b/apps/client/src/app/components/home-overview/home-overview.html
index db9d9b6bf..cce870b52 100644
--- a/apps/client/src/app/components/home-overview/home-overview.html
+++ b/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">
diff --git a/apps/client/src/app/components/investment-chart/investment-chart.component.scss b/apps/client/src/app/components/investment-chart/investment-chart.component.scss
index 5d4e87f30..ddaebfe44 100644
--- a/apps/client/src/app/components/investment-chart/investment-chart.component.scss
+++ b/apps/client/src/app/components/investment-chart/investment-chart.component.scss
@@ -1,3 +1,7 @@
 :host {
   display: block;
+
+  ngx-skeleton-loader {
+    height: 100%;
+  }
 }
diff --git a/apps/client/src/app/components/positions-table/positions-table.component.html b/apps/client/src/app/components/positions-table/positions-table.component.html
index 3d9ac93e9..f41638946 100644
--- a/apps/client/src/app/components/positions-table/positions-table.component.html
+++ b/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>
diff --git a/apps/client/src/app/components/positions-table/positions-table.component.ts b/apps/client/src/app/components/positions-table/positions-table.component.ts
index 3cd313698..acd76ef11 100644
--- a/apps/client/src/app/components/positions-table/positions-table.component.ts
+++ b/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;
diff --git a/apps/client/src/app/pages/portfolio/analysis/analysis-page.html b/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
index 831c3baec..bb3a2746a 100644
--- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.html
+++ b/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>
diff --git a/apps/client/src/app/pages/portfolio/analysis/analysis-page.module.ts b/apps/client/src/app/pages/portfolio/analysis/analysis-page.module.ts
index 169134c7b..59df2ca91 100644
--- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.module.ts
+++ b/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,
diff --git a/apps/client/src/app/pages/portfolio/analysis/analysis-page.scss b/apps/client/src/app/pages/portfolio/analysis/analysis-page.scss
index e4df95e6a..c6fb687e3 100644
--- a/apps/client/src/app/pages/portfolio/analysis/analysis-page.scss
+++ b/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;
   }
 }
diff --git a/apps/client/src/app/pages/portfolio/holdings/holdings-page.html b/apps/client/src/app/pages/portfolio/holdings/holdings-page.html
index 955ac7a12..632569e6c 100644
--- a/apps/client/src/app/pages/portfolio/holdings/holdings-page.html
+++ b/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
diff --git a/libs/ui/src/lib/premium-indicator/premium-indicator.component.html b/libs/ui/src/lib/premium-indicator/premium-indicator.component.html
index 69ce63f20..83459659e 100644
--- a/libs/ui/src/lib/premium-indicator/premium-indicator.component.html
+++ b/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