From 7f4315cc4accda4e7c038a58f6e8a2623c986eca Mon Sep 17 00:00:00 2001
From: TAMARA JERINIC <tamara.jerinic@gmail.com>
Date: Sat, 23 Apr 2022 20:46:13 +0200
Subject: Dodate stavke u material.module i form-model

---
 frontend/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'frontend/package.json')

diff --git a/frontend/package.json b/frontend/package.json
index c02a1fb0..5d9d677d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,13 +13,13 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~13.2.0",
-    "@angular/cdk": "^13.2.6",
+    "@angular/cdk": "^13.3.4",
     "@angular/common": "~13.2.0",
     "@angular/compiler": "~13.2.0",
     "@angular/core": "~13.2.0",
     "@angular/forms": "~13.2.0",
     "@angular/localize": "~13.2.0",
-    "@angular/material": "^13.2.6",
+    "@angular/material": "^13.3.4",
     "@angular/platform-browser": "~13.2.0",
     "@angular/platform-browser-dynamic": "~13.2.0",
     "@angular/router": "~13.2.0",
-- 
cgit v1.2.3


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

---
 frontend/package-lock.json                         | 189 ++++++++++++++-------
 frontend/package.json                              |   1 +
 frontend/src/app/_data/Dataset.ts                  |   2 +-
 .../column-table/column-table.component.css        |   5 +
 .../column-table/column-table.component.html       | 105 +++++++++++-
 .../column-table/column-table.component.ts         | 110 +++++++++++-
 .../metric-view/metric-view.component.html         |   2 -
 .../encoding-dialog/encoding-dialog.component.css  |   0
 .../encoding-dialog/encoding-dialog.component.html |  16 ++
 .../encoding-dialog.component.spec.ts              |  25 +++
 .../encoding-dialog/encoding-dialog.component.ts   |  28 +++
 .../missingvalues-dialog.component.css             |   0
 .../missingvalues-dialog.component.html            |  13 ++
 .../missingvalues-dialog.component.spec.ts         |  25 +++
 .../missingvalues-dialog.component.ts              |  28 +++
 frontend/src/app/app-routing.module.ts             |   4 +-
 frontend/src/app/app.module.ts                     |   6 +-
 frontend/src/styles.css                            |   3 +-
 18 files changed, 489 insertions(+), 73 deletions(-)
 create mode 100644 frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.css
 create mode 100644 frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html
 create mode 100644 frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.spec.ts
 create mode 100644 frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.ts
 create mode 100644 frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.css
 create mode 100644 frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.html
 create mode 100644 frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.spec.ts
 create mode 100644 frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.ts

(limited to 'frontend/package.json')

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 22756c36..b997f7c2 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -29,6 +29,7 @@
         "csv-parser": "^3.0.0",
         "d3-graphviz": "^2.6.1",
         "jquery": "^3.6.0",
+        "material-icons": "^1.10.8",
         "mdb-angular-ui-kit": "^2.0.0",
         "ng-multiselect-dropdown": "^0.3.8",
         "ng-uikit-pro-standard": "^1.0.0",
@@ -452,6 +453,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",
@@ -481,6 +483,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"
       },
@@ -492,6 +495,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",
@@ -521,6 +525,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"
       }
@@ -529,6 +534,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",
@@ -542,6 +548,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"
       }
@@ -781,6 +788,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",
@@ -810,6 +818,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"
       }
@@ -818,6 +827,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"
       }
@@ -826,6 +836,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",
@@ -839,6 +850,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"
       }
@@ -3365,6 +3377,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"
@@ -3638,6 +3651,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"
       }
@@ -3734,6 +3748,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"
       },
@@ -3911,6 +3926,7 @@
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
+      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -4929,6 +4945,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"
       }
@@ -5093,6 +5110,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"
@@ -5102,6 +5120,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"
@@ -5905,6 +5924,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"
       },
@@ -6073,6 +6093,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": [
@@ -6182,6 +6203,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"
       },
@@ -6774,6 +6796,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"
       },
@@ -6827,6 +6850,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"
       }
@@ -6843,6 +6867,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"
       },
@@ -6869,6 +6894,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"
       }
@@ -7734,6 +7760,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"
       },
@@ -7745,6 +7772,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"
       }
@@ -7800,6 +7828,11 @@
         "node": ">= 10"
       }
     },
+    "node_modules/material-icons": {
+      "version": "1.10.8",
+      "resolved": "https://registry.npmjs.org/material-icons/-/material-icons-1.10.8.tgz",
+      "integrity": "sha512-CbtQXCmC9MXIIkz/0CmEfxELosxKxLegrjoa0mxM0zPA+GgAuhnWX6ITo/5oON/JFaCi/bh4MydEUNu0erbaxw=="
+    },
     "node_modules/mdb-angular-ui-kit": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/mdb-angular-ui-kit/-/mdb-angular-ui-kit-2.0.0.tgz",
@@ -8369,6 +8402,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"
       }
@@ -9064,6 +9098,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"
       },
@@ -9878,6 +9913,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"
       },
@@ -9888,7 +9924,8 @@
     "node_modules/reflect-metadata": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
-      "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg=="
+      "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==",
+      "dev": true
     },
     "node_modules/regenerate": {
       "version": "1.4.2",
@@ -10178,7 +10215,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",
@@ -10308,6 +10345,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"
       },
@@ -10692,7 +10730,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",
@@ -11093,6 +11132,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"
       },
@@ -11184,6 +11224,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"
@@ -11823,7 +11864,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",
@@ -12158,6 +12200,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",
@@ -12175,6 +12218,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"
           }
@@ -12183,6 +12227,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",
@@ -12204,7 +12249,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
             }
           }
         },
@@ -12212,6 +12258,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",
@@ -12221,7 +12268,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
         }
       }
     },
@@ -12366,6 +12414,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",
@@ -12387,12 +12436,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
         }
       }
     },
@@ -12400,6 +12451,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",
@@ -12409,7 +12461,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
         }
       }
     },
@@ -13570,8 +13623,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=="
         }
       }
     },
@@ -13587,8 +13639,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",
@@ -14188,8 +14239,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",
@@ -14312,6 +14362,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"
@@ -14509,7 +14560,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",
@@ -14580,8 +14632,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",
@@ -14596,6 +14647,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"
       }
@@ -14724,6 +14776,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",
@@ -14751,8 +14804,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",
@@ -15230,8 +15282,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",
@@ -15497,7 +15548,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",
@@ -15632,6 +15684,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"
@@ -15641,6 +15694,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"
@@ -16164,6 +16218,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"
       }
@@ -16286,6 +16341,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": {
@@ -16361,6 +16417,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"
       }
@@ -16617,8 +16674,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",
@@ -16815,6 +16871,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"
       }
@@ -16846,7 +16903,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",
@@ -16857,6 +16915,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"
       }
@@ -16876,7 +16935,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",
@@ -17300,8 +17360,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",
@@ -17523,6 +17582,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"
       }
@@ -17531,6 +17591,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"
       }
@@ -17576,6 +17637,11 @@
         "ssri": "^8.0.0"
       }
     },
+    "material-icons": {
+      "version": "1.10.8",
+      "resolved": "https://registry.npmjs.org/material-icons/-/material-icons-1.10.8.tgz",
+      "integrity": "sha512-CbtQXCmC9MXIIkz/0CmEfxELosxKxLegrjoa0mxM0zPA+GgAuhnWX6ITo/5oON/JFaCi/bh4MydEUNu0erbaxw=="
+    },
     "mdb-angular-ui-kit": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/mdb-angular-ui-kit/-/mdb-angular-ui-kit-2.0.0.tgz",
@@ -17991,7 +18057,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",
@@ -18524,7 +18591,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",
@@ -18640,8 +18708,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",
@@ -18711,15 +18778,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",
@@ -18745,8 +18810,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",
@@ -18773,22 +18837,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",
@@ -18832,15 +18893,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",
@@ -18905,8 +18964,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",
@@ -19080,6 +19138,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"
       }
@@ -19087,7 +19146,8 @@
     "reflect-metadata": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
-      "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg=="
+      "integrity": "sha512-Ts1Y/anZELhSsjMcU605fU9RE4Oi3p5ORujwbIKXfWa+0Zxs510Qrmrce5/Jowq3cHSZSJqBjypxmHarc+vEWg==",
+      "dev": true
     },
     "regenerate": {
       "version": "1.4.2",
@@ -19306,7 +19366,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",
@@ -19362,8 +19422,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",
@@ -19392,6 +19451,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"
       }
@@ -19707,7 +19767,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",
@@ -19915,8 +19976,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",
@@ -19990,6 +20050,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"
       }
@@ -20058,7 +20119,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",
@@ -20267,8 +20329,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",
@@ -20504,8 +20565,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",
@@ -20515,7 +20575,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/package.json b/frontend/package.json
index 5d9d677d..f2d1e991 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -32,6 +32,7 @@
     "csv-parser": "^3.0.0",
     "d3-graphviz": "^2.6.1",
     "jquery": "^3.6.0",
+    "material-icons": "^1.10.8",
     "mdb-angular-ui-kit": "^2.0.0",
     "ng-multiselect-dropdown": "^0.3.8",
     "ng-uikit-pro-standard": "^1.0.0",
diff --git a/frontend/src/app/_data/Dataset.ts b/frontend/src/app/_data/Dataset.ts
index 766040a3..03060982 100644
--- a/frontend/src/app/_data/Dataset.ts
+++ b/frontend/src/app/_data/Dataset.ts
@@ -33,4 +33,4 @@ export class ColumnInfo {
         public min?: number,
         public max?: number
     ) { }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/app/_elements/column-table/column-table.component.css b/frontend/src/app/_elements/column-table/column-table.component.css
index e69de29b..f65d7c3d 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.css
+++ b/frontend/src/app/_elements/column-table/column-table.component.css
@@ -0,0 +1,5 @@
+table {
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+}
\ No newline at end of file
diff --git a/frontend/src/app/_elements/column-table/column-table.component.html b/frontend/src/app/_elements/column-table/column-table.component.html
index 7b18afc8..62699284 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.html
+++ b/frontend/src/app/_elements/column-table/column-table.component.html
@@ -1 +1,104 @@
-<p>column-table works!</p>
+<table *ngIf="dataset && experiment" class="table text-offwhite">
+    <thead>
+        <tr>
+            <th>Naziv</th>
+            <th *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                #{{i + 1}}&nbsp;&nbsp;{{colInfo.columnName}}
+                <input type="checkbox" class="btn-primary" checked (click)="changeInputColumns($event, colInfo.columnName)">
+            </th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <th>Tip</th>
+            <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                <mat-form-field>
+                    <select matNativeControl class="form-control btn-primary" (change)="changeColumnType($event, i)">
+                        <option [selected]="!colInfo.isNumber" value="Kategorijski">Kategorijski</option>
+                        <option [selected]="colInfo.isNumber" value="Numerički">Numerički</option>
+                    </select>
+                </mat-form-field>
+            </td>
+        </tr>
+        <tr>
+            <th>Grafik</th>
+            <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                <app-box-plot *ngIf="colInfo.isNumber"></app-box-plot>
+                <!--TODO: dodati [data]-->
+                <app-pie-chart *ngIf="!colInfo.isNumber"></app-pie-chart>
+            </td>
+        </tr>
+        <tr>
+            <th>Statistika</th>
+            <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                <span *ngIf="colInfo.isNumber">
+                    Mean: {{colInfo.mean}}<br>
+                    Median: {{colInfo.median}}<br>
+                    Min: {{colInfo.min}}<br>
+                    Max: {{colInfo.max}}<br>
+                    <!-- TODO na ML-u: Q1 i Q3 u statistici 
+                    Q1: {{colInfo.q1}}<br>
+                    Q3: {{colInfo.q3}}<br>
+                    -->
+                </span>
+                <span *ngIf="!colInfo.isNumber">
+                    <span *ngFor="let uniqueValue of colInfo.uniqueValues | slice:0:5; let i = index">
+                        {{uniqueValue}}<br><!-- TODO na ML-u: broj ponavljanja unique values-a u zagradi nek pise -->
+                    </span>
+                </span>
+            </td>
+        </tr>
+        <tr>
+            <th (click)="openEncodingDialog()">Enkoding&nbsp;
+                <span class="material-icons-round">settings</span>
+            </th>
+            <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                <mat-form-field>
+                    <select matNativeControl class="form-control btn-primary" [(ngModel)]="experiment.encodings[i].encoding">
+                        <option
+                            *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)"
+                            [value]="option">
+                            {{ optionName }}
+                        </option>
+                    </select>
+                </mat-form-field>
+            </td>
+        </tr>
+        <tr>
+            <th (click)="openMissingValuesDialog()">Regulisanje nedostajućih vrednosti&nbsp;
+                <span class="material-icons-round">settings</span>
+            </th>
+            <td *ngFor="let colInfo of dataset.columnInfo; let i = index">
+                <!--
+                <mat-form-field appearance="fill">
+                    <mat-select matNativeControl>
+                        <mat-option [value]="NullValueOptions.DeleteColumns">Obriši kolonu</mat-option>
+                        <mat-option [value]="NullValueOptions.DeleteRows">Obriši redove</mat-option>
+                        <mat-option>Popuni sa _____
+                            <mat-select matNativeControl>
+                                <mat-option>a</mat-option>
+                                <mat-option>b</mat-option>
+                                <mat-option>c</mat-option>
+                            </mat-select>
+                        </mat-option>
+                    </mat-select>
+                </mat-form-field>
+            -->
+                <button mat-button [matMenuTriggerFor]="animals">Izabrana opcija</button>
+                <mat-menu #animals="matMenu">
+                    <button mat-menu-item>Obriši kolonu</button>
+                    <button mat-menu-item>Obriši redove</button>
+                    <button mat-menu-item [matMenuTriggerFor]="fillWith">Popuni sa ____</button>
+                </mat-menu>
+
+                <mat-menu #fillWith="matMenu">
+                    <button mat-menu-item [matMenuTriggerFor]="replaceWith">Unesi vrednost...</button>
+                </mat-menu>
+
+                <mat-menu #replaceWith="matMenu">
+                    <input type="text" mat-menu-item placeholder="Unesi vrednost...">
+                </mat-menu>
+            </td>
+        </tr>
+    </tbody>
+</table>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/column-table/column-table.component.ts b/frontend/src/app/_elements/column-table/column-table.component.ts
index f8c5f5f3..18e38203 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.ts
+++ b/frontend/src/app/_elements/column-table/column-table.component.ts
@@ -1,4 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import Dataset from 'src/app/_data/Dataset';
+import Experiment, { ColumnEncoding, Encoding, NullValReplacer, NullValueOptions } from 'src/app/_data/Experiment';
+import { DatasetsService } from 'src/app/_services/datasets.service';
+import { EncodingDialogComponent } from 'src/app/_modals/encoding-dialog/encoding-dialog.component';
+import { MatDialog } from '@angular/material/dialog';
+import { MissingvaluesDialogComponent } from 'src/app/_modals/missingvalues-dialog/missingvalues-dialog.component';
 
 @Component({
   selector: 'app-column-table',
@@ -7,9 +13,109 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ColumnTableComponent implements OnInit {
 
-  constructor() { }
+  @Input() dataset?: Dataset;
+  @Input() experiment?: Experiment;
+
+  Object = Object;
+  Encoding = Encoding;
+  NullValueOptions = NullValueOptions;
+
+  constructor(private datasetService: DatasetsService, public dialog: MatDialog) { 
+    //ovo mi nece trebati jer primam dataset iz druge komponente
+    this.datasetService.getMyDatasets().subscribe((datasets) => {
+      this.dataset = datasets[0];
+      //console.log(this.dataset);
+      this.experiment = new Experiment();
+      for (let i = 0; i < this.dataset?.columnInfo.length; i++) {
+        this.experiment?.inputColumns.push(this.dataset.columnInfo[i].columnName);
+      }
+      this.resetColumnEncodings(Encoding.Label);
+    });
+  }
 
   ngOnInit(): void {
   }
 
+  changeInputColumns(target: any, columnName: string) {
+    if (this.experiment != undefined) {
+      if (target.currentTarget.checked) {
+        if (this.experiment.inputColumns.filter(x => x == columnName)[0] == undefined) {
+          this.experiment.inputColumns.push(columnName);
+        }
+      }
+      else {
+        this.experiment.inputColumns = this.experiment.inputColumns.filter(x => x != columnName);
+        //console.log("Input columns: ", this.experiment.inputColumns);
+        //TODO: da se zatamni kolona koja je unchecked
+      }
+    }
+  }
+
+  changeColumnType(target: any, indexOfCol: number) {
+    if (this.dataset != undefined) {
+      if (target.currentTarget.value == "Numerički") {
+        this.dataset.columnInfo[indexOfCol].isNumber = true;
+      }
+      else {
+        this.dataset.columnInfo[indexOfCol].isNumber = false;
+      }
+    }
+  }
+
+  resetColumnEncodings(encodingType: Encoding) {
+    if (this.experiment != undefined && this.dataset != undefined) {
+      this.experiment.encodings = [];
+      for (let i = 0; i < this.dataset?.columnInfo.length; i++) {
+        this.experiment.encodings.push(new ColumnEncoding(this.dataset?.columnInfo[i].columnName, encodingType));
+        //console.log(this.experiment.encodings);
+      }
+    }
+  }
+  openEncodingDialog() {
+      const dialogRef = this.dialog.open(EncodingDialogComponent, {
+        width: '300px'
+      });
+      dialogRef.afterClosed().subscribe(selectedEncoding => {
+        if (selectedEncoding != undefined)
+          this.resetColumnEncodings(selectedEncoding);
+      });
+  }
+
+  resetMissingValuesTreatment(selectedMissingValuesOption: NullValueOptions) {
+    if (this.experiment != undefined && this.dataset != undefined) {
+
+      if (selectedMissingValuesOption == NullValueOptions.DeleteColumns) {
+        this.experiment.nullValues = NullValueOptions.DeleteColumns;
+        this.experiment.nullValuesReplacers = [];
+        for (let i = 0; i < this.experiment.inputColumns.length; i++) {
+          this.experiment.nullValuesReplacers.push({
+            column: this.experiment.inputColumns[i],
+            option: NullValueOptions.DeleteColumns,
+            value: ""
+          });
+        }
+      } 
+      else if (selectedMissingValuesOption == NullValueOptions.DeleteRows) {
+        this.experiment.nullValues = NullValueOptions.DeleteRows;
+        this.experiment.nullValuesReplacers = [];
+        for (let i = 0; i < this.experiment.inputColumns.length; i++) {
+          this.experiment.nullValuesReplacers.push({
+            column: this.experiment.inputColumns[i],
+            option: NullValueOptions.DeleteRows,
+            value: ""
+          });
+        }
+      }
+
+    }
+  }
+  openMissingValuesDialog() {
+    const dialogRef = this.dialog.open(MissingvaluesDialogComponent, {
+      width: '400px'
+    });
+    dialogRef.afterClosed().subscribe(selectedMissingValuesOption => {
+      if (selectedMissingValuesOption != undefined) 
+        this.resetMissingValuesTreatment(selectedMissingValuesOption);
+    });
+  }
 }
diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.html b/frontend/src/app/_elements/metric-view/metric-view.component.html
index e7a4c547..3a6cce8d 100644
--- a/frontend/src/app/_elements/metric-view/metric-view.component.html
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.html
@@ -1,5 +1,3 @@
 <div>
-    <app-line-chart>
 
-    </app-line-chart>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.css b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html
new file mode 100644
index 00000000..8898a4e4
--- /dev/null
+++ b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html
@@ -0,0 +1,16 @@
+<h1 mat-dialog-title>Enkodiranje svih kolona</h1>
+<div mat-dialog-content>
+    <p>Odaberite tip enkodinga za sve kolone zajedno:</p>
+    <select matNativeControl class="form-control btn-primary" [(ngModel)]="selectedEncodingType">
+        <option
+            *ngFor="let option of Object.keys(Encoding); let optionName of Object.values(Encoding)"
+            [value]="option">
+            {{ optionName }}
+        </option>
+    </select>
+    <p>Da li ste sigurni u izbor?</p>
+</div>
+<div mat-dialog-actions>
+    <button mat-button [mat-dialog-close]="selectedEncodingType" cdkFocusInitial>Da</button>
+    <button mat-button (click)="onNoClick()">Odustani</button>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.spec.ts b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.spec.ts
new file mode 100644
index 00000000..77f30ae3
--- /dev/null
+++ b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EncodingDialogComponent } from './encoding-dialog.component';
+
+describe('EncodingDialogComponent', () => {
+  let component: EncodingDialogComponent;
+  let fixture: ComponentFixture<EncodingDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ EncodingDialogComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EncodingDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.ts b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.ts
new file mode 100644
index 00000000..3b7560bf
--- /dev/null
+++ b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.ts
@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import { Encoding } from 'src/app/_data/Experiment';
+
+
+@Component({
+  selector: 'app-encoding-dialog',
+  templateUrl: './encoding-dialog.component.html',
+  styleUrls: ['./encoding-dialog.component.css']
+})
+export class EncodingDialogComponent implements OnInit {
+
+  selectedEncodingType?: Encoding;
+  Encoding = Encoding;
+  Object = Object;
+
+  constructor(public dialogRef: MatDialogRef<EncodingDialogComponent>) 
+  { 
+    this.selectedEncodingType = Encoding.Label;
+  }
+
+  ngOnInit(): void {
+  }
+
+  onNoClick() {
+    this.dialogRef.close();
+  }
+}
diff --git a/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.css b/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.html b/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.html
new file mode 100644
index 00000000..81aec5f8
--- /dev/null
+++ b/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.html
@@ -0,0 +1,13 @@
+<h1 mat-dialog-title>Popunjavanje nedostajućih vrednosti</h1>
+<div mat-dialog-content>
+    <p>Želim da:</p>
+    <mat-radio-group [(ngModel)]="selectedMissingValuesOption">
+        <mat-radio-button [value]="NullValueOptions.DeleteColumns" checked>obrišem sve kolone koje sadrže nedostajuće vrednosti</mat-radio-button>
+        <mat-radio-button [value]="NullValueOptions.DeleteRows">obrišem sve redove koji sadrže nedostajuće vrednosti</mat-radio-button>
+    </mat-radio-group>
+    <p>Da li ste sigurni u izbor?</p>
+</div>
+<div mat-dialog-actions>
+    <button mat-button [mat-dialog-close]="selectedMissingValuesOption" cdkFocusInitial>Da</button>
+    <button mat-button (click)="onNoClick()">Odustani</button>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.spec.ts b/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.spec.ts
new file mode 100644
index 00000000..958925f4
--- /dev/null
+++ b/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MissingvaluesDialogComponent } from './missingvalues-dialog.component';
+
+describe('MissingvaluesDialogComponent', () => {
+  let component: MissingvaluesDialogComponent;
+  let fixture: ComponentFixture<MissingvaluesDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MissingvaluesDialogComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MissingvaluesDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.ts b/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.ts
new file mode 100644
index 00000000..908edd9e
--- /dev/null
+++ b/frontend/src/app/_modals/missingvalues-dialog/missingvalues-dialog.component.ts
@@ -0,0 +1,28 @@
+import { Component, OnInit } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import { NullValueOptions } from 'src/app/_data/Experiment';
+
+@Component({
+  selector: 'app-missingvalues-dialog',
+  templateUrl: './missingvalues-dialog.component.html',
+  styleUrls: ['./missingvalues-dialog.component.css']
+})
+export class MissingvaluesDialogComponent implements OnInit {
+
+  selectedMissingValuesOption?: NullValueOptions;
+
+  NullValueOptions = NullValueOptions;
+
+  constructor(public dialogRef: MatDialogRef<MissingvaluesDialogComponent>) 
+  { 
+    this.selectedMissingValuesOption = NullValueOptions.DeleteColumns;
+  }
+
+  ngOnInit(): void {
+  }
+
+  onNoClick() {
+    this.dialogRef.close();
+  }
+
+}
diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts
index cd742cfc..30cf2ea8 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 { ColumnTableComponent } from './_elements/column-table/column-table.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: 'sonja', component: ColumnTableComponent }
 ];
 
 @NgModule({
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index da81fc4a..70e78394 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -19,6 +19,8 @@ import { LoginModalComponent } from './_modals/login-modal/login-modal.component
 import { RegisterModalComponent } from './_modals/register-modal/register-modal.component';
 import { AlertDialogComponent } from './_modals/alert-dialog/alert-dialog.component';
 import { YesNoDialogComponent } from './_modals/yes-no-dialog/yes-no-dialog.component';
+import { EncodingDialogComponent } from './_modals/encoding-dialog/encoding-dialog.component';
+import { MissingvaluesDialogComponent } from './_modals/missingvalues-dialog/missingvalues-dialog.component';
 // Pages
 import { HomeComponent } from './_pages/home/home.component';
 import { ProfileComponent } from './_pages/profile/profile.component';
@@ -74,7 +76,9 @@ export function initializeApp(appConfig: Configuration) {
     ColumnTableComponent,
     PieChartComponent,
     BoxPlotComponent,
-    FolderComponent
+    FolderComponent,
+    EncodingDialogComponent,
+    MissingvaluesDialogComponent
   ],
   imports: [
     BrowserModule,
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 1100222e..e65d8d7c 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -3,4 +3,5 @@
 @import './styles/layout.css';
 @import './styles/helper.css';
 @import './styles/scrollbar.css';
-@import './styles/fx.css';
\ No newline at end of file
+@import './styles/fx.css';
+@import 'material-icons/iconfont/material-icons.css';
\ No newline at end of file
-- 
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/package.json')

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 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/package.json')

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 cac17c1840514b2dbb09b82db94dc772e09e88dc Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Tue, 3 May 2022 19:01:06 +0200
Subject: Dodao neke nedostajuce pakete.

---
 frontend/package-lock.json                         | 180 +++++++++++++++++++++
 frontend/package.json                              |   3 +
 .../column-table/column-table.component.html       |   1 -
 .../src/app/_elements/folder/folder.component.html |   3 +-
 .../_pages/experiment/experiment.component.html    |   4 +-
 .../app/_pages/experiment/experiment.component.ts  |  15 +-
 frontend/src/app/_services/csv-parse.service.ts    |  30 ++--
 7 files changed, 209 insertions(+), 27 deletions(-)

(limited to 'frontend/package.json')

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 7f6dbdde..2ff3ec49 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -31,6 +31,7 @@
         "chart.js": "^3.7.1",
         "csv-parser": "^3.0.0",
         "d3-graphviz": "^2.6.1",
+        "file-saver": "^2.0.5",
         "jquery": "^3.6.0",
         "material-icons": "^1.10.8",
         "mdb-angular-ui-kit": "^2.0.0",
@@ -43,6 +44,7 @@
         "rxjs": "~7.5.0",
         "tslib": "^2.3.1",
         "websocket-ts": "^1.1.1",
+        "xlsx": "^0.18.5",
         "zone.js": "~0.11.4"
       },
       "devDependencies": {
@@ -51,6 +53,7 @@
         "@angular/compiler-cli": "~13.2.0",
         "@types/crypto-js": "^4.1.1",
         "@types/d3-graphviz": "^2.6.7",
+        "@types/file-saver": "^2.0.5",
         "@types/jasmine": "~3.10.0",
         "@types/node": "^12.11.1",
         "jasmine-core": "~4.0.0",
@@ -3009,6 +3012,12 @@
         "@types/range-parser": "*"
       }
     },
+    "node_modules/@types/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==",
+      "dev": true
+    },
     "node_modules/@types/http-proxy": {
       "version": "1.17.8",
       "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.8.tgz",
@@ -3351,6 +3360,14 @@
         "node": ">=8.9.0"
       }
     },
+    "node_modules/adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -4012,6 +4029,18 @@
         "url": "https://opencollective.com/browserslist"
       }
     },
+    "node_modules/cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -4172,6 +4201,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -4521,6 +4558,17 @@
         "node": ">=10"
       }
     },
+    "node_modules/crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==",
+      "bin": {
+        "crc32": "bin/crc32.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/critters": {
       "version": "0.0.16",
       "resolved": "https://registry.npmjs.org/critters/-/critters-0.0.16.tgz",
@@ -6034,6 +6082,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -6143,6 +6196,14 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.3.tgz",
@@ -10873,6 +10934,17 @@
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
+    "node_modules/ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "dependencies": {
+        "frac": "~1.1.2"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/ssri": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
@@ -11883,6 +11955,22 @@
       "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
       "dev": true
     },
+    "node_modules/wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
@@ -11955,6 +12043,26 @@
         }
       }
     },
+    "node_modules/xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "dependencies": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      },
+      "bin": {
+        "xlsx": "bin/xlsx.njs"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
@@ -14153,6 +14261,12 @@
         "@types/range-parser": "*"
       }
     },
+    "@types/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==",
+      "dev": true
+    },
     "@types/http-proxy": {
       "version": "1.17.8",
       "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.8.tgz",
@@ -14477,6 +14591,11 @@
         }
       }
     },
+    "adler-32": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz",
+      "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A=="
+    },
     "agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -14962,6 +15081,15 @@
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001312.tgz",
       "integrity": "sha512-Wiz1Psk2MEK0pX3rUzWaunLTZzqS2JYZFzNKqAiJGiuxIjRPLgV6+VDPOg6lQOUxmDwhTlh198JsTTi8Hzw6aQ=="
     },
+    "cfb": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz",
+      "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==",
+      "requires": {
+        "adler-32": "~1.3.0",
+        "crc-32": "~1.2.0"
+      }
+    },
     "chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -15076,6 +15204,11 @@
         "shallow-clone": "^3.0.0"
       }
     },
+    "codepage": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
+      "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA=="
+    },
     "color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -15353,6 +15486,11 @@
         "yaml": "^1.10.0"
       }
     },
+    "crc-32": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz",
+      "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ=="
+    },
     "critters": {
       "version": "0.0.16",
       "resolved": "https://registry.npmjs.org/critters/-/critters-0.0.16.tgz",
@@ -16427,6 +16565,11 @@
         "escape-string-regexp": "^1.0.5"
       }
     },
+    "file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA=="
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -16506,6 +16649,11 @@
       "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
       "dev": true
     },
+    "frac": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz",
+      "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA=="
+    },
     "fraction.js": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.3.tgz",
@@ -20019,6 +20167,14 @@
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
+    "ssf": {
+      "version": "0.11.2",
+      "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz",
+      "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==",
+      "requires": {
+        "frac": "~1.1.2"
+      }
+    },
     "ssri": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
@@ -20739,6 +20895,16 @@
       "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
       "dev": true
     },
+    "wmf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz",
+      "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw=="
+    },
+    "word": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz",
+      "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA=="
+    },
     "wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
@@ -20784,6 +20950,20 @@
       "dev": true,
       "requires": {}
     },
+    "xlsx": {
+      "version": "0.18.5",
+      "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz",
+      "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==",
+      "requires": {
+        "adler-32": "~1.3.0",
+        "cfb": "~1.2.1",
+        "codepage": "~1.15.0",
+        "crc-32": "~1.2.1",
+        "ssf": "~0.11.2",
+        "wmf": "~1.0.1",
+        "word": "~0.3.0"
+      }
+    },
     "y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 89381956..1596072d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -34,6 +34,7 @@
     "chart.js": "^3.7.1",
     "csv-parser": "^3.0.0",
     "d3-graphviz": "^2.6.1",
+    "file-saver": "^2.0.5",
     "jquery": "^3.6.0",
     "material-icons": "^1.10.8",
     "mdb-angular-ui-kit": "^2.0.0",
@@ -46,6 +47,7 @@
     "rxjs": "~7.5.0",
     "tslib": "^2.3.1",
     "websocket-ts": "^1.1.1",
+    "xlsx": "^0.18.5",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
@@ -54,6 +56,7 @@
     "@angular/compiler-cli": "~13.2.0",
     "@types/crypto-js": "^4.1.1",
     "@types/d3-graphviz": "^2.6.7",
+    "@types/file-saver": "^2.0.5",
     "@types/jasmine": "~3.10.0",
     "@types/node": "^12.11.1",
     "jasmine-core": "~4.0.0",
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 050f9644..42c43138 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.html
+++ b/frontend/src/app/_elements/column-table/column-table.component.html
@@ -1,4 +1,3 @@
-{{forExperiment.name}}
 <div id="tabs">
     <div class="folder-tab p-1 rounded-top" *ngFor="let tab of tabs; let i = index" [style]="'z-index:' + calcZIndex(i) + ' ;'" [ngClass]="{'selected-tab' : selectedTab.index == i, 'hover-tab' : hoveringOverTab?.index == i}">
         <a class="m-1 stretched-link tab-link" (click)="selectTab(i)" (mouseenter)="hoverOverTab(i)" (mouseleave)="hoverOverTab(-1)">
diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html
index 404ba302..54c7a3d7 100644
--- a/frontend/src/app/_elements/folder/folder.component.html
+++ b/frontend/src/app/_elements/folder/folder.component.html
@@ -1,4 +1,3 @@
-{{forExperiment.name}}
 <div id="folder">
     <div id="tabs">
         <div id="new-file-tab" class="folder-tab p-1 rounded-top" [style]="'z-index:' + (selectedTab == TabType.NewFile ? 11 : 10) + ' ;'" [ngClass]="{'selected-tab' : selectedTab == TabType.NewFile, 'hover-tab' : hoverTab == TabType.NewFile}">
@@ -64,7 +63,7 @@
                     </button>
                 </div>
                 <app-form-model [forExperiment]="forExperiment" [model]="fileToDisplay" *ngSwitchCase="FolderType.Model"></app-form-model>
-                <app-form-dataset *ngSwitchCase="FolderType.Dataset" ></app-form-dataset>
+                <app-form-dataset *ngSwitchCase="FolderType.Dataset"></app-form-dataset>
             </div>
             <div *ngSwitchCase="true" class="list-view">
                 <div *ngFor="let file of filteredFiles; let i = index" class="list-item">
diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html
index ee14c782..25eb98b7 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.html
+++ b/frontend/src/app/_pages/experiment/experiment.component.html
@@ -32,7 +32,7 @@
         </div>
         <div #steps id="step_2" class="step-content">
             <div class="step-content-inside">
-                <app-column-table (okPressed)="goToPage(2)" [forExperiment]="experiment"></app-column-table>
+                <app-column-table (okPressed)="goToPage(2)" [experiment]="experiment"></app-column-table>
             </div>
         </div>
         <div #steps id="step_3" class="step-content">
@@ -41,7 +41,7 @@
             </div>
         </div>
         <div #steps id="step_4" class="step-content">
-            <div class="step-content-inside" >
+            <div class="step-content-inside">
                 <app-metric-view></app-metric-view>
             </div>
         </div>
diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts
index 8485ded6..bfa42702 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.ts
+++ b/frontend/src/app/_pages/experiment/experiment.component.ts
@@ -7,6 +7,7 @@ import { FolderComponent, TabType } from 'src/app/_elements/folder/folder.compon
 import Experiment from 'src/app/_data/Experiment';
 import { ExperimentsService } from 'src/app/_services/experiments.service';
 import { ModelsService } from 'src/app/_services/models.service';
+import Model from 'src/app/_data/Model';
 
 @Component({
   selector: 'app-experiment',
@@ -20,9 +21,9 @@ export class ExperimentComponent implements AfterViewInit {
   @ViewChildren('steps') steps!: ElementRef[];
 
   event: number = 0;
-  @Input() experiment: Experiment; 
-  @ViewChild("folderDataset") folderDataset?: FolderComponent;
-  @ViewChild("folderModel") folderModel?: FolderComponent;
+  @Input() experiment: Experiment;
+  @ViewChild("folderDataset") folderDataset!: FolderComponent;
+  @ViewChild("folderModel") folderModel!: FolderComponent;
 
   constructor(private experimentsService: ExperimentsService, private modelsService: ModelsService) {
     this.experiment = new Experiment("exp1");
@@ -32,12 +33,12 @@ export class ExperimentComponent implements AfterViewInit {
 
   }*/
 
-  addNewExperiment(){
-    this.experimentsService.addExperiment(this.experiment).subscribe(()=>{console.log("new Experiment")});
+  addNewExperiment() {
+    this.experimentsService.addExperiment(this.experiment).subscribe(() => { console.log("new Experiment") });
   }
 
-  trainModel(){
-    this.modelsService.trainModel((<Model>this.folderModel.selectedFile)._id, this.experiment._id).subscribe(()=>{console.log("pocelo treniranje")})
+  trainModel() {
+    this.modelsService.trainModel((<Model>this.folderModel.selectedFile)._id, this.experiment._id).subscribe(() => { console.log("pocelo treniranje") })
   }
 
   stepHeight = this.calcStepHeight();
diff --git a/frontend/src/app/_services/csv-parse.service.ts b/frontend/src/app/_services/csv-parse.service.ts
index 6d2fd8d8..aae10193 100644
--- a/frontend/src/app/_services/csv-parse.service.ts
+++ b/frontend/src/app/_services/csv-parse.service.ts
@@ -53,42 +53,42 @@ export class CsvParseService {
 
       if (strMatchedValue.length > 0)
         arrData[arrData.length - 1].push(strMatchedValue);
-      else 
+      else
         arrData[arrData.length - 1].push(null);
     }
 
     return (arrData);
   }
 
-  ConvertJSONToCSV(objArray, headerList) {
+  ConvertJSONToCSV(objArray: string, headerList: { [x: string]: any; }) {
     let array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
     let str = '';
     let row = 'S.No,';
     for (let index in headerList) {
-     row += headerList[index] + ',';
+      row += headerList[index] + ',';
     }
     row = row.slice(0, -1);
     str += row + '\r\n';
     for (let i = 0; i < array.length; i++) {
-     let line = (i+1)+'';
-     for (let index in headerList) {
-      let head = headerList[index];
-      line += ',' + array[i][head];
-     }
-     str += line + '\r\n';
+      let line = (i + 1) + '';
+      for (let index in headerList) {
+        let head = headerList[index];
+        line += ',' + array[i][head];
+      }
+      str += line + '\r\n';
     }
     return str;
-   }
+  }
 
-  public exportAsExcelFile(json: any[], excelFileName: string): void { 
+  public exportAsExcelFile(json: any[], excelFileName: string): void {
     const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(json);
-    const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] }; 
+    const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
     const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
     this.saveAsExcelFile(excelBuffer, excelFileName);
   }
 
   private saveAsExcelFile(buffer: any, fileName: string): void {
-    const data: Blob = new Blob([buffer], {type: EXCEL_TYPE});  
-    FileSaver.saveAs(data, fileName + '_export_' + new  Date().getTime() + EXCEL_EXTENSION);
- }
+    const data: Blob = new Blob([buffer], { type: EXCEL_TYPE });
+    FileSaver.saveAs(data, fileName + '_export_' + new Date().getTime() + EXCEL_EXTENSION);
+  }
 }
\ No newline at end of file
-- 
cgit v1.2.3