Igor Kulikov
5 years ago
15 changed files with 1445 additions and 230 deletions
@ -0,0 +1,23 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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. |
||||
|
|
||||
|
--> |
||||
|
|
||||
|
<section [formGroup]="flotBarWidgetSettingsForm" fxLayout="column"> |
||||
|
<tb-flot-widget-settings formControlName="flotSettings" |
||||
|
[chartType]="'bar'"> |
||||
|
</tb-flot-widget-settings> |
||||
|
</section> |
||||
@ -0,0 +1,55 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { flotDefaultSettings } from '@home/components/widget/lib/settings/chart/flot-widget-settings.component'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-flot-bar-widget-settings', |
||||
|
templateUrl: './flot-bar-widget-settings.component.html', |
||||
|
styleUrls: [] |
||||
|
}) |
||||
|
export class FlotBarWidgetSettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
flotBarWidgetSettingsForm: FormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): FormGroup { |
||||
|
return this.flotBarWidgetSettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return flotDefaultSettings('bar'); |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.flotBarWidgetSettingsForm = this.fb.group({ |
||||
|
flotSettings: [settings, []] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected prepareOutputSettings(settings: any): WidgetSettings { |
||||
|
return settings.flotSettings; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,23 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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. |
||||
|
|
||||
|
--> |
||||
|
|
||||
|
<section [formGroup]="flotLineWidgetSettingsForm" fxLayout="column"> |
||||
|
<tb-flot-widget-settings formControlName="flotSettings" |
||||
|
[chartType]="'graph'"> |
||||
|
</tb-flot-widget-settings> |
||||
|
</section> |
||||
@ -0,0 +1,55 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 { FormBuilder, FormGroup, Validators } from '@angular/forms'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { flotDefaultSettings } from '@home/components/widget/lib/settings/chart/flot-widget-settings.component'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-flot-line-widget-settings', |
||||
|
templateUrl: './flot-line-widget-settings.component.html', |
||||
|
styleUrls: [] |
||||
|
}) |
||||
|
export class FlotLineWidgetSettingsComponent extends WidgetSettingsComponent { |
||||
|
|
||||
|
flotLineWidgetSettingsForm: FormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
protected settingsForm(): FormGroup { |
||||
|
return this.flotLineWidgetSettingsForm; |
||||
|
} |
||||
|
|
||||
|
protected defaultSettings(): WidgetSettings { |
||||
|
return flotDefaultSettings('graph'); |
||||
|
} |
||||
|
|
||||
|
protected onSettingsSet(settings: WidgetSettings) { |
||||
|
this.flotLineWidgetSettingsForm = this.fb.group({ |
||||
|
flotSettings: [settings, []] |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
protected prepareOutputSettings(settings: any): WidgetSettings { |
||||
|
return settings.flotSettings; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,327 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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. |
||||
|
|
||||
|
--> |
||||
|
<section class="tb-widget-settings" [formGroup]="flotSettingsFormGroup" fxLayout="column"> |
||||
|
<fieldset class="fields-group"> |
||||
|
<legend class="group-title" translate>widgets.chart.common-settings</legend> |
||||
|
<mat-checkbox formControlName="stack" style="margin-bottom: 16px;"> |
||||
|
{{ 'widgets.chart.enable-stacking-mode' | translate }} |
||||
|
</mat-checkbox> |
||||
|
<section *ngIf="chartType === 'graph'" fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px"> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.chart.line-shadow-size</mat-label> |
||||
|
<input matInput type="number" min="0" formControlName="shadowSize"> |
||||
|
</mat-form-field> |
||||
|
<mat-checkbox fxFlex formControlName="smoothLines" style="margin-bottom: 16px;"> |
||||
|
{{ 'widgets.chart.display-smooth-lines' | translate }} |
||||
|
</mat-checkbox> |
||||
|
</section> |
||||
|
<section *ngIf="chartType === 'bar'" fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px"> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.chart.default-bar-width</mat-label> |
||||
|
<input matInput type="number" min="0" formControlName="defaultBarWidth"> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.chart.bar-alignment</mat-label> |
||||
|
<mat-select formControlName="barAlignment"> |
||||
|
<mat-option [value]="'left'"> |
||||
|
{{ 'widgets.chart.bar-alignment-left' | translate }} |
||||
|
</mat-option> |
||||
|
<mat-option [value]="'right'"> |
||||
|
{{ 'widgets.chart.bar-alignment-right' | translate }} |
||||
|
</mat-option> |
||||
|
<mat-option [value]="'center'"> |
||||
|
{{ 'widgets.chart.bar-alignment-center' | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
</section> |
||||
|
<section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px"> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.chart.default-font-size</mat-label> |
||||
|
<input matInput type="number" min="0" formControlName="fontSize"> |
||||
|
</mat-form-field> |
||||
|
<tb-color-input fxFlex |
||||
|
formControlName="fontColor" |
||||
|
label="{{ 'widgets.chart.default-font-color' | translate }}" openOnInput colorClearButton> |
||||
|
</tb-color-input> |
||||
|
</section> |
||||
|
<mat-form-field *ngIf="chartType === 'graph' || chartType === 'bar'" fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.chart.thresholds-line-width</mat-label> |
||||
|
<input matInput type="number" min="0" formControlName="thresholdsLineWidth"> |
||||
|
</mat-form-field> |
||||
|
</fieldset> |
||||
|
<fieldset class="fields-group fields-group-slider"> |
||||
|
<legend class="group-title" translate>widgets.chart.tooltip-settings</legend> |
||||
|
<mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('showTooltip').value"> |
||||
|
<mat-expansion-panel-header fxLayout="row wrap"> |
||||
|
<mat-panel-title> |
||||
|
<mat-slide-toggle formControlName="showTooltip" (click)="$event.stopPropagation()" |
||||
|
fxLayoutAlign="center"> |
||||
|
{{ 'widgets.chart.show-tooltip' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</mat-panel-title> |
||||
|
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate> |
||||
|
widget-config.advanced-settings |
||||
|
</mat-panel-description> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<section fxLayout="column"> |
||||
|
<mat-slide-toggle formControlName="tooltipIndividual" class="slide-block"> |
||||
|
{{ 'widgets.chart.hover-individual-points' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<mat-slide-toggle formControlName="tooltipCumulative" class="slide-block"> |
||||
|
{{ 'widgets.chart.show-cumulative-values' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<mat-slide-toggle formControlName="hideZeros" class="slide-block"> |
||||
|
{{ 'widgets.chart.hide-zero-false-values' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
<tb-js-func |
||||
|
formControlName="tooltipValueFormatter" |
||||
|
[globalVariables]="functionScopeVariables" |
||||
|
[functionArgs]="['value']" |
||||
|
functionTitle="{{ 'widgets.chart.tooltip-value-format-function' | translate }}" |
||||
|
helpId="widget/lib/flot/tooltip_value_format_fn"> |
||||
|
</tb-js-func> |
||||
|
</section> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</fieldset> |
||||
|
<fieldset class="fields-group" formGroupName="grid"> |
||||
|
<legend class="group-title" translate>widgets.chart.grid-settings</legend> |
||||
|
<mat-checkbox formControlName="verticalLines" style="margin-bottom: 16px;"> |
||||
|
{{ 'widgets.chart.show-vertical-lines' | translate }} |
||||
|
</mat-checkbox> |
||||
|
<mat-checkbox formControlName="horizontalLines" style="margin-bottom: 16px;"> |
||||
|
{{ 'widgets.chart.show-horizontal-lines' | translate }} |
||||
|
</mat-checkbox> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.chart.grid-outline-border-width</mat-label> |
||||
|
<input matInput type="number" min="0" formControlName="outlineWidth"> |
||||
|
</mat-form-field> |
||||
|
<tb-color-input fxFlex |
||||
|
formControlName="color" |
||||
|
label="{{ 'widgets.chart.primary-color' | translate }}" openOnInput colorClearButton> |
||||
|
</tb-color-input> |
||||
|
<tb-color-input fxFlex |
||||
|
formControlName="backgroundColor" |
||||
|
label="{{ 'widgets.chart.background-color' | translate }}" openOnInput colorClearButton> |
||||
|
</tb-color-input> |
||||
|
<tb-color-input fxFlex |
||||
|
formControlName="tickColor" |
||||
|
label="{{ 'widgets.chart.ticks-color' | translate }}" openOnInput colorClearButton> |
||||
|
</tb-color-input> |
||||
|
</fieldset> |
||||
|
<fieldset class="fields-group" formGroupName="xaxis"> |
||||
|
<legend class="group-title" translate>widgets.chart.xaxis-settings</legend> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.chart.axis-title</mat-label> |
||||
|
<input matInput formControlName="title"> |
||||
|
</mat-form-field> |
||||
|
<fieldset class="fields-group fields-group-slider"> |
||||
|
<legend class="group-title" translate>widgets.chart.xaxis-tick-labels-settings</legend> |
||||
|
<mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('xaxis.showLabels').value"> |
||||
|
<mat-expansion-panel-header fxLayout="row wrap"> |
||||
|
<mat-panel-title> |
||||
|
<mat-slide-toggle formControlName="showLabels" (click)="$event.stopPropagation()" |
||||
|
fxLayoutAlign="center"> |
||||
|
{{ 'widgets.chart.show-tick-labels' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</mat-panel-title> |
||||
|
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate> |
||||
|
widget-config.advanced-settings |
||||
|
</mat-panel-description> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<tb-color-input fxFlex |
||||
|
formControlName="color" |
||||
|
label="{{ 'widgets.chart.ticks-color' | translate }}" openOnInput colorClearButton> |
||||
|
</tb-color-input> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</fieldset> |
||||
|
</fieldset> |
||||
|
<fieldset class="fields-group" formGroupName="yaxis"> |
||||
|
<legend class="group-title" translate>widgets.chart.yaxis-settings</legend> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.chart.axis-title</mat-label> |
||||
|
<input matInput formControlName="title"> |
||||
|
</mat-form-field> |
||||
|
<section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px"> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.chart.min-scale-value</mat-label> |
||||
|
<input matInput type="number" formControlName="min"> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.chart.max-scale-value</mat-label> |
||||
|
<input matInput type="number" formControlName="max"> |
||||
|
</mat-form-field> |
||||
|
</section> |
||||
|
<fieldset class="fields-group fields-group-slider"> |
||||
|
<legend class="group-title" translate>widgets.chart.yaxis-tick-labels-settings</legend> |
||||
|
<mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('yaxis.showLabels').value"> |
||||
|
<mat-expansion-panel-header fxLayout="row wrap"> |
||||
|
<mat-panel-title> |
||||
|
<mat-slide-toggle formControlName="showLabels" (click)="$event.stopPropagation()" |
||||
|
fxLayoutAlign="center"> |
||||
|
{{ 'widgets.chart.show-tick-labels' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</mat-panel-title> |
||||
|
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate> |
||||
|
widget-config.advanced-settings |
||||
|
</mat-panel-description> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<tb-color-input fxFlex |
||||
|
formControlName="color" |
||||
|
label="{{ 'widgets.chart.ticks-color' | translate }}" openOnInput colorClearButton> |
||||
|
</tb-color-input> |
||||
|
<section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px"> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.chart.tick-step-size</mat-label> |
||||
|
<input matInput type="number" formControlName="tickSize"> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.chart.number-of-decimals</mat-label> |
||||
|
<input matInput type="number" min="0" formControlName="tickDecimals"> |
||||
|
</mat-form-field> |
||||
|
</section> |
||||
|
<tb-js-func |
||||
|
formControlName="ticksFormatter" |
||||
|
[globalVariables]="functionScopeVariables" |
||||
|
[functionArgs]="['value']" |
||||
|
functionTitle="{{ 'widgets.chart.ticks-formatter-function' | translate }}" |
||||
|
helpId="widget/lib/flot/ticks_formatter_fn"> |
||||
|
</tb-js-func> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</fieldset> |
||||
|
</fieldset> |
||||
|
<fieldset *ngIf="chartType === 'graph' || chartType === 'bar'" class="fields-group fields-group-slider"> |
||||
|
<legend class="group-title" translate>widgets.chart.comparison-settings</legend> |
||||
|
<mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('comparisonEnabled').value"> |
||||
|
<mat-expansion-panel-header fxLayout="row wrap"> |
||||
|
<mat-panel-title> |
||||
|
<mat-slide-toggle formControlName="comparisonEnabled" (click)="$event.stopPropagation()" |
||||
|
fxLayoutAlign="center"> |
||||
|
{{ 'widgets.chart.enable-comparison' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</mat-panel-title> |
||||
|
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate> |
||||
|
widget-config.advanced-settings |
||||
|
</mat-panel-description> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<section fxLayout="column"> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.chart.time-for-comparison</mat-label> |
||||
|
<mat-select formControlName="timeForComparison"> |
||||
|
<mat-option [value]="'previousInterval'"> |
||||
|
{{ 'widgets.chart.time-for-comparison-previous-interval' | translate }} |
||||
|
</mat-option> |
||||
|
<mat-option [value]="'days'"> |
||||
|
{{ 'widgets.chart.time-for-comparison-days' | translate }} |
||||
|
</mat-option> |
||||
|
<mat-option [value]="'weeks'"> |
||||
|
{{ 'widgets.chart.time-for-comparison-weeks' | translate }} |
||||
|
</mat-option> |
||||
|
<mat-option [value]="'months'"> |
||||
|
{{ 'widgets.chart.time-for-comparison-months' | translate }} |
||||
|
</mat-option> |
||||
|
<mat-option [value]="'years'"> |
||||
|
{{ 'widgets.chart.time-for-comparison-years' | translate }} |
||||
|
</mat-option> |
||||
|
<mat-option [value]="'customInterval'"> |
||||
|
{{ 'widgets.chart.time-for-comparison-custom-interval' | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field [fxShow]="flotSettingsFormGroup.get('timeForComparison').value === 'customInterval'" fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.chart.custom-interval-value</mat-label> |
||||
|
<input matInput type="number" min="0" formControlName="comparisonCustomIntervalValue"> |
||||
|
</mat-form-field> |
||||
|
<fieldset class="fields-group" formGroupName="xaxisSecond"> |
||||
|
<legend class="group-title" translate>widgets.chart.comparison-x-axis-settings</legend> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.chart.axis-title</mat-label> |
||||
|
<input matInput formControlName="title"> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.chart.axis-position</mat-label> |
||||
|
<mat-select formControlName="axisPosition"> |
||||
|
<mat-option [value]="'top'"> |
||||
|
{{ 'widgets.chart.axis-position-top' | translate }} |
||||
|
</mat-option> |
||||
|
<mat-option [value]="'bottom'"> |
||||
|
{{ 'widgets.chart.axis-position-bottom' | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<mat-slide-toggle formControlName="showLabels" class="slide-block"> |
||||
|
{{ 'widgets.chart.show-tick-labels' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</fieldset> |
||||
|
</section> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</fieldset> |
||||
|
<fieldset *ngIf="chartType === 'graph' || chartType === 'bar'" class="fields-group fields-group-slider"> |
||||
|
<legend class="group-title" translate>widgets.chart.custom-legend-settings</legend> |
||||
|
<mat-expansion-panel class="tb-settings" [expanded]="flotSettingsFormGroup.get('customLegendEnabled').value"> |
||||
|
<mat-expansion-panel-header fxLayout="row wrap"> |
||||
|
<mat-panel-title> |
||||
|
<mat-slide-toggle formControlName="customLegendEnabled" (click)="$event.stopPropagation()" |
||||
|
fxLayoutAlign="center"> |
||||
|
{{ 'widgets.chart.enable-custom-legend' | translate }} |
||||
|
</mat-slide-toggle> |
||||
|
</mat-panel-title> |
||||
|
<mat-panel-description fxLayoutAlign="end center" fxHide.xs translate> |
||||
|
widget-config.advanced-settings |
||||
|
</mat-panel-description> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<fieldset [fxShow]="flotSettingsFormGroup.get('customLegendEnabled').value" class="fields-group"> |
||||
|
<legend class="group-title" translate>widgets.chart.label-keys-list</legend> |
||||
|
<div fxLayout="column"> |
||||
|
<div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical" |
||||
|
(cdkDropListDropped)="labelDataKeyDrop($event)"> |
||||
|
<div cdkDrag class="tb-draggable" *ngFor="let labelDataKeyControl of dataKeysListForLabelsFormArray().controls; trackBy: trackByLabelDataKey; |
||||
|
let $index = index; last as isLast;" |
||||
|
fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}"> |
||||
|
<tb-label-data-key [formControl]="labelDataKeyControl" |
||||
|
[expanded]="labelDataKeyControl.new" |
||||
|
(removeLabelDataKey)="removeLabelDataKey($index)"> |
||||
|
</tb-label-data-key> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div *ngIf="!dataKeysListForLabelsFormArray().controls.length"> |
||||
|
<span translate fxLayoutAlign="center center" |
||||
|
class="tb-prompt">widgets.chart.no-label-keys</span> |
||||
|
</div> |
||||
|
<div style="padding-top: 16px;"> |
||||
|
<button mat-raised-button color="primary" |
||||
|
type="button" |
||||
|
(click)="addLabelDataKey()"> |
||||
|
<span translate>widgets.chart.add-label-key</span> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</fieldset> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
|
</fieldset> |
||||
|
</section> |
||||
@ -0,0 +1,411 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 { |
||||
|
AbstractControl, |
||||
|
ControlValueAccessor, |
||||
|
FormArray, |
||||
|
FormBuilder, |
||||
|
FormControl, |
||||
|
FormGroup, |
||||
|
NG_VALIDATORS, |
||||
|
NG_VALUE_ACCESSOR, |
||||
|
Validator, |
||||
|
Validators |
||||
|
} from '@angular/forms'; |
||||
|
import { PageComponent } from '@shared/components/page.component'; |
||||
|
import { ChartType, TbFlotSettings } from '@home/components/widget/lib/flot-widget.models'; |
||||
|
import { Store } from '@ngrx/store'; |
||||
|
import { AppState } from '@core/core.state'; |
||||
|
import { TranslateService } from '@ngx-translate/core'; |
||||
|
import { ComparisonDuration } from '@shared/models/time/time.models'; |
||||
|
import { WidgetService } from '@core/http/widget.service'; |
||||
|
import { fixedColorLevelValidator } from '@home/components/widget/lib/settings/gauge/fixed-color-level.component'; |
||||
|
import { CdkDragDrop } from '@angular/cdk/drag-drop'; |
||||
|
import { |
||||
|
LabelDataKey, |
||||
|
labelDataKeyValidator |
||||
|
} from '@home/components/widget/lib/settings/chart/label-data-key.component'; |
||||
|
import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; |
||||
|
|
||||
|
export function flotDefaultSettings(chartType: ChartType): Partial<TbFlotSettings> { |
||||
|
const settings: Partial<TbFlotSettings> = { |
||||
|
stack: false, |
||||
|
fontColor: '#545454', |
||||
|
fontSize: 10, |
||||
|
showTooltip: true, |
||||
|
tooltipIndividual: false, |
||||
|
tooltipCumulative: false, |
||||
|
hideZeros: false, |
||||
|
tooltipValueFormatter: '', |
||||
|
grid: { |
||||
|
verticalLines: true, |
||||
|
horizontalLines: true, |
||||
|
outlineWidth: 1, |
||||
|
color: '#545454', |
||||
|
backgroundColor: null, |
||||
|
tickColor: '#DDDDDD' |
||||
|
}, |
||||
|
xaxis: { |
||||
|
title: null, |
||||
|
showLabels: true, |
||||
|
color: null |
||||
|
}, |
||||
|
yaxis: { |
||||
|
min: null, |
||||
|
max: null, |
||||
|
title: null, |
||||
|
showLabels: true, |
||||
|
color: null, |
||||
|
tickSize: null, |
||||
|
tickDecimals: 0, |
||||
|
ticksFormatter: '' |
||||
|
} |
||||
|
}; |
||||
|
if (chartType === 'graph') { |
||||
|
settings.smoothLines = false; |
||||
|
settings.shadowSize = 4; |
||||
|
} |
||||
|
if (chartType === 'bar') { |
||||
|
settings.defaultBarWidth = 600; |
||||
|
settings.barAlignment = 'left'; |
||||
|
} |
||||
|
if (chartType === 'graph' || chartType === 'bar') { |
||||
|
settings.thresholdsLineWidth = null; |
||||
|
settings.comparisonEnabled = false; |
||||
|
settings.timeForComparison = 'previousInterval'; |
||||
|
settings.comparisonCustomIntervalValue = 7200000; |
||||
|
settings.xaxisSecond = { |
||||
|
title: null, |
||||
|
axisPosition: 'top', |
||||
|
showLabels: true |
||||
|
}; |
||||
|
settings.customLegendEnabled = false; |
||||
|
settings.dataKeysListForLabels = []; |
||||
|
} |
||||
|
return settings; |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-flot-widget-settings', |
||||
|
templateUrl: './flot-widget-settings.component.html', |
||||
|
styleUrls: ['./../widget-settings.scss'], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => FlotWidgetSettingsComponent), |
||||
|
multi: true |
||||
|
}, |
||||
|
{ |
||||
|
provide: NG_VALIDATORS, |
||||
|
useExisting: forwardRef(() => FlotWidgetSettingsComponent), |
||||
|
multi: true, |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
export class FlotWidgetSettingsComponent extends PageComponent implements OnInit, ControlValueAccessor, Validator { |
||||
|
|
||||
|
@Input() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
@Input() |
||||
|
chartType: ChartType; |
||||
|
|
||||
|
functionScopeVariables = this.widgetService.getWidgetScopeVariables(); |
||||
|
|
||||
|
private modelValue: TbFlotSettings; |
||||
|
|
||||
|
private propagateChange = null; |
||||
|
|
||||
|
public flotSettingsFormGroup: FormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private translate: TranslateService, |
||||
|
private widgetService: WidgetService, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.flotSettingsFormGroup = this.fb.group({ |
||||
|
|
||||
|
// Common settings
|
||||
|
|
||||
|
stack: [false, []], |
||||
|
fontSize: [10, [Validators.min(0)]], |
||||
|
fontColor: ['#545454', []], |
||||
|
|
||||
|
// Tooltip settings
|
||||
|
|
||||
|
showTooltip: [true, []], |
||||
|
tooltipIndividual: [false, []], |
||||
|
tooltipCumulative: [false, []], |
||||
|
hideZeros: [false, []], |
||||
|
tooltipValueFormatter: ['', []], |
||||
|
|
||||
|
// Grid settings
|
||||
|
|
||||
|
grid: this.fb.group({ |
||||
|
verticalLines: [true, []], |
||||
|
horizontalLines: [true, []], |
||||
|
outlineWidth: [1, [Validators.min(0)]], |
||||
|
color: ['#545454', []], |
||||
|
backgroundColor: [null, []], |
||||
|
tickColor: ['#DDDDDD', []] |
||||
|
}), |
||||
|
|
||||
|
// X axis settings
|
||||
|
|
||||
|
xaxis: this.fb.group({ |
||||
|
title: [null, []], |
||||
|
|
||||
|
// --> X axis tick labels settings
|
||||
|
|
||||
|
showLabels: [true, []], |
||||
|
color: [null, []], |
||||
|
}), |
||||
|
|
||||
|
// Y axis settings
|
||||
|
|
||||
|
yaxis: this.fb.group({ |
||||
|
min: [null, []], |
||||
|
max: [null, []], |
||||
|
title: [null, []], |
||||
|
|
||||
|
// --> Y axis tick labels settings
|
||||
|
|
||||
|
showLabels: [true, []], |
||||
|
color: [null, []], |
||||
|
tickSize: [null, [Validators.min(0)]], |
||||
|
tickDecimals: [0, [Validators.min(0)]], |
||||
|
ticksFormatter: ['', []] |
||||
|
}) |
||||
|
}); |
||||
|
if (this.chartType === 'graph') { |
||||
|
// Common settings
|
||||
|
this.flotSettingsFormGroup.addControl('shadowSize', this.fb.control(4, [Validators.min(0)])); |
||||
|
this.flotSettingsFormGroup.addControl('smoothLines', this.fb.control(false, [])); |
||||
|
} else if (this.chartType === 'bar') { |
||||
|
// Common settings
|
||||
|
this.flotSettingsFormGroup.addControl('defaultBarWidth', this.fb.control(600, [Validators.min(0)])); |
||||
|
this.flotSettingsFormGroup.addControl('barAlignment', this.fb.control('left', [])); |
||||
|
} |
||||
|
if (this.chartType === 'graph' || this.chartType === 'bar') { |
||||
|
// Common settings
|
||||
|
this.flotSettingsFormGroup.addControl('thresholdsLineWidth', this.fb.control(null, [Validators.min(0)])); |
||||
|
|
||||
|
// Comparison settings
|
||||
|
|
||||
|
this.flotSettingsFormGroup.addControl('comparisonEnabled', this.fb.control(false, [])); |
||||
|
this.flotSettingsFormGroup.addControl('timeForComparison', this.fb.control('previousInterval', [])); |
||||
|
this.flotSettingsFormGroup.addControl('comparisonCustomIntervalValue', this.fb.control(7200000, [Validators.min(0)])); |
||||
|
|
||||
|
// --> Comparison X axis settings
|
||||
|
|
||||
|
this.flotSettingsFormGroup.addControl('xaxisSecond', this.fb.group({ |
||||
|
axisPosition: ['top', []], |
||||
|
title: [null, []], |
||||
|
showLabels: [true, []] |
||||
|
})); |
||||
|
|
||||
|
// Custom legend settings
|
||||
|
|
||||
|
this.flotSettingsFormGroup.addControl('customLegendEnabled', this.fb.control(false, [])); |
||||
|
this.flotSettingsFormGroup.addControl('dataKeysListForLabels', this.fb.control(this.fb.array([]), [])); |
||||
|
} |
||||
|
|
||||
|
this.flotSettingsFormGroup.get('showTooltip').valueChanges.subscribe(() => { |
||||
|
this.updateValidators(true); |
||||
|
}); |
||||
|
|
||||
|
this.flotSettingsFormGroup.get('xaxis.showLabels').valueChanges.subscribe(() => { |
||||
|
this.updateValidators(true); |
||||
|
}); |
||||
|
|
||||
|
this.flotSettingsFormGroup.get('yaxis.showLabels').valueChanges.subscribe(() => { |
||||
|
this.updateValidators(true); |
||||
|
}); |
||||
|
|
||||
|
if (this.chartType === 'graph' || this.chartType === 'bar') { |
||||
|
this.flotSettingsFormGroup.get('comparisonEnabled').valueChanges.subscribe(() => { |
||||
|
this.updateValidators(true); |
||||
|
}); |
||||
|
this.flotSettingsFormGroup.get('timeForComparison').valueChanges.subscribe(() => { |
||||
|
this.updateValidators(true); |
||||
|
}); |
||||
|
this.flotSettingsFormGroup.get('customLegendEnabled').valueChanges.subscribe(() => { |
||||
|
this.updateValidators(true); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
this.flotSettingsFormGroup.valueChanges.subscribe(() => { |
||||
|
this.updateModel(); |
||||
|
}); |
||||
|
|
||||
|
this.updateValidators(false); |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
if (isDisabled) { |
||||
|
this.flotSettingsFormGroup.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.flotSettingsFormGroup.enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(value: TbFlotSettings): void { |
||||
|
const dataKeysListForLabels = value?.dataKeysListForLabels; |
||||
|
this.modelValue = value; |
||||
|
this.flotSettingsFormGroup.patchValue( |
||||
|
value, {emitEvent: false} |
||||
|
); |
||||
|
const dataKeysListForLabelsControls: Array<AbstractControl> = []; |
||||
|
if (dataKeysListForLabels && dataKeysListForLabels.length) { |
||||
|
dataKeysListForLabels.forEach((labelDataKey) => { |
||||
|
dataKeysListForLabelsControls.push(this.fb.control(labelDataKey, [labelDataKeyValidator])); |
||||
|
}); |
||||
|
} |
||||
|
this.flotSettingsFormGroup.setControl('dataKeysListForLabels', this.fb.array(dataKeysListForLabelsControls), {emitEvent: false}); |
||||
|
this.updateValidators(false); |
||||
|
} |
||||
|
|
||||
|
validate(c: FormControl) { |
||||
|
return (this.flotSettingsFormGroup.valid) ? null : { |
||||
|
flotSettings: { |
||||
|
valid: false, |
||||
|
}, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
private updateModel() { |
||||
|
const value: TbFlotSettings = this.flotSettingsFormGroup.value; |
||||
|
this.modelValue = value; |
||||
|
this.propagateChange(this.modelValue); |
||||
|
} |
||||
|
|
||||
|
private updateValidators(emitEvent?: boolean): void { |
||||
|
const showTooltip: boolean = this.flotSettingsFormGroup.get('showTooltip').value; |
||||
|
const xaxisShowLabels: boolean = this.flotSettingsFormGroup.get('xaxis.showLabels').value; |
||||
|
const yaxisShowLabels: boolean = this.flotSettingsFormGroup.get('yaxis.showLabels').value; |
||||
|
|
||||
|
if (showTooltip) { |
||||
|
this.flotSettingsFormGroup.get('tooltipIndividual').enable({emitEvent}); |
||||
|
this.flotSettingsFormGroup.get('tooltipCumulative').enable({emitEvent}); |
||||
|
this.flotSettingsFormGroup.get('hideZeros').enable({emitEvent}); |
||||
|
this.flotSettingsFormGroup.get('tooltipValueFormatter').enable({emitEvent}); |
||||
|
} else { |
||||
|
this.flotSettingsFormGroup.get('tooltipIndividual').disable({emitEvent}); |
||||
|
this.flotSettingsFormGroup.get('tooltipCumulative').disable({emitEvent}); |
||||
|
this.flotSettingsFormGroup.get('hideZeros').disable({emitEvent}); |
||||
|
this.flotSettingsFormGroup.get('tooltipValueFormatter').disable({emitEvent}); |
||||
|
} |
||||
|
|
||||
|
if (xaxisShowLabels) { |
||||
|
this.flotSettingsFormGroup.get('xaxis.color').enable({emitEvent}); |
||||
|
} else { |
||||
|
this.flotSettingsFormGroup.get('xaxis.color').disable({emitEvent}); |
||||
|
} |
||||
|
|
||||
|
if (yaxisShowLabels) { |
||||
|
this.flotSettingsFormGroup.get('yaxis.color').enable({emitEvent}); |
||||
|
this.flotSettingsFormGroup.get('yaxis.tickSize').enable({emitEvent}); |
||||
|
this.flotSettingsFormGroup.get('yaxis.tickDecimals').enable({emitEvent}); |
||||
|
this.flotSettingsFormGroup.get('yaxis.ticksFormatter').enable({emitEvent}); |
||||
|
} else { |
||||
|
this.flotSettingsFormGroup.get('yaxis.color').disable({emitEvent}); |
||||
|
this.flotSettingsFormGroup.get('yaxis.tickSize').disable({emitEvent}); |
||||
|
this.flotSettingsFormGroup.get('yaxis.tickDecimals').disable({emitEvent}); |
||||
|
this.flotSettingsFormGroup.get('yaxis.ticksFormatter').disable({emitEvent}); |
||||
|
} |
||||
|
|
||||
|
this.flotSettingsFormGroup.get('tooltipIndividual').updateValueAndValidity({emitEvent: false}); |
||||
|
this.flotSettingsFormGroup.get('tooltipCumulative').updateValueAndValidity({emitEvent: false}); |
||||
|
this.flotSettingsFormGroup.get('hideZeros').updateValueAndValidity({emitEvent: false}); |
||||
|
this.flotSettingsFormGroup.get('tooltipValueFormatter').updateValueAndValidity({emitEvent: false}); |
||||
|
this.flotSettingsFormGroup.get('xaxis.color').updateValueAndValidity({emitEvent: false}); |
||||
|
this.flotSettingsFormGroup.get('yaxis.color').updateValueAndValidity({emitEvent: false}); |
||||
|
this.flotSettingsFormGroup.get('yaxis.tickSize').updateValueAndValidity({emitEvent: false}); |
||||
|
this.flotSettingsFormGroup.get('yaxis.tickDecimals').updateValueAndValidity({emitEvent: false}); |
||||
|
this.flotSettingsFormGroup.get('yaxis.ticksFormatter').updateValueAndValidity({emitEvent: false}); |
||||
|
|
||||
|
if (this.chartType === 'graph' || this.chartType === 'bar') { |
||||
|
const comparisonEnabled: boolean = this.flotSettingsFormGroup.get('comparisonEnabled').value; |
||||
|
const timeForComparison: ComparisonDuration = this.flotSettingsFormGroup.get('timeForComparison').value; |
||||
|
const customLegendEnabled: boolean = this.flotSettingsFormGroup.get('customLegendEnabled').value; |
||||
|
if (comparisonEnabled) { |
||||
|
this.flotSettingsFormGroup.get('timeForComparison').enable({emitEvent: false}); |
||||
|
if (timeForComparison === 'customInterval') { |
||||
|
this.flotSettingsFormGroup.get('comparisonCustomIntervalValue').enable({emitEvent}); |
||||
|
} else { |
||||
|
this.flotSettingsFormGroup.get('comparisonCustomIntervalValue').disable({emitEvent}); |
||||
|
} |
||||
|
} else { |
||||
|
this.flotSettingsFormGroup.get('timeForComparison').disable({emitEvent: false}); |
||||
|
this.flotSettingsFormGroup.get('comparisonCustomIntervalValue').disable({emitEvent}); |
||||
|
} |
||||
|
if (customLegendEnabled) { |
||||
|
this.flotSettingsFormGroup.get('dataKeysListForLabels').enable({emitEvent}); |
||||
|
} else { |
||||
|
this.flotSettingsFormGroup.get('dataKeysListForLabels').disable({emitEvent}); |
||||
|
} |
||||
|
|
||||
|
this.flotSettingsFormGroup.get('timeForComparison').updateValueAndValidity({emitEvent: false}); |
||||
|
this.flotSettingsFormGroup.get('comparisonCustomIntervalValue').updateValueAndValidity({emitEvent: false}); |
||||
|
this.flotSettingsFormGroup.get('dataKeysListForLabels').updateValueAndValidity({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
dataKeysListForLabelsFormArray(): FormArray { |
||||
|
return this.flotSettingsFormGroup.get('dataKeysListForLabels') as FormArray; |
||||
|
} |
||||
|
|
||||
|
public trackByLabelDataKey(index: number, labelDataKeyControl: AbstractControl): any { |
||||
|
return labelDataKeyControl; |
||||
|
} |
||||
|
|
||||
|
public removeLabelDataKey(index: number) { |
||||
|
(this.flotSettingsFormGroup.get('dataKeysListForLabels') as FormArray).removeAt(index); |
||||
|
} |
||||
|
|
||||
|
public addLabelDataKey() { |
||||
|
const labelDataKey: LabelDataKey = { |
||||
|
name: null, |
||||
|
type: DataKeyType.attribute |
||||
|
}; |
||||
|
const dataKeysListForLabelsArray = this.flotSettingsFormGroup.get('dataKeysListForLabels') as FormArray; |
||||
|
const labelDataKeyControl = this.fb.control(labelDataKey, [labelDataKeyValidator]); |
||||
|
(labelDataKeyControl as any).new = true; |
||||
|
dataKeysListForLabelsArray.push(labelDataKeyControl); |
||||
|
this.flotSettingsFormGroup.updateValueAndValidity(); |
||||
|
} |
||||
|
|
||||
|
labelDataKeyDrop(event: CdkDragDrop<string[]>) { |
||||
|
const dataKeysListForLabelsArray = this.flotSettingsFormGroup.get('dataKeysListForLabels') as FormArray; |
||||
|
const labelDataKey = dataKeysListForLabelsArray.at(event.previousIndex); |
||||
|
dataKeysListForLabelsArray.removeAt(event.previousIndex); |
||||
|
dataKeysListForLabelsArray.insert(event.currentIndex, labelDataKey); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,63 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2022 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. |
||||
|
|
||||
|
--> |
||||
|
<mat-expansion-panel class="label-data-key" fxFlex [formGroup]="labelDataKeyFormGroup" [(expanded)]="expanded"> |
||||
|
<mat-expansion-panel-header> |
||||
|
<div fxFlex fxLayout="row" fxLayoutAlign="start center"> |
||||
|
<mat-panel-title> |
||||
|
<div fxLayout="row" fxFlex fxLayoutAlign="start center"> |
||||
|
{{ labelDataKeyText() }} |
||||
|
</div> |
||||
|
</mat-panel-title> |
||||
|
<span fxFlex></span> |
||||
|
<button *ngIf="!disabled" mat-icon-button style="min-width: 40px;" |
||||
|
type="button" |
||||
|
(click)="removeLabelDataKey.emit()" |
||||
|
matTooltip="{{ 'action.remove' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>delete</mat-icon> |
||||
|
</button> |
||||
|
</div> |
||||
|
</mat-expansion-panel-header> |
||||
|
<ng-template matExpansionPanelContent> |
||||
|
<div fxLayout="column" fxLayoutGap="0.5em"> |
||||
|
<mat-divider></mat-divider> |
||||
|
<section class="tb-widget-settings" fxLayout="column"> |
||||
|
<section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px"> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.chart.key-name</mat-label> |
||||
|
<input required matInput formControlName="name"> |
||||
|
<mat-error *ngIf="labelDataKeyFormGroup.get('name').hasError('required')"> |
||||
|
{{ 'widgets.chart.key-name-required' | translate }} |
||||
|
</mat-error> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field fxFlex class="mat-block"> |
||||
|
<mat-label translate>widgets.chart.key-type</mat-label> |
||||
|
<mat-select formControlName="type"> |
||||
|
<mat-option [value]="'attribute'"> |
||||
|
{{ 'widgets.chart.key-type-attribute' | translate }} |
||||
|
</mat-option> |
||||
|
<mat-option [value]="'timeseries'"> |
||||
|
{{ 'widgets.chart.key-type-timeseries' | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
</section> |
||||
|
</section> |
||||
|
</div> |
||||
|
</ng-template> |
||||
|
</mat-expansion-panel> |
||||
@ -0,0 +1,40 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2022 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; |
||||
|
&.label-data-key { |
||||
|
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 { |
||||
|
&.label-data-key { |
||||
|
.mat-expansion-panel-body { |
||||
|
padding: 0 8px 8px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,132 @@ |
|||||
|
///
|
||||
|
/// Copyright © 2016-2022 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 { |
||||
|
AbstractControl, |
||||
|
ControlValueAccessor, |
||||
|
FormBuilder, |
||||
|
FormGroup, |
||||
|
NG_VALUE_ACCESSOR, ValidationErrors, |
||||
|
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 { DataKeyType } from '@shared/models/telemetry/telemetry.models'; |
||||
|
|
||||
|
export interface LabelDataKey { |
||||
|
name: string; |
||||
|
type: DataKeyType; |
||||
|
} |
||||
|
|
||||
|
export function labelDataKeyValidator(control: AbstractControl): ValidationErrors | null { |
||||
|
const labelDataKey: LabelDataKey = control.value; |
||||
|
if (!labelDataKey || !labelDataKey.name) { |
||||
|
return { |
||||
|
labelDataKey: true |
||||
|
}; |
||||
|
} |
||||
|
return null; |
||||
|
} |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-label-data-key', |
||||
|
templateUrl: './label-data-key.component.html', |
||||
|
styleUrls: ['./label-data-key.component.scss', './../widget-settings.scss'], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => LabelDataKeyComponent), |
||||
|
multi: true |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
export class LabelDataKeyComponent extends PageComponent implements OnInit, ControlValueAccessor { |
||||
|
|
||||
|
@Input() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
@Input() |
||||
|
expanded = false; |
||||
|
|
||||
|
@Output() |
||||
|
removeLabelDataKey = new EventEmitter(); |
||||
|
|
||||
|
private modelValue: LabelDataKey; |
||||
|
|
||||
|
private propagateChange = null; |
||||
|
|
||||
|
public labelDataKeyFormGroup: FormGroup; |
||||
|
|
||||
|
constructor(protected store: Store<AppState>, |
||||
|
private translate: TranslateService, |
||||
|
private fb: FormBuilder) { |
||||
|
super(store); |
||||
|
} |
||||
|
|
||||
|
ngOnInit(): void { |
||||
|
this.labelDataKeyFormGroup = this.fb.group({ |
||||
|
name: [null, [Validators.required]], |
||||
|
type: [DataKeyType.attribute, [Validators.required]] |
||||
|
}); |
||||
|
this.labelDataKeyFormGroup.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.labelDataKeyFormGroup.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.labelDataKeyFormGroup.enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(value: LabelDataKey): void { |
||||
|
this.modelValue = value; |
||||
|
this.labelDataKeyFormGroup.patchValue( |
||||
|
value, {emitEvent: false} |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
labelDataKeyText(): string { |
||||
|
const name: string = this.labelDataKeyFormGroup.get('name').value || ''; |
||||
|
const type: DataKeyType = this.labelDataKeyFormGroup.get('type').value; |
||||
|
let typeStr: string; |
||||
|
if (type === DataKeyType.attribute) { |
||||
|
typeStr = this.translate.instant('widgets.chart.key-type-attribute'); |
||||
|
} else if (type === DataKeyType.timeseries) { |
||||
|
typeStr = this.translate.instant('widgets.chart.key-type-timeseries'); |
||||
|
} |
||||
|
return `${name} (${typeStr})`; |
||||
|
} |
||||
|
|
||||
|
private updateModel() { |
||||
|
const value: LabelDataKey = this.labelDataKeyFormGroup.value; |
||||
|
this.modelValue = value; |
||||
|
this.propagateChange(this.modelValue); |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue