diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html index 4780983685..c9821f1a88 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/cards/progress-bar-basic-config.component.html @@ -100,6 +100,8 @@ [previewText]="valuePreviewFn"> @@ -137,6 +139,8 @@
{{ 'widgets.progress-bar.bar-color' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html index 84deb5ceaf..9f170dff8c 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/digital-simple-gauge-basic-config.component.html @@ -53,8 +53,21 @@
- {{ 'widgets.gauge.min-and-max-value' | translate }} + {{ 'widgets.gauge.min-and-max-label' | translate }} +
+ + + + +
+
+
+
{{ 'widgets.gauge.min-and-max-value' | translate }}
widgets.gauge.min-value-short
@@ -64,14 +77,6 @@ - - - -
@@ -117,14 +122,6 @@ -
-
widgets.gauge.default-color
- - -
-
widgets.gauge.gauge-bar-background
{{ 'widgets.gauge.bar-color' | translate }}
{ - if (!settings.barColor) { - settings.barColor = constantColor(settings.gaugeColor); +export const convertLevelColorsSettingsToColorProcessor = (settings: DigitalGaugeSettings, defaultColor?: string) => { + if (settings.barColor) { + if (!settings.barColor.color) { + settings.barColor.color = defaultColor; + } + if (isDefinedAndNotNull(settings.barColor.gradient)) { + settings.barColor.gradient.minValue = settings.minValue; + settings.barColor.gradient.maxValue = settings.maxValue; + } else { + settings.barColor.gradient = defaultGradient(settings.minValue, settings.maxValue); + } + } else { + settings.barColor = constantColor(defaultColor); if (settings.fixedLevelColors?.length) { settings.barColor.rangeList = { advancedMode: settings.useFixedLevelColor, @@ -175,7 +186,9 @@ export const convertLevelColorsSettingsToColorProcessor = (settings: DigitalGaug settings.barColor.gradient = { advancedMode: false, gradient: settings.levelColors as string[], - gradientAdvanced: null + gradientAdvanced: null, + minValue: settings.minValue, + maxValue: settings.maxValue }; } if (settings.useFixedLevelColor) { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts b/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts index 9031620f84..ede5962922 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.ts @@ -60,7 +60,7 @@ export class TbCanvasDigitalGauge { this.localSettings.gaugeWidthScale = settings.gaugeWidthScale || 0.75; this.localSettings.gaugeColor = settings.gaugeColor || tinycolor(keyColor).setAlpha(0.2).toRgbString(); - convertLevelColorsSettingsToColorProcessor(settings); + convertLevelColorsSettingsToColorProcessor(settings, keyColor); this.localSettings.barColor = settings.barColor; this.localSettings.showTicks = settings.showTicks || false; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html index 7b849f0b00..f9543b11cf 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/progress-bar-widget-settings.component.html @@ -44,6 +44,8 @@ [previewText]="valuePreviewFn"> @@ -78,6 +80,8 @@
{{ 'widgets.progress-bar.bar-color' | translate }}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.html index 2c0787c778..3bd47d9921 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.html @@ -38,20 +38,22 @@
-
-
-
+
+
widgets.color.from
+
widgets.color.to
+ @@ -64,15 +66,15 @@ matTooltipPosition="above"> delete -
+
@@ -103,9 +105,10 @@
- +
+ +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.scss index 63265f6dbc..21cbd8e287 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.scss @@ -13,24 +13,32 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +@import '../../../../../../../../scss/constants'; -:host { - .range { - display: flex; - flex: 1; - align-items: center; - flex-direction: row; - - &-container { - display: flex; - flex: 1; - flex-direction: row; - align-items: center; - gap: 12px; - padding: 8px; - margin-right: 12px; - border: 1px solid rgba(0, 0, 0, 0.12); - border-radius: 6px; - } +.range-container { + display: flex; + flex: 1; + flex-direction: row; + align-items: center; + gap: 12px; + padding: 8px; + margin-right: 12px; + border: 1px solid rgba(0, 0, 0, 0.12); + border-radius: 6px; +} +.tb-add-color-range { + button { + width: 100%; + } +} +.tb-value-range-text { + width: 64px; + font-size: 14px; + color: rgba(0, 0, 0, 0.38); + @media #{$mat-xs} { + width: auto; + } + &.tb-value-range-text-to { + text-align: center; } } 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 cbc258caa7..c12ba38718 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 } from '@angular/core'; +import { Component, forwardRef, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; import { AbstractControl, ControlValueAccessor, @@ -62,7 +62,8 @@ export function advancedRangeValidator(control: AbstractControl): ValidationErro useExisting: forwardRef(() => ColorRangeListComponent), multi: true } - ] + ], + encapsulation: ViewEncapsulation.None }) export class ColorRangeListComponent implements OnInit, ControlValueAccessor, OnDestroy { @@ -108,6 +109,9 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On this.colorRangeListFormGroup.valueChanges.pipe( takeUntil(this.destroy$) ).subscribe(() => this.updateModel()); + this.colorRangeListFormGroup.get('advancedMode').valueChanges.pipe( + takeUntil(this.destroy$) + ).subscribe(() => Promise.resolve().then(() => this.popover?.updatePosition())); } ngOnDestroy() { @@ -171,6 +175,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On public removeAdvancedRange(index: number) { (this.colorRangeListFormGroup.get('rangeAdvanced') as UntypedFormArray).removeAt(index); + Promise.resolve().then(() => this.popover?.updatePosition()); } get advancedRangeFormArray(): UntypedFormArray { @@ -184,7 +189,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On removeRange(index: number) { this.rangeListFormArray.removeAt(index); this.colorRangeListFormGroup.markAsDirty(); - setTimeout(() => {this.popover?.updatePosition();}, 0); + Promise.resolve().then(() => this.popover?.updatePosition()); } rangeDrop(event: CdkDragDrop, range: string) { @@ -207,6 +212,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On const advancedRangeColorsArray = this.colorRangeListFormGroup.get('rangeAdvanced') as UntypedFormArray; const advancedRangeColorControl = this.fb.control(advancedRange, [advancedRangeValidator]); advancedRangeColorsArray.push(advancedRangeColorControl); + Promise.resolve().then(() => this.popover?.updatePosition()); } addRange() { @@ -218,7 +224,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On }; this.rangeListFormArray.push(this.colorRangeControl(newRange)); this.colorRangeListFormGroup.markAsDirty(); - setTimeout(() => {this.popover?.updatePosition();}, 0); + Promise.resolve().then(() => this.popover?.updatePosition()); } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.scss index 1b0fda35b3..31b5f3745c 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.scss @@ -55,17 +55,6 @@ } .tb-form-row { height: auto; - .tb-value-range-text { - width: 64px; - font-size: 14px; - color: rgba(0, 0, 0, 0.38); - @media #{$mat-xs} { - width: auto; - } - &.tb-value-range-text-to { - text-align: center; - } - } } button.mat-mdc-button-base.tb-add-color-range { &:not(:disabled) { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.ts index 94cb084512..89edf5323a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.ts @@ -20,7 +20,8 @@ import { ColorSettings, ColorType, colorTypeTranslations, - defaultGradient + defaultGradient, + defaultRange } from '@shared/models/widget-settings.models'; import { TbPopoverComponent } from '@shared/components/popover.component'; import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; @@ -102,12 +103,12 @@ export class ColorSettingsPanelComponent extends PageComponent implements OnInit type: [this.colorSettings?.type || ColorType.constant, []], color: [this.colorSettings?.color, []], gradient: [this.colorSettings?.gradient || defaultGradient(this.minValue, this.maxValue), []], - rangeList: [this.colorSettings?.rangeList, []], + rangeList: [this.colorSettings?.rangeList || defaultRange(), []], colorFunction: [this.colorSettings?.colorFunction, []] } ); this.colorSettingsFormGroup.get('type').valueChanges.subscribe(() => { - setTimeout(() => {this.popover?.updatePosition();}, 0); + Promise.resolve().then(() => this.popover?.updatePosition()); }); } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.ts index 11837804df..0c879f52e2 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings.component.ts @@ -103,11 +103,11 @@ export class ColorSettingsComponent implements OnInit, ControlValueAccessor, OnD @Input() @coerceNumber() - minValue: number; + minValue = 0; @Input() @coerceNumber() - maxValue: number; + maxValue = 100; colorType = ColorType; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.scss index 38f320b940..25e14cb0d5 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.scss +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.scss @@ -16,11 +16,36 @@ @import "../../../../../../../../scss/constants"; - :host { overflow: auto; height: 100%; max-height: 420px; + + .gradient-preview { + width: 100%; + padding: 40px 12px 0; + .gradient-background { + position: relative; + height: 56px; + border-radius: 8px; + } + } + + .gradient-settings { + flex: 1; + gap: 16px; + display: flex; + flex-direction: column; + } + + .tb-add-gradient { + margin-right: 92px; + @media #{$mat-lt-lg} { + margin-right: 52px; + } + } +} +::ng-deep { .gradient { display: flex; flex: 1; @@ -67,32 +92,6 @@ } } } - - .gradient-preview { - width: 100%; - padding: 40px 12px 0; - .gradient-background { - position: relative; - height: 56px; - border-radius: 8px; - } - } - - .gradient-settings { - flex: 1; - gap: 16px; - display: flex; - flex-direction: column; - } - - .tb-add-gradient { - margin-right: 92px; - @media #{$mat-lt-lg} { - margin-right: 52px; - } - } -} -::ng-deep { .gradient-background { .pointer { position: absolute; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.ts index e326cff0d4..8b78190f5a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.ts @@ -31,7 +31,7 @@ import { takeUntil } from 'rxjs/operators'; import { CdkDragDrop } from '@angular/cdk/drag-drop'; import { IAliasController } from '@core/api/widget-api.models'; import { DomSanitizer } from '@angular/platform-browser'; -import { coerceBoolean } from '@shared/decorators/coercion'; +import { coerceBoolean, coerceNumber } from '@shared/decorators/coercion'; import { isDefinedAndNotNull } from '@core/utils'; import { DataKeysCallbacks } from '@home/components/widget/config/data-keys.component.models'; import { Datasource } from '@shared/models/widget.models'; @@ -71,10 +71,12 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro datasource: Datasource; @Input() - minValue: string; + @coerceNumber() + minValue: number; @Input() - maxValue: string; + @coerceNumber() + maxValue: number; @Input() @coerceBoolean() @@ -115,6 +117,9 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro this.gradientFormGroup.valueChanges.pipe( takeUntil(this.destroy$) ).subscribe(() => this.updateModel()); + this.gradientFormGroup.get('advancedMode').valueChanges.pipe( + takeUntil(this.destroy$) + ).subscribe(() => Promise.resolve().then(() => this.popover?.updatePosition())); } ngOnDestroy() { @@ -228,7 +233,7 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro this.gradientListFormArray.removeAt(index); } this.gradientFormGroup.markAsDirty(); - setTimeout(() => {this.popover?.updatePosition();}, 0); + Promise.resolve().then(() => this.popover?.updatePosition()); } gradientDrop(event: CdkDragDrop, advanced = false) { @@ -247,7 +252,7 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro this.gradientListFormArray.push(this.colorGradientControl('rgba(0,0,0,0.87)')); } this.gradientFormGroup.markAsDirty(); - setTimeout(() => {this.popover?.updatePosition();}, 0); + Promise.resolve().then(() => this.popover?.updatePosition()); } updateModel() { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html index 86cd0ff825..62cacf0730 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.html @@ -41,8 +41,22 @@
- {{ 'widgets.gauge.min-and-max-value' | translate }} + {{ 'widgets.gauge.min-and-max-label' | translate }} +
+ + + + +
+
+ +
+
{{ 'widgets.gauge.min-and-max-value' | translate }}
widgets.gauge.min-value-short
@@ -52,14 +66,6 @@ - - - -
@@ -160,14 +166,6 @@
-
-
{{ 'widgets.gauge.default-color' | translate }}
- - -
-
{{ 'widgets.gauge.gauge-bar-background' | translate }}
{{ 'widgets.gauge.bar-color' | translate }}
- + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.ts index 9f55ad90a1..5a4289a8d2 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/digital-gauge-widget-settings.component.ts @@ -138,7 +138,7 @@ export class DigitalGaugeWidgetSettingsComponent extends WidgetSettingsComponent protected onSettingsSet(settings: WidgetSettings) { if (!settings.barColor) { - settings.barColor = constantColor(settings.gaugeColor); + settings.barColor = constantColor(settings.defaultColor || '#2196f3'); if (settings.fixedLevelColors.length) { settings.barColor.rangeList = { @@ -192,7 +192,6 @@ export class DigitalGaugeWidgetSettingsComponent extends WidgetSettingsComponent dashThickness: [settings.dashThickness, [Validators.min(0)]], roundedLineCap: [settings.roundedLineCap, []], - defaultColor: [settings.defaultColor, []], gaugeColor: [settings.gaugeColor, []], barColor: [settings.barColor], diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html index 2f83df7efa..c34b51a36b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/indicator/battery-level-widget-settings.component.html @@ -63,8 +63,6 @@ ({ + advancedMode: false, + range: [], + rangeAdvanced: [] +}); + const updateGradientMinMaxValues = (colorSettings: ColorSettings, minValue?: number, maxValue?: number): void => { if (isDefinedAndNotNull(colorSettings.gradient)) { if (isDefinedAndNotNull(minValue)) { @@ -431,7 +437,7 @@ export abstract class AdvancedModeColorProcessor extends ColorProcessor { protected constructor(protected settings: ColorSettings, protected ctx: WidgetContext) { super(settings); - this.advancedMode = this.getCurrentConfig().advancedMode; + this.advancedMode = this.getCurrentConfig()?.advancedMode; if (this.advancedMode) { createValueSubscription( this.ctx, @@ -529,7 +535,7 @@ class RangeColorProcessor extends AdvancedModeColorProcessor { this.settings.rangeList.range as Array; } - if (rangeList.length && isDefinedAndNotNull(value) && isNumeric(value)) { + if (rangeList?.length && isDefinedAndNotNull(value) && isNumeric(value)) { const num = Number(value); for (const range of rangeList) { if (advancedMode ? @@ -571,7 +577,8 @@ class GradientColorProcessor extends AdvancedModeColorProcessor { update(value: any): void { const progress = this.calculateProgress(+value, this.minValue, this.maxValue); super.update(progress); - this.color = this.getGradientColor(progress, this.settings.gradient.gradient); + this.color = this.getGradientColor(progress, + this.advancedMode ? this.settings.gradient.gradientAdvanced : this.settings.gradient.gradient); } updatedAdvancedData(data: Array) { diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 05256211f8..0fa09da5e4 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -6232,6 +6232,7 @@ "gauge-bar-background": "Gauge bar background", "bar-color": "Bar color", "min-and-max-value": "Min and max value", + "min-and-max-label": "Min and max label", "font": "Font", "tick-width-and-color": "Tick width and color" },