Igor Kulikov
2 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