From 7be99bb01f7c0939d8998edbfe8aeb4129d6b1ec Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Wed, 26 Jun 2024 16:35:16 +0300 Subject: [PATCH] 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;