From 6a9016849d5b5e36897395efdb47c0aa39235c69 Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Sun, 8 May 2022 22:06:01 +0200
Subject: Column-table: enkodiranje numerickih kolona i izlazne kolone
 disabled; ispravljen bag kad korisnik ne cekira nijednu kolonu ili cekira
 jednu za koriscenje (upozorenje). Napravljene input varijable za
 prosledjivanje potrebnih vrednosti pie-chart i boxplot komponentama od strane
 column-table. Profile page: dodata klasa za hover odabir profilne slike.

---
 .../_charts/box-plot/box-plot.component.ts         |  8 ++++-
 .../_charts/pie-chart/pie-chart.component.ts       |  2 ++
 .../column-table/column-table.component.html       |  9 +++---
 .../column-table/column-table.component.ts         | 35 +++++++++++++++++-----
 4 files changed, 41 insertions(+), 13 deletions(-)

(limited to 'frontend/src/app/_elements')

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 d6f4b6ec..9addd6bb 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
@@ -18,7 +18,13 @@ export class BoxPlotComponent implements AfterViewInit {
 
   @Input()width?: number;
   @Input()height?: number;
-  
+  @Input()mean?: number;
+  @Input()median?: number;
+  @Input()min?: number;
+  @Input()max?: number;
+  @Input()q1?: number;
+  @Input()q3?: number;
+
   @ViewChild('boxplot') chartRef!: ElementRef;
   constructor() { }
 
diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
index f141f522..932ed963 100644
--- a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
+++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
@@ -10,6 +10,8 @@ export class PieChartComponent implements AfterViewInit {
 
   @Input()width?: number;
   @Input()height?: number;
+  @Input()uniqueValues?: string[] = [];
+  @Input()uniqueValuesPercent?: number[] = [];
   
   @ViewChild('piechart') chartRef!: ElementRef;
   constructor() { }
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 efc093d2..59c1899b 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.html
+++ b/frontend/src/app/_elements/column-table/column-table.component.html
@@ -113,8 +113,8 @@
                         <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="this.experiment.columnTypes[i] == ColumnType.numerical" [width]="150" [height]="150"></app-box-plot>
-                                <app-pie-chart *ngIf="this.experiment.columnTypes[i] == ColumnType.categorical" [width]="150" [height]="150"></app-pie-chart>
+                                <app-box-plot *ngIf="this.experiment.columnTypes[i] == ColumnType.numerical" [width]="150" [height]="150" [mean]="colInfo.mean" [median]="colInfo.median" [min]="colInfo.min" [max]="colInfo.max" [q1]="colInfo.q1" [q3]="colInfo.q3"></app-box-plot>
+                                <app-pie-chart *ngIf="this.experiment.columnTypes[i] == ColumnType.categorical" [width]="150" [height]="150" [uniqueValues]="colInfo.uniqueValues" [uniqueValuesPercent]="colInfo.uniqueValuesPercent"></app-pie-chart>
                             </td>
                         </tr>
                         <tr>
@@ -142,7 +142,7 @@
                             </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)]="experiment.encodings[i].encoding" [disabled]="!columnsChecked[i]" (selectionChange)="columnTableChangeDetected()">
+                                    <mat-select matNativeControl [(value)]="experiment.encodings[i].encoding" [disabled]="!columnsChecked[i] || experiment.columnTypes[i] == ColumnType.numerical || colInfo.columnName == experiment.outputColumn" (selectionChange)="columnTableChangeDetected()">
                                         <mat-option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)" [value]="option">
                                             {{ optionName }}
                                         </mat-option>
@@ -208,8 +208,9 @@
             <div class="ns-col rounded">
                 <mat-form-field appearance="fill" class="align-items-center justify-content-center pt-3 w-100">
                     <mat-label>Izlazna kolona</mat-label>
-                    <mat-select [(value)]="experiment.outputColumn" (selectionChange)="changeOutputColumn(this.experiment.inputColumns[0])">
+                    <mat-select [(value)]="experiment.outputColumn" (selectionChange)="changeProblemType()">
                         <mat-option *ngFor="let inputColumn of experiment.inputColumns" [value]="inputColumn">{{inputColumn}}</mat-option>
+                        <mat-option *ngIf="experiment.inputColumns.length == 0" value="-">-</mat-option>
                     </mat-select>
                 </mat-form-field>
             </div>
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 9085270f..0d17271d 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.ts
+++ b/frontend/src/app/_elements/column-table/column-table.component.ts
@@ -89,7 +89,10 @@ export class ColumnTableComponent implements AfterViewInit {
     }
   }
   resetOutputColumn() {
-    this.experiment.outputColumn = this.experiment.inputColumns[0];
+    if (this.experiment.inputColumns.length > 0)
+      this.experiment.outputColumn = this.experiment.inputColumns[0];
+    else 
+      this.experiment.outputColumn = '-';
   }
 
   setDeleteRowsForMissingValTreatment() {
@@ -112,7 +115,7 @@ export class ColumnTableComponent implements AfterViewInit {
 
   columnTypeChanged(columnName: string) {
     if (this.experiment.outputColumn == columnName)
-      this.changeOutputColumn(columnName);
+      this.changeProblemType();
     else
       this.columnTableChangeDetected();
   }
@@ -124,6 +127,8 @@ export class ColumnTableComponent implements AfterViewInit {
         if (this.experiment.inputColumns.filter(x => x == columnName)[0] == undefined) {
           this.experiment.inputColumns.push(columnName);
         }
+        if (this.experiment.inputColumns.length == 1)
+          this.experiment.outputColumn = this.experiment.inputColumns[0];
       }
       else {
         this.experiment.inputColumns = this.experiment.inputColumns.filter(x => x != columnName);
@@ -131,17 +136,21 @@ export class ColumnTableComponent implements AfterViewInit {
         //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);
-        if (columnName == this.experiment.outputColumn)
-          this.experiment.outputColumn = this.experiment.inputColumns[0];
+        if (columnName == this.experiment.outputColumn) {
+          if (this.experiment.inputColumns.length > 0)
+            this.experiment.outputColumn = this.experiment.inputColumns[0];
+          else 
+            this.experiment.outputColumn = '-';
+        }
       }
       this.columnTableChangeDetected();
     }
   }
 
-  changeOutputColumn(columnName: string) {
+  changeProblemType() {
     if (this.experiment != undefined && this.dataset != undefined) {
       let i = this.dataset.columnInfo.findIndex(x => x.columnName == this.experiment!.outputColumn);
-      if (this.experiment.columnTypes[i] == ColumnType.numerical) {
+      if (i == -1 || this.experiment.columnTypes[i] == ColumnType.numerical) {
         this.experiment.type = ProblemType.Regression;
       }
       else {
@@ -286,10 +295,20 @@ export class ColumnTableComponent implements AfterViewInit {
     return '0';
   }
   saveExperiment() {
-    this.openSaveExperimentDialog();
+    if (this.experiment.inputColumns.length == 0)
+      Shared.openDialog("Upozorenje", "Kako bi eksperiment bio uspešno izveden, neophodno je da izaberete barem dve kolone koje ćete koristiti.");
+    else if (this.experiment.inputColumns.length == 1)
+      Shared.openDialog("Upozorenje", "Kako bi eksperiment bio uspešno izveden, neophodno je da izaberete barem dve kolone koje ćete koristiti (mora postojati bar jedna ulazna i jedna izlazna kolona).");
+    else 
+      this.openSaveExperimentDialog();
   }
   updateExperiment() {
-    this.openUpdateExperimentDialog();
+    if (this.experiment.inputColumns.length == 0)
+      Shared.openDialog("Upozorenje", "Kako bi eksperiment bio uspešno izveden, neophodno je da izaberete barem dve kolone koje ćete koristiti.");
+    else if (this.experiment.inputColumns.length == 1)
+      Shared.openDialog("Upozorenje", "Kako bi eksperiment bio uspešno izveden, neophodno je da izaberete barem dve kolone koje ćete koristiti (mora postojati bar jedna ulazna i jedna izlazna kolona).");
+    else 
+      this.openUpdateExperimentDialog();
   }
 
 
-- 
cgit v1.2.3