Merge pull request #11096 from ArtemDzhereleiko/AD/hot-fix/range-settings

Hotfix for range settings

ui-ngx/src/app/core/utils.ts

@@ -364,6 +364,16 @@ export function mergeDeep<T>(target: T, ...sources: T[]): T {
   return _.merge(target, ...sources);
 }
 
+function ignoreArrayMergeFunc(target: any, sources: any) {
+  if (_.isArray(target)) {
+    return sources;
+  }
+}
+
+export function mergeDeepIgnoreArray<T>(target: T, ...sources: T[]): T {
+  return _.mergeWith(target, ...sources, ignoreArrayMergeFunc);
+}
+
 export function guid(): string {
   function s4(): string {
     return Math.floor((1 + Math.random()) * 0x10000)

ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.ts

@@ -33,7 +33,7 @@ import {
   getTimewindowConfig,
   setTimewindowConfig
 } from '@home/components/widget/config/timewindow-config-panel.component';
-import { formatValue, isUndefined, mergeDeep } from '@core/utils';
+import { formatValue, isUndefined, mergeDeepIgnoreArray } from '@core/utils';
 import {
   cssSizeToStrSize,
   DateFormatProcessor,
@@ -117,7 +117,7 @@ export class RangeChartBasicConfigComponent extends BasicWidgetConfigComponent {
   }
 
   protected onConfigSet(configData: WidgetConfigComponentData) {
-    const settings: RangeChartWidgetSettings = mergeDeep<RangeChartWidgetSettings>({} as RangeChartWidgetSettings,
+    const settings: RangeChartWidgetSettings = mergeDeepIgnoreArray<RangeChartWidgetSettings>({} as RangeChartWidgetSettings,
       rangeChartDefaultSettings, configData.config.settings as RangeChartWidgetSettings);
     const iconSize = resolveCssSize(configData.config.iconSize);
     this.rangeChartWidgetConfigForm = this.fb.group({

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

@@ -25,7 +25,7 @@ import {
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { formatValue, mergeDeep } from '@core/utils';
+import { formatValue, mergeDeepIgnoreArray } from '@core/utils';
 import {
   rangeChartDefaultSettings,
   RangeChartWidgetSettings
@@ -99,7 +99,7 @@ export class RangeChartWidgetSettingsComponent extends WidgetSettingsComponent {
   }
 
   protected defaultSettings(): WidgetSettings {
-    return mergeDeep<RangeChartWidgetSettings>({} as RangeChartWidgetSettings, rangeChartDefaultSettings);
+    return mergeDeepIgnoreArray<RangeChartWidgetSettings>({} as RangeChartWidgetSettings, rangeChartDefaultSettings);
   }
 
   protected onSettingsSet(settings: WidgetSettings) {

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

@@ -139,7 +139,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}));
       }

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

@@ -16,7 +16,7 @@
 
 import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
-import { ColorRange } from '@shared/models/widget-settings.models';
+import { ColorRange, ColorRangeSettings } from '@shared/models/widget-settings.models';
 import { TbPopoverComponent } from '@shared/components/popover.component';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
@@ -71,8 +71,8 @@ export class ColorRangePanelComponent extends PageComponent implements OnInit {
   }
 
   applyColorRangeSettings() {
-    const colorRangeSettings = this.colorRangeFormGroup.get('rangeList').value;
-    this.colorRangeApplied.emit(colorRangeSettings);
+    const colorRangeSettings: ColorRangeSettings = this.colorRangeFormGroup.get('rangeList').value;
+    this.colorRangeApplied.emit(colorRangeSettings.range);
   }
 
 }

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';
@@ -108,8 +108,8 @@ export class ColorRangeSettingsComponent implements OnInit, ControlValueAccessor
     this.updateColorStyle();
   }
 
-  writeValue(value: Array<ColorRange>): void {
-    this.modelValue = value;
+  writeValue(value: Array<ColorRange> | ColorRangeSettings): void {
+    this.modelValue = Array.isArray(value) ? value : value.range;
     this.updateColorStyle();
   }
 
@@ -131,7 +131,7 @@ export class ColorRangeSettingsComponent implements OnInit, ControlValueAccessor
         {},
         {}, {}, true);
       colorRangeSettingsPanelPopover.tbComponentRef.instance.popover = colorRangeSettingsPanelPopover;
-      colorRangeSettingsPanelPopover.tbComponentRef.instance.colorRangeApplied.subscribe((colorRangeSettings) => {
+      colorRangeSettingsPanelPopover.tbComponentRef.instance.colorRangeApplied.subscribe((colorRangeSettings: Array<ColorRange>) => {
         colorRangeSettingsPanelPopover.hide();
         this.modelValue = colorRangeSettings;
         this.updateColorStyle();

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;

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

@@ -37,7 +37,7 @@ import { AbstractControl, UntypedFormGroup } from '@angular/forms';
 import { Observable } from 'rxjs';
 import { Dashboard } from '@shared/models/dashboard.models';
 import { IAliasController } from '@core/api/widget-api.models';
-import { isNotEmptyStr, mergeDeep } from '@core/utils';
+import { isNotEmptyStr, mergeDeepIgnoreArray } from '@core/utils';
 import { WidgetConfigComponentData } from '@home/models/widget-component.models';
 import { ComponentStyle, Font, TimewindowStyle } from '@shared/models/widget-settings.models';
 import { NULL_UUID } from '@shared/models/id/has-uuid';
@@ -878,7 +878,7 @@ export abstract class WidgetSettingsComponent extends PageComponent implements
     if (!value) {
       this.settingsValue = this.defaultSettings();
     } else {
-      this.settingsValue = mergeDeep(this.defaultSettings(), value);
+      this.settingsValue = mergeDeepIgnoreArray(this.defaultSettings(), value);
     }
     if (!this.settingsSet) {
       this.settingsSet = true;