UI: Add func merge deep ignore array

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 customizer(target: any, sources: any) {
+  if (_.isArray(target)) {
+    return sources;
+  }
+}
+
+export function mergeDeepIgnoreArray<T>(target: T, ...sources: T[]): T {
+  return _.mergeWith(target, ...sources, customizer);
+}
+
 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/chart/range-chart-widget.models.ts

@@ -104,7 +104,15 @@ export interface RangeChartWidgetSettings extends TimeSeriesChartTooltipWidgetSe
 
 export const rangeChartDefaultSettings: RangeChartWidgetSettings = {
   dataZoom: true,
-  rangeColors: [],
+  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'}
+  ],
   outOfRangeColor: '#ccc',
   showRangeThresholds: true,
   rangeThreshold: mergeDeep({} as Partial<TimeSeriesChartThreshold>,

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-settings.component.ts

@@ -108,8 +108,8 @@ export class ColorRangeSettingsComponent implements OnInit, ControlValueAccessor
     this.updateColorStyle();
   }
 
-  writeValue(value: Array<ColorRange>): void {
-    this.modelValue = ('range' in value) ? value.range as Array<ColorRange> : value;
+  writeValue(value: Array<ColorRange> | ColorRangeSettings): void {
+    this.modelValue = Array.isArray(value) ? value : value.range;
     this.updateColorStyle();
   }
 

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;