|
|
@ -78,76 +78,87 @@ |
|
|
</tb-js-func> |
|
|
</tb-js-func> |
|
|
</section> |
|
|
</section> |
|
|
<ng-container *ngIf="widgetType === widgetTypes.latest && modelValue.type === dataKeyTypes.timeseries"> |
|
|
<ng-container *ngIf="widgetType === widgetTypes.latest && modelValue.type === dataKeyTypes.timeseries"> |
|
|
<mat-form-field subscriptSizing="dynamic"> |
|
|
<div class="tb-form-row column"> |
|
|
<mat-label translate>datakey.aggregation</mat-label> |
|
|
<div class="tb-form-row space-between no-border no-padding"> |
|
|
<mat-select formControlName="aggregationType" style="min-width: 150px;"> |
|
|
<div>{{ 'datakey.aggregation' | translate }}</div> |
|
|
<mat-option *ngFor="let aggregation of aggregations" [value]="aggregation"> |
|
|
<mat-form-field class="medium-width" subscriptSizing="dynamic" appearance="outline"> |
|
|
{{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }} |
|
|
<mat-select formControlName="aggregationType"> |
|
|
</mat-option> |
|
|
<mat-option *ngFor="let aggregation of aggregations" [value]="aggregation"> |
|
|
</mat-select> |
|
|
{{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }} |
|
|
</mat-form-field> |
|
|
</mat-option> |
|
|
<div class="tb-hint after-fields"> |
|
|
</mat-select> |
|
|
{{ dataKeyFormGroup.get('aggregationType').value ? (dataKeyAggregationTypeHintTranslations.get(aggregationTypes[dataKeyFormGroup.get('aggregationType').value]) | translate) : '' }} |
|
|
</mat-form-field> |
|
|
<section *ngIf="dataKeyFormGroup.get('aggregationType').value !== aggregationTypes.NONE"> |
|
|
</div> |
|
|
{{ 'datakey.aggregation-type-hint-common' | translate }} |
|
|
<div class="tb-form-hint tb-primary-fill"> |
|
|
</section> |
|
|
{{ dataKeyFormGroup.get('aggregationType').value ? (dataKeyAggregationTypeHintTranslations.get(aggregationTypes[dataKeyFormGroup.get('aggregationType').value]) | translate) : '' }} |
|
|
|
|
|
<section *ngIf="dataKeyFormGroup.get('aggregationType').value !== aggregationTypes.NONE"> |
|
|
|
|
|
{{ 'datakey.aggregation-type-hint-common' | translate }} |
|
|
|
|
|
</section> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</ng-container> |
|
|
</ng-container> |
|
|
</div> |
|
|
</div> |
|
|
<div *ngIf="dataKeyFormGroup.get('aggregationType').value && dataKeyFormGroup.get('aggregationType').value !== aggregationTypes.NONE" |
|
|
<div *ngIf="dataKeyFormGroup.get('aggregationType').value && dataKeyFormGroup.get('aggregationType').value !== aggregationTypes.NONE" |
|
|
class="tb-form-panel tb-slide-toggle"> |
|
|
class="tb-form-panel"> |
|
|
<div class="tb-form-panel-title" translate>datakey.delta-calculation</div> |
|
|
<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"> |
|
|
<div class="tb-form-panel stroked tb-slide-toggle"> |
|
|
|
|
|
<mat-expansion-panel class="tb-settings" [expanded]="dataKeyFormGroup.get('comparisonEnabled').value" [disabled]="!dataKeyFormGroup.get('comparisonEnabled').value"> |
|
|
<mat-expansion-panel-header fxLayout="row wrap"> |
|
|
<mat-expansion-panel-header fxLayout="row wrap"> |
|
|
<mat-panel-title fxLayout="column" fxLayoutAlign="center start"> |
|
|
<mat-panel-title fxLayout="column" fxLayoutAlign="center start" fxLayoutGap="8px"> |
|
|
<mat-slide-toggle class="mat-slide" formControlName="comparisonEnabled" (click)="$event.stopPropagation()"> |
|
|
<mat-slide-toggle class="mat-slide" formControlName="comparisonEnabled" (click)="$event.stopPropagation()"> |
|
|
{{ 'datakey.enable-delta-calculation' | translate }} |
|
|
{{ 'datakey.enable-delta-calculation' | translate }} |
|
|
</mat-slide-toggle> |
|
|
</mat-slide-toggle> |
|
|
<mat-hint class="tb-hint" style="line-height: 15px; padding-left: 52px;">{{ 'datakey.enable-delta-calculation-hint' | translate }}</mat-hint> |
|
|
<mat-hint class="tb-form-hint tb-primary-fill">{{ 'datakey.enable-delta-calculation-hint' | translate }}</mat-hint> |
|
|
</mat-panel-title> |
|
|
</mat-panel-title> |
|
|
</mat-expansion-panel-header> |
|
|
</mat-expansion-panel-header> |
|
|
<ng-template matExpansionPanelContent> |
|
|
<ng-template matExpansionPanelContent> |
|
|
<section fxLayout="column" *ngIf="dataKeyFormGroup.get('comparisonEnabled').value"> |
|
|
<ng-container *ngIf="dataKeyFormGroup.get('comparisonEnabled').value"> |
|
|
<mat-form-field fxFlex class="mat-block"> |
|
|
<div class="tb-form-row space-between"> |
|
|
<mat-label translate>widgets.chart.time-for-comparison</mat-label> |
|
|
<div>{{ 'widgets.chart.time-for-comparison' | translate }}</div> |
|
|
<mat-select formControlName="timeForComparison"> |
|
|
<mat-form-field class="medium-width" subscriptSizing="dynamic" appearance="outline"> |
|
|
<mat-option [value]="'previousInterval'"> |
|
|
<mat-select formControlName="timeForComparison"> |
|
|
{{ 'widgets.chart.time-for-comparison-previous-interval' | translate }} |
|
|
<mat-option [value]="'previousInterval'"> |
|
|
</mat-option> |
|
|
{{ 'widgets.chart.time-for-comparison-previous-interval' | translate }} |
|
|
<mat-option [value]="'days'"> |
|
|
</mat-option> |
|
|
{{ 'widgets.chart.time-for-comparison-days' | translate }} |
|
|
<mat-option [value]="'days'"> |
|
|
</mat-option> |
|
|
{{ 'widgets.chart.time-for-comparison-days' | translate }} |
|
|
<mat-option [value]="'weeks'"> |
|
|
</mat-option> |
|
|
{{ 'widgets.chart.time-for-comparison-weeks' | translate }} |
|
|
<mat-option [value]="'weeks'"> |
|
|
</mat-option> |
|
|
{{ 'widgets.chart.time-for-comparison-weeks' | translate }} |
|
|
<mat-option [value]="'months'"> |
|
|
</mat-option> |
|
|
{{ 'widgets.chart.time-for-comparison-months' | translate }} |
|
|
<mat-option [value]="'months'"> |
|
|
</mat-option> |
|
|
{{ 'widgets.chart.time-for-comparison-months' | translate }} |
|
|
<mat-option [value]="'years'"> |
|
|
</mat-option> |
|
|
{{ 'widgets.chart.time-for-comparison-years' | translate }} |
|
|
<mat-option [value]="'years'"> |
|
|
</mat-option> |
|
|
{{ 'widgets.chart.time-for-comparison-years' | translate }} |
|
|
<mat-option [value]="'customInterval'"> |
|
|
</mat-option> |
|
|
{{ 'widgets.chart.time-for-comparison-custom-interval' | translate }} |
|
|
<mat-option [value]="'customInterval'"> |
|
|
</mat-option> |
|
|
{{ 'widgets.chart.time-for-comparison-custom-interval' | translate }} |
|
|
</mat-select> |
|
|
</mat-option> |
|
|
</mat-form-field> |
|
|
</mat-select> |
|
|
<mat-form-field *ngIf="dataKeyFormGroup.get('timeForComparison').value === 'customInterval'" fxFlex class="mat-block"> |
|
|
</mat-form-field> |
|
|
<mat-label translate>widgets.chart.custom-interval-value</mat-label> |
|
|
</div> |
|
|
<input required matInput type="number" min="0" formControlName="comparisonCustomIntervalValue"> |
|
|
<div *ngIf="dataKeyFormGroup.get('timeForComparison').value === 'customInterval'" class="tb-form-row space-between"> |
|
|
</mat-form-field> |
|
|
<div>{{ 'widgets.chart.custom-interval-value' | translate }}</div> |
|
|
<mat-form-field style="padding-bottom: 16px;"> |
|
|
<mat-form-field class="medium-width number" subscriptSizing="dynamic" appearance="outline"> |
|
|
<mat-label translate>datakey.delta-calculation-result</mat-label> |
|
|
<input required matInput type="number" min="0" formControlName="comparisonCustomIntervalValue"> |
|
|
<mat-select formControlName="comparisonResultType" style="min-width: 150px;"> |
|
|
</mat-form-field> |
|
|
<mat-option *ngFor="let comparisonResultType of comparisonResults" [value]="comparisonResultType"> |
|
|
</div> |
|
|
{{ comparisonResultTypeTranslations.get(comparisonResultTypes[comparisonResultType]) | translate }} |
|
|
<div class="tb-form-row space-between"> |
|
|
</mat-option> |
|
|
<div>{{ 'datakey.delta-calculation-result' | translate }}</div> |
|
|
</mat-select> |
|
|
<mat-form-field class="medium-width" subscriptSizing="dynamic" appearance="outline"> |
|
|
</mat-form-field> |
|
|
<mat-select formControlName="comparisonResultType" style="min-width: 150px;"> |
|
|
</section> |
|
|
<mat-option *ngFor="let comparisonResultType of comparisonResults" [value]="comparisonResultType"> |
|
|
|
|
|
{{ comparisonResultTypeTranslations.get(comparisonResultTypes[comparisonResultType]) | translate }} |
|
|
|
|
|
</mat-option> |
|
|
|
|
|
</mat-select> |
|
|
|
|
|
</mat-form-field> |
|
|
|
|
|
</div> |
|
|
|
|
|
</ng-container> |
|
|
</ng-template> |
|
|
</ng-template> |
|
|
</mat-expansion-panel> |
|
|
</mat-expansion-panel> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="tb-form-panel tb-slide-toggle" |
|
|
<div class="tb-form-panel tb-slide-toggle" |
|
|
*ngIf="(modelValue.type === dataKeyTypes.timeseries || modelValue.type === dataKeyTypes.attribute || modelValue.type === dataKeyTypes.count) && showPostProcessing"> |
|
|
*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"> |
|
|
<mat-expansion-panel class="tb-settings" [expanded]="dataKeyFormGroup.get('usePostProcessing').value" [disabled]="!dataKeyFormGroup.get('usePostProcessing').value"> |
|
|
|
Igor Kulikov
3 years ago