diff options
Diffstat (limited to 'frontend/src/app/_elements/column-table/column-table.component.ts')
-rw-r--r-- | frontend/src/app/_elements/column-table/column-table.component.ts | 117 |
1 files changed, 92 insertions, 25 deletions
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 c200e674..217eda30 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -1,4 +1,4 @@ -import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChildren } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, QueryList, ViewChildren } from '@angular/core'; import Dataset from 'src/app/_data/Dataset'; import Experiment, { ColumnEncoding, Encoding, ColumnType, NullValueOptions } from 'src/app/_data/Experiment'; import { DatasetsService } from 'src/app/_services/datasets.service'; @@ -12,6 +12,8 @@ import { ExperimentsService } from 'src/app/_services/experiments.service'; import { SaveExperimentDialogComponent } from 'src/app/_modals/save-experiment-dialog/save-experiment-dialog.component'; import { AlertDialogComponent } from 'src/app/_modals/alert-dialog/alert-dialog.component'; import Shared from 'src/app/Shared'; +import { PieChartComponent } from '../_charts/pie-chart/pie-chart.component'; +import { BoxPlotComponent } from '../_charts/box-plot/box-plot.component'; @Component({ selector: 'app-column-table', @@ -20,10 +22,13 @@ import Shared from 'src/app/Shared'; }) export class ColumnTableComponent implements AfterViewInit { + @ViewChildren(BoxPlotComponent) boxplotComp!: QueryList<BoxPlotComponent>; + @ViewChildren(PieChartComponent) piechartComp!: QueryList<PieChartComponent>; @Input() dataset?: Dataset; @Input() experiment!: Experiment; @Output() okPressed: EventEmitter<string> = new EventEmitter(); @Output() columnTableChanged = new EventEmitter(); + @Output() experimentChanged = new EventEmitter(); Object = Object; Encoding = Encoding; @@ -41,9 +46,35 @@ export class ColumnTableComponent implements AfterViewInit { //ovo mi nece trebati jer primam dataset iz druge komponente } + 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 => { + if (this.experiment.columnTypes[i] == 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(); + this.dataset?.columnInfo.forEach(colInfo => { + if (this.experiment.columnTypes[i] == ColumnType.categorical) { + pieChart[i].updatePieChart(colInfo!.uniqueValues, colInfo.uniqueValuesPercent); + i++; + } + }); + } + loadDataset(dataset: Dataset) { + console.log("LOADED DATASET"); this.dataset = dataset; - this.setColumnTypeInitial(); this.dataset.columnInfo.forEach(column => { @@ -62,13 +93,17 @@ export class ColumnTableComponent implements AfterViewInit { this.datasetService.getDatasetFilePartial(this.dataset.fileId, 0, 10).subscribe((response: string | undefined) => { if (response && this.dataset != undefined) { - this.tableData = this.csvParseService.csvToArray(response, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter.toString() == "") ? "," : this.dataset.delimiter); + this.tableData = this.csvParseService.csvToArray(response, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "novi red") ? "\t" : this.dataset.delimiter); } }); this.loaded = true; + + this.updateCharts(); + this.updatePieChart(); } ngAfterViewInit(): void { + console.log(this.dataset?.columnInfo); } @@ -89,7 +124,10 @@ export class ColumnTableComponent implements AfterViewInit { } } resetOutputColumn() { - this.experiment.outputColumn = this.experiment.inputColumns[0]; + if (this.experiment.inputColumns.length > 0) + this.experiment.outputColumn = this.experiment.inputColumns[0]; + else + this.experiment.outputColumn = '-'; } setDeleteRowsForMissingValTreatment() { @@ -112,7 +150,7 @@ export class ColumnTableComponent implements AfterViewInit { columnTypeChanged(columnName: string) { if (this.experiment.outputColumn == columnName) - this.changeOutputColumn(columnName); + this.changeProblemType(); else this.columnTableChangeDetected(); } @@ -124,6 +162,8 @@ export class ColumnTableComponent implements AfterViewInit { if (this.experiment.inputColumns.filter(x => x == columnName)[0] == undefined) { this.experiment.inputColumns.push(columnName); } + if (this.experiment.inputColumns.length == 1) + this.experiment.outputColumn = this.experiment.inputColumns[0]; } else { this.experiment.inputColumns = this.experiment.inputColumns.filter(x => x != columnName); @@ -131,17 +171,21 @@ export class ColumnTableComponent implements AfterViewInit { //TODO: da se zatamni kolona koja je unchecked //this.experiment.encodings = this.experiment.encodings.filter(x => x.columnName != columnName); samo na kraju iz enkodinga skloni necekirane this.experiment.nullValuesReplacers = this.experiment.nullValuesReplacers.filter(x => x.column != columnName); - if (columnName == this.experiment.outputColumn) - this.experiment.outputColumn = this.experiment.inputColumns[0]; + if (columnName == this.experiment.outputColumn) { + if (this.experiment.inputColumns.length > 0) + this.experiment.outputColumn = this.experiment.inputColumns[0]; + else + this.experiment.outputColumn = '-'; + } } this.columnTableChangeDetected(); } } - changeOutputColumn(columnName: string) { + changeProblemType() { if (this.experiment != undefined && this.dataset != undefined) { let i = this.dataset.columnInfo.findIndex(x => x.columnName == this.experiment!.outputColumn); - if (this.experiment.columnTypes[i] == ColumnType.numerical) { + if (i == -1 || this.experiment.columnTypes[i] == ColumnType.numerical) { this.experiment.type = ProblemType.Regression; } else { @@ -157,20 +201,30 @@ export class ColumnTableComponent implements AfterViewInit { resetColumnEncodings(encodingType: Encoding) { if (this.experiment != undefined && this.dataset != undefined) { this.experiment.encodings = []; - for (let i = 0; i < this.dataset?.columnInfo.length; i++) { + for (let i = 0; i < this.dataset.columnInfo.length; i++) { this.experiment.encodings.push(new ColumnEncoding(this.dataset?.columnInfo[i].columnName, encodingType)); //console.log(this.experiment.encodings); } this.columnTableChangeDetected(); } } + resetColumnEncodingsGlobalSetting(encodingType: Encoding) { + if (this.experiment != undefined && this.dataset != undefined) { + for (let i = 0; i < this.dataset.columnInfo.length; i++) { + if (this.experiment.columnTypes[i] == ColumnType.categorical && this.dataset.columnInfo[i].columnName != this.experiment.outputColumn) //promeni + this.experiment.encodings[i].encoding = encodingType; + } + this.columnTableChangeDetected(); + } + } openEncodingDialog() { const dialogRef = this.dialog.open(EncodingDialogComponent, { - width: '300px' + width: '400px', + data: { experiment: this.experiment, dataset: this.dataset } }); dialogRef.afterClosed().subscribe(selectedEncoding => { if (selectedEncoding != undefined) - this.resetColumnEncodings(selectedEncoding); + this.resetColumnEncodingsGlobalSetting(selectedEncoding); }); } @@ -217,21 +271,24 @@ export class ColumnTableComponent implements AfterViewInit { openSaveExperimentDialog() { const dialogRef = this.dialog.open(SaveExperimentDialogComponent, { - width: '400px' + width: '400px', + data: { experiment: this.experiment } }); - dialogRef.afterClosed().subscribe(selectedName => { - this.experiment.name = selectedName; - //napravi odvojene dugmice za save i update -> za update nece da se otvara dijalog za ime - this.experimentService.addExperiment(this.experiment).subscribe((response) => { - this.experiment._id = response._id; - this.okPressed.emit(); - }); + dialogRef.afterClosed().subscribe(experiment => { + if (experiment) { + Object.assign(this.experiment, experiment); + this.experiment._columnsSelected = true; + this.experimentChanged.emit(); + console.log(this.experiment); + } }); } openUpdateExperimentDialog() { this.experimentService.updateExperiment(this.experiment).subscribe((response) => { - this.experiment = response; + Object.assign(this.experiment, response); + this.experiment._columnsSelected = true; + this.experimentChanged.emit(); Shared.openDialog("Izmena eksperimenta", "Uspešno ste izmenili podatke o eksperimentu."); }); } @@ -286,10 +343,20 @@ export class ColumnTableComponent implements AfterViewInit { return '0'; } saveExperiment() { - this.openSaveExperimentDialog(); + if (this.experiment.inputColumns.length == 0) + Shared.openDialog("Upozorenje", "Kako bi eksperiment bio uspešno izveden, neophodno je da izaberete barem dve kolone koje ćete koristiti."); + else if (this.experiment.inputColumns.length == 1) + Shared.openDialog("Upozorenje", "Kako bi eksperiment bio uspešno izveden, neophodno je da izaberete barem dve kolone koje ćete koristiti (mora postojati bar jedna ulazna i jedna izlazna kolona)."); + else + this.openSaveExperimentDialog(); } updateExperiment() { - this.openUpdateExperimentDialog(); + if (this.experiment.inputColumns.length == 0) + Shared.openDialog("Upozorenje", "Kako bi eksperiment bio uspešno izveden, neophodno je da izaberete barem dve kolone koje ćete koristiti."); + else if (this.experiment.inputColumns.length == 1) + Shared.openDialog("Upozorenje", "Kako bi eksperiment bio uspešno izveden, neophodno je da izaberete barem dve kolone koje ćete koristiti (mora postojati bar jedna ulazna i jedna izlazna kolona)."); + else + this.openUpdateExperimentDialog(); } @@ -312,10 +379,8 @@ export class ColumnTableComponent implements AfterViewInit { hoverOverTab(index: number) { if (index < 0) { this.hoveringOverTab = null; - this.tabToDisplay = this.selectedTab.value; } else { this.hoveringOverTab = this.tabs[index]; - this.tabToDisplay = this.tabs[index].value; } } @@ -344,3 +409,5 @@ export class Tab { public value: Table ) { } } + + |