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

Add latest value to widget's legend.

Browse Source
This commit is contained in:
devaskim 2022-06-22 14:53:43 +05:00
parent 19a953428e
commit 1d08e319bc
7 changed files with 37 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ui-ngx/src/app/core/api/widget-subscription.ts
View File

@ -269,7 +269,8 @@ export class WidgetSubscription implements IWidgetSubscription {
(this.legendConfig.showMin === true ||
this.legendConfig.showMax === true ||
this.legendConfig.showAvg === true ||
this.legendConfig.showTotal === true);
this.legendConfig.showTotal === true ||
this.legendConfig.showLatest === true);
this.initDataSubscription().subscribe(() => {
subscriptionSubject.next(this);
subscriptionSubject.complete();
@ -1283,6 +1284,7 @@ export class WidgetSubscription implements IWidgetSubscription {
max: null,
avg: null,
total: null,
latest: null,
hidden: false
};
this.legendData.data.push(legendKeyData);
@ -1439,6 +1441,9 @@ export class WidgetSubscription implements IWidgetSubscription {
if (this.legendConfig.showTotal) {
legendKeyData.total = this.ctx.widgetUtils.formatValue(calculateTotal(data), decimals, units);
}
if (this.legendConfig.showLatest) {
legendKeyData.latest = this.ctx.widgetUtils.formatValue(calculateLatest(data), decimals, units);
}
this.callbacks.legendDataUpdated(this, detectChanges !== false);
}
@ -1511,3 +1516,11 @@ function calculateTotal(data: DataSet): number {
return null;
}
}
function calculateLatest(data: DataSet): number {
if (data.length > 0) {
return Number(data[data.length - 1][1]);
} else {
return null;
}
}

3
ui-ngx/src/app/modules/home/components/widget/legend-config.component.html
View File

@ -50,6 +50,9 @@
<mat-checkbox formControlName="showTotal" fxFlex="48">
{{ 'legend.show-total' | translate }}
</mat-checkbox>
<mat-checkbox formControlName="showLatest" fxFlex="48">
{{ 'legend.show-latest' | translate }}
</mat-checkbox>
<mat-checkbox formControlName="sortDataKeys" fxFlex="48">
{{ 'legend.sort-legend' | translate }}
</mat-checkbox>

6
ui-ngx/src/app/modules/home/components/widget/legend-config.component.ts
View File

@ -66,7 +66,8 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc
showMin: [null, []],
showMax: [null, []],
showAvg: [null, []],
showTotal: [null, []]
showTotal: [null, []],
showLatest: [null, []]
});
this.legendSettingsFormDirectionChanges$ = this.legendConfigForm.get('direction').valueChanges
.subscribe((direction: LegendDirection) => {
@ -124,7 +125,8 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc
showMin: isDefined(legendConfig.showMin) ? legendConfig.showMin : false,
showMax: isDefined(legendConfig.showMax) ? legendConfig.showMax : false,
showAvg: isDefined(legendConfig.showAvg) ? legendConfig.showAvg : false,
showTotal: isDefined(legendConfig.showTotal) ? legendConfig.showTotal : false
showTotal: isDefined(legendConfig.showTotal) ? legendConfig.showTotal : false,
showLatest: isDefined(legendConfig.showLatest) ? legendConfig.showLatest : false
}, {emitEvent: false});
}
this.onDirectionChanged(legendConfig.direction);

8
ui-ngx/src/app/modules/home/components/widget/legend.component.html
View File

@ -24,6 +24,7 @@
<th *ngIf="legendConfig.showMax === true">{{ 'legend.max' | translate }}</th>
<th *ngIf="legendConfig.showAvg === true">{{ 'legend.avg' | translate }}</th>
<th *ngIf="legendConfig.showTotal === true">{{ 'legend.total' | translate }}</th>
<th *ngIf="legendConfig.showLatest === true">{{ 'legend.latest' | translate }}</th>
</tr>
</thead>
<tbody>
@ -39,6 +40,7 @@
<td class="tb-legend-value" *ngIf="legendConfig.showMax === true">{{ legendData.data[legendKey.dataIndex].max }}</td>
<td class="tb-legend-value" *ngIf="legendConfig.showAvg === true">{{ legendData.data[legendKey.dataIndex].avg }}</td>
<td class="tb-legend-value" *ngIf="legendConfig.showTotal === true">{{ legendData.data[legendKey.dataIndex].total }}</td>
<td class="tb-legend-value" *ngIf="legendConfig.showLatest === true">{{ legendData.data[legendKey.dataIndex].latest }}</td>
</tr>
</ng-container>
<tr *ngIf="isRowDirection" class="tb-legend-keys" [ngClass]="{ 'tb-row-direction': !displayHeader }">
@ -76,5 +78,11 @@
{{ legendData.data[legendKey.dataIndex].total }}
</td>
</tr>
<tr class="tb-legend-keys" *ngIf="isRowDirection && legendConfig.showLatest === true">
<td class="tb-legend-type">{{ 'legend.latest' | translate }}</td>
<td class="tb-legend-value" *ngFor="let legendKey of legendKeys()">
{{ legendData.data[legendKey.dataIndex].latest }}
</td>
</tr>
</tbody>
</table>

3
ui-ngx/src/app/modules/home/components/widget/legend.component.ts
View File

@ -43,7 +43,8 @@ export class LegendComponent implements OnInit {
this.displayHeader = this.legendConfig.showMin === true ||
this.legendConfig.showMax === true ||
this.legendConfig.showAvg === true ||
this.legendConfig.showTotal === true;
this.legendConfig.showTotal === true ||
this.legendConfig.showLatest === true;
this.isHorizontal = this.legendConfig.position === LegendPosition.bottom ||
this.legendConfig.position === LegendPosition.top;

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

@ -227,6 +227,7 @@ export interface LegendConfig {
showMax: boolean;
showAvg: boolean;
showTotal: boolean;
showLatest: boolean;
}
export function defaultLegendConfig(wType: widgetType): LegendConfig {
@ -237,7 +238,8 @@ export function defaultLegendConfig(wType: widgetType): LegendConfig {
showMin: false,
showMax: false,
showAvg: wType === widgetType.timeseries,
showTotal: false
showTotal: false,
showLatest: false
};
}
@ -323,6 +325,7 @@ export interface LegendKeyData {
max: string;
avg: string;
total: string;
latest: string;
hidden: boolean;
}

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

@ -2341,11 +2341,13 @@
"show-min": "Show min value",
"show-avg": "Show average value",
"show-total": "Show total value",
"show-latest": "Show latest value",
"settings": "Legend settings",
"min": "min",
"max": "max",
"avg": "avg",
"total": "total",
"latest": "latest",
"comparison-time-ago": {
"previousInterval": "(previous interval)",
"customInterval": "(custom interval)",