diff options
Diffstat (limited to 'frontend/src/app')
3 files changed, 81 insertions, 12 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 f65d7c3d..6b62dd56 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.css +++ b/frontend/src/app/_elements/column-table/column-table.component.css @@ -1,5 +1,31 @@ -table { +table.fixed { + table-layout: fixed; display: block; overflow-x: auto; white-space: nowrap; +} + +table.fixed td { + overflow: hidden; + max-width: 200px; + vertical-align: middle; +} + +table.fixed th { + overflow: hidden; + max-width: 350px; + vertical-align: middle; +} + +table.fixed th:first-child { + text-align: center; + background-color: var(--ns-primary-25); +} + +.columnNames { + background-color: var(--ns-primary-50) !important; +} + +.brighter { + background-color: var(--ns-primary) !important; }
\ 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 e6d9442c..2b2fd537 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -1,8 +1,8 @@ -<table *ngIf="dataset && experiment" class="table text-offwhite"> +<table *ngIf="dataset && experiment" class="table text-offwhite fixed"> <thead> <tr> <th>Naziv</th> - <th *ngFor="let colInfo of dataset.columnInfo; let i = index"> + <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index"> #{{i + 1}} {{colInfo.columnName}} <mat-checkbox checked (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox> </th> @@ -29,7 +29,7 @@ </td> </tr> <tr> - <th>Statistika</th> + <th class="brighter">Statistika</th> <td *ngFor="let colInfo of dataset.columnInfo; let i = index"> <span *ngIf="colInfo.isNumber"> Mean: {{colInfo.mean}}<br> @@ -49,7 +49,7 @@ </td> </tr> <tr> - <th (click)="openEncodingDialog()">Enkoding + <th class="brighter" (click)="openEncodingDialog()">Enkoding <span class="material-icons-round">settings</span> </th> <td *ngFor="let colInfo of dataset.columnInfo; let i = index"> @@ -63,12 +63,14 @@ </td> </tr> <tr> - <th (click)="openMissingValuesDialog()">Regulisanje nedostajućih vrednosti + <th class="brighter" (click)="openMissingValuesDialog()">Regulisanje<br>nedostajućih<br>vrednosti<br> <span class="material-icons-round">settings</span> </th> <td *ngFor="let colInfo of dataset.columnInfo; let i = index"> - <button mat-button [matMenuTriggerFor]="menu" id="main_{{colInfo.columnName}}">Prikaži opcije</button> + <button mat-button [matMenuTriggerFor]="menu" id="main_{{colInfo.columnName}}" #nullValMenu> + Prikaži opcije<span class="material-icons">arrow_drop_down</span> + </button> <mat-menu #menu="matMenu"> <button mat-menu-item (click)="MissValsDeleteClicked($event, NullValueOptions.DeleteColumns)" value={{colInfo.columnName}}>Obriši kolonu</button> <button mat-menu-item (click)="MissValsDeleteClicked($event, NullValueOptions.DeleteRows)" value={{colInfo.columnName}}>Obriši redove</button> @@ -97,5 +99,12 @@ </td> </tr> + <tr *ngFor="let element of [1, 2]; let i = index"> + <th *ngIf="i == 0" rowspan="2">Vrednosti</th> + + <td *ngFor="let colInfo of dataset.columnInfo; let j = index"> + <!--<app-datatable [data]=""></app-datatable>-->ok + </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 603de591..caacf63e 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 { Component, Input, OnInit } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChildren } 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'; @@ -13,17 +13,22 @@ import { MatMenuItem, MatMenuTrigger } from '@angular/material/menu'; templateUrl: './column-table.component.html', styleUrls: ['./column-table.component.css'] }) -export class ColumnTableComponent implements OnInit { +export class ColumnTableComponent implements AfterViewInit { @Input() dataset?: Dataset; @Input() experiment?: Experiment; + @ViewChildren("nullValMenu") nullValMenus!: ElementRef[]; Object = Object; Encoding = Encoding; NullValueOptions = NullValueOptions; + tableData?: any[][]; constructor(private datasetService: DatasetsService, public dialog: MatDialog) { //ovo mi nece trebati jer primam dataset iz druge komponente + } + + ngAfterViewInit(): void { this.datasetService.getMyDatasets().subscribe((datasets) => { this.dataset = datasets[0]; //console.log(this.dataset); @@ -32,10 +37,36 @@ export class ColumnTableComponent implements OnInit { this.experiment?.inputColumns.push(this.dataset.columnInfo[i].columnName); } this.resetColumnEncodings(Encoding.Label); + this.setDeleteColumnsForMissingValTreatment(); + + /*this.tableData = this.datasetService.getDatasetFile(this.dataset._id).subscribe((file: string | undefined) => { + if (file) { + //this.tableData = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter); + } + });*/ }); } - ngOnInit(): void { + setDeleteColumnsForMissingValTreatment() { + console.log("USAOOOO"); + if (this.experiment != undefined) { + this.experiment.nullValues = NullValueOptions.DeleteColumns; + this.experiment.nullValuesReplacers = []; + console.log("duzina",this.experiment.inputColumns.length); + for (let i = 0; i < this.experiment.inputColumns.length; i++) { + this.experiment.nullValuesReplacers.push({ + column: this.experiment.inputColumns[i], + option: NullValueOptions.DeleteColumns, + value: "" + }); + console.log(i); + } + //console.log("len",this.nullValMenus.length); + this.nullValMenus.forEach((menu) => { + //console.log(menu.nativeElement); + menu.nativeElement.textContent = "Obriši kolonu"; + }); + } } changeInputColumns(targetMatCheckbox: MatCheckboxChange, columnName: string) { @@ -49,6 +80,8 @@ export class ColumnTableComponent implements OnInit { 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 + //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); } } } @@ -84,6 +117,7 @@ export class ColumnTableComponent implements OnInit { option: NullValueOptions.DeleteColumns, value: "" }); + (<HTMLInputElement>document.getElementById("main_" + this.experiment.inputColumns[i])).textContent = "Obriši kolonu"; } } else if (selectedMissingValuesOption == NullValueOptions.DeleteRows) { @@ -95,9 +129,9 @@ export class ColumnTableComponent implements OnInit { option: NullValueOptions.DeleteRows, value: "" }); + (<HTMLInputElement>document.getElementById("main_" + this.experiment.inputColumns[i])).textContent = "Obriši redove"; } } - } } openMissingValuesDialog() { @@ -157,4 +191,4 @@ export class ColumnTableComponent implements OnInit { return '0'; } -} +} |