From 3e07b3304b65fcab6740a05231999dfc453ffbb9 Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Mon, 25 Apr 2022 22:17:45 +0200
Subject: Column-table komponenta: prikazani i povezani naziv kolone, tip,
 grafik, statistika, enkoding i pocete nedostajuce vrednosti. Uradjene popup
 dialog komponente za encoding i missingvalues.

---
 .../column-table/column-table.component.css        |   5 +
 .../column-table/column-table.component.html       | 105 +++++++++++++++++++-
 .../column-table/column-table.component.ts         | 110 ++++++++++++++++++++-
 .../metric-view/metric-view.component.html         |   2 -
 4 files changed, 217 insertions(+), 5 deletions(-)

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

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 e69de29b..f65d7c3d 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.css
+++ b/frontend/src/app/_elements/column-table/column-table.component.css
@@ -0,0 +1,5 @@
+table {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+}
\ 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 7b18afc8..62699284 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.html
+++ b/frontend/src/app/_elements/column-table/column-table.component.html
@@ -1 +1,104 @@
-<p>column-table works!</p>
+<table *ngIf="dataset && experiment" class="table text-offwhite">
+    <thead>
+        <tr>
+            <th>Naziv</th>
+            <th *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                #{{i + 1}}&nbsp;&nbsp;{{colInfo.columnName}}
+                <input type="checkbox" class="btn-primary" checked (click)="changeInputColumns($event, colInfo.columnName)">
+            </th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <th>Tip</th>
+            <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                <mat-form-field>
+                    <select matNativeControl class="form-control btn-primary" (change)="changeColumnType($event, i)">
+                        <option [selected]="!colInfo.isNumber" value="Kategorijski">Kategorijski</option>
+                        <option [selected]="colInfo.isNumber" value="Numerički">Numerički</option>
+                    </select>
+                </mat-form-field>
+            </td>
+        </tr>
+        <tr>
+            <th>Grafik</th>
+            <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                <app-box-plot *ngIf="colInfo.isNumber"></app-box-plot>
+                <!--TODO: dodati [data]-->
+                <app-pie-chart *ngIf="!colInfo.isNumber"></app-pie-chart>
+            </td>
+        </tr>
+        <tr>
+            <th>Statistika</th>
+            <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                <span *ngIf="colInfo.isNumber">
+                    Mean: {{colInfo.mean}}<br>
+                    Median: {{colInfo.median}}<br>
+                    Min: {{colInfo.min}}<br>
+                    Max: {{colInfo.max}}<br>
+                    <!-- TODO na ML-u: Q1 i Q3 u statistici 
+                    Q1: {{colInfo.q1}}<br>
+                    Q3: {{colInfo.q3}}<br>
+                    -->
+                </span>
+                <span *ngIf="!colInfo.isNumber">
+                    <span *ngFor="let uniqueValue of colInfo.uniqueValues | slice:0:5; let i = index">
+                        {{uniqueValue}}<br><!-- TODO na ML-u: broj ponavljanja unique values-a u zagradi nek pise -->
+                    </span>
+                </span>
+            </td>
+        </tr>
+        <tr>
+            <th (click)="openEncodingDialog()">Enkoding&nbsp;
+                <span class="material-icons-round">settings</span>
+            </th>
+            <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                <mat-form-field>
+                    <select matNativeControl class="form-control btn-primary" [(ngModel)]="experiment.encodings[i].encoding">
+                        <option
+                            *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)"
+                            [value]="option">
+                            {{ optionName }}
+                        </option>
+                    </select>
+                </mat-form-field>
+            </td>
+        </tr>
+        <tr>
+            <th (click)="openMissingValuesDialog()">Regulisanje nedostajućih vrednosti&nbsp;
+                <span class="material-icons-round">settings</span>
+            </th>
+            <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                <!--
+                <mat-form-field appearance="fill">
+                    <mat-select matNativeControl>
+                        <mat-option [value]="NullValueOptions.DeleteColumns">Obriši kolonu</mat-option>
+                        <mat-option [value]="NullValueOptions.DeleteRows">Obriši redove</mat-option>
+                        <mat-option>Popuni sa _____
+                            <mat-select matNativeControl>
+                                <mat-option>a</mat-option>
+                                <mat-option>b</mat-option>
+                                <mat-option>c</mat-option>
+                            </mat-select>
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+            -->
+                <button mat-button [matMenuTriggerFor]="animals">Izabrana opcija</button>
+                <mat-menu #animals="matMenu">
+                    <button mat-menu-item>Obriši kolonu</button>
+                    <button mat-menu-item>Obriši redove</button>
+                    <button mat-menu-item [matMenuTriggerFor]="fillWith">Popuni sa ____</button>
+                </mat-menu>
+
+                <mat-menu #fillWith="matMenu">
+                    <button mat-menu-item [matMenuTriggerFor]="replaceWith">Unesi vrednost...</button>
+                </mat-menu>
+
+                <mat-menu #replaceWith="matMenu">
+                    <input type="text" mat-menu-item placeholder="Unesi vrednost...">
+                </mat-menu>
+            </td>
+        </tr>
+    </tbody>
+</table>
\ No newline at end of file
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 f8c5f5f3..18e38203 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.ts
+++ b/frontend/src/app/_elements/column-table/column-table.component.ts
@@ -1,4 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import Dataset 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';
 
 @Component({
   selector: 'app-column-table',
@@ -7,9 +13,109 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ColumnTableComponent implements OnInit {
 
-  constructor() { }
+  @Input() dataset?: Dataset;
+  @Input() experiment?: Experiment;
+
+  Object = Object;
+  Encoding = Encoding;
+  NullValueOptions = NullValueOptions;
+
+  constructor(private datasetService: DatasetsService, public dialog: MatDialog) { 
+    //ovo mi nece trebati jer primam dataset iz druge komponente
+    this.datasetService.getMyDatasets().subscribe((datasets) => {
+      this.dataset = datasets[0];
+      //console.log(this.dataset);
+      this.experiment = new Experiment();
+      for (let i = 0; i < this.dataset?.columnInfo.length; i++) {
+        this.experiment?.inputColumns.push(this.dataset.columnInfo[i].columnName);
+      }
+      this.resetColumnEncodings(Encoding.Label);
+    });
+  }
 
   ngOnInit(): void {
   }
 
+  changeInputColumns(target: any, columnName: string) {
+    if (this.experiment != undefined) {
+      if (target.currentTarget.checked) {
+        if (this.experiment.inputColumns.filter(x => x == columnName)[0] == undefined) {
+          this.experiment.inputColumns.push(columnName);
+        }
+      }
+      else {
+        this.experiment.inputColumns = this.experiment.inputColumns.filter(x => x != columnName);
+        //console.log("Input columns: ", this.experiment.inputColumns);
+        //TODO: da se zatamni kolona koja je unchecked
+      }
+    }
+  }
+
+  changeColumnType(target: any, indexOfCol: number) {
+    if (this.dataset != undefined) {
+      if (target.currentTarget.value == "Numerički") {
+        this.dataset.columnInfo[indexOfCol].isNumber = true;
+      }
+      else {
+        this.dataset.columnInfo[indexOfCol].isNumber = false;
+      }
+    }
+  }
+
+  resetColumnEncodings(encodingType: Encoding) {
+    if (this.experiment != undefined && this.dataset != undefined) {
+      this.experiment.encodings = [];
+      for (let i = 0; i < this.dataset?.columnInfo.length; i++) {
+        this.experiment.encodings.push(new ColumnEncoding(this.dataset?.columnInfo[i].columnName, encodingType));
+        //console.log(this.experiment.encodings);
+      }
+    }
+  }
+  openEncodingDialog() {
+      const dialogRef = this.dialog.open(EncodingDialogComponent, {
+        width: '300px'
+      });
+      dialogRef.afterClosed().subscribe(selectedEncoding => {
+        if (selectedEncoding != undefined)
+          this.resetColumnEncodings(selectedEncoding);
+      });
+  }
+
+  resetMissingValuesTreatment(selectedMissingValuesOption: NullValueOptions) {
+    if (this.experiment != undefined && this.dataset != undefined) {
+
+      if (selectedMissingValuesOption == NullValueOptions.DeleteColumns) {
+        this.experiment.nullValues = NullValueOptions.DeleteColumns;
+        this.experiment.nullValuesReplacers = [];
+        for (let i = 0; i < this.experiment.inputColumns.length; i++) {
+          this.experiment.nullValuesReplacers.push({
+            column: this.experiment.inputColumns[i],
+            option: NullValueOptions.DeleteColumns,
+            value: ""
+          });
+        }
+      } 
+      else if (selectedMissingValuesOption == NullValueOptions.DeleteRows) {
+        this.experiment.nullValues = NullValueOptions.DeleteRows;
+        this.experiment.nullValuesReplacers = [];
+        for (let i = 0; i < this.experiment.inputColumns.length; i++) {
+          this.experiment.nullValuesReplacers.push({
+            column: this.experiment.inputColumns[i],
+            option: NullValueOptions.DeleteRows,
+            value: ""
+          });
+        }
+      }
+
+    }
+  }
+  openMissingValuesDialog() {
+    const dialogRef = this.dialog.open(MissingvaluesDialogComponent, {
+      width: '400px'
+    });
+    dialogRef.afterClosed().subscribe(selectedMissingValuesOption => {
+      if (selectedMissingValuesOption != undefined) 
+        this.resetMissingValuesTreatment(selectedMissingValuesOption);
+    });
+  }
 }
diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.html b/frontend/src/app/_elements/metric-view/metric-view.component.html
index e7a4c547..3a6cce8d 100644
--- a/frontend/src/app/_elements/metric-view/metric-view.component.html
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.html
@@ -1,5 +1,3 @@
 <div>
-    <app-line-chart>
 
-    </app-line-chart>
 </div>
\ No newline at end of file
-- 
cgit v1.2.3