From 1d316b9db11700f87aab919a4c4b2dac7ec27924 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 29 May 2024 17:49:38 +0300
Subject: [PATCH] UI: Refactoring ColorProcessor added new method
 fromColorProcessingSettings

---
 .../battery-level-widget.component.ts         | 24 +++++++++---
 .../shared/models/widget-settings.models.ts   | 37 ++++++++++++++++---
 2 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts
index c74c357739..a23814343a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/indicator/battery-level-widget.component.ts
@@ -37,8 +37,7 @@ import {
   getDataKey,
   getSingleTsValue,
   overlayStyle,
-  textStyle,
-  updateGradientMinMaxValues
+  textStyle
 } from '@shared/models/widget-settings.models';
 import { WidgetComponent } from '@home/components/widget/widget.component';
 import {
@@ -192,11 +191,26 @@ export class BatteryLevelWidgetComponent implements OnInit, OnDestroy, AfterView
     this.showValue = this.settings.showValue;
     this.autoScaleValueSize = this.showValue && this.settings.autoScaleValueSize;
     this.valueStyle = textStyle(this.settings.valueFont);
-    this.valueColor = ColorProcessor.fromSettings(updateGradientMinMaxValues(this.settings.valueColor, 0, 100), this.ctx);
+    this.valueColor = ColorProcessor.fromColorProcessingSettings({
+      settings: this.settings.valueColor,
+      ctx: this.ctx,
+      minGradientValue: 0,
+      maxGradientValue: 0
+    });
 
-    this.batteryLevelColor = ColorProcessor.fromSettings(updateGradientMinMaxValues(this.settings.batteryLevelColor, 0, 100), this.ctx);
+    this.batteryLevelColor = ColorProcessor.fromColorProcessingSettings({
+      settings: this.settings.batteryLevelColor,
+      ctx: this.ctx,
+      minGradientValue: 0,
+      maxGradientValue: 0
+    });
 
-    this.batteryShapeColor = ColorProcessor.fromSettings(updateGradientMinMaxValues(this.settings.batteryShapeColor, 0, 100), this.ctx);
+    this.batteryShapeColor = ColorProcessor.fromColorProcessingSettings({
+      settings: this.settings.batteryShapeColor,
+      ctx: this.ctx,
+      minGradientValue: 0,
+      maxGradientValue: 0
+    });
 
     this.backgroundStyle$ = backgroundStyle(this.settings.background, this.imagePipe, this.sanitizer);
     this.overlayStyle = overlayStyle(this.settings.background.overlay);
diff --git a/ui-ngx/src/app/shared/models/widget-settings.models.ts b/ui-ngx/src/app/shared/models/widget-settings.models.ts
index e49fad9baa..45f7f9f1fc 100644
--- a/ui-ngx/src/app/shared/models/widget-settings.models.ts
+++ b/ui-ngx/src/app/shared/models/widget-settings.models.ts
@@ -297,14 +297,15 @@ export const defaultGradient = (minValue?: number, maxValue?: number): ColorGrad
   maxValue: isDefinedAndNotNull(maxValue) ? maxValue : 100
 });
 
-export const updateGradientMinMaxValues = (colorSettings: ColorSettings, minValue: number, maxValue: number): ColorSettings => {
+const updateGradientMinMaxValues = (colorSettings: ColorSettings, minValue?: number, maxValue?: number): void => {
   if (isDefinedAndNotNull(colorSettings.gradient)) {
-    colorSettings.gradient.minValue = minValue;
-    colorSettings.gradient.maxValue = maxValue;
-  } else {
-    colorSettings.gradient = defaultGradient(minValue, maxValue);
+    if (isDefinedAndNotNull(minValue)) {
+      colorSettings.gradient.minValue = minValue;
+    }
+    if (isDefinedAndNotNull(maxValue)) {
+      colorSettings.gradient.maxValue = maxValue;
+    }
   }
-  return colorSettings;
 };
 
 export const defaultColorFunction = 'var temperature = value;\n' +
@@ -350,6 +351,13 @@ export const validateCssSize = (strSize?: string): string | undefined => {
 
 type ValueColorFunction = (value: any) => string;
 
+export interface ColorProcessorSettings {
+  settings: ColorSettings;
+  ctx?: WidgetContext;
+  minGradientValue?: number;
+  maxGradientValue?: number;
+}
+
 export abstract class ColorProcessor {
 
   static fromSettings(color: ColorSettings, ctx?: WidgetContext): ColorProcessor {
@@ -368,6 +376,23 @@ export abstract class ColorProcessor {
     }
   }
 
+  static fromColorProcessingSettings(setting: ColorProcessorSettings): ColorProcessor {
+    const settings = setting.settings || constantColor(null);
+    switch (settings.type) {
+      case ColorType.constant:
+        return new ConstantColorProcessor(settings);
+      case ColorType.range:
+        return new RangeColorProcessor(settings, setting.ctx);
+      case ColorType.function:
+        return new FunctionColorProcessor(settings);
+      case ColorType.gradient:
+        updateGradientMinMaxValues(settings, setting.minGradientValue, setting.maxGradientValue);
+        return new GradientColorProcessor(settings, setting.ctx);
+      default:
+        return new ConstantColorProcessor(settings);
+    }
+  }
+
   color: string;
 
   colorUpdated: EventEmitter<void> = new EventEmitter<void>();