From ec6db17db91c496ba7c61e9123942114e78044a2 Mon Sep 17 00:00:00 2001
From: TAMARA JERINIC <tamara.jerinic@gmail.com>
Date: Sat, 30 Apr 2022 19:33:37 +0200
Subject: Dodati grafici u metric-view komponentu, prilagođena boja grafika,
 metric-view komponenta povezana sa navbar-om.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_charts/line-chart/line-chart.component.html   |  8 ++---
 .../_charts/line-chart/line-chart.component.ts     | 37 ++++++++++++++++------
 .../scatterchart/scatterchart.component.css        |  6 ++--
 .../scatterchart/scatterchart.component.html       |  6 ++--
 .../_charts/scatterchart/scatterchart.component.ts | 21 ++++++++++--
 .../metric-view/metric-view.component.css          | 10 ++++++
 .../metric-view/metric-view.component.html         |  9 ++++--
 .../_pages/experiment/experiment.component.html    | 13 ++++++--
 frontend/src/app/_pages/home/home.component.html   |  3 +-
 frontend/src/app/app.module.ts                     |  7 +++-
 10 files changed, 90 insertions(+), 30 deletions(-)

(limited to 'frontend/src')

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 c8f406f4..7f18256a 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,5 +1,3 @@
-<div class="chart-wrapper">
-    <canvas  id="myChart">
-        
-    </canvas>
-</div>
\ No newline at end of file
+
+    <canvas  id="myChart" style="width: 100%; height: 530px;">   
+    </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 49558025..34df38bc 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,4 +1,4 @@
-import { Component, AfterViewInit } from '@angular/core';
+import { Component, AfterViewInit, ViewChild } from '@angular/core';
 import { Chart } from 'chart.js';
 
 @Component({
@@ -9,12 +9,12 @@ import { Chart } from 'chart.js';
 
 export class LineChartComponent implements AfterViewInit {
 
-  dataAcc: number[] = [];
-  dataMAE: number[] = [];
-  dataMSE: number[] = [];
-  dataLOSS: number[] = [];
+  dataAcc: number[] = [2,3,5,5,6,7,8,8,4,6,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97];
+  dataMAE: number[] = [2,3,5,5,6,7,8,8,4,6,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97];
+  dataMSE: number[] = [2,3,5,5,6,7,8,8,4,6,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97];
+  dataLOSS: number[] =[2,3,5,5,6,7,8,8,4,6,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97];
 
-  dataEpoch: number[] = [];
+  dataEpoch: number[] = [2,3,5,5,6,7,8,8,4,6,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97];
 
   constructor() {
     /*let i = 0;
@@ -77,11 +77,28 @@ export class LineChartComponent implements AfterViewInit {
         },
         options: {
           scales: {
-            y: {
-              beginAtZero: true
-            }
+              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)"
+                  }
+              }
+              
           }
-        }
+          
+          
+      }
       }
     );
   }
diff --git a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css
index 5735217e..005cb692 100644
--- a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css
+++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css
@@ -1,6 +1,4 @@
 #divScatterChart{
-    background-color: beige;
-    display: block;
-    width: 400px;
-    height: 200px;   
+
+    display: block;   
 }
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html
index 2b30fe1f..ef41775a 100644
--- a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html
+++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html
@@ -1,4 +1,4 @@
-<p>Scatter chart:</p>
-<div id="divScatterChart">
-    <canvas id="ScatterCharts"> </canvas>
+
+<div id="divScatterChart" style="width: 100%;height: 100%;">
+    <canvas id="ScatterCharts" style="width: 100%;height: 280px;"> </canvas>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts
index 9dfef4c3..12795c70 100644
--- a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts
+++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts
@@ -24,15 +24,32 @@ export class ScatterchartComponent implements OnInit {
                 {x: 15, y: 5},
                 {x: 16, y: 3},
                 {x: 17, y: 2}],
-              backgroundColor: 'rgb(255, 99, 132)'
+                borderColor: 'white',
             }]
       },
       options: {
           scales: {
+              x:{
+                ticks: {
+                  color: 'white'
+                },
+                grid: {
+                  color: "rgba(0, 99, 171, 0.5)"
+                }
+              },
               y: {
-                  beginAtZero: true
+                  beginAtZero: true,
+                  ticks: {
+                    color: 'white'
+                  },
+                  grid: {
+                    color: "rgba(0, 99, 171, 0.5)"
+                  }
               }
+              
           }
+          
+          
       }
   });
   }
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 3a6cce8d..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,3 +1,8 @@
-<div>
-
+<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/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html
index 08d709b2..86faeb2a 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.html
+++ b/frontend/src/app/_pages/experiment/experiment.component.html
@@ -1,4 +1,4 @@
-<div class="container-fluid p-0 text-offwhite holder" style="height: calc(100vh - 64px);">
+<div class="container-fluid p-0 text-offwhite holder" style="height: calc(100vh - 64px); text-align: center;">
     <div class="d-flex flex-colum align-items-center sidenav">
         <mat-stepper orientation="vertical" (selectionChange)="changePage($event)">
             <mat-step>
@@ -18,6 +18,10 @@
                 <ng-template matStepLabel><span class="label">Treniranje</span></ng-template>
                 <p>Odaberite parametre i trenirajte model</p>
             </mat-step>
+            <mat-step>
+                <ng-template matStepLabel><span class="label">Pregled rezultata treniranja</span></ng-template>
+                <p>Pregledajte tok treniranja i grafički prikaz rezultata</p>
+            </mat-step>
         </mat-stepper>
     </div>
     <div #stepsContainer class="steps-container">
@@ -33,7 +37,12 @@
         </div>
         <div #steps id="step_3" class="step-content">
             <div class="step-content-inside">
-                <app-folder [type]="FolderType.Model" [tabsToShow]="[TabType.MyModels, TabType.PublicModels, TabType.File]" (okPressed)="goToPage(0)"></app-folder>
+                <app-folder [type]="FolderType.Model" (okPressed)="goToPage(3)"></app-folder>
+            </div>
+        </div>
+        <div #steps id="step_4" class="step-content">
+            <div class="step-content-inside" >
+                <app-metric-view></app-metric-view>
             </div>
         </div>
     </div>
diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html
index 508382da..2825b3bf 100644
--- a/frontend/src/app/_pages/home/home.component.html
+++ b/frontend/src/app/_pages/home/home.component.html
@@ -27,6 +27,7 @@
                 </p>
             </div>
         </div>
-    </div>
 
+
+    </div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index fc6d3c6b..5a763152 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -32,6 +32,7 @@ import { ScatterchartComponent } from './_elements/_charts/scatterchart/scatterc
 import { BarchartComponent } from './_elements/_charts/barchart/barchart.component';
 import { PieChartComponent } from './_elements/_charts/pie-chart/pie-chart.component';
 import { BoxPlotComponent } from './_elements/_charts/box-plot/box-plot.component';
+import {LineChartComponent} from './_elements/_charts/line-chart/line-chart.component';
 // Elements
 import { NavbarComponent } from './_elements/navbar/navbar.component';
 import { NotificationsComponent } from './_elements/notifications/notifications.component';
@@ -49,6 +50,7 @@ import { TestComponent } from './_pages/test/test.component';
 import { DoughnutChartComponent } from './_elements/_charts/doughnut-chart/doughnut-chart.component';
 import { HeatmapComponent } from './_elements/_charts/heatmap/heatmap.component';
 import { HeatMapAllModule } from '@syncfusion/ej2-angular-heatmap';
+import { MetricViewComponent } from './_elements/metric-view/metric-view.component';
 
 export function initializeApp(appConfig: Configuration) {
   return () => appConfig.load();
@@ -85,7 +87,10 @@ export function initializeApp(appConfig: Configuration) {
     MissingvaluesDialogComponent,
     TestComponent,
     DoughnutChartComponent,
-    HeatmapComponent
+    HeatmapComponent,
+    MetricViewComponent,
+    LineChartComponent
+    
   ],
   imports: [
     BrowserModule,
-- 
cgit v1.2.3