3 files changed, 56 insertions, 14 deletions
diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.css b/frontend/src/app/_elements/metric-view/metric-view.component.css
index f91c1ccc..d27418c3 100644
--- a/frontend/src/app/_elements/metric-view/metric-view.component.css
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.css
@@ -1,10 +1,23 @@
-#container{
+.row{
+    margin: 0 !important;
+    padding: 0 !important;
+}
+.container{
     width: 100%;
     height: 90%;
     border-radius: 5px;
-    background-color:var(--ns-primary-25);
-    border:1px solid var(--ns-accent);
+    border:1px solid var(--ns-primary);
+    background-color: rgba(0, 65, 101, 0.7);
+    margin-top: 20px;
+    margin: 0 !important;
+    padding: 0 !important;
+    width: 100%;
+    height: 100%;
+}
+app-line-chart{
+    width: 100%;
+    height: 100%;
+    border-radius: 5px;
+    border:1px solid var(--ns-primary);
+    background-color: rgba(0, 65, 101, 0.7);
 }
-#line{
-    background-color:#dfd7d7f0 ;
-}
-\ No newline at end of file
diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.html b/frontend/src/app/_elements/metric-view/metric-view.component.html
index d72bc92b..2ab0a425 100644
--- a/frontend/src/app/_elements/metric-view/metric-view.component.html
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.html
@@ -1,8 +1,21 @@
-<div id="container" class="d-flex justify-content-center flex-row w-100">
-    <div id="line" style="width: 100%;height: 100%;background-color:var(--ns-bg-dark-100);">
-        <app-line-chart></app-line-chart>
+  <!--<div class="container" style="margin:auto;">
+    <div class="row">
+      <div class="col-xl">
+          <div class="demo-content"><app-line-chart-acc [dataAcc]="myAcc" [dataEpoch]=""[dataValAcc]=""></app-line-chart-acc></div>
+      </div>
+      <div class="col-xl">
+          <div class="demo-content"><app-line-chart-loss></app-line-chart-loss></div>
+      </div>
+  </div>
+  <div class="row">
+    <div class="col-xl">
+        <div class="demo-content"><app-line-chart-mae></app-line-chart-mae></div>
     </div>
-    <div style="background-color: var(--ns-bg-dark-100);width: 50%;height: 50%;">
-        <app-scatterchart></app-scatterchart>
+    <div class="col-xl">
+        <div class="demo-content"><app-line-chart-mse></app-line-chart-mse></div>
     </div>
-</div>
-\ No newline at end of file
+</div>
+</div>-->
+<app-line-chart></app-line-chart>
+  
+
diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.ts b/frontend/src/app/_elements/metric-view/metric-view.component.ts
index 6fd2f320..fbca2edf 100644
--- a/frontend/src/app/_elements/metric-view/metric-view.component.ts
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.ts
@@ -1,6 +1,5 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { LineChartComponent } from '../_charts/line-chart/line-chart.component';
-
 @Component({
   selector: 'app-metric-view',
   templateUrl: './metric-view.component.html',
@@ -9,6 +8,7 @@ import { LineChartComponent } from '../_charts/line-chart/line-chart.component';
 export class MetricViewComponent implements OnInit {
   @ViewChild(LineChartComponent) linechartComponent!: LineChartComponent;
 
+
   constructor() { }
 
   ngOnInit(): void {
@@ -21,6 +21,10 @@ export class MetricViewComponent implements OnInit {
     const myMae: number[] = [];
     const myMse: number[] = [];
     const myLoss: number[] = [];
+    const myValLoss: number[] = [];
+    const myValAcc: number[] = [];
+    const myValMAE: number[] = [];
+    const myValMSE: number[] = [];
 
     const myEpochs: number[] = [];
     this.history = history;
@@ -41,9 +45,21 @@ export class MetricViewComponent implements OnInit {
         else if (key === 'mse') {
           myMse.push(parseFloat(value));
         }
+        else if (key === 'val_acc') {
+          myValAcc.push(parseFloat(value));
+        }
+        else if (key === 'val_loss') {
+          myValLoss.push(parseFloat(value));
+        }
+        else if (key === 'val_mae') {
+          myValMAE.push(parseFloat(value));
+        }
+        else if (key === 'val_mse') {
+          myValMSE.push(parseFloat(value));
+        }
       }
     });
 
-    this.linechartComponent.update(myEpochs, myAcc, myLoss, myMae, myMse);
+    this.linechartComponent.update(myEpochs, myAcc, myLoss, myMae, myMse, myValAcc,myValLoss,myValMAE,myValMSE);
   }
 }
 \ No newline at end of file