Introduce unit

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;