UI: Hotfix for range settings

ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts

@@ -104,15 +104,7 @@ export interface RangeChartWidgetSettings extends TimeSeriesChartTooltipWidgetSe
 
 export const rangeChartDefaultSettings: RangeChartWidgetSettings = {
   dataZoom: true,
-  rangeColors: [
-    {to: -20, color: '#234CC7'},
-    {from: -20, to: 0, color: '#305AD7'},
-    {from: 0, to: 10, color: '#7191EF'},
-    {from: 10, to: 20, color: '#FFA600'},
-    {from: 20, to: 30, color: '#F36900'},
-    {from: 30, to: 40, color: '#F04022'},
-    {from: 40, color: '#D81838'}
-  ],
+  rangeColors: [],
   outOfRangeColor: '#ccc',
   showRangeThresholds: true,
   rangeThreshold: mergeDeep({} as Partial<TimeSeriesChartThreshold>,

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.ts

@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
+import { ChangeDetectorRef, Component, forwardRef, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
@@ -97,7 +97,8 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
 
   private propagateChange = (v: any) => { };
 
-  constructor(private fb: UntypedFormBuilder) {}
+  constructor(private fb: UntypedFormBuilder,
+              private cd: ChangeDetectorRef) {}
 
   ngOnInit(): void {
     this.colorRangeListFormGroup = this.fb.group({
@@ -139,7 +140,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
       } else {
         rangeList = deepClone(value);
       }
-      this.colorRangeListFormGroup.get('advancedMode').patchValue(rangeList.advancedMode, {emitEvent: false});
+      this.colorRangeListFormGroup.get('advancedMode').patchValue(rangeList.advancedMode || false, {emitEvent: false});
       if (isDefinedAndNotNull(rangeList?.range)) {
         rangeList.range.forEach((r) => this.rangeListFormArray.push(this.colorRangeControl(r), {emitEvent: false}));
       }
@@ -225,6 +226,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
       this.rangeListFormArray.push(this.colorRangeControl(newRange));
       this.colorRangeListFormGroup.markAsDirty();
       setTimeout(() => {this.popover?.updatePosition();}, 0);
+      this.cd.detectChanges();
     }
   }
 

ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.ts

@@ -25,7 +25,7 @@ import {
   ViewContainerRef
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { ColorRange, ComponentStyle } from '@shared/models/widget-settings.models';
+import { ColorRange, ColorRangeSettings, ComponentStyle } from '@shared/models/widget-settings.models';
 import { MatButton } from '@angular/material/button';
 import { TbPopoverService } from '@shared/components/popover.service';
 import { ColorRangePanelComponent } from '@home/components/widget/lib/settings/common/color-range-panel.component';
@@ -109,7 +109,7 @@ export class ColorRangeSettingsComponent implements OnInit, ControlValueAccessor
   }
 
   writeValue(value: Array<ColorRange>): void {
-    this.modelValue = value;
+    this.modelValue = ('range' in value) ? value.range as Array<ColorRange> : value;
     this.updateColorStyle();
   }
 
@@ -131,9 +131,9 @@ export class ColorRangeSettingsComponent implements OnInit, ControlValueAccessor
         {},
         {}, {}, true);
       colorRangeSettingsPanelPopover.tbComponentRef.instance.popover = colorRangeSettingsPanelPopover;
-      colorRangeSettingsPanelPopover.tbComponentRef.instance.colorRangeApplied.subscribe((colorRangeSettings) => {
+      colorRangeSettingsPanelPopover.tbComponentRef.instance.colorRangeApplied.subscribe((colorRangeSettings: ColorRangeSettings) => {
         colorRangeSettingsPanelPopover.hide();
-        this.modelValue = colorRangeSettings;
+        this.modelValue = colorRangeSettings.range;
         this.updateColorStyle();
         this.propagateChange(this.modelValue);
       });

ui-ngx/src/app/shared/models/widget-settings.models.ts

@@ -195,8 +195,8 @@ export const colorRangeIncludes = (range: ColorRange, toCheck: ColorRange): bool
   }
 };
 
-export const filterIncludingColorRanges = (ranges: Array<ColorRange>): Array<ColorRange> => {
-  const result = [...ranges];
+export const filterIncludingColorRanges = (ranges: Array<ColorRange> | ColorRangeSettings): Array<ColorRange> => {
+  const result = [...(Array.isArray(ranges) ? ranges : ranges.range)];
   let includes = true;
   while (includes) {
     let index = -1;