Feature/add icon column to benchmark component (#6907)

* Add icon column

* Update changelog

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Added the icon column to the benchmark component
 - Added support for the `DIRECT_URL` environment variable to enable direct database connections
 
 ### Changed

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

@@ -14,6 +14,7 @@
         [deviceType]="deviceType()"
         [hasPermissionToDeleteItem]="hasPermissionToDeleteWatchlistItem"
         [locale]="user?.settings?.locale || undefined"
+        [showIcon]="true"
         [user]="user"
         (itemDeleted)="onWatchlistItemDeleted($event)"
       />

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

@@ -7,11 +7,22 @@
     matSortDirection="asc"
     [dataSource]="dataSource"
   >
-    <ng-container matColumnDef="name" sticky>
-      <th *matHeaderCellDef class="px-2" mat-header-cell mat-sort-header>
+    <ng-container matColumnDef="icon" sticky>
+      <th *matHeaderCellDef class="px-1" mat-header-cell></th>
+      <td *matCellDef="let element" class="px-1 text-center" mat-cell>
+        <gf-entity-logo
+          [dataSource]="element.dataSource"
+          [symbol]="element.symbol"
+          [tooltip]="element.name"
+        />
+      </td>
+    </ng-container>
+
+    <ng-container matColumnDef="name">
+      <th *matHeaderCellDef class="px-1" mat-header-cell mat-sort-header>
         <ng-container i18n>Name</ng-container>
       </th>
-      <td *matCellDef="let element" class="px-2 text-nowrap" mat-cell>
+      <td *matCellDef="let element" class="px-1 text-nowrap" mat-cell>
         <div class="text-truncate">
           {{ element?.name }}
         </div>
@@ -26,14 +37,14 @@
     <ng-container matColumnDef="trend50d">
       <th
         *matHeaderCellDef
-        class="d-none d-lg-table-cell px-2 text-right"
+        class="d-none d-lg-table-cell px-1 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"
+        class="d-none d-lg-table-cell px-1"
         mat-cell
       >
         <div class="d-flex justify-content-end">
@@ -55,14 +66,14 @@
     <ng-container matColumnDef="trend200d">
       <th
         *matHeaderCellDef
-        class="d-none d-lg-table-cell px-2 text-right"
+        class="d-none d-lg-table-cell px-1 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"
+        class="d-none d-lg-table-cell px-1"
         mat-cell
       >
         <div class="d-flex justify-content-end">
@@ -84,14 +95,14 @@
     <ng-container matColumnDef="date">
       <th
         *matHeaderCellDef
-        class="d-none d-lg-table-cell px-2 text-right"
+        class="d-none d-lg-table-cell px-1 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"
+        class="d-none d-lg-table-cell px-1"
         mat-cell
       >
         <div class="d-flex justify-content-end">
@@ -109,7 +120,7 @@
     <ng-container matColumnDef="change">
       <th
         *matHeaderCellDef
-        class="px-2 justify-content-end"
+        class="justify-content-end px-1"
         mat-header-cell
         mat-sort-header="performances.allTimeHigh.performancePercent"
       >
@@ -118,7 +129,7 @@
         >
         <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>
+      <td *matCellDef="let element" class="px-1 text-right" mat-cell>
         @if (isNumber(element?.performances?.allTimeHigh?.performancePercent)) {
           <gf-value
             class="d-inline-block justify-content-end"

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

@@ -36,6 +36,7 @@ import { ellipsisHorizontal, trashOutline } from 'ionicons/icons';
 import { isNumber } from 'lodash';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
+import { GfEntityLogoComponent } from '../entity-logo/entity-logo.component';
 import { translate } from '../i18n';
 import { GfTrendIndicatorComponent } from '../trend-indicator/trend-indicator.component';
 import { GfValueComponent } from '../value/value.component';
@@ -45,6 +46,7 @@ import { BenchmarkDetailDialogParams } from './benchmark-detail-dialog/interface
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
+    GfEntityLogoComponent,
     GfTrendIndicatorComponent,
     GfValueComponent,
     IonIcon,
@@ -65,6 +67,7 @@ export class GfBenchmarkComponent {
   public readonly deviceType = input.required<string>();
   public readonly hasPermissionToDeleteItem = input<boolean>();
   public readonly locale = input(getLocale());
+  public readonly showIcon = input(false);
   public readonly showSymbol = input(true);
   public readonly user = input<User>();
 
@@ -75,6 +78,7 @@ export class GfBenchmarkComponent {
   protected readonly dataSource = new MatTableDataSource<Benchmark>([]);
   protected readonly displayedColumns = computed(() => {
     return [
+      ...(this.showIcon() ? ['icon'] : []),
       'name',
       ...(this.user()?.settings?.isExperimentalFeatures
         ? ['trend50d', 'trend200d']