From 98d3f4dedaabf62213b95dd8e7b67f9e8ab99006 Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Wed, 27 Apr 2022 19:52:48 +0200
Subject: Sredjen dizajn tabele. Sredjena difoltna vrednost za missingvalue.
 Grafici uredjeni.

---
 .../_charts/box-plot/box-plot.component.html       |  4 +++-
 .../_charts/box-plot/box-plot.component.ts         | 25 +++++++++++++++++-----
 .../_charts/pie-chart/pie-chart.component.html     |  4 +++-
 .../_charts/pie-chart/pie-chart.component.ts       | 10 +++++----
 4 files changed, 32 insertions(+), 11 deletions(-)

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

diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html
index 34c283c7..688eafae 100644
--- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html
+++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html
@@ -1 +1,3 @@
-<canvas #boxplot [width]="width" [height]="height"></canvas>
\ No newline at end of file
+<div class="chart-wrapper">
+    <canvas #boxplot [width]="width" [height]="height"></canvas>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts
index 45e83e83..3faa4794 100644
--- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts
+++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts
@@ -16,8 +16,8 @@ Chart.register(BoxPlotController, BoxAndWiskers, LinearScale, CategoryScale);
 })
 export class BoxPlotComponent implements AfterViewInit {
 
-  @Input()width: number = 600;
-  @Input()height: number = 800;
+  @Input()width?: number;
+  @Input()height?: number;
   
   @ViewChild('boxplot') chartRef!: ElementRef;
   constructor() { }
@@ -27,10 +27,11 @@ export class BoxPlotComponent implements AfterViewInit {
     labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/],
       datasets: [{
       label: 'Dataset 1',
-      backgroundColor: 'rgba(255,0,0,0.5)',
-      borderColor: 'red',
+      backgroundColor: 'rgba(0, 65, 101, 1.0)',
+      borderColor: '#0063AB',
       borderWidth: 1,
       outlierColor: '#999999',
+      scaleFontColor: '#0063AB',
       padding: 10,
       itemRadius: 0,
       data: [
@@ -75,9 +76,23 @@ export class BoxPlotComponent implements AfterViewInit {
                 },
              },
              scales : {
+               x: {
+                ticks: {
+                  color: 'rgba(0, 65, 101, 1.0)'
+                },
+                grid: {
+                  color: "rgba(0, 99, 171, 0.5)"
+                }
+               },
               y : {
                   min: -50,
-                  max: 200
+                  max: 200,
+                  ticks: {
+                    color: 'rgba(0, 65, 101, 1.0)'
+                  },
+                  grid: {
+                    color: "rgba(0, 99, 171, 0.5)"
+                  }
               }
           }
     }
diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html
index aa3f26ab..7faf3af0 100644
--- a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html
+++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html
@@ -1 +1,3 @@
-<canvas #piechart [width]="width" [height]="height"></canvas>
+<div class="chart-wrapper">
+    <canvas #piechart [width]="width" [height]="height"></canvas>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
index 248c9aa8..f141f522 100644
--- a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
+++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
@@ -8,8 +8,8 @@ import {Chart} from 'chart.js';
 })
 export class PieChartComponent implements AfterViewInit {
 
-  @Input()width: number = 600;
-  @Input()height: number = 450;
+  @Input()width?: number;
+  @Input()height?: number;
   
   @ViewChild('piechart') chartRef!: ElementRef;
   constructor() { }
@@ -22,7 +22,7 @@ export class PieChartComponent implements AfterViewInit {
       datasets: [{
         label: "Population (millions)",
         backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
-        data: [2478,5267,734,784,433]
+        data: [2478,5267,734,784,433],
       }]
     },
     options: {
@@ -34,7 +34,9 @@ export class PieChartComponent implements AfterViewInit {
         legend: {
           display: false
                 },
-             }
+             },
+             layout: {
+              padding: 15}
     }
 });
 
-- 
cgit v1.2.3