From dac8e0f3a723a43013d6412def50ca04e7976b1f Mon Sep 17 00:00:00 2001 From: TAMARA JERINIC Date: Mon, 16 May 2022 00:54:23 +0200 Subject: Promenjen font i naziv arhive. --- frontend/src/app/_elements/_charts/line-chart/line-chart.component.css | 1 + 1 file changed, 1 insertion(+) (limited to 'frontend/src/app/_elements/_charts') diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css index a190693a..35c7c8d5 100644 --- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css +++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css @@ -6,4 +6,5 @@ canvas{ background-color: var(--ns-bg-dark-100); border-radius: 5px; margin: 10px; + font-size: 10px !important; } \ No newline at end of file -- cgit v1.2.3 From b6bade63bf3b9ec356a53862d8a3d4727281f6f8 Mon Sep 17 00:00:00 2001 From: TAMARA JERINIC Date: Tue, 17 May 2022 21:24:55 +0200 Subject: Omogućena responzivnost grafika toka obuke, promenjen font.. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../_charts/line-chart/line-chart.component.css | 5 ++-- .../_charts/line-chart/line-chart.component.html | 6 ++--- .../_charts/line-chart/line-chart.component.ts | 28 ++++++++++++++++++---- frontend/src/styles/font.css | 2 +- 4 files changed, 31 insertions(+), 10 deletions(-) (limited to 'frontend/src/app/_elements/_charts') diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css index 35c7c8d5..2eea561e 100644 --- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css +++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css @@ -6,5 +6,6 @@ canvas{ background-color: var(--ns-bg-dark-100); border-radius: 5px; margin: 10px; - font-size: 10px !important; - } \ No newline at end of file + font-size: 11 !important; + } + \ No newline at end of file diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html index 5bb7aae6..d48212cd 100644 --- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html +++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html @@ -1,4 +1,4 @@ - - +
+ - \ No newline at end of file +
\ No newline at end of file diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts index e873618c..89a76a44 100644 --- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts +++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts @@ -1,4 +1,4 @@ -import { Component, AfterViewInit, ViewChild } from '@angular/core'; +import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core'; import { Chart } from 'chart.js'; @Component({ @@ -19,11 +19,27 @@ export class LineChartComponent implements AfterViewInit { dataValLoss:number[]=[]; dataEpoch: number[] = []; + @ViewChild('wrapper') + wrapper!: ElementRef; + @ViewChild('canvas') + canvas!: ElementRef; + constructor() { + } - + width = 700; + height = 400; + myChart!: Chart; - + resize() { + this.width = this.wrapper.nativeElement.offsetWidth; + this.height = this.wrapper.nativeElement.offsetHeight; + + if (this.canvas) { + this.canvas.nativeElement.width = this.width; + this.canvas.nativeElement.height = this.height; + } + } update(myEpochs: number[], myAcc: number[], myLoss: number[], myMae: number[], myMse: number[], myValAcc:number[],myValLoss:number[],myValMae:number[],myValMse:number[]) { this.dataAcc.length = 0; this.dataAcc.push(...myAcc); @@ -56,6 +72,9 @@ export class LineChartComponent implements AfterViewInit { } ngAfterViewInit(): void { + + window.addEventListener('resize', () => { this.resize() }); + this.resize(); this.myChart = new Chart("myChart", { type: 'line', @@ -69,7 +88,7 @@ export class LineChartComponent implements AfterViewInit { }, { - label: 'VAl_Accuracy', + label: 'Val_Accuracy', data: this.dataMSE, borderWidth: 1 }, @@ -150,3 +169,4 @@ export class LineChartComponent implements AfterViewInit { ); } } + diff --git a/frontend/src/styles/font.css b/frontend/src/styles/font.css index d5841a63..79e71ca6 100644 --- a/frontend/src/styles/font.css +++ b/frontend/src/styles/font.css @@ -1,5 +1,5 @@ div{ font-family: Helvetica, sans-serif; - letter-spacing: 2px; + letter-spacing: 1px; font-weight: 100; } \ No newline at end of file -- cgit v1.2.3 From e719412e42581646a04cbd0ffa443be52d7740cf Mon Sep 17 00:00:00 2001 From: Nevena Bojovic Date: Wed, 18 May 2022 23:36:44 +0200 Subject: Grafici --- backend/api/api/appsettings.json | 8 ++-- .../_charts/pie-chart/pie-chart.component.ts | 43 +++++++++++++++------- .../column-table/column-table.component.ts | 11 ++++-- 3 files changed, 41 insertions(+), 21 deletions(-) (limited to 'frontend/src/app/_elements/_charts') diff --git a/backend/api/api/appsettings.json b/backend/api/api/appsettings.json index ec8f7dd8..44d63ac3 100644 --- a/backend/api/api/appsettings.json +++ b/backend/api/api/appsettings.json @@ -16,22 +16,22 @@ "UserStoreDatabaseSettings": { /* LocalHost*/ - "ConnectionString": "mongodb://127.0.0.1:27017/", + /*"ConnectionString": "mongodb://127.0.0.1:27017/", "DatabaseName": "si_project", "CollectionName": "users", "DatasetCollectionName": "Dataset", "ModelCollectionName": "Model", "PredictorCollectionName": "Predictor", "FilesCollectionName": "Files", - "ExperimentCollectionName": "Experiment" + "ExperimentCollectionName": "Experiment"*/ - /*"ConnectionString": "mongodb+srv://si_user:si_user@sidatabase.twtfm.mongodb.net/myFirstDatabase?retryWrites=true&w=majority", + "ConnectionString": "mongodb+srv://si_user:si_user@sidatabase.twtfm.mongodb.net/myFirstDatabase?retryWrites=true&w=majority", "DatabaseName": "si_db", "CollectionName": "users", "DatasetCollectionName": "Dataset", "ModelCollectionName": "Model", "PredictorCollectionName": "Predictor", "FilesCollectionName": "Files", - "ExperimentCollectionName": "Experiment" */ + "ExperimentCollectionName": "Experiment" } } \ 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 c2bd3262..cba5252a 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 @@ -14,16 +14,16 @@ export class PieChartComponent implements AfterViewInit { @Input()uniqueValuesPercent?: number[] = []; updatePieChart(uniqueValues: string[], uniqueValuesPercent: number[]){ - console.log(this.uniqueValues, this.uniqueValuesPercent); - const newPieChartData = { - datasets: [{ - label: "Population (millions)", - backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"], - data: [2478,5267,734,784,433], - }] - - } - }; + //console.log(this.uniqueValues, this.uniqueValuesPercent); + this.pieChartData.datasets = [{ + label: "%", + backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850", "#000000"], + data: uniqueValuesPercent, + }]; + this.pieChartData.labels = uniqueValues + console.log(this.uniqueValues, this.uniqueValuesPercent); + this.myChart?.update() + }; @ViewChild('piechart') chartRef!: ElementRef; constructor() { } @@ -33,13 +33,30 @@ export class PieChartComponent implements AfterViewInit { label: "Population (millions)", backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"], data: [2478,5267,734,784,433] - }] + }], labels : [""] } + myChart?: Chart; ngAfterViewInit(): void { - const myChart = new Chart(this.chartRef.nativeElement, { + let rem = 100; + const percents : number[] = [] + this.uniqueValuesPercent?.forEach(percent => { + rem-=percent*100; + percents.push(percent*100) + + }) + const data = { + datasets: [{ + label: "%", + backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850", "#000000"], + data: [...percents, rem] + }], labels : [...this.uniqueValues!,"Ostalo"] + } + + const myChart = new Chart(this.chartRef.nativeElement, { type: 'pie', - data: this.pieChartData, + data: data + , options: { /*title: { display: true, 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 9fdb6936..ad78feaf 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -83,8 +83,8 @@ export class ColumnTableComponent implements AfterViewInit { let i = 0; this.boxplotComp.changes.subscribe(() => { const bps = this.boxplotComp.toArray(); - this.dataset?.columnInfo.forEach(colInfo => { - if (this.experiment.columnTypes[i] == ColumnType.numerical) { + this.dataset?.columnInfo.forEach((colInfo, index) => { + if (this.experiment.columnTypes[index] == ColumnType.numerical) { bps[i].updateChart(colInfo!.min, colInfo.max, colInfo.q1, colInfo.q3, colInfo.median); i++; } @@ -96,8 +96,11 @@ export class ColumnTableComponent implements AfterViewInit { //min: number, max: number, q1: number, q3: number, median: number let i = 0; const pieChart = this.piechartComp.toArray(); - this.dataset?.columnInfo.forEach(colInfo => { - if (this.experiment.columnTypes[i] == ColumnType.categorical) { + console.log(pieChart) + this.dataset?.columnInfo.forEach((colInfo, index) => { + console.log(i) + if (this.experiment.columnTypes[index] == ColumnType.categorical) { + console.log("prosao IF") pieChart[i].updatePieChart(colInfo!.uniqueValues, colInfo.uniqueValuesPercent); i++; } -- cgit v1.2.3 From 6aba6287a85492295ba5de0a0cc6501d492a3676 Mon Sep 17 00:00:00 2001 From: Nevena Bojovic Date: Thu, 19 May 2022 19:48:07 +0200 Subject: Grafici korekcija --- .../_elements/_charts/box-plot/box-plot.component.ts | 20 +++++++++++++++++++- .../_charts/pie-chart/pie-chart.component.ts | 4 ---- 2 files changed, 19 insertions(+), 5 deletions(-) (limited to 'frontend/src/app/_elements/_charts') 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 bf5e3fd6..07976da3 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 @@ -28,10 +28,28 @@ export class BoxPlotComponent implements AfterViewInit { updateChart(min: number, max: number, q1: number, q3: number, median: number) { if (this.myChart) { this.boxplotData.datasets[0].data = [[min, q1, median, q3, max]] - this.myChart.update(); + this.myChart?.update(); } + /*this.boxplotData.datasets = [{ + data: [[min, q1, median, q3, max]], + }]*/ + }; + /* + updatePieChart(uniqueValues: string[], uniqueValuesPercent: number[]){ + //console.log(this.uniqueValues, this.uniqueValuesPercent); + this.pieChartData.datasets = [{ + label: "%", + backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850", "#000000"], + data: uniqueValuesPercent, + }]; + this.pieChartData.labels = uniqueValues + console.log(this.uniqueValues, this.uniqueValuesPercent); + this.myChart?.update() + }; + */ + @ViewChild('boxplot') chartRef!: ElementRef; constructor() { //this.updateChart(); 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 cba5252a..9264e41c 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 @@ -58,10 +58,6 @@ export class PieChartComponent implements AfterViewInit { data: data , options: { - /*title: { - display: true, - text: 'Predicted world population (millions) in 2050' - }*/ plugins:{ legend: { display: false -- cgit v1.2.3 From 573019527eae41128b0716930dc0cfa0b019d317 Mon Sep 17 00:00:00 2001 From: Sonja Galovic Date: Thu, 19 May 2022 21:50:51 +0200 Subject: Radi prikaz prediktora iz kolekcije na experiment strani (prva 4 koraka sve popunjeno, iscrtan grafik). Ispravljeno crtanje grafika toka obuke - radi. YesNoDialog stil. --- .../_charts/line-chart/line-chart.component.ts | 37 ++++----- .../column-table/column-table.component.ts | 2 +- .../src/app/_elements/folder/folder.component.ts | 2 +- .../yes-no-dialog/yes-no-dialog.component.css | 8 ++ .../yes-no-dialog/yes-no-dialog.component.html | 8 +- .../app/_pages/experiment/experiment.component.ts | 88 ++++++++++++---------- .../app/_pages/my-models/my-models.component.html | 43 ----------- .../app/_pages/my-models/my-models.component.ts | 59 --------------- frontend/src/app/app-routing.module.ts | 2 +- 9 files changed, 81 insertions(+), 168 deletions(-) delete mode 100644 frontend/src/app/_pages/my-models/my-models.component.html delete mode 100644 frontend/src/app/_pages/my-models/my-models.component.ts (limited to 'frontend/src/app/_elements/_charts') diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts index 89a76a44..7d21129c 100644 --- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts +++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts @@ -41,32 +41,33 @@ export class LineChartComponent implements AfterViewInit { } } update(myEpochs: number[], myAcc: number[], myLoss: number[], myMae: number[], myMse: number[], myValAcc:number[],myValLoss:number[],myValMae:number[],myValMse:number[]) { - this.dataAcc.length = 0; - this.dataAcc.push(...myAcc); - + this.dataEpoch.length = 0; this.dataEpoch.push(...myEpochs); - this.dataMAE.length = 0; - this.dataMAE.push(...myMae); + this.dataAcc.length = 0; + this.dataAcc.push(...myAcc); this.dataLOSS.length = 0; this.dataLOSS.push(...myLoss); - this.dataMSE.length = 0; - this.dataMSE.push(...myValAcc); + this.dataMAE.length = 0; + this.dataMAE.push(...myMae); this.dataMSE.length = 0; - this.dataMSE.push(...myValLoss); + this.dataMSE.push(...myMse); - this.dataMSE.length = 0; - this.dataMSE.push(...myValMae); + this.dataValAcc.length = 0; + this.dataValAcc.push(...myValAcc); - this.dataMSE.length = 0; - this.dataMSE.push(...myValMse); + this.dataValLoss.length = 0; + this.dataValLoss.push(...myValLoss); - this.dataMSE.length = 0; - this.dataMSE.push(...myMse); + this.dataValMAE.length = 0; + this.dataValMAE.push(...myValMae); + + this.dataValMSE.length = 0; + this.dataValMSE.push(...myValMse); this.myChart.update(); } @@ -89,7 +90,7 @@ export class LineChartComponent implements AfterViewInit { }, { label: 'Val_Accuracy', - data: this.dataMSE, + data: this.dataValAcc, borderWidth: 1 }, { @@ -99,7 +100,7 @@ export class LineChartComponent implements AfterViewInit { }, { label: 'Val_Loss', - data: this.dataMSE, + data: this.dataValLoss, borderWidth: 1 }, { @@ -109,7 +110,7 @@ export class LineChartComponent implements AfterViewInit { }, { label: 'Val_MAE', - data: this.dataMSE, + data: this.dataValMAE, borderWidth: 1 }, { @@ -119,7 +120,7 @@ export class LineChartComponent implements AfterViewInit { }, { label: 'Val_MSE', - data: this.dataMSE, + data: this.dataValMSE, borderWidth: 1 } ] 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 694b1a83..e12065a3 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -110,7 +110,7 @@ export class ColumnTableComponent implements AfterViewInit { loadDataset(dataset: Dataset) { console.log("LOADED DATASET"); - if (this.route.snapshot.paramMap.get("id") == null) { + if (this.route.snapshot.paramMap.get("id") == null && this.route.snapshot.paramMap.get("predictorId") == null) { this.dataset = dataset; this.setColumnTypeInitial(); diff --git a/frontend/src/app/_elements/folder/folder.component.ts b/frontend/src/app/_elements/folder/folder.component.ts index 254298fb..d2175f73 100644 --- a/frontend/src/app/_elements/folder/folder.component.ts +++ b/frontend/src/app/_elements/folder/folder.component.ts @@ -120,7 +120,7 @@ export class FolderComponent implements AfterViewInit { } goToExperimentPageWithPredictor(file: FolderFile, predictor: Predictor) { - this.router.navigate(['/experiment/' + file._id + "/" + predictor._id]); + this.router.navigate(['/experiment/p/' + predictor._id]); } createNewFile() { diff --git a/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.css b/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.css index e69de29b..e99a1e1e 100644 --- a/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.css +++ b/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.css @@ -0,0 +1,8 @@ +#btnYes { + background-color: var(--offwhite); + color: var(--ns-bg-dark-100); +} + +#btnNo { + color: gray; +} \ No newline at end of file diff --git a/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.html b/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.html index 77e7be42..259aec0d 100644 --- a/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.html +++ b/frontend/src/app/_modals/yes-no-dialog/yes-no-dialog.component.html @@ -1,10 +1,10 @@ -

{{data.title}}

-
+

{{data.title}}

+
{{data.message}}
- - + +
\ No newline at end of file diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts index 6c8e96b3..7cb5e7cd 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.ts +++ b/frontend/src/app/_pages/experiment/experiment.component.ts @@ -21,7 +21,7 @@ import { PredictorsService } from 'src/app/_services/predictors.service'; templateUrl: './experiment.component.html', styleUrls: ['./experiment.component.css'] }) -export class ExperimentComponent implements AfterViewInit, OnInit { +export class ExperimentComponent implements AfterViewInit { @ViewChild(MatStepper) stepper!: MatStepper; @ViewChild('stepsContainer') stepsContainer!: ElementRef; @@ -44,46 +44,6 @@ export class ExperimentComponent implements AfterViewInit, OnInit { this.experiment = new Experiment("exp1"); } - ngOnInit(): void { - this.route.queryParams.subscribe(params => { - - let experimentId = this.route.snapshot.paramMap.get("id"); - let predictorId = this.route.snapshot.paramMap.get("predictorId"); - - if (predictorId != null && experimentId != null) { - this.experimentsService.getExperimentById(experimentId).subscribe((response) => { - this.experiment = response; - this.datasetsService.getDatasetById(this.experiment.datasetId).subscribe((response: Dataset) => { - this.dataset = response; - this.folderDataset.forExperiment = this.experiment; - this.folderDataset.selectFile(this.dataset); //sad 3. i 4. korak da se ucitaju - - //this.predictorsService.getPredictor(predictorId!).subscribe((response) => { - let predictor = response; - //this.modelsService.getModelById(predictor.modelId).subscribe((response) => { - this.modelsService.getModelById("62853d70696d62ceeb8db7cd").subscribe((response) => { - //imamo model - this.folderModel.formModel.newModel = response; - //this.metricView.update(predictor.metrics); - }); - //}); - }); - }); - } - else if (predictorId == null && experimentId != null) { - this.experimentsService.getExperimentById(experimentId).subscribe((response) => { - this.experiment = response; - this.datasetsService.getDatasetById(this.experiment.datasetId).subscribe((response: Dataset) => { - this.dataset = response; - this.folderDataset.forExperiment = this.experiment; - this.folderDataset.selectFile(this.dataset); - }); - }); - } - - }); - } - /*updateExperiment(){ }*/ @@ -136,6 +96,52 @@ export class ExperimentComponent implements AfterViewInit, OnInit { }); } + + this.route.queryParams.subscribe(params => { + + let experimentId = this.route.snapshot.paramMap.get("id"); + let predictorId = this.route.snapshot.paramMap.get("predictorId"); + console.log("paramexp: ", experimentId, ", parampredictor: ", predictorId); + if (predictorId != null) { + this.predictorsService.getPredictor(predictorId!).subscribe((response) => { + let predictor = response; + //console.log("predictor: ", predictor); + this.experimentsService.getExperimentById(predictor.experimentId).subscribe((response) => { + this.experiment = response; + //console.log("experiment: ", this.experiment); + this.datasetsService.getDatasetById(this.experiment.datasetId).subscribe((response: Dataset) => { + this.dataset = response; + //console.log("dataset: ", this.dataset); + this.folderDataset.forExperiment = this.experiment; + this.folderDataset.selectFile(this.dataset); //sad 3. i 4. korak da se ucitaju + + this.modelsService.getModelById(predictor.modelId).subscribe((response) => { + let model = response; + //console.log("model: ", model); + this.folderModel.formModel.newModel = model; + this.step3 = true; + let numOfEpochsArray = Array.from({length: model.epochs}, (_, i) => i + 1); + //console.log("metric view1:", this.metricView); + setTimeout(() => { + this.metricView.linechartComponent.update(numOfEpochsArray, predictor.metricsAcc, predictor.metricsLoss, predictor.metricsMae, predictor.metricsMse, predictor.metricsValAcc, predictor.metricsValLoss, predictor.metricsValMae, predictor.metricsValMse); + }) + }); + }); + }); + }); + } + else if (experimentId != null) { + this.experimentsService.getExperimentById(experimentId).subscribe((response) => { + this.experiment = response; + this.datasetsService.getDatasetById(this.experiment.datasetId).subscribe((response: Dataset) => { + this.dataset = response; + this.folderDataset.forExperiment = this.experiment; + this.folderDataset.selectFile(this.dataset); + }); + }); + } + + }); } history: any[] = []; diff --git a/frontend/src/app/_pages/my-models/my-models.component.html b/frontend/src/app/_pages/my-models/my-models.component.html deleted file mode 100644 index 9b281239..00000000 --- a/frontend/src/app/_pages/my-models/my-models.component.html +++ /dev/null @@ -1,43 +0,0 @@ - -
-
-
- -
-
- -
-
- - -
-
-
- - - - -
-
-
- - - -
-
-
-

Nema rezultata

-
-
- -
- - - - - -
diff --git a/frontend/src/app/_pages/my-models/my-models.component.ts b/frontend/src/app/_pages/my-models/my-models.component.ts deleted file mode 100644 index d379fa69..00000000 --- a/frontend/src/app/_pages/my-models/my-models.component.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; -import shared from 'src/app/Shared'; -import Model from 'src/app/_data/Model'; -import { ModelsService } from 'src/app/_services/models.service'; - -@Component({ - selector: 'app-my-models', - templateUrl: './my-models.component.html', - styleUrls: ['./my-models.component.css'] -}) -export class MyModelsComponent implements OnInit { - myModels: Model[] = []; - //myModel: Model; - - constructor(private modelsS : ModelsService, private router : Router) { - - - - } - - ngOnInit(): void { - this.getAllMyModels(); - - } -/* - editModel(): void{ - this.modelsS.editModel().subscribe(m => { - this.myModel = m; - - }) - } -*/ - -deleteThisModel(model: Model): void{ - shared.openYesNoDialog('Brisanje seta podataka','Da li ste sigurni da želite da obrišete model?',() => { - this.modelsS.deleteModel(model).subscribe((response) => { - this.getAllMyModels(); - }, (error) =>{ - if (error.error == "Model with name = {name} deleted") { - shared.openDialog("Obaveštenje", "Greška prilikom brisanja modela."); - } - }); - }); -} - - -useThisModel(model: Model): void{ - - this.router.navigate(['/training']) - -} - getAllMyModels(): void{ - this.modelsS.getMyModels().subscribe(m => { - this.myModels = m; - }); - } - -} diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index 56442842..d5552ce9 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -12,7 +12,7 @@ import { TestComponent } from './_pages/test/test.component'; const routes: Routes = [ { path: '', component: HomeComponent, data: { title: 'Početna strana' } }, - { path: 'experiment/:id/:predictorId', component: ExperimentComponent, data: { title: 'Eksperiment' } }, + { path: 'experiment/p/:predictorId', component: ExperimentComponent, data: { title: 'Eksperiment' } }, { path: 'experiment/:id', component: ExperimentComponent, data: { title: 'Eksperiment' } }, { path: 'experiment', component: ExperimentComponent, data: { title: 'Eksperiment' } }, { path: 'archive', component: ArchiveComponent, data: { title: 'Arhiva' } }, -- cgit v1.2.3 From f51b5e2de9e29a0a3ab998f335c110131cb40ce7 Mon Sep 17 00:00:00 2001 From: Ognjen Cirkovic Date: Thu, 19 May 2022 22:15:28 +0200 Subject: Popravljen box-plot. --- .../_charts/box-plot/box-plot.component.ts | 70 ++++++++++------------ .../column-table/column-table.component.ts | 29 +-------- 2 files changed, 32 insertions(+), 67 deletions(-) (limited to 'frontend/src/app/_elements/_charts') 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 07976da3..b3d25280 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,25 +16,16 @@ Chart.register(BoxPlotController, BoxAndWiskers, LinearScale, CategoryScale); }) export class BoxPlotComponent implements AfterViewInit { - @Input() width?: number; - @Input() height?: number; - @Input() mean?: number; - @Input() median?: number; - @Input() min?: number; - @Input() max?: number; - @Input() q1?: number; - @Input() q3?: number; + @Input() width!: number; + @Input() height!: number; + @Input() mean!: number; + @Input() median!: number; + @Input() min!: number; + @Input() max!: number; + @Input() q1!: number; + @Input() q3!: number; - updateChart(min: number, max: number, q1: number, q3: number, median: number) { - if (this.myChart) { - this.boxplotData.datasets[0].data = [[min, q1, median, q3, max]] - this.myChart?.update(); - } - /*this.boxplotData.datasets = [{ - data: [[min, q1, median, q3, max]], - }]*/ - - }; + /* updatePieChart(uniqueValues: string[], uniqueValuesPercent: number[]){ @@ -55,27 +46,29 @@ export class BoxPlotComponent implements AfterViewInit { //this.updateChart(); } - boxplotData = { - // define label tree - //labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/], - datasets: [{ - label: 'Dataset 1', - backgroundColor: '#0063AB', - borderColor: '#dfd7d7', - borderWidth: 1, - outlierColor: '#999999', - scaleFontColor: '#0063AB', - padding: 10, - itemRadius: 0, - data: [ - randomValues(100, 0, 100), - ] - }] - }; + ngAfterViewInit(): void { - this.myChart = new Chart(this.chartRef.nativeElement, { + const boxplotData = { + // define label tree + //labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/], + labels:[""], + datasets: [{ + label: 'Dataset 1', + backgroundColor: '#0063AB', + borderColor: '#dfd7d7', + borderWidth: 1, + outlierColor: '#999999', + scaleFontColor: '#0063AB', + padding: 10, + itemRadius: 0, + data: [ + {min:this.min,q1:this.q1,q3:this.q3,median:this.median,max:this.max,mean:this.mean} + ] + }] + }; + const myChart = new Chart(this.chartRef.nativeElement, { type: "boxplot", - data: this.boxplotData, + data: boxplotData, options: { plugins: { legend: { @@ -92,8 +85,6 @@ export class BoxPlotComponent implements AfterViewInit { } }, y: { - min: this.min, - max: this.max, ticks: { color: '#dfd7d7' }, @@ -106,5 +97,4 @@ export class BoxPlotComponent implements AfterViewInit { }); } - myChart?: Chart; } 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 694b1a83..fa418e23 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -78,34 +78,9 @@ export class ColumnTableComponent implements AfterViewInit { } - updateCharts() { - //min: number, max: number, q1: number, q3: number, median: number - let i = 0; - this.boxplotComp.changes.subscribe(() => { - const bps = this.boxplotComp.toArray(); - this.dataset?.columnInfo.forEach((colInfo, index) => { - if (this.experiment.columnTypes[index] == ColumnType.numerical) { - bps[i].updateChart(colInfo!.min, colInfo.max, colInfo.q1, colInfo.q3, colInfo.median); - i++; - } - }); - }); - } + + - updatePieChart() { - //min: number, max: number, q1: number, q3: number, median: number - let i = 0; - const pieChart = this.piechartComp.toArray(); - console.log(pieChart) - this.dataset?.columnInfo.forEach((colInfo, index) => { - console.log(i) - if (this.experiment.columnTypes[index] == ColumnType.categorical) { - console.log("prosao IF") - pieChart[i].updatePieChart(colInfo!.uniqueValues, colInfo.uniqueValuesPercent); - i++; - } - }); - } loadDataset(dataset: Dataset) { console.log("LOADED DATASET"); -- cgit v1.2.3 From 05aaef1e6fc0431206994b0fc18d470a84e650c1 Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Fri, 20 May 2022 02:25:15 +0200 Subject: Popravio tooltipove chartova tako da nisu odseceni unutar kolona. --- .../_charts/box-plot/box-plot.component.html | 2 +- .../_charts/line-chart/line-chart.component.html | 4 +- .../_charts/pie-chart/pie-chart.component.html | 2 +- .../column-table/column-table.component.css | 4 +- frontend/src/app/app.component.ts | 114 ++++++++++++++++++++- frontend/src/styles/helper.css | 8 ++ 6 files changed, 127 insertions(+), 7 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 688eafae..3b2bf976 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,3 +1,3 @@ -
+
\ No newline at end of file diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html index d48212cd..1c711562 100644 --- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html +++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html @@ -1,4 +1,4 @@ -
- +
+
\ No newline at end of file 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 7faf3af0..fe3998ff 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,3 +1,3 @@ -
+
\ No newline at end of file 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 311773f7..40ae3c05 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.css +++ b/frontend/src/app/_elements/column-table/column-table.component.css @@ -13,7 +13,7 @@ table.fixed { } table.fixed td { - overflow: hidden; + /* overflow: hidden; */ max-width: 200px; min-width: 200px; vertical-align: middle; @@ -21,7 +21,7 @@ table.fixed td { } table.fixed th { - overflow: hidden; + /* overflow: hidden; */ max-width: 250px; min-width: 120px; vertical-align: middle; diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts index e301b46f..5660f676 100644 --- a/frontend/src/app/app.component.ts +++ b/frontend/src/app/app.component.ts @@ -6,6 +6,7 @@ import { AuthService } from './_services/auth.service'; import { SignalRService } from './_services/signal-r.service'; import { HttpClient } from '@angular/common/http'; import Shared from './Shared'; +import { Chart } from 'chart.js'; @Component({ selector: 'app-root', templateUrl: './app.component.html', @@ -14,6 +15,117 @@ import Shared from './Shared'; export class AppComponent implements OnInit, AfterViewInit { constructor(private router: Router, private titleService: Title, private authService: AuthService, private signalRService: SignalRService, private http: HttpClient) { + const getOrCreateTooltip = (chart: { canvas: { parentNode: { querySelector: (arg0: string) => any; appendChild: (arg0: any) => void; }; }; }) => { + let tooltipEl = chart.canvas.parentNode.querySelector('div'); + + if (!tooltipEl) { + tooltipEl = document.createElement('div'); + tooltipEl.style.background = 'rgba(0, 0, 0, 0.7)'; + tooltipEl.style.borderRadius = '3px'; + tooltipEl.style.color = 'white'; + tooltipEl.style.opacity = 1; + tooltipEl.style.pointerEvents = 'none'; + tooltipEl.style.position = 'absolute'; + tooltipEl.style.transform = 'translate(-50%, 0)'; + tooltipEl.style.transition = 'all .1s ease'; + tooltipEl.style.zIndex = 9000; + + tooltipEl.classList.add("clearfix"); + + const table = document.createElement('table'); + table.style.margin = '0px'; + + tooltipEl.appendChild(table); + chart.canvas.parentNode.appendChild(tooltipEl); + } + + return tooltipEl; + }; + + const externalTooltipHandler = (context: { chart: any; tooltip: any; }) => { + // Tooltip Element + const { chart, tooltip } = context; + const tooltipEl = getOrCreateTooltip(chart); + + // Hide if no tooltip + if (tooltip.opacity === 0) { + tooltipEl.style.opacity = 0; + return; + } + + // Set Text + if (tooltip.body) { + const titleLines = tooltip.title || []; + const bodyLines = tooltip.body.map((b: { lines: any; }) => b.lines); + + const tableHead = document.createElement('thead'); + + titleLines.forEach((title: string) => { + const tr = document.createElement('tr'); + tr.style.borderWidth = '' + 0; + + const th = document.createElement('th'); + th.style.borderWidth = '' + 0; + const text = document.createTextNode(title); + + th.appendChild(text); + tr.appendChild(th); + tableHead.appendChild(tr); + }); + + const tableBody = document.createElement('tbody'); + bodyLines.forEach((body: string, i: string | number) => { + const colors = tooltip.labelColors[i]; + + const span = document.createElement('span'); + span.style.background = colors.backgroundColor; + span.style.borderColor = colors.borderColor; + span.style.borderWidth = '2px'; + span.style.marginRight = '10px'; + span.style.height = '10px'; + span.style.width = '10px'; + span.style.display = 'inline-block'; + + const tr = document.createElement('tr'); + tr.style.backgroundColor = 'inherit'; + tr.style.borderWidth = '' + 0; + + const td = document.createElement('td'); + td.style.borderWidth = '' + 0; + + const text = document.createTextNode(body); + + td.appendChild(span); + td.appendChild(text); + tr.appendChild(td); + tableBody.appendChild(tr); + }); + + const tableRoot = tooltipEl.querySelector('table'); + + // Remove old children + while (tableRoot.firstChild) { + tableRoot.firstChild.remove(); + } + + // Add new children + tableRoot.appendChild(tableHead); + tableRoot.appendChild(tableBody); + } + + const { offsetLeft: positionX, offsetTop: positionY } = chart.canvas; + + // Display, position, and set styles for font + tooltipEl.style.opacity = 1; + tooltipEl.style.left = positionX + tooltip.caretX + 'px'; + tooltipEl.style.top = positionY + tooltip.caretY + 'px'; + tooltipEl.style.font = tooltip.options.bodyFont.string; + tooltipEl.style.padding = tooltip.options.padding + 'px ' + tooltip.options.padding + 'px'; + }; + + Chart.defaults.plugins.tooltip.enabled = false; + Chart.defaults.plugins.tooltip.position = 'nearest'; + Chart.defaults.plugins.tooltip.external = externalTooltipHandler; } ngAfterViewInit(): void { } @@ -40,7 +152,7 @@ export class AppComponent implements OnInit, AfterViewInit { } }); if (!this.authService.isAuthenticated()) { - if(!this.authService.alreadyGuest()) + if (!this.authService.alreadyGuest()) this.authService.addGuestToken(); } this.signalRService.startConnection(); diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css index 971a2ed6..155fc3e1 100644 --- a/frontend/src/styles/helper.css +++ b/frontend/src/styles/helper.css @@ -142,4 +142,12 @@ select:-webkit-autofill { a { color: var(--ns-accent) !important; +} + +.clearfix:after { + content: "\0020"; + display: block; + height: 0; + clear: both; + visibility: hidden; } \ No newline at end of file -- cgit v1.2.3