Feature/improve usability of benchmarks in markets overview (#3077)

* Improve icons, localize label

* Update changelog

CHANGELOG.md

@@ -5,6 +5,12 @@ 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).
 
+## Unreleased
+
+### Changed
+
+- Improved the usability of the benchmarks in the markets overview
+
 ## 2.59.0 - 2024-02-29
 
 ### Added

libs/common/src/lib/helper.ts

@@ -393,6 +393,6 @@ export function resolveMarketCondition(
   } else if (aMarketCondition === 'BEAR_MARKET') {
     return { emoji: '🐻' };
   } else {
-    return { emoji: '⚪' };
+    return { emoji: undefined };
   }
 }

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

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

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

@@ -1,5 +1,6 @@
 import { getLocale, resolveMarketCondition } from '@ghostfolio/common/helper';
 import { Benchmark, User } from '@ghostfolio/common/interfaces';
+import { translate } from '@ghostfolio/ui/i18n';
 
 import {
   ChangeDetectionStrategy,
@@ -21,6 +22,7 @@ export class BenchmarkComponent implements OnChanges {
 
   public displayedColumns = ['name', 'date', 'change', 'marketCondition'];
   public resolveMarketCondition = resolveMarketCondition;
+  public translate = translate;
 
   public constructor() {}
 

libs/ui/src/lib/i18n.ts

@@ -35,14 +35,14 @@ const locales = {
   LIABILITY: $localize`Liability`,
   SELL: $localize`Sell`,
 
-  // enum AssetClass
+  // AssetClass (enum)
   CASH: $localize`Cash`,
   COMMODITY: $localize`Commodity`,
   EQUITY: $localize`Equity`,
   FIXED_INCOME: $localize`Fixed Income`,
   REAL_ESTATE: $localize`Real Estate`,
 
-  // enum AssetSubClass
+  // AssetSubClass (enum)
   BOND: $localize`Bond`,
   CRYPTOCURRENCY: $localize`Cryptocurrency`,
   ETF: $localize`ETF`,
@@ -51,6 +51,10 @@ const locales = {
   PRIVATE_EQUITY: $localize`Private Equity`,
   STOCK: $localize`Stock`,
 
+  // Benchmark
+  ALL_TIME_HIGH: 'All time high',
+  BEAR_MARKET: 'Bear market',
+
   // Continents
   Africa: $localize`Africa`,
   Asia: $localize`Asia`,