Feature/move market mood to tab (#463)

* Move market mood to tab

* Update changelog

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Adapted the decimal places for cryptocurrencies in the position detail dialog
+- Moved the _Fear & Greed Index_ (market mood) to a new tab on the home page
 
 ## 1.73.0 - 10.11.2021
 

apps/client/src/app/components/performance-chart-dialog/interfaces/interfaces.ts

@@ -2,6 +2,5 @@ import { LineChartItem } from '@ghostfolio/ui/line-chart/interfaces/line-chart.i
 
 export interface PositionDetailDialogParams {
   deviceType: string;
-  fearAndGreedIndex: number;
   historicalDataItems: LineChartItem[];
 }

apps/client/src/app/components/performance-chart-dialog/performance-chart-dialog.component.ts

@@ -22,13 +22,11 @@ import { PositionDetailDialogParams } from './interfaces/interfaces';
 })
 export class PerformanceChartDialog {
   public benchmarkDataItems: LineChartItem[];
-  public benchmarkLabel = 'S&P 500';
   public benchmarkSymbol = 'VOO';
   public currency: string;
   public firstBuyDate: string;
   public marketPrice: number;
   public historicalDataItems: LineChartItem[];
-  public title: string;
 
   private unsubscribeSubject = new Subject<void>();
 
@@ -83,8 +81,6 @@ export class PerformanceChartDialog {
 
         this.changeDetectorRef.markForCheck();
       });
-
-    this.title = `Performance vs. ${this.benchmarkLabel}`;
   }
 
   public onClose(): void {

apps/client/src/app/components/performance-chart-dialog/performance-chart-dialog.html

@@ -1,7 +1,7 @@
 <gf-dialog-header
   mat-dialog-title
+  title="Performance"
   [deviceType]="data.deviceType"
-  [title]="title"
   (closeButtonClicked)="onClose()"
 ></gf-dialog-header>
 
@@ -11,7 +11,6 @@
       class="mb-4"
       symbol="Performance"
       [benchmarkDataItems]="benchmarkDataItems"
-      [benchmarkLabel]="benchmarkLabel"
       [historicalDataItems]="historicalDataItems"
       [showGradient]="true"
       [showLegend]="true"
@@ -19,13 +18,6 @@
       [showYAxis]="false"
     ></gf-line-chart>
   </div>
-
-  <div *ngIf="data.fearAndGreedIndex" class="container p-0">
-    <gf-fear-and-greed-index
-      class="d-flex flex-column justify-content-center"
-      [fearAndGreedIndex]="data.fearAndGreedIndex"
-    ></gf-fear-and-greed-index>
-  </div>
 </div>
 
 <gf-dialog-footer

apps/client/src/app/components/performance-chart-dialog/performance-chart-dialog.module.ts

@@ -8,7 +8,6 @@ import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { GfDialogFooterModule } from '../dialog-footer/dialog-footer.module';
 import { GfDialogHeaderModule } from '../dialog-header/dialog-header.module';
-import { GfFearAndGreedIndexModule } from '../fear-and-greed-index/fear-and-greed-index.module';
 import { PerformanceChartDialog } from './performance-chart-dialog.component';
 
 @NgModule({
@@ -18,7 +17,6 @@ import { PerformanceChartDialog } from './performance-chart-dialog.component';
     CommonModule,
     GfDialogFooterModule,
     GfDialogHeaderModule,
-    GfFearAndGreedIndexModule,
     GfLineChartModule,
     GfValueModule,
     MatButtonModule,

apps/client/src/app/pages/home/home-page.component.ts

@@ -7,10 +7,7 @@ import {
   OnInit,
   ViewChild
 } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
 import { MatTabChangeEvent } from '@angular/material/tabs';
-import { ActivatedRoute, Router } from '@angular/router';
-import { PerformanceChartDialog } from '@ghostfolio/client/components/performance-chart-dialog/performance-chart-dialog.component';
 import { ToggleOption } from '@ghostfolio/client/components/toggle/interfaces/toggle-option.type';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { ImpersonationStorageService } from '@ghostfolio/client/services/impersonation-storage.service';
@@ -79,21 +76,10 @@ export class HomePageComponent implements OnDestroy, OnInit {
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
     private deviceService: DeviceDetectorService,
-    private dialog: MatDialog,
     private impersonationStorageService: ImpersonationStorageService,
-    private route: ActivatedRoute,
-    private router: Router,
     private settingsStorageService: SettingsStorageService,
     private userService: UserService
   ) {
-    this.routeQueryParams = this.route.queryParams
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((params) => {
-        if (params['performanceChartDialog']) {
-          this.openDialog();
-        }
-      });
-
     this.userService.stateChanged
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((state) => {
@@ -172,25 +158,6 @@ export class HomePageComponent implements OnDestroy, OnInit {
     this.unsubscribeSubject.complete();
   }
 
-  private openDialog(): void {
-    const dialogRef = this.dialog.open(PerformanceChartDialog, {
-      autoFocus: false,
-      data: {
-        deviceType: this.deviceType,
-        fearAndGreedIndex: this.fearAndGreedIndex,
-        historicalDataItems: this.historicalDataItems
-      },
-      width: '50rem'
-    });
-
-    dialogRef
-      .afterClosed()
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe(() => {
-        this.router.navigate(['.'], { relativeTo: this.route });
-      });
-  }
-
   private update() {
     if (this.currentTabIndex === 0) {
       this.isLoadingPerformance = true;

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

@@ -23,12 +23,7 @@
       "
     >
       <div class="row w-100">
-        <a
+        <div class="chart-container col">
-          *ngIf="historicalDataItems?.length !== 0"
-          class="chart-container col"
-          [routerLink]="[]"
-          [queryParams]="{performanceChartDialog: true}"
-        >
           <gf-line-chart
             class="mr-3"
             symbol="Performance"
@@ -38,19 +33,19 @@
             [showXAxis]="false"
             [showYAxis]="false"
           ></gf-line-chart>
-        </a>
+          <div
-        <div
+            *ngIf="historicalDataItems?.length === 0"
-          *ngIf="historicalDataItems?.length === 0"
+            class="
-          class="
+              align-items-center
-            align-items-center
+              chart-container
-            chart-container
+              d-flex
-            d-flex
+              justify-content-center
-            justify-content-center
+              w-100
-            w-100
+            "
-          "
+          >
-        >
+            <div class="d-flex justify-content-center">
-          <div class="d-flex justify-content-center">
+              <gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
-            <gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
+            </div>
           </div>
         </div>
       </div>
@@ -140,4 +135,33 @@
       </div>
     </div>
   </mat-tab>
+  <mat-tab *ngIf="hasPermissionToAccessFearAndGreedIndex">
+    <ng-template mat-tab-label>
+      <ion-icon name="newspaper-outline" size="large"></ion-icon>
+    </ng-template>
+    <div
+      class="
+        align-items-center
+        container
+        d-flex
+        flex-grow-1
+        h-100
+        justify-content-center
+        w-100
+      "
+    >
+      <div class="row w-100">
+        <div class="col-xs-12 col-md-8 offset-md-2">
+          <mat-card class="h-100">
+            <mat-card-content>
+              <gf-fear-and-greed-index
+                class="d-flex justify-content-center"
+                [fearAndGreedIndex]="fearAndGreedIndex"
+              ></gf-fear-and-greed-index>
+            </mat-card-content>
+          </mat-card>
+        </div>
+      </div>
+    </div>
+  </mat-tab>
 </mat-tab-group>

apps/client/src/app/pages/home/home-page.module.ts

@@ -4,6 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
+import { GfFearAndGreedIndexModule } from '@ghostfolio/client/components/fear-and-greed-index/fear-and-greed-index.module';
 import { GfPerformanceChartDialogModule } from '@ghostfolio/client/components/performance-chart-dialog/performance-chart-dialog.module';
 import { GfPortfolioPerformanceModule } from '@ghostfolio/client/components/portfolio-performance/portfolio-performance.module';
 import { GfPortfolioSummaryModule } from '@ghostfolio/client/components/portfolio-summary/portfolio-summary.module';
@@ -20,6 +21,7 @@ import { HomePageComponent } from './home-page.component';
   exports: [],
   imports: [
     CommonModule,
+    GfFearAndGreedIndexModule,
     GfLineChartModule,
     GfNoTransactionsInfoModule,
     GfPerformanceChartDialogModule,