Ispravljen raspored prikaza metrika, svaka vrednost i odgovarajuća vrednost na validacionom skupu se prikazuju na pojedinačnom grafiku. Metrike su filtrirane u zavisnosti od tipa problema.

3 files changed, 266 insertions, 21 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 2eea561e..ea150b0f 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
@@ -1,11 +1,17 @@
 canvas{
 
     width:100% !important;
-    height:90% !important;
+    height:100% !important;
     border: 1px solid var(--ns-primary);
     background-color: var(--ns-bg-dark-100);
     border-radius: 5px;
-    margin: 10px;
+    margin: 0;
     font-size: 11 !important;
+    padding: 10px;
   }
- 
\ No newline at end of file
+.ns-col{
+  margin: 5px;
+}
+.hide{
+  display: none;
+}
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 1c711562..e36d0dcf 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,4 +1,24 @@
-<div #wrapper class="position-relative" style="width:100%;height:95%;">
-    <canvas id="myChart" #canvas>   
-    </canvas>
+<div #wrapper class="position-relative " style="width:100%;height:95%;">
+    <div class="ns-row" [ngClass]="{'hide':experiment.type != ProblemType.Regression}">
+        <div class="ns-col" >
+            <canvas id="myChartmae" #canvasmae>   
+            </canvas>
+        </div>
+        <div class="ns-col">
+            <canvas id="myChartmse" #canvasmse>   
+            </canvas>
+        </div>
+    </div>
+    <div class="ns-row"  [ngClass]="{'hide':experiment.type == ProblemType.Regression}">
+        <div class="ns-col" >
+            <canvas id="myChartloss" #canvasloss>   
+            </canvas>
+        </div>
+        <div class="ns-col" >
+            <canvas id="myChartacc" #canvasacc>   
+            </canvas>
+        </div>
+
+    </div>
+    
 </div>
\ 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 7d21129c..acba7201 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
@@ -1,5 +1,7 @@
-import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';
+import { Component, AfterViewInit, ElementRef, ViewChild, Input } from '@angular/core';
 import { Chart } from 'chart.js';
+import Experiment from 'src/app/_data/Experiment';
+import Model, { ProblemType } from 'src/app/_data/Model';
 
 @Component({
   selector: 'app-line-chart',
@@ -23,14 +25,18 @@ export class LineChartComponent implements AfterViewInit {
   wrapper!: ElementRef;
   @ViewChild('canvas')
   canvas!: ElementRef;
-
+  @Input() experiment!:Experiment;
   constructor() {
     
   }
   width = 700;
   height = 400;
-  
-  myChart!: Chart;
+  history: any[] = [];
+  myChartAcc!: Chart;
+  myChartMae!: Chart;
+  myChartMse!: Chart;
+  myChartLoss!: Chart;
+  ProblemType=ProblemType;
   resize() {
     this.width = this.wrapper.nativeElement.offsetWidth;
     this.height = this.wrapper.nativeElement.offsetHeight;
@@ -69,14 +75,69 @@ export class LineChartComponent implements AfterViewInit {
     this.dataValMSE.length = 0;
     this.dataValMSE.push(...myValMse);
 
-    this.myChart.update();
+    this.myChartAcc.update();
+    this.myChartLoss.update();
+    this.myChartMae.update();
+    this.myChartMse.update();
   }
+  updateAll(history: any[],totalEpochs:number) {
+    const myAcc: number[] = [];
+    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;
+    this.history.forEach((metrics, epoch) => {
+      if(totalEpochs>100)
+      {
+        let epochEstimate=epoch*Math.round(Math.sqrt(totalEpochs))
+        if(epochEstimate>totalEpochs)
+          epochEstimate=totalEpochs;
+        myEpochs.push(epochEstimate);
+      }
+      else
+        myEpochs.push(epoch + 1);
+      for (let key in metrics) {
+        let value = metrics[key];
+        if (key === 'accuracy') {
+          myAcc.push(parseFloat(value));
+        }
+        else if (key === 'loss') {
+          myLoss.push(parseFloat(value));
+        }
+        else if (key === 'mae') {
+          myMae.push(parseFloat(value));
+        }
+        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.update(myEpochs, myAcc, myLoss, myMae, myMse, myValAcc,myValLoss,myValMAE,myValMSE);
+  }
   ngAfterViewInit(): void {
     
     window.addEventListener('resize', () => { this.resize() });
     this.resize();
-    this.myChart = new Chart("myChart",
+    this.myChartAcc = new Chart("myChartacc",
       {
         type: 'line',
         data: {
@@ -92,7 +153,59 @@ export class LineChartComponent implements AfterViewInit {
             label: 'Val_Accuracy',
             data: this.dataValAcc,
             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: {
+                color: 'white'
+              },
+              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
+          }
+
+        }
+      },
+      
+    );
+    this.myChartLoss = new Chart("myChartloss",
+      {
+        type: 'line',
+        data: {
+          labels: this.dataEpoch,
+          datasets: [
           {
             label: 'Loss',
             data: this.dataLOSS,
@@ -103,16 +216,58 @@ export class LineChartComponent implements AfterViewInit {
             data: this.dataValLoss,
             borderWidth: 1
           },
-          {
-            label: 'MAE',
-            data: this.dataMAE,
-            borderWidth: 1
+          ]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: true,
+
+          plugins: {
+            legend: {
+                labels: {
+                    // This more specific font property overrides the global property
+                    color:'white',
+                    font: {
+                      size: 10
+                  }
+                }
+            }
           },
-          {
-            label: 'Val_MAE',
-            data: this.dataValMAE,
-            borderWidth: 1
+          scales: {
+            x: {
+              ticks: {
+                color: 'white'
+              },
+              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
+          }
+
+        }
+      },
+      
+    );
+    this.myChartMse = new Chart("myChartmse",
+      {
+        type: 'line',
+        data: {
+          labels: this.dataEpoch,
+          datasets: [
           {
             label: 'MSE',
             data: this.dataMSE,
@@ -166,8 +321,72 @@ export class LineChartComponent implements AfterViewInit {
           }
 
         }
-      }
+      },
+      
     );
+    this.myChartMae = new Chart("myChartmae",
+      {
+        type: 'line',
+        data: {
+          labels: this.dataEpoch,
+          datasets: [
+          {
+            label: 'MAE',
+            data: this.dataMAE,
+            borderWidth: 1
+          },
+          {
+            label: 'Val_MAE',
+            data: this.dataValMAE,
+            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: {
+                color: 'white'
+              },
+              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
+          }
+
+        }
+      },
+      
+    );
+    
   }
 }