Release 1.75.0 (#469)

* Add value column

* Update changelog

CHANGELOG.md

@@ -5,6 +5,31 @@ 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).
 
+## 1.75.0 - 13.11.2021
+
+### Added
+
+- Added a logo to the log on the server start
+- Added the data gathering progress to the log and the admin control panel
+- Added the value column to the accounts table
+
+## 1.74.0 - 11.11.2021
+
+### 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
+
+### Changed
+
+- Improved the info messages to add the first transaction
+
+### Fixed
+
+- Fixed the skeleton loader of the portfolio holdings
+
 ## 1.72.0 - 08.11.2021
 
 ### Changed

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

@@ -1,3 +1,4 @@
+import { PortfolioService } from '@ghostfolio/api/app/portfolio/portfolio.service';
 import { UserService } from '@ghostfolio/api/app/user/user.service';
 import { nullifyValuesInObjects } from '@ghostfolio/api/helper/object.helper';
 import { ImpersonationService } from '@ghostfolio/api/services/impersonation.service';
@@ -6,7 +7,10 @@ import {
   hasPermission,
   permissions
 } from '@ghostfolio/common/permissions';
-import type { RequestWithUser } from '@ghostfolio/common/types';
+import type {
+  AccountWithValue,
+  RequestWithUser
+} from '@ghostfolio/common/types';
 import {
   Body,
   Controller,
@@ -34,6 +38,7 @@ export class AccountController {
   public constructor(
     private readonly accountService: AccountService,
     private readonly impersonationService: ImpersonationService,
+    private readonly portfolioService: PortfolioService,
     @Inject(REQUEST) private readonly request: RequestWithUser,
     private readonly userService: UserService
   ) {}
@@ -85,14 +90,14 @@ export class AccountController {
   @UseGuards(AuthGuard('jwt'))
   public async getAllAccounts(
     @Headers('impersonation-id') impersonationId
-  ): Promise<AccountModel[]> {
+  ): Promise<AccountWithValue[]> {
     const impersonationUserId =
       await this.impersonationService.validateImpersonationId(
         impersonationId,
         this.request.user.id
       );
 
-    let accounts = await this.accountService.getAccounts(
+    let accounts = await this.portfolioService.getAccounts(
       impersonationUserId || this.request.user.id
     );
 
@@ -102,9 +107,11 @@ export class AccountController {
     ) {
       accounts = nullifyValuesInObjects(accounts, [
         'balance',
+        'convertedBalance',
         'fee',
         'quantity',
-        'unitPrice'
+        'unitPrice',
+        'value'
       ]);
     }
 

apps/api/src/app/account/account.module.ts

@@ -1,3 +1,4 @@
+import { PortfolioModule } from '@ghostfolio/api/app/portfolio/portfolio.module';
 import { RedisCacheModule } from '@ghostfolio/api/app/redis-cache/redis-cache.module';
 import { UserModule } from '@ghostfolio/api/app/user/user.module';
 import { ConfigurationModule } from '@ghostfolio/api/services/configuration.module';
@@ -11,16 +12,17 @@ import { AccountController } from './account.controller';
 import { AccountService } from './account.service';
 
 @Module({
+  controllers: [AccountController],
   imports: [
     ConfigurationModule,
     DataProviderModule,
     ExchangeRateDataModule,
     ImpersonationModule,
-    RedisCacheModule,
+    PortfolioModule,
     PrismaModule,
+    RedisCacheModule,
     UserModule
   ],
-  controllers: [AccountController],
   providers: [AccountService]
 })
 export class AccountModule {}

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

@@ -20,6 +20,8 @@ export class AdminService {
 
   public async get(): Promise<AdminData> {
     return {
+      dataGatheringProgress:
+        await this.dataGatheringService.getDataGatheringProgress(),
       exchangeRates: this.exchangeRateDataService
         .getCurrencies()
         .filter((currency) => {
@@ -58,7 +60,7 @@ export class AdminService {
       return 'IN_PROGRESS';
     }
 
-    return null;
+    return undefined;
   }
 
   private async getUsersWithAnalytics(): Promise<AdminData['users']> {

apps/api/src/app/portfolio/interfaces/portfolio-position-detail.interface.ts

@@ -1,4 +1,8 @@
+import { AssetClass, AssetSubClass } from '@prisma/client';
+
 export interface PortfolioPositionDetail {
+  assetClass?: AssetClass;
+  assetSubClass?: AssetSubClass;
   averagePrice: number;
   currency: string;
   firstBuyDate: string;

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

@@ -18,6 +18,7 @@ import { PortfolioService } from './portfolio.service';
 import { RulesService } from './rules.service';
 
 @Module({
+  exports: [PortfolioService],
   imports: [
     AccessModule,
     ConfigurationModule,

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

@@ -1,5 +1,3 @@
-// TODO ///////////
-
 import { AccountService } from '@ghostfolio/api/app/account/account.service';
 import { CashDetails } from '@ghostfolio/api/app/account/interfaces/cash-details.interface';
 import { OrderService } from '@ghostfolio/api/app/order/order.service';
@@ -39,6 +37,7 @@ import {
 } from '@ghostfolio/common/interfaces';
 import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface';
 import type {
+  AccountWithValue,
   DateRange,
   OrderWithAccount,
   RequestWithUser
@@ -81,6 +80,36 @@ export class PortfolioService {
     private readonly symbolProfileService: SymbolProfileService
   ) {}
 
+  public async getAccounts(aUserId: string): Promise<AccountWithValue[]> {
+    const [accounts, details] = await Promise.all([
+      this.accountService.accounts({
+        include: { Order: true, Platform: true },
+        orderBy: { name: 'asc' },
+        where: { userId: aUserId }
+      }),
+      this.getDetails(aUserId, aUserId)
+    ]);
+
+    const userCurrency = this.request.user.Settings.currency;
+
+    return accounts.map((account) => {
+      const result = {
+        ...account,
+        convertedBalance: this.exchangeRateDataService.toCurrency(
+          account.balance,
+          account.currency,
+          userCurrency
+        ),
+        transactionCount: account.Order.length,
+        value: details.accounts[account.name].current
+      };
+
+      delete result.Order;
+
+      return result;
+    });
+  }
+
   public async getInvestments(
     aImpersonationId: string
   ): Promise<InvestmentItem[]> {
@@ -258,7 +287,7 @@ export class PortfolioService {
       value: totalValue
     });
 
-    const accounts = await this.getAccounts(
+    const accounts = await this.getValueOfAccounts(
       orders,
       portfolioItemsNow,
       userCurrency,
@@ -299,6 +328,8 @@ export class PortfolioService {
       };
     }
 
+    const assetClass = orders[0].SymbolProfile?.assetClass;
+    const assetSubClass = orders[0].SymbolProfile?.assetSubClass;
     const positionCurrency = orders[0].currency;
     const name = orders[0].SymbolProfile?.name ?? '';
 
@@ -412,6 +443,8 @@ export class PortfolioService {
       }
 
       return {
+        assetClass,
+        assetSubClass,
         currency,
         firstBuyDate,
         grossPerformance,
@@ -467,6 +500,8 @@ export class PortfolioService {
       }
 
       return {
+        assetClass,
+        assetSubClass,
         marketPrice,
         maxPrice,
         minPrice,
@@ -613,7 +648,7 @@ export class PortfolioService {
         currentGrossPerformancePercent,
         currentNetPerformance,
         currentNetPerformancePercent,
-        currentValue: currentValue
+        currentValue
       }
     };
   }
@@ -663,7 +698,7 @@ export class PortfolioService {
     for (const position of currentPositions.positions) {
       portfolioItemsNow[position.symbol] = position;
     }
-    const accounts = await this.getAccounts(
+    const accounts = await this.getValueOfAccounts(
       orders,
       portfolioItemsNow,
       currency,
@@ -863,7 +898,7 @@ export class PortfolioService {
     };
   }
 
-  private async getAccounts(
+  private async getValueOfAccounts(
     orders: OrderWithAccount[],
     portfolioItemsNow: { [p: string]: TimelinePosition },
     userCurrency: string,
@@ -878,20 +913,15 @@ export class PortfolioService {
         return accountId === account.id;
       });
 
-      if (ordersByAccount.length <= 0) {
-        // Add account without orders
-        const balance = this.exchangeRateDataService.toCurrency(
-          account.balance,
-          account.currency,
-          userCurrency
-        );
-        accounts[account.name] = {
-          current: balance,
-          original: balance
-        };
-
-        continue;
-      }
+      const convertedBalance = this.exchangeRateDataService.toCurrency(
+        account.balance,
+        account.currency,
+        userCurrency
+      );
+      accounts[account.name] = {
+        current: convertedBalance,
+        original: convertedBalance
+      };
 
       for (const order of ordersByAccount) {
         let currentValueOfSymbol = this.exchangeRateDataService.toCurrency(

apps/api/src/main.ts

@@ -2,6 +2,7 @@ import { Logger, ValidationPipe } from '@nestjs/common';
 import { NestFactory } from '@nestjs/core';
 
 import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
 
 async function bootstrap() {
   const app = await NestFactory.create(AppModule);
@@ -18,8 +19,23 @@ async function bootstrap() {
 
   const port = process.env.PORT || 3333;
   await app.listen(port, () => {
-    Logger.log(`Listening at http://localhost:${port}`);
+    logLogo();
+    Logger.log(`Listening at http://localhost:${port}`, '', false);
+    Logger.log('', '', false);
   });
 }
 
+function logLogo() {
+  Logger.log('   ________               __  ____      ___', '', false);
+  Logger.log('  / ____/ /_  ____  _____/ /_/ __/___  / (_)___', '', false);
+  Logger.log(' / / __/ __ \\/ __ \\/ ___/ __/ /_/ __ \\/ / / __ \\', '', false);
+  Logger.log('/ /_/ / / / / /_/ (__  ) /_/ __/ /_/ / / / /_/ /', '', false);
+  Logger.log(
+    `\\____/_/ /_/\\____/____/\\__/_/  \\____/_/_/\\____/ ${environment.version}`,
+    '',
+    false
+  );
+  Logger.log('', '', false);
+}
+
 bootstrap();

apps/api/src/services/data-gathering.service.ts

@@ -18,7 +18,6 @@ import {
 
 import { ConfigurationService } from './configuration.service';
 import { DataProviderService } from './data-provider/data-provider.service';
-import { GhostfolioScraperApiService } from './data-provider/ghostfolio-scraper-api/ghostfolio-scraper-api.service';
 import { DataEnhancerInterface } from './data-provider/interfaces/data-enhancer.interface';
 import { ExchangeRateDataService } from './exchange-rate-data.service';
 import { IDataGatheringItem } from './interfaces/interfaces';
@@ -26,13 +25,14 @@ import { PrismaService } from './prisma.service';
 
 @Injectable()
 export class DataGatheringService {
+  private dataGatheringProgress: number;
+
   public constructor(
     private readonly configurationService: ConfigurationService,
     @Inject('DataEnhancers')
     private readonly dataEnhancers: DataEnhancerInterface[],
     private readonly dataProviderService: DataProviderService,
     private readonly exchangeRateDataService: ExchangeRateDataService,
-    private readonly ghostfolioScraperApi: GhostfolioScraperApiService,
     private readonly prismaService: PrismaService,
     private readonly symbolProfileService: SymbolProfileService
   ) {}
@@ -204,8 +204,11 @@ export class DataGatheringService {
 
   public async gatherSymbols(aSymbolsWithStartDate: IDataGatheringItem[]) {
     let hasError = false;
+    let symbolCounter = 0;
 
     for (const { dataSource, date, symbol } of aSymbolsWithStartDate) {
+      this.dataGatheringProgress = symbolCounter / aSymbolsWithStartDate.length;
+
       try {
         const historicalData = await this.dataProviderService.getHistoricalRaw(
           [{ dataSource, symbol }],
@@ -263,6 +266,16 @@ export class DataGatheringService {
         hasError = true;
         Logger.error(error);
       }
+
+      if (symbolCounter > 0 && symbolCounter % 100 === 0) {
+        Logger.log(
+          `Data gathering progress: ${(
+            this.dataGatheringProgress * 100
+          ).toFixed(2)}%`
+        );
+      }
+
+      symbolCounter += 1;
     }
 
     await this.exchangeRateDataService.initialize();
@@ -272,6 +285,16 @@ export class DataGatheringService {
     }
   }
 
+  public async getDataGatheringProgress() {
+    const isInProgress = await this.getIsInProgress();
+
+    if (isInProgress) {
+      return this.dataGatheringProgress;
+    }
+
+    return undefined;
+  }
+
   public async getIsInProgress() {
     return await this.prismaService.property.findUnique({
       where: { key: 'LOCKED_DATA_GATHERING' }

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

@@ -17,6 +17,20 @@
     </td>
   </ng-container>
 
+  <ng-container matColumnDef="currency">
+    <th
+      *matHeaderCellDef
+      class="d-none d-lg-table-cell px-1"
+      i18n
+      mat-header-cell
+    >
+      Currency
+    </th>
+    <td *matCellDef="let element" class="d-none d-lg-table-cell px-1" mat-cell>
+      {{ element.currency }}
+    </td>
+  </ng-container>
+
   <ng-container matColumnDef="platform">
     <th
       *matHeaderCellDef
@@ -45,7 +59,9 @@
       <span class="d-none d-sm-block" i18n>Transactions</span>
     </th>
     <td *matCellDef="let element" class="px-1 text-right" mat-cell>
-      {{ element.transactionCount }}
+      <ng-container *ngIf="element.accountType === 'SECURITIES'">{{
+        element.transactionCount
+      }}</ng-container>
     </td>
   </ng-container>
 
@@ -56,9 +72,23 @@
     <td *matCellDef="let element" class="px-1 text-right" mat-cell>
       <gf-value
         class="d-inline-block justify-content-end"
-        [currency]="element.currency"
+        [isCurrency]="true"
         [locale]="locale"
-        [value]="element.balance"
+        [value]="element.convertedBalance"
+      ></gf-value>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="value">
+    <th *matHeaderCellDef class="px-1 text-right" i18n mat-header-cell>
+      Value
+    </th>
+    <td *matCellDef="let element" class="px-1 text-right" mat-cell>
+      <gf-value
+        class="d-inline-block justify-content-end"
+        [isCurrency]="true"
+        [locale]="locale"
+        [value]="element.value"
       ></gf-value>
     </td>
   </ng-container>

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

@@ -41,7 +41,14 @@ export class AccountsTableComponent implements OnChanges, OnDestroy, OnInit {
   public ngOnInit() {}
 
   public ngOnChanges() {
-    this.displayedColumns = ['account', 'platform', 'transactions', 'balance'];
+    this.displayedColumns = [
+      'account',
+      'currency',
+      'platform',
+      'transactions',
+      'balance',
+      'value'
+    ];
 
     if (this.showActions) {
       this.displayedColumns.push('actions');

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/components/position/position-detail-dialog/position-detail-dialog.component.ts

@@ -9,6 +9,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { DataService } from '@ghostfolio/client/services/data.service';
 import { DATE_FORMAT } from '@ghostfolio/common/helper';
 import { LineChartItem } from '@ghostfolio/ui/line-chart/interfaces/line-chart.interface';
+import { AssetSubClass } from '@prisma/client';
 import { format, isSameMonth, isToday, parseISO } from 'date-fns';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -23,6 +24,7 @@ import { PositionDetailDialogParams } from './interfaces/interfaces';
   styleUrls: ['./position-detail-dialog.component.scss']
 })
 export class PositionDetailDialog implements OnDestroy {
+  public assetSubClass: AssetSubClass;
   public averagePrice: number;
   public benchmarkDataItems: LineChartItem[];
   public currency: string;
@@ -38,6 +40,7 @@ export class PositionDetailDialog implements OnDestroy {
   public netPerformance: number;
   public netPerformancePercent: number;
   public quantity: number;
+  public quantityPrecision = 2;
   public symbol: string;
   public transactionCount: number;
 
@@ -54,6 +57,7 @@ export class PositionDetailDialog implements OnDestroy {
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(
         ({
+          assetSubClass,
           averagePrice,
           currency,
           firstBuyDate,
@@ -71,6 +75,7 @@ export class PositionDetailDialog implements OnDestroy {
           symbol,
           transactionCount
         }) => {
+          this.assetSubClass = assetSubClass;
           this.averagePrice = averagePrice;
           this.benchmarkDataItems = [];
           this.currency = currency;
@@ -146,6 +151,18 @@ export class PositionDetailDialog implements OnDestroy {
             this.benchmarkDataItems[0].value = this.averagePrice;
           }
 
+          if (Number.isInteger(this.quantity)) {
+            this.quantityPrecision = 0;
+          } else if (assetSubClass === 'CRYPTOCURRENCY') {
+            if (this.quantity < 1) {
+              this.quantityPrecision = 7;
+            } else if (this.quantity < 1000) {
+              this.quantityPrecision = 5;
+            } else if (this.quantity > 10000000) {
+              this.quantityPrecision = 0;
+            }
+          }
+
           this.changeDetectorRef.markForCheck();
         }
       );

apps/client/src/app/components/position/position-detail-dialog/position-detail-dialog.html

@@ -82,7 +82,7 @@
           label="Quantity"
           size="medium"
           [locale]="data.locale"
-          [precision]="2"
+          [precision]="quantityPrecision"
           [value]="quantity"
         ></gf-value>
       </div>

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

@@ -103,7 +103,9 @@
 ></ngx-skeleton-loader>
 
 <div *ngIf="dataSource.data.length === 0 && !isLoading" class="p-3 text-center">
-  <gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
+  <gf-no-transactions-info-indicator
+    [hasBorder]="false"
+  ></gf-no-transactions-info-indicator>
 </div>
 
 <div

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

@@ -24,7 +24,9 @@
           ></gf-position>
         </ng-container>
         <div *ngIf="!hasPositions" class="p-3 text-center">
-          <gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
+          <gf-no-transactions-info-indicator
+            [hasBorder]="false"
+          ></gf-no-transactions-info-indicator>
         </div>
       </ng-container>
     </div>

apps/client/src/app/components/rules/rules.component.html

@@ -2,7 +2,9 @@
   <div class="row no-gutters">
     <div class="col">
       <mat-card *ngIf="rules === null" class="my-2 text-center">
-        <gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
+        <gf-no-transactions-info-indicator
+          [hasBorder]="false"
+        ></gf-no-transactions-info-indicator>
       </mat-card>
 
       <gf-rule *ngIf="rules === undefined" [isLoading]="true"></gf-rule>

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

@@ -270,3 +270,9 @@
     width: '100%'
   }"
 ></ngx-skeleton-loader>
+
+<div *ngIf="dataSource.data.length === 0 && !isLoading" class="p-3 text-center">
+  <gf-no-transactions-info-indicator
+    [hasBorder]="false"
+  ></gf-no-transactions-info-indicator>
+</div>

apps/client/src/app/components/transactions-table/transactions-table.module.ts

@@ -10,6 +10,7 @@ import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
 import { GfSymbolModule } from '@ghostfolio/client/pipes/symbol/symbol.module';
+import { GfNoTransactionsInfoModule } from '@ghostfolio/ui/no-transactions-info';
 import { GfValueModule } from '@ghostfolio/ui/value';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
@@ -22,6 +23,7 @@ import { TransactionsTableComponent } from './transactions-table.component';
   exports: [TransactionsTableComponent],
   imports: [
     CommonModule,
+    GfNoTransactionsInfoModule,
     GfPositionDetailDialogModule,
     GfSymbolIconModule,
     GfSymbolModule,

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

@@ -22,6 +22,7 @@ import { takeUntil } from 'rxjs/operators';
 })
 export class AdminPageComponent implements OnDestroy, OnInit {
   public dataGatheringInProgress: boolean;
+  public dataGatheringProgress: number;
   public defaultDateFormat = DEFAULT_DATE_FORMAT;
   public exchangeRates: { label1: string; label2: string; value: number }[];
   public lastDataGathering: string;
@@ -134,12 +135,14 @@ export class AdminPageComponent implements OnDestroy, OnInit {
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(
         ({
+          dataGatheringProgress,
           exchangeRates,
           lastDataGathering,
           transactionCount,
           userCount,
           users
         }) => {
+          this.dataGatheringProgress = dataGatheringProgress;
           this.exchangeRates = exchangeRates;
           this.users = users;
 

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

@@ -35,14 +35,15 @@
             </div>
           </div>
           <div class="d-flex my-3">
-            <div class="w-50" i18n>Last Data Gathering</div>
+            <div class="w-50" i18n>Data Gathering</div>
             <div class="w-50">
               <div>
                 <ng-container *ngIf="lastDataGathering"
                   >{{ lastDataGathering }}</ng-container
                 >
                 <ng-container *ngIf="dataGatheringInProgress" i18n
-                  >In Progress</ng-container
+                  >In Progress ({{ dataGatheringProgress | percent : '1.2-2'
+                  }})</ng-container
                 >
               </div>
               <div class="mt-2 overflow-hidden">

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';
@@ -61,7 +58,6 @@ export class HomePageComponent implements OnDestroy, OnInit {
   public hasImpersonationId: boolean;
   public hasPermissionToAccessFearAndGreedIndex: boolean;
   public hasPermissionToCreateOrder: boolean;
-  public hasPositions: boolean;
   public historicalDataItems: LineChartItem[];
   public isLoadingPerformance = true;
   public isLoadingSummary = true;
@@ -80,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) => {
@@ -173,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;
@@ -225,7 +191,6 @@ export class HomePageComponent implements OnDestroy, OnInit {
         .pipe(takeUntil(this.unsubscribeSubject))
         .subscribe((response) => {
           this.positions = response.positions;
-          this.hasPositions = this.positions?.length > 0;
 
           this.changeDetectorRef.markForCheck();
         });

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

@@ -23,12 +23,7 @@
       "
     >
       <div class="row w-100">
-        <a
-          *ngIf="historicalDataItems?.length !== 0"
-          class="chart-container col"
-          [routerLink]="[]"
-          [queryParams]="{performanceChartDialog: true}"
-        >
+        <div class="chart-container col">
           <gf-line-chart
             class="mr-3"
             symbol="Performance"
@@ -38,19 +33,19 @@
             [showXAxis]="false"
             [showYAxis]="false"
           ></gf-line-chart>
-        </a>
-        <div
-          *ngIf="historicalDataItems?.length === 0"
-          class="
-            align-items-center
-            chart-container
-            d-flex
-            justify-content-center
-            w-100
-          "
-        >
-          <div class="d-flex justify-content-center">
-            <gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
+          <div
+            *ngIf="historicalDataItems?.length === 0"
+            class="
+              align-items-center
+              chart-container
+              d-flex
+              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>
@@ -92,33 +87,25 @@
               (change)="onChangeDateRange($event.value)"
             ></gf-toggle>
           </div>
-          <ng-container *ngIf="hasPositions === true">
-            <mat-card class="p-0">
-              <mat-card-content>
-                <gf-positions
-                  [baseCurrency]="user?.settings?.baseCurrency"
-                  [deviceType]="deviceType"
-                  [locale]="user?.settings?.locale"
-                  [positions]="positions"
-                  [range]="dateRange"
-                ></gf-positions>
-              </mat-card-content>
-            </mat-card>
-            <div *ngIf="hasPermissionToCreateOrder" class="text-center">
-              <a
-                class="mt-3"
-                i18n
-                mat-button
-                [routerLink]="['/portfolio', 'transactions']"
-                >Manage Transactions...</a
-              >
-            </div>
-          </ng-container>
-          <div
-            *ngIf="hasPositions === false"
-            class="d-flex justify-content-center"
-          >
-            <gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
+          <mat-card class="p-0">
+            <mat-card-content>
+              <gf-positions
+                [baseCurrency]="user?.settings?.baseCurrency"
+                [deviceType]="deviceType"
+                [locale]="user?.settings?.locale"
+                [positions]="positions"
+                [range]="dateRange"
+              ></gf-positions>
+            </mat-card-content>
+          </mat-card>
+          <div *ngIf="hasPermissionToCreateOrder" class="text-center">
+            <a
+              class="mt-3"
+              i18n
+              mat-button
+              [routerLink]="['/portfolio', 'transactions']"
+              >Manage Transactions...</a
+            >
           </div>
         </div>
       </div>
@@ -148,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,

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

@@ -38,7 +38,6 @@ export class ZenPageComponent implements AfterViewInit, OnDestroy, OnInit {
   public deviceType: string;
   public hasImpersonationId: boolean;
   public hasPermissionToCreateOrder: boolean;
-  public hasPositions: boolean;
   public historicalDataItems: LineChartItem[];
   public isLoadingPerformance = true;
   public performance: PortfolioPerformance;
@@ -140,7 +139,6 @@ export class ZenPageComponent implements AfterViewInit, OnDestroy, OnInit {
         .pipe(takeUntil(this.unsubscribeSubject))
         .subscribe((response) => {
           this.positions = response.positions;
-          this.hasPositions = this.positions?.length > 0;
 
           this.changeDetectorRef.markForCheck();
         });

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

@@ -65,35 +65,25 @@
       <h3 class="d-flex justify-content-center mb-3" i18n>Holdings</h3>
       <div class="row">
         <div class="align-items-center col">
-          <ng-container *ngIf="hasPositions === true">
-            <mat-card class="p-0">
-              <mat-card-content>
-                <gf-positions
-                  [baseCurrency]="user?.settings?.baseCurrency"
-                  [deviceType]="deviceType"
-                  [locale]="user?.settings?.locale"
-                  [positions]="positions"
-                  [range]="dateRange"
-                ></gf-positions>
-              </mat-card-content>
-            </mat-card>
-            <div *ngIf="hasPermissionToCreateOrder" class="text-center">
-              <a
-                class="mt-3"
-                i18n
-                mat-button
-                [routerLink]="['/portfolio', 'transactions']"
-                >Manage Transactions...</a
-              >
-            </div>
-          </ng-container>
-          <div
-            *ngIf="hasPositions === false"
-            class="d-flex justify-content-center"
-          >
-            <div>
-              <gf-no-transactions-info-indicator></gf-no-transactions-info-indicator>
-            </div>
+          <mat-card class="p-0">
+            <mat-card-content>
+              <gf-positions
+                [baseCurrency]="user?.settings?.baseCurrency"
+                [deviceType]="deviceType"
+                [locale]="user?.settings?.locale"
+                [positions]="positions"
+                [range]="dateRange"
+              ></gf-positions>
+            </mat-card-content>
+          </mat-card>
+          <div *ngIf="hasPermissionToCreateOrder" class="text-center">
+            <a
+              class="mt-3"
+              i18n
+              mat-button
+              [routerLink]="['/portfolio', 'transactions']"
+              >Manage Transactions...</a
+            >
           </div>
         </div>
       </div>

apps/client/src/app/services/data.service.ts

@@ -29,7 +29,7 @@ import {
 } from '@ghostfolio/common/interfaces';
 import { InvestmentItem } from '@ghostfolio/common/interfaces/investment-item.interface';
 import { permissions } from '@ghostfolio/common/permissions';
-import { DateRange } from '@ghostfolio/common/types';
+import { AccountWithValue, DateRange } from '@ghostfolio/common/types';
 import {
   Account as AccountModel,
   DataSource,
@@ -62,7 +62,7 @@ export class DataService {
   }
 
   public fetchAccounts() {
-    return this.http.get<AccountModel[]>('/api/account');
+    return this.http.get<AccountWithValue[]>('/api/account');
   }
 
   public fetchAdminData() {

libs/common/src/lib/interfaces/admin-data.interface.ts

@@ -1,6 +1,7 @@
 export interface AdminData {
+  dataGatheringProgress?: number;
   exchangeRates: { label1: string; label2: string; value: number }[];
-  lastDataGathering: Date | 'IN_PROGRESS';
+  lastDataGathering?: Date | 'IN_PROGRESS';
   transactionCount: number;
   userCount: number;
   users: {

libs/common/src/lib/types/account-with-value.type.ts

@@ -0,0 +1,6 @@
+import { Account as AccountModel } from '@prisma/client';
+
+export type AccountWithValue = AccountModel & {
+  convertedBalance: number;
+  value: number;
+};

libs/common/src/lib/types/index.ts

@@ -1,4 +1,5 @@
 import type { AccessWithGranteeUser } from './access-with-grantee-user.type';
+import { AccountWithValue } from './account-with-value.type';
 import type { DateRange } from './date-range.type';
 import type { Granularity } from './granularity.type';
 import type { OrderWithAccount } from './order-with-account.type';
@@ -6,6 +7,7 @@ import type { RequestWithUser } from './request-with-user.type';
 
 export type {
   AccessWithGranteeUser,
+  AccountWithValue,
   DateRange,
   Granularity,
   OrderWithAccount,

libs/ui/src/lib/no-transactions-info/no-transactions-info.component.html

@@ -6,6 +6,7 @@
     class="align-items-center justify-content-center"
     color="primary"
     [routerLink]="['/portfolio', 'transactions']"
+    [queryParams]="{ createDialog: true }"
     mat-button
   >
     <span i18n>Time to add your first transaction.</span>

libs/ui/src/lib/no-transactions-info/no-transactions-info.component.scss

@@ -1,8 +1,11 @@
 :host {
-  border: 1px solid rgba(var(--dark-dividers));
-  border-radius: 0.25rem;
   display: block;
 
+  &.has-border {
+    border: 1px solid rgba(var(--dark-dividers));
+    border-radius: 0.25rem;
+  }
+
   gf-logo {
     opacity: 0.25;
   }

libs/ui/src/lib/no-transactions-info/no-transactions-info.component.ts

@@ -1,4 +1,9 @@
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  Input
+} from '@angular/core';
 
 @Component({
   selector: 'gf-no-transactions-info-indicator',
@@ -6,8 +11,8 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
   templateUrl: './no-transactions-info.component.html',
   styleUrls: ['./no-transactions-info.component.scss']
 })
-export class NoTransactionsInfoComponent implements OnInit {
-  public constructor() {}
+export class NoTransactionsInfoComponent {
+  @HostBinding('class.has-border') @Input() hasBorder = true;
 
-  public ngOnInit() {}
+  public constructor() {}
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ghostfolio",
-  "version": "1.72.0",
+  "version": "1.75.0",
   "homepage": "https://ghostfol.io",
   "license": "AGPL-3.0",
   "scripts": {