New Features:

1. Graph Traceroute results by country 2. Reload button 3. Color the graphs New Pages: 1. graph-latency.page.html 2. graph-trace.page.html Bugs Corrected: To Be Corrected: 0. On product delete, delete trace results
juanfranciscocis · Jul 9, 2024 · 7f33099 · 7f33099
1 parent d010dd2
commit 7f33099
Show file tree

Hide file tree

Showing 25 changed files with 398 additions and 68 deletions.
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -68,8 +68,8 @@ const routes: Routes = [
     ...canActivate(redirectUnauthorizedToLogin),
   },
   {
-    path: 'graph',
-    loadChildren: () => import('./pages/graph/graph.module').then(m => m.GraphPageModule),
+    path: 'graph-latency',
+    loadChildren: () => import('./pages/graph-latency/graph-latency.module').then(m => m.GraphPageModule),
     ...canActivate(redirectUnauthorizedToLogin),
   },
   {
@@ -92,6 +92,10 @@ const routes: Routes = [
     path: 'graph-data-for',
     loadChildren: () => import('./pages/graph-data-for/graph-data-for.module').then( m => m.GraphDataForPageModule)
   },
+  {
+    path: 'graph-trace',
+    loadChildren: () => import('./pages/graph-trace/graph-trace.module').then( m => m.GraphTracePageModule)
+  },
 ];
 
 @NgModule({

diff --git a/src/app/pages/graph-data-for/graph-data-for.page.ts b/src/app/pages/graph-data-for/graph-data-for.page.ts
@@ -22,12 +22,12 @@ export class GraphDataForPage implements OnInit {
   }
 
   goToLatencyGraph() {
-    this.router.navigate(['/graph'], {queryParams: {product: this.productObjective}});
+    this.router.navigate(['/graph-latency'], {queryParams: {product: this.productObjective}});
 
   }
 
   goToTraceGraph() {
-    this.router.navigate(['/graph'], {queryParams: {product: this.productObjective}});
+    this.router.navigate(['/graph-trace'], {queryParams: {product: this.productObjective}});
 
   }
 }
diff --git a/src/app/pages/graph/graph-routing.module.ts → ...h-latency/graph-latency-routing.module.ts b/src/app/pages/graph/graph-routing.module.ts → ...h-latency/graph-latency-routing.module.ts
@@ -1,12 +1,12 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-import { GraphPage } from './graph.page';
+import { GraphLatencyPage } from './graph-latency.page';
 
 const routes: Routes = [
   {
     path: '',
-    component: GraphPage
+    component: GraphLatencyPage
   }
 ];
 

diff --git a/src/app/pages/graph/graph.module.ts → ...ges/graph-latency/graph-latency.module.ts b/src/app/pages/graph/graph.module.ts → ...ges/graph-latency/graph-latency.module.ts
@@ -4,9 +4,9 @@ import { FormsModule } from '@angular/forms';
 
 import { IonicModule } from '@ionic/angular';
 
-import { GraphPageRoutingModule } from './graph-routing.module';
+import { GraphPageRoutingModule } from './graph-latency-routing.module';
 
-import { GraphPage } from './graph.page';
+import { GraphLatencyPage } from './graph-latency.page';
 import {NgxEchartsDirective} from "ngx-echarts";
 import {ComponentsModule} from "../../components/components.module";
 
@@ -19,6 +19,6 @@ import {ComponentsModule} from "../../components/components.module";
     NgxEchartsDirective,
     ComponentsModule
   ],
-  declarations: [GraphPage]
+  declarations: [GraphLatencyPage]
 })
 export class GraphPageModule {}
diff --git a/src/app/pages/graph-latency/graph-latency.page.html b/src/app/pages/graph-latency/graph-latency.page.html
@@ -0,0 +1,23 @@
+<app-header-return [title]="'Latency Graph'"></app-header-return>
+
+<ion-content [fullscreen]="true">
+  <ion-grid>
+    <ion-row class="lg:m-10">
+      <ion-col size="6" size-md="6" size-lg="6">
+        <h1 class="text-4xl lg:text-6xl font-bold">Latency Graph</h1>
+      </ion-col>
+      <ion-col size="6" size-md="6" size-lg="6" class="text-right">
+        <ion-icon name="refresh" (click)="refresh()" class="text-4xl lg:text-6xl font-bold onreloadhover "></ion-icon>
+      </ion-col>
+    </ion-row>
+    <ion-row class="lg:m-10 md:m-10">
+      <ion-col size="12" size-md="6" size-lg="6" class="flex flex-row justify-center" *ngFor="let country of countries">
+        <ion-card class="w-full h-96 p-6 flex flex-col justify-center items-center">
+          <h1 class="text-6xl font-bold text-white">{{ country }}</h1>
+          <br>
+          <div echarts [options]="countryOptions[country]" class="demo-chart h-full w-full"></div>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</ion-content>
diff --git a/src/app/pages/graph-latency/graph-latency.page.scss b/src/app/pages/graph-latency/graph-latency.page.scss
@@ -0,0 +1,12 @@
+@keyframes rotate90deg {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.onreloadhover:hover {
+  animation: rotate90deg 900ms linear infinite;
+}
diff --git a/src/app/pages/graph/graph.page.ts → ...pages/graph-latency/graph-latency.page.ts b/src/app/pages/graph/graph.page.ts → ...pages/graph-latency/graph-latency.page.ts
@@ -3,14 +3,15 @@ import type { EChartsOption } from 'echarts';
 import { RipeService } from "../../services/ripe.service";
 import { ActivatedRoute } from "@angular/router";
 import { User } from "../../interfaces/user";
-import {options} from "ionicons/icons";
+import {Browser} from "leaflet";
+import win = Browser.win;
 
 @Component({
   selector: 'app-graph',
-  templateUrl: './graph.page.html',
-  styleUrls: ['./graph.page.scss'],
+  templateUrl: './graph-latency.page.html',
+  styleUrls: ['./graph-latency.page.scss'],
 })
-export class GraphPage implements OnInit {
+export class GraphLatencyPage implements OnInit {
 
   options: EChartsOption | undefined;
   orgName: string = '';
@@ -124,52 +125,71 @@ export class GraphPage implements OnInit {
     console.log(this.countries);
   }
 
+  generateRandomColor(): string {
+    const letters = '0123456789ABCDEF';
+    let color = '#';
+    for (let i = 0; i < 6; i++) {
+      color += letters[Math.floor(Math.random() * 16)];
+    }
+    return color;
+  }
+
   generateCountryOptions() {
     for (let country of this.countries) {
       const xAxisData = [];
       const data1: number[] = [];
       for (let date in this.data) {
-        xAxisData.push(date);
         let sum = 0;
         let count = 0;
         if (this.data[date][country]) {
           for (let i = 0; i < this.data[date][country].length; i++) {
             sum += this.data[date][country][i].latency;
             count++;
           }
-          data1.push(sum / count);
-        } else {
-          data1.push(0);  // Or handle no data case as needed
+          if (count > 0) {
+            xAxisData.push(date);
+            data1.push(sum / count);
+          }
         }
       }
 
-      this.countryOptions[country] = {
-        legend: {
-          data: [country],
-          align: 'left',
-        },
-        tooltip: {},
-        xAxis: {
-          data: xAxisData,
-          silent: false,
-          splitLine: {
-            show: false,
+      if (data1.length > 0) {  // Only create options if there is data
+        this.countryOptions[country] = {
+          legend: {
+            data: [country],
+            align: 'left',
+            backgroundColor: 'rgba(255, 255, 255, 0.9)',
           },
-        },
-        yAxis: {},
-        series: [
-          {
-            name: country,
-            type: 'bar',
-            data: data1,
-            animationDelay: i => i * 10,
+          tooltip: {},
+          xAxis: {
+            data: xAxisData,
+            silent: false,
+            splitLine: {
+              show: false,
+            },
           },
-        ],
-        animationEasing: 'elasticOut',
-        animationDelayUpdate: i => i * 5,
-      };
+          yAxis: {},
+          series: [
+            {
+              name: country,
+              type: 'bar',
+              data: data1,
+              itemStyle: {
+                color: this.generateRandomColor()
+              },
+              animationDelay: i => i * 10,
+            },
+          ],
+          animationEasing: 'elasticOut',
+          animationDelayUpdate: i => i * 5,
+        };
+      }
     }
   }
 
+  refresh() {
+    window.location.reload();
+  }
+
   ngOnInit(): void {}
 }
diff --git a/src/app/pages/graph-trace/graph-trace-routing.module.ts b/src/app/pages/graph-trace/graph-trace-routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { GraphTracePage } from './graph-trace.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: GraphTracePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class GraphTracePageRoutingModule {}
diff --git a/src/app/pages/graph-trace/graph-trace.module.ts b/src/app/pages/graph-trace/graph-trace.module.ts
@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { GraphTracePageRoutingModule } from './graph-trace-routing.module';
+
+import { GraphTracePage } from './graph-trace.page';
+import {ComponentsModule} from "../../components/components.module";
+import {NgxEchartsDirective} from "ngx-echarts";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    GraphTracePageRoutingModule,
+    ComponentsModule,
+    NgxEchartsDirective
+  ],
+  declarations: [GraphTracePage]
+})
+export class GraphTracePageModule {}
diff --git a/src/app/pages/graph-trace/graph-trace.page.html b/src/app/pages/graph-trace/graph-trace.page.html
@@ -0,0 +1,25 @@
+<app-header-return [title]="'Traceroute Graph'"></app-header-return>
+
+<ion-content [fullscreen]="true">
+  <ion-grid>
+    <ion-row class="lg:m-10">
+      <ion-col size="6" size-md="6" size-lg="6">
+        <h1 class="text-4xl lg:text-6xl font-bold">Traceroute Graph</h1>
+      </ion-col>
+      <ion-col size="6" size-md="6" size-lg="6" class="text-right">
+        <ion-icon name="refresh" (click)="refresh()" class="text-4xl lg:text-6xl font-bold onreloadhover "></ion-icon>
+      </ion-col>
+    </ion-row>
+    <ion-row class="lg:m-10 md:m-10">
+      <ion-col size="12" size-md="6" size-lg="6" class="flex flex-row justify-center" *ngFor="let country of countries">
+        <ion-card class="w-full h-96 p-6 flex flex-col justify-center items-center">
+          <ion-card-title class="">
+          <h1 class="text-6xl font-bold text-white">{{ country }}</h1>
+          </ion-card-title>
+          <br>
+          <div echarts [options]="countryOptions[country]" class="demo-chart h-full w-full min-w-full"></div>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</ion-content>
diff --git a/src/app/pages/graph-trace/graph-trace.page.scss b/src/app/pages/graph-trace/graph-trace.page.scss
@@ -0,0 +1,12 @@
+@keyframes rotate90deg {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.onreloadhover:hover {
+  animation: rotate90deg 900ms linear infinite;
+}
diff --git a/src/app/pages/graph/graph.page.spec.ts → ...ages/graph-trace/graph-trace.page.spec.ts b/src/app/pages/graph/graph.page.spec.ts → ...ages/graph-trace/graph-trace.page.spec.ts
@@ -1,12 +1,12 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { GraphPage } from './graph.page';
+import { GraphTracePage } from './graph-trace.page';
 
-describe('GraphPage', () => {
-  let component: GraphPage;
-  let fixture: ComponentFixture<GraphPage>;
+describe('GraphTracePage', () => {
+  let component: GraphTracePage;
+  let fixture: ComponentFixture<GraphTracePage>;
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(GraphPage);
+    fixture = TestBed.createComponent(GraphTracePage);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });