From 048c4e6320493593e975d9eef699dfed68863992 Mon Sep 17 00:00:00 2001
From: Ruslan Rabadanov <ruslanrabadanov2101@gmail.com>
Date: Mon, 3 Mar 2025 22:14:40 +0100
Subject: [PATCH] FE-6 Add dynamic frames chart
---
package-lock.json | 17 ++++
package.json | 1 +
src/app/api/dashboard.api.ts | 8 +-
src/app/components/button/button.component.ts | 3 +-
.../configuration-form.component.ts | 2 +
.../configuration-template.component.ts | 3 +-
.../configuration/configuration.component.ts | 2 +
.../dashboard-chart-frames.component.html | 3 +
.../dashboard-chart-frames.component.scss | 0
.../dashboard-chart-frames.component.ts | 82 +++++++++++++++++++
...oard-chart-information-rate.component.html | 1 +
...oard-chart-information-rate.component.scss | 0
...hboard-chart-information-rate.component.ts | 10 +++
.../dashboard-chart-protocol.component.html | 1 +
.../dashboard-chart-protocol.component.scss | 0
.../dashboard-chart-protocol.component.ts | 47 +++++++++++
.../dashboard-charts.component.html | 14 +++-
.../dashboard-charts.component.ts | 20 ++++-
.../dashboard-statistics.component.ts | 3 +-
.../dashboard/dashboard.component.html | 2 +-
.../dashboard/dashboard.component.ts | 3 +-
src/app/components/header/header.component.ts | 3 +-
.../not-found/not-found.component.ts | 3 +-
.../page-wrapper/page-wrapper.component.ts | 3 +-
src/app/components/pill/pill.component.ts | 8 +-
.../components/sidenav/sidenav.component.ts | 2 +
src/app/interceptor/mocks/frames-current.json | 6 +-
.../interceptor/mocks/frames-historical.json | 2 +-
src/app/interceptor/mocks/ipv4-current.json | 6 +-
.../interceptor/mocks/ipv4-historical.json | 2 +-
src/app/interceptor/mocks/ir-current.json | 6 +-
src/app/interceptor/mocks/ir-historical.json | 2 +-
32 files changed, 240 insertions(+), 25 deletions(-)
create mode 100644 src/app/components/dashboard-chart-frames/dashboard-chart-frames.component.html
create mode 100644 src/app/components/dashboard-chart-frames/dashboard-chart-frames.component.scss
create mode 100644 src/app/components/dashboard-chart-frames/dashboard-chart-frames.component.ts
create mode 100644 src/app/components/dashboard-chart-information-rate/dashboard-chart-information-rate.component.html
create mode 100644 src/app/components/dashboard-chart-information-rate/dashboard-chart-information-rate.component.scss
create mode 100644 src/app/components/dashboard-chart-information-rate/dashboard-chart-information-rate.component.ts
create mode 100644 src/app/components/dashboard-chart-protocol/dashboard-chart-protocol.component.html
create mode 100644 src/app/components/dashboard-chart-protocol/dashboard-chart-protocol.component.scss
create mode 100644 src/app/components/dashboard-chart-protocol/dashboard-chart-protocol.component.ts
diff --git a/package-lock.json b/package-lock.json
index e00ab1f..f9c86e9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,6 +19,7 @@
"@angular/platform-browser-dynamic": "^19.0.0",
"@angular/router": "^19.0.0",
"@primeng/themes": "^19.0.6",
+ "chart.js": "^4.4.8",
"ngx-skeleton-loader": "^10.0.0",
"primeicons": "^7.0.0",
"primeng": "^19.0.6",
@@ -3070,6 +3071,11 @@
"tslib": "2"
}
},
+ "node_modules/@kurkle/color": {
+ "version": "0.3.4",
+ "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz",
+ "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w=="
+ },
"node_modules/@leichtgewicht/ip-codec": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
@@ -5804,6 +5810,17 @@
"integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
"dev": true
},
+ "node_modules/chart.js": {
+ "version": "4.4.8",
+ "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.8.tgz",
+ "integrity": "sha512-IkGZlVpXP+83QpMm4uxEiGqSI7jFizwVtF3+n5Pc3k7sMO+tkd0qxh2OzLhenM0K80xtmAONWGBn082EiBQSDA==",
+ "dependencies": {
+ "@kurkle/color": "^0.3.0"
+ },
+ "engines": {
+ "pnpm": ">=8"
+ }
+ },
"node_modules/chokidar": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
diff --git a/package.json b/package.json
index aa94cd0..ea14e07 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
"@angular/platform-browser-dynamic": "^19.0.0",
"@angular/router": "^19.0.0",
"@primeng/themes": "^19.0.6",
+ "chart.js": "^4.4.8",
"ngx-skeleton-loader": "^10.0.0",
"primeicons": "^7.0.0",
"primeng": "^19.0.6",
diff --git a/src/app/api/dashboard.api.ts b/src/app/api/dashboard.api.ts
index c6fe7e8..900ccc1 100644
--- a/src/app/api/dashboard.api.ts
+++ b/src/app/api/dashboard.api.ts
@@ -2,7 +2,7 @@ import { inject, Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ApiResponse } from '../models/api-response';
import { ChartFrames } from '../models/chart-frames';
-import { map, Observable } from 'rxjs';
+import { map, Observable, tap } from 'rxjs';
import { ChartInformationRate } from '../models/chart-information-rate';
import { ChartProtocol } from '../models/chart-protocol';
@@ -15,9 +15,13 @@ export class DashboardApi {
private readonly httpClient = inject(HttpClient);
fetchFramesHistory(): Observable<ChartFrames[]> {
+ console.log('fetchFramesHistory');
return this.httpClient
.get<ApiResponse<ChartFrames[]>>(`${DASHBOARD_API_URL}/frames/historical`)
- .pipe(map(response => response.data));
+ .pipe(
+ map(response => response.data),
+ tap(console.log)
+ );
}
fetchFrames(): Observable<ChartFrames> {
diff --git a/src/app/components/button/button.component.ts b/src/app/components/button/button.component.ts
index cc2d400..3682c84 100644
--- a/src/app/components/button/button.component.ts
+++ b/src/app/components/button/button.component.ts
@@ -1,4 +1,4 @@
-import { Component, input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
import { MatButton } from '@angular/material/button';
import { NgClass } from '@angular/common';
@@ -7,6 +7,7 @@ import { NgClass } from '@angular/common';
imports: [MatButton, NgClass],
templateUrl: './button.component.html',
styleUrl: './button.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ButtonComponent {
secondary = input<string | null>(null);
diff --git a/src/app/components/configuration-form/configuration-form.component.ts b/src/app/components/configuration-form/configuration-form.component.ts
index 0996c77..456bd9d 100644
--- a/src/app/components/configuration-form/configuration-form.component.ts
+++ b/src/app/components/configuration-form/configuration-form.component.ts
@@ -1,4 +1,5 @@
import {
+ ChangeDetectionStrategy,
Component,
inject,
input,
@@ -43,6 +44,7 @@ import { ButtonComponent } from '../button/button.component';
],
templateUrl: './configuration-form.component.html',
styleUrl: './configuration-form.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ConfigurationFormComponent implements OnInit {
configurationFormBuilder = inject(ConfigurationFormBuilder);
diff --git a/src/app/components/configuration-template/configuration-template.component.ts b/src/app/components/configuration-template/configuration-template.component.ts
index d6f45a2..4139825 100644
--- a/src/app/components/configuration-template/configuration-template.component.ts
+++ b/src/app/components/configuration-template/configuration-template.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
import { MatDivider } from '@angular/material/divider';
@Component({
@@ -6,5 +6,6 @@ import { MatDivider } from '@angular/material/divider';
imports: [MatDivider],
templateUrl: './configuration-template.component.html',
styleUrl: './configuration-template.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ConfigurationTemplateComponent {}
diff --git a/src/app/components/configuration/configuration.component.ts b/src/app/components/configuration/configuration.component.ts
index 5645562..58830a5 100644
--- a/src/app/components/configuration/configuration.component.ts
+++ b/src/app/components/configuration/configuration.component.ts
@@ -1,5 +1,6 @@
import {
afterNextRender,
+ ChangeDetectionStrategy,
Component,
effect,
inject,
@@ -47,6 +48,7 @@ enum ConfigurationPageMode {
],
templateUrl: './configuration.component.html',
styleUrl: './configuration.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ConfigurationComponent {
configurationApi = inject(ConfigurationApi);
diff --git a/src/app/components/dashboard-chart-frames/dashboard-chart-frames.component.html b/src/app/components/dashboard-chart-frames/dashboard-chart-frames.component.html
new file mode 100644
index 0000000..3f4d449
--- /dev/null
+++ b/src/app/components/dashboard-chart-frames/dashboard-chart-frames.component.html
@@ -0,0 +1,3 @@
+<p-chart type="line" [data]="data()" [options]="options" />
+<!--@todo: find other way to fix scrolling to the top of the page-->
+<p-skeleton height="290px" />
diff --git a/src/app/components/dashboard-chart-frames/dashboard-chart-frames.component.scss b/src/app/components/dashboard-chart-frames/dashboard-chart-frames.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/dashboard-chart-frames/dashboard-chart-frames.component.ts b/src/app/components/dashboard-chart-frames/dashboard-chart-frames.component.ts
new file mode 100644
index 0000000..4bf877f
--- /dev/null
+++ b/src/app/components/dashboard-chart-frames/dashboard-chart-frames.component.ts
@@ -0,0 +1,82 @@
+import {
+ ChangeDetectionStrategy,
+ ChangeDetectorRef,
+ Component,
+ computed,
+ inject,
+ OnInit,
+ signal,
+} from '@angular/core';
+import { DashboardApi } from '../../api/dashboard.api';
+import { ChartFrames } from '../../models/chart-frames';
+import { UIChart } from 'primeng/chart';
+import { interval, shareReplay, switchMap } from 'rxjs';
+import { Skeleton } from 'primeng/skeleton';
+
+@Component({
+ selector: 'app-dashboard-chart-frames',
+ imports: [UIChart, Skeleton],
+ templateUrl: './dashboard-chart-frames.component.html',
+ styleUrl: './dashboard-chart-frames.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DashboardChartFramesComponent implements OnInit {
+ readonly #dashboardApi = inject(DashboardApi);
+ readonly #cdr = inject(ChangeDetectorRef);
+ framesHistory = signal<ChartFrames[]>([]);
+ data = computed(() => {
+ const frames = this.framesHistory();
+ if (!frames) return;
+ return {
+ labels: this.getFrameLabels().map(date => date.toLocaleTimeString()),
+ datasets: [
+ {
+ label: 'Valid Frames',
+ data: frames.map(frame => frame.valid),
+ fill: true,
+ backgroundColor: 'rgb(76, 175, 80, 0.2)',
+ tension: 0.4,
+ borderColor: '#4CAF50',
+ },
+ {
+ label: 'Invalid Frames',
+ data: frames.map(frame => frame.invalid),
+ fill: true,
+ tension: 0.4,
+ borderColor: '#f34d52',
+ backgroundColor: 'rgb(243, 77, 82, 0.2)',
+ },
+ ],
+ };
+ });
+
+ options = {
+ animation: {
+ duration: 0,
+ },
+ };
+
+ ngOnInit() {
+ this.#dashboardApi
+ .fetchFramesHistory()
+ .subscribe(response => this.framesHistory.set(response));
+
+ interval(1000)
+ .pipe(
+ switchMap(() => this.#dashboardApi.fetchFrames()),
+ shareReplay(1)
+ )
+ .subscribe(frame => {
+ this.framesHistory.update(frames => [...frames.splice(1), frame]);
+ });
+ }
+
+ private getFrameLabels(): Date[] {
+ const labelsNumber = this.framesHistory().length;
+ const now = new Date().getTime();
+ return Array.from(
+ { length: labelsNumber },
+ (_, index) => new Date(now - (labelsNumber - index) * 1000)
+ );
+ }
+}
diff --git a/src/app/components/dashboard-chart-information-rate/dashboard-chart-information-rate.component.html b/src/app/components/dashboard-chart-information-rate/dashboard-chart-information-rate.component.html
new file mode 100644
index 0000000..4f2c3e0
--- /dev/null
+++ b/src/app/components/dashboard-chart-information-rate/dashboard-chart-information-rate.component.html
@@ -0,0 +1 @@
+<p>dashboard-chart-information-rate works!</p>
diff --git a/src/app/components/dashboard-chart-information-rate/dashboard-chart-information-rate.component.scss b/src/app/components/dashboard-chart-information-rate/dashboard-chart-information-rate.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/dashboard-chart-information-rate/dashboard-chart-information-rate.component.ts b/src/app/components/dashboard-chart-information-rate/dashboard-chart-information-rate.component.ts
new file mode 100644
index 0000000..2851ba1
--- /dev/null
+++ b/src/app/components/dashboard-chart-information-rate/dashboard-chart-information-rate.component.ts
@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+ selector: 'app-dashboard-chart-information-rate',
+ imports: [],
+ templateUrl: './dashboard-chart-information-rate.component.html',
+ styleUrl: './dashboard-chart-information-rate.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DashboardChartInformationRateComponent {}
diff --git a/src/app/components/dashboard-chart-protocol/dashboard-chart-protocol.component.html b/src/app/components/dashboard-chart-protocol/dashboard-chart-protocol.component.html
new file mode 100644
index 0000000..d0159e3
--- /dev/null
+++ b/src/app/components/dashboard-chart-protocol/dashboard-chart-protocol.component.html
@@ -0,0 +1 @@
+<p-chart type="line" [data]="data" />
diff --git a/src/app/components/dashboard-chart-protocol/dashboard-chart-protocol.component.scss b/src/app/components/dashboard-chart-protocol/dashboard-chart-protocol.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/dashboard-chart-protocol/dashboard-chart-protocol.component.ts b/src/app/components/dashboard-chart-protocol/dashboard-chart-protocol.component.ts
new file mode 100644
index 0000000..e9586f8
--- /dev/null
+++ b/src/app/components/dashboard-chart-protocol/dashboard-chart-protocol.component.ts
@@ -0,0 +1,47 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { UIChart } from 'primeng/chart';
+
+@Component({
+ selector: 'app-dashboard-chart-protocol',
+ imports: [UIChart],
+ templateUrl: './dashboard-chart-protocol.component.html',
+ styleUrl: './dashboard-chart-protocol.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DashboardChartProtocolComponent {
+ protocol = input.required<string>();
+ data: any;
+
+ ngOnInit() {
+ const documentStyle = getComputedStyle(document.documentElement);
+
+ this.data = {
+ labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+ datasets: [
+ {
+ label: 'First Dataset',
+ data: [65, 59, 80, 81, 56, 55, 40],
+ fill: false,
+ tension: 0.4,
+ borderColor: documentStyle.getPropertyValue('--p-cyan-500'),
+ },
+ {
+ label: 'Second Dataset',
+ data: [28, 48, 40, 19, 86, 27, 90],
+ fill: false,
+ borderDash: [5, 5],
+ tension: 0.4,
+ borderColor: documentStyle.getPropertyValue('--p-orange-500'),
+ },
+ {
+ label: 'Third Dataset',
+ data: [12, 51, 62, 33, 21, 62, 45],
+ fill: true,
+ borderColor: documentStyle.getPropertyValue('--p-gray-500'),
+ tension: 0.4,
+ backgroundColor: 'rgba(107, 114, 128, 0.2)',
+ },
+ ],
+ };
+ }
+}
diff --git a/src/app/components/dashboard-charts/dashboard-charts.component.html b/src/app/components/dashboard-charts/dashboard-charts.component.html
index 12e92e1..1189f85 100644
--- a/src/app/components/dashboard-charts/dashboard-charts.component.html
+++ b/src/app/components/dashboard-charts/dashboard-charts.component.html
@@ -1 +1,13 @@
-<ngx-skeleton-loader count="10" />
+<mat-tab-group>
+ <mat-tab label="Frames">
+ <app-dashboard-chart-frames />
+ </mat-tab>
+ <mat-tab label="Information Rate">
+ <app-dashboard-chart-information-rate />
+ </mat-tab>
+ @for (protocol of protocols(); track $index) {
+ <mat-tab [label]="protocol">
+ <app-dashboard-chart-protocol [protocol]="protocol" />
+ </mat-tab>
+ }
+</mat-tab-group>
diff --git a/src/app/components/dashboard-charts/dashboard-charts.component.ts b/src/app/components/dashboard-charts/dashboard-charts.component.ts
index ddf7cf2..c861ca5 100644
--- a/src/app/components/dashboard-charts/dashboard-charts.component.ts
+++ b/src/app/components/dashboard-charts/dashboard-charts.component.ts
@@ -1,10 +1,22 @@
-import { Component } from '@angular/core';
-import { NgxSkeletonLoaderComponent } from 'ngx-skeleton-loader';
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+import { MatTab, MatTabGroup } from '@angular/material/tabs';
+import { DashboardChartFramesComponent } from '../dashboard-chart-frames/dashboard-chart-frames.component';
+import { DashboardChartInformationRateComponent } from '../dashboard-chart-information-rate/dashboard-chart-information-rate.component';
+import { DashboardChartProtocolComponent } from '../dashboard-chart-protocol/dashboard-chart-protocol.component';
@Component({
selector: 'app-dashboard-charts',
- imports: [NgxSkeletonLoaderComponent],
+ imports: [
+ MatTabGroup,
+ MatTab,
+ DashboardChartFramesComponent,
+ DashboardChartInformationRateComponent,
+ DashboardChartProtocolComponent,
+ ],
templateUrl: './dashboard-charts.component.html',
styleUrl: './dashboard-charts.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class DashboardChartsComponent {}
+export class DashboardChartsComponent {
+ protocols = input.required<string[]>();
+}
diff --git a/src/app/components/dashboard-statistics/dashboard-statistics.component.ts b/src/app/components/dashboard-statistics/dashboard-statistics.component.ts
index 4f88f14..975f49c 100644
--- a/src/app/components/dashboard-statistics/dashboard-statistics.component.ts
+++ b/src/app/components/dashboard-statistics/dashboard-statistics.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgxSkeletonLoaderComponent } from 'ngx-skeleton-loader';
@Component({
@@ -6,5 +6,6 @@ import { NgxSkeletonLoaderComponent } from 'ngx-skeleton-loader';
imports: [NgxSkeletonLoaderComponent],
templateUrl: './dashboard-statistics.component.html',
styleUrl: './dashboard-statistics.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DashboardStatisticsComponent {}
diff --git a/src/app/components/dashboard/dashboard.component.html b/src/app/components/dashboard/dashboard.component.html
index c8259a3..c86a0de 100644
--- a/src/app/components/dashboard/dashboard.component.html
+++ b/src/app/components/dashboard/dashboard.component.html
@@ -22,7 +22,7 @@
Charts
</mat-panel-title>
</mat-expansion-panel-header>
- <app-dashboard-charts />
+ <app-dashboard-charts [protocols]="['ipv4']" />
</mat-expansion-panel>
</mat-accordion>
</app-page-wrapper>
diff --git a/src/app/components/dashboard/dashboard.component.ts b/src/app/components/dashboard/dashboard.component.ts
index ab1f72f..c9ea330 100644
--- a/src/app/components/dashboard/dashboard.component.ts
+++ b/src/app/components/dashboard/dashboard.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
import { PageWrapperComponent } from '../page-wrapper/page-wrapper.component';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatIcon } from '@angular/material/icon';
@@ -18,6 +18,7 @@ import { DashboardChartsComponent } from '../dashboard-charts/dashboard-charts.c
],
templateUrl: './dashboard.component.html',
styleUrl: './dashboard.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DashboardComponent {
openSettings() {}
diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts
index 267d2a7..f13bffa 100644
--- a/src/app/components/header/header.component.ts
+++ b/src/app/components/header/header.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
import { DividerModule } from 'primeng/divider';
import { MatDivider } from '@angular/material/divider';
import { MatIcon } from '@angular/material/icon';
@@ -9,5 +9,6 @@ import { MatButton } from '@angular/material/button';
imports: [DividerModule, MatDivider, MatIcon, MatButton],
templateUrl: './header.component.html',
styleUrl: './header.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HeaderComponent {}
diff --git a/src/app/components/not-found/not-found.component.ts b/src/app/components/not-found/not-found.component.ts
index 03ff4dc..a6ac140 100644
--- a/src/app/components/not-found/not-found.component.ts
+++ b/src/app/components/not-found/not-found.component.ts
@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
@Component({
selector: 'app-not-found',
imports: [],
templateUrl: './not-found.component.html',
styleUrl: './not-found.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class NotFoundComponent {}
diff --git a/src/app/components/page-wrapper/page-wrapper.component.ts b/src/app/components/page-wrapper/page-wrapper.component.ts
index 3046fbc..2531cf8 100644
--- a/src/app/components/page-wrapper/page-wrapper.component.ts
+++ b/src/app/components/page-wrapper/page-wrapper.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
import { MatDivider } from '@angular/material/divider';
@Component({
@@ -6,5 +6,6 @@ import { MatDivider } from '@angular/material/divider';
imports: [MatDivider],
templateUrl: './page-wrapper.component.html',
styleUrl: './page-wrapper.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PageWrapperComponent {}
diff --git a/src/app/components/pill/pill.component.ts b/src/app/components/pill/pill.component.ts
index f43c8ac..be975e0 100644
--- a/src/app/components/pill/pill.component.ts
+++ b/src/app/components/pill/pill.component.ts
@@ -1,4 +1,9 @@
-import { Component, input, output } from '@angular/core';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ input,
+ output,
+} from '@angular/core';
import { MatIcon } from '@angular/material/icon';
@Component({
@@ -6,6 +11,7 @@ import { MatIcon } from '@angular/material/icon';
imports: [MatIcon],
templateUrl: './pill.component.html',
styleUrl: './pill.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PillComponent {
removable = input<boolean | null>(null);
diff --git a/src/app/components/sidenav/sidenav.component.ts b/src/app/components/sidenav/sidenav.component.ts
index a630fe2..dc9691e 100644
--- a/src/app/components/sidenav/sidenav.component.ts
+++ b/src/app/components/sidenav/sidenav.component.ts
@@ -1,5 +1,6 @@
import {
afterNextRender,
+ ChangeDetectionStrategy,
Component,
inject,
signal,
@@ -24,6 +25,7 @@ import { MatIcon } from '@angular/material/icon';
],
templateUrl: './sidenav.component.html',
styleUrl: './sidenav.component.scss',
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SidenavComponent {
router = inject(Router);
diff --git a/src/app/interceptor/mocks/frames-current.json b/src/app/interceptor/mocks/frames-current.json
index f336aa5..1df35e6 100644
--- a/src/app/interceptor/mocks/frames-current.json
+++ b/src/app/interceptor/mocks/frames-current.json
@@ -1,4 +1,6 @@
{
- "valid": 2345,
- "invalid": 234
+ "data": {
+ "valid": 2345,
+ "invalid": 234
+ }
}
diff --git a/src/app/interceptor/mocks/frames-historical.json b/src/app/interceptor/mocks/frames-historical.json
index 134de06..1599d22 100644
--- a/src/app/interceptor/mocks/frames-historical.json
+++ b/src/app/interceptor/mocks/frames-historical.json
@@ -1,5 +1,5 @@
{
- "frames": [
+ "data": [
{
"valid": 1000,
"invalid": 15
diff --git a/src/app/interceptor/mocks/ipv4-current.json b/src/app/interceptor/mocks/ipv4-current.json
index 7b75083..789f453 100644
--- a/src/app/interceptor/mocks/ipv4-current.json
+++ b/src/app/interceptor/mocks/ipv4-current.json
@@ -1,4 +1,6 @@
{
- "bytes": 3000,
- "packets": 58
+ "data": {
+ "bytes": 3000,
+ "packets": 58
+ }
}
diff --git a/src/app/interceptor/mocks/ipv4-historical.json b/src/app/interceptor/mocks/ipv4-historical.json
index d57ce55..1c3fe57 100644
--- a/src/app/interceptor/mocks/ipv4-historical.json
+++ b/src/app/interceptor/mocks/ipv4-historical.json
@@ -1,5 +1,5 @@
{
- "statistics": [
+ "data": [
{
"bytes": 2048,
"packets": 24
diff --git a/src/app/interceptor/mocks/ir-current.json b/src/app/interceptor/mocks/ir-current.json
index 0aacc58..946c342 100644
--- a/src/app/interceptor/mocks/ir-current.json
+++ b/src/app/interceptor/mocks/ir-current.json
@@ -1,4 +1,6 @@
{
- "current": 123.45,
- "average": 123.4
+ "data": {
+ "current": 123.45,
+ "average": 123.4
+ }
}
diff --git a/src/app/interceptor/mocks/ir-historical.json b/src/app/interceptor/mocks/ir-historical.json
index 593d659..2663f3a 100644
--- a/src/app/interceptor/mocks/ir-historical.json
+++ b/src/app/interceptor/mocks/ir-historical.json
@@ -1,5 +1,5 @@
{
- "statistics": [
+ "data": [
{
"current": 123.45,
"average": 134.6
--
GitLab