From a8a04c45c8941afde34ec0765a0e5f4051fe1f02 Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Tue, 26 Apr 2022 22:47:39 +0200
Subject: Dodat poziv back-u za deo fajla sa podacima (planirano stranicenje).
 Prikaz podataka iz dataseta u okviru glavne tabele. Uredjeni grafici za
 statistiku.

---
 .../column-table/column-table.component.html       | 31 ++++++++++++----------
 .../column-table/column-table.component.ts         | 12 +++++++--
 2 files changed, 27 insertions(+), 16 deletions(-)

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

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 1a5a5e81..8551f710 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.html
+++ b/frontend/src/app/_elements/column-table/column-table.component.html
@@ -23,9 +23,8 @@
         <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> -->
+                <app-box-plot *ngIf="colInfo.isNumber"></app-box-plot>
+                <app-pie-chart *ngIf="!colInfo.isNumber"></app-pie-chart>
             </td>
         </tr>
         <tr>
@@ -48,8 +47,8 @@
                 </span>
             </td>
         </tr>
-        <tr>
-            <th class="brighter" (click)="openEncodingDialog()">Enkoding&nbsp;
+        <tr style="padding: 0">
+            <th class="brighter" (click)="openEncodingDialog()">Enkoding
                 <span class="material-icons-round">settings</span>
             </th>
             <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
@@ -99,24 +98,28 @@
 
             </td>
         </tr>
-        <tr *ngFor="let element of [1, 2]; let i = index">
-            <th *ngIf="i == 0" rowspan="2">Vrednosti</th>
+        <tr *ngFor="let row of tableData; let i = index">
+            <th *ngIf="i == 0" [attr.rowspan]="tableData!.length">Vrednosti</th>
+
 
-            <td *ngFor="let colInfo of dataset.columnInfo; let j = index">
-                <!--<app-datatable [data]=""></app-datatable>-->ok
+            <td *ngFor="let col of row; let j = index">
+                <div style="overflow: auto">
+                    {{col}}
+                </div>
             </td>
         </tr>
     </tbody>
 </table>
 
 <div class="container text-offwhite belowColumn">
-    <div class="row " >
+    <div class="row ">
         <div class="col-sm slider rounded">
             <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 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="col-sm-3 d-flex pt-3">
             <mat-form-field appearance="fill" style="width: 270px;">
                 <mat-label>Tip problema</mat-label>
@@ -128,7 +131,7 @@
             </mat-form-field>
         </div>
         <div class="col-sm-3 d-flex pt-3">
-            <mat-form-field appearance="fill" >
+            <mat-form-field appearance="fill">
                 <mat-label>Izlazna kolona</mat-label>
                 <mat-select>
                     <mat-option *ngFor="let item of dataset?.columnInfo" [value]="item.columnName">{{item.columnName}}</mat-option>
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 f3aedd1b..9cb038bc 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.ts
+++ b/frontend/src/app/_elements/column-table/column-table.component.ts
@@ -8,6 +8,7 @@ import { MissingvaluesDialogComponent } from 'src/app/_modals/missingvalues-dial
 import { MatSliderChange } from '@angular/material/slider';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
+import { CsvParseService } from 'src/app/_services/csv-parse.service';
 
 @Component({
   selector: 'app-column-table',
@@ -24,9 +25,10 @@ export class ColumnTableComponent implements AfterViewInit {
   Encoding = Encoding;
   NullValueOptions = NullValueOptions;
   tableData?: any[][];
+  nesto = 10;
 
   testSetDistribution:number=70;
-  constructor(private datasetService: DatasetsService, public dialog: MatDialog) { 
+  constructor(private datasetService: DatasetsService, public csvParseService: CsvParseService, public dialog: MatDialog) { 
     //ovo mi nece trebati jer primam dataset iz druge komponente
   }
 
@@ -41,11 +43,17 @@ export class ColumnTableComponent implements AfterViewInit {
       this.resetColumnEncodings(Encoding.Label);
       this.setDeleteColumnsForMissingValTreatment();
 
-      /*this.tableData = this.datasetService.getDatasetFile(this.dataset._id).subscribe((file: string | undefined) => {
+      /*this.datasetService.getDatasetFile(this.dataset._id).subscribe((file: string | undefined) => {
         if (file) {
           //this.tableData = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter);
         }
       });*/
+      this.datasetService.getDatasetFilePartial(this.dataset.fileId, 0, 10).subscribe((response: string | undefined) => {
+        if (response && this.dataset != undefined) {
+          this.tableData = this.csvParseService.csvToArray(response, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "") ? "," : this.dataset.delimiter);
+          console.log(this.tableData);
+        }
+      });
     });
   }
 
-- 
cgit v1.2.3