From 186ffdec1bee817efb921a29fb7d764efbbb2f8a Mon Sep 17 00:00:00 2001
From: rusikv <rvasylkiv@thingsboard.io>
Date: Fri, 1 Sep 2023 17:22:32 +0300
Subject: [PATCH] UI: Added validation for pie flot common settings

---
 .../chart/flot-pie-widget-settings.component.html | 15 ++++++++++++---
 .../chart/flot-pie-widget-settings.component.ts   |  6 +++---
 .../src/assets/locale/locale.constant-en_US.json  |  1 +
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html
index 307a494954..90e888af20 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.html
+++ b/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">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.ts
index 9b18ace983..0627af3581 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/flot-pie-widget-settings.component.ts
+++ b/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
 
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index e982f2440f..570680bc00 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/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",