From 9b6e8cc821a061d0d803661572c6bf7e175fb540 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 29 May 2024 18:12:01 +0300
Subject: [PATCH] UI: Improved colorUpdated in ColorProcessor

---
 .../home/components/widget/lib/digital-gauge.ts        |  4 +---
 .../lib/indicator/battery-level-widget.component.ts    | 10 +++-------
 ui-ngx/src/app/shared/models/widget-settings.models.ts |  7 ++++++-
 3 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts b/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts
index 0e21abe0f1..9031620f84 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts
@@ -191,7 +191,6 @@ export class TbCanvasDigitalGauge {
   private ticksSourcesSubscription: IWidgetSubscription;
 
   private readonly barColorProcessor: ColorProcessor;
-  private updatedBarColor$: Subscription;
 
   private gauge: CanvasDigitalGauge;
 
@@ -219,7 +218,7 @@ export class TbCanvasDigitalGauge {
       this.updateSetting();
     }
 
-    this.updatedBarColor$ = this.barColorProcessor.colorUpdated.subscribe(() => {
+    this.barColorProcessor.colorUpdated?.subscribe(() => {
       this.gauge.update({} as CanvasDigitalGaugeOptions);
     });
   }
@@ -285,7 +284,6 @@ export class TbCanvasDigitalGauge {
     if (this.ticksSourcesSubscription) {
       this.ctx.subscriptionApi.removeSubscription(this.ticksSourcesSubscription.id);
     }
-    this.updatedBarColor$?.unsubscribe();
     this.gauge = null;
   }
 }
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 5d42313c58..97f94675ce 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
@@ -217,9 +217,9 @@ export class BatteryLevelWidgetComponent implements OnInit, OnDestroy, AfterView
 
     this.hasCardClickAction = this.ctx.actionsApi.getActionDescriptors('cardClick').length > 0;
 
-    this.valueColor.colorUpdated.subscribe(() => this.cd.markForCheck());
-    this.batteryLevelColor.colorUpdated.subscribe(() => this.cd.markForCheck());
-    this.batteryShapeColor.colorUpdated.subscribe(() => this.cd.markForCheck());
+    this.valueColor.colorUpdated?.subscribe(() => this.cd.markForCheck());
+    this.batteryLevelColor.colorUpdated?.subscribe(() => this.cd.markForCheck());
+    this.batteryShapeColor.colorUpdated?.subscribe(() => this.cd.markForCheck());
   }
 
   ngAfterViewInit() {
@@ -238,10 +238,6 @@ export class BatteryLevelWidgetComponent implements OnInit, OnDestroy, AfterView
       this.batteryBoxResize$.disconnect();
     }
 
-    this.valueColor.colorUpdated.unsubscribe();
-    this.batteryLevelColor.colorUpdated.unsubscribe();
-    this.batteryShapeColor.colorUpdated.unsubscribe();
-
     this.batteryLevelColor.destroy();
     this.valueColor.destroy();
     this.batteryShapeColor.destroy();
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 e3e4810934..681913c24c 100644
--- a/ui-ngx/src/app/shared/models/widget-settings.models.ts
+++ b/ui-ngx/src/app/shared/models/widget-settings.models.ts
@@ -386,7 +386,7 @@ export abstract class ColorProcessor {
 
   color: string;
 
-  colorUpdated: EventEmitter<void> = new EventEmitter<void>();
+  colorUpdated?: EventEmitter<void>;
 
   protected constructor(protected settings: ColorSettings) {
     this.color = settings.color;
@@ -426,6 +426,8 @@ export abstract class AdvancedModeColorProcessor extends ColorProcessor {
   protected advancedMode: boolean;
   private currentValue: number;
 
+  colorUpdated = new EventEmitter<void>();
+
   protected constructor(protected settings: ColorSettings,
                         protected ctx: WidgetContext) {
     super(settings);
@@ -455,6 +457,9 @@ export abstract class AdvancedModeColorProcessor extends ColorProcessor {
     if (this.sourcesSubscription) {
       this.ctx.subscriptionApi.removeSubscription(this.sourcesSubscription.id);
     }
+    this.colorUpdated.complete();
+    this.colorUpdated.unsubscribe();
+    this.colorUpdated = null;
   }
 
   private onDataUpdated(subscription: IWidgetSubscription) {