Feature/add units to x ray rule settings (#3926)

* Introduce unit

* Update changelog

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - Disabled the text hover effect in the chart of the holdings tab on the home page (experimental)
+- Improved the usability to customize the rule thresholds in the _X-ray_ section by introducing units (experimental)
 - Improved the language localization for German (`de`)
 
 ## 2.115.0 - 2024-10-14

apps/api/src/models/rules/account-cluster-risk/current-investment.ts

@@ -81,7 +81,8 @@ export class AccountClusterRiskCurrentInvestment extends Rule<Settings> {
       threshold: {
         max: 1,
         min: 0,
-        step: 0.01
+        step: 0.01,
+        unit: '%'
       },
       thresholdMax: true
     };

apps/api/src/models/rules/currency-cluster-risk/current-investment.ts

@@ -66,7 +66,8 @@ export class CurrencyClusterRiskCurrentInvestment extends Rule<Settings> {
       threshold: {
         max: 1,
         min: 0,
-        step: 0.01
+        step: 0.01,
+        unit: '%'
       },
       thresholdMax: true
     };

apps/api/src/models/rules/fees/fee-ratio-initial-investment.ts

@@ -48,7 +48,8 @@ export class FeeRatioInitialInvestment extends Rule<Settings> {
       threshold: {
         max: 0.1,
         min: 0,
-        step: 0.005
+        step: 0.0025,
+        unit: '%'
       },
       thresholdMax: true
     };

apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html

@@ -6,11 +6,20 @@
     [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMin }"
   >
     <h6 class="mb-0">
-      <ng-container i18n>Threshold Min</ng-container> ({{
-        data.settings.thresholdMin?.toFixed(2)
-      }})
+      <ng-container i18n>Threshold Min</ng-container>:
+      @if (data.rule.configuration.threshold.unit === '%') {
+        {{ data.settings.thresholdMin | percent: '1.2-2' }}
+      } @else {
+        {{ data.settings.thresholdMin }}
+      }
     </h6>
-    <label>{{ data.rule.configuration.threshold.min.toFixed(2) }}</label>
+    @if (data.rule.configuration.threshold.unit === '%') {
+      <label>{{
+        data.rule.configuration.threshold.min | percent: '1.2-2'
+      }}</label>
+    } @else {
+      <label>{{ data.rule.configuration.threshold.min }}</label>
+    }
     <mat-slider
       name="thresholdMin"
       [max]="data.rule.configuration.threshold.max"
@@ -19,18 +28,33 @@
     >
       <input matSliderThumb [(ngModel)]="data.settings.thresholdMin" />
     </mat-slider>
-    <label>{{ data.rule.configuration.threshold.max.toFixed(2) }}</label>
+    @if (data.rule.configuration.threshold.unit === '%') {
+      <label>{{
+        data.rule.configuration.threshold.max | percent: '1.2-2'
+      }}</label>
+    } @else {
+      <label>{{ data.rule.configuration.threshold.max }}</label>
+    }
   </div>
   <div
     class="w-100"
     [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMax }"
   >
     <h6 class="mb-0">
-      <ng-container i18n>Threshold Max</ng-container> ({{
-        data.settings.thresholdMax?.toFixed(2)
-      }})
+      <ng-container i18n>Threshold Max</ng-container>:
+      @if (data.rule.configuration.threshold.unit === '%') {
+        {{ data.settings.thresholdMax | percent: '1.2-2' }}
+      } @else {
+        {{ data.settings.thresholdMax }}
+      }
     </h6>
-    <label>{{ data.rule.configuration.threshold.min.toFixed(2) }}</label>
+    @if (data.rule.configuration.threshold.unit === '%') {
+      <label>{{
+        data.rule.configuration.threshold.min | percent: '1.2-2'
+      }}</label>
+    } @else {
+      <label>{{ data.rule.configuration.threshold.min }}</label>
+    }
     <mat-slider
       name="thresholdMax"
       [max]="data.rule.configuration.threshold.max"
@@ -39,7 +63,13 @@
     >
       <input matSliderThumb [(ngModel)]="data.settings.thresholdMax" />
     </mat-slider>
-    <label>{{ data.rule.configuration.threshold.max.toFixed(2) }}</label>
+    @if (data.rule.configuration.threshold.unit === '%') {
+      <label>{{
+        data.rule.configuration.threshold.max | percent: '1.2-2'
+      }}</label>
+    } @else {
+      <label>{{ data.rule.configuration.threshold.max }}</label>
+    }
   </div>
 </div>
 

libs/common/src/lib/interfaces/portfolio-report-rule.interface.ts

@@ -4,6 +4,7 @@ export interface PortfolioReportRule {
       max: number;
       min: number;
       step: number;
+      unit?: string;
     };
     thresholdMax?: boolean;
     thresholdMin?: boolean;