New Features:

1. Graph Latency results by country
New Pages:
1. graph.page.html
2. graph-data-for.page.html
Bugs Corrected:

To Be Corrected:
0. On product delete, delete trace results
1. Show in the Graph Trace

src/app/app-routing.module.ts

@@ -69,7 +69,7 @@ const routes: Routes = [
   },
   {
     path: 'graph',
-    loadChildren: () => import('./pages/graph/graph.module').then( m => m.GraphPageModule),
+    loadChildren: () => import('./pages/graph/graph.module').then(m => m.GraphPageModule),
     ...canActivate(redirectUnauthorizedToLogin),
   },
   {
@@ -88,6 +88,10 @@ const routes: Routes = [
     path: 'show-map-trace',
     loadChildren: () => import('./pages/show-map-trace/show-map-trace.module').then( m => m.ShowMapTracePageModule)
   },
+  {
+    path: 'graph-data-for',
+    loadChildren: () => import('./pages/graph-data-for/graph-data-for.module').then( m => m.GraphDataForPageModule)
+  },
 ];
 
 @NgModule({

src/app/pages/graph-data-for/graph-data-for-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { GraphDataForPage } from './graph-data-for.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: GraphDataForPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class GraphDataForPageRoutingModule {}

src/app/pages/graph-data-for/graph-data-for.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { GraphDataForPageRoutingModule } from './graph-data-for-routing.module';
+
+import { GraphDataForPage } from './graph-data-for.page';
+import {ComponentsModule} from "../../components/components.module";
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        IonicModule,
+        GraphDataForPageRoutingModule,
+        ComponentsModule
+    ],
+  declarations: [GraphDataForPage]
+})
+export class GraphDataForPageModule {}

src/app/pages/graph-data-for/graph-data-for.page.html

@@ -0,0 +1,23 @@
+<app-header-return [title]="'Graph Data For'"></app-header-return>
+
+<ion-content [fullscreen]="true">
+  <ion-grid>
+    <app-title [title]="'Graph Data For'"></app-title>
+
+    <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">
+        <ion-card class="w-full h-60 p-6 flex flex-col justify-center items-center" (click)="goToLatencyGraph()">
+          <h1 class="text-6xl font-bold text-blue-500">Latency</h1>
+        </ion-card>
+      </ion-col>
+      <ion-col size="12" size-md="6" size-lg="6" class="flex flex-row justify-center">
+        <ion-card class="w-full h-60 p-6 flex flex-col justify-center items-center" (click)="goToTraceGraph()">
+          <h1 class="text-6xl font-bold text-blue-500">Trace</h1>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+
+
+
+</ion-content>

src/app/pages/graph-data-for/graph-data-for.page.spec.ts

@@ -0,0 +1,17 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { GraphDataForPage } from './graph-data-for.page';
+
+describe('GraphDataForPage', () => {
+  let component: GraphDataForPage;
+  let fixture: ComponentFixture<GraphDataForPage>;
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GraphDataForPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/pages/graph-data-for/graph-data-for.page.ts

@@ -0,0 +1,33 @@
+import { Component, OnInit } from '@angular/core';
+import {ActivatedRoute, Router} from "@angular/router";
+
+@Component({
+  selector: 'app-graph-data-for',
+  templateUrl: './graph-data-for.page.html',
+  styleUrls: ['./graph-data-for.page.scss'],
+})
+export class GraphDataForPage implements OnInit {
+  productObjective: string = '';
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router
+  ) { }
+
+  ngOnInit() {
+    // get parameters from the URL
+    this.route.queryParams.subscribe(params => {
+      this.productObjective = params['product'];
+    });
+  }
+
+  goToLatencyGraph() {
+    this.router.navigate(['/graph'], {queryParams: {product: this.productObjective}});
+
+  }
+
+  goToTraceGraph() {
+    this.router.navigate(['/graph'], {queryParams: {product: this.productObjective}});
+
+  }
+}

src/app/pages/graph/graph.page.html

@@ -4,11 +4,11 @@
   <ion-grid>
     <app-title [title]="'Graph'"></app-title>
     <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">
+      <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-blue-500">Graph</h1>
+          <h1 class="text-6xl font-bold text-blue-500">{{ country }}</h1>
           <br>
-            <div echarts [options]="options!" class="demo-chart  h-full w-full"></div>
+          <div echarts [options]="countryOptions[country]" class="demo-chart h-full w-full"></div>
         </ion-card>
       </ion-col>
     </ion-row>

src/app/pages/graph/graph.page.ts

@@ -1,10 +1,9 @@
 import { Component, OnInit } from '@angular/core';
 import type { EChartsOption } from 'echarts';
-import {RipeService} from "../../services/ripe.service";
-import {ActivatedRoute} from "@angular/router";
-import {User} from "../../interfaces/user";
-
-
+import { RipeService } from "../../services/ripe.service";
+import { ActivatedRoute } from "@angular/router";
+import { User } from "../../interfaces/user";
+import {options} from "ionicons/icons";
 
 @Component({
   selector: 'app-graph',
@@ -13,44 +12,50 @@ import {User} from "../../interfaces/user";
 })
 export class GraphPage implements OnInit {
 
-  options: EChartsOption|undefined;
-
-  orgName: string = 'DevProbe';
-  productObjective:string = 'Web';
-
-  user:User = {}
-
+  options: EChartsOption | undefined;
+  orgName: string = '';
+  productObjective: string = '';
+  user: User = {};
   data: any[] = [];
-
+  countries: string[] = [];
+  countryOptions: { [key: string]: EChartsOption } = {};
 
   constructor(
     private ripeService: RipeService,
     private route: ActivatedRoute
   ) {}
 
-
   async ionViewWillEnter() {
-    //get parameters from the URL
+
+    // get parameters from the URL
     this.route.queryParams.subscribe(params => {
       this.productObjective = params['product'];
     });
 
-    //get the user
+    // get the user
     const userString = localStorage.getItem('user');
     if (!userString) {
       return;
     }
     this.user = JSON.parse(userString);
     this.orgName = this.user.orgName!;
 
+    this.data = [];
 
+    this.getResultsHistoryforLatency().then(() => {
+      this.groupByDate().then(() => {
+        this.groupByCountry().then(() => {
+          this.populateCountries();
+          this.generateCountryOptions();
+        });
+      });
+    });
+  }
 
-
+  async getResultsHistoryforLatency() {
     await this.ripeService.getHistoryResults(this.orgName, this.productObjective).then(r => {
       for (let i = 0; i < r.length; i++) {
-
-
-        //split the id
+        // split the id
         let id = r[i].id.split('-');
         let idString = id[1];
 
@@ -61,7 +66,6 @@ export class GraphPage implements OnInit {
 
         let time = id[5];
 
-
         // @ts-ignore
         let historyData = r[i]['data']['data'];
 
@@ -70,51 +74,102 @@ export class GraphPage implements OnInit {
           data: historyData,
           date: date,
           time: time,
-        }
-
+        };
         this.data.push(toSave);
+      }
+    });
+  }
 
+  async groupByDate() {
+    // create a dictionary to group the data by date
+    let groupedData: any = {};
+    for (let i = 0; i < this.data.length; i++) {
+      let date = this.data[i].date;
+      if (!groupedData[date]) {
+        groupedData[date] = [];
       }
-    }).then(() => {
-      const xAxisData = [];
-      const data1: number[] = [];
-      for (let i = 0; i < this.data.length; i++) {
+      groupedData[date].push(...this.data[i]['data']);
+    }
+    this.data = groupedData;
+    console.log(this.data);
+  }
+
+  async groupByCountry() {
+    let groupedData: any = {};
+    for (let date in this.data) {
+      let data = this.data[date];
+      if (!groupedData[date]) {
+        groupedData[date] = {};
+      }
+      for (let i = 0; i < data.length; i++) {
+        let country = data[i].countryFrom;
+        if (!groupedData[date][country]) {
+          groupedData[date][country] = [];
+        }
+        groupedData[date][country].push(data[i]);
+      }
+    }
+    this.data = groupedData;
+    console.log(this.data);
+  }
 
+  async populateCountries() {
+    const countriesSet = new Set<string>();
+    for (let date in this.data) {
+      for (let country in this.data[date]) {
+        countriesSet.add(country);
+      }
+    }
+    this.countries = Array.from(countriesSet);
+    console.log(this.countries);
+  }
 
-        xAxisData.push(this.data[i].date);
-        for (let j = 0; j < this.data[i].data.length; j++) {
-          data1.push(this.data[i].data[j].latency);
+  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
         }
+      }
 
-        this.options = {
-          legend: {
-            data: ['bar', 'bar2'],
-            align: 'left',
+      this.countryOptions[country] = {
+        legend: {
+          data: [country],
+          align: 'left',
+        },
+        tooltip: {},
+        xAxis: {
+          data: xAxisData,
+          silent: false,
+          splitLine: {
+            show: false,
           },
-          tooltip: {},
-          xAxis: {
-            data: xAxisData,
-            silent: false,
-            splitLine: {
-              show: false,
-            },
+        },
+        yAxis: {},
+        series: [
+          {
+            name: country,
+            type: 'bar',
+            data: data1,
+            animationDelay: i => i * 10,
           },
-          yAxis: {},
-          series: [
-            {
-              name: 'bar',
-              type: 'bar',
-              data: data1,
-              animationDelay: i => i * 10,
-            },
-          ],
-          animationEasing: 'elasticOut',
-          animationDelayUpdate: i => i * 5,
-        };
-      }
-    });
+        ],
+        animationEasing: 'elasticOut',
+        animationDelayUpdate: i => i * 5,
+      };
+    }
   }
 
-  async ngOnInit(): Promise<void>{
-  }
+  ngOnInit(): void {}
 }

src/app/pages/home/home.page.ts

@@ -79,6 +79,6 @@ export class HomePage {
 
 
   goToProduct(productObjective: string | undefined) {
-    this.router.navigate(['/graph'], {queryParams: {product: productObjective}});
+    this.router.navigate(['/graph-data-for'], {queryParams: {product: productObjective}});
   }
 }