Feature/add sliders to customize x-ray rules (#3922)

* Add sliders to customize X-ray rules

* Update changelog

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Improved the backgrounds of the chart of the holdings tab on the home page (experimental)
 - Improved the labels of 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 sliders (experimental)
 - Refactored the rule thresholds in the _X-ray_ section (experimental)
 - Exposed the timeout of the portfolio snapshot computation as an environment variable (`PROCESSOR_PORTFOLIO_SNAPSHOT_COMPUTATION_TIMEOUT`)
 - Harmonized the processor concurrency environment variables

apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.component.ts

@@ -9,8 +9,7 @@ import {
   MatDialogModule,
   MatDialogRef
 } from '@angular/material/dialog';
-import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSliderModule } from '@angular/material/slider';
-import { MatInputModule } from '@angular/material/input';
 
 import { IRuleSettingsDialogParams } from './interfaces/interfaces';
 
@@ -20,8 +19,7 @@ import { IRuleSettingsDialogParams } from './interfaces/interfaces';
     FormsModule,
     MatButtonModule,
     MatDialogModule,
-    MatFormFieldModule,
+    MatSliderModule
-    MatInputModule
   ],
   selector: 'gf-rule-settings-dialog',
   standalone: true,

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

@@ -1,32 +1,46 @@
 <div mat-dialog-title>{{ data.rule.name }}</div>
 
 <div class="py-3" mat-dialog-content>
-  <mat-form-field
+  <div
-    appearance="outline"
     class="w-100"
     [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMin }"
   >
-    <mat-label i18n>Threshold Min</mat-label>
+    <h6 class="mb-0">
-    <input
+      <ng-container i18n>Threshold Min</ng-container> ({{
-      matInput
+        data.settings.thresholdMin?.toFixed(2)
+      }})
+    </h6>
+    <label>{{ data.rule.configuration.threshold.min.toFixed(2) }}</label>
+    <mat-slider
       name="thresholdMin"
-      type="number"
+      [max]="data.rule.configuration.threshold.max"
-      [(ngModel)]="data.settings.thresholdMin"
+      [min]="data.rule.configuration.threshold.min"
-    />
+      [step]="data.rule.configuration.threshold.step"
-  </mat-form-field>
+    >
-  <mat-form-field
+      <input matSliderThumb [(ngModel)]="data.settings.thresholdMin" />
-    appearance="outline"
+    </mat-slider>
+    <label>{{ data.rule.configuration.threshold.max.toFixed(2) }}</label>
+  </div>
+  <div
     class="w-100"
     [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMax }"
   >
-    <mat-label i18n>Threshold Max</mat-label>
+    <h6 class="mb-0">
-    <input
+      <ng-container i18n>Threshold Max</ng-container> ({{
-      matInput
+        data.settings.thresholdMax?.toFixed(2)
+      }})
+    </h6>
+    <label>{{ data.rule.configuration.threshold.min.toFixed(2) }}</label>
+    <mat-slider
       name="thresholdMax"
-      type="number"
+      [max]="data.rule.configuration.threshold.max"
-      [(ngModel)]="data.settings.thresholdMax"
+      [min]="data.rule.configuration.threshold.min"
-    />
+      [step]="data.rule.configuration.threshold.step"
-  </mat-form-field>
+    >
+      <input matSliderThumb [(ngModel)]="data.settings.thresholdMax" />
+    </mat-slider>
+    <label>{{ data.rule.configuration.threshold.max.toFixed(2) }}</label>
+  </div>
 </div>
 
 <div align="end" mat-dialog-actions>