3 files changed, 23 insertions, 10 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 e69de29b..f91c1ccc 100644
--- a/frontend/src/app/_elements/metric-view/metric-view.component.css
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.css
@@ -0,0 +1,10 @@
+#container{
+    width: 100%;
+    height: 90%;
+    border-radius: 5px;
+    background-color:var(--ns-primary-25);
+    border:1px solid var(--ns-accent);
+}
+#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 e7a4c547..d72bc92b 100644
--- a/frontend/src/app/_elements/metric-view/metric-view.component.html
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.html
@@ -1,5 +1,8 @@
-<div>
-    <app-line-chart>
-
-    </app-line-chart>
+<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>
+    <div style="background-color: var(--ns-bg-dark-100);width: 50%;height: 50%;">
+        <app-scatterchart></app-scatterchart>
+    </div>
 </div>
 \ No newline at end of file
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 9193a0e5..6fd2f320 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,6 @@
 import { Component, Input, OnInit, ViewChild } from '@angular/core';
-import { SignalRService } from 'src/app/_services/signal-r.service';
-import { LineChartComponent } from '../line-chart/line-chart.component';
+import { LineChartComponent } from '../_charts/line-chart/line-chart.component';
+
 @Component({
   selector: 'app-metric-view',
   templateUrl: './metric-view.component.html',
@@ -9,13 +9,13 @@ import { LineChartComponent } from '../line-chart/line-chart.component';
 export class MetricViewComponent implements OnInit {
   @ViewChild(LineChartComponent) linechartComponent!: LineChartComponent;
 
-  @Input() history!: any[];
-
-  constructor(private signalRService: SignalRService) { }
+  constructor() { }
 
   ngOnInit(): void {
   }
 
+  history: any[] = [];
+
   update(history: any[]) {
     const myAcc: number[] = [];
     const myMae: number[] = [];
@@ -28,7 +28,7 @@ export class MetricViewComponent implements OnInit {
       myEpochs.push(epoch + 1);
       for (let key in metrics) {
         let value = metrics[key];
-        console.log(key, ':::', value, epoch);
+        //console.log(key, ':::', value, epoch);
         if (key === 'accuracy') {
           myAcc.push(parseFloat(value));
         }