Feature/implement range slider in rule settings dialog (#4043)
* Implement range slider in rule settings dialog * Update changelog
This commit is contained in:
Amandee Ellawala
GitHub
parent
8c0de59414
commit
a1934ee82b
@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
- Moved the chart of the holdings tab on the home page from experimental to general availability
|
||||
- Extended the assistant by a holding selector
|
||||
- Separated the _FIRE_ / _X-ray_ page
|
||||
- Improved the usability to customize the rule thresholds in the _X-ray_ page by introducing range sliders (experimental)
|
||||
- Improved the language localization for Italian (`it`)
|
||||
- Upgraded `ngx-skeleton-loader` from version `7.0.0` to `9.0.0`
|
||||
- Upgraded `uuid` from version `9.0.1` to `11.0.2`
|
||||
|
||||
@ -1,76 +1,128 @@
|
||||
<div mat-dialog-title>{{ data.rule.name }}</div>
|
||||
|
||||
<div class="py-3" mat-dialog-content>
|
||||
<div
|
||||
class="w-100"
|
||||
[ngClass]="{ 'd-none': !data.rule.configuration.thresholdMin }"
|
||||
>
|
||||
<h6 class="mb-0">
|
||||
<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>
|
||||
@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"
|
||||
[min]="data.rule.configuration.threshold.min"
|
||||
[step]="data.rule.configuration.threshold.step"
|
||||
@if (
|
||||
data.rule.configuration.thresholdMin && data.rule.configuration.thresholdMax
|
||||
) {
|
||||
<div class="w-100">
|
||||
<h6 class="mb-0">
|
||||
<ng-container i18n>Threshold range</ng-container>:
|
||||
@if (data.rule.configuration.threshold.unit === '%') {
|
||||
{{ data.settings.thresholdMin | percent: '1.2-2' }}
|
||||
} @else {
|
||||
{{ data.settings.thresholdMin }}
|
||||
}
|
||||
-
|
||||
@if (data.rule.configuration.threshold.unit === '%') {
|
||||
{{ data.settings.thresholdMax | percent: '1.2-2' }}
|
||||
} @else {
|
||||
{{ data.settings.thresholdMax }}
|
||||
}
|
||||
</h6>
|
||||
<div class="align-items-center d-flex w-100">
|
||||
@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
|
||||
class="flex-grow-1"
|
||||
[max]="data.rule.configuration.threshold.max"
|
||||
[min]="data.rule.configuration.threshold.min"
|
||||
[step]="data.rule.configuration.threshold.step"
|
||||
>
|
||||
<input matSliderStartThumb [(ngModel)]="data.settings.thresholdMin" />
|
||||
<input matSliderEndThumb [(ngModel)]="data.settings.thresholdMax" />
|
||||
</mat-slider>
|
||||
@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>
|
||||
} @else {
|
||||
<div
|
||||
class="w-100"
|
||||
[ngClass]="{ 'd-none': !data.rule.configuration.thresholdMin }"
|
||||
>
|
||||
<input matSliderThumb [(ngModel)]="data.settings.thresholdMin" />
|
||||
</mat-slider>
|
||||
@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>:
|
||||
@if (data.rule.configuration.threshold.unit === '%') {
|
||||
{{ data.settings.thresholdMax | percent: '1.2-2' }}
|
||||
} @else {
|
||||
{{ data.settings.thresholdMax }}
|
||||
}
|
||||
</h6>
|
||||
@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"
|
||||
[min]="data.rule.configuration.threshold.min"
|
||||
[step]="data.rule.configuration.threshold.step"
|
||||
<h6 class="mb-0">
|
||||
<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>
|
||||
<div class="align-items-center d-flex w-100">
|
||||
@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
|
||||
class="flex-grow-1"
|
||||
name="thresholdMin"
|
||||
[max]="data.rule.configuration.threshold.max"
|
||||
[min]="data.rule.configuration.threshold.min"
|
||||
[step]="data.rule.configuration.threshold.step"
|
||||
>
|
||||
<input matSliderThumb [(ngModel)]="data.settings.thresholdMin" />
|
||||
</mat-slider>
|
||||
@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>
|
||||
<div
|
||||
class="w-100"
|
||||
[ngClass]="{ 'd-none': !data.rule.configuration.thresholdMax }"
|
||||
>
|
||||
<input matSliderThumb [(ngModel)]="data.settings.thresholdMax" />
|
||||
</mat-slider>
|
||||
@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>
|
||||
<h6 class="mb-0">
|
||||
<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>
|
||||
<div class="align-items-center d-flex w-100">
|
||||
@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
|
||||
class="flex-grow-1"
|
||||
name="thresholdMax"
|
||||
[max]="data.rule.configuration.threshold.max"
|
||||
[min]="data.rule.configuration.threshold.min"
|
||||
[step]="data.rule.configuration.threshold.step"
|
||||
>
|
||||
<input matSliderThumb [(ngModel)]="data.settings.thresholdMax" />
|
||||
</mat-slider>
|
||||
@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>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div align="end" mat-dialog-actions>
|
||||
|
||||
@ -1,2 +1,5 @@
|
||||
:host {
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user