diff options
Diffstat (limited to 'frontend/src')
5 files changed, 85 insertions, 32 deletions
diff --git a/frontend/src/app/_data/Dataset.ts b/frontend/src/app/_data/Dataset.ts index e8207718..36eced88 100644 --- a/frontend/src/app/_data/Dataset.ts +++ b/frontend/src/app/_data/Dataset.ts @@ -29,6 +29,7 @@ export default class Dataset extends FolderFile { export class ColumnInfo { constructor( public columnName: string = '', + public columnType: ColumnType, public isNumber: boolean = false, public numNulls: number = 0, public uniqueValues?: string[], @@ -36,5 +37,15 @@ export class ColumnInfo { public mean?: number, public min?: number, public max?: number - ) { } + ) { + if (isNumber) + columnType = ColumnType.numerical; + else + columnType = ColumnType.categorical; + } } + +export enum ColumnType { + categorical = "Kategorijski", + numerical = "Numerički" +}
\ No newline at end of file diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts index 3faa4794..d6f4b6ec 100644 --- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts +++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts @@ -27,8 +27,8 @@ export class BoxPlotComponent implements AfterViewInit { labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/], datasets: [{ label: 'Dataset 1', - backgroundColor: 'rgba(0, 65, 101, 1.0)', - borderColor: '#0063AB', + backgroundColor: '#0063AB', + borderColor: '#dfd7d7', borderWidth: 1, outlierColor: '#999999', scaleFontColor: '#0063AB', @@ -78,7 +78,7 @@ export class BoxPlotComponent implements AfterViewInit { scales : { x: { ticks: { - color: 'rgba(0, 65, 101, 1.0)' + color: '#dfd7d7' }, grid: { color: "rgba(0, 99, 171, 0.5)" @@ -88,7 +88,7 @@ export class BoxPlotComponent implements AfterViewInit { min: -50, max: 200, ticks: { - color: 'rgba(0, 65, 101, 1.0)' + color: '#dfd7d7' }, grid: { color: "rgba(0, 99, 171, 0.5)" 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 108efb32..5dc2e9ec 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.css +++ b/frontend/src/app/_elements/column-table/column-table.component.css @@ -3,7 +3,6 @@ table.fixed { display: block; overflow-x: auto; white-space: nowrap; - border: 1px solid var(--ns-primary-50); font-size: 12px; border-radius: 4px; } @@ -18,7 +17,6 @@ table.fixed td { max-width: 200px; min-width: 200px; vertical-align: middle; - background-color: var(--ns-bg-dark-100); margin: 4px; } @@ -27,13 +25,12 @@ table.fixed th { max-width: 120px; min-width: 120px; vertical-align: middle; - background-color: var(--ns-bg-dark-100); + background-color: var(--ns-primary-50); font-size: 14px; } table.fixed th:first-child { text-align: center; - background-color: var(--ns-primary-25); } .columnNames { @@ -107,7 +104,7 @@ table ::ng-deep .mat-form-field-wrapper { } .graphic-class { - background-color: white !important; + opacity: 0.5; } @@ -220,4 +217,29 @@ table ::ng-deep .mat-form-field-wrapper { .long { height: 3rem; +} + +.col-disabled { + background-color: rgb(0, 45, 69); +} + +.text-disabled { + color: gray; +} + +.header-disabled { + color: gray; +} + +.menu-disabled { + pointer-events: none; + opacity: .5; +} + +col:not(.col-disabled) { + background-color: var(--ns-bg-dark-100); +} + +.col-first { + background-color: rgb(1, 56, 86) !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 53cb3551..42c43138 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -4,11 +4,12 @@ {{tab.name}} </a> </div> + <!-- <button mat-button class="p-1 folder-tab-end rounded-top"> Kolone <mat-icon>keyboard_double_arrow_down</mat-icon> - <!--meni ovde--> </button> + --> </div> <div id="folder-table" *ngIf="dataset && experiment"> <!--<div [ngSwitch]="tabToDisplay">--> @@ -16,13 +17,17 @@ <div [ngClass]="{'hidden': tabToDisplay != Table.Data}"> <table class="table text-offwhite fixed bg-blur"> + <colgroup> + <col class="col-first"> + <col *ngFor="let column of dataset.columnInfo; let i = index" [ngClass]="{'col-disabled' : !experiment.inputColumns.includes(column.columnName)}"> + </colgroup> <thead> <tr> <th>#</th> - <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index"> + <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'header-disabled' : !columnsChecked[i]}"> <div class="cell-align"> #{{i + 1}} {{colInfo.columnName}} - <mat-checkbox color="primary" checked (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox> + <mat-checkbox color="primary" [(ngModel)]="columnsChecked[i]" (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox> </div> </th> </tr> @@ -30,7 +35,7 @@ <tbody> <tr *ngFor="let row of tableData; let i = index"> <th>#{{i}}</th> - <td *ngFor="let col of row; let j = index"> + <td *ngFor="let col of row; let j = index" [ngClass]="{'text-disabled' : !columnsChecked[j]}"> <div class="text-overflow"> {{col}} </div> @@ -42,22 +47,29 @@ <div [ngClass]="{'hidden': tabToDisplay != Table.CorrelationMatrix}"> <table class="table text-offwhite fixed bg-blur"> + <colgroup> + <col class="col-first"> + <col *ngFor="let column of dataset.columnInfo; let i = index" [ngClass]="{'col-disabled' : !experiment.inputColumns.includes(column.columnName)}"> + </colgroup> <thead> <tr> - <th>Naziv</th> - <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index"> - #{{i + 1}} {{colInfo.columnName}} + <th>Kolona</th> + <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'header-disabled' : !columnsChecked[i]}"> + <div class="cell-align"> + #{{i + 1}} {{colInfo.columnName}} + <mat-checkbox color="primary" [(ngModel)]="columnsChecked[i]" (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox> + </div> </th> </tr> </thead> <tbody> <tr *ngFor="let colInfo of dataset.columnInfo; let i = index"> - <th> + <th [ngClass]="{'header-disabled col-disabled' : !columnsChecked[i]}"> <div class="text-left"> {{colInfo.columnName}} </div> </th> - <td *ngFor="let colInfo of dataset.columnInfo; let j = index"> + <td *ngFor="let colInfo of dataset.columnInfo; let j = index" [ngClass]="{'text-disabled col-disabled' : !columnsChecked[j] || !columnsChecked[i]}"> <div class="text-overflow"> 0.1 </div> @@ -69,13 +81,17 @@ <div [ngClass]="{'hidden': tabToDisplay != Table.Columns}"> <table class="table text-offwhite fixed bg-blur"> + <colgroup> + <col class="col-first"> + <col *ngFor="let column of dataset.columnInfo; let i = index" [ngClass]="{'col-disabled' : !experiment.inputColumns.includes(column.columnName)}"> + </colgroup> <thead> <tr> <th>Naziv</th> - <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index"> + <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'header-disabled' : !columnsChecked[i]}"> <div class="cell-align"> #{{i + 1}} {{colInfo.columnName}} - <mat-checkbox color="primary" checked (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox> + <mat-checkbox color="primary" [(ngModel)]="columnsChecked[i]" (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox> </div> </th> </tr> @@ -83,9 +99,9 @@ <tbody> <tr> <th>Tip</th> - <td *ngFor="let colInfo of dataset.columnInfo; let i = index" class="pad-fix"> + <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"> + <mat-select matNativeControl [(value)]="colInfo.isNumber" [disabled]="!columnsChecked[i]"> <mat-option [value]="false">Kategorijski</mat-option> <mat-option [value]="true">Numerički</mat-option> </mat-select> @@ -93,15 +109,15 @@ </td> </tr> <tr class="graphics-row"> - <th class="no-pad border-bottom">Grafik</th> - <td class="graphic-class no-pad" *ngFor="let colInfo of dataset.columnInfo; let i = index"> + <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> </td> </tr> <tr> - <th class="brighter">Statistika</th> - <td *ngFor="let colInfo of dataset.columnInfo; let i = index"> + <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"> Mean: {{colInfo.mean}}<br> Median: {{colInfo.median}}<br> @@ -124,9 +140,9 @@ <span class="verticalAlign">Enkodiranje</span> <span class="material-icons-round verticalAlign">settings</span> </th> - <td *ngFor="let colInfo of dataset.columnInfo; let i = index" class="pad-fix"> + <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)]="experiment.encodings[i].encoding"> + <mat-select matNativeControl [(value)]="experiment.encodings[i].encoding" [disabled]="!columnsChecked[i]"> <mat-option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)" [value]="option"> {{ optionName }} </mat-option> @@ -139,9 +155,9 @@ <div id="missingValuesHeader">Regulisanje<br>nedostajućih<br>vrednosti<br></div> <span class="material-icons-round">settings</span> </th> - <td *ngFor="let colInfo of dataset.columnInfo; let i = index"> + <td *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'text-disabled' : !columnsChecked[i]}"> - <button class="w-100" mat-raised-button [matMenuTriggerFor]="menu" id="main_{{colInfo.columnName}}" #nullValMenu> + <button class="w-100" mat-raised-button [ngClass]="{ 'menu-disabled' : !columnsChecked[i]}" [matMenuTriggerFor]="menu" id="main_{{colInfo.columnName}}" #nullValMenu> <div class="cell-align"> {{nullValOption[i]}} <mat-icon>arrow_drop_down</mat-icon> 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 9cabf190..4499196c 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -26,6 +26,8 @@ export class ColumnTableComponent implements AfterViewInit { 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 @@ -35,7 +37,9 @@ export class ColumnTableComponent implements AfterViewInit { this.datasetService.getMyDatasets().subscribe((datasets) => { this.dataset = datasets[0]; this.experiment = new Experiment(); - + this.dataset.columnInfo.forEach(column => { + this.columnsChecked.push(true); + }); console.log(datasets); for (let i = 0; i < this.dataset?.columnInfo.length; i++) { this.experiment?.inputColumns.push(this.dataset.columnInfo[i].columnName); |