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

<table class="gf-table w-100" mat-table [dataSource]="benchmarks">
  <ng-container matColumnDef="name">
    <th *matHeaderCellDef class="px-2" i18n mat-header-cell>Name</th>
    <td *matCellDef="let element" class="px-2" mat-cell>
      {{ element?.name }}
    </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">
        @if (element?.trend50d !== 'UNKNOWN') {
          <gf-trend-indicator
            [value]="
              element?.trend50d === 'UP'
                ? 0.001
                : element?.trend50d === 'DOWN'
                  ? -0.001
                  : 0
            "
          />
        }
      </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">
        @if (element?.trend200d !== 'UNKNOWN') {
          <gf-trend-indicator
            [value]="
              element?.trend200d === 'UP'
                ? 0.001
                : element?.trend200d === 'DOWN'
                  ? -0.001
                  : 0
            "
          />
        }
      </div>
    </td>
  </ng-container>

  <ng-container matColumnDef="date">
    <th
      *matHeaderCellDef
      class="d-none d-lg-table-cell px-2 text-right"
      mat-header-cell
    >
      <ng-container i18n>Last All Time High</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">
        @if (element?.performances?.allTimeHigh?.date) {
          <gf-value
            [isDate]="true"
            [locale]="locale"
            [value]="element?.performances?.allTimeHigh?.date"
          />
        }
      </div>
    </td>
  </ng-container>

  <ng-container matColumnDef="change">
    <th *matHeaderCellDef class="px-2 text-right" mat-header-cell>
      <span class="d-none d-sm-block text-nowrap" i18n
        >Change from All Time High</span
      >
      <span class="d-block d-sm-none text-nowrap" i18n>from ATH</span>
    </th>
    <td *matCellDef="let element" class="px-2 text-right" mat-cell>
      @if (isNumber(element?.performances?.allTimeHigh?.performancePercent)) {
        <gf-value
          class="d-inline-block justify-content-end"
          [isPercent]="true"
          [locale]="locale"
          [ngClass]="{
            'text-danger':
              element?.performances?.allTimeHigh?.performancePercent < 0,
            'text-success':
              element?.performances?.allTimeHigh?.performancePercent === 0
          }"
          [value]="element?.performances?.allTimeHigh?.performancePercent"
        />
      }
    </td>
  </ng-container>

  <ng-container matColumnDef="marketCondition">
    <th *matHeaderCellDef mat-header-cell></th>
    <td *matCellDef="let element" class="px-0" mat-cell>
      @if (element?.marketCondition) {
        <div class="text-center" [title]="translate(element.marketCondition)">
          {{ resolveMarketCondition(element.marketCondition).emoji }}
        </div>
      }
    </td>
  </ng-container>

  <ng-container matColumnDef="actions" stickyEnd>
    <th *matHeaderCellDef class="px-1 text-center" mat-header-cell></th>
    <td *matCellDef="let element" class="px-1 text-center" mat-cell>
      @if (hasPermissionToDeleteItem) {
        <button
          class="mx-1 no-min-width px-2"
          mat-button
          [matMenuTriggerFor]="benchmarkMenu"
          (click)="$event.stopPropagation()"
        >
          <ion-icon name="ellipsis-horizontal" />
        </button>
      }
      <mat-menu #benchmarkMenu="matMenu" xPosition="before">
        <button
          mat-menu-item
          [disabled]="!hasPermissionToDeleteItem"
          (click)="
            onDeleteItem({
              dataSource: element.dataSource,
              symbol: element.symbol
            })
          "
        >
          <span class="align-items-center d-flex">
            <ion-icon class="mr-2" name="trash-outline" />
            <span i18n>Delete</span>
          </span>
        </button>
      </mat-menu>
    </td>
  </ng-container>

  <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
  <tr
    *matRowDef="let row; columns: displayedColumns"
    class="cursor-pointer"
    mat-row
    (click)="
      onOpenBenchmarkDialog({
        dataSource: row.dataSource,
        symbol: row.symbol
      })
    "
  ></tr>
</table>

@if (isLoading) {
  <ngx-skeleton-loader
    animation="pulse"
    class="px-4 py-3"
    [theme]="{
      height: '1.5rem',
      width: '100%'
    }"
  />
} @else if (benchmarks?.length === 0) {
  <div class="p-3 text-center text-muted">
    <small i18n>No data available</small>
  </div>
}