diff options
6 files changed, 62 insertions, 30 deletions
diff --git a/backend/api/api/Models/Dataset.cs b/backend/api/api/Models/Dataset.cs index 0faa43d5..a01f3cf7 100644 --- a/backend/api/api/Models/Dataset.cs +++ b/backend/api/api/Models/Dataset.cs @@ -22,7 +22,7 @@ namespace api.Models public DateTime dateCreated { get; set; } public DateTime lastUpdated { get; set; } public string delimiter { get; set; } - public bool hasHeader { get; set; } + //public bool hasHeader { get; set; } public ColumnInfo[] columnInfo { get; set; } public int rowCount { get; set; } diff --git a/backend/api/api/Services/FillAnEmptyDb.cs b/backend/api/api/Services/FillAnEmptyDb.cs index 062eada3..2690ba93 100644 --- a/backend/api/api/Services/FillAnEmptyDb.cs +++ b/backend/api/api/Services/FillAnEmptyDb.cs @@ -63,9 +63,9 @@ namespace api.Services dataset.dateCreated = DateTime.Now; dataset.lastUpdated = DateTime.Now; dataset.delimiter = ""; - dataset.hasHeader = true; + //dataset.hasHeader = true; dataset.columnInfo = new ColumnInfo[] { }; - dataset.columnInfo = new[] + /*dataset.columnInfo = new[] { new ColumnInfo( "PassengerId", true, 0, 446, 1, 891, 446, new string[]{ }), new ColumnInfo( "Survived", true, 0, 0.38383838534355164f, 0, 1, 0, new string[]{ }), @@ -79,7 +79,7 @@ namespace api.Services new ColumnInfo( "Fare", true, 0, 32.20420837402344f, 0, 512.3292236328125f, 14.45419979095459f, new string[]{ }), new ColumnInfo( "Cabin", false, 687, 0, 0, 0, 0, new string[]{ "B96 B98", "G6", "C23 C25 C27", "C22 C26", "F33", "F2", "E101", "D", "C78", "C93" }), new ColumnInfo( "Embarked", false, 2, 0.3815937042236328f, 0, 6, 0, new string[]{ "S", "C", "Q" }), - }; + };*/ dataset.rowCount = 891; dataset.nullCols = 3; dataset.nullRows = 708; @@ -179,8 +179,8 @@ namespace api.Services dataset.dateCreated = DateTime.Now; dataset.lastUpdated = DateTime.Now; dataset.delimiter = ""; - dataset.hasHeader = true; - dataset.columnInfo = new[] + //dataset.hasHeader = true; + /*dataset.columnInfo = new[] { new ColumnInfo( "Unnamed: 0", true, 0, 26969.5f, 0, 53939, 26969.5f, new string[]{ }), new ColumnInfo( "carat", true, 0, 0.7979397773742676f, 0.20000000298023224f, 5.010000228881836f, 0.699999988079071f, new string[]{ }), @@ -193,7 +193,7 @@ namespace api.Services new ColumnInfo( "x", true, 0, 5.731157302856445f, 0, 10.739999771118164f, 5.699999809265137f, new string[]{ }), new ColumnInfo( "y", true, 0, 5.73452615737915f, 0, 58.900001525878906f, 5.710000038146973f, new string[]{ }), new ColumnInfo( "z", true, 0, 3.538733720779419f, 0, 31.799999237060547f, 3.5299999713897705f, new string[]{ }) - }; + };*/ dataset.rowCount = 53940; dataset.nullCols = 0; dataset.nullRows = 0; @@ -297,15 +297,15 @@ namespace api.Services dataset.dateCreated = DateTime.Now; dataset.lastUpdated = DateTime.Now; dataset.delimiter = ""; - dataset.hasHeader = true; - dataset.columnInfo = new[] + //dataset.hasHeader = true; + /*dataset.columnInfo = new[] { new ColumnInfo( "sepal_length", true, 0, 5.8433332443237305f, 4.300000190734863f, 7.900000095367432f, 5.800000190734863f, new string[]{ }), new ColumnInfo( "sepal_width", true, 0, 3.053999900817871f, 2, 4.400000095367432f, 3, new string[]{ }), new ColumnInfo( "petal_length", true, 0, 3.758666753768921f, 1, 6.900000095367432f, 4.349999904632568f, new string[]{ }), new ColumnInfo( "petal_width", true, 0, 1.1986666917800903f, 0.10000000149011612f, 2.5f, 1.2999999523162842f, new string[]{}), new ColumnInfo( "class", false, 0, 0, 0, 0, 0, new string[]{ "Iris-setosa", "Iris-versicolor", "Iris-virginica" }), - }; + };*/ dataset.nullCols = 150; dataset.nullRows = 0; dataset.isPreProcess = true; diff --git a/frontend/src/app/_data/Dataset.ts b/frontend/src/app/_data/Dataset.ts index 517371c5..38cb15dd 100644 --- a/frontend/src/app/_data/Dataset.ts +++ b/frontend/src/app/_data/Dataset.ts @@ -41,10 +41,10 @@ export class ColumnInfo { public q1?:number, public q3?: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 557b7be3..fac82bc2 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 3f958aee..1946c1f1 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'; @@ -22,6 +22,7 @@ export class ColumnTableComponent implements AfterViewInit { Object = Object; Encoding = Encoding; NullValueOptions = NullValueOptions; + ColumnType = ColumnType; tableData?: any[][]; nullValOption: string[] = []; @@ -34,7 +35,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); @@ -56,6 +59,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; |