aboutsummaryrefslogtreecommitdiff
path: root/frontend/src/app/_elements/column-table
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/app/_elements/column-table')
-rw-r--r--frontend/src/app/_elements/column-table/column-table.component.css24
-rw-r--r--frontend/src/app/_elements/column-table/column-table.component.html41
-rw-r--r--frontend/src/app/_elements/column-table/column-table.component.ts22
3 files changed, 51 insertions, 36 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 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..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>&nbsp;
- <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">
@@ -209,20 +210,6 @@
<div class="container-fluid text-offwhite belowColumn mt-3">
<div class="ns-row">
- <div class="ns-col slider rounded" style="border:1px solid var(--ns-primary)">
-
- <div class="text-center pt-3 pb-0 mb-0"><b>{{testSetDistribution}}%</b> : <b>{{100-testSetDistribution}}%</b></div>
- <div class="text-center pt-0 mt-0">Trening
- <mat-slider min="10" max="90" step="10" [(ngModel)]="testSetDistribution" (input)="updateTestSet($event)"></mat-slider>
- Test</div>
-
- </div>
- <div class="ns-col slider rounded" style="border:1px solid var(--ns-primary);margin-left: 10px;">
- <div class="text-center text-offwhite justify-content-center align-items-center">
- <mat-checkbox class="pt-4" color="accent">Nasumični redosled podataka</mat-checkbox>
- </div>
- </div>
-
<div class="break-2"></div>
<div class="ns-col rounded">
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..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,11 +1,10 @@
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';
import { MatDialog } from '@angular/material/dialog';
import { MissingvaluesDialogComponent } from 'src/app/_modals/missingvalues-dialog/missingvalues-dialog.component';
-import { MatSliderChange } from '@angular/material/slider';
import { MatCheckboxChange } from '@angular/material/checkbox';
import { CsvParseService } from 'src/app/_services/csv-parse.service';
@@ -23,19 +22,22 @@ export class ColumnTableComponent implements AfterViewInit {
Object = Object;
Encoding = Encoding;
NullValueOptions = NullValueOptions;
+ ColumnType = ColumnType;
tableData?: any[][];
nullValOption: string[] = [];
columnsChecked: boolean[] = []; //niz svih kolona
- testSetDistribution: number = 70;
+
constructor(private datasetService: DatasetsService, public csvParseService: CsvParseService, public dialog: MatDialog) {
//ovo mi nece trebati jer primam dataset iz druge komponente
}
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 +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;
@@ -145,9 +155,7 @@ export class ColumnTableComponent implements AfterViewInit {
this.resetMissingValuesTreatment(selectedMissingValuesOption);
});
}
- updateTestSet(event: MatSliderChange) {
- this.testSetDistribution = event.value!;
- }
+
MissValsDeleteClicked(event: Event, replacementType: NullValueOptions, index: number) {
generated by cgit v1.2.3 (git 2.39.1) at 2025-04-24 09:38:25 +0000