tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Used shared ShortNumberPipe for API usage value formatting

pull/15879/head
Maksym Tsymbarov 2 weeks ago
parent
976716d7ee
commit
c435bcdf6f
2 changed files with 10 additions and 29 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 29
      ui-ngx/src/app/modules/home/components/widget/lib/cards/api-usage-widget.component.ts
  2. 10
      ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html

29
ui-ngx/src/app/modules/home/components/widget/lib/cards/api-usage-widget.component.ts
View File

@ -30,6 +30,7 @@ import {
ApiUsageWidgetSettings,
getUniqueDataKeys
} from '@home/components/widget/lib/settings/cards/api-usage-settings.component.models';
import { ShortNumberPipe } from '@shared/pipe/short-number.pipe';
@Component({
selector: 'tb-api-usage-widget',
@ -57,18 +58,12 @@ export class ApiUsageWidgetComponent implements OnInit, OnDestroy {
noDataDisplayMessageText: string;
private contentResize$: ResizeObserver;
private powers: {key: string, value: number}[] = [
{ key: 'Q', value: 1e15 },
{ key: 'T', value: 1e12 },
{ key: 'B', value: 1e9 },
{ key: 'M', value: 1e6 },
{ key: 'K', value: 1e3 }
];
constructor(private imagePipe: ImagePipe,
private utils: UtilsService,
private sanitizer: DomSanitizer,
private cd: ChangeDetectorRef) {
private cd: ChangeDetectorRef,
private shortNumberPipe: ShortNumberPipe) {
}
ngOnInit(): void {
@ -95,8 +90,8 @@ export class ApiUsageWidgetComponent implements OnInit, OnDestroy {
const progress = (this.isFiniteNumber(data[0][key.maxLimit.key]) && data[0][key.maxLimit.key] !== 0) ? Math.min(100, ((data[0][key.current.key] / data[0][key.maxLimit.key]) * 100)) : 0;
key.progress = isFinite(progress) ? progress : 0;
key.status.value = data[0][key.status.key] ? data[0][key.status.key].toLowerCase() : 'enabled';
key.maxLimit.value = this.isFiniteNumber(data[0][key.maxLimit.key]) && data[0][key.maxLimit.key] !== 0 ? this.toShortNumber(data[0][key.maxLimit.key]) : '∞';
key.current.value = this.isFiniteNumber(data[0][key.current.key]) ? this.toShortNumber(data[0][key.current.key]) : 0;
key.maxLimit.value = this.isFiniteNumber(data[0][key.maxLimit.key]) && data[0][key.maxLimit.key] !== 0 ? this.shortNumberPipe.transform(data[0][key.maxLimit.key]) : '∞';
key.current.value = this.isFiniteNumber(data[0][key.current.key]) ? this.shortNumberPipe.transform(data[0][key.current.key], {roundDown: true}) : 0;
});
this.cd.detectChanges();
}
@ -145,20 +140,6 @@ export class ApiUsageWidgetComponent implements OnInit, OnDestroy {
}
}
private toShortNumber(number: any, decimals = 1) {
if (!Number.isFinite(number) || number < 0) {
return '0';
}
for (const power of this.powers) {
if (number >= power.value) {
const reduced = number / power.value;
const rounded = Number(reduced.toFixed(decimals));
return `${rounded}${power.key}`;
}
}
return `${Number(number.toFixed(decimals))}`;
}
public onInit() {
const borderRadius = this.ctx.$widgetElement.css('borderRadius');
this.overlayStyle = {...this.overlayStyle, ...{borderRadius}};

10
ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.html
View File

@ -63,11 +63,11 @@
</div>
<div class="tb-usage-items-values">
<div class="tb-usage-items-counts">
<div class="tb-usage-item-counts" [class.critical]="apiCallItemCritical.transportMessages">{{ usageInfo?.transportMessages | shortNumber }} / {{ maxValue(usageInfo?.maxTransportMessages) }}</div>
<div class="tb-usage-item-counts" [class.critical]="apiCallItemCritical.jsExecutions">{{ usageInfo?.jsExecutions | shortNumber }} / {{ maxValue(usageInfo?.maxJsExecutions) }}</div>
<div class="tb-usage-item-counts" [class.critical]="apiCallItemCritical.alarms">{{ usageInfo?.alarms | shortNumber }} / {{ maxValue(usageInfo?.maxAlarms) }}</div>
<div class="tb-usage-item-counts" [class.critical]="apiCallItemCritical.emails">{{ usageInfo?.emails | shortNumber }} / {{ maxValue(usageInfo?.maxEmails) }}</div>
<div class="tb-usage-item-counts" [class.critical]="apiCallItemCritical.sms">{{ usageInfo?.sms | shortNumber }} / {{ maxValue(usageInfo?.maxSms) }}</div>
<div class="tb-usage-item-counts" [class.critical]="apiCallItemCritical.transportMessages">{{ usageInfo?.transportMessages | shortNumber: {roundDown: true} }} / {{ maxValue(usageInfo?.maxTransportMessages) }}</div>
<div class="tb-usage-item-counts" [class.critical]="apiCallItemCritical.jsExecutions">{{ usageInfo?.jsExecutions | shortNumber: {roundDown: true} }} / {{ maxValue(usageInfo?.maxJsExecutions) }}</div>
<div class="tb-usage-item-counts" [class.critical]="apiCallItemCritical.alarms">{{ usageInfo?.alarms | shortNumber: {roundDown: true} }} / {{ maxValue(usageInfo?.maxAlarms) }}</div>
<div class="tb-usage-item-counts" [class.critical]="apiCallItemCritical.emails">{{ usageInfo?.emails | shortNumber: {roundDown: true} }} / {{ maxValue(usageInfo?.maxEmails) }}</div>
<div class="tb-usage-item-counts" [class.critical]="apiCallItemCritical.sms">{{ usageInfo?.sms | shortNumber: {roundDown: true} }} / {{ maxValue(usageInfo?.maxSms) }}</div>
</div>
<div class="tb-usage-items-progress">
<mat-progress-bar [class.critical]="apiCallItemCritical.transportMessages" color="primary" mode="determinate" [value]="progressValue(usageInfo?.transportMessages, usageInfo?.maxTransportMessages)"></mat-progress-bar>

Write Preview
Loading…
Cancel
Save