#73 Graph MVP

angular-client/angular.json

@@ -20,15 +20,15 @@
             "tsConfig": "tsconfig.app.json",
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": ["@angular/material/prebuilt-themes/deeppurple-amber.css", "src/styles.css"],
-            "scripts": []
+            "scripts": ["node_modules/apexcharts/dist/apexcharts.min.js"]
           },
           "configurations": {
             "production": {
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumWarning": "2mb",
+                  "maximumError": "5mb"
                 },
                 {
                   "type": "anyComponentStyle",

angular-client/package.json

@@ -5,33 +5,37 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "start:production": "ng serve --configuration production",
+    "start:production": "ng serve --configuration production --host 0.0.0.0",
     "install-dependencies": "npm install",
     "watch": "ng build --watch --configuration development",
     "test": "ng test"
   },
   "private": true,
   "dependencies": {
+    "@angular-devkit/build-angular": "^16.2.4",
     "@angular/animations": "^16.2.0",
     "@angular/cdk": "^16.2.6",
+    "@angular/cli": "^16.2.4",
     "@angular/common": "^16.2.0",
     "@angular/compiler": "^16.2.0",
+    "@angular/compiler-cli": "^16.2.0",
     "@angular/core": "^16.2.0",
     "@angular/forms": "^16.2.0",
     "@angular/material": "^16.2.6",
     "@angular/platform-browser": "^16.2.0",
     "@angular/platform-browser-dynamic": "^16.2.0",
     "@angular/router": "^16.2.0",
-    "@angular-devkit/build-angular": "^16.2.4",
-    "@angular/cli": "^16.2.4",
-    "@angular/compiler-cli": "^16.2.0",
+    "apexcharts": "^3.44.0",
+    "ng-apexcharts": "^1.8.0",
+    "primeng": "^16.7.0",
     "rxjs": "~7.8.0",
     "socket.io-client": "^4.7.2",
     "tslib": "^2.3.0",
     "zone.js": "~0.13.0"
   },
   "devDependencies": {
     "@types/jasmine": "~4.3.0",
+    "@types/node": "^20.10.4",
     "jasmine-core": "~4.6.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",

angular-client/src/api/data.api.ts

@@ -0,0 +1,5 @@
+import { urls } from './urls';
+
+export const getDataByDataTypeName = async (dataTypeName: string) => {
+  return await fetch(urls.getDataByDataTypeName(dataTypeName));
+};

angular-client/src/api/node.api.ts

@@ -5,5 +5,5 @@ import { urls } from './urls';
  * @returns A promise containing the response from the server
  */
 export const getAllNodes = (): Promise<Response> => {
-  return fetch(urls.getAllNodes);
+  return fetch(urls.getAllNodes());
 };

angular-client/src/api/run.api.ts

@@ -0,0 +1,18 @@
+import { urls } from './urls';
+
+/**
+ * Fetches all runs from the server
+ * @returns A promise containing the response from the server
+ */
+export const getAllRuns = (): Promise<Response> => {
+  return fetch(urls.getAllRuns());
+};
+
+/**
+ * Fetches the run with the given id
+ * @param id The id of the run to request
+ * @returns The requested run
+ */
+export const getRunById = (id: number): Promise<Response> => {
+  return fetch(urls.getRunById(id));
+};

angular-client/src/api/urls.ts

@@ -1,12 +1,27 @@
-const baseURL = 'http://localhost:8000';
+import { environment } from 'src/environment/environment';
+
+const baseURL = environment.url;
 
 /* Nodes */
-const getAllNodes = `${baseURL}/nodes`;
+const getAllNodes = () => `${baseURL}/nodes`;
 
 /* Systems */
-const getAllSystems = `${baseURL}/systems`;
+const getAllSystems = () => `${baseURL}/systems`;
+
+/* Data */
+const getDataByDataTypeName = (dataTypeName: string) => `${baseURL}/data/${dataTypeName}`;
+
+/* Runs */
+const getRunById = (id: number) => `${baseURL}/runs/${id}`;
+const getAllRuns = () => `${baseURL}/runs`;
 
 export const urls = {
   getAllNodes,
-  getAllSystems
+
+  getAllSystems,
+
+  getDataByDataTypeName,
+
+  getAllRuns,
+  getRunById
 };

angular-client/src/app/app-routing.module.ts

@@ -1,7 +1,13 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import GraphPage from 'src/pages/graph-page/graph-page.component';
+import LandingPage from 'src/pages/landing-page/landing-page.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  { path: 'landing', component: LandingPage },
+  { path: 'graph/:realTime/:runId', component: GraphPage },
+  { path: '', redirectTo: '/landing', pathMatch: 'full' }
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],