UI: Added validation for pie flot common settings

ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html

@@ -21,15 +21,24 @@
     <section fxLayout="column" fxLayout.gt-xs="row" fxLayoutGap.gt-xs="8px">
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.chart.radius</mat-label>
-        <input matInput type="number" min="0" formControlName="radius">
+        <input matInput type="number" step="0.1" min="0" max="1" formControlName="radius">
+        <mat-error *ngIf="flotPieWidgetSettingsForm.get('radius').hasError('min') || flotPieWidgetSettingsForm.get('radius').hasError('max')">
+          {{ 'widgets.chart.common-pie-settings-range-error' | translate}}
+        </mat-error>
       </mat-form-field>
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.chart.inner-radius</mat-label>
-        <input matInput type="number" min="0" formControlName="innerRadius">
+        <input matInput type="number" step="0.1" min="0" max="1" formControlName="innerRadius">
+        <mat-error *ngIf="flotPieWidgetSettingsForm.get('radius').hasError('min') || flotPieWidgetSettingsForm.get('innerRadius').hasError('max')">
+          {{ 'widgets.chart.common-pie-settings-range-error' | translate}}
+        </mat-error>
       </mat-form-field>
       <mat-form-field fxFlex class="mat-block">
         <mat-label translate>widgets.chart.tilt</mat-label>
-        <input matInput type="number" min="0" formControlName="tilt">
+        <input matInput type="number" step="0.1" min="0" max="1" formControlName="tilt">
+        <mat-error *ngIf="flotPieWidgetSettingsForm.get('radius').hasError('min') || flotPieWidgetSettingsForm.get('tilt').hasError('max')">
+          {{ 'widgets.chart.common-pie-settings-range-error' | translate}}
+        </mat-error>
       </mat-form-field>
     </section>
     <mat-slide-toggle formControlName="showLabels" class="slide-block">

ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.ts

@@ -59,9 +59,9 @@ export class FlotPieWidgetSettingsComponent extends WidgetSettingsComponent {
 
       // Common pie settings
 
-      radius: [settings.radius, [Validators.min(0)]],
-      innerRadius: [settings.innerRadius, [Validators.min(0)]],
-      tilt: [settings.tilt, [Validators.min(0)]],
+      radius: [settings.radius, [Validators.min(0), Validators.max(1)]],
+      innerRadius: [settings.innerRadius, [Validators.min(0), Validators.max(1)]],
+      tilt: [settings.tilt, [Validators.min(0), Validators.max(1)]],
 
       // Stroke settings
 

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -4912,6 +4912,7 @@
             "radius": "Radius",
             "inner-radius": "Inner radius",
             "tilt": "Tilt",
+            "common-pie-settings-range-error": "Value should be in range from 0 to 1",
             "stroke-settings": "Stroke settings",
             "width-pixels": "Width (pixels)",
             "show-labels": "Show labels",