Add integration

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

@@ -13,6 +13,7 @@
       <div class="d-flex mr-2">
         <gf-trend-indicator
           class="d-flex"
+          size="large"
           [isLoading]="isLoading"
           [marketState]="position?.marketState"
           [range]="range"

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

@@ -6,6 +6,54 @@
     </td>
   </ng-container>
 
+  <ng-container matColumnDef="trend50d">
+    <th
+      *matHeaderCellDef
+      class="d-none d-lg-table-cell px-2 text-right"
+      mat-header-cell
+    >
+      <ng-container i18n>50-Day Trend</ng-container>
+    </th>
+    <td *matCellDef="let element" class="d-none d-lg-table-cell px-2" mat-cell>
+      <div class="d-flex justify-content-end">
+        <gf-trend-indicator
+          *ngIf="element?.trend50d !== 'UNKNOWN'"
+          [value]="
+            element?.trend50d === 'UP'
+              ? 1
+              : element?.trend50d === 'DOWN'
+                ? -1
+                : 0
+          "
+        ></gf-trend-indicator>
+      </div>
+    </td>
+  </ng-container>
+
+  <ng-container matColumnDef="trend200d">
+    <th
+      *matHeaderCellDef
+      class="d-none d-lg-table-cell px-2 text-right"
+      mat-header-cell
+    >
+      <ng-container i18n>200-Day Trend</ng-container>
+    </th>
+    <td *matCellDef="let element" class="d-none d-lg-table-cell px-2" mat-cell>
+      <div class="d-flex justify-content-end">
+        <gf-trend-indicator
+          *ngIf="element?.trend200d !== 'UNKNOWN'"
+          [value]="
+            element?.trend200d === 'UP'
+              ? 1
+              : element?.trend200d === 'DOWN'
+                ? -1
+                : 0
+          "
+        ></gf-trend-indicator>
+      </div>
+    </td>
+  </ng-container>
+
   <ng-container matColumnDef="date">
     <th
       *matHeaderCellDef
@@ -35,7 +83,6 @@
     <td *matCellDef="let element" class="px-2 text-right" mat-cell>
       <gf-value
         class="d-inline-block justify-content-end"
-        size="medium"
         [isPercent]="true"
         [locale]="locale"
         [ngClass]="{

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

@@ -1,12 +1,16 @@
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   Input,
   OnChanges
 } from '@angular/core';
+import { UserService } from '@ghostfolio/client/services/user/user.service';
 import { locale } from '@ghostfolio/common/config';
 import { resolveMarketCondition } from '@ghostfolio/common/helper';
-import { Benchmark } from '@ghostfolio/common/interfaces';
+import { Benchmark, User } from '@ghostfolio/common/interfaces';
+import { without } from 'lodash';
+import { Subject, takeUntil } from 'rxjs';
 
 @Component({
   selector: 'gf-benchmark',
@@ -20,8 +24,35 @@ export class BenchmarkComponent implements OnChanges {
 
   public displayedColumns = ['name', 'date', 'change', 'marketCondition'];
   public resolveMarketCondition = resolveMarketCondition;
+  public user: User;
 
-  public constructor() {}
+  private unsubscribeSubject = new Subject<void>();
+
+  public constructor(
+    private changeDetectorRef: ChangeDetectorRef,
+    private userService: UserService
+  ) {
+    this.userService.stateChanged
+      .pipe(takeUntil(this.unsubscribeSubject))
+      .subscribe((state) => {
+        if (state?.user) {
+          this.user = state.user;
+
+          if (this.user?.settings?.isExperimentalFeatures) {
+            this.displayedColumns = [
+              'name',
+              'trend50d',
+              'trend200d',
+              'date',
+              'change',
+              'marketCondition'
+            ];
+          }
+
+          this.changeDetectorRef.markForCheck();
+        }
+      });
+  }
 
   public ngOnChanges() {
     if (!this.locale) {

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

@@ -3,6 +3,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatTableModule } from '@angular/material/table';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
+import { GfTrendIndicatorModule } from '../trend-indicator';
 import { GfValueModule } from '../value';
 import { BenchmarkComponent } from './benchmark.component';
 
@@ -11,6 +12,7 @@ import { BenchmarkComponent } from './benchmark.component';
   exports: [BenchmarkComponent],
   imports: [
     CommonModule,
+    GfTrendIndicatorModule,
     GfValueModule,
     MatTableModule,
     NgxSkeletonLoaderModule

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

@@ -13,7 +13,7 @@
     *ngIf="marketState === 'closed' && range === '1d'; else delayed"
     class="text-muted"
     name="pause-circle-outline"
-    size="large"
+    [size]="size"
   >
   </ion-icon>
   <ng-template #delayed>
@@ -21,7 +21,7 @@
       *ngIf="marketState === 'delayed' && range === '1d'; else trend"
       class="text-muted"
       name="time-outline"
-      size="large"
+      [size]="size"
     >
     </ion-icon>
   </ng-template>
@@ -31,21 +31,21 @@
         *ngIf="value <= -0.0005"
         class="text-danger"
         name="arrow-down-circle-outline"
-        size="large"
         [ngClass]="{ 'rotate-45-down': value > -0.01 }"
+        [size]="size"
       ></ion-icon>
       <ion-icon
         *ngIf="value > -0.0005 && value < 0.0005"
         class="text-muted"
         name="arrow-forward-circle-outline"
-        size="large"
+        [size]="size"
       ></ion-icon>
       <ion-icon
         *ngIf="value >= 0.0005"
         class="text-success"
         name="arrow-up-circle-outline"
-        size="large"
         [ngClass]="{ 'rotate-45-up': value < 0.01 }"
+        [size]="size"
       ></ion-icon>
     </ng-container>
   </ng-template>

libs/ui/src/lib/trend-indicator/trend-indicator.component.ts

@@ -11,6 +11,7 @@ export class TrendIndicatorComponent {
   @Input() isLoading = false;
   @Input() marketState: MarketState = 'open';
   @Input() range: DateRange = 'max';
+  @Input() size: 'large' | 'medium' | 'small' = 'small';
   @Input() value = 0;
 
   public constructor() {}