-
-
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss
index 2ae2eaa211..e3926c8eea 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.scss
@@ -16,6 +16,24 @@
@import '../../../../../scss/constants';
.tb-widget-config {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ .tb-widget-config-header {
+ padding: 24px 24px 8px;
+ height: 56px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-between;
+ }
+ .tb-widget-config-content {
+ flex: 1;
+ overflow: auto;
+ & > div {
+ padding: 16px;
+ }
+ }
.tb-panel-hint {
font-size: 12px;
color: #808080;
@@ -120,6 +138,11 @@
:host ::ng-deep {
.tb-widget-config {
+ .tb-widget-config-header {
+ .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
+ padding: 0 20px;
+ }
+ }
tb-alarm-filter-config {
.mdc-button {
width: 100%;
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts
index 1514c1b929..634b893526 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.ts
@@ -14,7 +14,7 @@
/// limitations under the License.
///
-import { Component, forwardRef, Input, OnInit } from '@angular/core';
+import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
import { PageComponent } from '@shared/components/page.component';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
@@ -25,7 +25,6 @@ import {
datasourcesHasOnlyComparisonAggregation,
DatasourceType,
datasourceTypeTranslationMap,
- defaultLegendConfig,
GroupInfo,
JsonSchema,
JsonSettingsSchema,
@@ -68,6 +67,7 @@ import { entityFields } from '@shared/models/entity.models';
import { Filter } from '@shared/models/query/query.models';
import { FilterDialogComponent, FilterDialogData } from '@home/components/filter/filter-dialog.component';
import { CdkDragDrop } from '@angular/cdk/drag-drop';
+import { ToggleHeaderOption } from '@shared/components/toggle-header.component';
const emptySettingsSchema: JsonSchema = {
type: 'object',
@@ -95,7 +95,7 @@ const defaultSettingsForm = [
}
]
})
-export class WidgetConfigComponent extends PageComponent implements OnInit, ControlValueAccessor, Validator {
+export class WidgetConfigComponent extends PageComponent implements OnInit, OnDestroy, ControlValueAccessor, Validator {
widgetTypes = widgetType;
@@ -134,14 +134,13 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont
widgetEditMode = this.utils.widgetEditMode;
- selectedTab: number;
-
modelValue: WidgetConfigComponentData;
- showLegendFieldset = true;
-
private propagateChange = null;
+ headerOptions: ToggleHeaderOption[] = [];
+ selectedOption: string;
+
public dataSettings: UntypedFormGroup;
public targetDeviceSettings: UntypedFormGroup;
public alarmSourceSettings: UntypedFormGroup;
@@ -196,9 +195,7 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont
pageSize: [1024, [Validators.min(1), Validators.pattern(/^\d*$/)]],
units: [null, []],
decimals: [null, [Validators.min(0), Validators.max(15), Validators.pattern(/^\d*$/)]],
- noDataDisplayMessage: [null, []],
- showLegend: [null, []],
- legendConfig: [null, []]
+ noDataDisplayMessage: [null, []]
});
this.widgetSettings.get('showTitle').valueChanges.subscribe((value: boolean) => {
if (value) {
@@ -224,13 +221,6 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont
this.widgetSettings.get('iconSize').disable({emitEvent: false});
}
});
- this.widgetSettings.get('showLegend').valueChanges.subscribe((value: boolean) => {
- if (value) {
- this.widgetSettings.get('legendConfig').enable({emitEvent: false});
- } else {
- this.widgetSettings.get('legendConfig').disable({emitEvent: false});
- }
- });
this.layoutSettings = this.fb.group({
mobileOrder: [null, [Validators.pattern(/^-?[0-9]+$/)]],
mobileHeight: [null, [Validators.min(1), Validators.pattern(/^\d*$/)]],
@@ -370,15 +360,49 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont
this.modelValue = value;
this.removeChangeSubscriptions();
if (this.modelValue) {
+ this.headerOptions.length = 0;
+ if (this.modelValue.widgetType !== widgetType.static) {
+ this.headerOptions.push(
+ {
+ name: this.translate.instant('widget-config.data'),
+ value: 'data'
+ }
+ );
+ }
+ if (this.displayAdvanced()) {
+ this.headerOptions.push(
+ {
+ name: this.translate.instant('widget-config.appearance'),
+ value: 'appearance'
+ }
+ );
+ }
+ this.headerOptions.push(
+ {
+ name: this.translate.instant('widget-config.widget-card'),
+ value: 'card'
+ }
+ );
+ this.headerOptions.push(
+ {
+ name: this.translate.instant('widget-config.actions'),
+ value: 'actions'
+ }
+ );
+ this.headerOptions.push(
+ {
+ name: this.translate.instant('widget-config.mobile'),
+ value: 'mobile'
+ }
+ );
+ this.selectedOption = this.headerOptions[0].value;
if (this.widgetType !== this.modelValue.widgetType) {
this.widgetType = this.modelValue.widgetType;
- this.showLegendFieldset = (this.widgetType === widgetType.timeseries || this.widgetType === widgetType.latest);
this.buildForms();
}
const config = this.modelValue.config;
const layout = this.modelValue.layout;
if (config) {
- this.selectedTab = 0;
const displayWidgetTitle = isDefined(config.showTitle) ? config.showTitle : false;
this.widgetSettings.patchValue({
title: config.title,
@@ -403,10 +427,7 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont
pageSize: isDefined(config.pageSize) ? config.pageSize : 1024,
units: config.units,
decimals: config.decimals,
- noDataDisplayMessage: isDefined(config.noDataDisplayMessage) ? config.noDataDisplayMessage : '',
- showLegend: isDefined(config.showLegend) ? config.showLegend :
- this.widgetType === widgetType.timeseries,
- legendConfig: config.legendConfig || defaultLegendConfig(this.widgetType)
+ noDataDisplayMessage: isDefined(config.noDataDisplayMessage) ? config.noDataDisplayMessage : ''
},
{emitEvent: false}
);
@@ -430,12 +451,6 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont
this.widgetSettings.get('iconColor').disable({emitEvent: false});
this.widgetSettings.get('iconSize').disable({emitEvent: false});
}
- const showLegend: boolean = this.widgetSettings.get('showLegend').value;
- if (showLegend) {
- this.widgetSettings.get('legendConfig').enable({emitEvent: false});
- } else {
- this.widgetSettings.get('legendConfig').disable({emitEvent: false});
- }
const actionsData: WidgetActionsData = {
actionsMap: config.actions || {},
actionSources: this.modelValue.actionSources || {}
@@ -812,15 +827,13 @@ export class WidgetConfigComponent extends PageComponent implements OnInit, Cont
private fetchEntityKeys(entityAliasId: string, dataKeyTypes: Array
): Observable> {
return this.aliasController.getAliasInfo(entityAliasId).pipe(
- mergeMap((aliasInfo) => {
- return this.entityService.getEntityKeysByEntityFilter(
+ mergeMap((aliasInfo) => this.entityService.getEntityKeysByEntityFilter(
aliasInfo.entityFilter,
dataKeyTypes,
{ignoreLoading: true, ignoreErrors: true}
).pipe(
catchError(() => of([]))
- );
- }),
+ )),
catchError(() => of([] as Array))
);
}
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-preview.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-preview.component.html
new file mode 100644
index 0000000000..7948cb19d4
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-preview.component.html
@@ -0,0 +1,32 @@
+
+
+
+widget-config.preview
+
+
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-preview.component.scss b/ui-ngx/src/app/modules/home/components/widget/widget-preview.component.scss
new file mode 100644
index 0000000000..73636f346b
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-preview.component.scss
@@ -0,0 +1,49 @@
+/**
+ * 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 {
+ z-index: 10;
+ background: #F3F6FA;
+ .tb-preview-dashboard {
+ position: absolute;
+ top: 15%;
+ bottom: 15%;
+ left: 0;
+ right: 0;
+ }
+ .tb-preview-title {
+ position: absolute;
+ top: 16px;
+ left: 16px;
+ font-weight: 500;
+ font-size: 13px;
+ line-height: 16px;
+ letter-spacing: normal;
+ color: rgba(0, 0, 0, 0.38);
+ }
+ .tb-preview-panel {
+ position: absolute;
+ top: 16px;
+ right: 24px;
+ }
+}
+
+:host ::ng-deep {
+ tb-dashboard.tb-preview-dashboard {
+ .tb-dashboard-content {
+ background-color: transparent !important;
+ }
+ }
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-preview.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget-preview.component.ts
new file mode 100644
index 0000000000..3d82caa9a7
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-preview.component.ts
@@ -0,0 +1,64 @@
+///
+/// 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, forwardRef, Input, OnInit } from '@angular/core';
+import { ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validator } from '@angular/forms';
+import { PageComponent } from '@shared/components/page.component';
+import { IAliasController, IStateController } from '@core/api/widget-api.models';
+import { Widget, WidgetConfig } from '@shared/models/widget.models';
+import { Store } from '@ngrx/store';
+import { AppState } from '@core/core.state';
+import { deepClone } from '@core/utils';
+
+@Component({
+ selector: 'tb-widget-preview',
+ templateUrl: './widget-preview.component.html',
+ styleUrls: ['./widget-preview.component.scss']
+})
+export class WidgetPreviewComponent extends PageComponent implements OnInit {
+
+ @Input()
+ aliasController: IAliasController;
+
+ @Input()
+ stateController: IStateController;
+
+ @Input()
+ widget: Widget;
+
+ @Input()
+ widgetConfig: WidgetConfig;
+
+ widgets: Widget[];
+
+ constructor(protected store: Store) {
+ super(store);
+ }
+
+ ngOnInit(): void {
+ const sizeX = this.widget.sizeX * 2;
+ const sizeY = this.widget.sizeY * 2;
+ const col = Math.floor(Math.max(0, (20 - sizeX) / 2));
+ const widget = deepClone(this.widget);
+ widget.sizeX = sizeX;
+ widget.sizeY = sizeY;
+ widget.row = 0;
+ widget.col = col;
+ widget.config = this.widgetConfig;
+ this.widgets = [widget];
+ }
+
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.html b/ui-ngx/src/app/modules/home/components/widget/widget.component.html
index 0f8f6a9997..76c800f524 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.html
@@ -15,23 +15,11 @@
limitations under the License.
-->
-
Widget Error: {{ widgetErrorData.name + ": " + widgetErrorData.message}}
@@ -42,5 +30,5 @@
class="tb-absolute-fill">{{ noDataDisplayMessageText }}
-
+
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
index 5a3b55bf2d..7e1dfdc617 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/widget.component.ts
@@ -39,10 +39,6 @@ import {
} from '@angular/core';
import { DashboardWidget } from '@home/models/dashboard-component.models';
import {
- defaultLegendConfig,
- LegendConfig,
- LegendData,
- LegendPosition,
Widget,
WidgetActionDescriptor,
widgetActionSources,
@@ -152,13 +148,6 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
displayNoData = false;
noDataDisplayMessageText: string;
- displayLegend: boolean;
- legendConfig: LegendConfig;
- legendData: LegendData;
- isLegendFirst: boolean;
- legendContainerLayoutType: string;
- legendStyle: {[klass: string]: any};
-
dynamicWidgetComponentRef: ComponentRef;
dynamicWidgetComponent: IDynamicWidgetComponent;
@@ -220,57 +209,6 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
this.widget = this.dashboardWidget.widget;
- this.displayLegend = isDefined(this.widget.config.showLegend) ? this.widget.config.showLegend
- : this.widget.type === widgetType.timeseries;
-
- this.legendContainerLayoutType = 'column';
-
- if (this.displayLegend) {
- this.legendConfig = this.widget.config.legendConfig || defaultLegendConfig(this.widget.type);
- this.legendData = {
- keys: [],
- data: []
- };
- if (this.legendConfig.position === LegendPosition.top ||
- this.legendConfig.position === LegendPosition.bottom) {
- this.legendContainerLayoutType = 'column';
- this.isLegendFirst = this.legendConfig.position === LegendPosition.top;
- } else {
- this.legendContainerLayoutType = 'row';
- this.isLegendFirst = this.legendConfig.position === LegendPosition.left;
- }
- switch (this.legendConfig.position) {
- case LegendPosition.top:
- this.legendStyle = {
- paddingBottom: '8px',
- maxHeight: '50%',
- overflowY: 'auto'
- };
- break;
- case LegendPosition.bottom:
- this.legendStyle = {
- paddingTop: '8px',
- maxHeight: '50%',
- overflowY: 'auto'
- };
- break;
- case LegendPosition.left:
- this.legendStyle = {
- paddingRight: '0px',
- maxWidth: '50%',
- overflowY: 'auto'
- };
- break;
- case LegendPosition.right:
- this.legendStyle = {
- paddingLeft: '0px',
- maxWidth: '50%',
- overflowY: 'auto'
- };
- break;
- }
- }
-
const actionDescriptorsBySourceId: {[actionSourceId: string]: Array} = {};
if (this.widget.config.actions) {
for (const actionSourceId of Object.keys(this.widget.config.actions)) {
@@ -463,13 +401,6 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
}
}
- public onLegendKeyHiddenChange(index: number) {
- for (const id of Object.keys(this.widgetContext.subscriptions)) {
- const subscription = this.widgetContext.subscriptions[id];
- subscription.updateDataVisibility(index);
- }
- }
-
private loadFromWidgetInfo() {
this.widgetContext.widgetNamespace =
`widget-type-${(this.widget.isSystemType ? 'sys-' : '')}${this.widget.bundleAlias}-${this.widget.typeAlias}`;
@@ -872,9 +803,6 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
}
this.createSubscription(options, subscribe).subscribe(
(subscription) => {
- if (useDefaultComponents) {
- this.defaultSubscriptionOptions(subscription, options);
- }
createSubscriptionSubject.next(subscription);
createSubscriptionSubject.complete();
},
@@ -892,8 +820,8 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
? this.widget.config.displayTimewindow : !options.useDashboardTimewindow;
options.timeWindowConfig = options.useDashboardTimewindow ? this.widgetContext.dashboardTimewindow : this.widget.config.timewindow;
options.legendConfig = null;
- if (this.displayLegend) {
- options.legendConfig = this.legendConfig;
+ if (this.widget.config.settings.showLegend === true) {
+ options.legendConfig = this.widget.config.settings.legendConfig;
}
options.decimals = this.widgetContext.decimals;
options.units = this.widgetContext.units;
@@ -962,13 +890,6 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
});
}
};
-
- }
-
- private defaultSubscriptionOptions(subscription: IWidgetSubscription, options: WidgetSubscriptionOptions) {
- if (this.displayLegend) {
- this.legendData = subscription.legendData;
- }
}
private createDefaultSubscription(): Observable {
@@ -999,7 +920,6 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
this.createSubscription(options).subscribe(
(subscription) => {
- this.defaultSubscriptionOptions(subscription, options);
// backward compatibility
this.widgetContext.datasources = subscription.datasources;
@@ -1479,7 +1399,8 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
}
}
- private loadCustomActionResources(actionNamespace: string, customCss: string, customResources: Array, actionDescriptor: WidgetActionDescriptor): Observable {
+ private loadCustomActionResources(actionNamespace: string, customCss: string, customResources: Array,
+ actionDescriptor: WidgetActionDescriptor): Observable {
const resourceTasks: Observable[] = [];
const modulesTasks: Observable[] = [];
diff --git a/ui-ngx/src/app/shared/components/public-api.ts b/ui-ngx/src/app/shared/components/public-api.ts
index 2443bc6d43..1dd31182f1 100644
--- a/ui-ngx/src/app/shared/components/public-api.ts
+++ b/ui-ngx/src/app/shared/components/public-api.ts
@@ -22,3 +22,4 @@ export * from './js-func.component';
export * from './script-lang.component';
export * from './slack-conversation-autocomplete.component';
export * from './notification/template-autocomplete.component';
+export * from './toggle-header.component';
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/toggle-header.component.html b/ui-ngx/src/app/shared/components/toggle-header.component.html
similarity index 87%
rename from ui-ngx/src/app/modules/home/components/widget/lib/home-page/toggle-header.component.html
rename to ui-ngx/src/app/shared/components/toggle-header.component.html
index ed39fca25d..3cc0f8beaf 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/toggle-header.component.html
+++ b/ui-ngx/src/app/shared/components/toggle-header.component.html
@@ -15,7 +15,8 @@
limitations under the License.
-->
-
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/toggle-header.component.scss b/ui-ngx/src/app/shared/components/toggle-header.component.scss
similarity index 91%
rename from ui-ngx/src/app/modules/home/components/widget/lib/home-page/toggle-header.component.scss
rename to ui-ngx/src/app/shared/components/toggle-header.component.scss
index 1e901b056a..683d364058 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/toggle-header.component.scss
+++ b/ui-ngx/src/app/shared/components/toggle-header.component.scss
@@ -14,7 +14,7 @@
* limitations under the License.
*/
-@import "../../../../../../../scss/constants";
+@import "../../../scss/constants";
:host ::ng-deep {
.mat-button-toggle-group.mat-button-toggle-group-appearance-standard.tb-toggle-header {
@@ -58,9 +58,19 @@
}
}
}
+ &.tb-fill {
+ .mat-button-toggle.mat-button-toggle-appearance-standard {
+ &.mat-button-toggle-checked {
+ .mat-button-toggle-button {
+ background: #305680;
+ color: #FFFFFF;
+ }
+ }
+ }
+ }
}
@media #{$mat-md-lg} {
- .mat-button-toggle-group.mat-button-toggle-group-appearance-standard.tb-toggle-header {
+ .mat-button-toggle-group.mat-button-toggle-group-appearance-standard.tb-toggle-header:not(.tb-ignore-md-lg) {
height: 24px;
.mat-button-toggle.mat-button-toggle-appearance-standard {
.mat-button-toggle-button {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/toggle-header.component.ts b/ui-ngx/src/app/shared/components/toggle-header.component.ts
similarity index 93%
rename from ui-ngx/src/app/modules/home/components/widget/lib/home-page/toggle-header.component.ts
rename to ui-ngx/src/app/shared/components/toggle-header.component.ts
index b8fd5c63bb..7a66ac6c16 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/toggle-header.component.ts
+++ b/ui-ngx/src/app/shared/components/toggle-header.component.ts
@@ -44,6 +44,8 @@ export interface ToggleHeaderOption {
value: any;
}
+export type ToggleHeaderAppearance = 'fill' | 'stroked';
+
@Component({
selector: 'tb-toggle-header',
templateUrl: './toggle-header.component.html',
@@ -67,6 +69,13 @@ export class ToggleHeaderComponent extends PageComponent implements OnInit {
@coerceBoolean()
useSelectOnMdLg = true;
+ @Input()
+ @coerceBoolean()
+ ignoreMdLgSize = false;
+
+ @Input()
+ appearance: ToggleHeaderAppearance = 'stroked';
+
isMdLg: boolean;
private observeBreakpointSubscription: Subscription;
diff --git a/ui-ngx/src/app/shared/models/widget.models.ts b/ui-ngx/src/app/shared/models/widget.models.ts
index b20565a50b..77d2acf3e2 100644
--- a/ui-ngx/src/app/shared/models/widget.models.ts
+++ b/ui-ngx/src/app/shared/models/widget.models.ts
@@ -252,18 +252,16 @@ export interface LegendConfig {
showLatest: boolean;
}
-export function defaultLegendConfig(wType: widgetType): LegendConfig {
- return {
- direction: LegendDirection.column,
- position: LegendPosition.bottom,
- sortDataKeys: false,
- showMin: false,
- showMax: false,
- showAvg: wType === widgetType.timeseries,
- showTotal: false,
- showLatest: false
- };
-}
+export const defaultLegendConfig = (wType: widgetType): LegendConfig => ({
+ direction: LegendDirection.column,
+ position: LegendPosition.bottom,
+ sortDataKeys: false,
+ showMin: false,
+ showMax: false,
+ showAvg: wType === widgetType.timeseries,
+ showTotal: false,
+ showLatest: false
+});
export enum ComparisonResultType {
PREVIOUS_VALUE = 'PREVIOUS_VALUE',
@@ -363,7 +361,7 @@ export interface Datasource {
[key: string]: any;
}
-export function datasourcesHasAggregation(datasources?: Array): boolean {
+export const datasourcesHasAggregation = (datasources?: Array): boolean => {
if (datasources) {
const foundDatasource = datasources.find(datasource => {
const found = datasource.dataKeys && datasource.dataKeys.find(key => key.type === DataKeyType.timeseries &&
@@ -375,9 +373,9 @@ export function datasourcesHasAggregation(datasources?: Array): bool
}
}
return false;
-}
+};
-export function datasourcesHasOnlyComparisonAggregation(datasources?: Array): boolean {
+export const datasourcesHasOnlyComparisonAggregation = (datasources?: Array): boolean => {
if (!datasourcesHasAggregation(datasources)) {
return false;
}
@@ -392,7 +390,7 @@ export function datasourcesHasOnlyComparisonAggregation(datasources?: Array {
if (settings) {
const keys = Object.keys(settings);
for (const key of keys) {
@@ -711,7 +707,7 @@ function removeEmptyWidgetSettings(settings: WidgetSettings): WidgetSettings {
}
}
return settings;
-}
+};
@Directive()
// eslint-disable-next-line @angular-eslint/directive-class-suffix
diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts
index 9bd9006399..0c6c0ac03f 100644
--- a/ui-ngx/src/app/shared/shared.module.ts
+++ b/ui-ngx/src/app/shared/shared.module.ts
@@ -189,6 +189,7 @@ import {
} from '@shared/layout/layout.directives';
import { ColorPickerComponent } from '@shared/components/color-picker/color-picker.component';
import { ShortNumberPipe } from '@shared/pipe/short-number.pipe';
+import { ToggleHeaderComponent } from '@shared/components/toggle-header.component';
export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) {
return markedOptionsService;
@@ -356,7 +357,8 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
GtMdLgLayoutAlignDirective,
GtMdLgLayoutGapDirective,
GtMdLgShowHideDirective,
- ColorPickerComponent
+ ColorPickerComponent,
+ ToggleHeaderComponent
],
imports: [
CommonModule,
@@ -580,7 +582,8 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
GtMdLgLayoutAlignDirective,
GtMdLgLayoutGapDirective,
GtMdLgShowHideDirective,
- ColorPickerComponent
+ ColorPickerComponent,
+ ToggleHeaderComponent
]
})
export class SharedModule { }
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 ee081d9727..432c03f4b3 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -35,6 +35,7 @@
"edit-mode": "Edit mode",
"enter-edit-mode": "Enter edit mode",
"decline-changes": "Decline changes",
+ "decline": "Decline",
"close": "Close",
"back": "Back",
"run": "Run",
@@ -4091,6 +4092,9 @@
"data": "Data",
"settings": "Settings",
"advanced": "Advanced",
+ "appearance": "Appearance",
+ "widget-card": "Widget card",
+ "mobile": "Mobile",
"title": "Title",
"title-tooltip": "Title Tooltip",
"general-settings": "General settings",
@@ -4151,7 +4155,8 @@
"data-settings": "Data settings",
"no-data-display-message": "\"No data to display\" alternative message",
"data-page-size": "Maximum entities per datasource",
- "settings-component-not-found": "Settings form component not found for selector '{{selector}}'"
+ "settings-component-not-found": "Settings form component not found for selector '{{selector}}'",
+ "preview": "Preview"
},
"widget-type": {
"import": "Import widget type",