Igor Kulikov
4 years ago
17 changed files with 1158 additions and 832 deletions
@ -0,0 +1,24 @@ |
|||
<!-- |
|||
|
|||
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]="flotBarKeySettingsForm" fxLayout="column"> |
|||
<tb-flot-key-settings formControlName="flotKeySettings" |
|||
[aliasController]="aliasController" |
|||
[chartType]="'bar'"> |
|||
</tb-flot-key-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 { flotDataKeyDefaultSettings } from '@home/components/widget/lib/settings/chart/flot-key-settings.component'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-flot-bar-key-settings', |
|||
templateUrl: './flot-bar-key-settings.component.html', |
|||
styleUrls: [] |
|||
}) |
|||
export class FlotBarKeySettingsComponent extends WidgetSettingsComponent { |
|||
|
|||
flotBarKeySettingsForm: FormGroup; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
private fb: FormBuilder) { |
|||
super(store); |
|||
} |
|||
|
|||
protected settingsForm(): FormGroup { |
|||
return this.flotBarKeySettingsForm; |
|||
} |
|||
|
|||
protected defaultSettings(): WidgetSettings { |
|||
return flotDataKeyDefaultSettings('bar'); |
|||
} |
|||
|
|||
protected onSettingsSet(settings: WidgetSettings) { |
|||
this.flotBarKeySettingsForm = this.fb.group({ |
|||
flotKeySettings: [settings, []] |
|||
}); |
|||
} |
|||
|
|||
protected prepareOutputSettings(settings: any): WidgetSettings { |
|||
return settings.flotKeySettings; |
|||
} |
|||
} |
|||
@ -0,0 +1,238 @@ |
|||
<!-- |
|||
|
|||
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]="flotKeySettingsFormGroup" fxLayout="column"> |
|||
<fieldset class="fields-group" fxLayout="column"> |
|||
<legend class="group-title" translate>widgets.chart.common-settings</legend> |
|||
<mat-checkbox formControlName="hideDataByDefault" style="margin-bottom: 16px;"> |
|||
{{ 'widgets.chart.data-is-hidden-by-default' | translate }} |
|||
</mat-checkbox> |
|||
<mat-checkbox formControlName="disableDataHiding" style="margin-bottom: 16px;"> |
|||
{{ 'widgets.chart.disable-data-hiding' | translate }} |
|||
</mat-checkbox> |
|||
<mat-checkbox formControlName="removeFromLegend" style="margin-bottom: 16px;"> |
|||
{{ 'widgets.chart.remove-from-legend' | translate }} |
|||
</mat-checkbox> |
|||
<mat-checkbox formControlName="excludeFromStacking" style="margin-bottom: 16px;"> |
|||
{{ 'widgets.chart.exclude-from-stacking' | translate }} |
|||
</mat-checkbox> |
|||
</fieldset> |
|||
<fieldset class="fields-group fields-group-slider"> |
|||
<legend class="group-title" translate>widgets.chart.line-settings</legend> |
|||
<mat-expansion-panel class="tb-settings" [expanded]="flotKeySettingsFormGroup.get('showLines').value"> |
|||
<mat-expansion-panel-header fxLayout="row wrap"> |
|||
<mat-panel-title> |
|||
<mat-slide-toggle formControlName="showLines" (click)="$event.stopPropagation()" |
|||
fxLayoutAlign="center"> |
|||
{{ 'widgets.chart.show-line' | 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 fxFlex fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px"> |
|||
<mat-form-field fxFlex class="mat-block"> |
|||
<mat-label translate>widgets.chart.line-width</mat-label> |
|||
<input matInput type="number" min="0" formControlName="lineWidth"> |
|||
</mat-form-field> |
|||
<mat-checkbox fxFlex formControlName="fillLines" style="margin-bottom: 16px;"> |
|||
{{ 'widgets.chart.fill-line' | translate }} |
|||
</mat-checkbox> |
|||
</section> |
|||
</ng-template> |
|||
</mat-expansion-panel> |
|||
</fieldset> |
|||
<fieldset class="fields-group fields-group-slider"> |
|||
<legend class="group-title" translate>widgets.chart.points-settings</legend> |
|||
<mat-expansion-panel class="tb-settings" [expanded]="flotKeySettingsFormGroup.get('showPoints').value"> |
|||
<mat-expansion-panel-header fxLayout="row wrap"> |
|||
<mat-panel-title> |
|||
<mat-slide-toggle formControlName="showPoints" (click)="$event.stopPropagation()" |
|||
fxLayoutAlign="center"> |
|||
{{ 'widgets.chart.show-points' | 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"> |
|||
<section fxFlex fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px"> |
|||
<mat-form-field fxFlex class="mat-block"> |
|||
<mat-label translate>widgets.chart.points-line-width</mat-label> |
|||
<input matInput type="number" min="0" formControlName="showPointsLineWidth"> |
|||
</mat-form-field> |
|||
<mat-form-field fxFlex class="mat-block"> |
|||
<mat-label translate>widgets.chart.points-radius</mat-label> |
|||
<input matInput type="number" min="0" formControlName="showPointsRadius"> |
|||
</mat-form-field> |
|||
</section> |
|||
<mat-form-field fxFlex class="mat-block"> |
|||
<mat-label translate>widgets.chart.point-shape</mat-label> |
|||
<mat-select formControlName="showPointShape"> |
|||
<mat-option [value]="'circle'"> |
|||
{{ 'widgets.chart.point-shape-circle' | translate }} |
|||
</mat-option> |
|||
<mat-option [value]="'cross'"> |
|||
{{ 'widgets.chart.point-shape-cross' | translate }} |
|||
</mat-option> |
|||
<mat-option [value]="'diamond'"> |
|||
{{ 'widgets.chart.point-shape-diamond' | translate }} |
|||
</mat-option> |
|||
<mat-option [value]="'square'"> |
|||
{{ 'widgets.chart.point-shape-square' | translate }} |
|||
</mat-option> |
|||
<mat-option [value]="'triangle'"> |
|||
{{ 'widgets.chart.point-shape-triangle' | translate }} |
|||
</mat-option> |
|||
<mat-option [value]="'custom'"> |
|||
{{ 'widgets.chart.point-shape-custom' | translate }} |
|||
</mat-option> |
|||
</mat-select> |
|||
</mat-form-field> |
|||
<tb-js-func [fxShow]="flotKeySettingsFormGroup.get('showPointShape').value === 'custom'" |
|||
formControlName="pointShapeFormatter" |
|||
[globalVariables]="functionScopeVariables" |
|||
[functionArgs]="['ctx', 'x', 'y', 'radius', 'shadow']" |
|||
functionTitle="{{ 'widgets.chart.point-shape-draw-function' | translate }}" |
|||
helpId="widget/lib/flot/point_shape_format_fn"> |
|||
</tb-js-func> |
|||
</section> |
|||
</ng-template> |
|||
</mat-expansion-panel> |
|||
</fieldset> |
|||
<fieldset class="fields-group"> |
|||
<legend class="group-title" translate>widgets.chart.tooltip-settings</legend> |
|||
<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> |
|||
</fieldset> |
|||
<fieldset class="fields-group"> |
|||
<legend class="group-title" translate>widgets.chart.yaxis-settings</legend> |
|||
<mat-slide-toggle formControlName="showSeparateAxis" class="slide-block"> |
|||
{{ 'widgets.chart.show-separate-axis' | translate }} |
|||
</mat-slide-toggle> |
|||
<mat-form-field fxFlex class="mat-block"> |
|||
<mat-label translate>widgets.chart.axis-title</mat-label> |
|||
<input matInput formControlName="axisTitle"> |
|||
</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="axisMin"> |
|||
</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="axisMax"> |
|||
</mat-form-field> |
|||
</section> |
|||
<mat-form-field fxFlex class="mat-block"> |
|||
<mat-label translate>widgets.chart.axis-position</mat-label> |
|||
<mat-select formControlName="axisPosition"> |
|||
<mat-option [value]="'left'"> |
|||
{{ 'widgets.chart.axis-position-left' | translate }} |
|||
</mat-option> |
|||
<mat-option [value]="'right'"> |
|||
{{ 'widgets.chart.axis-position-right' | translate }} |
|||
</mat-option> |
|||
</mat-select> |
|||
</mat-form-field> |
|||
<fieldset class="fields-group"> |
|||
<legend class="group-title" translate>widgets.chart.yaxis-tick-labels-settings</legend> |
|||
<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="axisTickSize"> |
|||
</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="axisTickDecimals"> |
|||
</mat-form-field> |
|||
</section> |
|||
<tb-js-func |
|||
formControlName="axisTicksFormatter" |
|||
[globalVariables]="functionScopeVariables" |
|||
[functionArgs]="['value']" |
|||
functionTitle="{{ 'widgets.chart.ticks-formatter-function' | translate }}" |
|||
helpId="widget/lib/flot/ticks_formatter_fn"> |
|||
</tb-js-func> |
|||
</fieldset> |
|||
</fieldset> |
|||
<fieldset class="fields-group"> |
|||
<legend class="group-title" translate>widgets.chart.thresholds</legend> |
|||
<div fxLayout="column"> |
|||
<div class="tb-control-list tb-drop-list" cdkDropList cdkDropListOrientation="vertical" |
|||
(cdkDropListDropped)="thresholdDrop($event)"> |
|||
<div cdkDrag class="tb-draggable" *ngFor="let thresholdControl of thresholdsFormArray().controls; trackBy: trackByThreshold; |
|||
let $index = index; last as isLast;" |
|||
fxLayout="column" [ngStyle]="!isLast ? {paddingBottom: '8px'} : {}"> |
|||
<tb-flot-threshold [formControl]="thresholdControl" |
|||
[expanded]="thresholdControl.new" |
|||
[aliasController]="aliasController" |
|||
(removeThreshold)="removeThreshold($index)"> |
|||
</tb-flot-threshold> |
|||
</div> |
|||
</div> |
|||
<div *ngIf="!thresholdsFormArray().controls.length"> |
|||
<span translate fxLayoutAlign="center center" |
|||
class="tb-prompt">widgets.chart.no-thresholds</span> |
|||
</div> |
|||
<div style="padding-top: 16px;"> |
|||
<button mat-raised-button color="primary" |
|||
type="button" |
|||
(click)="addThreshold()"> |
|||
<span translate>widgets.chart.add-threshold</span> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</fieldset> |
|||
<fieldset class="fields-group fields-group-slider" formGroupName="comparisonSettings" > |
|||
<legend class="group-title" translate>widgets.chart.comparison-settings</legend> |
|||
<mat-expansion-panel class="tb-settings" [expanded]="flotKeySettingsFormGroup.get('comparisonSettings.showValuesForComparison').value"> |
|||
<mat-expansion-panel-header fxLayout="row wrap"> |
|||
<mat-panel-title> |
|||
<mat-slide-toggle formControlName="showValuesForComparison" (click)="$event.stopPropagation()" |
|||
fxLayoutAlign="center"> |
|||
{{ 'widgets.chart.show-values-for-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 fxFlex fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px"> |
|||
<mat-form-field fxFlex class="mat-block"> |
|||
<mat-label translate>widgets.chart.comparison-values-label</mat-label> |
|||
<input matInput formControlName="comparisonValuesLabel"> |
|||
</mat-form-field> |
|||
<tb-color-input fxFlex |
|||
formControlName="color" |
|||
label="{{ 'widgets.chart.color' | translate }}" openOnInput colorClearButton> |
|||
</tb-color-input> |
|||
</section> |
|||
</ng-template> |
|||
</mat-expansion-panel> |
|||
</fieldset> |
|||
</section> |
|||
@ -0,0 +1,333 @@ |
|||
///
|
|||
/// 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, TbFlotKeySettings, TbFlotKeyThreshold } 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 { WidgetService } from '@core/http/widget.service'; |
|||
import { CdkDragDrop } from '@angular/cdk/drag-drop'; |
|||
import { IAliasController } from 'src/app/core/api/widget-api.models'; |
|||
|
|||
export function flotDataKeyDefaultSettings(chartType: ChartType): TbFlotKeySettings { |
|||
const settings: TbFlotKeySettings = { |
|||
// Common settings
|
|||
hideDataByDefault: false, |
|||
disableDataHiding: false, |
|||
removeFromLegend: false, |
|||
excludeFromStacking: false, |
|||
|
|||
// Line settings
|
|||
showLines: chartType === 'graph', |
|||
lineWidth: 1, |
|||
fillLines: false, |
|||
|
|||
// Points settings
|
|||
showPoints: false, |
|||
showPointsLineWidth: 5, |
|||
showPointsRadius: 3, |
|||
showPointShape: 'circle', |
|||
pointShapeFormatter: 'var size = radius * Math.sqrt(Math.PI) / 2;\n' + |
|||
'ctx.moveTo(x - size, y - size);\n' + |
|||
'ctx.lineTo(x + size, y + size);\n' + |
|||
'ctx.moveTo(x - size, y + size);\n' + |
|||
'ctx.lineTo(x + size, y - size);', |
|||
|
|||
// Tooltip settings
|
|||
tooltipValueFormatter: '', |
|||
|
|||
// Y axis settings
|
|||
showSeparateAxis: false, |
|||
axisTitle: '', |
|||
axisMin: null, |
|||
axisMax: null, |
|||
axisPosition: 'left', |
|||
|
|||
// --> Y axis tick labels settings
|
|||
axisTickSize: null, |
|||
axisTickDecimals: null, |
|||
axisTicksFormatter: '', |
|||
|
|||
// Thresholds
|
|||
thresholds: [], |
|||
|
|||
// Comparison settings
|
|||
comparisonSettings: { |
|||
showValuesForComparison: true, |
|||
comparisonValuesLabel: '', |
|||
color: '' |
|||
} |
|||
}; |
|||
return settings; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: 'tb-flot-key-settings', |
|||
templateUrl: './flot-key-settings.component.html', |
|||
styleUrls: ['./../widget-settings.scss'], |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => FlotKeySettingsComponent), |
|||
multi: true |
|||
}, |
|||
{ |
|||
provide: NG_VALIDATORS, |
|||
useExisting: forwardRef(() => FlotKeySettingsComponent), |
|||
multi: true, |
|||
} |
|||
] |
|||
}) |
|||
export class FlotKeySettingsComponent extends PageComponent implements OnInit, ControlValueAccessor, Validator { |
|||
|
|||
@Input() |
|||
disabled: boolean; |
|||
|
|||
@Input() |
|||
chartType: ChartType; |
|||
|
|||
@Input() |
|||
aliasController: IAliasController; |
|||
|
|||
functionScopeVariables = this.widgetService.getWidgetScopeVariables(); |
|||
|
|||
private modelValue: TbFlotKeySettings; |
|||
|
|||
private propagateChange = null; |
|||
|
|||
public flotKeySettingsFormGroup: FormGroup; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
private translate: TranslateService, |
|||
private widgetService: WidgetService, |
|||
private fb: FormBuilder) { |
|||
super(store); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.flotKeySettingsFormGroup = this.fb.group({ |
|||
|
|||
// Common settings
|
|||
|
|||
hideDataByDefault: [false, []], |
|||
disableDataHiding: [false, []], |
|||
removeFromLegend: [false, []], |
|||
excludeFromStacking: [false, []], |
|||
|
|||
// Line settings
|
|||
|
|||
showLines: [this.chartType === 'graph', []], |
|||
lineWidth: [1, [Validators.min(0)]], |
|||
fillLines: [false, []], |
|||
|
|||
// Points settings
|
|||
|
|||
showPoints: [false, []], |
|||
showPointsLineWidth: [5, [Validators.min(0)]], |
|||
showPointsRadius: [3, [Validators.min(0)]], |
|||
showPointShape: ['circle', []], |
|||
pointShapeFormatter: ['', []], |
|||
|
|||
// Tooltip settings
|
|||
|
|||
tooltipValueFormatter: ['', []], |
|||
|
|||
// Y axis settings
|
|||
|
|||
showSeparateAxis: [false, []], |
|||
axisTitle: [null, []], |
|||
axisMin: [null, []], |
|||
axisMax: [null, []], |
|||
axisPosition: ['left', []], |
|||
|
|||
// --> Y axis tick labels settings
|
|||
|
|||
axisTickSize: [null, [Validators.min(0)]], |
|||
axisTickDecimals: [null, [Validators.min(0)]], |
|||
axisTicksFormatter: ['', []], |
|||
|
|||
// Thresholds
|
|||
|
|||
thresholds: this.fb.array([]), |
|||
|
|||
// Comparison settings
|
|||
|
|||
comparisonSettings: this.fb.group({ |
|||
showValuesForComparison: [true, []], |
|||
comparisonValuesLabel: ['', []], |
|||
color: ['', []] |
|||
}) |
|||
|
|||
}); |
|||
|
|||
this.flotKeySettingsFormGroup.get('showLines').valueChanges.subscribe(() => { |
|||
this.updateValidators(true); |
|||
}); |
|||
|
|||
this.flotKeySettingsFormGroup.get('showPoints').valueChanges.subscribe(() => { |
|||
this.updateValidators(true); |
|||
}); |
|||
|
|||
this.flotKeySettingsFormGroup.get('comparisonSettings.showValuesForComparison').valueChanges.subscribe(() => { |
|||
this.updateValidators(true); |
|||
}); |
|||
|
|||
this.flotKeySettingsFormGroup.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.flotKeySettingsFormGroup.disable({emitEvent: false}); |
|||
} else { |
|||
this.flotKeySettingsFormGroup.enable({emitEvent: false}); |
|||
} |
|||
} |
|||
|
|||
writeValue(value: TbFlotKeySettings): void { |
|||
const thresholds = value?.thresholds; |
|||
this.modelValue = value; |
|||
this.flotKeySettingsFormGroup.patchValue( |
|||
value, {emitEvent: false} |
|||
); |
|||
const thresholdsControls: Array<AbstractControl> = []; |
|||
if (thresholds && thresholds.length) { |
|||
thresholds.forEach((threshold) => { |
|||
thresholdsControls.push(this.fb.control(threshold, [])); |
|||
}); |
|||
} |
|||
this.flotKeySettingsFormGroup.setControl('thresholds', this.fb.array(thresholdsControls), {emitEvent: false}); |
|||
this.updateValidators(false); |
|||
} |
|||
|
|||
validate(c: FormControl) { |
|||
return (this.flotKeySettingsFormGroup.valid) ? null : { |
|||
flotKeySettings: { |
|||
valid: false, |
|||
}, |
|||
}; |
|||
} |
|||
|
|||
private updateModel() { |
|||
const value: TbFlotKeySettings = this.flotKeySettingsFormGroup.value; |
|||
this.modelValue = value; |
|||
this.propagateChange(this.modelValue); |
|||
} |
|||
|
|||
private updateValidators(emitEvent?: boolean): void { |
|||
const showLines: boolean = this.flotKeySettingsFormGroup.get('showLines').value; |
|||
const showPoints: boolean = this.flotKeySettingsFormGroup.get('showPoints').value; |
|||
const showValuesForComparison: boolean = this.flotKeySettingsFormGroup.get('comparisonSettings.showValuesForComparison').value; |
|||
|
|||
if (showLines) { |
|||
this.flotKeySettingsFormGroup.get('lineWidth').enable({emitEvent}); |
|||
this.flotKeySettingsFormGroup.get('fillLines').enable({emitEvent}); |
|||
} else { |
|||
this.flotKeySettingsFormGroup.get('lineWidth').disable({emitEvent}); |
|||
this.flotKeySettingsFormGroup.get('fillLines').disable({emitEvent}); |
|||
} |
|||
|
|||
if (showPoints) { |
|||
this.flotKeySettingsFormGroup.get('showPointsLineWidth').enable({emitEvent}); |
|||
this.flotKeySettingsFormGroup.get('showPointsRadius').enable({emitEvent}); |
|||
this.flotKeySettingsFormGroup.get('showPointShape').enable({emitEvent}); |
|||
this.flotKeySettingsFormGroup.get('pointShapeFormatter').enable({emitEvent}); |
|||
} else { |
|||
this.flotKeySettingsFormGroup.get('showPointsLineWidth').disable({emitEvent}); |
|||
this.flotKeySettingsFormGroup.get('showPointsRadius').disable({emitEvent}); |
|||
this.flotKeySettingsFormGroup.get('showPointShape').disable({emitEvent}); |
|||
this.flotKeySettingsFormGroup.get('pointShapeFormatter').disable({emitEvent}); |
|||
} |
|||
|
|||
if (showValuesForComparison) { |
|||
this.flotKeySettingsFormGroup.get('comparisonSettings.comparisonValuesLabel').enable({emitEvent}); |
|||
this.flotKeySettingsFormGroup.get('comparisonSettings.color').enable({emitEvent}); |
|||
} else { |
|||
this.flotKeySettingsFormGroup.get('comparisonSettings.comparisonValuesLabel').disable({emitEvent}); |
|||
this.flotKeySettingsFormGroup.get('comparisonSettings.color').disable({emitEvent}); |
|||
} |
|||
|
|||
this.flotKeySettingsFormGroup.get('lineWidth').updateValueAndValidity({emitEvent: false}); |
|||
this.flotKeySettingsFormGroup.get('fillLines').updateValueAndValidity({emitEvent: false}); |
|||
this.flotKeySettingsFormGroup.get('showPointsLineWidth').updateValueAndValidity({emitEvent: false}); |
|||
this.flotKeySettingsFormGroup.get('showPointsRadius').updateValueAndValidity({emitEvent: false}); |
|||
this.flotKeySettingsFormGroup.get('showPointShape').updateValueAndValidity({emitEvent: false}); |
|||
this.flotKeySettingsFormGroup.get('pointShapeFormatter').updateValueAndValidity({emitEvent: false}); |
|||
this.flotKeySettingsFormGroup.get('comparisonSettings.comparisonValuesLabel').updateValueAndValidity({emitEvent: false}); |
|||
this.flotKeySettingsFormGroup.get('comparisonSettings.color').updateValueAndValidity({emitEvent: false}); |
|||
} |
|||
|
|||
thresholdsFormArray(): FormArray { |
|||
return this.flotKeySettingsFormGroup.get('thresholds') as FormArray; |
|||
} |
|||
|
|||
public trackByThreshold(index: number, thresholdControl: AbstractControl): any { |
|||
return thresholdControl; |
|||
} |
|||
|
|||
public removeThreshold(index: number) { |
|||
(this.flotKeySettingsFormGroup.get('thresholds') as FormArray).removeAt(index); |
|||
} |
|||
|
|||
public addThreshold() { |
|||
const threshold: TbFlotKeyThreshold = { |
|||
thresholdValueSource: 'predefinedValue', |
|||
thresholdEntityAlias: null, |
|||
thresholdAttribute: null, |
|||
thresholdValue: null, |
|||
lineWidth: null, |
|||
color: null |
|||
}; |
|||
const thresholdsArray = this.flotKeySettingsFormGroup.get('thresholds') as FormArray; |
|||
const thresholdControl = this.fb.control(threshold, []); |
|||
(thresholdControl as any).new = true; |
|||
thresholdsArray.push(thresholdControl); |
|||
this.flotKeySettingsFormGroup.updateValueAndValidity(); |
|||
} |
|||
|
|||
thresholdDrop(event: CdkDragDrop<string[]>) { |
|||
const thresholdsArray = this.flotKeySettingsFormGroup.get('thresholds') as FormArray; |
|||
const threshold = thresholdsArray.at(event.previousIndex); |
|||
thresholdsArray.removeAt(event.previousIndex); |
|||
thresholdsArray.insert(event.currentIndex, threshold); |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,47 @@ |
|||
<!-- |
|||
|
|||
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]="flotLatestKeySettingsForm" fxLayout="column"> |
|||
<fieldset class="fields-group fields-group-slider"> |
|||
<legend class="group-title" translate>widgets.chart.threshold-settings</legend> |
|||
<mat-expansion-panel class="tb-settings" [expanded]="flotLatestKeySettingsForm.get('useAsThreshold').value"> |
|||
<mat-expansion-panel-header fxLayout="row wrap"> |
|||
<mat-panel-title> |
|||
<mat-slide-toggle formControlName="useAsThreshold" (click)="$event.stopPropagation()" |
|||
fxLayoutAlign="center"> |
|||
{{ 'widgets.chart.use-as-threshold' | 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" fxLayout.gt-sm="row" fxLayoutGap="8px"> |
|||
<mat-form-field fxFlex class="mat-block"> |
|||
<mat-label translate>widgets.chart.threshold-line-width</mat-label> |
|||
<input type="number" min="0" matInput formControlName="thresholdLineWidth"> |
|||
</mat-form-field> |
|||
<tb-color-input fxFlex |
|||
formControlName="thresholdColor" |
|||
label="{{ 'widgets.chart.threshold-color' | translate }}" openOnInput colorClearButton> |
|||
</tb-color-input> |
|||
</section> |
|||
</ng-template> |
|||
</mat-expansion-panel> |
|||
</fieldset> |
|||
</section> |
|||
@ -0,0 +1,74 @@ |
|||
///
|
|||
/// 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'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-flot-latest-key-settings', |
|||
templateUrl: './flot-latest-key-settings.component.html', |
|||
styleUrls: ['./../widget-settings.scss'] |
|||
}) |
|||
export class FlotLatestKeySettingsComponent extends WidgetSettingsComponent { |
|||
|
|||
flotLatestKeySettingsForm: FormGroup; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
private fb: FormBuilder) { |
|||
super(store); |
|||
} |
|||
|
|||
protected settingsForm(): FormGroup { |
|||
return this.flotLatestKeySettingsForm; |
|||
} |
|||
|
|||
protected defaultSettings(): WidgetSettings { |
|||
return { |
|||
useAsThreshold: false, |
|||
thresholdLineWidth: null, |
|||
thresholdColor: null |
|||
}; |
|||
} |
|||
|
|||
protected onSettingsSet(settings: WidgetSettings) { |
|||
this.flotLatestKeySettingsForm = this.fb.group({ |
|||
useAsThreshold: [settings.useAsThreshold, []], |
|||
thresholdLineWidth: [settings.thresholdLineWidth, [Validators.min(0)]], |
|||
thresholdColor: [settings.thresholdColor, []] |
|||
}); |
|||
} |
|||
|
|||
protected validatorTriggers(): string[] { |
|||
return ['useAsThreshold']; |
|||
} |
|||
|
|||
protected updateValidators(emitEvent: boolean) { |
|||
const useAsThreshold: boolean = this.flotLatestKeySettingsForm.get('useAsThreshold').value; |
|||
if (useAsThreshold) { |
|||
this.flotLatestKeySettingsForm.get('thresholdLineWidth').enable(); |
|||
this.flotLatestKeySettingsForm.get('thresholdColor').enable(); |
|||
} else { |
|||
this.flotLatestKeySettingsForm.get('thresholdLineWidth').disable(); |
|||
this.flotLatestKeySettingsForm.get('thresholdColor').disable(); |
|||
} |
|||
this.flotLatestKeySettingsForm.get('thresholdLineWidth').updateValueAndValidity({emitEvent}); |
|||
this.flotLatestKeySettingsForm.get('thresholdColor').updateValueAndValidity({emitEvent}); |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,24 @@ |
|||
<!-- |
|||
|
|||
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]="flotLineKeySettingsForm" fxLayout="column"> |
|||
<tb-flot-key-settings formControlName="flotKeySettings" |
|||
[aliasController]="aliasController" |
|||
[chartType]="'graph'"> |
|||
</tb-flot-key-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 { flotDataKeyDefaultSettings } from '@home/components/widget/lib/settings/chart/flot-key-settings.component'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-flot-line-key-settings', |
|||
templateUrl: './flot-line-key-settings.component.html', |
|||
styleUrls: [] |
|||
}) |
|||
export class FlotLineKeySettingsComponent extends WidgetSettingsComponent { |
|||
|
|||
flotLineKeySettingsForm: FormGroup; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
private fb: FormBuilder) { |
|||
super(store); |
|||
} |
|||
|
|||
protected settingsForm(): FormGroup { |
|||
return this.flotLineKeySettingsForm; |
|||
} |
|||
|
|||
protected defaultSettings(): WidgetSettings { |
|||
return flotDataKeyDefaultSettings('graph'); |
|||
} |
|||
|
|||
protected onSettingsSet(settings: WidgetSettings) { |
|||
this.flotLineKeySettingsForm = this.fb.group({ |
|||
flotKeySettings: [settings, []] |
|||
}); |
|||
} |
|||
|
|||
protected prepareOutputSettings(settings: any): WidgetSettings { |
|||
return settings.flotKeySettings; |
|||
} |
|||
} |
|||
@ -0,0 +1,57 @@ |
|||
<!-- |
|||
|
|||
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="flot-threshold" fxFlex [formGroup]="thresholdFormGroup" [(expanded)]="expanded"> |
|||
<mat-expansion-panel-header> |
|||
<div fxFlex fxLayout="row" fxLayoutAlign="start center"> |
|||
<mat-panel-title> |
|||
<div fxLayout="row" fxFlex fxLayoutAlign="start center"> |
|||
<div>{{ thresholdText() }}</div> |
|||
<div class="tb-color-preview" style="margin-left: 6px;"> |
|||
<div class="tb-color-result" [ngStyle]="{background: thresholdFormGroup.get('color').value}"></div> |
|||
</div> |
|||
</div> |
|||
</mat-panel-title> |
|||
<span fxFlex></span> |
|||
<button *ngIf="!disabled" mat-icon-button style="min-width: 40px;" |
|||
type="button" |
|||
(click)="removeThreshold.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"> |
|||
<tb-value-source [aliasController]="aliasController" formControlName="valueSource"></tb-value-source> |
|||
<section fxLayout="column" fxLayout.gt-sm="row" fxLayoutGap="8px"> |
|||
<mat-form-field fxFlex class="mat-block"> |
|||
<mat-label translate>widgets.chart.line-width</mat-label> |
|||
<input type="number" min="0" matInput formControlName="lineWidth"> |
|||
</mat-form-field> |
|||
<tb-color-input fxFlex |
|||
formControlName="color" |
|||
label="{{ 'widgets.chart.color' | translate }}" openOnInput colorClearButton> |
|||
</tb-color-input> |
|||
</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; |
|||
&.flot-threshold { |
|||
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 { |
|||
&.flot-threshold { |
|||
.mat-expansion-panel-body { |
|||
padding: 0 8px 8px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,136 @@ |
|||
///
|
|||
/// 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 { ValueSourceProperty } from '@home/components/widget/lib/settings/common/value-source.component'; |
|||
import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core'; |
|||
import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms'; |
|||
import { PageComponent } from '@shared/components/page.component'; |
|||
import { Store } from '@ngrx/store'; |
|||
import { AppState } from '@core/core.state'; |
|||
import { TranslateService } from '@ngx-translate/core'; |
|||
import { isNumber } from '@core/utils'; |
|||
import { IAliasController } from '@core/api/widget-api.models'; |
|||
import { TbFlotKeyThreshold } from '@home/components/widget/lib/flot-widget.models'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-flot-threshold', |
|||
templateUrl: './flot-threshold.component.html', |
|||
styleUrls: ['./flot-threshold.component.scss', './../widget-settings.scss'], |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => FlotThresholdComponent), |
|||
multi: true |
|||
} |
|||
] |
|||
}) |
|||
export class FlotThresholdComponent extends PageComponent implements OnInit, ControlValueAccessor { |
|||
|
|||
@Input() |
|||
disabled: boolean; |
|||
|
|||
@Input() |
|||
expanded = false; |
|||
|
|||
@Input() |
|||
aliasController: IAliasController; |
|||
|
|||
@Output() |
|||
removeThreshold = new EventEmitter(); |
|||
|
|||
private modelValue: TbFlotKeyThreshold; |
|||
|
|||
private propagateChange = null; |
|||
|
|||
public thresholdFormGroup: FormGroup; |
|||
|
|||
constructor(protected store: Store<AppState>, |
|||
private translate: TranslateService, |
|||
private fb: FormBuilder) { |
|||
super(store); |
|||
} |
|||
|
|||
ngOnInit(): void { |
|||
this.thresholdFormGroup = this.fb.group({ |
|||
valueSource: [null, []], |
|||
lineWidth: [null, [Validators.min(0)]], |
|||
color: [null, []] |
|||
}); |
|||
this.thresholdFormGroup.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.thresholdFormGroup.disable({emitEvent: false}); |
|||
} else { |
|||
this.thresholdFormGroup.enable({emitEvent: false}); |
|||
} |
|||
} |
|||
|
|||
writeValue(value: TbFlotKeyThreshold): void { |
|||
this.modelValue = value; |
|||
const valueSource: ValueSourceProperty = { |
|||
valueSource: value?.thresholdValueSource, |
|||
entityAlias: value?.thresholdEntityAlias, |
|||
attribute: value?.thresholdAttribute, |
|||
value: value?.thresholdValue |
|||
}; |
|||
this.thresholdFormGroup.patchValue( |
|||
{valueSource, lineWidth: value?.lineWidth, color: value?.color}, {emitEvent: false} |
|||
); |
|||
} |
|||
|
|||
thresholdText(): string { |
|||
const value: ValueSourceProperty = this.thresholdFormGroup.get('valueSource').value; |
|||
return this.valueSourcePropertyText(value); |
|||
} |
|||
|
|||
private valueSourcePropertyText(source?: ValueSourceProperty): string { |
|||
if (source) { |
|||
if (source.valueSource === 'predefinedValue') { |
|||
return `${isNumber(source.value) ? source.value : 0}`; |
|||
} else if (source.valueSource === 'entityAttribute') { |
|||
const alias = source.entityAlias || 'Undefined'; |
|||
const key = source.attribute || 'Undefined'; |
|||
return `${alias}.${key}`; |
|||
} |
|||
} |
|||
return 'Undefined'; |
|||
} |
|||
|
|||
private updateModel() { |
|||
const value: {valueSource: ValueSourceProperty, lineWidth: number, color: string} = this.thresholdFormGroup.value; |
|||
this.modelValue = { |
|||
thresholdValueSource: value?.valueSource?.valueSource, |
|||
thresholdEntityAlias: value?.valueSource?.entityAlias, |
|||
thresholdAttribute: value?.valueSource?.attribute, |
|||
thresholdValue: value?.valueSource?.value, |
|||
lineWidth: value?.lineWidth, |
|||
color: value?.color |
|||
}; |
|||
this.propagateChange(this.modelValue); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue