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 +---
 5 files changed, 38 insertions(+), 10 deletions(-)

(limited to 'frontend/src/app/_elements/_charts')

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>
-- 
cgit v1.2.3