From 8a49a04324ddbd967a850c78f852847f6f1a71e7 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Sat, 2 Mar 2024 09:48:53 +0100
Subject: [PATCH] Feature/improve usability of benchmarks in markets overview
 (#3077)

* Improve icons, localize label

* Update changelog
---
 CHANGELOG.md                                       | 6 ++++++
 libs/common/src/lib/helper.ts                      | 2 +-
 libs/ui/src/lib/benchmark/benchmark.component.html | 2 +-
 libs/ui/src/lib/benchmark/benchmark.component.ts   | 2 ++
 libs/ui/src/lib/i18n.ts                            | 8 ++++++--
 5 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6c2225173..abf9b6eb1 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/libs/common/src/lib/helper.ts b/libs/common/src/lib/helper.ts
index c6a15e22e..e55800628 100644
--- a/libs/common/src/lib/helper.ts
+++ b/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 };
   }
 }
diff --git a/libs/ui/src/lib/benchmark/benchmark.component.html b/libs/ui/src/lib/benchmark/benchmark.component.html
index 2e5c819e7..9497c63f4 100644
--- a/libs/ui/src/lib/benchmark/benchmark.component.html
+++ b/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>
       }
diff --git a/libs/ui/src/lib/benchmark/benchmark.component.ts b/libs/ui/src/lib/benchmark/benchmark.component.ts
index 5509886af..032c131bf 100644
--- a/libs/ui/src/lib/benchmark/benchmark.component.ts
+++ b/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() {}
 
diff --git a/libs/ui/src/lib/i18n.ts b/libs/ui/src/lib/i18n.ts
index 53c2d3a77..9687f461c 100644
--- a/libs/ui/src/lib/i18n.ts
+++ b/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`,