From ea54b441b0b2aae522f26ed045757aee8f981f7d Mon Sep 17 00:00:00 2001 From: Ognjen Cirkovic Date: Mon, 25 Apr 2022 22:44:48 +0200 Subject: Dodata column-table komponenta na experiment stranicu. --- frontend/src/app/_elements/column-table/column-table.component.html | 6 +++--- frontend/src/app/_pages/experiment/experiment.component.html | 4 +++- 2 files changed, 6 insertions(+), 4 deletions(-) (limited to 'frontend/src/app') diff --git a/frontend/src/app/_elements/column-table/column-table.component.html b/frontend/src/app/_elements/column-table/column-table.component.html index 62699284..b9fdd84a 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -23,9 +23,9 @@ Grafik - - - + diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index c988a50a..6200270c 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -25,7 +25,9 @@
-
Insert odabir kolona
+
+ +
-- cgit v1.2.3 From 9d49bbdc2c4b0bda69fca7e130d8153091da8c04 Mon Sep 17 00:00:00 2001 From: Ognjen Cirkovic Date: Tue, 26 Apr 2022 02:10:35 +0200 Subject: Dodat slider , dropdown za biranje tipa problema i dropdown za izbor izlazne kolone. --- .../column-table/column-table.component.css | 9 +++++++ .../column-table/column-table.component.html | 30 +++++++++++++++++++++- 2 files changed, 38 insertions(+), 1 deletion(-) (limited to 'frontend/src/app') diff --git a/frontend/src/app/_elements/column-table/column-table.component.css b/frontend/src/app/_elements/column-table/column-table.component.css index f65d7c3d..060fcc05 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.css +++ b/frontend/src/app/_elements/column-table/column-table.component.css @@ -2,4 +2,13 @@ table { display: block; overflow-x: auto; white-space: nowrap; +} +mat-slider{ + width: 300px; +} +.belowColumn{ + background-color: var(--ns-bg-dark-50); +} +.slider{ + background-color: var(--ns-bg-dark-100); } \ No newline at end of file diff --git a/frontend/src/app/_elements/column-table/column-table.component.html b/frontend/src/app/_elements/column-table/column-table.component.html index b9fdd84a..8225de6d 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -101,4 +101,32 @@ - \ No newline at end of file + + +
+
+
+ TreningTest +
+
+ + Tip problema + + Regresioni + Binarni-Klasifikacioni + Multi-Klasifikacioni + + +
+
+ + Izlazna kolona + + {{item.columnName}} + + +
+ +
+ +
\ No newline at end of file -- cgit v1.2.3 From 1cd21bb27492de6c8c61f36b258e4acfacab7fd3 Mon Sep 17 00:00:00 2001 From: Ognjen Cirkovic Date: Tue, 26 Apr 2022 18:40:13 +0200 Subject: Promenjen dizajn. Dodati procenti kod trening i test skupa. --- .../src/app/_elements/column-table/column-table.component.html | 10 ++++++---- .../src/app/_elements/column-table/column-table.component.ts | 2 +- 2 files changed, 7 insertions(+), 5 deletions(-) (limited to 'frontend/src/app') diff --git a/frontend/src/app/_elements/column-table/column-table.component.html b/frontend/src/app/_elements/column-table/column-table.component.html index 8225de6d..4418d21b 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -105,10 +105,12 @@
-
- TreningTest +
+
TreningTest
+
Trening:{{testSetDistribution}}% : Test:{{100-testSetDistribution}}%
-
+ +
Tip problema @@ -118,7 +120,7 @@
-
+
Izlazna kolona diff --git a/frontend/src/app/_elements/column-table/column-table.component.ts b/frontend/src/app/_elements/column-table/column-table.component.ts index 18e38203..78abe438 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -19,7 +19,7 @@ export class ColumnTableComponent implements OnInit { Object = Object; Encoding = Encoding; NullValueOptions = NullValueOptions; - + testSetDistribution:number=70; constructor(private datasetService: DatasetsService, public dialog: MatDialog) { //ovo mi nece trebati jer primam dataset iz druge komponente this.datasetService.getMyDatasets().subscribe((datasets) => { -- cgit v1.2.3 From 9a8e08fbae8e5c08abebc977f51eb275fee66bca Mon Sep 17 00:00:00 2001 From: Ognjen Cirkovic Date: Tue, 26 Apr 2022 19:33:00 +0200 Subject: Dodata realtime promena % po pomeranju slidera. --- frontend/src/app/_elements/column-table/column-table.component.html | 5 +++-- frontend/src/app/_elements/column-table/column-table.component.ts | 6 ++++++ 2 files changed, 9 insertions(+), 2 deletions(-) (limited to 'frontend/src/app') diff --git a/frontend/src/app/_elements/column-table/column-table.component.html b/frontend/src/app/_elements/column-table/column-table.component.html index 4418d21b..c8b1e477 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -106,8 +106,9 @@
-
TreningTest
-
Trening:{{testSetDistribution}}% : Test:{{100-testSetDistribution}}%
+
{{testSetDistribution}}% : {{100-testSetDistribution}}%
+
TreningTest
+
diff --git a/frontend/src/app/_elements/column-table/column-table.component.ts b/frontend/src/app/_elements/column-table/column-table.component.ts index 78abe438..c9b3b887 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -5,6 +5,7 @@ import { DatasetsService } from 'src/app/_services/datasets.service'; import { EncodingDialogComponent } from 'src/app/_modals/encoding-dialog/encoding-dialog.component'; import { MatDialog } from '@angular/material/dialog'; import { MissingvaluesDialogComponent } from 'src/app/_modals/missingvalues-dialog/missingvalues-dialog.component'; +import { MatSliderChange } from '@angular/material/slider'; @Component({ selector: 'app-column-table', @@ -118,4 +119,9 @@ export class ColumnTableComponent implements OnInit { this.resetMissingValuesTreatment(selectedMissingValuesOption); }); } + updateTestSet(event:MatSliderChange){ + this.testSetDistribution=event.value!; + } + + } -- cgit v1.2.3 From e6f38317938d8bb95060af4e748cb4ab10ea8580 Mon Sep 17 00:00:00 2001 From: Ivan Ljubisavljevic Date: Tue, 26 Apr 2022 19:40:44 +0200 Subject: Forma Dataset. Upload csv-a i prikaz tabele #116 --- .../src/app/_elements/folder/folder.component.html | 3 +- .../form-dataset/form-dataset.component.css | 28 ++++++ .../form-dataset/form-dataset.component.html | 76 +++++++++++++++- .../form-dataset/form-dataset.component.ts | 101 ++++++++++++++++++++- frontend/src/app/_services/models.service.ts | 2 +- 5 files changed, 203 insertions(+), 7 deletions(-) (limited to 'frontend/src/app') diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html index c3da30fc..95e99911 100644 --- a/frontend/src/app/_elements/folder/folder.component.html +++ b/frontend/src/app/_elements/folder/folder.component.html @@ -43,7 +43,8 @@
- {{fileToDisplay ? fileToDisplay.name : 'No file selected.'}} {{selectedFileIndex}} {{hoveringOverFileIndex}} + +
+
+
+ +
+ + + +
+ + + +
\ No newline at end of file diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts index 092e943f..9bdd7e14 100644 --- a/frontend/src/app/_elements/form-dataset/form-dataset.component.ts +++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.ts @@ -1,15 +1,108 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, EventEmitter, Output, ViewChild } from '@angular/core'; +import Dataset from 'src/app/_data/Dataset'; +import { DatasetsService } from 'src/app/_services/datasets.service'; +import { ModelsService } from 'src/app/_services/models.service'; +import shared from 'src/app/Shared'; +import { DatatableComponent, TableData } from '../datatable/datatable.component'; +import { CsvParseService } from 'src/app/_services/csv-parse.service'; +import {FormControl, Validators} from '@angular/forms'; @Component({ selector: 'app-form-dataset', templateUrl: './form-dataset.component.html', styleUrls: ['./form-dataset.component.css'] }) -export class FormDatasetComponent implements OnInit { +export class FormDatasetComponent { - constructor() { } + @ViewChild(DatatableComponent) datatable!: DatatableComponent; - ngOnInit(): void { + nameFormControl = new FormControl('', [Validators.required, Validators.email]); + + delimiterOptions: Array = [",", ";", "|", "razmak", "novi red"]; //podrazumevano "," + + csvRecords: any[] = []; + files: File[] = []; + rowsNumber: number = 0; + colsNumber: number = 0; + + dataset: Dataset; //dodaj ! potencijalno + + tableData: TableData = new TableData(); + + constructor(private modelsService: ModelsService, private datasetsService: DatasetsService, private csv: CsvParseService) { + this.dataset = new Dataset(); + this.dataset.delimiter = ','; + } + + //@ViewChild('fileImportInput', { static: false }) fileImportInput: any; cemu je ovo sluzilo? + + changeListener($event: any): void { + this.files = $event.srcElement.files; + if (this.files.length == 0 || this.files[0] == null) { + this.tableData.hasInput = false; + return; + } + else + this.tableData.hasInput = true; + + this.tableData.loaded = false; + this.update(); + } + + update() { + + if (this.files.length < 1) + return; + + const fileReader = new FileReader(); + fileReader.onload = (e) => { + if (typeof fileReader.result === 'string') { + const result = this.csv.csvToArray(fileReader.result, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "novi red") ? "\t" : this.dataset.delimiter) + + if (this.dataset.hasHeader) + this.csvRecords = result.splice(0, 11); + else + this.csvRecords = result.splice(0, 10); + + this.colsNumber = result[0].length; + this.rowsNumber = result.length; + + this.tableData.data = this.csvRecords + this.tableData.hasHeader = this.dataset.hasHeader; + this.tableData.loaded = true; + this.tableData.numCols = this.colsNumber; + this.tableData.numRows = this.rowsNumber; + } + } + fileReader.readAsText(this.files[0]); + } + + checkAccessible() { + if (this.dataset.isPublic) + this.dataset.accessibleByLink = true; } + uploadDataset() { + if (this.files[0] == undefined) { + shared.openDialog("Greška", "Niste izabrali fajl za učitavanje."); + return; + } + + this.modelsService.uploadData(this.files[0]).subscribe((file) => { + //console.log('ADD MODEL: STEP 2 - ADD DATASET WITH FILE ID ' + file._id); + this.dataset.fileId = file._id; + this.dataset.uploaderId = shared.userId; + + this.datasetsService.addDataset(this.dataset).subscribe((dataset) => { + shared.openDialog("Obaveštenje", "Uspešno ste dodali novi izvor podataka u kolekciju. Molimo sačekajte par trenutaka da se procesira."); + }, (error) => { + shared.openDialog("Neuspeo pokušaj!", "Izvor podataka sa unetim nazivom već postoji u Vašoj kolekciji. Izmenite naziv ili iskoristite postojeći dataset."); + }); //kraj addDataset subscribe + }, (error) => { + + }); //kraj uploadData subscribe + } + + + } diff --git a/frontend/src/app/_services/models.service.ts b/frontend/src/app/_services/models.service.ts index 44383828..d79e2781 100644 --- a/frontend/src/app/_services/models.service.ts +++ b/frontend/src/app/_services/models.service.ts @@ -4,7 +4,7 @@ import Model from '../_data/Model'; import { AuthService } from './auth.service'; import { Observable } from 'rxjs'; import Dataset from '../_data/Dataset'; -import { Configuration } from '../configuration.service'; +import { Configuration } from '../_services/configuration.service'; @Injectable({ providedIn: 'root' -- cgit v1.2.3 From b23f781aedd6c7b8ba57d457ea8690401352e44b Mon Sep 17 00:00:00 2001 From: TAMARA JERINIC Date: Tue, 26 Apr 2022 20:11:02 +0200 Subject: Omogućeno definisanje parametara pojedinačno za svaki sloj. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/app/_data/Model.ts | 21 ++++++++++-- .../_elements/form-model/form-model.component.html | 8 ++--- .../_elements/form-model/form-model.component.ts | 39 +++++++--------------- .../src/app/_elements/graph/graph.component.ts | 9 ++--- 4 files changed, 39 insertions(+), 38 deletions(-) (limited to 'frontend/src/app') diff --git a/frontend/src/app/_data/Model.ts b/frontend/src/app/_data/Model.ts index 00ac0d0c..094378f3 100644 --- a/frontend/src/app/_data/Model.ts +++ b/frontend/src/app/_data/Model.ts @@ -14,19 +14,34 @@ export default class Model { public optimizer: Optimizer = Optimizer.Adam, public lossFunction: LossFunction = LossFunction.MeanSquaredError, public inputNeurons: number = 1, - public hiddenLayerNeurons: number=1, public hiddenLayers: number = 1, public batchSize: number = 5, - public hiddenLayerActivationFunctions: string[] = ['sigmoid'], public outputLayerActivationFunction: ActivationFunction = ActivationFunction.Sigmoid, public uploaderId: string = '', public metrics: string[] = [], // TODO add to add-model form public epochs: number = 5, // TODO add to add-model form public inputColNum:number=5, - public learningRate:number=0.01 + public learningRate:number=0.01, + public layers:Layer[]=[new Layer()] + ) { } } +export class Layer{ + constructor( + public layerNumber:number=0, + public activationFunction:ActivationFunction=ActivationFunction.Sigmoid, + public neurons:number=1, + public regularisation:Regularisation=Regularisation.L1, + public regularisationRate:number=0.01 + ) + {} + +} +export enum Regularisation{ + L1='l1', + L2='l2' +} export enum ProblemType { Regression = 'regresioni', BinaryClassification = 'binarni-klasifikacioni', diff --git a/frontend/src/app/_elements/form-model/form-model.component.html b/frontend/src/app/_elements/form-model/form-model.component.html index 0b63c5ac..ac5ca9ab 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -126,7 +126,7 @@
-
+
{{item}}
@@ -147,9 +147,9 @@
Broj čvorova
- add_circle -
{{newModel.hiddenLayerNeurons}}
- remove_circle + add_circle +
{{newModel.layers[i].neurons}}
+ remove_circle
diff --git a/frontend/src/app/_elements/form-model/form-model.component.ts b/frontend/src/app/_elements/form-model/form-model.component.ts index b1d0a2a9..40bc30ea 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.ts +++ b/frontend/src/app/_elements/form-model/form-model.component.ts @@ -2,7 +2,7 @@ import { Component, OnInit ,Input, ViewChild, Output, EventEmitter} from '@angul import {FormControl, Validators} from '@angular/forms'; import Shared from 'src/app/Shared'; import Experiment from 'src/app/_data/Experiment'; -import Model, { ActivationFunction, LossFunction, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType } from 'src/app/_data/Model'; +import Model, {Layer, ActivationFunction, LossFunction, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType } from 'src/app/_data/Model'; import { GraphComponent } from '../graph/graph.component'; import {FormGroupDirective, NgForm} from '@angular/forms'; import {ErrorStateMatcher} from '@angular/material/core'; @@ -65,26 +65,20 @@ export class FormModelComponent implements OnInit { removeLayer(){ if(this.newModel.hiddenLayers>1) { + this.newModel.layers.splice(this.newModel.layers.length-1,1); this.newModel.hiddenLayers-=1; this.updateGraph(); } - else - { - this.newModel.hiddenLayers=this.newModel.hiddenLayers; - } - } addLayer(){ if(this.newModel.hiddenLayers<12) { + this.newModel.layers.push(new Layer(this.newModel.layers.length)); + this.newModel.hiddenLayers+=1; this.updateGraph(); } - else - { - this.newModel.hiddenLayers=this.newModel.hiddenLayers; - - } + } removeBatch(){ if(this.newModel.batchSize>1) @@ -140,28 +134,19 @@ export class FormModelComponent implements OnInit { numSequence(n: number): Array { return Array(n); } - removeNeuron(){ - if(this.newModel.hiddenLayerNeurons>1) + + removeNeuron(index:number){ + if(this.newModel.layers[index].neurons>1) { - this.newModel.hiddenLayerNeurons=this.newModel.hiddenLayerNeurons-1; + this.newModel.layers[index].neurons-=1; this.updateGraph(); } - else - { - this.newModel.hiddenLayerNeurons=this.newModel.hiddenLayerNeurons; - } - } - addNeuron(){ - if(this.newModel.hiddenLayerNeurons<100) + addNeuron(index:number){ + if(this.newModel.layers[index].neurons<100) { - this.newModel.hiddenLayerNeurons=this.newModel.hiddenLayerNeurons+1; + this.newModel.layers[index].neurons+=1; this.updateGraph(); } - else - { - this.newModel.hiddenLayerNeurons=this.newModel.hiddenLayerNeurons; - - } } } diff --git a/frontend/src/app/_elements/graph/graph.component.ts b/frontend/src/app/_elements/graph/graph.component.ts index 8051acc3..c20d3dd7 100644 --- a/frontend/src/app/_elements/graph/graph.component.ts +++ b/frontend/src/app/_elements/graph/graph.component.ts @@ -1,6 +1,6 @@ import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; import Dataset from 'src/app/_data/Dataset'; -import Model from 'src/app/_data/Model'; +import Model,{Layer} from 'src/app/_data/Model'; @Component({ selector: 'app-graph', @@ -26,6 +26,7 @@ export class GraphComponent implements AfterViewInit { @Input() outputNodeColor: string = '#44ee22'; private ctx?: CanvasRenderingContext2D; + @Input() inputNeurons: number=1; constructor() { } @@ -50,7 +51,7 @@ export class GraphComponent implements AfterViewInit { let inputNodeIndex = 0; const inputLayer: Node[] = []; while (inputNodeIndex < this.inputCols) { - const x = 0.5 / (this.model!.hiddenLayers + 2); + const x = 0.5 / (this.inputNeurons + 2); const y = (inputNodeIndex + 0.5) / this.inputCols; const node = new Node(x, y, this.inputNodeColor); inputLayer.push(node); @@ -62,9 +63,9 @@ export class GraphComponent implements AfterViewInit { while (layerIndex < this.model!.hiddenLayers + 1) { const newLayer: Node[] = []; let nodeIndex = 0; - while (nodeIndex < this.model!.hiddenLayerNeurons) { + while (nodeIndex < this.model!.layers[layerIndex].neurons) { const x = (layerIndex + 0.5) / (this.model!.hiddenLayers + 2); - const y = (nodeIndex + 0.5) / this.model!.hiddenLayerNeurons; + const y = (nodeIndex + 0.5) / this.model!.layers[layerIndex].neurons; const node = new Node(x, y, this.nodeColor); newLayer.push(node); nodeIndex += 1; -- cgit v1.2.3 From 5857e1c71eda1ee6455d55ef9f8d1c10f75a8457 Mon Sep 17 00:00:00 2001 From: Nevena Bojovic Date: Tue, 26 Apr 2022 21:05:08 +0200 Subject: Box plot-sredjeno. --- frontend/package-lock.json | 30 ++++++++++ frontend/package.json | 1 + .../_charts/barchart/barchart.component.ts | 1 + .../_charts/box-plot/box-plot.component.html | 2 +- .../_charts/box-plot/box-plot.component.ts | 64 ++++++++++++++++++++-- .../doughnut-chart/doughnut-chart.component.html | 2 +- .../doughnut-chart/doughnut-chart.component.ts | 5 +- .../_charts/pie-chart/pie-chart.component.html | 2 +- .../_charts/pie-chart/pie-chart.component.ts | 7 ++- frontend/src/app/_pages/test/test.component.html | 3 +- 10 files changed, 106 insertions(+), 11 deletions(-) (limited to 'frontend/src/app') 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 @@ -

Box-plot

\ No newline at end of file + \ 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 @@ - + 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 @@ - + 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 @@ - \ No newline at end of file + + \ No newline at end of file -- cgit v1.2.3