From 384c5db08415ac93915204cbfb8a4086ad442677 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Fri, 20 Oct 2023 15:34:58 +0300 Subject: [PATCH] UI: Basic settings for gauge --- .../basic/basic-widget-config.module.ts | 30 ++- .../analog-gauge-basic-config.component.html | 183 +++++++++++++++ .../analog-gauge-basic-config.component.ts | 213 ++++++++++++++++++ .../compass-gauge-basic-config.component.html | 154 +++++++++++++ .../compass-gauge-basic-config.component.ts | 188 ++++++++++++++++ .../radial-gauge-basic-config.component.ts | 54 +++++ .../speed-gauge-basic-config.component.ts | 54 +++++ ...eter-scale-gauge-basic-config.component.ts | 68 ++++++ .../assets/locale/locale.constant-en_US.json | 16 +- 9 files changed, 956 insertions(+), 4 deletions(-) create mode 100644 ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.html create mode 100644 ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/radial-gauge-basic-config.component.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/speed-gauge-basic-config.component.ts create mode 100644 ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/thermometer-scale-gauge-basic-config.component.ts diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts index c26cf43542..a3d5b27610 100644 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/basic-widget-config.module.ts @@ -70,6 +70,18 @@ import { import { ProgressBarBasicConfigComponent } from '@home/components/widget/config/basic/cards/progress-bar-basic-config.component'; +import { + RadialGaugeBasicConfigComponent +} from '@home/components/widget/config/basic/gauge/radial-gauge-basic-config.component'; +import { + SpeedGaugeBasicConfigComponent +} from '@home/components/widget/config/basic/gauge/speed-gauge-basic-config.component'; +import { + ThermometerScaleGaugeBasicConfigComponent +} from '@home/components/widget/config/basic/gauge/thermometer-scale-gauge-basic-config.component'; +import { + CompassGaugeBasicConfigComponent +} from '@home/components/widget/config/basic/gauge/compass-gauge-basic-config.component'; @NgModule({ declarations: [ @@ -91,7 +103,11 @@ import { WindSpeedDirectionBasicConfigComponent, SignalStrengthBasicConfigComponent, ValueChartCardBasicConfigComponent, - ProgressBarBasicConfigComponent + ProgressBarBasicConfigComponent, + RadialGaugeBasicConfigComponent, + SpeedGaugeBasicConfigComponent, + ThermometerScaleGaugeBasicConfigComponent, + CompassGaugeBasicConfigComponent ], imports: [ CommonModule, @@ -117,7 +133,11 @@ import { WindSpeedDirectionBasicConfigComponent, SignalStrengthBasicConfigComponent, ValueChartCardBasicConfigComponent, - ProgressBarBasicConfigComponent + ProgressBarBasicConfigComponent, + RadialGaugeBasicConfigComponent, + SpeedGaugeBasicConfigComponent, + ThermometerScaleGaugeBasicConfigComponent, + CompassGaugeBasicConfigComponent ] }) export class BasicWidgetConfigModule { @@ -137,5 +157,9 @@ export const basicWidgetConfigComponentsMap: {[key: string]: Type + + + + + +
+
widgets.gauge.gauge-appearance
+
+ + {{ 'widgets.gauge.units-title' | translate }} + +
+ + + + + + + +
+
+ +
+
widget-config.units-short
+
+ + + + + + +
+
+ +
+ + {{ 'widgets.gauge.value' | translate }} + +
+ + +
widget-config.decimals-suffix
+ + + + + +
+
+ +
+
widgets.gauge.ticks
+
+
widgets.gauge.min-value-short
+ + + +
widgets.gauge.max-value-short
+ + + + + + + +
+
+ +
+
widgets.gauge.arrow-and-scale-color
+ + +
+
+
widgets.gauge.plate-color
+ + +
+
+
widgets.gauge.scale-color
+ + + +
+ +
+
widgets.gauge.progress-bar
+
+
widgets.gauge.progress-bar-color-start
+ + +
+
+
widgets.gauge.progress-bar-color-end
+ + +
+
+
widgets.gauge.bar-stroke-color
+ + +
+
+ +
+
+
widget-config.card-appearance
+
+
{{ 'widget-config.background-color' | translate }}
+ + +
+
+
widget-config.show-card-buttons
+ + {{ 'fullscreen.fullscreen' | translate }} + +
+
+
{{ 'widget-config.card-border-radius' | translate }}
+ + + +
+
+ + + diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.ts new file mode 100644 index 0000000000..bd82ab253a --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/analog-gauge-basic-config.component.ts @@ -0,0 +1,213 @@ +/// +/// Copyright © 2016-2023 The Thingsboard Authors +/// +/// Licensed under the Apache License, Version 2.0 (the "License"); +/// you may not use this file except in compliance with the License. +/// You may obtain a copy of the License at +/// +/// http://www.apache.org/licenses/LICENSE-2.0 +/// +/// Unless required by applicable law or agreed to in writing, software +/// distributed under the License is distributed on an "AS IS" BASIS, +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// See the License for the specific language governing permissions and +/// limitations under the License. +/// + +import { ChangeDetectorRef, Component, Injector } from '@angular/core'; +import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models'; +import { WidgetConfigComponentData } from '@home/models/widget-component.models'; +import { + DataKey, + datasourcesHasAggregation, + datasourcesHasOnlyComparisonAggregation, + WidgetConfig, +} from '@shared/models/widget.models'; +import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; +import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; +import { + getTimewindowConfig, + setTimewindowConfig +} from '@home/components/widget/config/timewindow-config-panel.component'; +import { formatValue, isDefinedAndNotNull, isUndefined } from '@core/utils'; +import { + ColorType, + DateFormatProcessor, + DateFormatSettings, + getLabel, + setLabel +} from '@shared/models/widget-settings.models'; +import { + valueCardDefaultSettings, + ValueCardLayout, + valueCardLayoutImages, + valueCardLayouts, + valueCardLayoutTranslations, + ValueCardWidgetSettings +} from '@home/components/widget/lib/cards/value-card-widget.models'; + +// @Component({ +// selector: 'tb-radial-gauge-basic-config', +// templateUrl: './analog-gauge-basic-config.component.html', +// styleUrls: ['../basic-config.scss'] +// }) +export class GaugeBasicConfigComponent extends BasicWidgetConfigComponent { + + public get displayTimewindowConfig(): boolean { + const datasources = this.radialGaugeWidgetConfigForm.get('datasources').value; + return datasourcesHasAggregation(datasources); + } + + public onlyHistoryTimewindow(): boolean { + const datasources = this.radialGaugeWidgetConfigForm.get('datasources').value; + return datasourcesHasOnlyComparisonAggregation(datasources); + } + + colorType = ColorType; + + radialGaugeWidgetConfigForm: UntypedFormGroup; + + valuePreviewFn = this._valuePreviewFn.bind(this); + + constructor(protected store: Store, + protected widgetConfigComponent: WidgetConfigComponent, + protected fb: UntypedFormBuilder) { + super(store, widgetConfigComponent); + } + + protected configForm(): UntypedFormGroup { + return this.radialGaugeWidgetConfigForm; + } + + protected setupDefaults(configData: WidgetConfigComponentData, key?: DataKey[]) { + this.setupDefaultDatasource(configData, key); + } + + protected onConfigSet(configData: WidgetConfigComponentData) { + this.radialGaugeWidgetConfigForm = this.fb.group({ + timewindowConfig: [getTimewindowConfig(configData.config), []], + datasources: [configData.config.datasources, []], + + showUnitTitle: [configData.config.settings?.showUnitTitle, []], + unitTitle: [configData.config.settings?.unitTitle, []], + titleFont: [configData.config.settings?.titleFont, []], + titleColor: [configData.config.settings?.titleFont.color, []], + + units: [configData.config.units, []], + unitsFont: [configData.config.settings?.unitsFont, []], + unitsColor: [configData.config.settings?.unitsFont.color, []], + + valueBox: [configData.config.settings?.valueBox, []], + valueInt: [configData.config.settings?.valueInt, []], + valueFont: [configData.config.settings?.valueFont, []], + valueColor: [configData.config.settings?.valueFont.color, []], + + minValue: [configData.config.settings?.minValue, []], + maxValue: [configData.config.settings?.maxValue, []], + numbersFont: [configData.config.settings?.numbersFont, []], + numbersColor: [configData.config.settings?.numbersFont.color, []], + + colorBarStroke: [configData.config.settings?.colorBarStroke, []], + + defaultColor: [configData.config.settings?.defaultColor, []], + colorPlate: [configData.config.settings?.colorPlate, []], + highlights: [{ + type: 'range', + rangeList: configData.config.settings?.highlights + }, []], + + cardButtons: [this.getCardButtons(configData.config), []], + borderRadius: [configData.config.borderRadius, []], + backgroundColor: [configData.config.backgroundColor, []], + actions: [configData.config.actions || {}, []] + }); + } + + protected prepareOutputConfig(config: any): WidgetConfigComponentData { + setTimewindowConfig(this.widgetConfig.config, config.timewindowConfig); + this.widgetConfig.config.datasources = config.datasources; + // setLabel(config.label, this.widgetConfig.config.datasources); + this.widgetConfig.config.actions = config.actions; + + this.widgetConfig.config.settings = this.widgetConfig.config.settings || {}; + this.setCardButtons(config.cardButtons, this.widgetConfig.config); + this.widgetConfig.config.backgroundColor = config.backgroundColor; + + this.widgetConfig.config.settings.showUnitTitle = config.showUnitTitle; + this.widgetConfig.config.settings.unitTitle = config.unitTitle; + this.widgetConfig.config.settings.titleFont = config.titleFont; + this.widgetConfig.config.settings.titleFont.color = config.titleColor; + + this.widgetConfig.config.units = config.units; + this.widgetConfig.config.settings.unitsFont = config.unitsFont; + this.widgetConfig.config.settings.unitsFont.color = config.unitsColor; + + this.widgetConfig.config.settings.valueBox = config.valueBox; + this.widgetConfig.config.settings.valueInt = config.valueInt; + this.widgetConfig.config.settings.valueFont = config.valueFont; + this.widgetConfig.config.settings.valueFont.color = config.valueColor; + + this.widgetConfig.config.settings.minValue = config.minValue; + this.widgetConfig.config.settings.maxValue = config.maxValue; + this.widgetConfig.config.settings.numbersFont = config.numbersFont; + this.widgetConfig.config.settings.numbersFont.color = config.numbersColor; + + this.widgetConfig.config.settings.defaultColor = config.defaultColor; + this.widgetConfig.config.settings.colorPlate = config.colorPlate; + this.widgetConfig.config.settings.highlights = config.highlights.rangeList; + return this.widgetConfig; + } + + protected validatorTriggers(): string[] { + return ['showUnitTitle', 'valueBox']; + } + + protected updateValidators(emitEvent: boolean, trigger?: string) { + const showUnitTitle: boolean = this.radialGaugeWidgetConfigForm.get('showUnitTitle').value; + const valueBox: boolean = this.radialGaugeWidgetConfigForm.get('valueBox').value; + if (showUnitTitle) { + this.radialGaugeWidgetConfigForm.get('unitTitle').enable(); + this.radialGaugeWidgetConfigForm.get('titleFont').enable(); + this.radialGaugeWidgetConfigForm.get('titleColor').enable(); + } else { + this.radialGaugeWidgetConfigForm.get('unitTitle').disable(); + this.radialGaugeWidgetConfigForm.get('titleFont').disable(); + this.radialGaugeWidgetConfigForm.get('titleColor').disable(); + } + if (valueBox) { + this.radialGaugeWidgetConfigForm.get('valueInt').enable(); + this.radialGaugeWidgetConfigForm.get('valueFont').enable(); + this.radialGaugeWidgetConfigForm.get('valueColor').enable(); + } else { + this.radialGaugeWidgetConfigForm.get('valueInt').disable(); + this.radialGaugeWidgetConfigForm.get('valueFont').disable(); + this.radialGaugeWidgetConfigForm.get('valueColor').disable(); + } + this.radialGaugeWidgetConfigForm.get('unitTitle').updateValueAndValidity({emitEvent}); + this.radialGaugeWidgetConfigForm.get('titleFont').updateValueAndValidity({emitEvent}); + this.radialGaugeWidgetConfigForm.get('titleColor').updateValueAndValidity({emitEvent}); + this.radialGaugeWidgetConfigForm.get('valueInt').updateValueAndValidity({emitEvent}); + this.radialGaugeWidgetConfigForm.get('valueFont').updateValueAndValidity({emitEvent}); + this.radialGaugeWidgetConfigForm.get('valueColor').updateValueAndValidity({emitEvent}); + } + + private getCardButtons(config: WidgetConfig): string[] { + const buttons: string[] = []; + if (isUndefined(config.enableFullscreen) || config.enableFullscreen) { + buttons.push('fullscreen'); + } + return buttons; + } + + private setCardButtons(buttons: string[], config: WidgetConfig) { + config.enableFullscreen = buttons.includes('fullscreen'); + } + + private _valuePreviewFn(): string { + const units: string = this.radialGaugeWidgetConfigForm.get('units').value; + return formatValue(22, 0, units, true); + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.html new file mode 100644 index 0000000000..fec518cc8d --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.html @@ -0,0 +1,154 @@ + + + + + + + +
+
widget-config.appearance
+
+ + {{ 'widget-config.title' | translate }} + +
+ + + + + + + +
+
+
+ + {{ 'widget-config.icon' | translate }} + +
+ + + + +
+
+
+ +
+
widgets.gauge.compass-appearance
+
+
widgets.gauge.labels
+
+ + +
+
+
+
widgets.gauge.label-style
+
+ + + + +
+
+ +
+
widgets.gauge.major-ticks-color
+ + +
+
+
widgets.gauge.minor-ticks-color
+ + +
+
+
widgets.gauge.needle-color
+ + +
+
+
widgets.gauge.plate-color
+ + +
+
+ +
+
widget-config.card-appearance
+
+
{{ 'widget-config.background-color' | translate }}
+ + +
+
+
widget-config.show-card-buttons
+ + {{ 'fullscreen.fullscreen' | translate }} + +
+
+
{{ 'widget-config.card-border-radius' | translate }}
+ + + +
+
+ + + diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.ts new file mode 100644 index 0000000000..633e3c28f2 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/compass-gauge-basic-config.component.ts @@ -0,0 +1,188 @@ +/// +/// Copyright © 2016-2023 The Thingsboard Authors +/// +/// Licensed under the Apache License, Version 2.0 (the "License"); +/// you may not use this file except in compliance with the License. +/// You may obtain a copy of the License at +/// +/// http://www.apache.org/licenses/LICENSE-2.0 +/// +/// Unless required by applicable law or agreed to in writing, software +/// distributed under the License is distributed on an "AS IS" BASIS, +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// See the License for the specific language governing permissions and +/// limitations under the License. +/// + +import { ChangeDetectorRef, Component, Injector } from '@angular/core'; +import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { BasicWidgetConfigComponent } from '@home/components/widget/config/widget-config.component.models'; +import { WidgetConfigComponentData } from '@home/models/widget-component.models'; +import { + DataKey, + datasourcesHasAggregation, + datasourcesHasOnlyComparisonAggregation, + WidgetConfig, +} from '@shared/models/widget.models'; +import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; +import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; +import { + getTimewindowConfig, + setTimewindowConfig +} from '@home/components/widget/config/timewindow-config-panel.component'; +import { formatValue, isDefinedAndNotNull, isUndefined } from '@core/utils'; +import { + ColorType, + DateFormatProcessor, + DateFormatSettings, + getLabel, + setLabel +} from '@shared/models/widget-settings.models'; +import { + valueCardDefaultSettings, + ValueCardLayout, + valueCardLayoutImages, + valueCardLayouts, + valueCardLayoutTranslations, + ValueCardWidgetSettings +} from '@home/components/widget/lib/cards/value-card-widget.models'; + +@Component({ + selector: 'tb-compass-gauge-basic-config', + templateUrl: './compass-gauge-basic-config.component.html', + styleUrls: ['../basic-config.scss'] +}) +export class CompassGaugeBasicConfigComponent extends BasicWidgetConfigComponent { + + public get displayTimewindowConfig(): boolean { + const datasources = this.compassGaugeWidgetConfigForm.get('datasources').value; + return datasourcesHasAggregation(datasources); + } + + public onlyHistoryTimewindow(): boolean { + const datasources = this.compassGaugeWidgetConfigForm.get('datasources').value; + return datasourcesHasOnlyComparisonAggregation(datasources); + } + + compassGaugeWidgetConfigForm: UntypedFormGroup; + + constructor(protected store: Store, + protected widgetConfigComponent: WidgetConfigComponent, + protected fb: UntypedFormBuilder) { + super(store, widgetConfigComponent); + } + + protected configForm(): UntypedFormGroup { + return this.compassGaugeWidgetConfigForm; + } + + protected setupDefaults(configData: WidgetConfigComponentData) { + this.setupDefaultDatasource(configData, [{ name: 'direction', label: 'Direction', type: DataKeyType.timeseries }]); + } + + protected onConfigSet(configData: WidgetConfigComponentData) { + this.compassGaugeWidgetConfigForm = this.fb.group({ + timewindowConfig: [getTimewindowConfig(configData.config), []], + datasources: [configData.config.datasources, []], + + showTitle: [configData.config.showTitle, []], + title: [configData.config.title, []], + titleFont: [configData.config.titleFont, []], + titleColor: [configData.config.titleColor, []], + showTitleIcon: [configData.config.showTitleIcon, []], + titleIcon: [configData.config.titleIcon, []], + iconColor: [configData.config.iconColor, []], + + majorTicks: [configData.config.settings?.majorTicks, []], + majorTickFont: [configData.config.settings?.majorTickFont, []], + majorTickColor: [configData.config.settings?.majorTickFont.color, []], + colorMajorTicks: [configData.config.settings?.colorMajorTicks, []], + colorMinorTicks: [configData.config.settings?.colorMinorTicks, []], + colorPlate: [configData.config.settings?.colorPlate, []], + colorNeedle: [configData.config.settings?.colorNeedle, []], + + cardButtons: [this.getCardButtons(configData.config), []], + borderRadius: [configData.config.borderRadius, []], + backgroundColor: [configData.config.backgroundColor, []], + actions: [configData.config.actions || {}, []] + }); + } + + protected prepareOutputConfig(config: any): WidgetConfigComponentData { + setTimewindowConfig(this.widgetConfig.config, config.timewindowConfig); + this.widgetConfig.config.datasources = config.datasources; + this.widgetConfig.config.actions = config.actions; + + this.widgetConfig.config.showTitle = config.showTitle; + this.widgetConfig.config.title = config.title; + this.widgetConfig.config.titleFont = config.titleFont; + this.widgetConfig.config.titleColor = config.titleColor; + this.widgetConfig.config.showTitleIcon = config.showTitleIcon; + this.widgetConfig.config.titleIcon = config.titleIcon; + this.widgetConfig.config.iconColor = config.iconColor; + + this.widgetConfig.config.settings = this.widgetConfig.config.settings || {}; + this.setCardButtons(config.cardButtons, this.widgetConfig.config); + this.widgetConfig.config.backgroundColor = config.backgroundColor; + + this.widgetConfig.config.settings.majorTicks = config.majorTicks; + this.widgetConfig.config.settings.majorTickFont = config.majorTickFont; + this.widgetConfig.config.settings.majorTickFont.color = config.majorTickColor; + this.widgetConfig.config.settings.colorMajorTicks = config.colorMajorTicks; + this.widgetConfig.config.settings.colorMinorTicks = config.colorMinorTicks; + this.widgetConfig.config.settings.colorPlate = config.colorPlate; + this.widgetConfig.config.settings.colorNeedle = config.colorNeedle; + + return this.widgetConfig; + } + + protected validatorTriggers(): string[] { + return ['showTitle', 'showTitleIcon']; + } + + protected updateValidators(emitEvent: boolean, trigger?: string) { + const showTitle: boolean = this.compassGaugeWidgetConfigForm.get('showTitle').value; + const showTitleIcon: boolean = this.compassGaugeWidgetConfigForm.get('showTitleIcon').value; + if (showTitle) { + this.compassGaugeWidgetConfigForm.get('title').enable(); + this.compassGaugeWidgetConfigForm.get('titleFont').enable(); + this.compassGaugeWidgetConfigForm.get('titleColor').enable(); + this.compassGaugeWidgetConfigForm.get('showTitleIcon').enable({emitEvent: false}); + if (showTitleIcon) { + this.compassGaugeWidgetConfigForm.get('titleIcon').enable(); + this.compassGaugeWidgetConfigForm.get('iconColor').enable(); + } else { + this.compassGaugeWidgetConfigForm.get('titleIcon').disable(); + this.compassGaugeWidgetConfigForm.get('iconColor').disable(); + } + } else { + this.compassGaugeWidgetConfigForm.get('title').disable(); + this.compassGaugeWidgetConfigForm.get('titleFont').disable(); + this.compassGaugeWidgetConfigForm.get('titleColor').disable(); + this.compassGaugeWidgetConfigForm.get('showTitleIcon').disable({emitEvent: false}); + this.compassGaugeWidgetConfigForm.get('titleIcon').disable(); + this.compassGaugeWidgetConfigForm.get('iconColor').disable(); + } + this.compassGaugeWidgetConfigForm.get('title').updateValueAndValidity({emitEvent}); + this.compassGaugeWidgetConfigForm.get('titleFont').updateValueAndValidity({emitEvent}); + this.compassGaugeWidgetConfigForm.get('titleColor').updateValueAndValidity({emitEvent}); + this.compassGaugeWidgetConfigForm.get('showTitleIcon').updateValueAndValidity({emitEvent: false}); + this.compassGaugeWidgetConfigForm.get('titleIcon').updateValueAndValidity({emitEvent}); + this.compassGaugeWidgetConfigForm.get('iconColor').updateValueAndValidity({emitEvent}); + } + + + private getCardButtons(config: WidgetConfig): string[] { + const buttons: string[] = []; + if (isUndefined(config.enableFullscreen) || config.enableFullscreen) { + buttons.push('fullscreen'); + } + return buttons; + } + + private setCardButtons(buttons: string[], config: WidgetConfig) { + config.enableFullscreen = buttons.includes('fullscreen'); + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/radial-gauge-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/radial-gauge-basic-config.component.ts new file mode 100644 index 0000000000..0abc0ad327 --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/radial-gauge-basic-config.component.ts @@ -0,0 +1,54 @@ +/// +/// Copyright © 2016-2023 The Thingsboard Authors +/// +/// Licensed under the Apache License, Version 2.0 (the "License"); +/// you may not use this file except in compliance with the License. +/// You may obtain a copy of the License at +/// +/// http://www.apache.org/licenses/LICENSE-2.0 +/// +/// Unless required by applicable law or agreed to in writing, software +/// distributed under the License is distributed on an "AS IS" BASIS, +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// See the License for the specific language governing permissions and +/// limitations under the License. +/// + +import { Component } from '@angular/core'; +import { WidgetSettings } from '@shared/models/widget.models'; +import { UntypedFormBuilder, Validators } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { + AnalogueGaugeWidgetSettingsComponent +} from '@home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component'; +import { + GaugeBasicConfigComponent +} from '@home/components/widget/config/basic/gauge/analog-gauge-basic-config.component'; +import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; +import { WidgetConfigComponentData } from '@home/models/widget-component.models'; +import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; + +@Component({ + selector: 'tb-radial-gauge-basic-config', + templateUrl: './analog-gauge-basic-config.component.html', + styleUrls: ['../basic-config.scss'] +}) +export class RadialGaugeBasicConfigComponent extends GaugeBasicConfigComponent { + + gaugeType = 'radial'; + + constructor(protected store: Store, + protected widgetConfigComponent: WidgetConfigComponent, + protected fb: UntypedFormBuilder) { + super(store, widgetConfigComponent, fb); + } + + protected setupDefaults(configData: WidgetConfigComponentData) { + return super.setupDefaults(configData, [{ name: 'temperature', label: 'Temperature', type: DataKeyType.timeseries }]); + } + + protected onConfigSet(configData: WidgetConfigComponentData) { + super.onConfigSet(configData); + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/speed-gauge-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/speed-gauge-basic-config.component.ts new file mode 100644 index 0000000000..d0df11fcba --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/speed-gauge-basic-config.component.ts @@ -0,0 +1,54 @@ +/// +/// Copyright © 2016-2023 The Thingsboard Authors +/// +/// Licensed under the Apache License, Version 2.0 (the "License"); +/// you may not use this file except in compliance with the License. +/// You may obtain a copy of the License at +/// +/// http://www.apache.org/licenses/LICENSE-2.0 +/// +/// Unless required by applicable law or agreed to in writing, software +/// distributed under the License is distributed on an "AS IS" BASIS, +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// See the License for the specific language governing permissions and +/// limitations under the License. +/// + +import { Component } from '@angular/core'; +import { WidgetSettings } from '@shared/models/widget.models'; +import { UntypedFormBuilder, Validators } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { + AnalogueGaugeWidgetSettingsComponent +} from '@home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component'; +import { + GaugeBasicConfigComponent +} from '@home/components/widget/config/basic/gauge/analog-gauge-basic-config.component'; +import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; +import { WidgetConfigComponentData } from '@home/models/widget-component.models'; +import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; + +@Component({ + selector: 'tb-speed-gauge-basic-config', + templateUrl: './analog-gauge-basic-config.component.html', + styleUrls: ['../basic-config.scss'] +}) +export class SpeedGaugeBasicConfigComponent extends GaugeBasicConfigComponent { + + gaugeType = 'speed'; + + constructor(protected store: Store, + protected widgetConfigComponent: WidgetConfigComponent, + protected fb: UntypedFormBuilder) { + super(store, widgetConfigComponent, fb); + } + + protected setupDefaults(configData: WidgetConfigComponentData) { + return super.setupDefaults(configData, [{ name: 'speed', label: 'Speed', type: DataKeyType.timeseries }]); + } + + protected onConfigSet(configData: WidgetConfigComponentData) { + super.onConfigSet(configData); + } +} diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/thermometer-scale-gauge-basic-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/thermometer-scale-gauge-basic-config.component.ts new file mode 100644 index 0000000000..d8d796f6fb --- /dev/null +++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/thermometer-scale-gauge-basic-config.component.ts @@ -0,0 +1,68 @@ +/// +/// Copyright © 2016-2023 The Thingsboard Authors +/// +/// Licensed under the Apache License, Version 2.0 (the "License"); +/// you may not use this file except in compliance with the License. +/// You may obtain a copy of the License at +/// +/// http://www.apache.org/licenses/LICENSE-2.0 +/// +/// Unless required by applicable law or agreed to in writing, software +/// distributed under the License is distributed on an "AS IS" BASIS, +/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +/// See the License for the specific language governing permissions and +/// limitations under the License. +/// + +import { Component } from '@angular/core'; +import { WidgetSettings } from '@shared/models/widget.models'; +import { UntypedFormBuilder, Validators } from '@angular/forms'; +import { Store } from '@ngrx/store'; +import { AppState } from '@core/core.state'; +import { + AnalogueGaugeWidgetSettingsComponent +} from '@home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component'; +import { + GaugeBasicConfigComponent +} from '@home/components/widget/config/basic/gauge/analog-gauge-basic-config.component'; +import { WidgetConfigComponent } from '@home/components/widget/widget-config.component'; +import { WidgetConfigComponentData } from '@home/models/widget-component.models'; +import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; + +@Component({ + selector: 'tb-thermometer-scale-gauge-basic-config', + templateUrl: './analog-gauge-basic-config.component.html', + styleUrls: ['../basic-config.scss'] +}) +export class ThermometerScaleGaugeBasicConfigComponent extends GaugeBasicConfigComponent { + + gaugeType = 'thermometer'; + + constructor(protected store: Store, + protected widgetConfigComponent: WidgetConfigComponent, + protected fb: UntypedFormBuilder) { + super(store, widgetConfigComponent, fb); + } + + protected setupDefaults(configData: WidgetConfigComponentData) { + return super.setupDefaults(configData, [{ name: 'temperature', label: 'Temperature', type: DataKeyType.timeseries }]); + } + + protected onConfigSet(configData: WidgetConfigComponentData) { + super.onConfigSet(configData); + this.radialGaugeWidgetConfigForm.addControl('colorBarStroke', + this.fb.control(configData.config.settings?.colorBarStroke, [])); + this.radialGaugeWidgetConfigForm.addControl('colorBarProgress', + this.fb.control(configData.config.settings?.colorBarProgress, [])); + this.radialGaugeWidgetConfigForm.addControl('colorBarProgressEnd', + this.fb.control(configData.config.settings?.colorBarProgressEnd, [])); + } + + protected prepareOutputConfig(config): WidgetConfigComponentData { + const outputConfig = super.prepareOutputConfig(config); + this.widgetConfig.config.settings.colorBarStroke = config.colorBarStroke; + this.widgetConfig.config.settings.colorBarProgress = config.colorBarProgress; + this.widgetConfig.config.settings.colorBarProgressEnd = config.colorBarProgressEnd; + return outputConfig; + } +} 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 b4c0f07c85..6605b31a47 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -5011,6 +5011,7 @@ "title-icon": "Title icon", "display-icon": "Display title icon", "card-icon": "Card icon", + "icon": "Icon", "icon-color": "Icon color", "icon-size": "Icon size", "advanced-settings": "Advanced settings", @@ -5357,6 +5358,8 @@ "ticks-settings": "Ticks settings", "min-value": "Minimum value", "max-value": "Maximum value", + "min-value-short": "min", + "max-value-short": "max", "start-ticks-angle": "Start ticks angle", "ticks-angle": "Ticks angle", "major-ticks-count": "Major ticks count", @@ -5416,6 +5419,8 @@ "bar-background-color": "Gauge bar background color", "bar-background-color-end": "Bar background color - end gradient", "progress-bar-color": "Progress bar color", + "progress-bar": "Progress bar", + "progress-bar-color-start": "Progress bar color - start gradient", "progress-bar-color-end": "Progress bar color - end gradient", "major-ticks-names": "Major ticks names", "show-stroke-ticks": "Show ticks stroke", @@ -5465,7 +5470,16 @@ "tick-color": "Tick color", "tick-values": "Tick values", "no-tick-values": "No tick values configured", - "add-tick-value": "Add tick value" + "add-tick-value": "Add tick value", + "gauge-appearance": "Gauge appearance", + "units-title": "Units title", + "value": "Value", + "ticks": "Ticks", + "arrow-and-scale-color": "Arrow and scale default color", + "scale-color": "Scale colors", + "compass-appearance": "Compass appearance", + "labels": "Labels", + "label-style": "Label style" }, "gpio": { "pin": "Pin",