diff --git a/package-lock.json b/package-lock.json
index e00ab1ff2f806704e71a481d74e1ae4d11852c03..f9c86e9612a2cf9f6187de22f812bd8a9559b811 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 aa94cd0823438fb7def27972152e47ab9500b9ac..ea14e070392bddcc5d3e6f7470e0bd394e8c8e37 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 c6fe7e88f993baf6bd65ed6370cccb3482997987..900ccc1e9f18dfd378d2889fdecefbb780d291ef 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 cc2d400904cb38c0b53075e7e8d254c8c2b20f6b..3682c840dade7cc8ee306becf87517588f2854b3 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 0996c777d0ac25d824cd26344fc76e5d9722e5e8..456bd9d173b0ed7bbf1ec0ab51e608304e73f516 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 d6f45a2ae79cb75f4cc59ddaea46e445c3975ff5..413982568dd01316e80b76cfaf6bd0ba3d1d7782 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 5645562d5997cbc2a9bb49dd687dcdac4efc6ed2..58830a5b714c0d3dddbfbbf12d3b2585619eeabc 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 0000000000000000000000000000000000000000..3f4d4491b77eda55c96294f5e177a97c2067cadb
--- /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 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
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 0000000000000000000000000000000000000000..4bf877fd83491afd33a72133c1a2fc31f5736f01
--- /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 0000000000000000000000000000000000000000..4f2c3e0d21f1a14c3445a91f4f555a5956b16d23
--- /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 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
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 0000000000000000000000000000000000000000..2851ba1998d5105cbb6d706873ecb2ab18d3a3c5
--- /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 0000000000000000000000000000000000000000..d0159e3ed05bea3d3b25a39cd4510b5c559dab1a
--- /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 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
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 0000000000000000000000000000000000000000..e9586f87ef26cd65e640671baf43be3d7fc74da5
--- /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 12e92e1088a4c2ca23c5013fbb799f1c49dbcb2e..1189f85a6689bed2e13651aa3ffbaeec1a017747 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 ddf7cf2b24cee9bfe912857526c60b4b186232cd..c861ca5e5d331b5181726235d34ab680f0b427d3 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 4f88f14ff30722c0ebddbef6dfaf55272b6c5cb0..975f49c33dc444132cf28267b37526124407a9b7 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 c8259a3f08b0d4aa1a6e0eba7a4994163a389196..c86a0de5c150b18f00efc5b00547b72570324abb 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 ab1f72fa34deef45018254ed349cc92a37fd6520..c9ea330f3a33f59d37829b1e3c2c53d2924a7491 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 267d2a72b9dfd64e6f8a61655c60b26dba43e9cc..f13bffabcaa092ec892dd65647d7c5edd05c685c 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 03ff4dc556e1345c1ac569ff4882f5d64878dd8a..a6ac140ff58296a6711904b12b3d311edffa94ac 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 3046fbcd7f1447eb25d537a917fe158b4bcb8223..2531cf897809b6811bd5b7979443995ce8f27867 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 f43c8ace3b9566369df724bce387c1871662b6be..be975e081913cbd517819336ec51dee28a4fb867 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 a630fe2959e7f2106957b7664ff0dc3063d3151d..dc9691e497cfa41019a7a9e8e73d4208598c0ed8 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 f336aa52d1f157a2349895600d72b08ce14323bc..1df35e6c7b10e07e3568e4774defd33219831325 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 134de06dfff8014c4600ad318640a62d7a43bfb6..1599d221acb9309c9a8b90181e80d1464cd74e5f 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 7b7508358d6d826d08c1d7c1166c929dd474612e..789f453a211be42d1dc937d02a3f7fd8c2c3139e 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 d57ce55ace16b85eb4a8ec5a2657573260add097..1c3fe5775e9236f584493416b004898898f158e5 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 0aacc5849588ee1762066ce2e4769d1f30bcd1dd..946c342cb8000270b79a0b423ba2f40fa579671c 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 593d6598505cfcea54948d87f7293600c50dc028..2663f3aec160b96c9be42f318666e844002d69fa 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