Dodati grafici u metric-view komponentu, prilagođena boja grafika, metric-view komponenta povezana sa navbar-om.

3 files changed, 24 insertions, 9 deletions

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)"
+                  }
               }
+              
           }
+          
+          
       }
   });
   }