|
|
|
@ -65,6 +65,18 @@ |
|
|
|
formControlName="color"> |
|
|
|
</tb-color-input> |
|
|
|
</div> |
|
|
|
<section fxLayout="column" *ngIf="modelValue.type === dataKeyTypes.function"> |
|
|
|
<span translate>datakey.data-generation-func</span> |
|
|
|
<br/> |
|
|
|
<tb-js-func #funcBodyEdit |
|
|
|
[functionArgs]="['time', 'prevValue']" |
|
|
|
[globalVariables]="functionScopeVariables" |
|
|
|
[validationArgs]="[[1, 1],[1, '1']]" |
|
|
|
resultType="any" |
|
|
|
helpId="widget/config/datakey_generation_fn" |
|
|
|
formControlName="funcBody"> |
|
|
|
</tb-js-func> |
|
|
|
</section> |
|
|
|
<ng-container *ngIf="widgetType === widgetTypes.latest && modelValue.type === dataKeyTypes.timeseries"> |
|
|
|
<mat-form-field subscriptSizing="dynamic"> |
|
|
|
<mat-label translate>datakey.aggregation</mat-label> |
|
|
|
@ -80,72 +92,62 @@ |
|
|
|
{{ 'datakey.aggregation-type-hint-common' | translate }} |
|
|
|
</section> |
|
|
|
</div> |
|
|
|
<fieldset *ngIf="dataKeyFormGroup.get('aggregationType').value && dataKeyFormGroup.get('aggregationType').value !== aggregationTypes.NONE" class="fields-group fields-group-slider"> |
|
|
|
<legend class="group-title" translate>datakey.delta-calculation</legend> |
|
|
|
<mat-expansion-panel class="tb-settings comparison" [expanded]="dataKeyFormGroup.get('comparisonEnabled').value" [disabled]="!dataKeyFormGroup.get('comparisonEnabled').value"> |
|
|
|
<mat-expansion-panel-header fxLayout="row wrap" class="fill-width"> |
|
|
|
<mat-panel-title fxLayout="column" fxLayoutAlign="center start"> |
|
|
|
<mat-slide-toggle formControlName="comparisonEnabled" (click)="$event.stopPropagation()"> |
|
|
|
{{ 'datakey.enable-delta-calculation' | translate }} |
|
|
|
</mat-slide-toggle> |
|
|
|
<mat-hint class="tb-hint" style="line-height: 15px; padding-left: 45px;">{{ 'datakey.enable-delta-calculation-hint' | translate }}</mat-hint> |
|
|
|
</mat-panel-title> |
|
|
|
</mat-expansion-panel-header> |
|
|
|
<ng-template matExpansionPanelContent> |
|
|
|
<section fxLayout="column" *ngIf="dataKeyFormGroup.get('comparisonEnabled').value"> |
|
|
|
<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 *ngIf="dataKeyFormGroup.get('timeForComparison').value === 'customInterval'" fxFlex class="mat-block"> |
|
|
|
<mat-label translate>widgets.chart.custom-interval-value</mat-label> |
|
|
|
<input required matInput type="number" min="0" formControlName="comparisonCustomIntervalValue"> |
|
|
|
</mat-form-field> |
|
|
|
<mat-form-field style="padding-bottom: 16px;"> |
|
|
|
<mat-label translate>datakey.delta-calculation-result</mat-label> |
|
|
|
<mat-select formControlName="comparisonResultType" style="min-width: 150px;"> |
|
|
|
<mat-option *ngFor="let comparisonResultType of comparisonResults" [value]="comparisonResultType"> |
|
|
|
{{ comparisonResultTypeTranslations.get(comparisonResultTypes[comparisonResultType]) | translate }} |
|
|
|
</mat-option> |
|
|
|
</mat-select> |
|
|
|
</mat-form-field> |
|
|
|
</section> |
|
|
|
</ng-template> |
|
|
|
</mat-expansion-panel> |
|
|
|
</fieldset> |
|
|
|
</ng-container> |
|
|
|
<section fxLayout="column" *ngIf="modelValue.type === dataKeyTypes.function"> |
|
|
|
<span translate>datakey.data-generation-func</span> |
|
|
|
<br/> |
|
|
|
<tb-js-func #funcBodyEdit |
|
|
|
[functionArgs]="['time', 'prevValue']" |
|
|
|
[globalVariables]="functionScopeVariables" |
|
|
|
[validationArgs]="[[1, 1],[1, '1']]" |
|
|
|
resultType="any" |
|
|
|
helpId="widget/config/datakey_generation_fn" |
|
|
|
formControlName="funcBody"> |
|
|
|
</tb-js-func> |
|
|
|
</section> |
|
|
|
</div> |
|
|
|
<div *ngIf="dataKeyFormGroup.get('aggregationType').value && dataKeyFormGroup.get('aggregationType').value !== aggregationTypes.NONE" |
|
|
|
class="tb-form-panel tb-slide-toggle"> |
|
|
|
<div class="tb-form-panel-title" translate>datakey.delta-calculation</div> |
|
|
|
<mat-expansion-panel class="tb-settings" [expanded]="dataKeyFormGroup.get('comparisonEnabled').value" [disabled]="!dataKeyFormGroup.get('comparisonEnabled').value"> |
|
|
|
<mat-expansion-panel-header fxLayout="row wrap"> |
|
|
|
<mat-panel-title fxLayout="column" fxLayoutAlign="center start"> |
|
|
|
<mat-slide-toggle class="mat-slide" formControlName="comparisonEnabled" (click)="$event.stopPropagation()"> |
|
|
|
{{ 'datakey.enable-delta-calculation' | translate }} |
|
|
|
</mat-slide-toggle> |
|
|
|
<mat-hint class="tb-hint" style="line-height: 15px; padding-left: 52px;">{{ 'datakey.enable-delta-calculation-hint' | translate }}</mat-hint> |
|
|
|
</mat-panel-title> |
|
|
|
</mat-expansion-panel-header> |
|
|
|
<ng-template matExpansionPanelContent> |
|
|
|
<section fxLayout="column" *ngIf="dataKeyFormGroup.get('comparisonEnabled').value"> |
|
|
|
<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 *ngIf="dataKeyFormGroup.get('timeForComparison').value === 'customInterval'" fxFlex class="mat-block"> |
|
|
|
<mat-label translate>widgets.chart.custom-interval-value</mat-label> |
|
|
|
<input required matInput type="number" min="0" formControlName="comparisonCustomIntervalValue"> |
|
|
|
</mat-form-field> |
|
|
|
<mat-form-field style="padding-bottom: 16px;"> |
|
|
|
<mat-label translate>datakey.delta-calculation-result</mat-label> |
|
|
|
<mat-select formControlName="comparisonResultType" style="min-width: 150px;"> |
|
|
|
<mat-option *ngFor="let comparisonResultType of comparisonResults" [value]="comparisonResultType"> |
|
|
|
{{ comparisonResultTypeTranslations.get(comparisonResultTypes[comparisonResultType]) | translate }} |
|
|
|
</mat-option> |
|
|
|
</mat-select> |
|
|
|
</mat-form-field> |
|
|
|
</section> |
|
|
|
</ng-template> |
|
|
|
</mat-expansion-panel> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="tb-form-panel tb-slide-toggle" |
|
|
|
*ngIf="(modelValue.type === dataKeyTypes.timeseries || modelValue.type === dataKeyTypes.attribute || modelValue.type === dataKeyTypes.count) && showPostProcessing"> |
|
|
|
<mat-expansion-panel class="tb-settings" [expanded]="dataKeyFormGroup.get('usePostProcessing').value" [disabled]="!dataKeyFormGroup.get('usePostProcessing').value"> |
|
|
|
|
Igor Kulikov
3 years ago