Igor Kulikov
3 years ago
39 changed files with 1163 additions and 190 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,236 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2024 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. |
||||
|
|
||||
|
--> |
||||
|
<ng-container [formGroup]="timeSeriesChartWidgetConfigForm"> |
||||
|
<tb-timewindow-config-panel formControlName="timewindowConfig"> |
||||
|
</tb-timewindow-config-panel> |
||||
|
<tb-datasources |
||||
|
[configMode]="basicMode" |
||||
|
hideDatasourceLabel |
||||
|
hideDataKeys |
||||
|
forceSingleDatasource |
||||
|
formControlName="datasources"> |
||||
|
</tb-datasources> |
||||
|
<tb-data-keys-panel |
||||
|
panelTitle="{{ 'widgets.chart.series' | translate }}" |
||||
|
addKeyTitle="{{ 'widgets.chart.add-series' | translate }}" |
||||
|
keySettingsTitle="{{ 'widgets.chart.series-settings' | translate }}" |
||||
|
removeKeyTitle="{{ 'widgets.chart.remove-series' | translate }}" |
||||
|
noKeysText="{{ 'widgets.chart.no-series' | translate }}" |
||||
|
requiredKeysText="{{ 'widgets.chart.no-series-error' | translate }}" |
||||
|
showTimeSeriesType |
||||
|
hideSourceSelection |
||||
|
[datasourceType]="datasource?.type" |
||||
|
[deviceId]="datasource?.deviceId" |
||||
|
[entityAliasId]="datasource?.entityAliasId" |
||||
|
formControlName="series"> |
||||
|
</tb-data-keys-panel> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title">TODO: Thresholds</div> |
||||
|
</div> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widget-config.appearance</div> |
||||
|
<div class="tb-form-row column-xs"> |
||||
|
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showTitle"> |
||||
|
{{ 'widget-config.title' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field class="flex" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="title" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<tb-font-settings formControlName="titleFont" |
||||
|
clearButton |
||||
|
[previewText]="timeSeriesChartWidgetConfigForm.get('title').value" |
||||
|
[initialPreviewStyle]="widgetConfig.config.titleStyle"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="titleColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row column-xs"> |
||||
|
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="showIcon"> |
||||
|
{{ 'widget-config.card-icon' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<mat-form-field appearance="outline" class="flex number" subscriptSizing="dynamic"> |
||||
|
<input matInput type="number" min="0" formControlName="iconSize" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<tb-css-unit-select fxFlex formControlName="iconSizeUnit"></tb-css-unit-select> |
||||
|
<tb-material-icon-select asBoxInput |
||||
|
iconClearButton |
||||
|
[color]="timeSeriesChartWidgetConfigForm.get('iconColor').value" |
||||
|
formControlName="icon"> |
||||
|
</tb-material-icon-select> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="iconColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widgets.time-series-chart.chart</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="dataZoom"> |
||||
|
{{ 'widgets.time-series-chart.data-zoom' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="stack"> |
||||
|
<div tb-hint-tooltip-icon="{{'widgets.time-series-chart.stack-mode-hint' | translate}}"> |
||||
|
{{ 'widgets.time-series-chart.stack-mode' | translate }} |
||||
|
</div> |
||||
|
</mat-slide-toggle> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widgets.time-series-chart.axes</div> |
||||
|
<div class="tb-form-panel stroked"> |
||||
|
TODO: Y Axis |
||||
|
</div> |
||||
|
<div class="tb-form-panel stroked"> |
||||
|
TODO: X Axis |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-panel tb-slide-toggle"> |
||||
|
<mat-expansion-panel class="tb-settings" [expanded]="timeSeriesChartWidgetConfigForm.get('showLegend').value" |
||||
|
[disabled]="!timeSeriesChartWidgetConfigForm.get('showLegend').value"> |
||||
|
<mat-expansion-panel-header fxLayout="row wrap"> |
||||
|
<mat-panel-title> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="showLegend" (click)="$event.stopPropagation()" |
||||
|
fxLayoutAlign="center"> |
||||
|
{{ 'widget-config.legend' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</mat-panel-title> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'legend.label' | translate }}</div> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<tb-font-settings formControlName="legendLabelFont" |
||||
|
previewText="Temperature"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="legendLabelColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
<tb-legend-config hideDirection |
||||
|
formControlName="legendConfig"> |
||||
|
</tb-legend-config> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</div> |
||||
|
<div class="tb-form-panel tb-slide-toggle"> |
||||
|
<mat-expansion-panel class="tb-settings" [expanded]="timeSeriesChartWidgetConfigForm.get('showTooltip').value" |
||||
|
[disabled]="!timeSeriesChartWidgetConfigForm.get('showTooltip').value"> |
||||
|
<mat-expansion-panel-header fxLayout="row wrap"> |
||||
|
<mat-panel-title> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="showTooltip" (click)="$event.stopPropagation()" |
||||
|
fxLayoutAlign="center"> |
||||
|
{{ 'widget-config.tooltip' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</mat-panel-title> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'tooltip.trigger' | translate }}</div> |
||||
|
<mat-chip-listbox class="center-stretch" formControlName="tooltipTrigger"> |
||||
|
<mat-chip-option [selectable]="timeSeriesChartWidgetConfigForm.get('tooltipTrigger').value !== EChartsTooltipTrigger.point" |
||||
|
[value]="EChartsTooltipTrigger.point">{{ 'tooltip.trigger-point' | translate }}</mat-chip-option> |
||||
|
<mat-chip-option [selectable]="timeSeriesChartWidgetConfigForm.get('tooltipTrigger').value !== EChartsTooltipTrigger.axis" |
||||
|
[value]="EChartsTooltipTrigger.axis">{{ 'tooltip.trigger-axis' | translate }}</mat-chip-option> |
||||
|
</mat-chip-listbox> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'tooltip.value' | translate }}</div> |
||||
|
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<tb-font-settings formControlName="tooltipValueFont" |
||||
|
[previewText]="tooltipValuePreviewFn"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="tooltipValueColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row column-xs"> |
||||
|
<mat-slide-toggle class="mat-slide fixed-title-width" formControlName="tooltipShowDate"> |
||||
|
{{ 'tooltip.date' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<div fxFlex.gt-xs fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px"> |
||||
|
<tb-date-format-select fxFlex excludeLastUpdateAgo formControlName="tooltipDateFormat"></tb-date-format-select> |
||||
|
<tb-font-settings formControlName="tooltipDateFont" |
||||
|
[previewText]="tooltipDatePreviewFn"> |
||||
|
</tb-font-settings> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="tooltipDateColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="tb-form-row"> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="tooltipDateInterval"> |
||||
|
<div tb-hint-tooltip-icon="{{'tooltip.show-date-time-interval-hint' | translate}}"> |
||||
|
{{ 'tooltip.show-date-time-interval' | translate }} |
||||
|
</div> |
||||
|
</mat-slide-toggle> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'tooltip.background-color' | translate }}</div> |
||||
|
<tb-color-input asBoxInput |
||||
|
colorClearButton |
||||
|
formControlName="tooltipBackgroundColor"> |
||||
|
</tb-color-input> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'tooltip.background-blur' | translate }}</div> |
||||
|
<mat-form-field appearance="outline" class="number" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="tooltipBackgroundBlur" type="number" min="0" step="1" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
<div matSuffix>px</div> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</div> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widget-config.card-appearance</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widgets.background.background' | translate }}</div> |
||||
|
<tb-background-settings formControlName="background"> |
||||
|
</tb-background-settings> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between column-lt-md"> |
||||
|
<div translate>widget-config.show-card-buttons</div> |
||||
|
<mat-chip-listbox multiple formControlName="cardButtons"> |
||||
|
<mat-chip-option value="fullscreen">{{ 'fullscreen.fullscreen' | translate }}</mat-chip-option> |
||||
|
</mat-chip-listbox> |
||||
|
</div> |
||||
|
<div class="tb-form-row space-between"> |
||||
|
<div>{{ 'widget-config.card-border-radius' | translate }}</div> |
||||
|
<mat-form-field appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input matInput formControlName="borderRadius" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
</div> |
||||
|
</div> |
||||
|
<tb-widget-actions-panel |
||||
|
formControlName="actions"> |
||||
|
</tb-widget-actions-panel> |
||||
|
</ng-container> |
||||
@ -0,0 +1,314 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 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, 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, |
||||
|
Datasource, |
||||
|
legendPositions, |
||||
|
legendPositionTranslationMap, |
||||
|
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, isUndefined, mergeDeep } from '@core/utils'; |
||||
|
import { |
||||
|
cssSizeToStrSize, |
||||
|
DateFormatProcessor, |
||||
|
DateFormatSettings, |
||||
|
resolveCssSize |
||||
|
} from '@shared/models/widget-settings.models'; |
||||
|
import { |
||||
|
timeSeriesChartWidgetDefaultSettings, |
||||
|
TimeSeriesChartWidgetSettings |
||||
|
} from '@home/components/widget/lib/chart/time-series-chart-widget.models'; |
||||
|
import { ValueType } from '@shared/models/constants'; |
||||
|
import { EChartsTooltipTrigger } from '@home/components/widget/lib/chart/echarts-widget.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-time-series-chart-basic-config', |
||||
|
templateUrl: './time-series-chart-basic-config.component.html', |
||||
|
styleUrls: ['../basic-config.scss'] |
||||
|
}) |
||||
|
export class TimeSeriesChartBasicConfigComponent extends BasicWidgetConfigComponent { |
||||
|
|
||||
|
public get datasource(): Datasource { |
||||
|
const datasources: Datasource[] = this.timeSeriesChartWidgetConfigForm.get('datasources').value; |
||||
|
if (datasources && datasources.length) { |
||||
|
return datasources[0]; |
||||
|
} else { |
||||
|
return null; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
EChartsTooltipTrigger = EChartsTooltipTrigger; |
||||
|
|
||||
|
legendPositions = legendPositions; |
||||
|
|
||||
|
legendPositionTranslationMap = legendPositionTranslationMap; |
||||
|
|
||||
|
timeSeriesChartWidgetConfigForm: UntypedFormGroup; |
||||
|
|
||||
|
tooltipValuePreviewFn = this._tooltipValuePreviewFn.bind(this); |
||||
|
|
||||
|
tooltipDatePreviewFn = this._tooltipDatePreviewFn.bind(this); |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
protected widgetConfigComponent: WidgetConfigComponent, |
||||
|
private $injector: Injector, |
||||
|
private fb: UntypedFormBuilder) { |
||||
|
super(store, widgetConfigComponent); |
||||
|
} |
||||
|
|
||||
|
protected configForm(): UntypedFormGroup { |
||||
|
return this.timeSeriesChartWidgetConfigForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultDataKeys(configData: WidgetConfigComponentData): DataKey[] { |
||||
|
return [{ name: 'temperature', label: 'Temperature', type: DataKeyType.timeseries, units: '°C', decimals: 0 }]; |
||||
|
} |
||||
|
|
||||
|
protected onConfigSet(configData: WidgetConfigComponentData) { |
||||
|
const settings: TimeSeriesChartWidgetSettings = mergeDeep<TimeSeriesChartWidgetSettings>({} as TimeSeriesChartWidgetSettings, |
||||
|
timeSeriesChartWidgetDefaultSettings, configData.config.settings as TimeSeriesChartWidgetSettings); |
||||
|
const iconSize = resolveCssSize(configData.config.iconSize); |
||||
|
this.timeSeriesChartWidgetConfigForm = this.fb.group({ |
||||
|
timewindowConfig: [getTimewindowConfig(configData.config), []], |
||||
|
datasources: [configData.config.datasources, []], |
||||
|
series: [this.getSeries(configData.config.datasources), []], |
||||
|
thresholds: [settings.thresholds, []], |
||||
|
|
||||
|
showTitle: [configData.config.showTitle, []], |
||||
|
title: [configData.config.title, []], |
||||
|
titleFont: [configData.config.titleFont, []], |
||||
|
titleColor: [configData.config.titleColor, []], |
||||
|
|
||||
|
showIcon: [configData.config.showTitleIcon, []], |
||||
|
iconSize: [iconSize[0], [Validators.min(0)]], |
||||
|
iconSizeUnit: [iconSize[1], []], |
||||
|
icon: [configData.config.titleIcon, []], |
||||
|
iconColor: [configData.config.iconColor, []], |
||||
|
|
||||
|
dataZoom: [settings.dataZoom, []], |
||||
|
stack: [settings.stack, []], |
||||
|
|
||||
|
yAxis: [settings.yAxis, []], |
||||
|
xAxis: [settings.xAxis, []], |
||||
|
|
||||
|
showLegend: [settings.showLegend, []], |
||||
|
legendLabelFont: [settings.legendLabelFont, []], |
||||
|
legendLabelColor: [settings.legendLabelColor, []], |
||||
|
legendConfig: [settings.legendConfig, []], |
||||
|
|
||||
|
showTooltip: [settings.showTooltip, []], |
||||
|
tooltipTrigger: [settings.tooltipTrigger, []], |
||||
|
tooltipValueFont: [settings.tooltipValueFont, []], |
||||
|
tooltipValueColor: [settings.tooltipValueColor, []], |
||||
|
tooltipShowDate: [settings.tooltipShowDate, []], |
||||
|
tooltipDateFormat: [settings.tooltipDateFormat, []], |
||||
|
tooltipDateFont: [settings.tooltipDateFont, []], |
||||
|
tooltipDateColor: [settings.tooltipDateColor, []], |
||||
|
tooltipDateInterval: [settings.tooltipDateInterval, []], |
||||
|
|
||||
|
tooltipBackgroundColor: [settings.tooltipBackgroundColor, []], |
||||
|
tooltipBackgroundBlur: [settings.tooltipBackgroundBlur, []], |
||||
|
|
||||
|
background: [settings.background, []], |
||||
|
|
||||
|
cardButtons: [this.getCardButtons(configData.config), []], |
||||
|
borderRadius: [configData.config.borderRadius, []], |
||||
|
|
||||
|
actions: [configData.config.actions || {}, []] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected prepareOutputConfig(config: any): WidgetConfigComponentData { |
||||
|
setTimewindowConfig(this.widgetConfig.config, config.timewindowConfig); |
||||
|
this.widgetConfig.config.datasources = config.datasources; |
||||
|
this.setSeries(config.series, this.widgetConfig.config.datasources); |
||||
|
|
||||
|
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.showIcon; |
||||
|
this.widgetConfig.config.iconSize = cssSizeToStrSize(config.iconSize, config.iconSizeUnit); |
||||
|
this.widgetConfig.config.titleIcon = config.icon; |
||||
|
this.widgetConfig.config.iconColor = config.iconColor; |
||||
|
|
||||
|
this.widgetConfig.config.settings = this.widgetConfig.config.settings || {}; |
||||
|
|
||||
|
this.widgetConfig.config.settings.thresholds = config.thresholds; |
||||
|
|
||||
|
this.widgetConfig.config.settings.dataZoom = config.dataZoom; |
||||
|
this.widgetConfig.config.settings.stack = config.stack; |
||||
|
|
||||
|
this.widgetConfig.config.settings.yAxis = config.yAxis; |
||||
|
this.widgetConfig.config.settings.xAxis = config.xAxis; |
||||
|
|
||||
|
this.widgetConfig.config.settings.showLegend = config.showLegend; |
||||
|
this.widgetConfig.config.settings.legendLabelFont = config.legendLabelFont; |
||||
|
this.widgetConfig.config.settings.legendLabelColor = config.legendLabelColor; |
||||
|
this.widgetConfig.config.settings.legendConfig = config.legendConfig; |
||||
|
|
||||
|
this.widgetConfig.config.settings.showTooltip = config.showTooltip; |
||||
|
this.widgetConfig.config.settings.tooltipTrigger = config.tooltipTrigger; |
||||
|
this.widgetConfig.config.settings.tooltipValueFont = config.tooltipValueFont; |
||||
|
this.widgetConfig.config.settings.tooltipValueColor = config.tooltipValueColor; |
||||
|
this.widgetConfig.config.settings.tooltipShowDate = config.tooltipShowDate; |
||||
|
this.widgetConfig.config.settings.tooltipDateFormat = config.tooltipDateFormat; |
||||
|
this.widgetConfig.config.settings.tooltipDateFont = config.tooltipDateFont; |
||||
|
this.widgetConfig.config.settings.tooltipDateColor = config.tooltipDateColor; |
||||
|
this.widgetConfig.config.settings.tooltipDateInterval = config.tooltipDateInterval; |
||||
|
this.widgetConfig.config.settings.tooltipBackgroundColor = config.tooltipBackgroundColor; |
||||
|
this.widgetConfig.config.settings.tooltipBackgroundBlur = config.tooltipBackgroundBlur; |
||||
|
|
||||
|
this.widgetConfig.config.settings.background = config.background; |
||||
|
|
||||
|
this.setCardButtons(config.cardButtons, this.widgetConfig.config); |
||||
|
this.widgetConfig.config.borderRadius = config.borderRadius; |
||||
|
|
||||
|
this.widgetConfig.config.actions = config.actions; |
||||
|
return this.widgetConfig; |
||||
|
} |
||||
|
|
||||
|
protected validatorTriggers(): string[] { |
||||
|
return ['showTitle', 'showIcon', 'showLegend', 'showTooltip', 'tooltipShowDate']; |
||||
|
} |
||||
|
|
||||
|
protected updateValidators(emitEvent: boolean, trigger?: string) { |
||||
|
const showTitle: boolean = this.timeSeriesChartWidgetConfigForm.get('showTitle').value; |
||||
|
const showIcon: boolean = this.timeSeriesChartWidgetConfigForm.get('showIcon').value; |
||||
|
const showLegend: boolean = this.timeSeriesChartWidgetConfigForm.get('showLegend').value; |
||||
|
const showTooltip: boolean = this.timeSeriesChartWidgetConfigForm.get('showTooltip').value; |
||||
|
const tooltipShowDate: boolean = this.timeSeriesChartWidgetConfigForm.get('tooltipShowDate').value; |
||||
|
|
||||
|
if (showTitle) { |
||||
|
this.timeSeriesChartWidgetConfigForm.get('title').enable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('titleFont').enable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('titleColor').enable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('showIcon').enable({emitEvent: false}); |
||||
|
if (showIcon) { |
||||
|
this.timeSeriesChartWidgetConfigForm.get('iconSize').enable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('iconSizeUnit').enable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('icon').enable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('iconColor').enable(); |
||||
|
} else { |
||||
|
this.timeSeriesChartWidgetConfigForm.get('iconSize').disable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('iconSizeUnit').disable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('icon').disable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('iconColor').disable(); |
||||
|
} |
||||
|
} else { |
||||
|
this.timeSeriesChartWidgetConfigForm.get('title').disable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('titleFont').disable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('titleColor').disable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('showIcon').disable({emitEvent: false}); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('iconSize').disable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('iconSizeUnit').disable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('icon').disable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('iconColor').disable(); |
||||
|
} |
||||
|
|
||||
|
if (showLegend) { |
||||
|
this.timeSeriesChartWidgetConfigForm.get('legendLabelFont').enable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('legendLabelColor').enable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('legendConfig').enable(); |
||||
|
} else { |
||||
|
this.timeSeriesChartWidgetConfigForm.get('legendLabelFont').disable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('legendLabelColor').disable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('legendConfig').disable(); |
||||
|
} |
||||
|
|
||||
|
if (showTooltip) { |
||||
|
this.timeSeriesChartWidgetConfigForm.get('tooltipTrigger').enable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('tooltipValueFont').enable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('tooltipValueColor').enable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('tooltipShowDate').enable({emitEvent: false}); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('tooltipBackgroundColor').enable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('tooltipBackgroundBlur').enable(); |
||||
|
if (tooltipShowDate) { |
||||
|
this.timeSeriesChartWidgetConfigForm.get('tooltipDateFormat').enable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('tooltipDateFont').enable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('tooltipDateColor').enable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('tooltipDateInterval').enable(); |
||||
|
} else { |
||||
|
this.timeSeriesChartWidgetConfigForm.get('tooltipDateFormat').disable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('tooltipDateFont').disable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('tooltipDateColor').disable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('tooltipDateInterval').disable(); |
||||
|
} |
||||
|
} else { |
||||
|
this.timeSeriesChartWidgetConfigForm.get('tooltipValueFont').disable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('tooltipValueColor').disable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('tooltipShowDate').disable({emitEvent: false}); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('tooltipDateFormat').disable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('tooltipDateFont').disable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('tooltipDateColor').disable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('tooltipDateInterval').disable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('tooltipBackgroundColor').disable(); |
||||
|
this.timeSeriesChartWidgetConfigForm.get('tooltipBackgroundBlur').disable(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
private getSeries(datasources?: Datasource[]): DataKey[] { |
||||
|
if (datasources && datasources.length) { |
||||
|
return datasources[0].dataKeys || []; |
||||
|
} |
||||
|
return []; |
||||
|
} |
||||
|
|
||||
|
private setSeries(series: DataKey[], datasources?: Datasource[]) { |
||||
|
if (datasources && datasources.length) { |
||||
|
datasources[0].dataKeys = series; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
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 _tooltipValuePreviewFn(): string { |
||||
|
return formatValue(22, 0, '°C', false); |
||||
|
} |
||||
|
|
||||
|
private _tooltipDatePreviewFn(): string { |
||||
|
const dateFormat: DateFormatSettings = this.timeSeriesChartWidgetConfigForm.get('tooltipDateFormat').value; |
||||
|
const processor = DateFormatProcessor.fromSettings(this.$injector, dateFormat); |
||||
|
processor.update(Date.now()); |
||||
|
return processor.formatted; |
||||
|
} |
||||
|
|
||||
|
protected readonly ValueType = ValueType; |
||||
|
} |
||||
@ -0,0 +1,36 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2024 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. |
||||
|
|
||||
|
--> |
||||
|
<ng-container [formGroup]="timeSeriesChartKeySettingsForm"> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widgets.time-series-chart.series.legend-settings</div> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="showInLegend"> |
||||
|
<div tb-hint-tooltip-icon="{{'widgets.time-series-chart.series.show-in-legend-hint' | translate}}"> |
||||
|
{{ 'widgets.time-series-chart.series.show-in-legend' | translate }} |
||||
|
</div> |
||||
|
</mat-slide-toggle> |
||||
|
<mat-slide-toggle class="mat-slide" formControlName="dataHiddenByDefault"> |
||||
|
<div tb-hint-tooltip-icon="{{'widgets.time-series-chart.series.hidden-by-default-hint' | translate}}"> |
||||
|
{{ 'widgets.time-series-chart.series.hidden-by-default' | translate }} |
||||
|
</div> |
||||
|
</mat-slide-toggle> |
||||
|
</div> |
||||
|
<div class="tb-form-panel"> |
||||
|
<div class="tb-form-panel-title" translate>widgets.time-series-chart.series.series-type</div> |
||||
|
TODO: |
||||
|
</div> |
||||
|
</ng-container> |
||||
@ -0,0 +1,82 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2024 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, WidgetSettingsComponent } from '@shared/models/widget.models'; |
||||
|
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { mergeDeep } from '@core/utils'; |
||||
|
import { |
||||
|
timeSeriesChartKeyDefaultSettings, |
||||
|
TimeSeriesChartKeySettings |
||||
|
} from '@home/components/widget/lib/chart/time-series-chart.models'; |
||||
|
import { WidgetConfigComponentData } from '@home/models/widget-component.models'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-time-series-chart-key-settings', |
||||
|
templateUrl: './time-series-chart-key-settings.component.html', |
||||
|
styleUrls: ['./../widget-settings.scss'] |
||||
|
}) |
||||
|
export class TimeSeriesChartKeySettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
timeSeriesChartKeySettingsForm: UntypedFormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: UntypedFormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): UntypedFormGroup { |
||||
|
return this.timeSeriesChartKeySettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected onWidgetConfigSet(widgetConfig: WidgetConfigComponentData) { |
||||
|
const params = widgetConfig.typeParameters as any; |
||||
|
// const timeSeriesChartType = params.timeSeriesChartType;
|
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return mergeDeep<TimeSeriesChartKeySettings>({} as TimeSeriesChartKeySettings, |
||||
|
timeSeriesChartKeyDefaultSettings); |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
const seriesSettings = settings as TimeSeriesChartKeySettings; |
||||
|
this.timeSeriesChartKeySettingsForm = this.fb.group({ |
||||
|
showInLegend: [seriesSettings.showInLegend, []], |
||||
|
dataHiddenByDefault: [seriesSettings.dataHiddenByDefault, []], |
||||
|
type: [seriesSettings.type, []], |
||||
|
lineSettings: [settings.lineSettings, []], |
||||
|
barSettings: [settings.barSettings, []] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected validatorTriggers(): string[] { |
||||
|
return ['showInLegend']; |
||||
|
} |
||||
|
|
||||
|
protected updateValidators(_emitEvent: boolean) { |
||||
|
const showInLegend: boolean = this.timeSeriesChartKeySettingsForm.get('showInLegend').value; |
||||
|
if (showInLegend) { |
||||
|
this.timeSeriesChartKeySettingsForm.get('dataHiddenByDefault').enable(); |
||||
|
} else { |
||||
|
this.timeSeriesChartKeySettingsForm.get('dataHiddenByDefault').patchValue(false, {emitEvent: false}); |
||||
|
this.timeSeriesChartKeySettingsForm.get('dataHiddenByDefault').disable(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
Loading…
Reference in new issue