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.

---
 .../_charts/barchart/barchart.component.css        |  6 ++
 .../_charts/barchart/barchart.component.html       |  4 +
 .../_charts/barchart/barchart.component.spec.ts    | 25 ++++++
 .../_charts/barchart/barchart.component.ts         | 54 +++++++++++++
 .../_charts/box-plot/box-plot.component.css        |  0
 .../_charts/box-plot/box-plot.component.html       |  1 +
 .../_charts/box-plot/box-plot.component.spec.ts    | 25 ++++++
 .../_charts/box-plot/box-plot.component.ts         | 15 ++++
 .../_charts/line-chart/line-chart.component.css    |  0
 .../_charts/line-chart/line-chart.component.html   |  5 ++
 .../line-chart/line-chart.component.spec.ts        | 25 ++++++
 .../_charts/line-chart/line-chart.component.ts     | 88 ++++++++++++++++++++++
 .../_charts/mixed-chart/mixed-chart.component.css  |  0
 .../_charts/mixed-chart/mixed-chart.component.html |  2 +
 .../mixed-chart/mixed-chart.component.spec.ts      | 25 ++++++
 .../_charts/mixed-chart/mixed-chart.component.ts   | 56 ++++++++++++++
 .../_charts/pie-chart/pie-chart.component.css      |  0
 .../_charts/pie-chart/pie-chart.component.html     |  1 +
 .../_charts/pie-chart/pie-chart.component.spec.ts  | 25 ++++++
 .../_charts/pie-chart/pie-chart.component.ts       | 15 ++++
 .../point-linechart/point-linechart.component.css  |  0
 .../point-linechart/point-linechart.component.html |  2 +
 .../point-linechart.component.spec.ts              | 25 ++++++
 .../point-linechart/point-linechart.component.ts   | 57 ++++++++++++++
 .../scatterchart/scatterchart.component.css        |  6 ++
 .../scatterchart/scatterchart.component.html       |  4 +
 .../scatterchart/scatterchart.component.spec.ts    | 25 ++++++
 .../_charts/scatterchart/scatterchart.component.ts | 39 ++++++++++
 28 files changed, 530 insertions(+)
 create mode 100644 frontend/src/app/_elements/_charts/barchart/barchart.component.css
 create mode 100644 frontend/src/app/_elements/_charts/barchart/barchart.component.html
 create mode 100644 frontend/src/app/_elements/_charts/barchart/barchart.component.spec.ts
 create mode 100644 frontend/src/app/_elements/_charts/barchart/barchart.component.ts
 create mode 100644 frontend/src/app/_elements/_charts/box-plot/box-plot.component.css
 create mode 100644 frontend/src/app/_elements/_charts/box-plot/box-plot.component.html
 create mode 100644 frontend/src/app/_elements/_charts/box-plot/box-plot.component.spec.ts
 create mode 100644 frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts
 create mode 100644 frontend/src/app/_elements/_charts/line-chart/line-chart.component.css
 create mode 100644 frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
 create mode 100644 frontend/src/app/_elements/_charts/line-chart/line-chart.component.spec.ts
 create mode 100644 frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
 create mode 100644 frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.css
 create mode 100644 frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.html
 create mode 100644 frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.spec.ts
 create mode 100644 frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.ts
 create mode 100644 frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.css
 create mode 100644 frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html
 create mode 100644 frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.spec.ts
 create mode 100644 frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
 create mode 100644 frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.css
 create mode 100644 frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.html
 create mode 100644 frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.spec.ts
 create mode 100644 frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.ts
 create mode 100644 frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css
 create mode 100644 frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html
 create mode 100644 frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.spec.ts
 create mode 100644 frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts

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

diff --git a/frontend/src/app/_elements/_charts/barchart/barchart.component.css b/frontend/src/app/_elements/_charts/barchart/barchart.component.css
new file mode 100644
index 00000000..c3634c9f
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/barchart/barchart.component.css
@@ -0,0 +1,6 @@
+#divBarChart{
+    background-color: beige;
+    display: block;
+    width: 400px;
+    height: 200px;   
+}
diff --git a/frontend/src/app/_elements/_charts/barchart/barchart.component.html b/frontend/src/app/_elements/_charts/barchart/barchart.component.html
new file mode 100644
index 00000000..48b7bd3e
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/barchart/barchart.component.html
@@ -0,0 +1,4 @@
+<p>Bar chart:</p>
+<div id="divBarChart">
+    <canvas id="Barchart"> </canvas>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/barchart/barchart.component.spec.ts b/frontend/src/app/_elements/_charts/barchart/barchart.component.spec.ts
new file mode 100644
index 00000000..8b346d1c
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/barchart/barchart.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BarchartComponent } from './barchart.component';
+
+describe('BarchartComponent', () => {
+  let component: BarchartComponent;
+  let fixture: ComponentFixture<BarchartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BarchartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BarchartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/_charts/barchart/barchart.component.ts b/frontend/src/app/_elements/_charts/barchart/barchart.component.ts
new file mode 100644
index 00000000..def64b7d
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/barchart/barchart.component.ts
@@ -0,0 +1,54 @@
+import { Component, OnInit } from '@angular/core';
+import {Chart} from 'node_modules/chart.js';
+
+@Component({
+  selector: 'app-barchart',
+  templateUrl: './barchart.component.html',
+  styleUrls: ['./barchart.component.css']
+})
+export class BarchartComponent implements OnInit {
+
+  constructor() { }
+
+    ngOnInit(){
+      const myChart = new Chart("Barchart", {
+        type: 'bar',
+        data: {
+            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+            datasets: [{
+                label: 'Number of Votes',
+                data: [12, 19, 3, 5, 2, 3],
+                backgroundColor: [
+                    'rgba(255, 99, 132, 1)',
+                    'rgba(54, 162, 235, 1)',
+                    'rgba(255, 206, 86, 1)',
+                    'rgba(75, 192, 192, 1)',
+                    'rgba(153, 102, 255, 1)',
+                    'rgba(255, 159, 64, 1)'
+                ],
+                borderColor: [
+                    'rgba(255, 99, 132, 1)',
+                    'rgba(54, 162, 235, 1)',
+                    'rgba(255, 206, 86, 1)',
+                    'rgba(75, 192, 192, 1)',
+                    'rgba(153, 102, 255, 1)',
+                    'rgba(255, 159, 64, 1)'
+                ],
+                borderWidth: 1
+            }]
+        },
+        options: {
+            scales: {
+                y: {
+                    beginAtZero: true
+                }
+            }
+        }
+
+        
+    });
+
+    
+  }
+
+}
diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.css b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.css
new file mode 100644
index 00000000..e69de29b
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
new file mode 100644
index 00000000..20cf6487
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html
@@ -0,0 +1 @@
+<p>box-plot works!</p>
diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.spec.ts b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.spec.ts
new file mode 100644
index 00000000..759e7c5e
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BoxPlotComponent } from './box-plot.component';
+
+describe('BoxPlotComponent', () => {
+  let component: BoxPlotComponent;
+  let fixture: ComponentFixture<BoxPlotComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BoxPlotComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BoxPlotComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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
new file mode 100644
index 00000000..0cef8f90
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-box-plot',
+  templateUrl: './box-plot.component.html',
+  styleUrls: ['./box-plot.component.css']
+})
+export class BoxPlotComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
new file mode 100644
index 00000000..c8f406f4
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
@@ -0,0 +1,5 @@
+<div class="chart-wrapper">
+    <canvas  id="myChart">
+        
+    </canvas>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.spec.ts b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.spec.ts
new file mode 100644
index 00000000..0c5e7ef5
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LineChartComponent } from './line-chart.component';
+
+describe('LineChartComponent', () => {
+  let component: LineChartComponent;
+  let fixture: ComponentFixture<LineChartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LineChartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LineChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
new file mode 100644
index 00000000..49558025
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
@@ -0,0 +1,88 @@
+import { Component, AfterViewInit } from '@angular/core';
+import { Chart } from 'chart.js';
+
+@Component({
+  selector: 'app-line-chart',
+  templateUrl: './line-chart.component.html',
+  styleUrls: ['./line-chart.component.css']
+})
+
+export class LineChartComponent implements AfterViewInit {
+
+  dataAcc: number[] = [];
+  dataMAE: number[] = [];
+  dataMSE: number[] = [];
+  dataLOSS: number[] = [];
+
+  dataEpoch: number[] = [];
+
+  constructor() {
+    /*let i = 0;
+    setInterval(() => {
+      this.dataAcc.push(0.5);
+      this.dataEpoch.push(i);
+      i++;
+      this.update();
+    }, 200);*/
+  }
+
+  myChart!: Chart;
+
+  update(myEpochs: number[], myAcc: number[], myLoss: number[], myMae: number[], myMse: number[]) {
+    this.dataAcc.length = 0;
+    this.dataAcc.push(...myAcc);
+
+    this.dataEpoch.length = 0;
+    this.dataEpoch.push(...myEpochs);
+
+    this.dataMAE.length = 0;
+    this.dataMAE.push(...myMae);
+
+    this.dataLOSS.length = 0;
+    this.dataLOSS.push(...myLoss);
+
+    this.dataMSE.length = 0;
+    this.dataMSE.push(...myMse);
+
+    this.myChart.update();
+  }
+
+  ngAfterViewInit(): void {
+    this.myChart = new Chart("myChart",
+      {
+        type: 'line',
+        data: {
+          labels: this.dataEpoch,
+          datasets: [{
+            label: 'Accuracy',
+            data: this.dataAcc,
+            borderWidth: 1
+          },
+          {
+            label: 'Loss',
+            data: this.dataLOSS,
+            borderWidth: 1
+          },
+          {
+            label: 'MAE',
+            data: this.dataMAE,
+            borderWidth: 1
+          },
+          {
+            label: 'MSE',
+            data: this.dataMSE,
+            borderWidth: 1
+          }
+          ]
+        },
+        options: {
+          scales: {
+            y: {
+              beginAtZero: true
+            }
+          }
+        }
+      }
+    );
+  }
+}
diff --git a/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.css b/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.html b/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.html
new file mode 100644
index 00000000..806ea9e8
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.html
@@ -0,0 +1,2 @@
+<canvas #mixedchart width="800" height="450"></canvas>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
diff --git a/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.spec.ts b/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.spec.ts
new file mode 100644
index 00000000..361cd047
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MixedChartComponent } from './mixed-chart.component';
+
+describe('MixedChartComponent', () => {
+  let component: MixedChartComponent;
+  let fixture: ComponentFixture<MixedChartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MixedChartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MixedChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.ts b/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.ts
new file mode 100644
index 00000000..2524ee36
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.ts
@@ -0,0 +1,56 @@
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import {Chart} from 'node_modules/chart.js';
+
+@Component({
+  selector: 'app-mixed-chart',
+  templateUrl: './mixed-chart.component.html',
+  styleUrls: ['./mixed-chart.component.css']
+})
+export class MixedChartComponent implements AfterViewInit {
+
+  @ViewChild('mixedchart') chartRef!: ElementRef;
+  constructor() { }
+
+  ngAfterViewInit(): void {
+    const myChart = new Chart(this.chartRef.nativeElement, {
+      type: 'bar',
+      data: {
+        labels: ["1900", "1950", "1999", "2050"],
+        datasets: [{
+            label: "Europe",
+            type: "line",
+            borderColor: "#8e5ea2",
+            data: [408,547,675,734],
+            fill: false
+          }, {
+            label: "Africa",
+            type: "line",
+            borderColor: "#3e95cd",
+            data: [133,221,783,2478],
+            fill: false
+          }, {
+            label: "Europe",
+            type: "bar",
+            backgroundColor: "rgba(0,0,0,0.2)",
+            data: [408,547,675,734],
+          }, {
+            label: "Africa",
+            type: "bar",
+            backgroundColor: "rgba(0,0,0,0.2)",
+            //backgroundColorHover: "#3e95cd",
+            data: [133,221,783,2478]
+          }
+        ]
+      },
+      /*options: {
+        title: {
+          display: true,
+          text: 'Population growth (millions): Europe & Africa'
+        },
+        legend: { display: false }
+      }*/
+
+    });
+  }
+
+}
diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.css b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.css
new file mode 100644
index 00000000..e69de29b
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
new file mode 100644
index 00000000..43a2d766
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html
@@ -0,0 +1 @@
+<p>pie-chart works!</p>
diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.spec.ts b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.spec.ts
new file mode 100644
index 00000000..64f36b7d
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PieChartComponent } from './pie-chart.component';
+
+describe('PieChartComponent', () => {
+  let component: PieChartComponent;
+  let fixture: ComponentFixture<PieChartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PieChartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PieChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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 {
+  }
+
+}
diff --git a/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.css b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.html b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.html
new file mode 100644
index 00000000..f9f9a24a
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.html
@@ -0,0 +1,2 @@
+<canvas #linechart width="800" height="450">Point line chart:</canvas>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
diff --git a/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.spec.ts b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.spec.ts
new file mode 100644
index 00000000..fe08fe7c
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PointLinechartComponent } from './point-linechart.component';
+
+describe('PointLinechartComponent', () => {
+  let component: PointLinechartComponent;
+  let fixture: ComponentFixture<PointLinechartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PointLinechartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PointLinechartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.ts b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.ts
new file mode 100644
index 00000000..3497a20c
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.ts
@@ -0,0 +1,57 @@
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import {Chart} from 'node_modules/chart.js';
+
+
+@Component({
+  selector: 'app-point-linechart',
+  templateUrl: './point-linechart.component.html',
+  styleUrls: ['./point-linechart.component.css']
+})
+export class PointLinechartComponent implements AfterViewInit {
+
+  @ViewChild('linechart') chartRef!: ElementRef;
+  constructor() { }
+  ngAfterViewInit(): void {
+    const myChart = new Chart(this.chartRef.nativeElement, {
+      type: 'line',
+      data: {
+        labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
+        datasets: [{ 
+            data: [86,114,106,106,107,111,133,221,783,2478],
+            label: "Africa",
+            borderColor: "#3e95cd",
+            fill: false
+          }, { 
+            data: [282,350,411,502,635,809,947,1402,3700,5267],
+            label: "Asia",
+            borderColor: "#8e5ea2",
+            fill: false
+          }, { 
+            data: [168,170,178,190,203,276,408,547,675,734],
+            label: "Europe",
+            borderColor: "#3cba9f",
+            fill: false
+          }, { 
+            data: [40,20,10,16,24,38,74,167,508,784],
+            label: "Latin America",
+            borderColor: "#e8c3b9",
+            fill: false
+          }, { 
+            data: [6,3,2,2,7,26,82,172,312,433],
+            label: "North America",
+            borderColor: "#c45850",
+            fill: false
+          }
+        ]
+      },
+      /*options: {
+        title: {
+          display: true,
+          text: 'World population per region (in millions)'
+        }
+      }*/
+      
+    });
+  
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css
new file mode 100644
index 00000000..5735217e
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css
@@ -0,0 +1,6 @@
+#divScatterChart{
+    background-color: beige;
+    display: block;
+    width: 400px;
+    height: 200px;   
+}
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html
new file mode 100644
index 00000000..2b30fe1f
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html
@@ -0,0 +1,4 @@
+<p>Scatter chart:</p>
+<div id="divScatterChart">
+    <canvas id="ScatterCharts"> </canvas>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.spec.ts b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.spec.ts
new file mode 100644
index 00000000..1db81051
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ScatterchartComponent } from './scatterchart.component';
+
+describe('ScatterchartComponent', () => {
+  let component: ScatterchartComponent;
+  let fixture: ComponentFixture<ScatterchartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ScatterchartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ScatterchartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts
new file mode 100644
index 00000000..9dfef4c3
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts
@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import {Chart} from 'node_modules/chart.js';
+
+@Component({
+  selector: 'app-scatterchart',
+  templateUrl: './scatterchart.component.html',
+  styleUrls: ['./scatterchart.component.css']
+})
+export class ScatterchartComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(){
+    const myChart = new Chart("ScatterCharts", {
+      type: 'scatter',
+      data: {
+          datasets: [{
+              label: 'Scatter Example:',
+              data: [{x: 1, y: 11}, {x:2, y:12}, {x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}, {x: 1, y: 3}, {x: 3, y: 4}, {x: 4, y: 6}, {x: 6, y: 9},
+                {x: 11, y: 9},
+                {x: 12, y: 8},
+                {x: 13, y: 6},
+                {x: 14, y: 0},
+                {x: 15, y: 5},
+                {x: 16, y: 3},
+                {x: 17, y: 2}],
+              backgroundColor: 'rgb(255, 99, 132)'
+            }]
+      },
+      options: {
+          scales: {
+              y: {
+                  beginAtZero: true
+              }
+          }
+      }
+  });
+  }
+}
-- 
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')

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 dbc6d56f495b2238ed1e8b6bc036b23a6067b051 Mon Sep 17 00:00:00 2001
From: Nevena Bojovic <nenabojov@gmail.com>
Date: Sun, 24 Apr 2022 18:43:14 +0200
Subject: Doughnut Chart (Varijanta Pie Chart).

---
 .../_charts/box-plot/box-plot.component.html       |  2 +-
 .../_charts/box-plot/box-plot.component.ts         |  3 +-
 .../doughnut-chart/doughnut-chart.component.css    |  0
 .../doughnut-chart/doughnut-chart.component.html   |  1 +
 .../doughnut-chart.component.spec.ts               | 25 ++++++++++++++++
 .../doughnut-chart/doughnut-chart.component.ts     | 34 ++++++++++++++++++++++
 frontend/src/app/_pages/test/test.component.html   |  4 ++-
 frontend/src/app/app.module.ts                     |  4 ++-
 8 files changed, 68 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.css
 create mode 100644 frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html
 create mode 100644 frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.spec.ts
 create mode 100644 frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts

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

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 20cf6487..2006eada 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 works!</p>
+<p>Box-plot</p>
\ 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 56f87057..0cef8f90 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,5 +1,4 @@
-import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import {Chart} from 'node_modules/chart.js';
+import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-box-plot',
diff --git a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.css b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.css
new file mode 100644
index 00000000..e69de29b
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
new file mode 100644
index 00000000..4befc7dc
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html
@@ -0,0 +1 @@
+<canvas #doughnut width="800" height="450"></canvas>
diff --git a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.spec.ts b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.spec.ts
new file mode 100644
index 00000000..67309670
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DoughnutChartComponent } from './doughnut-chart.component';
+
+describe('DoughnutChartComponent', () => {
+  let component: DoughnutChartComponent;
+  let fixture: ComponentFixture<DoughnutChartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DoughnutChartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DoughnutChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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
new file mode 100644
index 00000000..4c7508fe
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts
@@ -0,0 +1,34 @@
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import {Chart} from 'node_modules/chart.js';
+
+@Component({
+  selector: 'app-doughnut-chart',
+  templateUrl: './doughnut-chart.component.html',
+  styleUrls: ['./doughnut-chart.component.css']
+})
+export class DoughnutChartComponent implements AfterViewInit {
+
+  @ViewChild('doughnut') chartRef!: ElementRef;
+  constructor() { }
+
+  ngAfterViewInit(): void {
+    const myChart = new Chart(this.chartRef.nativeElement, {
+      type: 'doughnut',
+      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.html b/frontend/src/app/_pages/test/test.component.html
index 8085f77f..625739f8 100644
--- a/frontend/src/app/_pages/test/test.component.html
+++ b/frontend/src/app/_pages/test/test.component.html
@@ -1 +1,3 @@
-<app-pie-chart></app-pie-chart>
\ No newline at end of file
+<app-pie-chart></app-pie-chart>
+<app-doughnut-chart></app-doughnut-chart>
+<app-barchart></app-barchart>
\ No newline at end of file
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 0271d64d..5502df26 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -44,6 +44,7 @@ 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';
+import { DoughnutChartComponent } from './_elements/_charts/doughnut-chart/doughnut-chart.component';
 
 export function initializeApp(appConfig: Configuration) {
   return () => appConfig.load();
@@ -76,7 +77,8 @@ export function initializeApp(appConfig: Configuration) {
     PieChartComponent,
     BoxPlotComponent,
     FolderComponent,
-    TestComponent
+    TestComponent,
+    DoughnutChartComponent
   ],
   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')

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')

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')

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


From 8646b0f5fff359b55070362bf734af20c923a369 Mon Sep 17 00:00:00 2001
From: Nevena Bojovic <nenabojov@gmail.com>
Date: Thu, 28 Apr 2022 17:07:28 +0200
Subject: Heat Map...

---
 frontend/package-lock.json                         | 242 ++++++++++++++++++++-
 frontend/package.json                              |   2 +
 .../_charts/heatmap/heatmap.component.css          |   0
 .../_charts/heatmap/heatmap.component.html         |   3 +
 .../_charts/heatmap/heatmap.component.spec.ts      |  25 +++
 .../_elements/_charts/heatmap/heatmap.component.ts | 108 +++++++++
 frontend/src/app/_pages/test/test.component.html   |   3 +-
 frontend/src/app/app.module.ts                     |   4 +
 8 files changed, 383 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/app/_elements/_charts/heatmap/heatmap.component.css
 create mode 100644 frontend/src/app/_elements/_charts/heatmap/heatmap.component.html
 create mode 100644 frontend/src/app/_elements/_charts/heatmap/heatmap.component.spec.ts
 create mode 100644 frontend/src/app/_elements/_charts/heatmap/heatmap.component.ts

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

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 710e9710..7f6dbdde 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -25,7 +25,9 @@
         "@ng-bootstrap/ng-bootstrap": "^12.0.0",
         "@popperjs/core": "^2.10.2",
         "@sgratzl/chartjs-chart-boxplot": "^3.7.1",
+        "@syncfusion/ej2-angular-heatmap": "^20.1.47",
         "bootstrap": "^5.1.3",
+        "chart.heatmap.js": "^0.0.1-alpha",
         "chart.js": "^3.7.1",
         "csv-parser": "^3.0.0",
         "d3-graphviz": "^2.6.1",
@@ -2727,6 +2729,115 @@
         "node": ">= 0.6.0"
       }
     },
+    "node_modules/@syncfusion/ej2-angular-base": {
+      "version": "20.1.48",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-angular-base/-/ej2-angular-base-20.1.48.tgz",
+      "integrity": "sha512-MVnQl2TuqD0pKvXJRWekHO8vtsdC89OzETUVRnYllnLqnGdNDzOFxi1Gmm+ON3HpVjcfzNSbUoFFQcJwUF+WGQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@syncfusion/ej2-base": "~20.1.48",
+        "@syncfusion/ej2-icons": "~20.1.47",
+        "core-js": "^3.4.8",
+        "reflect-metadata": "^0.1.9",
+        "rxjs": "^6.5.4",
+        "rxjs-compat": "^6.5.4",
+        "zone.js": "^0.10.2"
+      }
+    },
+    "node_modules/@syncfusion/ej2-angular-base/node_modules/rxjs": {
+      "version": "6.6.7",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
+      "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
+      "dependencies": {
+        "tslib": "^1.9.0"
+      },
+      "engines": {
+        "npm": ">=2.0.0"
+      }
+    },
+    "node_modules/@syncfusion/ej2-angular-base/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "node_modules/@syncfusion/ej2-angular-base/node_modules/zone.js": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.10.3.tgz",
+      "integrity": "sha512-LXVLVEq0NNOqK/fLJo3d0kfzd4sxwn2/h67/02pjCjfKDxgx1i9QqpvtHD8CrBnSSwMw5+dy11O7FRX5mkO7Cg=="
+    },
+    "node_modules/@syncfusion/ej2-angular-heatmap": {
+      "version": "20.1.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-angular-heatmap/-/ej2-angular-heatmap-20.1.47.tgz",
+      "integrity": "sha512-mx9Z5/zNmNcjogVfS7DKNbg7zW2FXZ78O0BYPA4CqdwDLZdA30xx25JGwM7fZ6iTDs8kpEyWAAEMt+zJPyRKFw==",
+      "dependencies": {
+        "@syncfusion/ej2-angular-base": "~20.1.47",
+        "@syncfusion/ej2-base": "~20.1.47",
+        "@syncfusion/ej2-heatmap": "20.1.47"
+      }
+    },
+    "node_modules/@syncfusion/ej2-base": {
+      "version": "20.1.50",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-base/-/ej2-base-20.1.50.tgz",
+      "integrity": "sha512-RdBCPjvD/ArwArVoYjTXB7jQ7zAdgT8MxoKY4aSwY9wrNIUxNS4HhO8slY2ergjZHDP3eDnLn/UiCg5qaBtFJQ==",
+      "dependencies": {
+        "@syncfusion/ej2-icons": "~20.1.47"
+      }
+    },
+    "node_modules/@syncfusion/ej2-compression": {
+      "version": "20.1.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-compression/-/ej2-compression-20.1.47.tgz",
+      "integrity": "sha512-4+74eOf6+vxg1mobYEf5qCvTbo6DjjSZv1O2zfWUc0tgVV0A9AspXIcoeeivemTKnRDj0fm3E7Tv15h1qodpUQ==",
+      "dependencies": {
+        "@syncfusion/ej2-file-utils": "~20.1.47"
+      }
+    },
+    "node_modules/@syncfusion/ej2-data": {
+      "version": "20.1.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-data/-/ej2-data-20.1.47.tgz",
+      "integrity": "sha512-AAq95oux06/Dtoo9Az1MlN0r1xbV8BF6vIbCbpiIK016jp2V38X0x2AhvHFV/yM+winrT1d2nxUhcGcnabPveQ==",
+      "dependencies": {
+        "@syncfusion/ej2-base": "~20.1.47"
+      }
+    },
+    "node_modules/@syncfusion/ej2-file-utils": {
+      "version": "20.1.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-file-utils/-/ej2-file-utils-20.1.47.tgz",
+      "integrity": "sha512-69c/1BBbQpJ/XkdOrtGijxRIDvz05+mO4PB6VANo+FwNdhGFt4MvWmYjCDwwCE2GmqiukKvxXaLRCOjFVFRmig=="
+    },
+    "node_modules/@syncfusion/ej2-heatmap": {
+      "version": "20.1.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-heatmap/-/ej2-heatmap-20.1.47.tgz",
+      "integrity": "sha512-hOCGlHNQaFyojR84jCCQ+ssDOtWpzy0nvC3/1xNhC2VbDPvxo/zNqiNJuW+ELTlViv+2UcPMKnCLL9rgv7jakg==",
+      "dependencies": {
+        "@syncfusion/ej2-base": "~20.1.47",
+        "@syncfusion/ej2-compression": "~20.1.47",
+        "@syncfusion/ej2-data": "~20.1.47",
+        "@syncfusion/ej2-file-utils": "~20.1.47",
+        "@syncfusion/ej2-pdf-export": "~20.1.47",
+        "@syncfusion/ej2-svg-base": "~20.1.47"
+      }
+    },
+    "node_modules/@syncfusion/ej2-icons": {
+      "version": "20.1.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-icons/-/ej2-icons-20.1.47.tgz",
+      "integrity": "sha512-0P5enxVZSl+AISIlRvQV/d/k0EgP8RDN/gBmb2AQuldMoz+Nx64G7zLEXd1l9Ib2j5Si9JgXF37aYhwc2brdNw=="
+    },
+    "node_modules/@syncfusion/ej2-pdf-export": {
+      "version": "20.1.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-pdf-export/-/ej2-pdf-export-20.1.47.tgz",
+      "integrity": "sha512-ww5BtrCrn4RTOcfYnqTF9elizfLLLTZhDgsHJ09hPMhFDzazfuO79D1zfER4b2JiJYffcBiY6Xsp56qCB/ccpw==",
+      "dependencies": {
+        "@syncfusion/ej2-compression": "~20.1.47"
+      }
+    },
+    "node_modules/@syncfusion/ej2-svg-base": {
+      "version": "20.1.48",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-svg-base/-/ej2-svg-base-20.1.48.tgz",
+      "integrity": "sha512-uiGEd5Gws9NYa+lqkR2L8Z1MYeIV5QRAt9sT21KghEpoh2lS1nuzou/4vKMyQPJGayzqRCEW5BBIGkrSbgVXGg==",
+      "dependencies": {
+        "@syncfusion/ej2-base": "~20.1.48"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -3920,6 +4031,11 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "node_modules/chart.heatmap.js": {
+      "version": "0.0.1-alpha",
+      "resolved": "https://registry.npmjs.org/chart.heatmap.js/-/chart.heatmap.js-0.0.1-alpha.tgz",
+      "integrity": "sha1-wqcltMGZMMhu6oiyRorPWFOzpSY="
+    },
     "node_modules/chart.js": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz",
@@ -4341,7 +4457,6 @@
       "version": "3.20.3",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.20.3.tgz",
       "integrity": "sha512-vVl8j8ph6tRS3B8qir40H7yw7voy17xL0piAjlbBUsH7WIfzoedL/ZOr1OV9FyZQLWXsayOJyV4tnRyXR85/ag==",
-      "dev": true,
       "hasInstallScript": true,
       "funding": {
         "type": "opencollective",
@@ -10192,6 +10307,11 @@
         "tslib": "^2.1.0"
       }
     },
+    "node_modules/rxjs-compat": {
+      "version": "6.6.7",
+      "resolved": "https://registry.npmjs.org/rxjs-compat/-/rxjs-compat-6.6.7.tgz",
+      "integrity": "sha512-szN4fK+TqBPOFBcBcsR0g2cmTTUF/vaFEOZNuSdfU8/pGFnNmmn2u8SystYXG1QMrjOPBc6XTKHMVfENDf6hHw=="
+    },
     "node_modules/safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@@ -13758,6 +13878,113 @@
       "integrity": "sha512-dOlCBKnDw4iShaIsH/bxujKTM18+2TOAsYz+KSc11Am38H4q5Xw8Bbz97ZYdrVNM+um3p7w86Bvvmcn9q+5+eQ==",
       "dev": true
     },
+    "@syncfusion/ej2-angular-base": {
+      "version": "20.1.48",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-angular-base/-/ej2-angular-base-20.1.48.tgz",
+      "integrity": "sha512-MVnQl2TuqD0pKvXJRWekHO8vtsdC89OzETUVRnYllnLqnGdNDzOFxi1Gmm+ON3HpVjcfzNSbUoFFQcJwUF+WGQ==",
+      "requires": {
+        "@syncfusion/ej2-base": "~20.1.48",
+        "@syncfusion/ej2-icons": "~20.1.47",
+        "core-js": "^3.4.8",
+        "reflect-metadata": "^0.1.9",
+        "rxjs": "^6.5.4",
+        "rxjs-compat": "^6.5.4",
+        "zone.js": "^0.10.2"
+      },
+      "dependencies": {
+        "rxjs": {
+          "version": "6.6.7",
+          "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz",
+          "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==",
+          "requires": {
+            "tslib": "^1.9.0"
+          }
+        },
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        },
+        "zone.js": {
+          "version": "0.10.3",
+          "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.10.3.tgz",
+          "integrity": "sha512-LXVLVEq0NNOqK/fLJo3d0kfzd4sxwn2/h67/02pjCjfKDxgx1i9QqpvtHD8CrBnSSwMw5+dy11O7FRX5mkO7Cg=="
+        }
+      }
+    },
+    "@syncfusion/ej2-angular-heatmap": {
+      "version": "20.1.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-angular-heatmap/-/ej2-angular-heatmap-20.1.47.tgz",
+      "integrity": "sha512-mx9Z5/zNmNcjogVfS7DKNbg7zW2FXZ78O0BYPA4CqdwDLZdA30xx25JGwM7fZ6iTDs8kpEyWAAEMt+zJPyRKFw==",
+      "requires": {
+        "@syncfusion/ej2-angular-base": "~20.1.47",
+        "@syncfusion/ej2-base": "~20.1.47",
+        "@syncfusion/ej2-heatmap": "20.1.47"
+      }
+    },
+    "@syncfusion/ej2-base": {
+      "version": "20.1.50",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-base/-/ej2-base-20.1.50.tgz",
+      "integrity": "sha512-RdBCPjvD/ArwArVoYjTXB7jQ7zAdgT8MxoKY4aSwY9wrNIUxNS4HhO8slY2ergjZHDP3eDnLn/UiCg5qaBtFJQ==",
+      "requires": {
+        "@syncfusion/ej2-icons": "~20.1.47"
+      }
+    },
+    "@syncfusion/ej2-compression": {
+      "version": "20.1.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-compression/-/ej2-compression-20.1.47.tgz",
+      "integrity": "sha512-4+74eOf6+vxg1mobYEf5qCvTbo6DjjSZv1O2zfWUc0tgVV0A9AspXIcoeeivemTKnRDj0fm3E7Tv15h1qodpUQ==",
+      "requires": {
+        "@syncfusion/ej2-file-utils": "~20.1.47"
+      }
+    },
+    "@syncfusion/ej2-data": {
+      "version": "20.1.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-data/-/ej2-data-20.1.47.tgz",
+      "integrity": "sha512-AAq95oux06/Dtoo9Az1MlN0r1xbV8BF6vIbCbpiIK016jp2V38X0x2AhvHFV/yM+winrT1d2nxUhcGcnabPveQ==",
+      "requires": {
+        "@syncfusion/ej2-base": "~20.1.47"
+      }
+    },
+    "@syncfusion/ej2-file-utils": {
+      "version": "20.1.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-file-utils/-/ej2-file-utils-20.1.47.tgz",
+      "integrity": "sha512-69c/1BBbQpJ/XkdOrtGijxRIDvz05+mO4PB6VANo+FwNdhGFt4MvWmYjCDwwCE2GmqiukKvxXaLRCOjFVFRmig=="
+    },
+    "@syncfusion/ej2-heatmap": {
+      "version": "20.1.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-heatmap/-/ej2-heatmap-20.1.47.tgz",
+      "integrity": "sha512-hOCGlHNQaFyojR84jCCQ+ssDOtWpzy0nvC3/1xNhC2VbDPvxo/zNqiNJuW+ELTlViv+2UcPMKnCLL9rgv7jakg==",
+      "requires": {
+        "@syncfusion/ej2-base": "~20.1.47",
+        "@syncfusion/ej2-compression": "~20.1.47",
+        "@syncfusion/ej2-data": "~20.1.47",
+        "@syncfusion/ej2-file-utils": "~20.1.47",
+        "@syncfusion/ej2-pdf-export": "~20.1.47",
+        "@syncfusion/ej2-svg-base": "~20.1.47"
+      }
+    },
+    "@syncfusion/ej2-icons": {
+      "version": "20.1.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-icons/-/ej2-icons-20.1.47.tgz",
+      "integrity": "sha512-0P5enxVZSl+AISIlRvQV/d/k0EgP8RDN/gBmb2AQuldMoz+Nx64G7zLEXd1l9Ib2j5Si9JgXF37aYhwc2brdNw=="
+    },
+    "@syncfusion/ej2-pdf-export": {
+      "version": "20.1.47",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-pdf-export/-/ej2-pdf-export-20.1.47.tgz",
+      "integrity": "sha512-ww5BtrCrn4RTOcfYnqTF9elizfLLLTZhDgsHJ09hPMhFDzazfuO79D1zfER4b2JiJYffcBiY6Xsp56qCB/ccpw==",
+      "requires": {
+        "@syncfusion/ej2-compression": "~20.1.47"
+      }
+    },
+    "@syncfusion/ej2-svg-base": {
+      "version": "20.1.48",
+      "resolved": "https://registry.npmjs.org/@syncfusion/ej2-svg-base/-/ej2-svg-base-20.1.48.tgz",
+      "integrity": "sha512-uiGEd5Gws9NYa+lqkR2L8Z1MYeIV5QRAt9sT21KghEpoh2lS1nuzou/4vKMyQPJGayzqRCEW5BBIGkrSbgVXGg==",
+      "requires": {
+        "@syncfusion/ej2-base": "~20.1.48"
+      }
+    },
     "@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -14751,6 +14978,11 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "chart.heatmap.js": {
+      "version": "0.0.1-alpha",
+      "resolved": "https://registry.npmjs.org/chart.heatmap.js/-/chart.heatmap.js-0.0.1-alpha.tgz",
+      "integrity": "sha1-wqcltMGZMMhu6oiyRorPWFOzpSY="
+    },
     "chart.js": {
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz",
@@ -15072,8 +15304,7 @@
     "core-js": {
       "version": "3.20.3",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.20.3.tgz",
-      "integrity": "sha512-vVl8j8ph6tRS3B8qir40H7yw7voy17xL0piAjlbBUsH7WIfzoedL/ZOr1OV9FyZQLWXsayOJyV4tnRyXR85/ag==",
-      "dev": true
+      "integrity": "sha512-vVl8j8ph6tRS3B8qir40H7yw7voy17xL0piAjlbBUsH7WIfzoedL/ZOr1OV9FyZQLWXsayOJyV4tnRyXR85/ag=="
     },
     "core-js-compat": {
       "version": "3.21.1",
@@ -19338,6 +19569,11 @@
         "tslib": "^2.1.0"
       }
     },
+    "rxjs-compat": {
+      "version": "6.6.7",
+      "resolved": "https://registry.npmjs.org/rxjs-compat/-/rxjs-compat-6.6.7.tgz",
+      "integrity": "sha512-szN4fK+TqBPOFBcBcsR0g2cmTTUF/vaFEOZNuSdfU8/pGFnNmmn2u8SystYXG1QMrjOPBc6XTKHMVfENDf6hHw=="
+    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 369ac5c9..89381956 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -28,7 +28,9 @@
     "@ng-bootstrap/ng-bootstrap": "^12.0.0",
     "@popperjs/core": "^2.10.2",
     "@sgratzl/chartjs-chart-boxplot": "^3.7.1",
+    "@syncfusion/ej2-angular-heatmap": "^20.1.47",
     "bootstrap": "^5.1.3",
+    "chart.heatmap.js": "^0.0.1-alpha",
     "chart.js": "^3.7.1",
     "csv-parser": "^3.0.0",
     "d3-graphviz": "^2.6.1",
diff --git a/frontend/src/app/_elements/_charts/heatmap/heatmap.component.css b/frontend/src/app/_elements/_charts/heatmap/heatmap.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/app/_elements/_charts/heatmap/heatmap.component.html b/frontend/src/app/_elements/_charts/heatmap/heatmap.component.html
new file mode 100644
index 00000000..52d95516
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/heatmap/heatmap.component.html
@@ -0,0 +1,3 @@
+<div style="width:800px; height: 400px; background-color: red;">
+    <ejs-heatmap [dataSource]='dataSource' [xAxis]='xAxis' [yAxis]='yAxis'></ejs-heatmap>
+</div>
diff --git a/frontend/src/app/_elements/_charts/heatmap/heatmap.component.spec.ts b/frontend/src/app/_elements/_charts/heatmap/heatmap.component.spec.ts
new file mode 100644
index 00000000..fa0a90cc
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/heatmap/heatmap.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeatmapComponent } from './heatmap.component';
+
+describe('HeatmapComponent', () => {
+  let component: HeatmapComponent;
+  let fixture: ComponentFixture<HeatmapComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HeatmapComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeatmapComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/_charts/heatmap/heatmap.component.ts b/frontend/src/app/_elements/_charts/heatmap/heatmap.component.ts
new file mode 100644
index 00000000..f3d1af98
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/heatmap/heatmap.component.ts
@@ -0,0 +1,108 @@
+import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import {Chart} from 'chart.js';
+import { HeatMapAllModule } from '@syncfusion/ej2-angular-heatmap';
+import { BrowserModule } from '@angular/platform-browser'; 
+import { NgModule } from '@angular/core';
+
+
+
+@Component({
+  selector: 'app-heatmap',
+  templateUrl: './heatmap.component.html',
+  styleUrls: ['./heatmap.component.css']
+})
+export class HeatmapComponent implements OnInit {
+
+
+  @Input()width?: number;
+  @Input()height?: number;
+
+  dataSource = [
+ 
+    [73, 39, 26, 39, 94, 0],
+ 
+    [93, 58, 53, 38, 26, 68],
+ 
+    [99, 28, 22, 4, 66, 90],
+ 
+    [14, 26, 97, 69, 69, 3],
+ 
+    [7, 46, 47, 47, 88, 6],
+ 
+    [41, 55, 73, 23, 3, 79],
+ 
+    [56, 69, 21, 86, 3, 33],
+ 
+    [45, 7, 53, 81, 95, 79],
+ 
+    [60, 77, 74, 68, 88, 51],
+ 
+    [25, 25, 10, 12, 78, 14],
+ 
+    [25, 56, 55, 58, 12, 82],
+ 
+    [74, 33, 88, 23, 86, 59]
+ 
+  ];
+
+  xAxis = {
+
+    labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 'Michael', 'Robert',
+ 
+      'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
+ 
+  };
+ 
+  yAxis = {
+ 
+    labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
+ 
+  }
+
+  //@ViewChild('heatmap') chartRef!: ElementRef;
+  constructor() { }
+
+  ngOnInit(): void {
+    
+    
+
+    /*
+    const myChart = new Chart(this.chartRef.nativeElement, {
+    type: 'pie',
+    data: {
+      datasets: [{
+        data: [
+ 
+      [73, 39, 26, 39, 94, 0],
+   
+      [93, 58, 53, 38, 26, 68],
+   
+      [99, 28, 22, 4, 66, 90],
+   
+      [14, 26, 97, 69, 69, 3],
+   
+      [7, 46, 47, 47, 88, 6],
+   
+      [41, 55, 73, 23, 3, 79],
+   
+      [56, 69, 21, 86, 3, 33],
+   
+      [45, 7, 53, 81, 95, 79],
+   
+      [60, 77, 74, 68, 88, 51],
+   
+      [25, 25, 10, 12, 78, 14],
+   
+      [25, 56, 55, 58, 12, 82],
+   
+      [74, 33, 88, 23, 86, 59]
+   
+    ],
+      }]
+    }
+});
+    */
+  
+  }
+
+}
diff --git a/frontend/src/app/_pages/test/test.component.html b/frontend/src/app/_pages/test/test.component.html
index ec6ef0d6..94679055 100644
--- a/frontend/src/app/_pages/test/test.component.html
+++ b/frontend/src/app/_pages/test/test.component.html
@@ -1,4 +1,5 @@
 <app-pie-chart></app-pie-chart>
 <app-doughnut-chart></app-doughnut-chart>
 <app-barchart></app-barchart>
-<app-box-plot></app-box-plot>
\ No newline at end of file
+<app-box-plot></app-box-plot>
+<app-heatmap></app-heatmap>
\ No newline at end of file
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index c46381d5..fc6d3c6b 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -47,6 +47,8 @@ import { ColumnTableComponent } from './_elements/column-table/column-table.comp
 import { FolderComponent } from './_elements/folder/folder.component';
 import { TestComponent } from './_pages/test/test.component';
 import { DoughnutChartComponent } from './_elements/_charts/doughnut-chart/doughnut-chart.component';
+import { HeatmapComponent } from './_elements/_charts/heatmap/heatmap.component';
+import { HeatMapAllModule } from '@syncfusion/ej2-angular-heatmap';
 
 export function initializeApp(appConfig: Configuration) {
   return () => appConfig.load();
@@ -83,6 +85,7 @@ export function initializeApp(appConfig: Configuration) {
     MissingvaluesDialogComponent,
     TestComponent,
     DoughnutChartComponent,
+    HeatmapComponent
   ],
   imports: [
     BrowserModule,
@@ -97,6 +100,7 @@ export function initializeApp(appConfig: Configuration) {
     MatIconModule,
     NgChartsModule,
     Ng2SearchPipeModule,
+    HeatMapAllModule
   ],
   providers: [
     Configuration,
-- 
cgit v1.2.3


From ec6db17db91c496ba7c61e9123942114e78044a2 Mon Sep 17 00:00:00 2001
From: TAMARA JERINIC <tamara.jerinic@gmail.com>
Date: Sat, 30 Apr 2022 19:33:37 +0200
Subject: Dodati grafici u metric-view komponentu, prilagođena boja grafika,
 metric-view komponenta povezana sa navbar-om.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_charts/line-chart/line-chart.component.html   |  8 ++---
 .../_charts/line-chart/line-chart.component.ts     | 37 ++++++++++++++++------
 .../scatterchart/scatterchart.component.css        |  6 ++--
 .../scatterchart/scatterchart.component.html       |  6 ++--
 .../_charts/scatterchart/scatterchart.component.ts | 21 ++++++++++--
 .../metric-view/metric-view.component.css          | 10 ++++++
 .../metric-view/metric-view.component.html         |  9 ++++--
 .../_pages/experiment/experiment.component.html    | 13 ++++++--
 frontend/src/app/_pages/home/home.component.html   |  3 +-
 frontend/src/app/app.module.ts                     |  7 +++-
 10 files changed, 90 insertions(+), 30 deletions(-)

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

diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
index c8f406f4..7f18256a 100644
--- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
@@ -1,5 +1,3 @@
-<div class="chart-wrapper">
-    <canvas  id="myChart">
-        
-    </canvas>
-</div>
\ No newline at end of file
+
+    <canvas  id="myChart" style="width: 100%; height: 530px;">   
+    </canvas>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
index 49558025..34df38bc 100644
--- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
@@ -1,4 +1,4 @@
-import { Component, AfterViewInit } from '@angular/core';
+import { Component, AfterViewInit, ViewChild } from '@angular/core';
 import { Chart } from 'chart.js';
 
 @Component({
@@ -9,12 +9,12 @@ import { Chart } from 'chart.js';
 
 export class LineChartComponent implements AfterViewInit {
 
-  dataAcc: number[] = [];
-  dataMAE: number[] = [];
-  dataMSE: number[] = [];
-  dataLOSS: number[] = [];
+  dataAcc: number[] = [2,3,5,5,6,7,8,8,4,6,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97];
+  dataMAE: number[] = [2,3,5,5,6,7,8,8,4,6,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97];
+  dataMSE: number[] = [2,3,5,5,6,7,8,8,4,6,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97];
+  dataLOSS: number[] =[2,3,5,5,6,7,8,8,4,6,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97];
 
-  dataEpoch: number[] = [];
+  dataEpoch: number[] = [2,3,5,5,6,7,8,8,4,6,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97];
 
   constructor() {
     /*let i = 0;
@@ -77,11 +77,28 @@ export class LineChartComponent implements AfterViewInit {
         },
         options: {
           scales: {
-            y: {
-              beginAtZero: true
-            }
+              x:{
+                ticks: {
+                  color: 'white'
+                },
+                grid: {
+                  color: "rgba(0, 99, 171, 0.5)"
+                }
+              },
+              y: {
+                  beginAtZero: true,
+                  ticks: {
+                    color: 'white'
+                  },
+                  grid: {
+                    color: "rgba(0, 99, 171, 0.5)"
+                  }
+              }
+              
           }
-        }
+          
+          
+      }
       }
     );
   }
diff --git a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css
index 5735217e..005cb692 100644
--- a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css
+++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css
@@ -1,6 +1,4 @@
 #divScatterChart{
-    background-color: beige;
-    display: block;
-    width: 400px;
-    height: 200px;   
+
+    display: block;   
 }
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html
index 2b30fe1f..ef41775a 100644
--- a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html
+++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html
@@ -1,4 +1,4 @@
-<p>Scatter chart:</p>
-<div id="divScatterChart">
-    <canvas id="ScatterCharts"> </canvas>
+
+<div id="divScatterChart" style="width: 100%;height: 100%;">
+    <canvas id="ScatterCharts" style="width: 100%;height: 280px;"> </canvas>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts
index 9dfef4c3..12795c70 100644
--- a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts
+++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts
@@ -24,15 +24,32 @@ export class ScatterchartComponent implements OnInit {
                 {x: 15, y: 5},
                 {x: 16, y: 3},
                 {x: 17, y: 2}],
-              backgroundColor: 'rgb(255, 99, 132)'
+                borderColor: 'white',
             }]
       },
       options: {
           scales: {
+              x:{
+                ticks: {
+                  color: 'white'
+                },
+                grid: {
+                  color: "rgba(0, 99, 171, 0.5)"
+                }
+              },
               y: {
-                  beginAtZero: true
+                  beginAtZero: true,
+                  ticks: {
+                    color: 'white'
+                  },
+                  grid: {
+                    color: "rgba(0, 99, 171, 0.5)"
+                  }
               }
+              
           }
+          
+          
       }
   });
   }
diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.css b/frontend/src/app/_elements/metric-view/metric-view.component.css
index e69de29b..f91c1ccc 100644
--- a/frontend/src/app/_elements/metric-view/metric-view.component.css
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.css
@@ -0,0 +1,10 @@
+#container{
+    width: 100%;
+    height: 90%;
+    border-radius: 5px;
+    background-color:var(--ns-primary-25);
+    border:1px solid var(--ns-accent);
+}
+#line{
+    background-color:#dfd7d7f0 ;
+}
\ No newline at end of file
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 3a6cce8d..d72bc92b 100644
--- a/frontend/src/app/_elements/metric-view/metric-view.component.html
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.html
@@ -1,3 +1,8 @@
-<div>
-
+<div id="container" class="d-flex justify-content-center flex-row w-100">
+    <div id="line" style="width: 100%;height: 100%;background-color:var(--ns-bg-dark-100);">
+        <app-line-chart></app-line-chart>
+    </div>
+    <div style="background-color: var(--ns-bg-dark-100);width: 50%;height: 50%;">
+        <app-scatterchart></app-scatterchart>
+    </div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html
index 08d709b2..86faeb2a 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.html
+++ b/frontend/src/app/_pages/experiment/experiment.component.html
@@ -1,4 +1,4 @@
-<div class="container-fluid p-0 text-offwhite holder" style="height: calc(100vh - 64px);">
+<div class="container-fluid p-0 text-offwhite holder" style="height: calc(100vh - 64px); text-align: center;">
     <div class="d-flex flex-colum align-items-center sidenav">
         <mat-stepper orientation="vertical" (selectionChange)="changePage($event)">
             <mat-step>
@@ -18,6 +18,10 @@
                 <ng-template matStepLabel><span class="label">Treniranje</span></ng-template>
                 <p>Odaberite parametre i trenirajte model</p>
             </mat-step>
+            <mat-step>
+                <ng-template matStepLabel><span class="label">Pregled rezultata treniranja</span></ng-template>
+                <p>Pregledajte tok treniranja i grafički prikaz rezultata</p>
+            </mat-step>
         </mat-stepper>
     </div>
     <div #stepsContainer class="steps-container">
@@ -33,7 +37,12 @@
         </div>
         <div #steps id="step_3" class="step-content">
             <div class="step-content-inside">
-                <app-folder [type]="FolderType.Model" [tabsToShow]="[TabType.MyModels, TabType.PublicModels, TabType.File]" (okPressed)="goToPage(0)"></app-folder>
+                <app-folder [type]="FolderType.Model" (okPressed)="goToPage(3)"></app-folder>
+            </div>
+        </div>
+        <div #steps id="step_4" class="step-content">
+            <div class="step-content-inside" >
+                <app-metric-view></app-metric-view>
             </div>
         </div>
     </div>
diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html
index 508382da..2825b3bf 100644
--- a/frontend/src/app/_pages/home/home.component.html
+++ b/frontend/src/app/_pages/home/home.component.html
@@ -27,6 +27,7 @@
                 </p>
             </div>
         </div>
-    </div>
 
+
+    </div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index fc6d3c6b..5a763152 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -32,6 +32,7 @@ import { ScatterchartComponent } from './_elements/_charts/scatterchart/scatterc
 import { BarchartComponent } from './_elements/_charts/barchart/barchart.component';
 import { PieChartComponent } from './_elements/_charts/pie-chart/pie-chart.component';
 import { BoxPlotComponent } from './_elements/_charts/box-plot/box-plot.component';
+import {LineChartComponent} from './_elements/_charts/line-chart/line-chart.component';
 // Elements
 import { NavbarComponent } from './_elements/navbar/navbar.component';
 import { NotificationsComponent } from './_elements/notifications/notifications.component';
@@ -49,6 +50,7 @@ import { TestComponent } from './_pages/test/test.component';
 import { DoughnutChartComponent } from './_elements/_charts/doughnut-chart/doughnut-chart.component';
 import { HeatmapComponent } from './_elements/_charts/heatmap/heatmap.component';
 import { HeatMapAllModule } from '@syncfusion/ej2-angular-heatmap';
+import { MetricViewComponent } from './_elements/metric-view/metric-view.component';
 
 export function initializeApp(appConfig: Configuration) {
   return () => appConfig.load();
@@ -85,7 +87,10 @@ export function initializeApp(appConfig: Configuration) {
     MissingvaluesDialogComponent,
     TestComponent,
     DoughnutChartComponent,
-    HeatmapComponent
+    HeatmapComponent,
+    MetricViewComponent,
+    LineChartComponent
+    
   ],
   imports: [
     BrowserModule,
-- 
cgit v1.2.3


From b1c19a1729f5a875ab486e06d5bc70c9d59cc44c Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Sat, 30 Apr 2022 21:01:57 +0200
Subject: Regulisan odabir kolona i zatamnjenje kolona koje su unchecked
 (column-table). Backend: u klasu Experiment dodat type i u ColumnInfo
 columnType. Frontend: u ColumnInfo columnType. Promenjene boje boxplota.

---
 backend/api/api/Models/ColumnInfo.cs               |   4 +-
 backend/api/api/Models/Experiment.cs               |   1 +
 frontend/package-lock.json                         | 172 +++++++++++++--------
 frontend/src/app/_data/Dataset.ts                  |  13 +-
 .../_charts/box-plot/box-plot.component.ts         |   8 +-
 .../column-table/column-table.component.css        |  32 +++-
 .../column-table/column-table.component.html       |  58 ++++---
 .../column-table/column-table.component.ts         |   6 +-
 8 files changed, 199 insertions(+), 95 deletions(-)

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

diff --git a/backend/api/api/Models/ColumnInfo.cs b/backend/api/api/Models/ColumnInfo.cs
index 04450fef..be3c7251 100644
--- a/backend/api/api/Models/ColumnInfo.cs
+++ b/backend/api/api/Models/ColumnInfo.cs
@@ -4,9 +4,10 @@
     {
         public ColumnInfo() { }
 
-        public ColumnInfo(string columnName, bool isNumber, int numNulls, float mean, float min, float max, float median, string[] uniqueValues)
+        public ColumnInfo(string columnName, string columnType, bool isNumber, int numNulls, float mean, float min, float max, float median, string[] uniqueValues)
         {
             this.columnName = columnName;
+            this.columnType = columnType;
             this.isNumber = isNumber;
             this.numNulls = numNulls;
             this.mean = mean;
@@ -17,6 +18,7 @@
         }
 
         public string columnName { get; set; }
+        public string columnType { get; set; }
         public bool isNumber { get; set; }
         public int numNulls { get; set; }
         public float mean { get; set; }
diff --git a/backend/api/api/Models/Experiment.cs b/backend/api/api/Models/Experiment.cs
index 6f665c52..f7bec083 100644
--- a/backend/api/api/Models/Experiment.cs
+++ b/backend/api/api/Models/Experiment.cs
@@ -10,6 +10,7 @@ namespace api.Models
         public string _id { get; set; }
         public string name { get; set; }
         public string description { get; set; }
+        public string type { get; set; }
         public List<string> ModelIds { get; set; }
         public string datasetId { get; set; }
         public string uploaderId { get; set; }
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 7f6dbdde..3f17c89a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -456,6 +456,7 @@
       "version": "13.2.5",
       "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-13.2.5.tgz",
       "integrity": "sha512-Xd8xj2Z0ilA4TJAM/JkTtA1CAa6SuebFsEEvabHCRO5MDvtdsIUP91ADUZIqDHy7qe6Qift/rAVN2PXxT2aaNA==",
+      "dev": true,
       "dependencies": {
         "@babel/core": "^7.17.2",
         "chokidar": "^3.0.0",
@@ -485,6 +486,7 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz",
       "integrity": "sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==",
+      "dev": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.0"
       },
@@ -496,6 +498,7 @@
       "version": "7.17.5",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.5.tgz",
       "integrity": "sha512-/BBMw4EvjmyquN5O+t5eh0+YqB3XXJkYD2cjKpYtWOfFy4lQ4UozNSmxAcWT8r2XtZs0ewG+zrfsqeR15i1ajA==",
+      "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.1.0",
         "@babel/code-frame": "^7.16.7",
@@ -525,6 +528,7 @@
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -533,6 +537,7 @@
       "version": "7.17.3",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.3.tgz",
       "integrity": "sha512-+R6Dctil/MgUsZsZAkYgK+ADNSZzJRRy0TvY65T71z/CR854xHQ1EweBYXdfT+HNeN7w0cSJJEzgxZMv40pxsg==",
+      "dev": true,
       "dependencies": {
         "@babel/types": "^7.17.0",
         "jsesc": "^2.5.1",
@@ -546,6 +551,7 @@
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -785,6 +791,7 @@
       "version": "7.16.12",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.12.tgz",
       "integrity": "sha512-dK5PtG1uiN2ikk++5OzSYsitZKny4wOCD0nrO4TqnW4BVBTQ2NGS3NgilvT/TEyxTST7LNyWV/T4tXDoD3fOgg==",
+      "dev": true,
       "dependencies": {
         "@babel/code-frame": "^7.16.7",
         "@babel/generator": "^7.16.8",
@@ -814,6 +821,7 @@
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -822,6 +830,7 @@
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -830,6 +839,7 @@
       "version": "7.16.8",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.8.tgz",
       "integrity": "sha512-1ojZwE9+lOXzcWdWmO6TbUzDfqLD39CmEhN8+2cX9XkDo5yW1OpgfejfliysR2AWLpMamTiOiAp/mtroaymhpw==",
+      "dev": true,
       "dependencies": {
         "@babel/types": "^7.16.8",
         "jsesc": "^2.5.1",
@@ -843,6 +853,7 @@
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3494,6 +3505,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
       "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -3767,6 +3779,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -3863,6 +3876,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
       "dependencies": {
         "fill-range": "^7.0.1"
       },
@@ -4045,6 +4059,7 @@
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -5062,6 +5077,7 @@
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz",
       "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==",
+      "dev": true,
       "engines": {
         "node": ">= 0.6.0"
       }
@@ -5226,6 +5242,7 @@
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
       "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "dev": true,
       "optional": true,
       "dependencies": {
         "iconv-lite": "^0.6.2"
@@ -5235,6 +5252,7 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
       "optional": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
@@ -6038,6 +6056,7 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -6206,6 +6225,7 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -6315,6 +6335,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -6907,6 +6928,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -6960,6 +6982,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -6976,6 +6999,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -7002,6 +7026,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -7867,6 +7892,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
       "dependencies": {
         "yallist": "^4.0.0"
       },
@@ -7878,6 +7904,7 @@
       "version": "0.25.7",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
       "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
+      "dev": true,
       "dependencies": {
         "sourcemap-codec": "^1.4.4"
       }
@@ -8507,6 +8534,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9202,6 +9230,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -10016,6 +10045,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -10321,7 +10351,7 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/sass": {
       "version": "1.49.0",
@@ -10451,6 +10481,7 @@
       "version": "7.3.5",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
       "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+      "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
       },
@@ -10835,7 +10866,8 @@
     "node_modules/sourcemap-codec": {
       "version": "1.4.8",
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "dev": true
     },
     "node_modules/spdy": {
       "version": "4.0.2",
@@ -11236,6 +11268,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -11327,6 +11360,7 @@
       "version": "4.5.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz",
       "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==",
+      "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -11966,7 +12000,8 @@
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
     },
     "node_modules/yaml": {
       "version": "1.10.2",
@@ -12301,6 +12336,7 @@
       "version": "13.2.5",
       "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-13.2.5.tgz",
       "integrity": "sha512-Xd8xj2Z0ilA4TJAM/JkTtA1CAa6SuebFsEEvabHCRO5MDvtdsIUP91ADUZIqDHy7qe6Qift/rAVN2PXxT2aaNA==",
+      "dev": true,
       "requires": {
         "@babel/core": "^7.17.2",
         "chokidar": "^3.0.0",
@@ -12318,6 +12354,7 @@
           "version": "2.1.2",
           "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz",
           "integrity": "sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==",
+          "dev": true,
           "requires": {
             "@jridgewell/trace-mapping": "^0.3.0"
           }
@@ -12326,6 +12363,7 @@
           "version": "7.17.5",
           "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.17.5.tgz",
           "integrity": "sha512-/BBMw4EvjmyquN5O+t5eh0+YqB3XXJkYD2cjKpYtWOfFy4lQ4UozNSmxAcWT8r2XtZs0ewG+zrfsqeR15i1ajA==",
+          "dev": true,
           "requires": {
             "@ampproject/remapping": "^2.1.0",
             "@babel/code-frame": "^7.16.7",
@@ -12347,7 +12385,8 @@
             "semver": {
               "version": "6.3.0",
               "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-              "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+              "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+              "dev": true
             }
           }
         },
@@ -12355,6 +12394,7 @@
           "version": "7.17.3",
           "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.3.tgz",
           "integrity": "sha512-+R6Dctil/MgUsZsZAkYgK+ADNSZzJRRy0TvY65T71z/CR854xHQ1EweBYXdfT+HNeN7w0cSJJEzgxZMv40pxsg==",
+          "dev": true,
           "requires": {
             "@babel/types": "^7.17.0",
             "jsesc": "^2.5.1",
@@ -12364,7 +12404,8 @@
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+          "dev": true
         }
       }
     },
@@ -12509,6 +12550,7 @@
       "version": "7.16.12",
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.16.12.tgz",
       "integrity": "sha512-dK5PtG1uiN2ikk++5OzSYsitZKny4wOCD0nrO4TqnW4BVBTQ2NGS3NgilvT/TEyxTST7LNyWV/T4tXDoD3fOgg==",
+      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.16.7",
         "@babel/generator": "^7.16.8",
@@ -12530,12 +12572,14 @@
         "semver": {
           "version": "6.3.0",
           "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
-          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw=="
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
         },
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+          "dev": true
         }
       }
     },
@@ -12543,6 +12587,7 @@
       "version": "7.16.8",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.16.8.tgz",
       "integrity": "sha512-1ojZwE9+lOXzcWdWmO6TbUzDfqLD39CmEhN8+2cX9XkDo5yW1OpgfejfliysR2AWLpMamTiOiAp/mtroaymhpw==",
+      "dev": true,
       "requires": {
         "@babel/types": "^7.16.8",
         "jsesc": "^2.5.1",
@@ -12552,7 +12597,8 @@
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+          "dev": true
         }
       }
     },
@@ -13713,8 +13759,7 @@
         "ws": {
           "version": "7.5.7",
           "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.7.tgz",
-          "integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A==",
-          "requires": {}
+          "integrity": "sha512-KMvVuFzpKBuiIXW3E4u3mySRO2/mCHSyZDJQM5NQ9Q9KHWHWh0NHgfbRMLLrceUK5qAL4ytALJbpRMjixFZh8A=="
         }
       }
     },
@@ -13730,8 +13775,7 @@
       "version": "13.2.5",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-13.2.5.tgz",
       "integrity": "sha512-obiPvwPe+UJUO8cfNbBxukLKG30F+gLF5/erexwklRknJzS4KP8ciH2on6XlTuXUahpDjbO0pffugFE2I/IszQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
@@ -14451,8 +14495,7 @@
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/acorn-import-assertions/-/acorn-import-assertions-1.8.0.tgz",
       "integrity": "sha512-m7VZ3jwz4eK6A4Vtt8Ew1/mNbP24u0FhdyfA7fSvnJR6LMdfOYnmuIrrJAgrYfYJ10F/otaHTtrtrtmHdMNzEw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "adjust-sourcemap-loader": {
       "version": "4.0.0",
@@ -14575,6 +14618,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
       "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
+      "dev": true,
       "requires": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -14772,7 +14816,8 @@
     "binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true
     },
     "bl": {
       "version": "4.1.0",
@@ -14843,8 +14888,7 @@
     "bootstrap": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
-      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
-      "requires": {}
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q=="
     },
     "brace-expansion": {
       "version": "1.1.11",
@@ -14859,6 +14903,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
       "requires": {
         "fill-range": "^7.0.1"
       }
@@ -14992,6 +15037,7 @@
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
       "requires": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -15019,8 +15065,7 @@
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/circular-dependency-plugin/-/circular-dependency-plugin-5.2.2.tgz",
       "integrity": "sha512-g38K9Cm5WRwlaH6g03B9OEz/0qRizI+2I7n+Gz+L5DxXJAPAiWQvwlYNm1V1jkdpUv95bOe/ASm2vfi/G560jQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "clean-stack": {
       "version": "2.2.0",
@@ -15497,8 +15542,7 @@
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz",
       "integrity": "sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "css-select": {
       "version": "4.2.1",
@@ -15764,7 +15808,8 @@
     "dependency-graph": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/dependency-graph/-/dependency-graph-0.11.0.tgz",
-      "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg=="
+      "integrity": "sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==",
+      "dev": true
     },
     "destroy": {
       "version": "1.0.4",
@@ -15899,6 +15944,7 @@
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
       "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
+      "dev": true,
       "optional": true,
       "requires": {
         "iconv-lite": "^0.6.2"
@@ -15908,6 +15954,7 @@
           "version": "0.6.3",
           "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
           "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+          "dev": true,
           "optional": true,
           "requires": {
             "safer-buffer": ">= 2.1.2 < 3.0.0"
@@ -16431,6 +16478,7 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
       "requires": {
         "to-regex-range": "^5.0.1"
       }
@@ -16553,6 +16601,7 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
       "optional": true
     },
     "function-bind": {
@@ -16628,6 +16677,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
       "requires": {
         "is-glob": "^4.0.1"
       }
@@ -16884,8 +16934,7 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
       "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "ieee754": {
       "version": "1.2.1",
@@ -17082,6 +17131,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
       "requires": {
         "binary-extensions": "^2.0.0"
       }
@@ -17113,7 +17163,8 @@
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
+      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "dev": true
     },
     "is-fullwidth-code-point": {
       "version": "3.0.0",
@@ -17124,6 +17175,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
       "requires": {
         "is-extglob": "^2.1.1"
       }
@@ -17143,7 +17195,8 @@
     "is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true
     },
     "is-path-cwd": {
       "version": "2.2.0",
@@ -17567,8 +17620,7 @@
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/karma-jasmine-html-reporter/-/karma-jasmine-html-reporter-1.7.0.tgz",
       "integrity": "sha512-pzum1TL7j90DTE86eFt48/s12hqwQuiD+e5aXx2Dc9wDEn2LfGq6RoAxEZZjFiN0RDSCOnosEKRZWxbQ+iMpQQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "karma-source-map-support": {
       "version": "1.4.0",
@@ -17790,6 +17842,7 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
       "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+      "dev": true,
       "requires": {
         "yallist": "^4.0.0"
       }
@@ -17798,6 +17851,7 @@
       "version": "0.25.7",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
       "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
+      "dev": true,
       "requires": {
         "sourcemap-codec": "^1.4.4"
       }
@@ -18263,7 +18317,8 @@
     "normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true
     },
     "normalize-range": {
       "version": "0.1.2",
@@ -18796,7 +18851,8 @@
     "picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true
     },
     "pify": {
       "version": "2.3.0",
@@ -18912,8 +18968,7 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-8.0.0.tgz",
       "integrity": "sha512-FvO2GzMUaTN0t1fBULDeIvxr5IvbDXcIatt6pnJghc736nqNgsGao5NT+5+WVLAQiTt6Cb3YUms0jiPaXhL//g==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-custom-properties": {
       "version": "12.1.4",
@@ -18983,15 +19038,13 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz",
       "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-gap-properties": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/postcss-gap-properties/-/postcss-gap-properties-3.0.3.tgz",
       "integrity": "sha512-rPPZRLPmEKgLk/KlXMqRaNkYTUpE7YC+bOIQFN5xcu1Vp11Y4faIXv6/Jpft6FMnl6YRxZqDZG0qQOW80stzxQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-image-set-function": {
       "version": "4.0.6",
@@ -19017,8 +19070,7 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-4.0.1.tgz",
       "integrity": "sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-lab-function": {
       "version": "4.1.1",
@@ -19045,22 +19097,19 @@
       "version": "5.0.4",
       "resolved": "https://registry.npmjs.org/postcss-logical/-/postcss-logical-5.0.4.tgz",
       "integrity": "sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-media-minmax": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz",
       "integrity": "sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-modules-extract-imports": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
       "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-modules-local-by-default": {
       "version": "4.0.0",
@@ -19104,15 +19153,13 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/postcss-overflow-shorthand/-/postcss-overflow-shorthand-3.0.3.tgz",
       "integrity": "sha512-CxZwoWup9KXzQeeIxtgOciQ00tDtnylYIlJBBODqkgS/PU2jISuWOL/mYLHmZb9ZhZiCaNKsCRiLp22dZUtNsg==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-page-break": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz",
       "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-place": {
       "version": "7.0.4",
@@ -19177,8 +19224,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz",
       "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "postcss-selector-not": {
       "version": "5.0.0",
@@ -19352,6 +19398,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
       "requires": {
         "picomatch": "^2.2.1"
       }
@@ -19583,7 +19630,7 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "devOptional": true
+      "dev": true
     },
     "sass": {
       "version": "1.49.0",
@@ -19639,8 +19686,7 @@
           "version": "3.5.2",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
           "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-          "dev": true,
-          "requires": {}
+          "dev": true
         },
         "json-schema-traverse": {
           "version": "0.4.1",
@@ -19669,6 +19715,7 @@
       "version": "7.3.5",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
       "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+      "dev": true,
       "requires": {
         "lru-cache": "^6.0.0"
       }
@@ -19984,7 +20031,8 @@
     "sourcemap-codec": {
       "version": "1.4.8",
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
+      "dev": true
     },
     "spdy": {
       "version": "4.0.2",
@@ -20192,8 +20240,7 @@
           "version": "3.5.2",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
           "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-          "dev": true,
-          "requires": {}
+          "dev": true
         },
         "json-schema-traverse": {
           "version": "0.4.1",
@@ -20267,6 +20314,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
       "requires": {
         "is-number": "^7.0.0"
       }
@@ -20335,7 +20383,8 @@
     "typescript": {
       "version": "4.5.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz",
-      "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA=="
+      "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==",
+      "dev": true
     },
     "ua-parser-js": {
       "version": "0.7.31",
@@ -20544,8 +20593,7 @@
           "version": "3.5.2",
           "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
           "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-          "dev": true,
-          "requires": {}
+          "dev": true
         },
         "json-schema-traverse": {
           "version": "0.4.1",
@@ -20781,8 +20829,7 @@
       "version": "8.2.3",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
       "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==",
-      "dev": true,
-      "requires": {}
+      "dev": true
     },
     "y18n": {
       "version": "5.0.8",
@@ -20792,7 +20839,8 @@
     "yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+      "dev": true
     },
     "yaml": {
       "version": "1.10.2",
diff --git a/frontend/src/app/_data/Dataset.ts b/frontend/src/app/_data/Dataset.ts
index e8207718..36eced88 100644
--- a/frontend/src/app/_data/Dataset.ts
+++ b/frontend/src/app/_data/Dataset.ts
@@ -29,6 +29,7 @@ export default class Dataset extends FolderFile {
 export class ColumnInfo {
     constructor(
         public columnName: string = '',
+        public columnType: ColumnType,
         public isNumber: boolean = false,
         public numNulls: number = 0,
         public uniqueValues?: string[],
@@ -36,5 +37,15 @@ export class ColumnInfo {
         public mean?: number,
         public min?: number,
         public max?: number
-    ) { }
+    ) { 
+        if (isNumber)
+            columnType = ColumnType.numerical;
+        else 
+            columnType = ColumnType.categorical;
+    }
 }
+
+export enum ColumnType {
+    categorical = "Kategorijski",
+    numerical = "Numerički"
+}
\ 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 3faa4794..d6f4b6ec 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
@@ -27,8 +27,8 @@ export class BoxPlotComponent implements AfterViewInit {
     labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/],
       datasets: [{
       label: 'Dataset 1',
-      backgroundColor: 'rgba(0, 65, 101, 1.0)',
-      borderColor: '#0063AB',
+      backgroundColor: '#0063AB',
+      borderColor: '#dfd7d7',
       borderWidth: 1,
       outlierColor: '#999999',
       scaleFontColor: '#0063AB',
@@ -78,7 +78,7 @@ export class BoxPlotComponent implements AfterViewInit {
              scales : {
                x: {
                 ticks: {
-                  color: 'rgba(0, 65, 101, 1.0)'
+                  color: '#dfd7d7'
                 },
                 grid: {
                   color: "rgba(0, 99, 171, 0.5)"
@@ -88,7 +88,7 @@ export class BoxPlotComponent implements AfterViewInit {
                   min: -50,
                   max: 200,
                   ticks: {
-                    color: 'rgba(0, 65, 101, 1.0)'
+                    color: '#dfd7d7'
                   },
                   grid: {
                     color: "rgba(0, 99, 171, 0.5)"
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 108efb32..5dc2e9ec 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.css
+++ b/frontend/src/app/_elements/column-table/column-table.component.css
@@ -3,7 +3,6 @@ table.fixed {
     display: block;
     overflow-x: auto;
     white-space: nowrap;
-    border: 1px solid var(--ns-primary-50);
     font-size: 12px;
     border-radius: 4px;
 }
@@ -18,7 +17,6 @@ table.fixed td {
     max-width: 200px;
     min-width: 200px;
     vertical-align: middle;
-    background-color: var(--ns-bg-dark-100);
     margin: 4px;
 }
 
@@ -27,13 +25,12 @@ table.fixed th {
     max-width: 120px;
     min-width: 120px;
     vertical-align: middle;
-    background-color: var(--ns-bg-dark-100);
+    background-color: var(--ns-primary-50);
     font-size: 14px;
 }
 
 table.fixed th:first-child {
     text-align: center;
-    background-color: var(--ns-primary-25);
 }
 
 .columnNames {
@@ -107,7 +104,7 @@ table ::ng-deep .mat-form-field-wrapper {
 }
 
 .graphic-class {
-    background-color: white !important;
+    opacity: 0.5;
 }
 
 
@@ -220,4 +217,29 @@ table ::ng-deep .mat-form-field-wrapper {
 
 .long {
     height: 3rem;
+}
+
+.col-disabled {
+    background-color: rgb(0, 45, 69);
+}
+
+.text-disabled {
+    color: gray;
+}
+
+.header-disabled {
+    color: gray;
+}
+
+.menu-disabled {
+    pointer-events: none;
+    opacity: .5;
+}
+
+col:not(.col-disabled) {
+    background-color: var(--ns-bg-dark-100);
+}
+
+.col-first {
+    background-color: rgb(1, 56, 86) !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 53cb3551..42c43138 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.html
+++ b/frontend/src/app/_elements/column-table/column-table.component.html
@@ -4,11 +4,12 @@
             {{tab.name}}
         </a>
     </div>
+    <!--
     <button mat-button class="p-1 folder-tab-end rounded-top">
         Kolone
         <mat-icon>keyboard_double_arrow_down</mat-icon>
-        <!--meni ovde-->
     </button>
+    -->
 </div>
 <div id="folder-table" *ngIf="dataset && experiment">
     <!--<div [ngSwitch]="tabToDisplay">-->
@@ -16,13 +17,17 @@
 
         <div [ngClass]="{'hidden': tabToDisplay != Table.Data}">
             <table class="table text-offwhite fixed bg-blur">
+                <colgroup>
+                    <col class="col-first">
+                    <col *ngFor="let column of dataset.columnInfo; let i = index" [ngClass]="{'col-disabled' : !experiment.inputColumns.includes(column.columnName)}">
+                </colgroup>
                 <thead>
                     <tr>
                         <th>#</th>
-                        <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                        <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'header-disabled' : !columnsChecked[i]}">
                             <div class="cell-align">
                                 #{{i + 1}}&nbsp;&nbsp;{{colInfo.columnName}}
-                                <mat-checkbox color="primary" checked (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox>
+                                <mat-checkbox color="primary" [(ngModel)]="columnsChecked[i]" (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox>
                             </div>
                         </th>
                     </tr>
@@ -30,7 +35,7 @@
                 <tbody>
                     <tr *ngFor="let row of tableData; let i = index">
                         <th>#{{i}}</th>
-                        <td *ngFor="let col of row; let j = index">
+                        <td *ngFor="let col of row; let j = index" [ngClass]="{'text-disabled' : !columnsChecked[j]}">
                             <div class="text-overflow">
                                 {{col}}
                             </div>
@@ -42,22 +47,29 @@
 
         <div [ngClass]="{'hidden': tabToDisplay != Table.CorrelationMatrix}">
             <table class="table text-offwhite fixed bg-blur">
+                <colgroup>
+                    <col class="col-first">
+                    <col *ngFor="let column of dataset.columnInfo; let i = index" [ngClass]="{'col-disabled' : !experiment.inputColumns.includes(column.columnName)}">
+                </colgroup>
                 <thead>
                     <tr>
-                        <th>Naziv</th>
-                        <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index">
-                            #{{i + 1}}&nbsp;&nbsp;{{colInfo.columnName}}
+                        <th>Kolona</th>
+                        <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'header-disabled' : !columnsChecked[i]}">
+                            <div class="cell-align">
+                                #{{i + 1}}&nbsp;&nbsp;{{colInfo.columnName}}
+                                <mat-checkbox color="primary" [(ngModel)]="columnsChecked[i]" (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox>
+                            </div>
                         </th>
                     </tr>
                 </thead>
                 <tbody>
                     <tr *ngFor="let colInfo of dataset.columnInfo; let i = index">
-                        <th>
+                        <th [ngClass]="{'header-disabled col-disabled' : !columnsChecked[i]}">
                             <div class="text-left">
                                 {{colInfo.columnName}}
                             </div>
                         </th>
-                        <td *ngFor="let colInfo of dataset.columnInfo; let j = index">
+                        <td *ngFor="let colInfo of dataset.columnInfo; let j = index" [ngClass]="{'text-disabled col-disabled' : !columnsChecked[j] || !columnsChecked[i]}">
                             <div class="text-overflow">
                                 0.1
                             </div>
@@ -69,13 +81,17 @@
 
         <div [ngClass]="{'hidden': tabToDisplay != Table.Columns}">
             <table class="table text-offwhite fixed bg-blur">
+                <colgroup>
+                    <col class="col-first">
+                    <col *ngFor="let column of dataset.columnInfo; let i = index" [ngClass]="{'col-disabled' : !experiment.inputColumns.includes(column.columnName)}">
+                </colgroup>
                 <thead>
                     <tr>
                         <th>Naziv</th>
-                        <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                        <th class="columnNames" *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'header-disabled' : !columnsChecked[i]}">
                             <div class="cell-align">
                                 #{{i + 1}}&nbsp;&nbsp;{{colInfo.columnName}}
-                                <mat-checkbox color="primary" checked (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox>
+                                <mat-checkbox color="primary" [(ngModel)]="columnsChecked[i]" (change)="changeInputColumns($event, colInfo.columnName)"></mat-checkbox>
                             </div>
                         </th>
                     </tr>
@@ -83,9 +99,9 @@
                 <tbody>
                     <tr>
                         <th>Tip</th>
-                        <td *ngFor="let colInfo of dataset.columnInfo; let i = index" class="pad-fix">
+                        <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)]="colInfo.isNumber">
+                                <mat-select matNativeControl [(value)]="colInfo.isNumber" [disabled]="!columnsChecked[i]">
                                     <mat-option [value]="false">Kategorijski</mat-option>
                                     <mat-option [value]="true">Numerički</mat-option>
                                 </mat-select>
@@ -93,15 +109,15 @@
                         </td>
                     </tr>
                     <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">
+                        <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="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>
-                        <th class="brighter">Statistika</th>
-                        <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                        <th class="border-bottom">Statistika</th>
+                        <td *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'text-disabled' : !columnsChecked[i]}">
                             <span *ngIf="colInfo.isNumber">
                     Mean: {{colInfo.mean}}<br>
                     Median: {{colInfo.median}}<br>
@@ -124,9 +140,9 @@
                             <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" class="pad-fix">
+                        <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">
+                                <mat-select matNativeControl [(value)]="experiment.encodings[i].encoding" [disabled]="!columnsChecked[i]">
                                     <mat-option *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)" [value]="option">
                                         {{ optionName }}
                                     </mat-option>
@@ -139,9 +155,9 @@
                             <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">
+                        <td *ngFor="let colInfo of dataset.columnInfo; let i = index" [ngClass]="{'text-disabled' : !columnsChecked[i]}">
 
-                            <button class="w-100" mat-raised-button [matMenuTriggerFor]="menu" id="main_{{colInfo.columnName}}" #nullValMenu>
+                            <button class="w-100" mat-raised-button [ngClass]="{ 'menu-disabled' : !columnsChecked[i]}" [matMenuTriggerFor]="menu" id="main_{{colInfo.columnName}}" #nullValMenu>
                     <div class="cell-align">
                         {{nullValOption[i]}}
                         <mat-icon>arrow_drop_down</mat-icon>
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 9cabf190..4499196c 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.ts
+++ b/frontend/src/app/_elements/column-table/column-table.component.ts
@@ -26,6 +26,8 @@ export class ColumnTableComponent implements AfterViewInit {
   tableData?: any[][];
   nullValOption: string[] = [];
 
+  columnsChecked: boolean[] = []; //niz svih kolona
+
   testSetDistribution: number = 70;
   constructor(private datasetService: DatasetsService, public csvParseService: CsvParseService, public dialog: MatDialog) {
     //ovo mi nece trebati jer primam dataset iz druge komponente
@@ -35,7 +37,9 @@ export class ColumnTableComponent implements AfterViewInit {
     this.datasetService.getMyDatasets().subscribe((datasets) => {
       this.dataset = datasets[0];
       this.experiment = new Experiment();
-
+      this.dataset.columnInfo.forEach(column => {
+        this.columnsChecked.push(true);
+      });
       console.log(datasets);
       for (let i = 0; i < this.dataset?.columnInfo.length; i++) {
         this.experiment?.inputColumns.push(this.dataset.columnInfo[i].columnName);
-- 
cgit v1.2.3


From 90dfdda35ce378808b3567b0addee603112ef756 Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Thu, 5 May 2022 00:56:30 +0200
Subject: Ispravio BUG u linechartu gde se vise puta iscrtavao isti model.

---
 backend/microservice/api/newmlservice.py           | 10 ++---
 .../_charts/line-chart/line-chart.component.ts     | 48 +++++++++++-----------
 .../app/_pages/experiment/experiment.component.ts  |  3 ++
 3 files changed, 32 insertions(+), 29 deletions(-)

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

diff --git a/backend/microservice/api/newmlservice.py b/backend/microservice/api/newmlservice.py
index 85d8fb71..2f08d4b4 100644
--- a/backend/microservice/api/newmlservice.py
+++ b/backend/microservice/api/newmlservice.py
@@ -183,7 +183,7 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback):
     columnTypes=paramsExperiment['columnTypes']
     for i in range(len(columnInfo)):
         col=columnInfo[i]
-        if(columnTypes[i]=="categorical"):
+        if(columnTypes[i]=="categorical" and col['columnName'] in paramsExperiment['inputColumns']):
             data[col['columnName']]=data[col['columnName']].apply(str)
             kategorijskekolone.append(col['columnName'])
     #kategorijskekolone=data.select_dtypes(include=['object']).columns
@@ -365,7 +365,7 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback):
 
         
 
-        classifier.compile(loss =paramsModel["lossFunction"] , optimizer = opt, metrics =paramsModel['metrics'])
+        classifier.compile(loss =paramsModel["lossFunction"] , optimizer = opt, metrics = ['accuracy','mae','mse'])
 
         history=classifier.fit(x_train, y_train, epochs = paramsModel['epochs'],batch_size=int(paramsModel['batchSize']),callbacks=callback(x_test, y_test,paramsModel['_id']))
      
@@ -419,7 +419,7 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback):
         
         classifier.add(tf.keras.layers.Dense(units=1, activation=paramsModel['outputLayerActivationFunction']))#izlazni sloj
 
-        classifier.compile(loss =paramsModel["lossFunction"] , optimizer = opt , metrics =paramsModel['metrics'])
+        classifier.compile(loss =paramsModel["lossFunction"] , optimizer = opt , metrics = ['accuracy','mae','mse'])
 
         history=classifier.fit(x_train, y_train, epochs = paramsModel['epochs'],batch_size=int(paramsModel['batchSize']),callbacks=callback(x_test, y_test,paramsModel['_id']))
         hist=history.history
@@ -468,7 +468,7 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback):
         
         classifier.add(tf.keras.layers.Dense(units=1,activation=paramsModel['outputLayerActivationFunction']))
 
-        classifier.compile(loss =paramsModel["lossFunction"] , optimizer = opt , metrics =paramsModel['metrics'])
+        classifier.compile(loss =paramsModel["lossFunction"] , optimizer = opt , metrics = ['accuracy','mae','mse'])
 
         history=classifier.fit(x_train, y_train, epochs = paramsModel['epochs'],batch_size=int(paramsModel['batchSize']),callbacks=callback(x_test, y_test,paramsModel['_id']))
         hist=history.history
@@ -638,7 +638,7 @@ def manageH5(dataset,params,h5model):
     h5model.summary()
     #ann_viz(h5model, title="My neural network")
 
-    h5model.compile(loss=params['lossFunction'], optimizer=params['optimizer'], metrics=params['metrics'])
+    h5model.compile(loss=params['lossFunction'], optimizer=params['optimizer'], metrics = ['accuracy','mae','mse'])
 
     history=h5model.fit(x2, y2, epochs = params['epochs'],batch_size=int(params['batchSize']))
     
diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
index 34df38bc..655db9ec 100644
--- a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
@@ -9,12 +9,12 @@ import { Chart } from 'chart.js';
 
 export class LineChartComponent implements AfterViewInit {
 
-  dataAcc: number[] = [2,3,5,5,6,7,8,8,4,6,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97];
-  dataMAE: number[] = [2,3,5,5,6,7,8,8,4,6,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97];
-  dataMSE: number[] = [2,3,5,5,6,7,8,8,4,6,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97];
-  dataLOSS: number[] =[2,3,5,5,6,7,8,8,4,6,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97];
+  dataAcc: number[] = [];
+  dataMAE: number[] = [];
+  dataMSE: number[] = [];
+  dataLOSS: number[] = [];
 
-  dataEpoch: number[] = [2,3,5,5,6,7,8,8,4,6,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97,2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97];
+  dataEpoch: number[] = [];
 
   constructor() {
     /*let i = 0;
@@ -77,28 +77,28 @@ export class LineChartComponent implements AfterViewInit {
         },
         options: {
           scales: {
-              x:{
-                ticks: {
-                  color: 'white'
-                },
-                grid: {
-                  color: "rgba(0, 99, 171, 0.5)"
-                }
+            x: {
+              ticks: {
+                color: 'white'
               },
-              y: {
-                  beginAtZero: true,
-                  ticks: {
-                    color: 'white'
-                  },
-                  grid: {
-                    color: "rgba(0, 99, 171, 0.5)"
-                  }
+              grid: {
+                color: "rgba(0, 99, 171, 0.5)"
               }
-              
+            },
+            y: {
+              beginAtZero: true,
+              ticks: {
+                color: 'white'
+              },
+              grid: {
+                color: "rgba(0, 99, 171, 0.5)"
+              }
+            }
+
           }
-          
-          
-      }
+
+
+        }
       }
     );
   }
diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts
index c4d6063c..1dc18a78 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.ts
+++ b/frontend/src/app/_pages/experiment/experiment.component.ts
@@ -75,6 +75,9 @@ export class ExperimentComponent implements AfterViewInit {
     if (this.signalRService.hubConnection) {
       this.signalRService.hubConnection.on("NotifyEpoch", (mName: string, mId: string, stat: string, totalEpochs: number, currentEpoch: number) => {
         console.log(this.modelToTrain?._id, mId);
+        if (currentEpoch == 0) {
+          this.history = [];
+        }
         if (this.modelToTrain?._id == mId) {
           stat = stat.replace(/'/g, '"');
           //console.log('JSON', this.trainingResult);
-- 
cgit v1.2.3