dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Improve latest data key aggregation config

Browse Source
This commit is contained in:
Igor Kulikov 2022-09-15 17:26:28 +03:00
parent 70466bf71c
commit 4bc66473db
4 changed files with 33 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
ui-ngx/src/app/modules/home/components/widget/data-key-config.component.html
View File

@ -63,24 +63,30 @@
</mat-form-field> </mat-form-field>
</div> </div>
<section *ngIf="widgetType === widgetTypes.latest && modelValue.type === dataKeyTypes.timeseries" fxLayout="column"> <section *ngIf="widgetType === widgetTypes.latest && modelValue.type === dataKeyTypes.timeseries" fxLayout="column">
<mat-form-field style="padding-bottom: 16px;"> <mat-form-field style="padding-bottom: 46px;">
<mat-label translate>datakey.aggregation-type</mat-label> <mat-label translate>datakey.aggregation</mat-label>
<mat-select formControlName="aggregationType" style="min-width: 150px;"> <mat-select formControlName="aggregationType" style="min-width: 150px;">
<mat-option *ngFor="let aggregation of aggregations" [value]="aggregation"> <mat-option *ngFor="let aggregation of aggregations" [value]="aggregation">
{{ (aggregation === aggregationTypes.NONE ? 'datakey.latest-value' : aggregationTypesTranslations.get(aggregationTypes[aggregation])) | translate }} {{ aggregationTypesTranslations.get(aggregationTypes[aggregation]) | translate }}
</mat-option> </mat-option>
</mat-select> </mat-select>
<mat-hint>{{ dataKeyFormGroup.get('aggregationType').value ? (dataKeyAggregationTypeHintTranslations.get(aggregationTypes[dataKeyFormGroup.get('aggregationType').value]) | translate) : '' }}</mat-hint> <mat-hint style="line-height: 15px;">
{{ 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>
</mat-hint>
</mat-form-field> </mat-form-field>
<fieldset *ngIf="dataKeyFormGroup.get('aggregationType').value && dataKeyFormGroup.get('aggregationType').value !== aggregationTypes.NONE" class="fields-group fields-group-slider"> <fieldset *ngIf="dataKeyFormGroup.get('aggregationType').value && dataKeyFormGroup.get('aggregationType').value !== aggregationTypes.NONE" class="fields-group fields-group-slider">
<legend class="group-title" translate>widgets.chart.comparison-settings</legend> <legend class="group-title" translate>datakey.delta-calculation</legend>
<mat-expansion-panel class="tb-settings" [expanded]="dataKeyFormGroup.get('comparisonEnabled').value" [disabled]="!dataKeyFormGroup.get('comparisonEnabled').value"> <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> <mat-panel-title fxLayout="column">
<mat-slide-toggle formControlName="comparisonEnabled" (click)="$event.stopPropagation()" <mat-slide-toggle formControlName="comparisonEnabled" (click)="$event.stopPropagation()"
fxLayoutAlign="center"> fxLayoutAlign="center">
{{ 'widgets.chart.enable-comparison' | translate }} {{ 'datakey.enable-delta-calculation' | translate }}
</mat-slide-toggle> </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-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<ng-template matExpansionPanelContent> <ng-template matExpansionPanelContent>
@ -113,7 +119,7 @@
<input required matInput type="number" min="0" formControlName="comparisonCustomIntervalValue"> <input required matInput type="number" min="0" formControlName="comparisonCustomIntervalValue">
</mat-form-field> </mat-form-field>
<mat-form-field style="padding-bottom: 16px;"> <mat-form-field style="padding-bottom: 16px;">
<mat-label translate>datakey.comparison-result</mat-label> <mat-label translate>datakey.delta-calculation-result</mat-label>
<mat-select formControlName="comparisonResultType" style="min-width: 150px;"> <mat-select formControlName="comparisonResultType" style="min-width: 150px;">
<mat-option *ngFor="let comparisonResultType of comparisonResults" [value]="comparisonResultType"> <mat-option *ngFor="let comparisonResultType of comparisonResults" [value]="comparisonResultType">
{{ comparisonResultTypeTranslations.get(comparisonResultTypes[comparisonResultType]) | translate }} {{ comparisonResultTypeTranslations.get(comparisonResultTypes[comparisonResultType]) | translate }}

1
ui-ngx/src/app/modules/home/components/widget/data-key-config.component.scss
View File

@ -83,6 +83,7 @@
.mat-expansion-panel-header { .mat-expansion-panel-header {
padding: 0; padding: 0;
color: rgba(0, 0, 0, 0.87); color: rgba(0, 0, 0, 0.87);
height: 140px;
&:hover { &:hover {
background: none; background: none;

6
ui-ngx/src/app/shared/models/widget.models.ts
View File

@ -267,9 +267,9 @@ export enum ComparisonResultType {
export const comparisonResultTypeTranslationMap = new Map<ComparisonResultType, string>( export const comparisonResultTypeTranslationMap = new Map<ComparisonResultType, string>(
[ [
[ComparisonResultType.PREVIOUS_VALUE, 'datakey.comparison-result-previous-value'], [ComparisonResultType.PREVIOUS_VALUE, 'datakey.delta-calculation-result-previous-value'],
[ComparisonResultType.DELTA_ABSOLUTE, 'datakey.comparison-result-delta-absolute'], [ComparisonResultType.DELTA_ABSOLUTE, 'datakey.delta-calculation-result-delta-absolute'],
[ComparisonResultType.DELTA_PERCENT, 'datakey.comparison-result-delta-percent'] [ComparisonResultType.DELTA_PERCENT, 'datakey.delta-calculation-result-delta-percent']
] ]
); );

27
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -1040,18 +1040,21 @@
"prev-value-description": "result of the previous function call;", "prev-value-description": "result of the previous function call;",
"time-prev-description": "timestamp of the previous value;", "time-prev-description": "timestamp of the previous value;",
"prev-orig-value-description": "original previous value;", "prev-orig-value-description": "original previous value;",
"aggregation-type": "Aggregation type", "aggregation": "Aggregation",
"latest-value": "Latest value", "aggregation-type-hint-common": "For performance reasons, the aggregated values calculation is available only for fixed time intervals like \"current day\", \"current month\", etc, and is not available for sliding window intervals like 'last 30 minutes' or 'last 24 hours'.",
"aggregation-type-none-hint": "Take latest value", "aggregation-type-none-hint": "Take latest value.",
"aggregation-type-min-hint": "Take min value", "aggregation-type-min-hint": "Find minimum value among data points within a selected time window.",
"aggregation-type-max-hint": "Take max value", "aggregation-type-max-hint": "Find maximum value among data points within a selected time window.",
"aggregation-type-avg-hint": "Calculate average value", "aggregation-type-avg-hint": "Calculate an average value among data points within a selected time window.",
"aggregation-type-sum-hint": "Calculate sum value", "aggregation-type-sum-hint": "Sum all values of the data points within a selected time window.",
"aggregation-type-count-hint": "Calculate count value", "aggregation-type-count-hint": "Total number of the data points within a selected time window.",
"comparison-result": "Comparison result", "delta-calculation": "Delta calculation",
"comparison-result-previous-value": "Previous value", "enable-delta-calculation": "Enable delta calculation",
"comparison-result-delta-absolute": "Delta (absolute)", "enable-delta-calculation-hint": "When enabled, the data key value is calculated based on the aggregated values for a selected time window and a specified comparison period. For performance reasons, the delta calculation is available only for history time windows and not for real-time values. For example, you may calculate the delta between the energy consumption for yesterday compared to the energy consumption for the day before yesterday.",
"comparison-result-delta-percent": "Delta (percent)" "delta-calculation-result": "Delta calculation result",
"delta-calculation-result-previous-value": "Previous value",
"delta-calculation-result-delta-absolute": "Delta (absolute)",
"delta-calculation-result-delta-percent": "Delta (percent)"
}, },
"datasource": { "datasource": {
"type": "Datasource type", "type": "Datasource type",