diff options
Diffstat (limited to 'frontend')
4 files changed, 52 insertions, 20 deletions
diff --git a/frontend/src/app/_data/Dataset.ts b/frontend/src/app/_data/Dataset.ts index 525d371a..09e293fd 100644 --- a/frontend/src/app/_data/Dataset.ts +++ b/frontend/src/app/_data/Dataset.ts @@ -37,10 +37,10 @@ export class ColumnInfo { public min?: number, public max?: number ) { - if (isNumber) - columnType = ColumnType.numerical; + /*if (isNumber) + this.columnType = ColumnType.numerical; else - columnType = ColumnType.categorical; + this.columnType = ColumnType.categorical;*/ } } 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 5dc2e9ec..c3f5e4e8 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.css +++ b/frontend/src/app/_elements/column-table/column-table.component.css @@ -55,8 +55,8 @@ mat-slider { } #missingValuesHeader { - font-size: 12px; - line-height: 110% !important; + font-size: 13px; + line-height: 140% !important; } .verticalAlign { @@ -242,4 +242,24 @@ col:not(.col-disabled) { .col-first { background-color: rgb(1, 56, 86) !important; +} + + +/* mat-icon rotate */ + +.rotate { + animation: rotation 3s infinite linear; +} + +.rotate:hover { + cursor: pointer; +} + +@keyframes rotation { + from { + transform: rotate(0deg); + } + to { + transform: rotate(359deg); + } }
\ 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 42c43138..22c9841f 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -100,10 +100,11 @@ <tr> <th>Tip</th> <td *ngFor="let colInfo of dataset.columnInfo; let i = index" class="pad-fix" [ngClass]="{'text-disabled' : !columnsChecked[i]}"> - <mat-form-field> - <mat-select matNativeControl [(value)]="colInfo.isNumber" [disabled]="!columnsChecked[i]"> - <mat-option [value]="false">Kategorijski</mat-option> - <mat-option [value]="true">Numerički</mat-option> + <p class="verticalAlign text-left" style="font-size:13px;" *ngIf="!colInfo.isNumber">Kategorijski</p> + <mat-form-field *ngIf="colInfo.isNumber"> + <mat-select matNativeControl [(value)]="colInfo.columnType" [disabled]="!columnsChecked[i]"> + <mat-option [value]="ColumnType.categorical">Kategorijski</mat-option> + <mat-option [value]="ColumnType.numerical">Numerički</mat-option> </mat-select> </mat-form-field> </td> @@ -111,14 +112,14 @@ <tr class="graphics-row"> <th class="no-pad">Grafik</th> <td class="no-pad" *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'graphic-class' : !columnsChecked[i]}"> - <app-box-plot *ngIf="colInfo.isNumber" [width]="150" [height]="150"></app-box-plot> - <app-pie-chart *ngIf="!colInfo.isNumber" [width]="150" [height]="150"></app-pie-chart> + <app-box-plot *ngIf="colInfo.columnType == ColumnType.numerical" [width]="150" [height]="150"></app-box-plot> + <app-pie-chart *ngIf="colInfo.columnType == ColumnType.categorical" [width]="150" [height]="150"></app-pie-chart> </td> </tr> <tr> <th class="border-bottom">Statistika</th> <td *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'text-disabled' : !columnsChecked[i]}"> - <span *ngIf="colInfo.isNumber"> + <span *ngIf="colInfo.columnType == ColumnType.numerical"> Mean: {{colInfo.mean}}<br> Median: {{colInfo.median}}<br> Min: {{colInfo.min}}<br> @@ -128,7 +129,7 @@ Q3: {{colInfo.q3}}<br> --> </span> - <div class="text-overflow" *ngIf="!colInfo.isNumber"> + <div class="text-overflow" *ngIf="colInfo.columnType == ColumnType.categorical"> <span *ngFor="let uniqueValue of colInfo.uniqueValues | slice:0:6; let i = index"> {{uniqueValue}}<br><!-- TODO na ML-u: broj ponavljanja unique values-a u zagradi nek pise --> </span> @@ -138,7 +139,7 @@ <tr style="padding: 0"> <th class="brighter cell-align long" (click)="openEncodingDialog()"> <span class="verticalAlign">Enkodiranje</span> - <span class="material-icons-round verticalAlign">settings</span> + <span class="material-icons-round verticalAlign rotate">settings</span> </th> <td *ngFor="let colInfo of dataset.columnInfo; let i = index" class="pad-fix" [ngClass]="{'text-disabled' : !columnsChecked[i]}"> <mat-form-field> @@ -152,8 +153,8 @@ </tr> <tr> <th class="brighter cell-align" (click)="openMissingValuesDialog()"> - <div id="missingValuesHeader">Regulisanje<br>nedostajućih<br>vrednosti<br></div> - <span class="material-icons-round">settings</span> + <div id="missingValuesHeader">Nedostajuće<br>vrednosti<br></div> + <span class="material-icons-round rotate">settings</span> </th> <td *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'text-disabled' : !columnsChecked[i]}"> @@ -164,9 +165,9 @@ </div> </button> <mat-menu #menu="matMenu"> - <button mat-menu-item (click)="MissValsDeleteClicked($event, NullValueOptions.DeleteColumns, i)" value={{colInfo.columnName}}>Obriši kolonu</button> + <!--<button mat-menu-item (click)="MissValsDeleteClicked($event, NullValueOptions.DeleteColumns, i)" value={{colInfo.columnName}}>Obriši kolonu</button>--> <button mat-menu-item (click)="MissValsDeleteClicked($event, NullValueOptions.DeleteRows, i)" value={{colInfo.columnName}}>Obriši redove</button> - <button mat-menu-item [matMenuTriggerFor]="fillWith">Popuni sa ____</button> + <button mat-menu-item [matMenuTriggerFor]="fillWith">Popuni sa</button> </mat-menu> <mat-menu #fillWith="matMenu"> 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 4499196c..e4c41cd8 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -1,5 +1,5 @@ import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChildren } from '@angular/core'; -import Dataset from 'src/app/_data/Dataset'; +import Dataset, { ColumnType } 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'; @@ -23,6 +23,7 @@ export class ColumnTableComponent implements AfterViewInit { Object = Object; Encoding = Encoding; NullValueOptions = NullValueOptions; + ColumnType = ColumnType; tableData?: any[][]; nullValOption: string[] = []; @@ -35,7 +36,9 @@ export class ColumnTableComponent implements AfterViewInit { ngAfterViewInit(): void { this.datasetService.getMyDatasets().subscribe((datasets) => { - this.dataset = datasets[0]; + this.dataset = datasets[1]; + + this.setColumnTypeInitial(); this.experiment = new Experiment(); this.dataset.columnInfo.forEach(column => { this.columnsChecked.push(true); @@ -57,6 +60,14 @@ export class ColumnTableComponent implements AfterViewInit { }); } + setColumnTypeInitial() { + if (this.dataset != undefined) { + for (let i = 0; i < this.dataset.columnInfo.length; i++) { + this.dataset.columnInfo[i].columnType = (this.dataset.columnInfo[i].isNumber) ? ColumnType.numerical : ColumnType.categorical; + } + } + } + setDeleteColumnsForMissingValTreatment() { if (this.experiment != undefined) { this.experiment.nullValues = NullValueOptions.DeleteRows; |