Izmenjen izgled i dodate metrike za iscrtavanje grafika toka obuke.

1 files changed, 37 insertions, 9 deletions

diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
index 0924801e..414d6327 100644
--- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
@@ -13,22 +13,18 @@ export class LineChartComponent implements AfterViewInit {
   dataMAE: number[] = [];
   dataMSE: number[] = [];
   dataLOSS: number[] = [];
-
+  dataValAcc:number[]=[];
+  dataValMAE:number[]=[];
+  dataValMSE:number[]=[];
+  dataValLoss:number[]=[];
   dataEpoch: number[] = [];
 
   constructor() {
-    /*let i = 0;
-    setInterval(() => {
-      this.dataAcc.push(0.5);
-      this.dataEpoch.push(i);
-      i++;
-      this.update();
-    }, 200);*/
   }
 
   myChart!: Chart;
 
-  update(myEpochs: number[], myAcc: number[], myLoss: number[], myMae: number[], myMse: number[]) {
+  update(myEpochs: number[], myAcc: number[], myLoss: number[], myMae: number[], myMse: number[], myValAcc:number[],myValLoss:number[],myValMae:number[],myValMse:number[]) {
     this.dataAcc.length = 0;
     this.dataAcc.push(...myAcc);
 
@@ -42,6 +38,18 @@ export class LineChartComponent implements AfterViewInit {
     this.dataLOSS.push(...myLoss);
 
     this.dataMSE.length = 0;
+    this.dataMSE.push(...myValAcc);
+
+    this.dataMSE.length = 0;
+    this.dataMSE.push(...myValLoss);
+
+    this.dataMSE.length = 0;
+    this.dataMSE.push(...myValMae);
+
+    this.dataMSE.length = 0;
+    this.dataMSE.push(...myValMse);
+
+    this.dataMSE.length = 0;
     this.dataMSE.push(...myMse);
 
     this.myChart.update();
@@ -61,19 +69,39 @@ export class LineChartComponent implements AfterViewInit {
             
           },
           {
+            label: 'VAl_Accuracy',
+            data: this.dataMSE,
+            borderWidth: 1
+          },
+          {
             label: 'Loss',
             data: this.dataLOSS,
             borderWidth: 1
           },
           {
+            label: 'Val_Loss',
+            data: this.dataMSE,
+            borderWidth: 1
+          },
+          {
             label: 'MAE',
             data: this.dataMAE,
             borderWidth: 1
           },
           {
+            label: 'Val_MAE',
+            data: this.dataMSE,
+            borderWidth: 1
+          },
+          {
             label: 'MSE',
             data: this.dataMSE,
             borderWidth: 1
+          },
+          {
+            label: 'Val_MSE',
+            data: this.dataMSE,
+            borderWidth: 1
           }
           ]
         },