Box plot-sredjeno.

10 files changed, 106 insertions, 11 deletions

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 9c3256b2..710e9710 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -24,6 +24,7 @@
         "@microsoft/signalr": "^6.0.4",
         "@ng-bootstrap/ng-bootstrap": "^12.0.0",
         "@popperjs/core": "^2.10.2",
+        "@sgratzl/chartjs-chart-boxplot": "^3.7.1",
         "bootstrap": "^5.1.3",
         "chart.js": "^3.7.1",
         "csv-parser": "^3.0.0",
@@ -2701,6 +2702,22 @@
         "yarn": ">= 1.13.0"
       }
     },
+    "node_modules/@sgratzl/boxplots": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@sgratzl/boxplots/-/boxplots-1.3.0.tgz",
+      "integrity": "sha512-2BRWv+WOH58pwzSgP50buoXgxQic+4auz3BF0wiIUXS8D3QGkdBNgsNdQO1754Tm/0uEwly0R3WaCiGnoYWcmA=="
+    },
+    "node_modules/@sgratzl/chartjs-chart-boxplot": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/@sgratzl/chartjs-chart-boxplot/-/chartjs-chart-boxplot-3.7.1.tgz",
+      "integrity": "sha512-DYyOedq9CVFcDQZbRekyZAu/Bg0SUgaa19hsl4ikU85Di2DPdaiC/tFIkwHS6YB4L1GMWNvY+TDUODMYRFjhxA==",
+      "dependencies": {
+        "@sgratzl/boxplots": "^1.3.0"
+      },
+      "peerDependencies": {
+        "chart.js": "^3.7.0"
+      }
+    },
     "node_modules/@socket.io/base64-arraybuffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@socket.io/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
@@ -13722,6 +13739,19 @@
         "jsonc-parser": "3.0.0"
       }
     },
+    "@sgratzl/boxplots": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@sgratzl/boxplots/-/boxplots-1.3.0.tgz",
+      "integrity": "sha512-2BRWv+WOH58pwzSgP50buoXgxQic+4auz3BF0wiIUXS8D3QGkdBNgsNdQO1754Tm/0uEwly0R3WaCiGnoYWcmA=="
+    },
+    "@sgratzl/chartjs-chart-boxplot": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/@sgratzl/chartjs-chart-boxplot/-/chartjs-chart-boxplot-3.7.1.tgz",
+      "integrity": "sha512-DYyOedq9CVFcDQZbRekyZAu/Bg0SUgaa19hsl4ikU85Di2DPdaiC/tFIkwHS6YB4L1GMWNvY+TDUODMYRFjhxA==",
+      "requires": {
+        "@sgratzl/boxplots": "^1.3.0"
+      }
+    },
     "@socket.io/base64-arraybuffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@socket.io/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index f2d1e991..369ac5c9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -27,6 +27,7 @@
     "@microsoft/signalr": "^6.0.4",
     "@ng-bootstrap/ng-bootstrap": "^12.0.0",
     "@popperjs/core": "^2.10.2",
+    "@sgratzl/chartjs-chart-boxplot": "^3.7.1",
     "bootstrap": "^5.1.3",
     "chart.js": "^3.7.1",
     "csv-parser": "^3.0.0",
diff --git a/frontend/src/app/_elements/_charts/barchart/barchart.component.ts b/frontend/src/app/_elements/_charts/barchart/barchart.component.ts
index def64b7d..904335d7 100644
--- a/frontend/src/app/_elements/_charts/barchart/barchart.component.ts
+++ b/frontend/src/app/_elements/_charts/barchart/barchart.component.ts
@@ -8,6 +8,7 @@ import {Chart} from 'node_modules/chart.js';
 })
 export class BarchartComponent implements OnInit {
 
+  
   constructor() { }
 
     ngOnInit(){
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 2006eada..34c283c7 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 @@
-<p>Box-plot</p>
\ No newline at end of file
+<canvas #boxplot [width]="width" [height]="height"></canvas>
\ 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 0cef8f90..078e7176 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
@@ -1,15 +1,71 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { Chart, LinearScale, CategoryScale } from 'chart.js';
+import { BoxPlotController, BoxAndWiskers } from '@sgratzl/chartjs-chart-boxplot';
+
+function randomValues(count: number, min: number, max: number) {
+  const delta = max - min;
+  return Array.from({ length: count }).map(() => Math.random() * delta + min);
+}
+
+Chart.register(BoxPlotController, BoxAndWiskers, LinearScale, CategoryScale);
 
 @Component({
   selector: 'app-box-plot',
   templateUrl: './box-plot.component.html',
   styleUrls: ['./box-plot.component.css']
 })
-export class BoxPlotComponent implements OnInit {
+export class BoxPlotComponent implements AfterViewInit {
 
+  @Input()width: number = 800;
+  @Input()height: number = 450;
+  
+  @ViewChild('boxplot') chartRef!: ElementRef;
   constructor() { }
 
-  ngOnInit(): void {
-  }
+  boxplotData = {
+    // define label tree
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+    datasets: [{
+    label: 'Dataset 1',
+    backgroundColor: 'rgba(255,0,0,0.5)',
+    borderColor: 'red',
+    borderWidth: 1,
+    outlierColor: '#999999',
+    padding: 10,
+    itemRadius: 0,
+    data: [
+    randomValues(100, 0, 100),
+    randomValues(100, 0, 20),
+    randomValues(100, 20, 70),
+    randomValues(100, 60, 100),
+    randomValues(40, 50, 100),
+    randomValues(100, 60, 120),
+    randomValues(100, 80, 100)
+    ]
+    }, {
+    label: 'Dataset 2',
+    backgroundColor: 'rgba(0,0,255,0.5)',
+    borderColor: 'blue',
+    borderWidth: 1,
+    outlierColor: '#999999',
+    padding: 10,
+    itemRadius: 0,
+    data: [
+    randomValues(100, 60, 100),
+    randomValues(100, 0, 100),
+    randomValues(100, 0, 20),
+    randomValues(100, 20, 70),
+    randomValues(40, 60, 120),
+    randomValues(100, 20, 100),
+    randomValues(100, 80, 100)
+    ]
+    }]
+    };
+  ngAfterViewInit(): void {
+  const myChart = new Chart(this.chartRef.nativeElement, {
+    type: "boxplot",
+    data: this.boxplotData
+  });
+}
 
 }
diff --git a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html
index 4befc7dc..9c464534 100644
--- a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html
+++ b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html
@@ -1 +1 @@
-<canvas #doughnut width="800" height="450"></canvas>
+<canvas #doughnut [width]="width" [height]="height"></canvas>
diff --git a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts
index 4c7508fe..fc13289c 100644
--- a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts
+++ b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import {Chart} from 'node_modules/chart.js';
 
 @Component({
@@ -8,6 +8,9 @@ import {Chart} from 'node_modules/chart.js';
 })
 export class DoughnutChartComponent implements AfterViewInit {
 
+  @Input()width: number = 800;
+  @Input()height: number = 450;
+  
   @ViewChild('doughnut') chartRef!: ElementRef;
   constructor() { }
 
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 413aa6f3..aa3f26ab 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 @@
-<canvas #piechart width="800" height="450"></canvas>
+<canvas #piechart [width]="width" [height]="height"></canvas>
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 e7d79615..3f2dbfaf 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
@@ -1,5 +1,5 @@
-import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import {Chart} from 'node_modules/chart.js';
+import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import {Chart} from 'chart.js';
 
 @Component({
   selector: 'app-pie-chart',
@@ -8,6 +8,9 @@ import {Chart} from 'node_modules/chart.js';
 })
 export class PieChartComponent implements AfterViewInit {
 
+  @Input()width: number = 800;
+  @Input()height: number = 450;
+  
   @ViewChild('piechart') chartRef!: ElementRef;
   constructor() { }
 
diff --git a/frontend/src/app/_pages/test/test.component.html b/frontend/src/app/_pages/test/test.component.html
index 625739f8..ec6ef0d6 100644
--- a/frontend/src/app/_pages/test/test.component.html
+++ b/frontend/src/app/_pages/test/test.component.html
@@ -1,3 +1,4 @@
 <app-pie-chart></app-pie-chart>
 <app-doughnut-chart></app-doughnut-chart>
-<app-barchart></app-barchart>
\ No newline at end of file
+<app-barchart></app-barchart>
+<app-box-plot></app-box-plot>
\ No newline at end of file