3 files changed, 70 insertions, 13 deletions

diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css
index e69de29b..a190693a 100644
--- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css
@@ -0,0 +1,9 @@
+canvas{
+
+    width:100% !important;
+    height:90% !important;
+    border: 1px solid var(--ns-primary);
+    background-color: var(--ns-bg-dark-100);
+    border-radius: 5px;
+    margin: 10px;
+  }
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
index 7f18256a..5bb7aae6 100644
--- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
@@ -1,3 +1,4 @@
 
-    <canvas  id="myChart" style="width: 100%; height: 530px;">   
-    </canvas>
\ No newline at end of file
+    <canvas  id="myChart" >   
+    </canvas>
+    
\ No newline at end of file
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 655db9ec..e873618c 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();
@@ -54,8 +62,15 @@ export class LineChartComponent implements AfterViewInit {
         data: {
           labels: this.dataEpoch,
           datasets: [{
+
             label: 'Accuracy',
             data: this.dataAcc,
+            borderWidth: 1,
+            
+          },
+          {
+            label: 'VAl_Accuracy',
+            data: this.dataMSE,
             borderWidth: 1
           },
           {
@@ -64,18 +79,47 @@ export class LineChartComponent implements AfterViewInit {
             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
           }
           ]
         },
         options: {
+          responsive: true,
+          maintainAspectRatio: true,
+
+          plugins: {
+            legend: {
+                labels: {
+                    // This more specific font property overrides the global property
+                    color:'white',
+                    font: {
+                      size: 10
+                  }
+                }
+            }
+          },
           scales: {
             x: {
               ticks: {
@@ -83,21 +127,24 @@ export class LineChartComponent implements AfterViewInit {
               },
               grid: {
                 color: "rgba(0, 99, 171, 0.5)"
-              }
+              },
             },
             y: {
               beginAtZero: true,
               ticks: {
                 color: 'white'
+              
               },
               grid: {
                 color: "rgba(0, 99, 171, 0.5)"
               }
             }
 
+          },
+          animation: {
+            duration: 0
           }
 
-
         }
       }
     );