From 384c5db08415ac93915204cbfb8a4086ad442677 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Fri, 20 Oct 2023 15:34:58 +0300 Subject: [PATCH 1/5] 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", From e70530e4cac4c6b93bc3ddbb86254b1af9de45e8 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Tue, 24 Oct 2023 10:16:17 +0300 Subject: [PATCH 2/5] UI: Advanced gauge settings --- .../analog-gauge-basic-config.component.ts | 38 +- .../compass-gauge-basic-config.component.html | 78 +-- ...gue-compass-widget-settings.component.html | 291 +++++---- ...logue-compass-widget-settings.component.ts | 42 +- ...logue-gauge-widget-settings.component.html | 615 ++++++++++-------- ...nalogue-gauge-widget-settings.component.ts | 69 +- .../assets/locale/locale.constant-en_US.json | 23 +- 7 files changed, 584 insertions(+), 572 deletions(-) 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 index bd82ab253a..953626b226 100644 --- 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 @@ -14,8 +14,7 @@ /// limitations under the License. /// -import { ChangeDetectorRef, Component, Injector } from '@angular/core'; -import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; +import { UntypedFormBuilder, UntypedFormGroup } 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'; @@ -27,33 +26,13 @@ import { 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'] -// }) +import { formatValue, isUndefined } from '@core/utils'; +import { ColorType } from '@shared/models/widget-settings.models'; + export class GaugeBasicConfigComponent extends BasicWidgetConfigComponent { public get displayTimewindowConfig(): boolean { @@ -94,21 +73,21 @@ export class GaugeBasicConfigComponent extends BasicWidgetConfigComponent { showUnitTitle: [configData.config.settings?.showUnitTitle, []], unitTitle: [configData.config.settings?.unitTitle, []], titleFont: [configData.config.settings?.titleFont, []], - titleColor: [configData.config.settings?.titleFont.color, []], + titleColor: [configData.config.settings?.titleFont?.color, []], units: [configData.config.units, []], unitsFont: [configData.config.settings?.unitsFont, []], - unitsColor: [configData.config.settings?.unitsFont.color, []], + 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, []], + 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, []], + numbersColor: [configData.config.settings?.numbersFont?.color, []], colorBarStroke: [configData.config.settings?.colorBarStroke, []], @@ -129,7 +108,6 @@ export class GaugeBasicConfigComponent extends BasicWidgetConfigComponent { 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 || {}; 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 index fec518cc8d..a3a2636876 100644 --- 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 @@ -83,47 +83,47 @@ -
-
widgets.gauge.label-style
-
- - - - -
+
+
widgets.gauge.label-style
+
+ + + +
+
-
-
widgets.gauge.major-ticks-color
- - -
-
-
widgets.gauge.minor-ticks-color
- - -
-
-
widgets.gauge.needle-color
- - -
-
-
widgets.gauge.plate-color
- - -
+
+
widgets.gauge.major-ticks-color
+ + +
+
+
widgets.gauge.minor-ticks-color
+ + +
+
+
widgets.gauge.needle-color
+ + +
+
+
widgets.gauge.plate-color
+ + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html index bbb7874523..96c16c0359 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.html @@ -15,153 +15,127 @@ limitations under the License. --> -
-
- widgets.gauge.ticks-settings - - widgets.gauge.major-ticks-names - - - {{tickName}} - cancel - - - - - - -
- - widgets.gauge.minor-ticks-count - - - - -
- - {{ 'widgets.gauge.show-stroke-ticks' | translate }} - -
- widgets.gauge.major-ticks-font - -
-
-
- widgets.gauge.plate-settings - - - - {{ 'widgets.gauge.show-plate-border' | translate }} - -
- + +
+
widgets.gauge.ticks-settings
+
+
widgets.gauge.labels
+
+ + +
+
+
+
widgets.gauge.label-style
+
+ + + + +
+
+ +
+
widgets.gauge.major-ticks
+ - - widgets.gauge.border-width - - -
-
-
- widgets.gauge.needle-settings - - widgets.gauge.needle-circle-size - - -
- +
+
+
widgets.gauge.minor-ticks
+
+ + + + + +
+
+ +
+ + {{ 'widgets.gauge.show-stroke-ticks' | translate }} + +
+ + +
+
widgets.gauge.plate-settings
+
+
widgets.gauge.plate-color
+ - +
+
+ + {{ 'widgets.gauge.show-plate-border' | translate }} + +
+ + + + + +
+
+
+ +
+
widgets.gauge.needle-settings
+
+
widgets.gauge.needle-circle
+
+ + + + + +
+
+
+
widgets.gauge.needle-color
+ - - -
- widgets.gauge.animation-settings +
+
+ +
- {{ 'widgets.gauge.enable-animation' | translate }} - + widget-config.advanced-settings -
- - widgets.gauge.animation-duration - - - - widgets.gauge.animation-rule - - - {{ 'widgets.gauge.animation-linear' | translate }} - - - {{ 'widgets.gauge.animation-quad' | translate }} - - - {{ 'widgets.gauge.animation-quint' | translate }} - - - {{ 'widgets.gauge.animation-cycle' | translate }} - - - {{ 'widgets.gauge.animation-bounce' | translate }} - - - {{ 'widgets.gauge.animation-elastic' | translate }} - - - {{ 'widgets.gauge.animation-dequad' | translate }} - - - {{ 'widgets.gauge.animation-dequint' | translate }} - - - {{ 'widgets.gauge.animation-decycle' | translate }} - - - {{ 'widgets.gauge.animation-debounce' | translate }} - - - {{ 'widgets.gauge.animation-delastic' | translate }} - - - - - widgets.gauge.animation-target +
+
widgets.gauge.animation-target
+ {{ 'widgets.gauge.animation-target-needle' | translate }} @@ -171,8 +145,53 @@ -
+
+
+
widgets.gauge.animation-duration-rule
+
+ + + + + + + {{ 'widgets.gauge.animation-linear' | translate }} + + + {{ 'widgets.gauge.animation-quad' | translate }} + + + {{ 'widgets.gauge.animation-quint' | translate }} + + + {{ 'widgets.gauge.animation-cycle' | translate }} + + + {{ 'widgets.gauge.animation-bounce' | translate }} + + + {{ 'widgets.gauge.animation-elastic' | translate }} + + + {{ 'widgets.gauge.animation-dequad' | translate }} + + + {{ 'widgets.gauge.animation-dequint' | translate }} + + + {{ 'widgets.gauge.animation-decycle' | translate }} + + + {{ 'widgets.gauge.animation-debounce' | translate }} + + + {{ 'widgets.gauge.animation-delastic' | translate }} + + + +
+
- - + + diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.ts index 5a2a2b2678..6ae485c49b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-compass-widget-settings.component.ts @@ -19,9 +19,7 @@ import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { Component } from '@angular/core'; -import { MatChipInputEvent } from '@angular/material/chips'; import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes'; -import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; @Component({ selector: 'tb-analogue-compass-widget-settings', @@ -81,6 +79,7 @@ export class AnalogueCompassWidgetSettingsComponent extends WidgetSettingsCompon colorMinorTicks: [settings.colorMinorTicks, []], showStrokeTicks: [settings.showStrokeTicks, []], majorTickFont: [settings.majorTickFont, []], + majorTickColor: [settings.majorTickFont.color, []], // Plate settings colorPlate: [settings.colorPlate, []], @@ -131,41 +130,8 @@ export class AnalogueCompassWidgetSettingsComponent extends WidgetSettingsCompon this.analogueCompassWidgetSettingsForm.get('animationTarget').updateValueAndValidity({emitEvent}); } - majorTicksNamesList(): string[] { - return this.analogueCompassWidgetSettingsForm.get('majorTicks').value; - } - - removeMajorTickName(tickName: string): void { - const tickNames: string[] = this.analogueCompassWidgetSettingsForm.get('majorTicks').value; - const index = tickNames.indexOf(tickName); - if (index >= 0) { - tickNames.splice(index, 1); - this.analogueCompassWidgetSettingsForm.get('majorTicks').setValue(tickNames); - this.analogueCompassWidgetSettingsForm.get('majorTicks').markAsDirty(); - } - } - - addMajorTickName(event: MatChipInputEvent): void { - const input = event.chipInput.inputElement; - const value = event.value; - - const tickNames: string[] = this.analogueCompassWidgetSettingsForm.get('majorTicks').value; - - if ((value || '').trim()) { - tickNames.push(value.trim()); - this.analogueCompassWidgetSettingsForm.get('majorTicks').setValue(tickNames); - this.analogueCompassWidgetSettingsForm.get('majorTicks').markAsDirty(); - } - - if (input) { - input.value = ''; - } - } - - majorTickNameDrop(event: CdkDragDrop): void { - const tickNames: string[] = this.analogueCompassWidgetSettingsForm.get('majorTicks').value; - moveItemInArray(tickNames, event.previousIndex, event.currentIndex); - this.analogueCompassWidgetSettingsForm.get('majorTicks').setValue(tickNames); - this.analogueCompassWidgetSettingsForm.get('majorTicks').markAsDirty(); + protected prepareOutputSettings(settings) { + settings.majorTickFont.color = this.analogueCompassWidgetSettingsForm.get('majorTickColor').value; + return settings; } } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html index c2264d7aca..442a431e33 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html @@ -15,7 +15,7 @@ limitations under the License. --> -
+ @@ -24,330 +24,383 @@ - - -
- widgets.gauge.ticks-settings -
- - widgets.gauge.min-value - - - - widgets.gauge.max-value - - -
-
- - widgets.gauge.major-ticks-count - - - - -
-
- - widgets.gauge.minor-ticks-count - - - - -
-
- widgets.gauge.tick-numbers-font - -
-
-
- widgets.gauge.unit-title-settings - - - - - {{ 'widgets.gauge.show-unit-title' | translate }} - - - - widget-config.advanced-settings - - - -
- - widgets.gauge.unit-title - - -
- widgets.gauge.title-font - -
-
- - -
-
- widgets.gauge.units-settings -
- widgets.gauge.units-font - -
-
-
- widgets.gauge.value-box-settings + +
+
widgets.gauge.ticks-settings
+
+
widgets.gauge.ticks
+
+
widgets.gauge.min-value-short
+ + + +
widgets.gauge.max-value-short
+ + + + + + + +
+
+ +
+
widgets.gauge.major-ticks-count
+
+ + + + + +
+
+ +
+
widgets.gauge.minor-ticks-count
+
+ + + + + +
+
+
+ +
+
widgets.gauge.units-settings
+
+ + {{ 'widgets.gauge.units-title' | translate }} + +
+ + + + + + + +
+
+ +
+
widget-config.units-short
+
+ + + + +
+
+
+ +
- - {{ 'widgets.gauge.show-value-box' | translate }} + {{ 'widgets.gauge.value-box' | translate }} - + widget-config.advanced-settings -
- - widgets.gauge.value-int - +
+
widgets.gauge.value-int
+ + -
- widgets.gauge.value-font - -
-
- +
+
+
widgets.gauge.value-text
+
+
widgets.gauge.value-text
+
+ + + + +
+
+
+
widgets.gauge.value-text-shadow
+ - +
+
+
+
widgets.gauge.value-box
+
+
widgets.gauge.rect-stroke-color-start
+ + +
+ +
+
widgets.gauge.rect-stroke-color-end
+ -
-
- +
+ +
+
widgets.gauge.background-color
+ - +
+ +
+
widgets.gauge.shadow-color
+ -
- + + - -
- widgets.gauge.plate-settings - - - - {{ 'widgets.gauge.show-plate-border' | translate }} - -
-
- widgets.gauge.needle-settings -
- + + +
+
widgets.gauge.plate-settings
+
+
widgets.gauge.plate-color
+ - +
+
+ + {{ 'widgets.gauge.show-plate-border' | translate }} + +
+
+ +
+
widgets.gauge.needle-settings
+
+
widgets.gauge.needle-color-start
+ -
-
- + + +
+
widgets.gauge.needle-color-end
+ - +
+ +
+
widgets.gauge.needle-color-shadow-up
+ -
-
-
- widgets.gauge.highlights-settings - - widgets.gauge.highlights-width - - -
- widgets.gauge.highlights -
-
-
- - -
-
-
- widgets.gauge.no-highlights -
-
- -
+
+ +
+
widgets.gauge.needle-color-shadow-down
+ + +
+ + +
+
widgets.gauge.scale-settings
+
+
widgets.gauge.scale
+
+ + + + + +
-
-
-
- widgets.gauge.animation-settings + + + +
- {{ 'widgets.gauge.enable-animation' | translate }} - + widget-config.advanced-settings -
- - widgets.gauge.animation-duration - - - - widgets.gauge.animation-rule - - - {{ 'widgets.gauge.animation-linear' | translate }} - - - {{ 'widgets.gauge.animation-quad' | translate }} - - - {{ 'widgets.gauge.animation-quint' | translate }} - - - {{ 'widgets.gauge.animation-cycle' | translate }} - - - {{ 'widgets.gauge.animation-bounce' | translate }} - - - {{ 'widgets.gauge.animation-elastic' | translate }} - - - {{ 'widgets.gauge.animation-dequad' | translate }} - - - {{ 'widgets.gauge.animation-dequint' | translate }} - - - {{ 'widgets.gauge.animation-decycle' | translate }} - - - {{ 'widgets.gauge.animation-debounce' | translate }} - - - {{ 'widgets.gauge.animation-delastic' | translate }} - - - -
+
+
widgets.gauge.animation-duration-rule
+
+ + + + + + + {{ 'widgets.gauge.animation-linear' | translate }} + + + {{ 'widgets.gauge.animation-quad' | translate }} + + + {{ 'widgets.gauge.animation-quint' | translate }} + + + {{ 'widgets.gauge.animation-cycle' | translate }} + + + {{ 'widgets.gauge.animation-bounce' | translate }} + + + {{ 'widgets.gauge.animation-elastic' | translate }} + + + {{ 'widgets.gauge.animation-dequad' | translate }} + + + {{ 'widgets.gauge.animation-dequint' | translate }} + + + {{ 'widgets.gauge.animation-decycle' | translate }} + + + {{ 'widgets.gauge.animation-debounce' | translate }} + + + {{ 'widgets.gauge.animation-delastic' | translate }} + + + +
+
-
- + + -
- widgets.gauge.radial-gauge-settings -
- - widgets.gauge.start-ticks-angle - +
+
widgets.gauge.radial-gauge-settings
+
+
widgets.gauge.start-ticks-angle
+ + + +
+
+
widgets.gauge.ticks-angle
+ + - - widgets.gauge.ticks-angle - +
+
+
widgets.gauge.needle-circle-size
+ + -
- - widgets.gauge.needle-circle-size - - -
+ + + + -
- widgets.gauge.linear-gauge-settings -
- - widgets.gauge.bar-stroke-width - - - - -
-
- +
+
widgets.gauge.linear-gauge-settings
+
+
widgets.gauge.bar-stroke
+
+ + + + + +
+
+ +
+
widgets.gauge.bar-background-color
+ - +
+
+
widgets.gauge.bar-background-color-end
+ -
-
- + + +
+
widgets.gauge.progress-bar-color-start
+ - +
+
+
widgets.gauge.progress-bar-color-end
+ -
-
+ + + + + + + +
+
{{ 'widgets.gauge.arrow-and-scale-color' | translate }}
+ + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.ts index 07f2be69bd..b2bc6621a1 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.ts @@ -15,11 +15,10 @@ /// import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; -import { AbstractControl, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; +import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { GaugeHighlight } from '@home/components/widget/lib/settings/gauge/gauge-highlight.component'; -import { CdkDragDrop } from '@angular/cdk/drag-drop'; export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponent { @@ -119,19 +118,24 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen minorTicks: [settings.majorTicksCount, [Validators.min(0)]], colorMinorTicks: [settings.colorMinorTicks, []], numbersFont: [settings.numbersFont, []], + numbersColor: [settings.numbersFont.color, []], // Unit title settings showUnitTitle: [settings.showUnitTitle, []], unitTitle: [settings.unitTitle, []], titleFont: [settings.titleFont, []], + titleColor: [settings.titleFont.color, []], // Units settings unitsFont: [settings.unitsFont, []], + unitsColor: [settings.unitsFont.color, []], // Value box settings valueBox: [settings.valueBox, []], valueInt: [settings.valueInt, [Validators.min(0)]], valueFont: [settings.valueFont, []], + valueColor: [settings.valueFont.color, []], + valueColorShadow: [settings.valueFont.shadowColor, []], colorValueBoxRect: [settings.colorValueBoxRect, []], colorValueBoxRectEnd: [settings.colorValueBoxRectEnd, []], colorValueBoxBackground: [settings.colorValueBoxBackground, []], @@ -149,7 +153,7 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen // Highlights settings highlightsWidth: [settings.highlightsWidth, [Validators.min(0)]], - highlights: this.prepareHighlightsFormArray(settings.highlights), + highlights: this.prepareHighlights(settings.highlights), // Animation settings animation: [settings.animation, []], @@ -170,13 +174,16 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen if (showUnitTitle) { this.analogueGaugeWidgetSettingsForm.get('unitTitle').enable(); this.analogueGaugeWidgetSettingsForm.get('titleFont').enable(); + this.analogueGaugeWidgetSettingsForm.get('titleColor').enable(); } else { this.analogueGaugeWidgetSettingsForm.get('unitTitle').disable(); this.analogueGaugeWidgetSettingsForm.get('titleFont').disable(); + this.analogueGaugeWidgetSettingsForm.get('titleColor').disable(); } if (valueBox) { this.analogueGaugeWidgetSettingsForm.get('valueInt').enable(); this.analogueGaugeWidgetSettingsForm.get('valueFont').enable(); + this.analogueGaugeWidgetSettingsForm.get('valueColor').enable(); this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRect').enable(); this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRectEnd').enable(); this.analogueGaugeWidgetSettingsForm.get('colorValueBoxBackground').enable(); @@ -184,6 +191,7 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen } else { this.analogueGaugeWidgetSettingsForm.get('valueInt').disable(); this.analogueGaugeWidgetSettingsForm.get('valueFont').disable(); + this.analogueGaugeWidgetSettingsForm.get('valueColor').disable(); this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRect').disable(); this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRectEnd').disable(); this.analogueGaugeWidgetSettingsForm.get('colorValueBoxBackground').disable(); @@ -198,8 +206,10 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen } this.analogueGaugeWidgetSettingsForm.get('unitTitle').updateValueAndValidity({emitEvent}); this.analogueGaugeWidgetSettingsForm.get('titleFont').updateValueAndValidity({emitEvent}); + this.analogueGaugeWidgetSettingsForm.get('titleColor').updateValueAndValidity({emitEvent}); this.analogueGaugeWidgetSettingsForm.get('valueInt').updateValueAndValidity({emitEvent}); this.analogueGaugeWidgetSettingsForm.get('valueFont').updateValueAndValidity({emitEvent}); + this.analogueGaugeWidgetSettingsForm.get('valueColor').updateValueAndValidity({emitEvent}); this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRect').updateValueAndValidity({emitEvent}); this.analogueGaugeWidgetSettingsForm.get('colorValueBoxRectEnd').updateValueAndValidity({emitEvent}); this.analogueGaugeWidgetSettingsForm.get('colorValueBoxBackground').updateValueAndValidity({emitEvent}); @@ -208,50 +218,21 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen this.analogueGaugeWidgetSettingsForm.get('animationRule').updateValueAndValidity({emitEvent}); } - protected doUpdateSettings(settingsForm: UntypedFormGroup, settings: WidgetSettings) { - settingsForm.setControl('highlights', this.prepareHighlightsFormArray(settings.highlights), {emitEvent: false}); - } - - private prepareHighlightsFormArray(highlights: GaugeHighlight[] | undefined): UntypedFormArray { - const highlightsControls: Array = []; - if (highlights) { - highlights.forEach((highlight) => { - highlightsControls.push(this.fb.control(highlight, [Validators.required])); - }); + protected prepareOutputSettings(settings) { + settings.numbersFont.color = this.analogueGaugeWidgetSettingsForm.get('numbersColor').value; + if (settings.titleFont) { + settings.titleFont.color = this.analogueGaugeWidgetSettingsForm.get('titleColor').value; } - return this.fb.array(highlightsControls); - } - - highlightsFormArray(): UntypedFormArray { - return this.analogueGaugeWidgetSettingsForm.get('highlights') as UntypedFormArray; - } - - public trackByHighlightControl(index: number, highlightControl: AbstractControl): any { - return highlightControl; - } - - public removeHighlight(index: number) { - (this.analogueGaugeWidgetSettingsForm.get('highlights') as UntypedFormArray).removeAt(index); - } - - public addHighlight() { - const highlight: GaugeHighlight = { - from: null, - to: null, - color: null - }; - const highlightsArray = this.analogueGaugeWidgetSettingsForm.get('highlights') as UntypedFormArray; - const highlightControl = this.fb.control(highlight, [Validators.required]); - (highlightControl as any).new = true; - highlightsArray.push(highlightControl); - this.analogueGaugeWidgetSettingsForm.updateValueAndValidity(); + settings.unitsFont.color = this.analogueGaugeWidgetSettingsForm.get('unitsColor').value; + if (settings.valueFont) { + settings.valueFont.color = this.analogueGaugeWidgetSettingsForm.get('valueColor').value; + settings.valueFont.shadowColor = this.analogueGaugeWidgetSettingsForm.get('valueColorShadow').value; + } + return settings; } - highlightDrop(event: CdkDragDrop) { - const highlightsArray = this.analogueGaugeWidgetSettingsForm.get('highlights') as UntypedFormArray; - const highlight = highlightsArray.at(event.previousIndex); - highlightsArray.removeAt(event.previousIndex); - highlightsArray.insert(event.currentIndex, highlight); + private prepareHighlights(highlights: GaugeHighlight[] | undefined) { + return {type: 'range', rangeList: highlights}; } } 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 6605b31a47..fab1642201 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -5362,8 +5362,10 @@ "max-value-short": "max", "start-ticks-angle": "Start ticks angle", "ticks-angle": "Ticks angle", + "major-ticks": "Major ticks", "major-ticks-count": "Major ticks count", "major-ticks-color": "Major ticks color", + "minor-ticks": "Minor ticks", "minor-ticks-count": "Minor ticks count", "minor-ticks-color": "Minor ticks color", "tick-numbers-font": "Tick numbers font", @@ -5375,21 +5377,29 @@ "units-font": "Units text font", "value-box-settings": "Value box settings", "show-value-box": "Show value box", + "value-box": "Value box", "value-int": "Digits count for integer part of value", + "value-text": "Value text", + "value-text-shadow": "Value text shadow", "value-font": "Value text font", + "rect-stroke-color-start": "Rectangle stroke color - start gradient", + "rect-stroke-color-end": "Rectangle stroke color - end gradient", + "background-color": "Background color", + "shadow-color": "Shadow color", "value-box-rect-stroke-color": "Value box rectangle stroke color", "value-box-rect-stroke-color-end": "Value box rectangle stroke color - end gradient", "value-box-background-color": "Value box background color", "value-box-shadow-color": "Value box shadow color", "plate-settings": "Plate settings", - "show-plate-border": "Show plate border", + "show-plate-border": "Plate border", "plate-color": "Plate color", "needle-settings": "Needle settings", "needle-circle-size": "Needle circle size", "needle-color": "Needle color", + "needle-color-start": "Needle color - start gradient", "needle-color-end": "Needle color - end gradient", "needle-color-shadow-up": "Upper half of the needle shadow color", - "needle-color-shadow-down": "Drop shadow needle color", + "needle-color-shadow-down": "Drop shadow", "highlights-settings": "Highlights settings", "highlights-width": "Highlights width", "highlights": "Highlights", @@ -5399,7 +5409,8 @@ "no-highlights": "No highlights configured", "add-highlight": "Add highlight", "animation-settings": "Animation settings", - "enable-animation": "Enable animation", + "enable-animation": "Animation", + "animation-duration-rule": "Animation duration and rule", "animation-duration": "Animation duration", "animation-rule": "Animation rule", "animation-linear": "Linear", @@ -5414,9 +5425,10 @@ "animation-debounce": "Debounce", "animation-delastic": "Delastic", "linear-gauge-settings": "Linear gauge settings", + "bar-stroke": "Bar stroke", "bar-stroke-width": "Bar stroke width", "bar-stroke-color": "Bar stroke color", - "bar-background-color": "Gauge bar background color", + "bar-background-color": "Bar background color - start gradient", "bar-background-color-end": "Bar background color - end gradient", "progress-bar-color": "Progress bar color", "progress-bar": "Progress bar", @@ -5427,6 +5439,7 @@ "major-ticks-font": "Major ticks font", "border-color": "Border color", "border-width": "Border width", + "needle-circle": "Needle circle", "needle-circle-color": "Needle circle color", "animation-target": "Animation target", "animation-target-needle": "Needle", @@ -5476,6 +5489,8 @@ "value": "Value", "ticks": "Ticks", "arrow-and-scale-color": "Arrow and scale default color", + "scale-settings": "Scale settings", + "scale": "Scale", "scale-color": "Scale colors", "compass-appearance": "Compass appearance", "labels": "Labels", From fd8841a4376b70192c742f3fa2db3341d797a5fe Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Tue, 24 Oct 2023 17:58:13 +0300 Subject: [PATCH 3/5] UI: Refactoring for gauge settings --- .../json/system/widget_types/compass.json | 5 +- .../system/widget_types/radial_gauge.json | 5 +- .../json/system/widget_types/speed_gauge.json | 5 +- .../temperature_radial_gauge.json | 5 +- .../widget_types/thermometer_scale.json | 5 +- .../basic/basic-widget-config.module.ts | 6 - .../analog-gauge-basic-config.component.html | 7 +- .../analog-gauge-basic-config.component.ts | 10 +- .../compass-gauge-basic-config.component.ts | 25 +--- .../radial-gauge-basic-config.component.ts | 11 +- .../speed-gauge-basic-config.component.ts | 54 -------- ...eter-scale-gauge-basic-config.component.ts | 13 +- ...logue-gauge-widget-settings.component.html | 5 +- ...nalogue-gauge-widget-settings.component.ts | 7 +- .../gauge/gauge-highlight.component.html | 61 --------- .../gauge/gauge-highlight.component.scss | 40 ------ .../gauge/gauge-highlight.component.ts | 116 ------------------ .../lib/settings/widget-settings.module.ts | 3 - 18 files changed, 31 insertions(+), 352 deletions(-) delete mode 100644 ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/speed-gauge-basic-config.component.ts delete mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.html delete mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.scss delete mode 100644 ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.ts diff --git a/application/src/main/data/json/system/widget_types/compass.json b/application/src/main/data/json/system/widget_types/compass.json index 79e92d7d57..a44887f49f 100644 --- a/application/src/main/data/json/system/widget_types/compass.json +++ b/application/src/main/data/json/system/widget_types/compass.json @@ -11,10 +11,11 @@ "resources": [], "templateHtml": "", "templateCss": "", - "controllerScript": "self.onInit = function() {\n self.ctx.gauge = new TbAnalogueCompass(self.ctx, 'compass');\n}\n\nself.onDataUpdated = function() {\n self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n}\n\nself.onDestroy = function() {\n self.ctx.gauge.destroy();\n}\n", - "settingsSchema": "{}", + "controllerScript": "self.onInit = function() {\n self.ctx.gauge = new TbAnalogueCompass(self.ctx, 'compass');\n}\n\nself.onDataUpdated = function() {\n self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true,\n defaultDataKeysFunction: function() {\n return [{ name: 'direction', label: 'Direction', type: 'timeseries' }];\n }\n };\n}\n\nself.onDestroy = function() {\n self.ctx.gauge.destroy();\n}\n", "settingsSchema": "{}", "dataKeySettingsSchema": "{}\n", "settingsDirective": "tb-analogue-compass-widget-settings", + "hasBasicMode": true, + "basicModeDirective": "tb-compass-gauge-basic-config", "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"minorTicks\":22,\"needleCircleSize\":15,\"showBorder\":true,\"borderOuterWidth\":10,\"colorPlate\":\"#222\",\"colorMajorTicks\":\"#f5f5f5\",\"colorMinorTicks\":\"#ddd\",\"colorNeedle\":\"#f08080\",\"colorNeedleCircle\":\"#e8e8e8\",\"colorBorder\":\"#ccc\",\"majorTickFont\":{\"family\":\"Roboto\",\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#ccc\"},\"animation\":true,\"animationDuration\":500,\"animationRule\":\"cycle\",\"animationTarget\":\"needle\",\"majorTicks\":[\"N\",\"NE\",\"E\",\"SE\",\"S\",\"SW\",\"W\",\"NW\"]},\"title\":\"Compass\",\"dropShadow\":true,\"enableFullscreen\":true,\"widgetStyle\":{},\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"useDashboardTimewindow\":true,\"showLegend\":false,\"actions\":{},\"widgetCss\":\"\",\"pageSize\":1024,\"decimals\":0,\"noDataDisplayMessage\":\"\"}" }, "externalId": null diff --git a/application/src/main/data/json/system/widget_types/radial_gauge.json b/application/src/main/data/json/system/widget_types/radial_gauge.json index 7d793b2b87..dc6d04f744 100644 --- a/application/src/main/data/json/system/widget_types/radial_gauge.json +++ b/application/src/main/data/json/system/widget_types/radial_gauge.json @@ -11,10 +11,11 @@ "resources": [], "templateHtml": "\n", "templateCss": "", - "controllerScript": "self.onInit = function() {\n self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n}\n\nself.onDestroy = function() {\n self.ctx.gauge.destroy();\n}\n", - "settingsSchema": "{}", + "controllerScript": "self.onInit = function() {\n self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true,\n defaultDataKeysFunction: function() {\n return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n }\n };\n}\n\nself.onDestroy = function() {\n self.ctx.gauge.destroy();\n}\n", "settingsSchema": "{}", "dataKeySettingsSchema": "{}\n", "settingsDirective": "tb-analogue-radial-gauge-widget-settings", + "hasBasicMode": true, + "basicModeDirective": "tb-radial-gauge-basic-config", "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Temp\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.7282710489093589,\"funcBody\":\"var value = prevValue + Math.random() * 50 - 25;\\nif (value < -100) {\\n\\tvalue = -100;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"maxValue\":100,\"startAngle\":45,\"ticksAngle\":270,\"showBorder\":true,\"defaultColor\":\"#e65100\",\"needleCircleSize\":10,\"highlights\":[],\"showUnitTitle\":true,\"colorPlate\":\"#fff\",\"colorMajorTicks\":\"#444\",\"colorMinorTicks\":\"#666\",\"minorTicks\":10,\"valueInt\":3,\"valueDec\":0,\"highlightsWidth\":15,\"valueBox\":true,\"animation\":true,\"animationDuration\":500,\"animationRule\":\"cycle\",\"colorNeedleShadowUp\":\"rgba(2, 255, 255, 0)\",\"numbersFont\":{\"family\":\"Roboto\",\"size\":18,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#616161\"},\"titleFont\":{\"family\":\"Roboto\",\"size\":24,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#888\"},\"unitsFont\":{\"family\":\"Roboto\",\"size\":22,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#616161\"},\"valueFont\":{\"family\":\"Segment7Standard\",\"size\":36,\"style\":\"normal\",\"weight\":\"normal\",\"shadowColor\":\"rgba(0, 0, 0, 0.49)\",\"color\":\"#444\"},\"minValue\":-100,\"colorNeedleShadowDown\":\"rgba(188,143,143,0.45)\",\"colorValueBoxRect\":\"#888\",\"colorValueBoxRectEnd\":\"#666\",\"colorValueBoxBackground\":\"#babab2\",\"colorValueBoxShadow\":\"rgba(0,0,0,1)\"},\"title\":\"Radial gauge\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"widgetStyle\":{},\"widgetCss\":\"\",\"pageSize\":1024,\"decimals\":0,\"noDataDisplayMessage\":\"\"}" }, "externalId": null diff --git a/application/src/main/data/json/system/widget_types/speed_gauge.json b/application/src/main/data/json/system/widget_types/speed_gauge.json index 2c70d27cf5..9a2850bfb4 100644 --- a/application/src/main/data/json/system/widget_types/speed_gauge.json +++ b/application/src/main/data/json/system/widget_types/speed_gauge.json @@ -11,10 +11,11 @@ "resources": [], "templateHtml": "\n", "templateCss": "", - "controllerScript": "self.onInit = function() {\n self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.gauge.mobileModeChanged();\n}\n\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n}\n\nself.onDestroy = function() {\n self.ctx.gauge.destroy();\n}\n", - "settingsSchema": "{}", + "controllerScript": "self.onInit = function() {\n self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.gauge.mobileModeChanged();\n}\n\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true,\n defaultDataKeysFunction: function() {\n return [{ name: 'speed', label: 'Speed', type: 'timeseries' }];\n }\n };\n}\n\nself.onDestroy = function() {\n self.ctx.gauge.destroy();\n}\n", "settingsSchema": "{}", "dataKeySettingsSchema": "{}\n", "settingsDirective": "tb-analogue-radial-gauge-widget-settings", + "hasBasicMode": true, + "basicModeDirective": "tb-radial-gauge-basic-config", "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Speed\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.7282710489093589,\"funcBody\":\"var value = prevValue + Math.random() * 50 - 25;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 220) {\\n\\tvalue = 220;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"maxValue\":180,\"startAngle\":45,\"ticksAngle\":270,\"showBorder\":false,\"defaultColor\":\"#e65100\",\"needleCircleSize\":7,\"highlights\":[{\"from\":80,\"to\":120,\"color\":\"#fdd835\"},{\"color\":\"#e57373\",\"from\":120,\"to\":180}],\"showUnitTitle\":false,\"colorPlate\":\"#fff\",\"colorMajorTicks\":\"#444\",\"colorMinorTicks\":\"#666\",\"minorTicks\":2,\"valueInt\":3,\"minValue\":0,\"valueDec\":0,\"highlightsWidth\":15,\"valueBox\":true,\"animation\":true,\"animationDuration\":1500,\"animationRule\":\"linear\",\"colorNeedleShadowUp\":\"rgba(2, 255, 255, 0)\",\"colorNeedleShadowDown\":\"rgba(188, 143, 143, 0.78)\",\"units\":\"MPH\",\"majorTicksCount\":9,\"numbersFont\":{\"family\":\"Roboto\",\"size\":22,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#616161\"},\"titleFont\":{\"family\":\"Roboto\",\"size\":24,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#888\"},\"unitsFont\":{\"family\":\"Roboto\",\"size\":28,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#616161\"},\"valueFont\":{\"size\":32,\"style\":\"normal\",\"weight\":\"normal\",\"shadowColor\":\"rgba(0, 0, 0, 0.49)\",\"color\":\"#444\",\"family\":\"Segment7Standard\"},\"colorValueBoxRect\":\"#888\",\"colorValueBoxRectEnd\":\"#666\",\"colorValueBoxBackground\":\"#babab2\",\"colorValueBoxShadow\":\"rgba(0,0,0,1)\"},\"title\":\"Speed gauge\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"widgetStyle\":{},\"widgetCss\":\"\",\"pageSize\":1024,\"decimals\":0,\"noDataDisplayMessage\":\"\"}" }, "externalId": null diff --git a/application/src/main/data/json/system/widget_types/temperature_radial_gauge.json b/application/src/main/data/json/system/widget_types/temperature_radial_gauge.json index d11faa7ab2..adf1ca2cae 100644 --- a/application/src/main/data/json/system/widget_types/temperature_radial_gauge.json +++ b/application/src/main/data/json/system/widget_types/temperature_radial_gauge.json @@ -11,10 +11,11 @@ "resources": [], "templateHtml": "\n", "templateCss": "", - "controllerScript": "self.onInit = function() {\n self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n}\n\nself.onDestroy = function() {\n self.ctx.gauge.destroy();\n}\n", - "settingsSchema": "{}", + "controllerScript": "self.onInit = function() {\n self.ctx.gauge = new TbAnalogueRadialGauge(self.ctx, 'radialGauge'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true,\n defaultDataKeysFunction: function() {\n return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n }\n };\n}\n\nself.onDestroy = function() {\n self.ctx.gauge.destroy();\n}\n", "settingsSchema": "{}", "dataKeySettingsSchema": "{}\n", "settingsDirective": "tb-analogue-radial-gauge-widget-settings", + "hasBasicMode": true, + "basicModeDirective": "tb-radial-gauge-basic-config", "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Temperature\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.7282710489093589,\"funcBody\":\"var value = prevValue + Math.random() * 40 - 20;\\nif (value < -60) {\\n\\tvalue = -60;\\n} else if (value > 60) {\\n\\tvalue = 60;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"maxValue\":60,\"startAngle\":67.5,\"ticksAngle\":225,\"showBorder\":true,\"defaultColor\":\"#e65100\",\"needleCircleSize\":7,\"highlights\":[{\"from\":-60,\"to\":-50,\"color\":\"#42a5f5\"},{\"from\":-50,\"to\":-40,\"color\":\"rgba(66, 165, 245, 0.83)\"},{\"from\":-40,\"to\":-30,\"color\":\"rgba(66, 165, 245, 0.66)\"},{\"from\":-30,\"to\":-20,\"color\":\"rgba(66, 165, 245, 0.5)\"},{\"from\":-20,\"to\":-10,\"color\":\"rgba(66, 165, 245, 0.33)\"},{\"from\":-10,\"to\":0,\"color\":\"rgba(66, 165, 245, 0.16)\"},{\"from\":0,\"to\":10,\"color\":\"rgba(229, 115, 115, 0.16)\"},{\"from\":10,\"to\":20,\"color\":\"rgba(229, 115, 115, 0.33)\"},{\"from\":20,\"to\":30,\"color\":\"rgba(229, 115, 115, 0.5)\"},{\"from\":30,\"to\":40,\"color\":\"rgba(229, 115, 115, 0.66)\"},{\"from\":40,\"to\":50,\"color\":\"rgba(229, 115, 115, 0.83)\"},{\"from\":50,\"to\":60,\"color\":\"#e57373\"}],\"showUnitTitle\":true,\"colorPlate\":\"#cfd8dc\",\"colorMajorTicks\":\"#444\",\"colorMinorTicks\":\"#666\",\"minorTicks\":2,\"valueInt\":3,\"valueDec\":1,\"highlightsWidth\":15,\"valueBox\":true,\"animation\":true,\"animationDuration\":1000,\"animationRule\":\"bounce\",\"colorNeedleShadowUp\":\"rgba(2, 255, 255, 0)\",\"colorNeedleShadowDown\":\"rgba(188, 143, 143, 0.78)\",\"units\":\"°C\",\"majorTicksCount\":12,\"numbersFont\":{\"family\":\"Roboto\",\"size\":20,\"style\":\"normal\",\"weight\":\"normal\",\"color\":\"#263238\"},\"titleFont\":{\"family\":\"Roboto\",\"size\":24,\"style\":\"normal\",\"weight\":\"normal\",\"color\":\"#263238\"},\"unitsFont\":{\"family\":\"Roboto\",\"size\":28,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#616161\"},\"valueFont\":{\"family\":\"Segment7Standard\",\"size\":30,\"style\":\"normal\",\"weight\":\"normal\",\"shadowColor\":\"rgba(0, 0, 0, 0.49)\",\"color\":\"#444\"},\"colorValueBoxRect\":\"#888\",\"colorValueBoxRectEnd\":\"#666\",\"colorValueBoxBackground\":\"#babab2\",\"colorValueBoxShadow\":\"rgba(0,0,0,1)\",\"unitTitle\":\"Temperature\",\"minValue\":-60},\"title\":\"Temperature radial gauge\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"widgetStyle\":{},\"widgetCss\":\"\",\"pageSize\":1024,\"decimals\":0,\"noDataDisplayMessage\":\"\"}" }, "externalId": null diff --git a/application/src/main/data/json/system/widget_types/thermometer_scale.json b/application/src/main/data/json/system/widget_types/thermometer_scale.json index cdc4a2268a..0f496a9dee 100644 --- a/application/src/main/data/json/system/widget_types/thermometer_scale.json +++ b/application/src/main/data/json/system/widget_types/thermometer_scale.json @@ -11,10 +11,11 @@ "resources": [], "templateHtml": "\n", "templateCss": "", - "controllerScript": "self.onInit = function() {\n self.ctx.gauge = new TbAnalogueLinearGauge(self.ctx, 'linearGauge'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true\n };\n}\n\nself.onDestroy = function() {\n self.ctx.gauge.destroy();\n}\n", - "settingsSchema": "{}", + "controllerScript": "self.onInit = function() {\n self.ctx.gauge = new TbAnalogueLinearGauge(self.ctx, 'linearGauge'); \n}\n\nself.onDataUpdated = function() {\n self.ctx.gauge.update();\n}\n\nself.onResize = function() {\n self.ctx.gauge.resize();\n}\n\nself.onMobileModeChanged = function() {\n self.ctx.gauge.mobileModeChanged();\n}\n\nself.typeParameters = function() {\n return {\n maxDatasources: 1,\n maxDataKeys: 1,\n singleEntity: true,\n defaultDataKeysFunction: function() {\n return [{ name: 'temperature', label: 'Temperature', type: 'timeseries' }];\n }\n };\n}\n\nself.onDestroy = function() {\n self.ctx.gauge.destroy();\n}\n", "settingsSchema": "{}", "dataKeySettingsSchema": "{}\n", "settingsDirective": "tb-analogue-linear-gauge-widget-settings", + "hasBasicMode": true, + "basicModeDirective": "tb-thermometer-scale-gauge-basic-config", "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Temp\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.7282710489093589,\"funcBody\":\"var value = prevValue + Math.random() * 30 - 15;\\nif (value < -60) {\\n\\tvalue = -60;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"maxValue\":100,\"defaultColor\":\"#e64a19\",\"barStrokeWidth\":2.5,\"colorBar\":\"rgba(255, 255, 255, 0.4)\",\"colorBarEnd\":\"rgba(221, 221, 221, 0.38)\",\"showUnitTitle\":true,\"minorTicks\":2,\"valueBox\":true,\"valueInt\":3,\"colorPlate\":\"#fff\",\"colorMajorTicks\":\"#444\",\"colorMinorTicks\":\"#666\",\"colorNeedleShadowUp\":\"rgba(2,255,255,0.2)\",\"colorNeedleShadowDown\":\"rgba(188,143,143,0.45)\",\"colorValueBoxRect\":\"#888\",\"colorValueBoxRectEnd\":\"#666\",\"colorValueBoxBackground\":\"#babab2\",\"colorValueBoxShadow\":\"rgba(0,0,0,1)\",\"highlightsWidth\":10,\"animation\":true,\"animationDuration\":1500,\"animationRule\":\"linear\",\"showBorder\":false,\"majorTicksCount\":8,\"numbersFont\":{\"family\":\"Arial\",\"size\":18,\"style\":\"normal\",\"weight\":\"normal\",\"color\":\"#263238\"},\"titleFont\":{\"family\":\"Roboto\",\"size\":24,\"style\":\"normal\",\"weight\":\"normal\",\"color\":\"#78909c\"},\"unitsFont\":{\"family\":\"Roboto\",\"size\":26,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#37474f\"},\"valueFont\":{\"family\":\"Roboto\",\"size\":40,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#444\",\"shadowColor\":\"rgba(0,0,0,0.3)\"},\"minValue\":-60,\"highlights\":[{\"from\":-60,\"to\":-40,\"color\":\"#90caf9\"},{\"from\":-40,\"to\":-20,\"color\":\"rgba(144, 202, 249, 0.66)\"},{\"from\":-20,\"to\":0,\"color\":\"rgba(144, 202, 249, 0.33)\"},{\"from\":0,\"to\":20,\"color\":\"rgba(244, 67, 54, 0.2)\"},{\"from\":20,\"to\":40,\"color\":\"rgba(244, 67, 54, 0.4)\"},{\"from\":40,\"to\":60,\"color\":\"rgba(244, 67, 54, 0.6)\"},{\"from\":60,\"to\":80,\"color\":\"rgba(244, 67, 54, 0.8)\"},{\"from\":80,\"to\":100,\"color\":\"#f44336\"}],\"unitTitle\":\"Temperature\",\"units\":\"°C\",\"colorBarProgress\":\"#90caf9\",\"colorBarProgressEnd\":\"#f44336\",\"colorBarStroke\":\"#b0bec5\",\"valueDec\":1},\"title\":\"Thermometer scale\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"widgetStyle\":{},\"widgetCss\":\"\",\"pageSize\":1024,\"decimals\":0,\"noDataDisplayMessage\":\"\"}" }, "externalId": null 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 a3d5b27610..c5e0c4b95c 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 @@ -73,9 +73,6 @@ import { 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'; @@ -105,7 +102,6 @@ import { ValueChartCardBasicConfigComponent, ProgressBarBasicConfigComponent, RadialGaugeBasicConfigComponent, - SpeedGaugeBasicConfigComponent, ThermometerScaleGaugeBasicConfigComponent, CompassGaugeBasicConfigComponent ], @@ -135,7 +131,6 @@ import { ValueChartCardBasicConfigComponent, ProgressBarBasicConfigComponent, RadialGaugeBasicConfigComponent, - SpeedGaugeBasicConfigComponent, ThermometerScaleGaugeBasicConfigComponent, CompassGaugeBasicConfigComponent ] @@ -159,7 +154,6 @@ export const basicWidgetConfigComponentsMap: {[key: string]: Type
widgets.gauge.scale-color
- - - + +
-
+
widgets.gauge.progress-bar
widgets.gauge.progress-bar-color-start
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 index 953626b226..6e422105ec 100644 --- 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 @@ -20,7 +20,6 @@ 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, @@ -61,8 +60,8 @@ export class GaugeBasicConfigComponent extends BasicWidgetConfigComponent { return this.radialGaugeWidgetConfigForm; } - protected setupDefaults(configData: WidgetConfigComponentData, key?: DataKey[]) { - this.setupDefaultDatasource(configData, key); + protected setupDefaults(configData: WidgetConfigComponentData) { + super.setupDefaults(configData); } protected onConfigSet(configData: WidgetConfigComponentData) { @@ -93,10 +92,7 @@ export class GaugeBasicConfigComponent extends BasicWidgetConfigComponent { defaultColor: [configData.config.settings?.defaultColor, []], colorPlate: [configData.config.settings?.colorPlate, []], - highlights: [{ - type: 'range', - rangeList: configData.config.settings?.highlights - }, []], + highlights: [configData.config.settings?.highlights, []], cardButtons: [this.getCardButtons(configData.config), []], borderRadius: [configData.config.borderRadius, []], 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 index 633e3c28f2..8bf0b5ea6e 100644 --- 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 @@ -14,40 +14,23 @@ /// limitations under the License. /// -import { ChangeDetectorRef, Component, Injector } from '@angular/core'; -import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; +import { Component } from '@angular/core'; +import { UntypedFormBuilder, UntypedFormGroup } 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'; +import { isUndefined } from '@core/utils'; @Component({ selector: 'tb-compass-gauge-basic-config', @@ -79,7 +62,7 @@ export class CompassGaugeBasicConfigComponent extends BasicWidgetConfigComponent } protected setupDefaults(configData: WidgetConfigComponentData) { - this.setupDefaultDatasource(configData, [{ name: 'direction', label: 'Direction', type: DataKeyType.timeseries }]); + super.setupDefaults(configData); } protected onConfigSet(configData: WidgetConfigComponentData) { 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 index 0abc0ad327..ec756b6605 100644 --- 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 @@ -15,19 +15,14 @@ /// import { Component } from '@angular/core'; -import { WidgetSettings } from '@shared/models/widget.models'; -import { UntypedFormBuilder, Validators } from '@angular/forms'; +import { UntypedFormBuilder } 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', @@ -44,10 +39,6 @@ export class RadialGaugeBasicConfigComponent extends GaugeBasicConfigComponent { 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 deleted file mode 100644 index d0df11fcba..0000000000 --- a/ui-ngx/src/app/modules/home/components/widget/config/basic/gauge/speed-gauge-basic-config.component.ts +++ /dev/null @@ -1,54 +0,0 @@ -/// -/// 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 index d8d796f6fb..97e3a0c69f 100644 --- 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 @@ -15,19 +15,14 @@ /// import { Component } from '@angular/core'; -import { WidgetSettings } from '@shared/models/widget.models'; -import { UntypedFormBuilder, Validators } from '@angular/forms'; +import { UntypedFormBuilder } 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', @@ -36,7 +31,7 @@ import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; }) export class ThermometerScaleGaugeBasicConfigComponent extends GaugeBasicConfigComponent { - gaugeType = 'thermometer'; + gaugeType = 'linear'; constructor(protected store: Store, protected widgetConfigComponent: WidgetConfigComponent, @@ -44,10 +39,6 @@ export class ThermometerScaleGaugeBasicConfigComponent extends GaugeBasicConfigC 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', diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html index 442a431e33..7769dab6a3 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.html @@ -249,9 +249,8 @@ - - - + +
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.ts index b2bc6621a1..3257987f4a 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/analogue-gauge-widget-settings.component.ts @@ -18,7 +18,6 @@ import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.m import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; -import { GaugeHighlight } from '@home/components/widget/lib/settings/gauge/gauge-highlight.component'; export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponent { @@ -153,7 +152,7 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen // Highlights settings highlightsWidth: [settings.highlightsWidth, [Validators.min(0)]], - highlights: this.prepareHighlights(settings.highlights), + highlights: [settings.highlights, []], // Animation settings animation: [settings.animation, []], @@ -231,8 +230,4 @@ export class AnalogueGaugeWidgetSettingsComponent extends WidgetSettingsComponen return settings; } - private prepareHighlights(highlights: GaugeHighlight[] | undefined) { - return {type: 'range', rangeList: highlights}; - } - } diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.html deleted file mode 100644 index f92edfcde5..0000000000 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.html +++ /dev/null @@ -1,61 +0,0 @@ - - - -
- -
-
{{ highlightRangeText() }}
-
-
-
-
- - - -
- - -
- -
-
- - widgets.gauge.highlight-from - - - - widgets.gauge.highlight-to - - -
- - -
-
- - diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.scss deleted file mode 100644 index 8b61fb7e3d..0000000000 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.scss +++ /dev/null @@ -1,40 +0,0 @@ -/** - * 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. - */ -:host { - display: block; - .mat-expansion-panel { - box-shadow: none; - &.gauge-highlight { - border: 1px groove rgba(0, 0, 0, .25); - .mat-expansion-panel-header { - padding: 0 24px 0 8px; - &.mat-expanded { - height: 48px; - } - } - } - } -} - -:host ::ng-deep { - .mat-expansion-panel { - &.gauge-highlight { - .mat-expansion-panel-body { - padding: 0 8px 8px; - } - } - } -} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.ts deleted file mode 100644 index e5c1ec9fbc..0000000000 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gauge/gauge-highlight.component.ts +++ /dev/null @@ -1,116 +0,0 @@ -/// -/// 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, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core'; -import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms'; -import { PageComponent } from '@shared/components/page.component'; -import { Store } from '@ngrx/store'; -import { AppState } from '@core/core.state'; -import { TranslateService } from '@ngx-translate/core'; -import { isNumber } from '@core/utils'; - -export interface GaugeHighlight { - from: number; - to: number; - color: string; -} - -@Component({ - selector: 'tb-gauge-highlight', - templateUrl: './gauge-highlight.component.html', - styleUrls: ['./gauge-highlight.component.scss'], - providers: [ - { - provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => GaugeHighlightComponent), - multi: true - } - ] -}) -export class GaugeHighlightComponent extends PageComponent implements OnInit, ControlValueAccessor { - - @Input() - disabled: boolean; - - @Input() - expanded = false; - - @Output() - removeHighlight = new EventEmitter(); - - private modelValue: GaugeHighlight; - - private propagateChange = null; - - public gaugeHighlightFormGroup: UntypedFormGroup; - - constructor(protected store: Store, - private translate: TranslateService, - private fb: UntypedFormBuilder) { - super(store); - } - - ngOnInit(): void { - this.gaugeHighlightFormGroup = this.fb.group({ - from: [null, []], - to: [null, []], - color: [null, []] - }); - this.gaugeHighlightFormGroup.valueChanges.subscribe(() => { - this.updateModel(); - }); - } - - registerOnChange(fn: any): void { - this.propagateChange = fn; - } - - registerOnTouched(fn: any): void { - } - - setDisabledState(isDisabled: boolean): void { - this.disabled = isDisabled; - if (isDisabled) { - this.gaugeHighlightFormGroup.disable({emitEvent: false}); - } else { - this.gaugeHighlightFormGroup.enable({emitEvent: false}); - } - } - - writeValue(value: GaugeHighlight): void { - this.modelValue = value; - this.gaugeHighlightFormGroup.patchValue( - value, {emitEvent: false} - ); - } - - highlightRangeText(): string { - const value: GaugeHighlight = this.gaugeHighlightFormGroup.value; - const from = isNumber(value.from) ? value.from : 0; - const to = isNumber(value.to) ? value.to : 0; - return `${from} - ${to}`; - } - - private updateModel() { - const value: GaugeHighlight = this.gaugeHighlightFormGroup.value; - this.modelValue = value; - if (this.gaugeHighlightFormGroup.valid) { - this.propagateChange(this.modelValue); - } else { - this.propagateChange(null); - } - } -} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts index 33b4323fdf..9ad7f62729 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts @@ -58,7 +58,6 @@ import { import { AlarmsTableKeySettingsComponent } from '@home/components/widget/lib/settings/alarm/alarms-table-key-settings.component'; -import { GaugeHighlightComponent } from '@home/components/widget/lib/settings/gauge/gauge-highlight.component'; import { AnalogueRadialGaugeWidgetSettingsComponent } from '@home/components/widget/lib/settings/gauge/analogue-radial-gauge-widget-settings.component'; @@ -318,7 +317,6 @@ import { EntitiesTableKeySettingsComponent, AlarmsTableWidgetSettingsComponent, AlarmsTableKeySettingsComponent, - GaugeHighlightComponent, AnalogueRadialGaugeWidgetSettingsComponent, AnalogueLinearGaugeWidgetSettingsComponent, AnalogueCompassWidgetSettingsComponent, @@ -434,7 +432,6 @@ import { EntitiesTableKeySettingsComponent, AlarmsTableWidgetSettingsComponent, AlarmsTableKeySettingsComponent, - GaugeHighlightComponent, AnalogueRadialGaugeWidgetSettingsComponent, AnalogueLinearGaugeWidgetSettingsComponent, AnalogueCompassWidgetSettingsComponent, From adfdc3bcb062db8036e621b4705b9139318d7396 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Wed, 25 Oct 2023 10:54:47 +0300 Subject: [PATCH 4/5] UI: Update default config for gauge widget --- .../src/main/data/json/system/widget_types/compass.json | 3 +-- .../src/main/data/json/system/widget_types/radial_gauge.json | 3 +-- .../src/main/data/json/system/widget_types/speed_gauge.json | 3 +-- .../json/system/widget_types/temperature_radial_gauge.json | 3 +-- .../main/data/json/system/widget_types/thermometer_scale.json | 3 +-- 5 files changed, 5 insertions(+), 10 deletions(-) diff --git a/application/src/main/data/json/system/widget_types/compass.json b/application/src/main/data/json/system/widget_types/compass.json index a44887f49f..9fc926145a 100644 --- a/application/src/main/data/json/system/widget_types/compass.json +++ b/application/src/main/data/json/system/widget_types/compass.json @@ -16,7 +16,6 @@ "settingsDirective": "tb-analogue-compass-widget-settings", "hasBasicMode": true, "basicModeDirective": "tb-compass-gauge-basic-config", - "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"minorTicks\":22,\"needleCircleSize\":15,\"showBorder\":true,\"borderOuterWidth\":10,\"colorPlate\":\"#222\",\"colorMajorTicks\":\"#f5f5f5\",\"colorMinorTicks\":\"#ddd\",\"colorNeedle\":\"#f08080\",\"colorNeedleCircle\":\"#e8e8e8\",\"colorBorder\":\"#ccc\",\"majorTickFont\":{\"family\":\"Roboto\",\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#ccc\"},\"animation\":true,\"animationDuration\":500,\"animationRule\":\"cycle\",\"animationTarget\":\"needle\",\"majorTicks\":[\"N\",\"NE\",\"E\",\"SE\",\"S\",\"SW\",\"W\",\"NW\"]},\"title\":\"Compass\",\"dropShadow\":true,\"enableFullscreen\":true,\"widgetStyle\":{},\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"useDashboardTimewindow\":true,\"showLegend\":false,\"actions\":{},\"widgetCss\":\"\",\"pageSize\":1024,\"decimals\":0,\"noDataDisplayMessage\":\"\"}" - }, + "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"minorTicks\":22,\"needleCircleSize\":15,\"showBorder\":true,\"borderOuterWidth\":10,\"colorPlate\":\"#222\",\"colorMajorTicks\":\"#f5f5f5\",\"colorMinorTicks\":\"#ddd\",\"colorNeedle\":\"#f08080\",\"colorNeedleCircle\":\"#e8e8e8\",\"colorBorder\":\"#ccc\",\"majorTickFont\":{\"family\":\"Roboto\",\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#ccc\"},\"animation\":true,\"animationDuration\":500,\"animationRule\":\"cycle\",\"animationTarget\":\"needle\",\"majorTicks\":[\"N\",\"NE\",\"E\",\"SE\",\"S\",\"SW\",\"W\",\"NW\"]},\"title\":\"Compass\",\"dropShadow\":true,\"enableFullscreen\":true,\"widgetStyle\":{},\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"useDashboardTimewindow\":true,\"showLegend\":false,\"actions\":{},\"widgetCss\":\"\",\"pageSize\":1024,\"decimals\":0,\"noDataDisplayMessage\":\"\",\"configMode\":\"basic\"}" }, "externalId": null } \ No newline at end of file diff --git a/application/src/main/data/json/system/widget_types/radial_gauge.json b/application/src/main/data/json/system/widget_types/radial_gauge.json index dc6d04f744..d3da6ef045 100644 --- a/application/src/main/data/json/system/widget_types/radial_gauge.json +++ b/application/src/main/data/json/system/widget_types/radial_gauge.json @@ -16,7 +16,6 @@ "settingsDirective": "tb-analogue-radial-gauge-widget-settings", "hasBasicMode": true, "basicModeDirective": "tb-radial-gauge-basic-config", - "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Temp\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.7282710489093589,\"funcBody\":\"var value = prevValue + Math.random() * 50 - 25;\\nif (value < -100) {\\n\\tvalue = -100;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"maxValue\":100,\"startAngle\":45,\"ticksAngle\":270,\"showBorder\":true,\"defaultColor\":\"#e65100\",\"needleCircleSize\":10,\"highlights\":[],\"showUnitTitle\":true,\"colorPlate\":\"#fff\",\"colorMajorTicks\":\"#444\",\"colorMinorTicks\":\"#666\",\"minorTicks\":10,\"valueInt\":3,\"valueDec\":0,\"highlightsWidth\":15,\"valueBox\":true,\"animation\":true,\"animationDuration\":500,\"animationRule\":\"cycle\",\"colorNeedleShadowUp\":\"rgba(2, 255, 255, 0)\",\"numbersFont\":{\"family\":\"Roboto\",\"size\":18,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#616161\"},\"titleFont\":{\"family\":\"Roboto\",\"size\":24,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#888\"},\"unitsFont\":{\"family\":\"Roboto\",\"size\":22,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#616161\"},\"valueFont\":{\"family\":\"Segment7Standard\",\"size\":36,\"style\":\"normal\",\"weight\":\"normal\",\"shadowColor\":\"rgba(0, 0, 0, 0.49)\",\"color\":\"#444\"},\"minValue\":-100,\"colorNeedleShadowDown\":\"rgba(188,143,143,0.45)\",\"colorValueBoxRect\":\"#888\",\"colorValueBoxRectEnd\":\"#666\",\"colorValueBoxBackground\":\"#babab2\",\"colorValueBoxShadow\":\"rgba(0,0,0,1)\"},\"title\":\"Radial gauge\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"widgetStyle\":{},\"widgetCss\":\"\",\"pageSize\":1024,\"decimals\":0,\"noDataDisplayMessage\":\"\"}" - }, + "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Temp\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.7282710489093589,\"funcBody\":\"var value = prevValue + Math.random() * 50 - 25;\\nif (value < -100) {\\n\\tvalue = -100;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"maxValue\":100,\"startAngle\":45,\"ticksAngle\":270,\"showBorder\":true,\"defaultColor\":\"#e65100\",\"needleCircleSize\":10,\"highlights\":[],\"showUnitTitle\":true,\"colorPlate\":\"#fff\",\"colorMajorTicks\":\"#444\",\"colorMinorTicks\":\"#666\",\"minorTicks\":10,\"valueInt\":3,\"valueDec\":0,\"highlightsWidth\":15,\"valueBox\":true,\"animation\":true,\"animationDuration\":500,\"animationRule\":\"cycle\",\"colorNeedleShadowUp\":\"rgba(2, 255, 255, 0)\",\"numbersFont\":{\"family\":\"Roboto\",\"size\":18,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#616161\"},\"titleFont\":{\"family\":\"Roboto\",\"size\":24,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#888\"},\"unitsFont\":{\"family\":\"Roboto\",\"size\":22,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#616161\"},\"valueFont\":{\"family\":\"Segment7Standard\",\"size\":36,\"style\":\"normal\",\"weight\":\"normal\",\"shadowColor\":\"rgba(0, 0, 0, 0.49)\",\"color\":\"#444\"},\"minValue\":-100,\"colorNeedleShadowDown\":\"rgba(188,143,143,0.45)\",\"colorValueBoxRect\":\"#888\",\"colorValueBoxRectEnd\":\"#666\",\"colorValueBoxBackground\":\"#babab2\",\"colorValueBoxShadow\":\"rgba(0,0,0,1)\"},\"title\":\"Radial gauge\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"widgetStyle\":{},\"widgetCss\":\"\",\"pageSize\":1024,\"decimals\":0,\"noDataDisplayMessage\":\"\",\"configMode\":\"basic\"}" }, "externalId": null } \ No newline at end of file diff --git a/application/src/main/data/json/system/widget_types/speed_gauge.json b/application/src/main/data/json/system/widget_types/speed_gauge.json index 9a2850bfb4..e6853629ce 100644 --- a/application/src/main/data/json/system/widget_types/speed_gauge.json +++ b/application/src/main/data/json/system/widget_types/speed_gauge.json @@ -16,7 +16,6 @@ "settingsDirective": "tb-analogue-radial-gauge-widget-settings", "hasBasicMode": true, "basicModeDirective": "tb-radial-gauge-basic-config", - "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Speed\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.7282710489093589,\"funcBody\":\"var value = prevValue + Math.random() * 50 - 25;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 220) {\\n\\tvalue = 220;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"maxValue\":180,\"startAngle\":45,\"ticksAngle\":270,\"showBorder\":false,\"defaultColor\":\"#e65100\",\"needleCircleSize\":7,\"highlights\":[{\"from\":80,\"to\":120,\"color\":\"#fdd835\"},{\"color\":\"#e57373\",\"from\":120,\"to\":180}],\"showUnitTitle\":false,\"colorPlate\":\"#fff\",\"colorMajorTicks\":\"#444\",\"colorMinorTicks\":\"#666\",\"minorTicks\":2,\"valueInt\":3,\"minValue\":0,\"valueDec\":0,\"highlightsWidth\":15,\"valueBox\":true,\"animation\":true,\"animationDuration\":1500,\"animationRule\":\"linear\",\"colorNeedleShadowUp\":\"rgba(2, 255, 255, 0)\",\"colorNeedleShadowDown\":\"rgba(188, 143, 143, 0.78)\",\"units\":\"MPH\",\"majorTicksCount\":9,\"numbersFont\":{\"family\":\"Roboto\",\"size\":22,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#616161\"},\"titleFont\":{\"family\":\"Roboto\",\"size\":24,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#888\"},\"unitsFont\":{\"family\":\"Roboto\",\"size\":28,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#616161\"},\"valueFont\":{\"size\":32,\"style\":\"normal\",\"weight\":\"normal\",\"shadowColor\":\"rgba(0, 0, 0, 0.49)\",\"color\":\"#444\",\"family\":\"Segment7Standard\"},\"colorValueBoxRect\":\"#888\",\"colorValueBoxRectEnd\":\"#666\",\"colorValueBoxBackground\":\"#babab2\",\"colorValueBoxShadow\":\"rgba(0,0,0,1)\"},\"title\":\"Speed gauge\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"widgetStyle\":{},\"widgetCss\":\"\",\"pageSize\":1024,\"decimals\":0,\"noDataDisplayMessage\":\"\"}" - }, + "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Speed\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.7282710489093589,\"funcBody\":\"var value = prevValue + Math.random() * 50 - 25;\\nif (value < 0) {\\n\\tvalue = 0;\\n} else if (value > 220) {\\n\\tvalue = 220;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"maxValue\":180,\"startAngle\":45,\"ticksAngle\":270,\"showBorder\":false,\"defaultColor\":\"#e65100\",\"needleCircleSize\":7,\"highlights\":[{\"from\":80,\"to\":120,\"color\":\"#fdd835\"},{\"color\":\"#e57373\",\"from\":120,\"to\":180}],\"showUnitTitle\":false,\"colorPlate\":\"#fff\",\"colorMajorTicks\":\"#444\",\"colorMinorTicks\":\"#666\",\"minorTicks\":2,\"valueInt\":3,\"minValue\":0,\"valueDec\":0,\"highlightsWidth\":15,\"valueBox\":true,\"animation\":true,\"animationDuration\":1500,\"animationRule\":\"linear\",\"colorNeedleShadowUp\":\"rgba(2, 255, 255, 0)\",\"colorNeedleShadowDown\":\"rgba(188, 143, 143, 0.78)\",\"units\":\"MPH\",\"majorTicksCount\":9,\"numbersFont\":{\"family\":\"Roboto\",\"size\":22,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#616161\"},\"titleFont\":{\"family\":\"Roboto\",\"size\":24,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#888\"},\"unitsFont\":{\"family\":\"Roboto\",\"size\":28,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#616161\"},\"valueFont\":{\"size\":32,\"style\":\"normal\",\"weight\":\"normal\",\"shadowColor\":\"rgba(0, 0, 0, 0.49)\",\"color\":\"#444\",\"family\":\"Segment7Standard\"},\"colorValueBoxRect\":\"#888\",\"colorValueBoxRectEnd\":\"#666\",\"colorValueBoxBackground\":\"#babab2\",\"colorValueBoxShadow\":\"rgba(0,0,0,1)\"},\"title\":\"Speed gauge\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"widgetStyle\":{},\"widgetCss\":\"\",\"pageSize\":1024,\"decimals\":0,\"noDataDisplayMessage\":\"\",\"configMode\":\"basic\"}" }, "externalId": null } \ No newline at end of file diff --git a/application/src/main/data/json/system/widget_types/temperature_radial_gauge.json b/application/src/main/data/json/system/widget_types/temperature_radial_gauge.json index adf1ca2cae..1f5de24fec 100644 --- a/application/src/main/data/json/system/widget_types/temperature_radial_gauge.json +++ b/application/src/main/data/json/system/widget_types/temperature_radial_gauge.json @@ -16,7 +16,6 @@ "settingsDirective": "tb-analogue-radial-gauge-widget-settings", "hasBasicMode": true, "basicModeDirective": "tb-radial-gauge-basic-config", - "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Temperature\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.7282710489093589,\"funcBody\":\"var value = prevValue + Math.random() * 40 - 20;\\nif (value < -60) {\\n\\tvalue = -60;\\n} else if (value > 60) {\\n\\tvalue = 60;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"maxValue\":60,\"startAngle\":67.5,\"ticksAngle\":225,\"showBorder\":true,\"defaultColor\":\"#e65100\",\"needleCircleSize\":7,\"highlights\":[{\"from\":-60,\"to\":-50,\"color\":\"#42a5f5\"},{\"from\":-50,\"to\":-40,\"color\":\"rgba(66, 165, 245, 0.83)\"},{\"from\":-40,\"to\":-30,\"color\":\"rgba(66, 165, 245, 0.66)\"},{\"from\":-30,\"to\":-20,\"color\":\"rgba(66, 165, 245, 0.5)\"},{\"from\":-20,\"to\":-10,\"color\":\"rgba(66, 165, 245, 0.33)\"},{\"from\":-10,\"to\":0,\"color\":\"rgba(66, 165, 245, 0.16)\"},{\"from\":0,\"to\":10,\"color\":\"rgba(229, 115, 115, 0.16)\"},{\"from\":10,\"to\":20,\"color\":\"rgba(229, 115, 115, 0.33)\"},{\"from\":20,\"to\":30,\"color\":\"rgba(229, 115, 115, 0.5)\"},{\"from\":30,\"to\":40,\"color\":\"rgba(229, 115, 115, 0.66)\"},{\"from\":40,\"to\":50,\"color\":\"rgba(229, 115, 115, 0.83)\"},{\"from\":50,\"to\":60,\"color\":\"#e57373\"}],\"showUnitTitle\":true,\"colorPlate\":\"#cfd8dc\",\"colorMajorTicks\":\"#444\",\"colorMinorTicks\":\"#666\",\"minorTicks\":2,\"valueInt\":3,\"valueDec\":1,\"highlightsWidth\":15,\"valueBox\":true,\"animation\":true,\"animationDuration\":1000,\"animationRule\":\"bounce\",\"colorNeedleShadowUp\":\"rgba(2, 255, 255, 0)\",\"colorNeedleShadowDown\":\"rgba(188, 143, 143, 0.78)\",\"units\":\"°C\",\"majorTicksCount\":12,\"numbersFont\":{\"family\":\"Roboto\",\"size\":20,\"style\":\"normal\",\"weight\":\"normal\",\"color\":\"#263238\"},\"titleFont\":{\"family\":\"Roboto\",\"size\":24,\"style\":\"normal\",\"weight\":\"normal\",\"color\":\"#263238\"},\"unitsFont\":{\"family\":\"Roboto\",\"size\":28,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#616161\"},\"valueFont\":{\"family\":\"Segment7Standard\",\"size\":30,\"style\":\"normal\",\"weight\":\"normal\",\"shadowColor\":\"rgba(0, 0, 0, 0.49)\",\"color\":\"#444\"},\"colorValueBoxRect\":\"#888\",\"colorValueBoxRectEnd\":\"#666\",\"colorValueBoxBackground\":\"#babab2\",\"colorValueBoxShadow\":\"rgba(0,0,0,1)\",\"unitTitle\":\"Temperature\",\"minValue\":-60},\"title\":\"Temperature radial gauge\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"widgetStyle\":{},\"widgetCss\":\"\",\"pageSize\":1024,\"decimals\":0,\"noDataDisplayMessage\":\"\"}" - }, + "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Temperature\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.7282710489093589,\"funcBody\":\"var value = prevValue + Math.random() * 40 - 20;\\nif (value < -60) {\\n\\tvalue = -60;\\n} else if (value > 60) {\\n\\tvalue = 60;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"maxValue\":60,\"startAngle\":67.5,\"ticksAngle\":225,\"showBorder\":true,\"defaultColor\":\"#e65100\",\"needleCircleSize\":7,\"highlights\":[{\"from\":-60,\"to\":-50,\"color\":\"#42a5f5\"},{\"from\":-50,\"to\":-40,\"color\":\"rgba(66, 165, 245, 0.83)\"},{\"from\":-40,\"to\":-30,\"color\":\"rgba(66, 165, 245, 0.66)\"},{\"from\":-30,\"to\":-20,\"color\":\"rgba(66, 165, 245, 0.5)\"},{\"from\":-20,\"to\":-10,\"color\":\"rgba(66, 165, 245, 0.33)\"},{\"from\":-10,\"to\":0,\"color\":\"rgba(66, 165, 245, 0.16)\"},{\"from\":0,\"to\":10,\"color\":\"rgba(229, 115, 115, 0.16)\"},{\"from\":10,\"to\":20,\"color\":\"rgba(229, 115, 115, 0.33)\"},{\"from\":20,\"to\":30,\"color\":\"rgba(229, 115, 115, 0.5)\"},{\"from\":30,\"to\":40,\"color\":\"rgba(229, 115, 115, 0.66)\"},{\"from\":40,\"to\":50,\"color\":\"rgba(229, 115, 115, 0.83)\"},{\"from\":50,\"to\":60,\"color\":\"#e57373\"}],\"showUnitTitle\":true,\"colorPlate\":\"#cfd8dc\",\"colorMajorTicks\":\"#444\",\"colorMinorTicks\":\"#666\",\"minorTicks\":2,\"valueInt\":3,\"valueDec\":1,\"highlightsWidth\":15,\"valueBox\":true,\"animation\":true,\"animationDuration\":1000,\"animationRule\":\"bounce\",\"colorNeedleShadowUp\":\"rgba(2, 255, 255, 0)\",\"colorNeedleShadowDown\":\"rgba(188, 143, 143, 0.78)\",\"units\":\"°C\",\"majorTicksCount\":12,\"numbersFont\":{\"family\":\"Roboto\",\"size\":20,\"style\":\"normal\",\"weight\":\"normal\",\"color\":\"#263238\"},\"titleFont\":{\"family\":\"Roboto\",\"size\":24,\"style\":\"normal\",\"weight\":\"normal\",\"color\":\"#263238\"},\"unitsFont\":{\"family\":\"Roboto\",\"size\":28,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#616161\"},\"valueFont\":{\"family\":\"Segment7Standard\",\"size\":30,\"style\":\"normal\",\"weight\":\"normal\",\"shadowColor\":\"rgba(0, 0, 0, 0.49)\",\"color\":\"#444\"},\"colorValueBoxRect\":\"#888\",\"colorValueBoxRectEnd\":\"#666\",\"colorValueBoxBackground\":\"#babab2\",\"colorValueBoxShadow\":\"rgba(0,0,0,1)\",\"unitTitle\":\"Temperature\",\"minValue\":-60},\"title\":\"Temperature radial gauge\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"widgetStyle\":{},\"widgetCss\":\"\",\"pageSize\":1024,\"decimals\":0,\"noDataDisplayMessage\":\"\",\"configMode\":\"basic\"}" }, "externalId": null } \ No newline at end of file diff --git a/application/src/main/data/json/system/widget_types/thermometer_scale.json b/application/src/main/data/json/system/widget_types/thermometer_scale.json index 0f496a9dee..0dfcdd3a42 100644 --- a/application/src/main/data/json/system/widget_types/thermometer_scale.json +++ b/application/src/main/data/json/system/widget_types/thermometer_scale.json @@ -16,7 +16,6 @@ "settingsDirective": "tb-analogue-linear-gauge-widget-settings", "hasBasicMode": true, "basicModeDirective": "tb-thermometer-scale-gauge-basic-config", - "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Temp\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.7282710489093589,\"funcBody\":\"var value = prevValue + Math.random() * 30 - 15;\\nif (value < -60) {\\n\\tvalue = -60;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"maxValue\":100,\"defaultColor\":\"#e64a19\",\"barStrokeWidth\":2.5,\"colorBar\":\"rgba(255, 255, 255, 0.4)\",\"colorBarEnd\":\"rgba(221, 221, 221, 0.38)\",\"showUnitTitle\":true,\"minorTicks\":2,\"valueBox\":true,\"valueInt\":3,\"colorPlate\":\"#fff\",\"colorMajorTicks\":\"#444\",\"colorMinorTicks\":\"#666\",\"colorNeedleShadowUp\":\"rgba(2,255,255,0.2)\",\"colorNeedleShadowDown\":\"rgba(188,143,143,0.45)\",\"colorValueBoxRect\":\"#888\",\"colorValueBoxRectEnd\":\"#666\",\"colorValueBoxBackground\":\"#babab2\",\"colorValueBoxShadow\":\"rgba(0,0,0,1)\",\"highlightsWidth\":10,\"animation\":true,\"animationDuration\":1500,\"animationRule\":\"linear\",\"showBorder\":false,\"majorTicksCount\":8,\"numbersFont\":{\"family\":\"Arial\",\"size\":18,\"style\":\"normal\",\"weight\":\"normal\",\"color\":\"#263238\"},\"titleFont\":{\"family\":\"Roboto\",\"size\":24,\"style\":\"normal\",\"weight\":\"normal\",\"color\":\"#78909c\"},\"unitsFont\":{\"family\":\"Roboto\",\"size\":26,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#37474f\"},\"valueFont\":{\"family\":\"Roboto\",\"size\":40,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#444\",\"shadowColor\":\"rgba(0,0,0,0.3)\"},\"minValue\":-60,\"highlights\":[{\"from\":-60,\"to\":-40,\"color\":\"#90caf9\"},{\"from\":-40,\"to\":-20,\"color\":\"rgba(144, 202, 249, 0.66)\"},{\"from\":-20,\"to\":0,\"color\":\"rgba(144, 202, 249, 0.33)\"},{\"from\":0,\"to\":20,\"color\":\"rgba(244, 67, 54, 0.2)\"},{\"from\":20,\"to\":40,\"color\":\"rgba(244, 67, 54, 0.4)\"},{\"from\":40,\"to\":60,\"color\":\"rgba(244, 67, 54, 0.6)\"},{\"from\":60,\"to\":80,\"color\":\"rgba(244, 67, 54, 0.8)\"},{\"from\":80,\"to\":100,\"color\":\"#f44336\"}],\"unitTitle\":\"Temperature\",\"units\":\"°C\",\"colorBarProgress\":\"#90caf9\",\"colorBarProgressEnd\":\"#f44336\",\"colorBarStroke\":\"#b0bec5\",\"valueDec\":1},\"title\":\"Thermometer scale\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"widgetStyle\":{},\"widgetCss\":\"\",\"pageSize\":1024,\"decimals\":0,\"noDataDisplayMessage\":\"\"}" - }, + "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Temp\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.7282710489093589,\"funcBody\":\"var value = prevValue + Math.random() * 30 - 15;\\nif (value < -60) {\\n\\tvalue = -60;\\n} else if (value > 100) {\\n\\tvalue = 100;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":false,\"backgroundColor\":\"rgb(255, 255, 255)\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"maxValue\":100,\"defaultColor\":\"#e64a19\",\"barStrokeWidth\":2.5,\"colorBar\":\"rgba(255, 255, 255, 0.4)\",\"colorBarEnd\":\"rgba(221, 221, 221, 0.38)\",\"showUnitTitle\":true,\"minorTicks\":2,\"valueBox\":true,\"valueInt\":3,\"colorPlate\":\"#fff\",\"colorMajorTicks\":\"#444\",\"colorMinorTicks\":\"#666\",\"colorNeedleShadowUp\":\"rgba(2,255,255,0.2)\",\"colorNeedleShadowDown\":\"rgba(188,143,143,0.45)\",\"colorValueBoxRect\":\"#888\",\"colorValueBoxRectEnd\":\"#666\",\"colorValueBoxBackground\":\"#babab2\",\"colorValueBoxShadow\":\"rgba(0,0,0,1)\",\"highlightsWidth\":10,\"animation\":true,\"animationDuration\":1500,\"animationRule\":\"linear\",\"showBorder\":false,\"majorTicksCount\":8,\"numbersFont\":{\"family\":\"Arial\",\"size\":18,\"style\":\"normal\",\"weight\":\"normal\",\"color\":\"#263238\"},\"titleFont\":{\"family\":\"Roboto\",\"size\":24,\"style\":\"normal\",\"weight\":\"normal\",\"color\":\"#78909c\"},\"unitsFont\":{\"family\":\"Roboto\",\"size\":26,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#37474f\"},\"valueFont\":{\"family\":\"Roboto\",\"size\":40,\"style\":\"normal\",\"weight\":\"500\",\"color\":\"#444\",\"shadowColor\":\"rgba(0,0,0,0.3)\"},\"minValue\":-60,\"highlights\":[{\"from\":-60,\"to\":-40,\"color\":\"#90caf9\"},{\"from\":-40,\"to\":-20,\"color\":\"rgba(144, 202, 249, 0.66)\"},{\"from\":-20,\"to\":0,\"color\":\"rgba(144, 202, 249, 0.33)\"},{\"from\":0,\"to\":20,\"color\":\"rgba(244, 67, 54, 0.2)\"},{\"from\":20,\"to\":40,\"color\":\"rgba(244, 67, 54, 0.4)\"},{\"from\":40,\"to\":60,\"color\":\"rgba(244, 67, 54, 0.6)\"},{\"from\":60,\"to\":80,\"color\":\"rgba(244, 67, 54, 0.8)\"},{\"from\":80,\"to\":100,\"color\":\"#f44336\"}],\"unitTitle\":\"Temperature\",\"units\":\"°C\",\"colorBarProgress\":\"#90caf9\",\"colorBarProgressEnd\":\"#f44336\",\"colorBarStroke\":\"#b0bec5\",\"valueDec\":1},\"title\":\"Thermometer scale\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"widgetStyle\":{},\"widgetCss\":\"\",\"pageSize\":1024,\"decimals\":0,\"noDataDisplayMessage\":\"\",\"configMode\":\"basic\"}" }, "externalId": null } \ No newline at end of file From 62019ffd680c7f3e8da3f4a25b56a5fb32e04ce9 Mon Sep 17 00:00:00 2001 From: Artem Dzhereleiko Date: Wed, 25 Oct 2023 11:45:01 +0300 Subject: [PATCH 5/5] UI: Refactoring font panel disabled line height --- .../lib/settings/common/font-settings-panel.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings-panel.component.html index 44163fae26..c5687be400 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings-panel.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/font-settings-panel.component.html @@ -73,7 +73,7 @@ -
+
widgets.widget-font.line-height