refactor: add data to gauge diagramm
MODIFY
src/app/components/charts/gauge-chart/gauge-chart.component.html
src/app/components/charts/gauge-chart/gauge-chart.component.html
-<div class="chart mat-elevation-z2">
+<div class="chart mat-elevation-z2" *ngIf="gaugeData">
<h3 class="chart-header primary">{{ gaugeData.name }}</h3>
<mat-divider></mat-divider>
<div class="ngx-wrapper">
<div class="infos">
<div class="text2">{{gaugeData.infoHeader}}</div>
- <div class="text-big3 letter-spacing">{{ currentValue }} / <span class="primary">{{ gaugeData.limit }}</span></div>
+ <div class="text-big3 letter-spacing">{{ liveValue }} / <span class="primary">{{ gaugeData.limit }}</span></div>
<div class="info-bottom text-big1">
<mat-divider></mat-divider>
<span>{{ percentage }}% used</span>

MODIFY
src/app/components/charts/gauge-chart/gauge-chart.component.ts
src/app/components/charts/gauge-chart/gauge-chart.component.ts
-import { Component, Input, OnInit } from '@angular/core';
+import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
import { IGaugeChartData } from '../../../interfaces/IGaugeChartData';
import { LegendPosition } from '@swimlane/ngx-charts';
@@ -7,13 +7,13 @@ import { LegendPosition } from '@swimlane/ngx-charts';
templateUrl: './gauge-chart.component.html',
styleUrls: ['./gauge-chart.component.scss'],
})
-export class GaugeChartComponent implements OnInit {
+export class GaugeChartComponent implements OnInit, OnChanges {
@Input() gaugeData!: IGaugeChartData;
@Input() icon?: string;
data: { name: string; value: number }[] = [{ name: '', value: 0 }];
legend = false;
- currentValue = 0;
+ liveValue = 0;
legendPosition = LegendPosition.Below;
period = '';
percentage = '';
@@ -28,15 +28,17 @@ export class GaugeChartComponent implements OnInit {
private setupChart() {
if (this.gaugeData) {
+ const limit = this.gaugeData.limit;
+ const liveValue = limit - this.gaugeData.remaining;
this.data = [
{
name: 'Currently Used',
- value: this.gaugeData.currentValue,
+ value: liveValue,
},
];
- this.currentValue = this.gaugeData.currentValue;
+ this.liveValue = liveValue;
this.period = this.gaugeData.period;
- this.percentage = ((this.currentValue * 100) / this.gaugeData.limit).toFixed(1);
+ this.percentage = ((liveValue * 100) / this.gaugeData.limit).toFixed(1);
}
}
@@ -51,4 +53,12 @@ export class GaugeChartComponent implements OnInit {
document.body.removeChild(p);
this.colorScheme = { domain: [color] };
}
+
+ /**
+ * Because the policy probes are loaded async we have to listen to the changes and update the diagram
+ * @param changes
+ */
+ ngOnChanges(changes: SimpleChanges): void {
+ this.setupChart();
+ }
}

MODIFY
src/app/components/my-apps-policies/my-apps-policies.component.ts
src/app/components/my-apps-policies/my-apps-policies.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { IContractExt } from '../../interfaces/IContractExt';
-import { IGaugeChartData } from '../../interfaces/IGaugeChartData';
-import {IPolicyExt} from "../../interfaces/IPolicyExt";
-import {TranslateService} from "@ngx-translate/core";
-import {BackendService} from "../../services/backend/backend.service";
-import {IContract} from "../../interfaces/ICommunication";
+import {IPolicyExt} from '../../interfaces/IPolicyExt';
+import {TranslateService} from '@ngx-translate/core';
+import {PolicyService} from '../../services/policy/policy.service';
@Component({
selector: 'app-my-apps-policies',
@@ -15,11 +13,10 @@ export class MyAppsPoliciesComponent implements OnInit {
@Input() contract?: IContractExt;
policies: IPolicyExt[] | undefined;
- gaugeData: IGaugeChartData | undefined;
constructor(
private translator: TranslateService,
- private backend: BackendService
+ private policyService: PolicyService
) {}
ngOnInit(): void {
@@ -27,29 +24,37 @@ export class MyAppsPoliciesComponent implements OnInit {
}
private extractGaugeData() {
- if (!this.contract)
+ if (!this.contract) {
return;
+ }
this.policies = this.contract.policies;
this.policies.forEach((policy: IPolicyExt) => {
- const period = policy.configAsObject.period;
+ this.policyService
+ .getPolicyProbe(this.contract!, policy)
+ .subscribe((response) => {
+ this.setGaugeDataForPolicy(policy, response);
+ });
+ });
+ }
+ private setGaugeDataForPolicy(policy: IPolicyExt, response: any) {
+ const period = policy.configAsObject.period;
policy.mainGaugeData = {
name: policy.shortName + ' ' + this.translator.instant('POLICIES.USAGE'),
limit: Number.parseInt(policy.restrictions.limit),
- period,
- currentValue: 1,
+ period: period,
+ remaining: response[0].status.remaining,
infoHeader: `${this.translator.instant('POLICIES.USAGE')} (${period})`
};
policy.timeGaugeData = {
name: 'Reset Timer',
- limit: 24,
+ limit: 3600,
period: policy.configAsObject.period,
- currentValue: 1,
+ remaining: response[0].status.reset,
infoHeader: 'Countdown'
};
- });
}
}

MODIFY
src/app/interfaces/IGaugeChartData.ts
src/app/interfaces/IGaugeChartData.ts
@@ -2,6 +2,6 @@ export interface IGaugeChartData {
name: string;
limit: number;
period: string;
- currentValue: number;
+ remaining: number;
infoHeader: string;
}

refactor: add data to gauge diagramm