From 1177f4b29b616a59af39f4aef11b116f9660357d Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Sat, 23 Apr 2022 01:28:46 +0200
Subject: Reorganizovao stranice i komponente.

---
 .../_elements/_charts/pie-chart/pie-chart.component.ts    | 15 +++++++++++++++
 1 file changed, 15 insertions(+)
 create mode 100644 frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts

(limited to 'frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts')

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
new file mode 100644
index 00000000..dde5cbab
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-pie-chart',
+  templateUrl: './pie-chart.component.html',
+  styleUrls: ['./pie-chart.component.css']
+})
+export class PieChartComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
-- 
cgit v1.2.3


From 0b38d83378e3ea03893eb60729e8bebbf9942949 Mon Sep 17 00:00:00 2001
From: Nevena Bojovic <nenabojov@gmail.com>
Date: Sun, 24 Apr 2022 18:17:18 +0200
Subject: Pie Chart dodat (Test Page).

---
 .../_charts/box-plot/box-plot.component.ts         |  3 ++-
 .../_charts/pie-chart/pie-chart.component.html     |  2 +-
 .../_charts/pie-chart/pie-chart.component.ts       | 27 +++++++++++++++++++---
 frontend/src/app/_pages/test/test.component.css    |  0
 frontend/src/app/_pages/test/test.component.html   |  1 +
 .../src/app/_pages/test/test.component.spec.ts     | 25 ++++++++++++++++++++
 frontend/src/app/_pages/test/test.component.ts     | 15 ++++++++++++
 frontend/src/app/app-routing.module.ts             |  4 +++-
 frontend/src/app/app.module.ts                     |  4 +++-
 9 files changed, 74 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/app/_pages/test/test.component.css
 create mode 100644 frontend/src/app/_pages/test/test.component.html
 create mode 100644 frontend/src/app/_pages/test/test.component.spec.ts
 create mode 100644 frontend/src/app/_pages/test/test.component.ts

(limited to 'frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts')

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 0cef8f90..56f87057 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
@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import {Chart} from 'node_modules/chart.js';
 
 @Component({
   selector: 'app-box-plot',
diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html
index 43a2d766..413aa6f3 100644
--- a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html
+++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html
@@ -1 +1 @@
-<p>pie-chart works!</p>
+<canvas #piechart width="800" height="450"></canvas>
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 dde5cbab..e7d79615 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
@@ -1,15 +1,36 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import {Chart} from 'node_modules/chart.js';
 
 @Component({
   selector: 'app-pie-chart',
   templateUrl: './pie-chart.component.html',
   styleUrls: ['./pie-chart.component.css']
 })
-export class PieChartComponent implements OnInit {
+export class PieChartComponent implements AfterViewInit {
 
+  @ViewChild('piechart') chartRef!: ElementRef;
   constructor() { }
 
-  ngOnInit(): void {
+  ngAfterViewInit(): void {
+  const myChart = new Chart(this.chartRef.nativeElement, {
+    type: 'pie',
+    data: {
+      labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
+      datasets: [{
+        label: "Population (millions)",
+        backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
+        data: [2478,5267,734,784,433]
+      }]
+    },
+    /*options: {
+      title: {
+        display: true,
+        text: 'Predicted world population (millions) in 2050'
+      }
+    }*/
+});
+
   }
 
+
 }
diff --git a/frontend/src/app/_pages/test/test.component.css b/frontend/src/app/_pages/test/test.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/app/_pages/test/test.component.html b/frontend/src/app/_pages/test/test.component.html
new file mode 100644
index 00000000..8085f77f
--- /dev/null
+++ b/frontend/src/app/_pages/test/test.component.html
@@ -0,0 +1 @@
+<app-pie-chart></app-pie-chart>
\ No newline at end of file
diff --git a/frontend/src/app/_pages/test/test.component.spec.ts b/frontend/src/app/_pages/test/test.component.spec.ts
new file mode 100644
index 00000000..e0f9bcc9
--- /dev/null
+++ b/frontend/src/app/_pages/test/test.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TestComponent } from './test.component';
+
+describe('TestComponent', () => {
+  let component: TestComponent;
+  let fixture: ComponentFixture<TestComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TestComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_pages/test/test.component.ts b/frontend/src/app/_pages/test/test.component.ts
new file mode 100644
index 00000000..b3c0d8cf
--- /dev/null
+++ b/frontend/src/app/_pages/test/test.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-test',
+  templateUrl: './test.component.html',
+  styleUrls: ['./test.component.css']
+})
+export class TestComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index cd742cfc..7a6b0890 100644
--- a/frontend/src/app/app-routing.module.ts
+++ b/frontend/src/app/app-routing.module.ts
@@ -7,13 +7,15 @@ import { ProfileComponent } from './_pages/profile/profile.component';
 import { PlaygroundComponent } from './_pages/playground/playground.component';
 import { ExperimentComponent } from './_pages/experiment/experiment.component';
 import { ArchiveComponent } from './_pages/archive/archive.component';
+import { TestComponent } from './_pages/test/test.component';
 
 const routes: Routes = [
   { path: '', component: HomeComponent, data: { title: 'Početna strana' } },
   { path: 'experiment', component: ExperimentComponent, data: { title: 'Eksperiment' } },
   { path: 'archive', component: ArchiveComponent, data: { title: 'Arhiva' } },
   { path: 'profile', component: ProfileComponent, canActivate: [AuthGuardService], data: { title: 'Profil' } },
-  { path: 'playground', component: PlaygroundComponent, data: { title: 'Zabava' } }
+  { path: 'playground', component: PlaygroundComponent, data: { title: 'Zabava' } },
+  { path: 'test', component: TestComponent, data: { title: 'Test' } }
 ];
 
 @NgModule({
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index da81fc4a..0271d64d 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -43,6 +43,7 @@ import { FormDatasetComponent } from './_elements/form-dataset/form-dataset.comp
 import { FormModelComponent } from './_elements/form-model/form-model.component';
 import { ColumnTableComponent } from './_elements/column-table/column-table.component';
 import { FolderComponent } from './_elements/folder/folder.component';
+import { TestComponent } from './_pages/test/test.component';
 
 export function initializeApp(appConfig: Configuration) {
   return () => appConfig.load();
@@ -74,7 +75,8 @@ export function initializeApp(appConfig: Configuration) {
     ColumnTableComponent,
     PieChartComponent,
     BoxPlotComponent,
-    FolderComponent
+    FolderComponent,
+    TestComponent
   ],
   imports: [
     BrowserModule,
-- 
cgit v1.2.3


From 5857e1c71eda1ee6455d55ef9f8d1c10f75a8457 Mon Sep 17 00:00:00 2001
From: Nevena Bojovic <nenabojov@gmail.com>
Date: Tue, 26 Apr 2022 21:05:08 +0200
Subject: Box plot-sredjeno.

---
 frontend/package-lock.json                         | 30 ++++++++++
 frontend/package.json                              |  1 +
 .../_charts/barchart/barchart.component.ts         |  1 +
 .../_charts/box-plot/box-plot.component.html       |  2 +-
 .../_charts/box-plot/box-plot.component.ts         | 64 ++++++++++++++++++++--
 .../doughnut-chart/doughnut-chart.component.html   |  2 +-
 .../doughnut-chart/doughnut-chart.component.ts     |  5 +-
 .../_charts/pie-chart/pie-chart.component.html     |  2 +-
 .../_charts/pie-chart/pie-chart.component.ts       |  7 ++-
 frontend/src/app/_pages/test/test.component.html   |  3 +-
 10 files changed, 106 insertions(+), 11 deletions(-)

(limited to 'frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts')

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 9c3256b2..710e9710 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -24,6 +24,7 @@
         "@microsoft/signalr": "^6.0.4",
         "@ng-bootstrap/ng-bootstrap": "^12.0.0",
         "@popperjs/core": "^2.10.2",
+        "@sgratzl/chartjs-chart-boxplot": "^3.7.1",
         "bootstrap": "^5.1.3",
         "chart.js": "^3.7.1",
         "csv-parser": "^3.0.0",
@@ -2701,6 +2702,22 @@
         "yarn": ">= 1.13.0"
       }
     },
+    "node_modules/@sgratzl/boxplots": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@sgratzl/boxplots/-/boxplots-1.3.0.tgz",
+      "integrity": "sha512-2BRWv+WOH58pwzSgP50buoXgxQic+4auz3BF0wiIUXS8D3QGkdBNgsNdQO1754Tm/0uEwly0R3WaCiGnoYWcmA=="
+    },
+    "node_modules/@sgratzl/chartjs-chart-boxplot": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/@sgratzl/chartjs-chart-boxplot/-/chartjs-chart-boxplot-3.7.1.tgz",
+      "integrity": "sha512-DYyOedq9CVFcDQZbRekyZAu/Bg0SUgaa19hsl4ikU85Di2DPdaiC/tFIkwHS6YB4L1GMWNvY+TDUODMYRFjhxA==",
+      "dependencies": {
+        "@sgratzl/boxplots": "^1.3.0"
+      },
+      "peerDependencies": {
+        "chart.js": "^3.7.0"
+      }
+    },
     "node_modules/@socket.io/base64-arraybuffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@socket.io/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
@@ -13722,6 +13739,19 @@
         "jsonc-parser": "3.0.0"
       }
     },
+    "@sgratzl/boxplots": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@sgratzl/boxplots/-/boxplots-1.3.0.tgz",
+      "integrity": "sha512-2BRWv+WOH58pwzSgP50buoXgxQic+4auz3BF0wiIUXS8D3QGkdBNgsNdQO1754Tm/0uEwly0R3WaCiGnoYWcmA=="
+    },
+    "@sgratzl/chartjs-chart-boxplot": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/@sgratzl/chartjs-chart-boxplot/-/chartjs-chart-boxplot-3.7.1.tgz",
+      "integrity": "sha512-DYyOedq9CVFcDQZbRekyZAu/Bg0SUgaa19hsl4ikU85Di2DPdaiC/tFIkwHS6YB4L1GMWNvY+TDUODMYRFjhxA==",
+      "requires": {
+        "@sgratzl/boxplots": "^1.3.0"
+      }
+    },
     "@socket.io/base64-arraybuffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/@socket.io/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index f2d1e991..369ac5c9 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -27,6 +27,7 @@
     "@microsoft/signalr": "^6.0.4",
     "@ng-bootstrap/ng-bootstrap": "^12.0.0",
     "@popperjs/core": "^2.10.2",
+    "@sgratzl/chartjs-chart-boxplot": "^3.7.1",
     "bootstrap": "^5.1.3",
     "chart.js": "^3.7.1",
     "csv-parser": "^3.0.0",
diff --git a/frontend/src/app/_elements/_charts/barchart/barchart.component.ts b/frontend/src/app/_elements/_charts/barchart/barchart.component.ts
index def64b7d..904335d7 100644
--- a/frontend/src/app/_elements/_charts/barchart/barchart.component.ts
+++ b/frontend/src/app/_elements/_charts/barchart/barchart.component.ts
@@ -8,6 +8,7 @@ import {Chart} from 'node_modules/chart.js';
 })
 export class BarchartComponent implements OnInit {
 
+  
   constructor() { }
 
     ngOnInit(){
diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html
index 2006eada..34c283c7 100644
--- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html
+++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html
@@ -1 +1 @@
-<p>Box-plot</p>
\ No newline at end of file
+<canvas #boxplot [width]="width" [height]="height"></canvas>
\ 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 0cef8f90..078e7176 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
@@ -1,15 +1,71 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { Chart, LinearScale, CategoryScale } from 'chart.js';
+import { BoxPlotController, BoxAndWiskers } from '@sgratzl/chartjs-chart-boxplot';
+
+function randomValues(count: number, min: number, max: number) {
+  const delta = max - min;
+  return Array.from({ length: count }).map(() => Math.random() * delta + min);
+}
+
+Chart.register(BoxPlotController, BoxAndWiskers, LinearScale, CategoryScale);
 
 @Component({
   selector: 'app-box-plot',
   templateUrl: './box-plot.component.html',
   styleUrls: ['./box-plot.component.css']
 })
-export class BoxPlotComponent implements OnInit {
+export class BoxPlotComponent implements AfterViewInit {
 
+  @Input()width: number = 800;
+  @Input()height: number = 450;
+  
+  @ViewChild('boxplot') chartRef!: ElementRef;
   constructor() { }
 
-  ngOnInit(): void {
-  }
+  boxplotData = {
+    // define label tree
+    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+    datasets: [{
+    label: 'Dataset 1',
+    backgroundColor: 'rgba(255,0,0,0.5)',
+    borderColor: 'red',
+    borderWidth: 1,
+    outlierColor: '#999999',
+    padding: 10,
+    itemRadius: 0,
+    data: [
+    randomValues(100, 0, 100),
+    randomValues(100, 0, 20),
+    randomValues(100, 20, 70),
+    randomValues(100, 60, 100),
+    randomValues(40, 50, 100),
+    randomValues(100, 60, 120),
+    randomValues(100, 80, 100)
+    ]
+    }, {
+    label: 'Dataset 2',
+    backgroundColor: 'rgba(0,0,255,0.5)',
+    borderColor: 'blue',
+    borderWidth: 1,
+    outlierColor: '#999999',
+    padding: 10,
+    itemRadius: 0,
+    data: [
+    randomValues(100, 60, 100),
+    randomValues(100, 0, 100),
+    randomValues(100, 0, 20),
+    randomValues(100, 20, 70),
+    randomValues(40, 60, 120),
+    randomValues(100, 20, 100),
+    randomValues(100, 80, 100)
+    ]
+    }]
+    };
+  ngAfterViewInit(): void {
+  const myChart = new Chart(this.chartRef.nativeElement, {
+    type: "boxplot",
+    data: this.boxplotData
+  });
+}
 
 }
diff --git a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html
index 4befc7dc..9c464534 100644
--- a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html
+++ b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html
@@ -1 +1 @@
-<canvas #doughnut width="800" height="450"></canvas>
+<canvas #doughnut [width]="width" [height]="height"></canvas>
diff --git a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts
index 4c7508fe..fc13289c 100644
--- a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts
+++ b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
 import {Chart} from 'node_modules/chart.js';
 
 @Component({
@@ -8,6 +8,9 @@ import {Chart} from 'node_modules/chart.js';
 })
 export class DoughnutChartComponent implements AfterViewInit {
 
+  @Input()width: number = 800;
+  @Input()height: number = 450;
+  
   @ViewChild('doughnut') chartRef!: ElementRef;
   constructor() { }
 
diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html
index 413aa6f3..aa3f26ab 100644
--- a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html
+++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html
@@ -1 +1 @@
-<canvas #piechart width="800" height="450"></canvas>
+<canvas #piechart [width]="width" [height]="height"></canvas>
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 e7d79615..3f2dbfaf 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
@@ -1,5 +1,5 @@
-import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import {Chart} from 'node_modules/chart.js';
+import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import {Chart} from 'chart.js';
 
 @Component({
   selector: 'app-pie-chart',
@@ -8,6 +8,9 @@ import {Chart} from 'node_modules/chart.js';
 })
 export class PieChartComponent implements AfterViewInit {
 
+  @Input()width: number = 800;
+  @Input()height: number = 450;
+  
   @ViewChild('piechart') chartRef!: ElementRef;
   constructor() { }
 
diff --git a/frontend/src/app/_pages/test/test.component.html b/frontend/src/app/_pages/test/test.component.html
index 625739f8..ec6ef0d6 100644
--- a/frontend/src/app/_pages/test/test.component.html
+++ b/frontend/src/app/_pages/test/test.component.html
@@ -1,3 +1,4 @@
 <app-pie-chart></app-pie-chart>
 <app-doughnut-chart></app-doughnut-chart>
-<app-barchart></app-barchart>
\ No newline at end of file
+<app-barchart></app-barchart>
+<app-box-plot></app-box-plot>
\ No newline at end of file
-- 
cgit v1.2.3


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.

---
 .../_charts/box-plot/box-plot.component.ts         | 62 ++++++++++++++--------
 .../_charts/pie-chart/pie-chart.component.ts       | 15 ++++--
 .../column-table/column-table.component.html       | 31 ++++++-----
 .../column-table/column-table.component.ts         | 12 ++++-
 frontend/src/app/_services/datasets.service.ts     |  3 ++
 5 files changed, 79 insertions(+), 44 deletions(-)

(limited to 'frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts')

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 078e7176..45e83e83 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
@@ -16,33 +16,32 @@ Chart.register(BoxPlotController, BoxAndWiskers, LinearScale, CategoryScale);
 })
 export class BoxPlotComponent implements AfterViewInit {
 
-  @Input()width: number = 800;
-  @Input()height: number = 450;
+  @Input()width: number = 600;
+  @Input()height: number = 800;
   
   @ViewChild('boxplot') chartRef!: ElementRef;
   constructor() { }
 
   boxplotData = {
     // define label tree
-    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-    datasets: [{
-    label: 'Dataset 1',
-    backgroundColor: 'rgba(255,0,0,0.5)',
-    borderColor: 'red',
-    borderWidth: 1,
-    outlierColor: '#999999',
-    padding: 10,
-    itemRadius: 0,
-    data: [
-    randomValues(100, 0, 100),
-    randomValues(100, 0, 20),
-    randomValues(100, 20, 70),
-    randomValues(100, 60, 100),
-    randomValues(40, 50, 100),
-    randomValues(100, 60, 120),
-    randomValues(100, 80, 100)
-    ]
-    }, {
+    labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/],
+      datasets: [{
+      label: 'Dataset 1',
+      backgroundColor: 'rgba(255,0,0,0.5)',
+      borderColor: 'red',
+      borderWidth: 1,
+      outlierColor: '#999999',
+      padding: 10,
+      itemRadius: 0,
+      data: [
+      randomValues(100, 0, 100),
+      /*randomValues(100, 0, 20),
+      randomValues(100, 20, 70),
+      randomValues(100, 60, 100),
+      randomValues(40, 50, 100),
+      randomValues(100, 60, 120),
+      randomValues(100, 80, 100)*/
+    ]}/*, {
     label: 'Dataset 2',
     backgroundColor: 'rgba(0,0,255,0.5)',
     borderColor: 'blue',
@@ -59,12 +58,29 @@ export class BoxPlotComponent implements AfterViewInit {
     randomValues(100, 20, 100),
     randomValues(100, 80, 100)
     ]
-    }]
+    }*/]
     };
   ngAfterViewInit(): void {
   const myChart = new Chart(this.chartRef.nativeElement, {
     type: "boxplot",
-    data: this.boxplotData
+    data: this.boxplotData,
+    options: {
+      /*title: {
+        display: true,
+        text: 'Predicted world population (millions) in 2050'
+      }*/
+      plugins:{   
+        legend: {
+          display: false
+                },
+             },
+             scales : {
+              y : {
+                  min: -50,
+                  max: 200
+              }
+          }
+    }
   });
 }
 
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 3f2dbfaf..248c9aa8 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
@@ -8,7 +8,7 @@ import {Chart} from 'chart.js';
 })
 export class PieChartComponent implements AfterViewInit {
 
-  @Input()width: number = 800;
+  @Input()width: number = 600;
   @Input()height: number = 450;
   
   @ViewChild('piechart') chartRef!: ElementRef;
@@ -25,12 +25,17 @@ export class PieChartComponent implements AfterViewInit {
         data: [2478,5267,734,784,433]
       }]
     },
-    /*options: {
-      title: {
+    options: {
+      /*title: {
         display: true,
         text: 'Predicted world population (millions) in 2050'
-      }
-    }*/
+      }*/
+      plugins:{   
+        legend: {
+          display: false
+                },
+             }
+    }
 });
 
   }
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);
+        }
+      });
     });
   }
 
diff --git a/frontend/src/app/_services/datasets.service.ts b/frontend/src/app/_services/datasets.service.ts
index ff96c39b..3b6e6b64 100644
--- a/frontend/src/app/_services/datasets.service.ts
+++ b/frontend/src/app/_services/datasets.service.ts
@@ -27,6 +27,9 @@ export class DatasetsService {
   getDatasetFile(fileId: any): any {
     return this.http.get(`${Configuration.settings.apiURL}/file/csvRead/true/${fileId}`, { headers: this.authService.authHeader(), responseType: 'text' });
   }
+  getDatasetFilePartial(fileId: any, startRow: number, rowNum: number): Observable<any> {
+    return this.http.get(`${Configuration.settings.apiURL}/file/csvRead/true/${fileId}/${startRow}/${rowNum}`, { headers: this.authService.authHeader(), responseType: 'text' });
+  }
 
   editDataset(dataset: Dataset): Observable<Dataset> {
     return this.http.put<Dataset>(`${Configuration.settings.apiURL}/dataset/` + dataset._id, dataset, { headers: this.authService.authHeader() });
-- 
cgit v1.2.3


From 98d3f4dedaabf62213b95dd8e7b67f9e8ab99006 Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Wed, 27 Apr 2022 19:52:48 +0200
Subject: Sredjen dizajn tabele. Sredjena difoltna vrednost za missingvalue.
 Grafici uredjeni.

---
 .../_charts/box-plot/box-plot.component.html       |  4 +-
 .../_charts/box-plot/box-plot.component.ts         | 25 +++++++--
 .../_charts/pie-chart/pie-chart.component.html     |  4 +-
 .../_charts/pie-chart/pie-chart.component.ts       | 10 ++--
 .../column-table/column-table.component.css        | 60 ++++++++++++++++++++++
 .../column-table/column-table.component.html       | 57 +++++++++++---------
 .../column-table/column-table.component.ts         | 38 +++++---------
 frontend/src/styles/helper.css                     |  6 +++
 frontend/src/styles/theme.css                      |  3 +-
 9 files changed, 143 insertions(+), 64 deletions(-)

(limited to 'frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts')

diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html
index 34c283c7..688eafae 100644
--- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html
+++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html
@@ -1 +1,3 @@
-<canvas #boxplot [width]="width" [height]="height"></canvas>
\ No newline at end of file
+<div class="chart-wrapper">
+    <canvas #boxplot [width]="width" [height]="height"></canvas>
+</div>
\ 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 45e83e83..3faa4794 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
@@ -16,8 +16,8 @@ Chart.register(BoxPlotController, BoxAndWiskers, LinearScale, CategoryScale);
 })
 export class BoxPlotComponent implements AfterViewInit {
 
-  @Input()width: number = 600;
-  @Input()height: number = 800;
+  @Input()width?: number;
+  @Input()height?: number;
   
   @ViewChild('boxplot') chartRef!: ElementRef;
   constructor() { }
@@ -27,10 +27,11 @@ export class BoxPlotComponent implements AfterViewInit {
     labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/],
       datasets: [{
       label: 'Dataset 1',
-      backgroundColor: 'rgba(255,0,0,0.5)',
-      borderColor: 'red',
+      backgroundColor: 'rgba(0, 65, 101, 1.0)',
+      borderColor: '#0063AB',
       borderWidth: 1,
       outlierColor: '#999999',
+      scaleFontColor: '#0063AB',
       padding: 10,
       itemRadius: 0,
       data: [
@@ -75,9 +76,23 @@ export class BoxPlotComponent implements AfterViewInit {
                 },
              },
              scales : {
+               x: {
+                ticks: {
+                  color: 'rgba(0, 65, 101, 1.0)'
+                },
+                grid: {
+                  color: "rgba(0, 99, 171, 0.5)"
+                }
+               },
               y : {
                   min: -50,
-                  max: 200
+                  max: 200,
+                  ticks: {
+                    color: 'rgba(0, 65, 101, 1.0)'
+                  },
+                  grid: {
+                    color: "rgba(0, 99, 171, 0.5)"
+                  }
               }
           }
     }
diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html
index aa3f26ab..7faf3af0 100644
--- a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html
+++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html
@@ -1 +1,3 @@
-<canvas #piechart [width]="width" [height]="height"></canvas>
+<div class="chart-wrapper">
+    <canvas #piechart [width]="width" [height]="height"></canvas>
+</div>
\ No newline at end of file
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 248c9aa8..f141f522 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
@@ -8,8 +8,8 @@ import {Chart} from 'chart.js';
 })
 export class PieChartComponent implements AfterViewInit {
 
-  @Input()width: number = 600;
-  @Input()height: number = 450;
+  @Input()width?: number;
+  @Input()height?: number;
   
   @ViewChild('piechart') chartRef!: ElementRef;
   constructor() { }
@@ -22,7 +22,7 @@ export class PieChartComponent implements AfterViewInit {
       datasets: [{
         label: "Population (millions)",
         backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
-        data: [2478,5267,734,784,433]
+        data: [2478,5267,734,784,433],
       }]
     },
     options: {
@@ -34,7 +34,9 @@ export class PieChartComponent implements AfterViewInit {
         legend: {
           display: false
                 },
-             }
+             },
+             layout: {
+              padding: 15}
     }
 });
 
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 0db50cdb..1e7d4745 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.css
+++ b/frontend/src/app/_elements/column-table/column-table.component.css
@@ -3,18 +3,25 @@ table.fixed {
     display: block;
     overflow-x: auto;
     white-space: nowrap;
+    border: 1px solid var(--ns-primary-50);
+    font-size: 12px;
+    border-radius: 4px;
 }
 
 table.fixed td {
     overflow: hidden;
     max-width: 200px;
     vertical-align: middle;
+    background-color: var(--ns-bg-dark-100);
+    margin: 4px;
 }
 
 table.fixed th {
     overflow: hidden;
     max-width: 350px;
     vertical-align: middle;
+    background-color: var(--ns-bg-dark-100);
+    font-size: 14px;
 }
 
 table.fixed th:first-child {
@@ -28,6 +35,11 @@ table.fixed th:first-child {
 
 .brighter {
     background-color: var(--ns-primary) !important;
+    border-color: var(--offwhite);
+}
+
+.border-bottom {
+    border-bottom-color: var(--offwhite) !important;
 }
 
 mat-slider {
@@ -40,4 +52,52 @@ mat-slider {
 
 .slider {
     background-color: var(--ns-bg-dark-100);
+}
+
+#missingValuesHeader {
+    font-size: 12px;
+    line-height: 110% !important;
+}
+
+.verticalAlign {
+    vertical-align: center;
+}
+
+.cell-align {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%;
+}
+
+table ::ng-deep .mat-form-field-wrapper {
+    margin-top: -2rem;
+}
+
+.graphics-row {
+    height: 100px;
+    padding: 1px;
+    margin: 0;
+}
+
+.no-pad {
+    padding: 1px;
+    margin: 0;
+}
+
+.text-overflow {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.row-height {
+    height: 30px;
+    border: none;
+    outline: none;
+}
+
+.graphic-class {
+    background-color: white !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 55c07b87..92a4699a 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.html
+++ b/frontend/src/app/_elements/column-table/column-table.component.html
@@ -3,8 +3,10 @@
         <tr>
             <th>Naziv</th>
             <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index">
-                #{{i + 1}}&nbsp;&nbsp;{{colInfo.columnName}}
-                <mat-checkbox checked (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox>
+                <div class="cell-align">
+                    #{{i + 1}}&nbsp;&nbsp;{{colInfo.columnName}}
+                    <mat-checkbox checked (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox>
+                </div>
             </th>
         </tr>
     </thead>
@@ -20,11 +22,11 @@
                 </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>
-                <app-pie-chart *ngIf="!colInfo.isNumber"></app-pie-chart>
+        <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">
+                <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>
@@ -40,16 +42,17 @@
                     Q3: {{colInfo.q3}}<br>
                     -->
                 </span>
-                <span *ngIf="!colInfo.isNumber">
+                <div class="text-overflow" *ngIf="!colInfo.isNumber">
                     <span *ngFor="let uniqueValue of colInfo.uniqueValues | slice:0:6; let i = index">
                         {{uniqueValue}}<br><!-- TODO na ML-u: broj ponavljanja unique values-a u zagradi nek pise -->
                     </span>
-                </span>
+                </div>
             </td>
         </tr>
         <tr style="padding: 0">
-            <th class="brighter" (click)="openEncodingDialog()">Enkoding
-                <span class="material-icons-round">settings</span>
+            <th class="brighter cell-align" (click)="openEncodingDialog()">
+                <span class="verticalAlign">Enkodiranje</span>&nbsp;
+                <span class="material-icons-round verticalAlign">settings</span>
             </th>
             <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
                 <mat-form-field>
@@ -62,25 +65,29 @@
             </td>
         </tr>
         <tr>
-            <th class="brighter" (click)="openMissingValuesDialog()">Regulisanje<br>nedostajućih<br>vrednosti<br>
+            <th class="brighter cell-align" (click)="openMissingValuesDialog()">
+                <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">
 
-                <button mat-button [matMenuTriggerFor]="menu" id="main_{{colInfo.columnName}}" #nullValMenu>
-                    Prikaži opcije<span class="material-icons">arrow_drop_down</span>
+                <button class="w-100" mat-raised-button [matMenuTriggerFor]="menu" id="main_{{colInfo.columnName}}" #nullValMenu>
+                    <div class="cell-align">
+                        {{nullValOption[i]}}
+                        <mat-icon>arrow_drop_down</mat-icon>
+                    </div>
                 </button>
                 <mat-menu #menu="matMenu">
-                    <button mat-menu-item (click)="MissValsDeleteClicked($event, NullValueOptions.DeleteColumns)" value={{colInfo.columnName}}>Obriši kolonu</button>
-                    <button mat-menu-item (click)="MissValsDeleteClicked($event, NullValueOptions.DeleteRows)" value={{colInfo.columnName}}>Obriši redove</button>
+                    <button mat-menu-item (click)="MissValsDeleteClicked($event, NullValueOptions.DeleteColumns, i)" value={{colInfo.columnName}}>Obriši kolonu</button>
+                    <button mat-menu-item (click)="MissValsDeleteClicked($event, NullValueOptions.DeleteRows, i)" value={{colInfo.columnName}}>Obriši redove</button>
                     <button mat-menu-item [matMenuTriggerFor]="fillWith">Popuni sa ____</button>
                 </mat-menu>
 
                 <mat-menu #fillWith="matMenu">
-                    <button *ngIf="colInfo.isNumber" mat-menu-item (click)="MissValsReplaceClicked($event, colInfo.columnName)" value={{colInfo.mean}}>Mean ({{colInfo.mean}})</button>
-                    <button *ngIf="colInfo.isNumber" mat-menu-item (click)="MissValsReplaceClicked($event, colInfo.columnName)" value={{colInfo.median}}>Median ({{colInfo.median}})</button>
-                    <button *ngIf="colInfo.isNumber" mat-menu-item (click)="MissValsReplaceClicked($event, colInfo.columnName)" value={{colInfo.max}}>Max ({{colInfo.max}})</button>
-                    <button *ngIf="colInfo.isNumber" mat-menu-item (click)="MissValsReplaceClicked($event, colInfo.columnName)" value={{colInfo.min}}>Min ({{colInfo.min}})</button>
+                    <button *ngIf="colInfo.isNumber" mat-menu-item (click)="MissValsReplaceClicked($event, colInfo.columnName, i)" value={{colInfo.mean}}>Mean ({{colInfo.mean}})</button>
+                    <button *ngIf="colInfo.isNumber" mat-menu-item (click)="MissValsReplaceClicked($event, colInfo.columnName, i)" value={{colInfo.median}}>Median ({{colInfo.median}})</button>
+                    <button *ngIf="colInfo.isNumber" mat-menu-item (click)="MissValsReplaceClicked($event, colInfo.columnName, i)" value={{colInfo.max}}>Max ({{colInfo.max}})</button>
+                    <button *ngIf="colInfo.isNumber" mat-menu-item (click)="MissValsReplaceClicked($event, colInfo.columnName, i)" value={{colInfo.min}}>Min ({{colInfo.min}})</button>
 
                     <button *ngIf="!colInfo.isNumber" mat-menu-item [matMenuTriggerFor]="uniques">Najčešće vrednosti</button>
 
@@ -88,22 +95,22 @@
                 </mat-menu>
 
                 <mat-menu #uniques="matMenu">
-                    <button mat-menu-item *ngFor="let uniqueValue of colInfo.uniqueValues" (click)="MissValsReplaceClicked($event, colInfo.columnName)" value={{uniqueValue}}>{{uniqueValue}}</button>
+                    <button mat-menu-item *ngFor="let uniqueValue of colInfo.uniqueValues" (click)="MissValsReplaceClicked($event, colInfo.columnName, i)" value={{uniqueValue}}>{{uniqueValue}}</button>
                 </mat-menu>
 
                 <mat-menu #replaceWith="matMenu">
                     <input type="text" id={{colInfo.columnName}} mat-menu-item placeholder="Unesi vrednost..." [value]>
-                    <button [disabled]="getValue(colInfo.columnName) == ''" mat-menu-item value={{getValue(colInfo.columnName)}} (click)="MissValsReplaceClicked($event, colInfo.columnName)">Potvrdi unos</button>
+                    <button [disabled]="getValue(colInfo.columnName) == ''" mat-menu-item value={{getValue(colInfo.columnName)}} (click)="MissValsReplaceClicked($event, colInfo.columnName, i)">Potvrdi unos</button>
                 </mat-menu>
 
             </td>
         </tr>
-        <tr *ngFor="let row of tableData; let i = index">
+        <tr class="row-height" *ngFor="let row of tableData; let i = index">
             <th *ngIf="i == 0" [attr.rowspan]="tableData!.length">Vrednosti</th>
 
 
-            <td *ngFor="let col of row; let j = index">
-                <div style="overflow: auto">
+            <td class="text-center" *ngFor="let col of row; let j = index">
+                <div class="text-overflow">
                     {{col}}
                 </div>
             </td>
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 9cb038bc..85046b8c 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.ts
+++ b/frontend/src/app/_elements/column-table/column-table.component.ts
@@ -7,7 +7,6 @@ import { MatDialog } from '@angular/material/dialog';
 import { MissingvaluesDialogComponent } from 'src/app/_modals/missingvalues-dialog/missingvalues-dialog.component';
 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({
@@ -25,7 +24,7 @@ export class ColumnTableComponent implements AfterViewInit {
   Encoding = Encoding;
   NullValueOptions = NullValueOptions;
   tableData?: any[][];
-  nesto = 10;
+  nullValOption: string[] = [];
 
   testSetDistribution:number=70;
   constructor(private datasetService: DatasetsService, public csvParseService: CsvParseService, public dialog: MatDialog) { 
@@ -35,7 +34,6 @@ export class ColumnTableComponent implements AfterViewInit {
   ngAfterViewInit(): void {
     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);
@@ -43,39 +41,27 @@ export class ColumnTableComponent implements AfterViewInit {
       this.resetColumnEncodings(Encoding.Label);
       this.setDeleteColumnsForMissingValTreatment();
 
-      /*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.nullValOption = [].constructor(this.dataset.columnInfo.length).fill('Obriši redove');
+
       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);
         }
       });
     });
   }
 
   setDeleteColumnsForMissingValTreatment() {
-    console.log("USAOOOO");
     if (this.experiment != undefined) {
-      this.experiment.nullValues = NullValueOptions.DeleteColumns;
+      this.experiment.nullValues = NullValueOptions.DeleteRows;
       this.experiment.nullValuesReplacers = [];
-      console.log("duzina",this.experiment.inputColumns.length);
       for (let i = 0; i < this.experiment.inputColumns.length; i++) {
         this.experiment.nullValuesReplacers.push({
           column: this.experiment.inputColumns[i],
-          option: NullValueOptions.DeleteColumns,
+          option: NullValueOptions.DeleteRows,
           value: ""
         });
-        console.log(i);
       }
-      //console.log("len",this.nullValMenus.length);
-      this.nullValMenus.forEach((menu) => {
-        //console.log(menu.nativeElement);
-        menu.nativeElement.textContent = "Obriši kolonu";
-      });
     }
   }
 
@@ -127,7 +113,7 @@ export class ColumnTableComponent implements AfterViewInit {
             option: NullValueOptions.DeleteColumns,
             value: ""
           });
-          (<HTMLInputElement>document.getElementById("main_" + this.experiment.inputColumns[i])).textContent = "Obriši kolonu";
+          this.nullValOption[i] = "Obriši kolonu";
         }
       } 
       else if (selectedMissingValuesOption == NullValueOptions.DeleteRows) {
@@ -139,7 +125,7 @@ export class ColumnTableComponent implements AfterViewInit {
             option: NullValueOptions.DeleteRows,
             value: ""
           });
-          (<HTMLInputElement>document.getElementById("main_" + this.experiment.inputColumns[i])).textContent = "Obriši redove";
+          this.nullValOption[i] = "Obriši redove";
         }
       }
     }
@@ -158,7 +144,7 @@ export class ColumnTableComponent implements AfterViewInit {
   }
 
 
-  MissValsDeleteClicked(event: Event, replacementType: NullValueOptions) {
+  MissValsDeleteClicked(event: Event, replacementType: NullValueOptions, index: number) {
     if (this.experiment != undefined) {
       let columnName = (<HTMLInputElement>event.currentTarget).value;
       let arrayElement = this.experiment.nullValuesReplacers.filter(x => x.column == columnName)[0];
@@ -174,12 +160,12 @@ export class ColumnTableComponent implements AfterViewInit {
         arrayElement.option = (replacementType == NullValueOptions.DeleteColumns) ? NullValueOptions.DeleteColumns : NullValueOptions.DeleteRows;
         arrayElement.value = "";
       }
-
-      (<HTMLInputElement>document.getElementById("main_" + columnName)).textContent = (replacementType == NullValueOptions.DeleteColumns) ? "Obriši kolonu" : "Obriši redove";
+      
+      this.nullValOption[index] = (replacementType == NullValueOptions.DeleteColumns) ? "Obriši kolonu" : "Obriši redove";
     }
   }
 
-  MissValsReplaceClicked(event: Event, columnName: string) {
+  MissValsReplaceClicked(event: Event, columnName: string, index: number) {
     if (this.experiment != undefined) {
       let fillValue = (<HTMLInputElement>event.currentTarget).value;
       let arrayElement = this.experiment.nullValuesReplacers.filter(x => x.column == columnName)[0];
@@ -196,7 +182,7 @@ export class ColumnTableComponent implements AfterViewInit {
         arrayElement.value = fillValue;
       }
 
-      (<HTMLInputElement>document.getElementById("main_" + columnName)).textContent = "Popuni sa: " + fillValue;
+      this.nullValOption[index] = "Popuni sa: " + fillValue;
     }
   }
   getValue(columnName: string): string {
diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css
index fa362803..ef875069 100644
--- a/frontend/src/styles/helper.css
+++ b/frontend/src/styles/helper.css
@@ -122,4 +122,10 @@
 
 .bg-blur {
     backdrop-filter: blur(2px);
+}
+
+.chart-wrapper {
+    width: 150px;
+    height: 150px;
+    margin: auto;
 }
\ No newline at end of file
diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css
index f9ea219f..17a433c6 100644
--- a/frontend/src/styles/theme.css
+++ b/frontend/src/styles/theme.css
@@ -8,8 +8,7 @@
     --ns-bg-dark-100: rgba(0, 65, 101, 1.0);
     --ns-bg-dark-50: rgba(0, 65, 101, 0.5);
     --offwhite: #dfd7d7;
-    --ns-warn:#f9b7b7;
-
+    --ns-warn: #f9b7b7;
 }
 
 body {
-- 
cgit v1.2.3