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.html       | 105 ++++++++++++++++++++-
 1 file changed, 104 insertions(+), 1 deletion(-)

(limited to 'frontend/src/app/_elements/column-table/column-table.component.html')

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
-- 
cgit v1.2.3