Add benchmarks dialog in markets overview

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

@@ -1,9 +1,11 @@
+import { AdminService } from '@ghostfolio/api/app/admin/admin.service';
 import { HasPermission } from '@ghostfolio/api/decorators/has-permission.decorator';
 import { HasPermissionGuard } from '@ghostfolio/api/guards/has-permission.guard';
 import { getInterval } from '@ghostfolio/api/helper/portfolio.helper';
 import { TransformDataSourceInRequestInterceptor } from '@ghostfolio/api/interceptors/transform-data-source-in-request/transform-data-source-in-request.interceptor';
 import { TransformDataSourceInResponseInterceptor } from '@ghostfolio/api/interceptors/transform-data-source-in-response/transform-data-source-in-response.interceptor';
 import type {
+  AdminMarketDataDetails,
   BenchmarkMarketDataDetails,
   BenchmarkResponse,
   UniqueAsset
@@ -28,12 +30,14 @@ import { REQUEST } from '@nestjs/core';
 import { AuthGuard } from '@nestjs/passport';
 import { DataSource } from '@prisma/client';
 import { StatusCodes, getReasonPhrase } from 'http-status-codes';
+import { pick } from 'lodash';
 
 import { BenchmarkService } from './benchmark.service';
 
 @Controller('benchmark')
 export class BenchmarkController {
   public constructor(
+    private readonly adminService: AdminService,
     private readonly benchmarkService: BenchmarkService,
     @Inject(REQUEST) private readonly request: RequestWithUser
   ) {}
@@ -102,10 +106,27 @@ export class BenchmarkController {
     };
   }
 
+  @Get(':dataSource/:symbol')
+  @UseGuards(AuthGuard('jwt'), HasPermissionGuard)
+  @UseInterceptors(TransformDataSourceInRequestInterceptor)
+  @UseInterceptors(TransformDataSourceInResponseInterceptor)
+  public async getBenchmarkMarketData(
+    @Param('dataSource') dataSource: DataSource,
+    @Param('symbol') symbol: string
+  ): Promise<AdminMarketDataDetails> {
+    const { assetProfile, marketData } =
+      await this.adminService.getMarketDataBySymbol({ dataSource, symbol });
+
+    return {
+      marketData,
+      assetProfile: pick(assetProfile, ['dataSource', 'name', 'symbol'])
+    };
+  }
+
   @Get(':dataSource/:symbol/:startDateString')
   @UseGuards(AuthGuard('jwt'), HasPermissionGuard)
   @UseInterceptors(TransformDataSourceInRequestInterceptor)
-  public async getBenchmarkMarketDataBySymbol(
+  public async getBenchmarkMarketDataForUser(
     @Param('dataSource') dataSource: DataSource,
     @Param('startDateString') startDateString: string,
     @Param('symbol') symbol: string,
@@ -117,7 +138,7 @@ export class BenchmarkController {
     );
     const userCurrency = this.request.user.Settings.settings.baseCurrency;
 
-    return this.benchmarkService.getMarketDataBySymbol({
+    return this.benchmarkService.getMarketDataForUser({
       dataSource,
       endDate,
       startDate,

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

@@ -1,4 +1,6 @@
+import { AdminModule } from '@ghostfolio/api/app/admin/admin.module';
 import { RedisCacheModule } from '@ghostfolio/api/app/redis-cache/redis-cache.module';
+import { SubscriptionModule } from '@ghostfolio/api/app/subscription/subscription.module';
 import { SymbolModule } from '@ghostfolio/api/app/symbol/symbol.module';
 import { TransformDataSourceInRequestModule } from '@ghostfolio/api/interceptors/transform-data-source-in-request/transform-data-source-in-request.module';
 import { TransformDataSourceInResponseModule } from '@ghostfolio/api/interceptors/transform-data-source-in-response/transform-data-source-in-response.module';
@@ -18,12 +20,14 @@ import { BenchmarkService } from './benchmark.service';
   controllers: [BenchmarkController],
   exports: [BenchmarkService],
   imports: [
+    AdminModule,
     DataProviderModule,
     ExchangeRateDataModule,
     MarketDataModule,
     PrismaModule,
     PropertyModule,
     RedisCacheModule,
+    SubscriptionModule,
     SymbolModule,
     SymbolProfileModule,
     TransformDataSourceInRequestModule,

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

@@ -153,6 +153,7 @@ export class BenchmarkService {
       }
 
       return {
+        dataSource: benchmarkAssetProfiles[index].dataSource,
         marketCondition: this.getMarketCondition(
           performancePercentFromAllTimeHigh
         ),
@@ -163,6 +164,7 @@ export class BenchmarkService {
             performancePercent: performancePercentFromAllTimeHigh
           }
         },
+        symbol: benchmarkAssetProfiles[index].symbol,
         trend50d: benchmarkTrends[index].trend50d,
         trend200d: benchmarkTrends[index].trend200d
       };
@@ -213,7 +215,7 @@ export class BenchmarkService {
       .sort((a, b) => a.name.localeCompare(b.name));
   }
 
-  public async getMarketDataBySymbol({
+  public async getMarketDataForUser({
     dataSource,
     endDate = new Date(),
     startDate,

apps/client/src/app/components/home-market/home-market.component.ts

@@ -11,6 +11,7 @@ import {
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -21,6 +22,7 @@ import { takeUntil } from 'rxjs/operators';
 })
 export class HomeMarketComponent implements OnDestroy, OnInit {
   public benchmarks: Benchmark[];
+  public deviceType: string;
   public fearAndGreedIndex: number;
   public fearLabel = $localize`Fear`;
   public greedLabel = $localize`Greed`;
@@ -36,8 +38,10 @@ export class HomeMarketComponent implements OnDestroy, OnInit {
   public constructor(
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
+    private deviceService: DeviceDetectorService,
     private userService: UserService
   ) {
+    this.deviceType = this.deviceService.getDeviceInfo().deviceType;
     this.info = this.dataService.fetchInfo();
     this.isLoading = true;
 

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

@@ -32,6 +32,7 @@
     <div class="col-xs-12 col-md-8 offset-md-2">
       <gf-benchmark
         [benchmarks]="benchmarks"
+        [deviceType]="deviceType"
         [locale]="user?.settings?.locale || undefined"
         [user]="user"
       />

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

@@ -285,7 +285,7 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
         this.isLoadingBenchmarkComparator = true;
 
         this.dataService
-          .fetchBenchmarkBySymbol({
+          .fetchBenchmarkForUser({
             dataSource,
             symbol,
             range: this.user?.settings?.dateRange,

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

@@ -19,6 +19,7 @@ import {
   Access,
   AccountBalancesResponse,
   Accounts,
+  AdminMarketDataDetails,
   BenchmarkMarketDataDetails,
   BenchmarkResponse,
   Export,
@@ -284,7 +285,21 @@ export class DataService {
     return this.http.get<Access[]>('/api/v1/access');
   }
 
-  public fetchBenchmarkBySymbol({
+  public fetchBenchmark({
+    dataSource,
+    symbol
+  }: UniqueAsset): Observable<AdminMarketDataDetails> {
+    return this.http.get<any>(`/api/v1/benchmark/${dataSource}/${symbol}`).pipe(
+      map((data) => {
+        for (const item of data.marketData) {
+          item.date = parseISO(item.date);
+        }
+        return data;
+      })
+    );
+  }
+
+  public fetchBenchmarkForUser({
     dataSource,
     range,
     startDate,

libs/common/src/lib/interfaces/benchmark.interface.ts

@@ -3,6 +3,7 @@ import { BenchmarkTrend } from '@ghostfolio/common/types/';
 import { EnhancedSymbolProfile } from './enhanced-symbol-profile.interface';
 
 export interface Benchmark {
+  dataSource: EnhancedSymbolProfile['dataSource'];
   marketCondition: 'ALL_TIME_HIGH' | 'BEAR_MARKET' | 'NEUTRAL_MARKET';
   name: EnhancedSymbolProfile['name'];
   performances: {
@@ -11,6 +12,7 @@ export interface Benchmark {
       performancePercent: number;
     };
   };
+  symbol: EnhancedSymbolProfile['symbol'];
   trend50d: BenchmarkTrend;
   trend200d: BenchmarkTrend;
 }

libs/ui/src/lib/benchmark/benchmark-detail-dialog/benchmark-detail-dialog.component.scss

@@ -0,0 +1,12 @@
+:host {
+  display: block;
+
+  .mat-mdc-dialog-content {
+    max-height: unset;
+
+    gf-line-chart {
+      aspect-ratio: 16 / 9;
+      margin: 0 -0.5rem;
+    }
+  }
+}

libs/ui/src/lib/benchmark/benchmark-detail-dialog/benchmark-detail-dialog.component.ts

@@ -0,0 +1,87 @@
+import { GfDialogFooterModule } from '@ghostfolio/client/components/dialog-footer/dialog-footer.module';
+import { GfDialogHeaderModule } from '@ghostfolio/client/components/dialog-header/dialog-header.module';
+import { DataService } from '@ghostfolio/client/services/data.service';
+import { DATE_FORMAT } from '@ghostfolio/common/helper';
+import {
+  AdminMarketDataDetails,
+  LineChartItem
+} from '@ghostfolio/common/interfaces';
+import { GfLineChartComponent } from '@ghostfolio/ui/line-chart';
+
+import { CommonModule } from '@angular/common';
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Inject,
+  OnDestroy,
+  OnInit
+} from '@angular/core';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef
+} from '@angular/material/dialog';
+import { format } from 'date-fns';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+import { BenchmarkDetailDialogParams } from './interfaces/interfaces';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'd-flex flex-column h-100' },
+  imports: [
+    CommonModule,
+    GfDialogFooterModule,
+    GfDialogHeaderModule,
+    GfLineChartComponent,
+    MatDialogModule
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  selector: 'gf-benchmark-detail-dialog',
+  standalone: true,
+  styleUrls: ['./benchmark-detail-dialog.component.scss'],
+  templateUrl: 'benchmark-detail-dialog.html'
+})
+export class GfBenchmarkDetailDialogComponent implements OnDestroy, OnInit {
+  public assetProfile: AdminMarketDataDetails['assetProfile'];
+  public historicalDataItems: LineChartItem[];
+
+  private unsubscribeSubject = new Subject<void>();
+
+  public constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    private dataService: DataService,
+    public dialogRef: MatDialogRef<GfBenchmarkDetailDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: BenchmarkDetailDialogParams
+  ) {}
+
+  public ngOnInit() {
+    this.dataService
+      .fetchBenchmark({
+        dataSource: this.data.dataSource,
+        symbol: this.data.symbol
+      })
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(({ assetProfile, marketData }) => {
+        this.assetProfile = assetProfile;
+
+        this.historicalDataItems = marketData.map(({ date, marketPrice }) => {
+          return { date: format(date, DATE_FORMAT), value: marketPrice };
+        });
+
+        this.changeDetectorRef.markForCheck();
+      });
+  }
+
+  public onClose() {
+    this.dialogRef.close();
+  }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+}

libs/ui/src/lib/benchmark/benchmark-detail-dialog/benchmark-detail-dialog.html

@@ -0,0 +1,30 @@
+<gf-dialog-header
+  mat-dialog-title
+  position="center"
+  [deviceType]="data.deviceType"
+  [title]="assetProfile?.name"
+  (closeButtonClicked)="onClose()"
+/>
+
+<div class="flex-grow-1" mat-dialog-content>
+  <div class="container p-0">
+    <gf-line-chart
+      benchmarkLabel="Average Unit Price"
+      class="mb-4"
+      [colorScheme]="data.colorScheme"
+      [historicalDataItems]="historicalDataItems"
+      [isAnimated]="true"
+      [locale]="data.locale"
+      [showGradient]="true"
+      [showXAxis]="true"
+      [showYAxis]="true"
+      [symbol]="data.symbol"
+    />
+  </div>
+</div>
+
+<gf-dialog-footer
+  mat-dialog-actions
+  [deviceType]="data.deviceType"
+  (closeButtonClicked)="onClose()"
+/>

libs/ui/src/lib/benchmark/benchmark-detail-dialog/interfaces/interfaces.ts

@@ -0,0 +1,11 @@
+import { ColorScheme } from '@ghostfolio/common/types';
+
+import { DataSource } from '@prisma/client';
+
+export interface BenchmarkDetailDialogParams {
+  colorScheme: ColorScheme;
+  dataSource: DataSource;
+  deviceType: string;
+  locale: string;
+  symbol: string;
+}

libs/ui/src/lib/benchmark/benchmark.component.html

@@ -2,7 +2,15 @@
   <ng-container matColumnDef="name">
     <th *matHeaderCellDef class="px-2" i18n mat-header-cell>Index</th>
     <td *matCellDef="let element" class="px-2" mat-cell>
-      {{ element?.name }}
+      <a
+        [queryParams]="{
+          benchmarkDetailDialog: true,
+          dataSource: element.dataSource,
+          symbol: element.symbol
+        }"
+        [routerLink]="[]"
+        >{{ element?.name }}</a
+      >
     </td>
   </ng-container>
 

libs/ui/src/lib/benchmark/benchmark.component.ts

@@ -1,6 +1,8 @@
 import { getLocale, resolveMarketCondition } from '@ghostfolio/common/helper';
-import { Benchmark, User } from '@ghostfolio/common/interfaces';
+import { Benchmark, UniqueAsset, User } from '@ghostfolio/common/interfaces';
 import { translate } from '@ghostfolio/ui/i18n';
+import { GfTrendIndicatorComponent } from '@ghostfolio/ui/trend-indicator';
+import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import { CommonModule } from '@angular/common';
 import {
@@ -8,13 +10,17 @@ import {
   ChangeDetectionStrategy,
   Component,
   Input,
-  OnChanges
+  OnChanges,
+  OnDestroy
 } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
 import { MatTableModule } from '@angular/material/table';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import { Subject, takeUntil } from 'rxjs';
 
-import { GfTrendIndicatorComponent } from '../trend-indicator';
-import { GfValueComponent } from '../value';
+import { GfBenchmarkDetailDialogComponent } from './benchmark-detail-dialog/benchmark-detail-dialog.component';
+import { BenchmarkDetailDialogParams } from './benchmark-detail-dialog/interfaces/interfaces';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -23,7 +29,8 @@ import { GfValueComponent } from '../value';
     GfTrendIndicatorComponent,
     GfValueComponent,
     MatTableModule,
-    NgxSkeletonLoaderModule
+    NgxSkeletonLoaderModule,
+    RouterModule
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-benchmark',
@@ -31,8 +38,9 @@ import { GfValueComponent } from '../value';
   styleUrls: ['./benchmark.component.scss'],
   templateUrl: './benchmark.component.html'
 })
-export class GfBenchmarkComponent implements OnChanges {
+export class GfBenchmarkComponent implements OnChanges, OnDestroy {
   @Input() benchmarks: Benchmark[];
+  @Input() deviceType: string;
   @Input() locale = getLocale();
   @Input() user: User;
 
@@ -40,7 +48,28 @@ export class GfBenchmarkComponent implements OnChanges {
   public resolveMarketCondition = resolveMarketCondition;
   public translate = translate;
 
-  public constructor() {}
+  private unsubscribeSubject = new Subject<void>();
+
+  public constructor(
+    private dialog: MatDialog,
+    private route: ActivatedRoute,
+    private router: Router
+  ) {
+    this.route.queryParams
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((params) => {
+        if (
+          params['benchmarkDetailDialog'] &&
+          params['dataSource'] &&
+          params['symbol']
+        ) {
+          this.openBenchmarkDetailDialog({
+            dataSource: params['dataSource'],
+            symbol: params['symbol']
+          });
+        }
+      });
+  }
 
   public ngOnChanges() {
     if (this.user?.settings?.isExperimentalFeatures) {
@@ -54,4 +83,30 @@ export class GfBenchmarkComponent implements OnChanges {
       ];
     }
   }
+
+  public ngOnDestroy() {
+    this.unsubscribeSubject.next();
+    this.unsubscribeSubject.complete();
+  }
+
+  private openBenchmarkDetailDialog({ dataSource, symbol }: UniqueAsset) {
+    const dialogRef = this.dialog.open(GfBenchmarkDetailDialogComponent, {
+      data: <BenchmarkDetailDialogParams>{
+        dataSource,
+        symbol,
+        colorScheme: this.user?.settings?.colorScheme,
+        deviceType: this.deviceType,
+        locale: this.locale
+      },
+      height: this.deviceType === 'mobile' ? '97.5vh' : undefined,
+      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+    });
+
+    dialogRef
+      .afterClosed()
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe(() => {
+        this.router.navigate(['.'], { relativeTo: this.route });
+      });
+  }
 }