diff options
Diffstat (limited to 'frontend/src/app/_elements')
4 files changed, 217 insertions, 5 deletions
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 e69de29b..f65d7c3d 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.css +++ b/frontend/src/app/_elements/column-table/column-table.component.css @@ -0,0 +1,5 @@ +table { + display: block; + overflow-x: auto; + white-space: nowrap; +}
\ 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 7b18afc8..62699284 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -1 +1,104 @@ -<p>column-table works!</p> +<table *ngIf="dataset && experiment" class="table text-offwhite"> + <thead> + <tr> + <th>Naziv</th> + <th *ngFor="let colInfo of dataset.columnInfo; let i = index"> + #{{i + 1}} {{colInfo.columnName}} + <input type="checkbox" class="btn-primary" checked (click)="changeInputColumns($event, colInfo.columnName)"> + </th> + </tr> + </thead> + <tbody> + <tr> + <th>Tip</th> + <td *ngFor="let colInfo of dataset.columnInfo; let i = index"> + <mat-form-field> + <select matNativeControl class="form-control btn-primary" (change)="changeColumnType($event, i)"> + <option [selected]="!colInfo.isNumber" value="Kategorijski">Kategorijski</option> + <option [selected]="colInfo.isNumber" value="Numerički">Numerički</option> + </select> + </mat-form-field> + </td> + </tr> + <tr> + <th>Grafik</th> + <td *ngFor="let colInfo of dataset.columnInfo; let i = index"> + <app-box-plot *ngIf="colInfo.isNumber"></app-box-plot> + <!--TODO: dodati [data]--> + <app-pie-chart *ngIf="!colInfo.isNumber"></app-pie-chart> + </td> + </tr> + <tr> + <th>Statistika</th> + <td *ngFor="let colInfo of dataset.columnInfo; let i = index"> + <span *ngIf="colInfo.isNumber"> + Mean: {{colInfo.mean}}<br> + Median: {{colInfo.median}}<br> + Min: {{colInfo.min}}<br> + Max: {{colInfo.max}}<br> + <!-- TODO na ML-u: Q1 i Q3 u statistici + Q1: {{colInfo.q1}}<br> + Q3: {{colInfo.q3}}<br> + --> + </span> + <span *ngIf="!colInfo.isNumber"> + <span *ngFor="let uniqueValue of colInfo.uniqueValues | slice:0:5; let i = index"> + {{uniqueValue}}<br><!-- TODO na ML-u: broj ponavljanja unique values-a u zagradi nek pise --> + </span> + </span> + </td> + </tr> + <tr> + <th (click)="openEncodingDialog()">Enkoding + <span class="material-icons-round">settings</span> + </th> + <td *ngFor="let colInfo of dataset.columnInfo; let i = index"> + <mat-form-field> + <select matNativeControl class="form-control btn-primary" [(ngModel)]="experiment.encodings[i].encoding"> + <option + *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)" + [value]="option"> + {{ optionName }} + </option> + </select> + </mat-form-field> + </td> + </tr> + <tr> + <th (click)="openMissingValuesDialog()">Regulisanje nedostajućih vrednosti + <span class="material-icons-round">settings</span> + </th> + <td *ngFor="let colInfo of dataset.columnInfo; let i = index"> + <!-- + <mat-form-field appearance="fill"> + <mat-select matNativeControl> + <mat-option [value]="NullValueOptions.DeleteColumns">Obriši kolonu</mat-option> + <mat-option [value]="NullValueOptions.DeleteRows">Obriši redove</mat-option> + <mat-option>Popuni sa _____ + <mat-select matNativeControl> + <mat-option>a</mat-option> + <mat-option>b</mat-option> + <mat-option>c</mat-option> + </mat-select> + </mat-option> + </mat-select> + </mat-form-field> + --> + <button mat-button [matMenuTriggerFor]="animals">Izabrana opcija</button> + <mat-menu #animals="matMenu"> + <button mat-menu-item>Obriši kolonu</button> + <button mat-menu-item>Obriši redove</button> + <button mat-menu-item [matMenuTriggerFor]="fillWith">Popuni sa ____</button> + </mat-menu> + + <mat-menu #fillWith="matMenu"> + <button mat-menu-item [matMenuTriggerFor]="replaceWith">Unesi vrednost...</button> + </mat-menu> + + <mat-menu #replaceWith="matMenu"> + <input type="text" mat-menu-item placeholder="Unesi vrednost..."> + </mat-menu> + </td> + </tr> + </tbody> +</table>
\ No newline at end of file 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 f8c5f5f3..18e38203 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,10 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; +import Dataset from 'src/app/_data/Dataset'; +import Experiment, { ColumnEncoding, Encoding, NullValReplacer, NullValueOptions } from 'src/app/_data/Experiment'; +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'; @Component({ selector: 'app-column-table', @@ -7,9 +13,109 @@ import { Component, OnInit } from '@angular/core'; }) export class ColumnTableComponent implements OnInit { - constructor() { } + @Input() dataset?: Dataset; + @Input() experiment?: Experiment; + + Object = Object; + Encoding = Encoding; + NullValueOptions = NullValueOptions; + + constructor(private datasetService: DatasetsService, public dialog: MatDialog) { + //ovo mi nece trebati jer primam dataset iz druge komponente + this.datasetService.getMyDatasets().subscribe((datasets) => { + this.dataset = datasets[0]; + //console.log(this.dataset); + this.experiment = new Experiment(); + for (let i = 0; i < this.dataset?.columnInfo.length; i++) { + this.experiment?.inputColumns.push(this.dataset.columnInfo[i].columnName); + } + this.resetColumnEncodings(Encoding.Label); + }); + } ngOnInit(): void { } + changeInputColumns(target: any, columnName: string) { + if (this.experiment != undefined) { + if (target.currentTarget.checked) { + if (this.experiment.inputColumns.filter(x => x == columnName)[0] == undefined) { + this.experiment.inputColumns.push(columnName); + } + } + else { + this.experiment.inputColumns = this.experiment.inputColumns.filter(x => x != columnName); + //console.log("Input columns: ", this.experiment.inputColumns); + //TODO: da se zatamni kolona koja je unchecked + } + } + } + + changeColumnType(target: any, indexOfCol: number) { + if (this.dataset != undefined) { + if (target.currentTarget.value == "Numerički") { + this.dataset.columnInfo[indexOfCol].isNumber = true; + } + else { + this.dataset.columnInfo[indexOfCol].isNumber = false; + } + } + } + + resetColumnEncodings(encodingType: Encoding) { + if (this.experiment != undefined && this.dataset != undefined) { + this.experiment.encodings = []; + 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); + } + } + } + openEncodingDialog() { + const dialogRef = this.dialog.open(EncodingDialogComponent, { + width: '300px' + }); + dialogRef.afterClosed().subscribe(selectedEncoding => { + if (selectedEncoding != undefined) + this.resetColumnEncodings(selectedEncoding); + }); + } + + resetMissingValuesTreatment(selectedMissingValuesOption: NullValueOptions) { + if (this.experiment != undefined && this.dataset != undefined) { + + if (selectedMissingValuesOption == NullValueOptions.DeleteColumns) { + this.experiment.nullValues = NullValueOptions.DeleteColumns; + this.experiment.nullValuesReplacers = []; + for (let i = 0; i < this.experiment.inputColumns.length; i++) { + this.experiment.nullValuesReplacers.push({ + column: this.experiment.inputColumns[i], + option: NullValueOptions.DeleteColumns, + value: "" + }); + } + } + else if (selectedMissingValuesOption == NullValueOptions.DeleteRows) { + this.experiment.nullValues = NullValueOptions.DeleteRows; + this.experiment.nullValuesReplacers = []; + for (let i = 0; i < this.experiment.inputColumns.length; i++) { + this.experiment.nullValuesReplacers.push({ + column: this.experiment.inputColumns[i], + option: NullValueOptions.DeleteRows, + value: "" + }); + } + } + + } + } + openMissingValuesDialog() { + const dialogRef = this.dialog.open(MissingvaluesDialogComponent, { + width: '400px' + }); + dialogRef.afterClosed().subscribe(selectedMissingValuesOption => { + if (selectedMissingValuesOption != undefined) + this.resetMissingValuesTreatment(selectedMissingValuesOption); + }); + } } diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.html b/frontend/src/app/_elements/metric-view/metric-view.component.html index e7a4c547..3a6cce8d 100644 --- a/frontend/src/app/_elements/metric-view/metric-view.component.html +++ b/frontend/src/app/_elements/metric-view/metric-view.component.html @@ -1,5 +1,3 @@ <div> - <app-line-chart> - </app-line-chart> </div>
\ No newline at end of file |