From 7be99bb01f7c0939d8998edbfe8aeb4129d6b1ec Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Wed, 26 Jun 2024 16:35:16 +0300 Subject: [PATCH 1/5] UI: Hotfix for range settings --- .../widget/lib/chart/range-chart-widget.models.ts | 10 +--------- .../lib/settings/common/color-range-list.component.ts | 8 +++++--- .../settings/common/color-range-settings.component.ts | 8 ++++---- ui-ngx/src/app/shared/models/widget-settings.models.ts | 4 ++-- 4 files changed, 12 insertions(+), 18 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts index 5b3fb52689..1cd9bae402 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts +++ b/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, diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.ts index fcfd5f47e5..1c71850cb5 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.ts +++ b/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(); } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.ts index 5770f45c99..45180387d3 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.ts +++ b/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): void { - this.modelValue = value; + this.modelValue = ('range' in value) ? value.range as Array : 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); }); 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 5124458ff0..186ffede00 100644 --- a/ui-ngx/src/app/shared/models/widget-settings.models.ts +++ b/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): Array => { - const result = [...ranges]; +export const filterIncludingColorRanges = (ranges: Array | ColorRangeSettings): Array => { + const result = [...(Array.isArray(ranges) ? ranges : ranges.range)]; let includes = true; while (includes) { let index = -1; From c4c55980fb922d1d013a9b95ee695039a968a8a2 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Wed, 26 Jun 2024 16:42:03 +0300 Subject: [PATCH 2/5] UI: Refactoring --- .../lib/settings/common/color-range-list.component.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.ts index 1c71850cb5..aa69b05d75 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.ts +++ b/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 { ChangeDetectorRef, Component, forwardRef, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { Component, forwardRef, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { AbstractControl, ControlValueAccessor, @@ -97,8 +97,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On private propagateChange = (v: any) => { }; - constructor(private fb: UntypedFormBuilder, - private cd: ChangeDetectorRef) {} + constructor(private fb: UntypedFormBuilder) {} ngOnInit(): void { this.colorRangeListFormGroup = this.fb.group({ @@ -226,7 +225,6 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On this.rangeListFormArray.push(this.colorRangeControl(newRange)); this.colorRangeListFormGroup.markAsDirty(); setTimeout(() => {this.popover?.updatePosition();}, 0); - this.cd.detectChanges(); } } From 583ef8fe02c875da02804e06bee8c34286cf7f8c Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Mon, 1 Jul 2024 15:04:36 +0300 Subject: [PATCH 3/5] UI: Add func merge deep ignore array --- ui-ngx/src/app/core/utils.ts | 10 ++++++++++ .../basic/chart/range-chart-basic-config.component.ts | 4 ++-- .../widget/lib/chart/range-chart-widget.models.ts | 10 +++++++++- .../chart/range-chart-widget-settings.component.ts | 4 ++-- .../settings/common/color-range-settings.component.ts | 4 ++-- ui-ngx/src/app/shared/models/widget.models.ts | 4 ++-- 6 files changed, 27 insertions(+), 9 deletions(-) diff --git a/ui-ngx/src/app/core/utils.ts b/ui-ngx/src/app/core/utils.ts index dc9ed5004b..f1283523e1 100644 --- a/ui-ngx/src/app/core/utils.ts +++ b/ui-ngx/src/app/core/utils.ts @@ -364,6 +364,16 @@ export function mergeDeep(target: T, ...sources: T[]): T { return _.merge(target, ...sources); } +function customizer(target: any, sources: any) { + if (_.isArray(target)) { + return sources; + } +} + +export function mergeDeepIgnoreArray(target: T, ...sources: T[]): T { + return _.mergeWith(target, ...sources, customizer); +} + export function guid(): string { function s4(): string { return Math.floor((1 + Math.random()) * 0x10000) diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.ts index 8e29d43a3e..85666ef91e 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/chart/range-chart-basic-config.component.ts +++ b/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({} as RangeChartWidgetSettings, + const settings: RangeChartWidgetSettings = mergeDeepIgnoreArray({} as RangeChartWidgetSettings, rangeChartDefaultSettings, configData.config.settings as RangeChartWidgetSettings); const iconSize = resolveCssSize(configData.config.iconSize); this.rangeChartWidgetConfigForm = this.fb.group({ diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts index 1cd9bae402..5b3fb52689 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/chart/range-chart-widget.models.ts +++ b/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, diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.ts index 2dd34a10d7..9392c9f277 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/chart/range-chart-widget-settings.component.ts +++ b/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({} as RangeChartWidgetSettings, rangeChartDefaultSettings); + return mergeDeepIgnoreArray({} as RangeChartWidgetSettings, rangeChartDefaultSettings); } protected onSettingsSet(settings: WidgetSettings) { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.ts index 45180387d3..0db430c943 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.ts +++ b/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): void { - this.modelValue = ('range' in value) ? value.range as Array : value; + writeValue(value: Array | ColorRangeSettings): void { + this.modelValue = Array.isArray(value) ? value : value.range; this.updateColorStyle(); } diff --git a/ui-ngx/src/app/shared/models/widget.models.ts b/ui-ngx/src/app/shared/models/widget.models.ts index 050c655de9..b4b47cd75f 100644 --- a/ui-ngx/src/app/shared/models/widget.models.ts +++ b/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; From aa23fa27229ae3d7b68bfe7a8f8a033f087f02f2 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Mon, 1 Jul 2024 15:10:14 +0300 Subject: [PATCH 4/5] UI: Refactoring function name --- ui-ngx/src/app/core/utils.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui-ngx/src/app/core/utils.ts b/ui-ngx/src/app/core/utils.ts index f1283523e1..a534f157b7 100644 --- a/ui-ngx/src/app/core/utils.ts +++ b/ui-ngx/src/app/core/utils.ts @@ -364,14 +364,14 @@ export function mergeDeep(target: T, ...sources: T[]): T { return _.merge(target, ...sources); } -function customizer(target: any, sources: any) { +function ignoreArrayMergeFunc(target: any, sources: any) { if (_.isArray(target)) { return sources; } } export function mergeDeepIgnoreArray(target: T, ...sources: T[]): T { - return _.mergeWith(target, ...sources, customizer); + return _.mergeWith(target, ...sources, ignoreArrayMergeFunc); } export function guid(): string { From 17fdef4ce116184095a3c94b012785413adc42e7 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Mon, 1 Jul 2024 17:00:21 +0300 Subject: [PATCH 5/5] UI: Refactoring --- .../lib/settings/common/color-range-panel.component.ts | 6 +++--- .../lib/settings/common/color-range-settings.component.ts | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-panel.component.ts index b4baf12dad..18ec18963f 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-panel.component.ts +++ b/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); } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.ts index 0db430c943..54c8be65b8 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-settings.component.ts @@ -131,9 +131,9 @@ export class ColorRangeSettingsComponent implements OnInit, ControlValueAccessor {}, {}, {}, true); colorRangeSettingsPanelPopover.tbComponentRef.instance.popover = colorRangeSettingsPanelPopover; - colorRangeSettingsPanelPopover.tbComponentRef.instance.colorRangeApplied.subscribe((colorRangeSettings: ColorRangeSettings) => { + colorRangeSettingsPanelPopover.tbComponentRef.instance.colorRangeApplied.subscribe((colorRangeSettings: Array) => { colorRangeSettingsPanelPopover.hide(); - this.modelValue = colorRangeSettings.range; + this.modelValue = colorRangeSettings; this.updateColorStyle(); this.propagateChange(this.modelValue); });