From cccd25d73f4b67db8c0db940d57eb5902544db24 Mon Sep 17 00:00:00 2001
From: TAMARA JERINIC <tamara.jerinic@gmail.com>
Date: Tue, 10 May 2022 00:45:40 +0200
Subject: Izmenjeni grafici za pregled rezultata treniranja i omogućeno
 vraćanje metrika backend-u.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_charts/line-chart/line-chart.component.css     |  9 +++++++++
 .../_charts/line-chart/line-chart.component.html    |  2 +-
 .../_charts/line-chart/line-chart.component.ts      | 21 +++++++++++++++++++--
 .../_charts/scatterchart/scatterchart.component.css | 12 ++++++++----
 .../scatterchart/scatterchart.component.html        |  4 +---
 .../_elements/metric-view/metric-view.component.css | 19 ++++++++++++++-----
 .../metric-view/metric-view.component.html          |  6 +++---
 7 files changed, 55 insertions(+), 18 deletions(-)

(limited to 'frontend/src/app')

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..124b39e8 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:95% !important;
+    height:95% !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..6ffddd1f 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,3 @@
 
-    <canvas  id="myChart" style="width: 100%; height: 530px;">   
+    <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..9ead9232 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
@@ -54,9 +54,11 @@ export class LineChartComponent implements AfterViewInit {
         data: {
           labels: this.dataEpoch,
           datasets: [{
+
             label: 'Accuracy',
             data: this.dataAcc,
-            borderWidth: 1
+            borderWidth: 1,
+            
           },
           {
             label: 'Loss',
@@ -76,6 +78,20 @@ export class LineChartComponent implements AfterViewInit {
           ]
         },
         options: {
+          responsive: true,
+          maintainAspectRatio: true,
+
+          plugins: {
+            legend: {
+                labels: {
+                    // This more specific font property overrides the global property
+                    color:'white',
+                    font: {
+                      size: 11
+                  }
+                }
+            }
+          },
           scales: {
             x: {
               ticks: {
@@ -83,12 +99,13 @@ 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)"
diff --git a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css
index 005cb692..3e91b926 100644
--- a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css
+++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css
@@ -1,4 +1,8 @@
-#divScatterChart{
-
-    display: block;   
-}
\ No newline at end of file
+canvas{
+    width:95% !important;
+    height:95% !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/scatterchart/scatterchart.component.html b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html
index ef41775a..eedc6ade 100644
--- a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html
+++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html
@@ -1,4 +1,2 @@
 
-<div id="divScatterChart" style="width: 100%;height: 100%;">
-    <canvas id="ScatterCharts" style="width: 100%;height: 280px;"> </canvas>
-</div>
\ No newline at end of file
+    <canvas id="ScatterCharts"> </canvas>
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 f91c1ccc..a59dd081 100644
--- a/frontend/src/app/_elements/metric-view/metric-view.component.css
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.css
@@ -2,9 +2,18 @@
     width: 100%;
     height: 90%;
     border-radius: 5px;
-    background-color:var(--ns-primary-25);
-    border:1px solid var(--ns-accent);
+    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;
+    height: 100%;
+}
+#right{
+    float: right;
+    width: 30%;
+    height: 50%;
 }
-#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 d72bc92b..b000c569 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,8 @@
-<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);">
+<div id="container">
+    <div id="left">
         <app-line-chart></app-line-chart>
     </div>
-    <div style="background-color: var(--ns-bg-dark-100);width: 50%;height: 50%;">
+    <div id="right" >
         <app-scatterchart></app-scatterchart>
     </div>
 </div>
\ No newline at end of file
-- 
cgit v1.2.3