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

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

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)"
+                  }
               }
+              
           }
+          
+          
       }
   });
   }
-- 
cgit v1.2.3