diff options
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 |