Izmenjen izgled i dodate metrike za iscrtavanje grafika toka obuke.

3 files changed, 51 insertions, 18 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 a59dd081..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,19 +1,23 @@
-#container{
+.row{
+    margin: 0 !important;
+    padding: 0 !important;
+}
+.container{
     width: 100%;
     height: 90%;
     border-radius: 5px;
     border:1px solid var(--ns-primary);
-    display: table;
     background-color: rgba(0, 65, 101, 0.7);
     margin-top: 20px;
-}
-#left{
-    float: left;
-    width: 70% !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    width: 100%;
     height: 100%;
 }
-#right{
-    float: right;
-    width: 30%;
-    height: 50%;
+app-line-chart{
+    width: 100%;
+    height: 100%;
+    border-radius: 5px;
+    border:1px solid var(--ns-primary);
+    background-color: rgba(0, 65, 101, 0.7);
 }
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 b000c569..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">
-    <div id="left">
-        <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 id="right" >
-        <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