From 6952e22d5cd8d747b258d5046007ebd4368a058d Mon Sep 17 00:00:00 2001
From: Artem Dychenko <s192441@student.pg.edu.pl>
Date: Mon, 24 Mar 2025 18:05:26 +0100
Subject: [PATCH] feat: make the charts responsive to the settings
---
.../dashboard-charts.component.html | 23 +++++++++++--------
.../dashboard-charts.component.ts | 9 ++++++++
2 files changed, 22 insertions(+), 10 deletions(-)
diff --git a/src/app/components/dashboard-charts/dashboard-charts.component.html b/src/app/components/dashboard-charts/dashboard-charts.component.html
index 6e8dd56..8360ae8 100644
--- a/src/app/components/dashboard-charts/dashboard-charts.component.html
+++ b/src/app/components/dashboard-charts/dashboard-charts.component.html
@@ -1,18 +1,21 @@
<mat-tab-group>
@if (settings?.showETH) {
- <mat-tab label="Frames">
- <app-dashboard-chart-frames />
- </mat-tab>
+ <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 [protocolName]="protocol" />
+ @if (settings?.showCurrentValue || settings?.showMaxValue || settings?.showMinValue) {
+ <mat-tab label="Information Rate">
+ <app-dashboard-chart-information-rate />
</mat-tab>
}
+ @for (protocol of protocols(); track $index) {
+ @if (showProtocolChart(protocol)) {
+ <mat-tab [label]="protocol">
+ <app-dashboard-chart-protocol [protocolName]="protocol" />
+ </mat-tab>
+ }
+ }
</mat-tab-group>
<!--@todo: find other way to fix scrolling to the top of the page-->
diff --git a/src/app/components/dashboard-charts/dashboard-charts.component.ts b/src/app/components/dashboard-charts/dashboard-charts.component.ts
index f2d0bbd..a332749 100644
--- a/src/app/components/dashboard-charts/dashboard-charts.component.ts
+++ b/src/app/components/dashboard-charts/dashboard-charts.component.ts
@@ -42,4 +42,13 @@ export class DashboardChartsComponent {
console.log('Settings received in charts:', this.settings);
});
}
+
+ showProtocolChart(protocolName: string): boolean {
+ const rows = this.settings;
+ return (
+ (rows?.showIPv4 && protocolName === 'ipv4') ||
+ (rows?.showIPv6 && protocolName === 'ipv6') ||
+ (rows?.showTCP && protocolName === 'tcp')
+ );
+ }
}
--
GitLab