From 1177f4b29b616a59af39f4aef11b116f9660357d Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Sat, 23 Apr 2022 01:28:46 +0200 Subject: Reorganizovao stranice i komponente. --- .../app/_elements/column-table/column-table.component.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 frontend/src/app/_elements/column-table/column-table.component.ts (limited to 'frontend/src/app/_elements/column-table/column-table.component.ts') diff --git a/frontend/src/app/_elements/column-table/column-table.component.ts b/frontend/src/app/_elements/column-table/column-table.component.ts new file mode 100644 index 00000000..f8c5f5f3 --- /dev/null +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-column-table', + templateUrl: './column-table.component.html', + styleUrls: ['./column-table.component.css'] +}) +export class ColumnTableComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} -- cgit v1.2.3 From 3e07b3304b65fcab6740a05231999dfc453ffbb9 Mon Sep 17 00:00:00 2001 From: Sonja Galovic 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/src/app/_elements/column-table/column-table.component.ts') 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 @@ -

column-table works!

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Naziv + #{{i + 1}}  {{colInfo.columnName}} + +
Tip + + + +
Grafik + + + +
Statistika + + Mean: {{colInfo.mean}}
+ Median: {{colInfo.median}}
+ Min: {{colInfo.min}}
+ Max: {{colInfo.max}}
+ + + + + {{uniqueValue}}
+ + +
Enkoding  + settings + + + + +
Regulisanje nedostajućih vrednosti  + settings + + + + + + + + + + + + + + + + +
\ 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 @@
- -
\ 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 @@ +

Enkodiranje svih kolona

+
+

Odaberite tip enkodinga za sve kolone zajedno:

+ +

Da li ste sigurni u izbor?

+
+
+ + +
\ 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; + + 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) + { + 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 @@ +

Popunjavanje nedostajućih vrednosti

+
+

Želim da:

+ + obrišem sve kolone koje sadrže nedostajuće vrednosti + obrišem sve redove koji sadrže nedostajuće vrednosti + +

Da li ste sigurni u izbor?

+
+
+ + +
\ 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; + + 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) + { + 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 25ac2c1b92de81de521897089f7d3dd14c52e657 Mon Sep 17 00:00:00 2001 From: Sonja Galovic Date: Tue, 26 Apr 2022 16:58:23 +0200 Subject: Column-table komponenta: zavrseno regulisanje nedostajucih vrednosti (padajuce liste). Promenjeni stilovi svih inputa (material design). --- .../column-table/column-table.component.html | 65 +++++++++++----------- .../column-table/column-table.component.ts | 65 +++++++++++++++++----- .../encoding-dialog/encoding-dialog.component.html | 14 ++--- 3 files changed, 90 insertions(+), 54 deletions(-) (limited to 'frontend/src/app/_elements/column-table/column-table.component.ts') 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 62699284..e6d9442c 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -4,7 +4,7 @@ Naziv #{{i + 1}}  {{colInfo.columnName}} - + @@ -13,19 +13,19 @@ Tip - + + Kategorijski + Numerički + Grafik - + - + @@ -42,7 +42,7 @@ --> - + {{uniqueValue}}
 @@ -54,13 +54,11 @@ - + + @@ -69,35 +67,34 @@ settings - - - - - + + + + + + + + + + + + + + + + - + + + 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 18e38203..603de591 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -5,6 +5,8 @@ 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'; +import { MatCheckboxChange } from '@angular/material/checkbox'; +import { MatMenuItem, MatMenuTrigger } from '@angular/material/menu'; @Component({ selector: 'app-column-table', @@ -36,9 +38,9 @@ export class ColumnTableComponent implements OnInit { ngOnInit(): void { } - changeInputColumns(target: any, columnName: string) { + changeInputColumns(targetMatCheckbox: MatCheckboxChange, columnName: string) { if (this.experiment != undefined) { - if (target.currentTarget.checked) { + if (targetMatCheckbox.checked) { if (this.experiment.inputColumns.filter(x => x == columnName)[0] == undefined) { this.experiment.inputColumns.push(columnName); } @@ -51,17 +53,6 @@ export class ColumnTableComponent implements OnInit { } } - 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 = []; @@ -118,4 +109,52 @@ export class ColumnTableComponent implements OnInit { this.resetMissingValuesTreatment(selectedMissingValuesOption); }); } + + MissValsDeleteClicked(event: Event, replacementType: NullValueOptions) { + if (this.experiment != undefined) { + let columnName = (event.currentTarget).value; + let arrayElement = this.experiment.nullValuesReplacers.filter(x => x.column == columnName)[0]; + + if (arrayElement == undefined) { + this.experiment.nullValuesReplacers.push({ + column: columnName, + option: (replacementType == NullValueOptions.DeleteColumns) ? NullValueOptions.DeleteColumns : NullValueOptions.DeleteRows, + value: "" + }); + } + else { + arrayElement.option = (replacementType == NullValueOptions.DeleteColumns) ? NullValueOptions.DeleteColumns : NullValueOptions.DeleteRows; + arrayElement.value = ""; + } + + (document.getElementById("main_" + columnName)).textContent = (replacementType == NullValueOptions.DeleteColumns) ? "Obriši kolonu" : "Obriši redove"; + } + } + + MissValsReplaceClicked(event: Event, columnName: string) { + if (this.experiment != undefined) { + let fillValue = (event.currentTarget).value; + let arrayElement = this.experiment.nullValuesReplacers.filter(x => x.column == columnName)[0]; + + if (arrayElement == undefined) { + this.experiment.nullValuesReplacers.push({ + column: columnName, + option: NullValueOptions.Replace, + value: fillValue + }); + } + else { + arrayElement.option = NullValueOptions.Replace; + arrayElement.value = fillValue; + } + + (document.getElementById("main_" + columnName)).textContent = "Popuni sa: " + fillValue; + } + } + getValue(columnName: string): string { + if (document.getElementById(columnName) != undefined) + return (document.getElementById(columnName)).value; + return '0'; + } + } diff --git a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html index 8898a4e4..7ba286cb 100644 --- a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html +++ b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.html @@ -1,13 +1,13 @@

Enkodiranje svih kolona

Odaberite tip enkodinga za sve kolone zajedno:

- + + + + {{ optionName }} + + +

Da li ste sigurni u izbor?

-- cgit v1.2.3 From 1cd21bb27492de6c8c61f36b258e4acfacab7fd3 Mon Sep 17 00:00:00 2001 From: Ognjen Cirkovic Date: Tue, 26 Apr 2022 18:40:13 +0200 Subject: Promenjen dizajn. Dodati procenti kod trening i test skupa. --- .../src/app/_elements/column-table/column-table.component.html | 10 ++++++---- .../src/app/_elements/column-table/column-table.component.ts | 2 +- 2 files changed, 7 insertions(+), 5 deletions(-) (limited to 'frontend/src/app/_elements/column-table/column-table.component.ts') 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 8225de6d..4418d21b 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -105,10 +105,12 @@
-
- TreningTest +
+
TreningTest
+
Trening:{{testSetDistribution}}% : Test:{{100-testSetDistribution}}%
-
+ +
Tip problema @@ -118,7 +120,7 @@
-
+
Izlazna kolona 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 18e38203..78abe438 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -19,7 +19,7 @@ export class ColumnTableComponent implements OnInit { Object = Object; Encoding = Encoding; NullValueOptions = NullValueOptions; - + testSetDistribution:number=70; constructor(private datasetService: DatasetsService, public dialog: MatDialog) { //ovo mi nece trebati jer primam dataset iz druge komponente this.datasetService.getMyDatasets().subscribe((datasets) => { -- cgit v1.2.3 From 9a8e08fbae8e5c08abebc977f51eb275fee66bca Mon Sep 17 00:00:00 2001 From: Ognjen Cirkovic Date: Tue, 26 Apr 2022 19:33:00 +0200 Subject: Dodata realtime promena % po pomeranju slidera. --- frontend/src/app/_elements/column-table/column-table.component.html | 5 +++-- frontend/src/app/_elements/column-table/column-table.component.ts | 6 ++++++ 2 files changed, 9 insertions(+), 2 deletions(-) (limited to 'frontend/src/app/_elements/column-table/column-table.component.ts') 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 4418d21b..c8b1e477 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -106,8 +106,9 @@
-
TreningTest
-
Trening:{{testSetDistribution}}% : Test:{{100-testSetDistribution}}%
+
{{testSetDistribution}}% : {{100-testSetDistribution}}%
+
TreningTest
+
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 78abe438..c9b3b887 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -5,6 +5,7 @@ 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'; +import { MatSliderChange } from '@angular/material/slider'; @Component({ selector: 'app-column-table', @@ -118,4 +119,9 @@ export class ColumnTableComponent implements OnInit { this.resetMissingValuesTreatment(selectedMissingValuesOption); }); } + updateTestSet(event:MatSliderChange){ + this.testSetDistribution=event.value!; + } + + } -- cgit v1.2.3 From 31e3b846eda94de86e249956d96c54aaa92eb0c6 Mon Sep 17 00:00:00 2001 From: Sonja Galovic Date: Tue, 26 Apr 2022 21:11:43 +0200 Subject: Column-table: afterview init. Menjani theme.css i columne-table.css, malo sredjen dizajn tabele. --- .../column-table/column-table.component.css | 28 +++++++++++++- .../column-table/column-table.component.html | 21 ++++++++--- .../column-table/column-table.component.ts | 44 +++++++++++++++++++--- frontend/src/styles/theme.css | 2 + 4 files changed, 83 insertions(+), 12 deletions(-) (limited to 'frontend/src/app/_elements/column-table/column-table.component.ts') 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 f65d7c3d..6b62dd56 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.css +++ b/frontend/src/app/_elements/column-table/column-table.component.css @@ -1,5 +1,31 @@ -table { +table.fixed { + table-layout: fixed; display: block; overflow-x: auto; white-space: nowrap; +} + +table.fixed td { + overflow: hidden; + max-width: 200px; + vertical-align: middle; +} + +table.fixed th { + overflow: hidden; + max-width: 350px; + vertical-align: middle; +} + +table.fixed th:first-child { + text-align: center; + background-color: var(--ns-primary-25); +} + +.columnNames { + background-color: var(--ns-primary-50) !important; +} + +.brighter { + background-color: var(--ns-primary) !important; } \ No newline at end of file diff --git a/frontend/src/app/_elements/column-table/column-table.component.html b/frontend/src/app/_elements/column-table/column-table.component.html index e6d9442c..2b2fd537 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -1,8 +1,8 @@ - +
- @@ -29,7 +29,7 @@ - + - - + + + + +
Naziv + #{{i + 1}}  {{colInfo.columnName}}
StatistikaStatistika Mean: {{colInfo.mean}}
@@ -49,7 +49,7 @@
Enkoding  + Enkoding  settings @@ -63,12 +63,14 @@
Regulisanje nedostajućih vrednosti  + Regulisanje
nedostajućih
vrednosti
settings 		- + @@ -97,5 +99,12 @@
Vrednosti + ok +
\ 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 603de591..caacf63e 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,4 @@ -import { Component, Input, OnInit } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChildren } 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'; @@ -13,17 +13,22 @@ import { MatMenuItem, MatMenuTrigger } from '@angular/material/menu'; templateUrl: './column-table.component.html', styleUrls: ['./column-table.component.css'] }) -export class ColumnTableComponent implements OnInit { +export class ColumnTableComponent implements AfterViewInit { @Input() dataset?: Dataset; @Input() experiment?: Experiment; + @ViewChildren("nullValMenu") nullValMenus!: ElementRef[]; Object = Object; Encoding = Encoding; NullValueOptions = NullValueOptions; + tableData?: any[][]; constructor(private datasetService: DatasetsService, public dialog: MatDialog) { //ovo mi nece trebati jer primam dataset iz druge komponente + } + + ngAfterViewInit(): void { this.datasetService.getMyDatasets().subscribe((datasets) => { this.dataset = datasets[0]; //console.log(this.dataset); @@ -32,10 +37,36 @@ export class ColumnTableComponent implements OnInit { this.experiment?.inputColumns.push(this.dataset.columnInfo[i].columnName); } this.resetColumnEncodings(Encoding.Label); + this.setDeleteColumnsForMissingValTreatment(); + + /*this.tableData = this.datasetService.getDatasetFile(this.dataset._id).subscribe((file: string | undefined) => { + if (file) { + //this.tableData = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter); + } + });*/ }); } - ngOnInit(): void { + setDeleteColumnsForMissingValTreatment() { + console.log("USAOOOO"); + if (this.experiment != undefined) { + this.experiment.nullValues = NullValueOptions.DeleteColumns; + this.experiment.nullValuesReplacers = []; + console.log("duzina",this.experiment.inputColumns.length); + for (let i = 0; i < this.experiment.inputColumns.length; i++) { + this.experiment.nullValuesReplacers.push({ + column: this.experiment.inputColumns[i], + option: NullValueOptions.DeleteColumns, + value: "" + }); + console.log(i); + } + //console.log("len",this.nullValMenus.length); + this.nullValMenus.forEach((menu) => { + //console.log(menu.nativeElement); + menu.nativeElement.textContent = "Obriši kolonu"; + }); + } } changeInputColumns(targetMatCheckbox: MatCheckboxChange, columnName: string) { @@ -49,6 +80,8 @@ export class ColumnTableComponent implements OnInit { 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 + //this.experiment.encodings = this.experiment.encodings.filter(x => x.columnName != columnName); samo na kraju iz enkodinga skloni necekirane + this.experiment.nullValuesReplacers = this.experiment.nullValuesReplacers.filter(x => x.column != columnName); } } } @@ -84,6 +117,7 @@ export class ColumnTableComponent implements OnInit { option: NullValueOptions.DeleteColumns, value: "" }); + (document.getElementById("main_" + this.experiment.inputColumns[i])).textContent = "Obriši kolonu"; } } else if (selectedMissingValuesOption == NullValueOptions.DeleteRows) { @@ -95,9 +129,9 @@ export class ColumnTableComponent implements OnInit { option: NullValueOptions.DeleteRows, value: "" }); + (document.getElementById("main_" + this.experiment.inputColumns[i])).textContent = "Obriši redove"; } } - } } openMissingValuesDialog() { @@ -157,4 +191,4 @@ export class ColumnTableComponent implements OnInit { return '0'; } -} +} diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css index f2e84e8b..fe03bf95 100644 --- a/frontend/src/styles/theme.css +++ b/frontend/src/styles/theme.css @@ -1,5 +1,7 @@ :root { --ns-primary: #0063AB; + --ns-primary-25: rgba(0, 99, 171, 0.25); + --ns-primary-50: rgba(0, 99, 171, 0.5); --ns-accent: #00a8e8; --ns-bg: #003459; --ns-bg-light-30: rgba(0, 152, 189, 0.3); -- cgit v1.2.3 From a8a04c45c8941afde34ec0765a0e5f4051fe1f02 Mon Sep 17 00:00:00 2001 From: Sonja Galovic Date: Tue, 26 Apr 2022 22:47:39 +0200 Subject: Dodat poziv back-u za deo fajla sa podacima (planirano stranicenje). Prikaz podataka iz dataseta u okviru glavne tabele. Uredjeni grafici za statistiku. --- .../_charts/box-plot/box-plot.component.ts | 62 ++++++++++++++-------- .../_charts/pie-chart/pie-chart.component.ts | 15 ++++-- .../column-table/column-table.component.html | 31 ++++++----- .../column-table/column-table.component.ts | 12 ++++- frontend/src/app/_services/datasets.service.ts | 3 ++ 5 files changed, 79 insertions(+), 44 deletions(-) (limited to 'frontend/src/app/_elements/column-table/column-table.component.ts') diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts index 078e7176..45e83e83 100644 --- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts +++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts @@ -16,33 +16,32 @@ Chart.register(BoxPlotController, BoxAndWiskers, LinearScale, CategoryScale); }) export class BoxPlotComponent implements AfterViewInit { - @Input()width: number = 800; - @Input()height: number = 450; + @Input()width: number = 600; + @Input()height: number = 800; @ViewChild('boxplot') chartRef!: ElementRef; constructor() { } boxplotData = { // define label tree - labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], - datasets: [{ - label: 'Dataset 1', - backgroundColor: 'rgba(255,0,0,0.5)', - borderColor: 'red', - borderWidth: 1, - outlierColor: '#999999', - padding: 10, - itemRadius: 0, - data: [ - randomValues(100, 0, 100), - randomValues(100, 0, 20), - randomValues(100, 20, 70), - randomValues(100, 60, 100), - randomValues(40, 50, 100), - randomValues(100, 60, 120), - randomValues(100, 80, 100) - ] - }, { + labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/], + datasets: [{ + label: 'Dataset 1', + backgroundColor: 'rgba(255,0,0,0.5)', + borderColor: 'red', + borderWidth: 1, + outlierColor: '#999999', + padding: 10, + itemRadius: 0, + data: [ + randomValues(100, 0, 100), + /*randomValues(100, 0, 20), + randomValues(100, 20, 70), + randomValues(100, 60, 100), + randomValues(40, 50, 100), + randomValues(100, 60, 120), + randomValues(100, 80, 100)*/ + ]}/*, { label: 'Dataset 2', backgroundColor: 'rgba(0,0,255,0.5)', borderColor: 'blue', @@ -59,12 +58,29 @@ export class BoxPlotComponent implements AfterViewInit { randomValues(100, 20, 100), randomValues(100, 80, 100) ] - }] + }*/] }; ngAfterViewInit(): void { const myChart = new Chart(this.chartRef.nativeElement, { type: "boxplot", - data: this.boxplotData + data: this.boxplotData, + options: { + /*title: { + display: true, + text: 'Predicted world population (millions) in 2050' + }*/ + plugins:{ + legend: { + display: false + }, + }, + scales : { + y : { + min: -50, + max: 200 + } + } + } }); } diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts index 3f2dbfaf..248c9aa8 100644 --- a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts +++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts @@ -8,7 +8,7 @@ import {Chart} from 'chart.js'; }) export class PieChartComponent implements AfterViewInit { - @Input()width: number = 800; + @Input()width: number = 600; @Input()height: number = 450; @ViewChild('piechart') chartRef!: ElementRef; @@ -25,12 +25,17 @@ export class PieChartComponent implements AfterViewInit { data: [2478,5267,734,784,433] }] }, - /*options: { - title: { + options: { + /*title: { display: true, text: 'Predicted world population (millions) in 2050' - } - }*/ + }*/ + plugins:{ + legend: { + display: false + }, + } + } }); } diff --git a/frontend/src/app/_elements/column-table/column-table.component.html b/frontend/src/app/_elements/column-table/column-table.component.html index 1a5a5e81..8551f710 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -23,9 +23,8 @@ Grafik - + + @@ -48,8 +47,8 @@ - - Enkoding  + + Enkoding settings @@ -99,24 +98,28 @@ - - Vrednosti + + Vrednosti + - - ok + +
+ {{col}} +
-
+
{{testSetDistribution}}% : {{100-testSetDistribution}}%
-
TreningTest
- +
Trening + Test
+
- +
Tip problema @@ -128,7 +131,7 @@
- + Izlazna kolona {{item.columnName}} diff --git a/frontend/src/app/_elements/column-table/column-table.component.ts b/frontend/src/app/_elements/column-table/column-table.component.ts index f3aedd1b..9cb038bc 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -8,6 +8,7 @@ import { MissingvaluesDialogComponent } from 'src/app/_modals/missingvalues-dial import { MatSliderChange } from '@angular/material/slider'; import { MatCheckboxChange } from '@angular/material/checkbox'; import { MatMenuItem, MatMenuTrigger } from '@angular/material/menu'; +import { CsvParseService } from 'src/app/_services/csv-parse.service'; @Component({ selector: 'app-column-table', @@ -24,9 +25,10 @@ export class ColumnTableComponent implements AfterViewInit { Encoding = Encoding; NullValueOptions = NullValueOptions; tableData?: any[][]; + nesto = 10; testSetDistribution:number=70; - constructor(private datasetService: DatasetsService, public dialog: MatDialog) { + constructor(private datasetService: DatasetsService, public csvParseService: CsvParseService, public dialog: MatDialog) { //ovo mi nece trebati jer primam dataset iz druge komponente } @@ -41,11 +43,17 @@ export class ColumnTableComponent implements AfterViewInit { this.resetColumnEncodings(Encoding.Label); this.setDeleteColumnsForMissingValTreatment(); - /*this.tableData = this.datasetService.getDatasetFile(this.dataset._id).subscribe((file: string | undefined) => { + /*this.datasetService.getDatasetFile(this.dataset._id).subscribe((file: string | undefined) => { if (file) { //this.tableData = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter); } });*/ + this.datasetService.getDatasetFilePartial(this.dataset.fileId, 0, 10).subscribe((response: string | undefined) => { + if (response && this.dataset != undefined) { + this.tableData = this.csvParseService.csvToArray(response, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "") ? "," : this.dataset.delimiter); + console.log(this.tableData); + } + }); }); } diff --git a/frontend/src/app/_services/datasets.service.ts b/frontend/src/app/_services/datasets.service.ts index ff96c39b..3b6e6b64 100644 --- a/frontend/src/app/_services/datasets.service.ts +++ b/frontend/src/app/_services/datasets.service.ts @@ -27,6 +27,9 @@ export class DatasetsService { getDatasetFile(fileId: any): any { return this.http.get(`${Configuration.settings.apiURL}/file/csvRead/true/${fileId}`, { headers: this.authService.authHeader(), responseType: 'text' }); } + getDatasetFilePartial(fileId: any, startRow: number, rowNum: number): Observable { + return this.http.get(`${Configuration.settings.apiURL}/file/csvRead/true/${fileId}/${startRow}/${rowNum}`, { headers: this.authService.authHeader(), responseType: 'text' }); + } editDataset(dataset: Dataset): Observable { return this.http.put(`${Configuration.settings.apiURL}/dataset/` + dataset._id, dataset, { headers: this.authService.authHeader() }); -- cgit v1.2.3 From 98d3f4dedaabf62213b95dd8e7b67f9e8ab99006 Mon Sep 17 00:00:00 2001 From: Sonja Galovic Date: Wed, 27 Apr 2022 19:52:48 +0200 Subject: Sredjen dizajn tabele. Sredjena difoltna vrednost za missingvalue. Grafici uredjeni. --- .../_charts/box-plot/box-plot.component.html | 4 +- .../_charts/box-plot/box-plot.component.ts | 25 +++++++-- .../_charts/pie-chart/pie-chart.component.html | 4 +- .../_charts/pie-chart/pie-chart.component.ts | 10 ++-- .../column-table/column-table.component.css | 60 ++++++++++++++++++++++ .../column-table/column-table.component.html | 57 +++++++++++--------- .../column-table/column-table.component.ts | 38 +++++--------- frontend/src/styles/helper.css | 6 +++ frontend/src/styles/theme.css | 3 +- 9 files changed, 143 insertions(+), 64 deletions(-) (limited to 'frontend/src/app/_elements/column-table/column-table.component.ts') diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html index 34c283c7..688eafae 100644 --- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html +++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html @@ -1 +1,3 @@ - \ No newline at end of file +
+ +
\ No newline at end of file diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts index 45e83e83..3faa4794 100644 --- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts +++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts @@ -16,8 +16,8 @@ Chart.register(BoxPlotController, BoxAndWiskers, LinearScale, CategoryScale); }) export class BoxPlotComponent implements AfterViewInit { - @Input()width: number = 600; - @Input()height: number = 800; + @Input()width?: number; + @Input()height?: number; @ViewChild('boxplot') chartRef!: ElementRef; constructor() { } @@ -27,10 +27,11 @@ export class BoxPlotComponent implements AfterViewInit { labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/], datasets: [{ label: 'Dataset 1', - backgroundColor: 'rgba(255,0,0,0.5)', - borderColor: 'red', + backgroundColor: 'rgba(0, 65, 101, 1.0)', + borderColor: '#0063AB', borderWidth: 1, outlierColor: '#999999', + scaleFontColor: '#0063AB', padding: 10, itemRadius: 0, data: [ @@ -75,9 +76,23 @@ export class BoxPlotComponent implements AfterViewInit { }, }, scales : { + x: { + ticks: { + color: 'rgba(0, 65, 101, 1.0)' + }, + grid: { + color: "rgba(0, 99, 171, 0.5)" + } + }, y : { min: -50, - max: 200 + max: 200, + ticks: { + color: 'rgba(0, 65, 101, 1.0)' + }, + grid: { + color: "rgba(0, 99, 171, 0.5)" + } } } } diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html index aa3f26ab..7faf3af0 100644 --- a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html +++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html @@ -1 +1,3 @@ - +
+ +
\ No newline at end of file diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts index 248c9aa8..f141f522 100644 --- a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts +++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts @@ -8,8 +8,8 @@ import {Chart} from 'chart.js'; }) export class PieChartComponent implements AfterViewInit { - @Input()width: number = 600; - @Input()height: number = 450; + @Input()width?: number; + @Input()height?: number; @ViewChild('piechart') chartRef!: ElementRef; constructor() { } @@ -22,7 +22,7 @@ export class PieChartComponent implements AfterViewInit { datasets: [{ label: "Population (millions)", backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"], - data: [2478,5267,734,784,433] + data: [2478,5267,734,784,433], }] }, options: { @@ -34,7 +34,9 @@ export class PieChartComponent implements AfterViewInit { legend: { display: false }, - } + }, + layout: { + padding: 15} } }); diff --git a/frontend/src/app/_elements/column-table/column-table.component.css b/frontend/src/app/_elements/column-table/column-table.component.css index 0db50cdb..1e7d4745 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.css +++ b/frontend/src/app/_elements/column-table/column-table.component.css @@ -3,18 +3,25 @@ table.fixed { display: block; overflow-x: auto; white-space: nowrap; + border: 1px solid var(--ns-primary-50); + font-size: 12px; + border-radius: 4px; } table.fixed td { overflow: hidden; max-width: 200px; vertical-align: middle; + background-color: var(--ns-bg-dark-100); + margin: 4px; } table.fixed th { overflow: hidden; max-width: 350px; vertical-align: middle; + background-color: var(--ns-bg-dark-100); + font-size: 14px; } table.fixed th:first-child { @@ -28,6 +35,11 @@ table.fixed th:first-child { .brighter { background-color: var(--ns-primary) !important; + border-color: var(--offwhite); +} + +.border-bottom { + border-bottom-color: var(--offwhite) !important; } mat-slider { @@ -40,4 +52,52 @@ mat-slider { .slider { background-color: var(--ns-bg-dark-100); +} + +#missingValuesHeader { + font-size: 12px; + line-height: 110% !important; +} + +.verticalAlign { + vertical-align: center; +} + +.cell-align { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + height: 100%; +} + +table ::ng-deep .mat-form-field-wrapper { + margin-top: -2rem; +} + +.graphics-row { + height: 100px; + padding: 1px; + margin: 0; +} + +.no-pad { + padding: 1px; + margin: 0; +} + +.text-overflow { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; +} + +.row-height { + height: 30px; + border: none; + outline: none; +} + +.graphic-class { + background-color: white !important; } \ No newline at end of file diff --git a/frontend/src/app/_elements/column-table/column-table.component.html b/frontend/src/app/_elements/column-table/column-table.component.html index 55c07b87..92a4699a 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -3,8 +3,10 @@ Naziv - #{{i + 1}}  {{colInfo.columnName}} - +
+ #{{i + 1}}  {{colInfo.columnName}} + +
@@ -20,11 +22,11 @@ - - Grafik - - - + + Grafik + + + @@ -40,16 +42,17 @@ Q3: {{colInfo.q3}}
--> - +
{{uniqueValue}}
 - +
- Enkoding - settings + + Enkodiranje  + settings @@ -62,25 +65,29 @@ - Regulisanje
nedostajućih
vrednosti
+ +
Regulisanje
nedostajućih
vrednosti
settings - - - + + - - - - + + + + @@ -88,22 +95,22 @@ - + - + - + Vrednosti - -
+ +
{{col}}
diff --git a/frontend/src/app/_elements/column-table/column-table.component.ts b/frontend/src/app/_elements/column-table/column-table.component.ts index 9cb038bc..85046b8c 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -7,7 +7,6 @@ import { MatDialog } from '@angular/material/dialog'; import { MissingvaluesDialogComponent } from 'src/app/_modals/missingvalues-dialog/missingvalues-dialog.component'; import { MatSliderChange } from '@angular/material/slider'; import { MatCheckboxChange } from '@angular/material/checkbox'; -import { MatMenuItem, MatMenuTrigger } from '@angular/material/menu'; import { CsvParseService } from 'src/app/_services/csv-parse.service'; @Component({ @@ -25,7 +24,7 @@ export class ColumnTableComponent implements AfterViewInit { Encoding = Encoding; NullValueOptions = NullValueOptions; tableData?: any[][]; - nesto = 10; + nullValOption: string[] = []; testSetDistribution:number=70; constructor(private datasetService: DatasetsService, public csvParseService: CsvParseService, public dialog: MatDialog) { @@ -35,7 +34,6 @@ export class ColumnTableComponent implements AfterViewInit { ngAfterViewInit(): void { this.datasetService.getMyDatasets().subscribe((datasets) => { this.dataset = datasets[0]; - //console.log(this.dataset); this.experiment = new Experiment(); for (let i = 0; i < this.dataset?.columnInfo.length; i++) { this.experiment?.inputColumns.push(this.dataset.columnInfo[i].columnName); @@ -43,39 +41,27 @@ export class ColumnTableComponent implements AfterViewInit { this.resetColumnEncodings(Encoding.Label); this.setDeleteColumnsForMissingValTreatment(); - /*this.datasetService.getDatasetFile(this.dataset._id).subscribe((file: string | undefined) => { - if (file) { - //this.tableData = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter); - } - });*/ + this.nullValOption = [].constructor(this.dataset.columnInfo.length).fill('Obriši redove'); + this.datasetService.getDatasetFilePartial(this.dataset.fileId, 0, 10).subscribe((response: string | undefined) => { if (response && this.dataset != undefined) { this.tableData = this.csvParseService.csvToArray(response, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "") ? "," : this.dataset.delimiter); - console.log(this.tableData); } }); }); } setDeleteColumnsForMissingValTreatment() { - console.log("USAOOOO"); if (this.experiment != undefined) { - this.experiment.nullValues = NullValueOptions.DeleteColumns; + this.experiment.nullValues = NullValueOptions.DeleteRows; this.experiment.nullValuesReplacers = []; - console.log("duzina",this.experiment.inputColumns.length); for (let i = 0; i < this.experiment.inputColumns.length; i++) { this.experiment.nullValuesReplacers.push({ column: this.experiment.inputColumns[i], - option: NullValueOptions.DeleteColumns, + option: NullValueOptions.DeleteRows, value: "" }); - console.log(i); } - //console.log("len",this.nullValMenus.length); - this.nullValMenus.forEach((menu) => { - //console.log(menu.nativeElement); - menu.nativeElement.textContent = "Obriši kolonu"; - }); } } @@ -127,7 +113,7 @@ export class ColumnTableComponent implements AfterViewInit { option: NullValueOptions.DeleteColumns, value: "" }); - (document.getElementById("main_" + this.experiment.inputColumns[i])).textContent = "Obriši kolonu"; + this.nullValOption[i] = "Obriši kolonu"; } } else if (selectedMissingValuesOption == NullValueOptions.DeleteRows) { @@ -139,7 +125,7 @@ export class ColumnTableComponent implements AfterViewInit { option: NullValueOptions.DeleteRows, value: "" }); - (document.getElementById("main_" + this.experiment.inputColumns[i])).textContent = "Obriši redove"; + this.nullValOption[i] = "Obriši redove"; } } } @@ -158,7 +144,7 @@ export class ColumnTableComponent implements AfterViewInit { } - MissValsDeleteClicked(event: Event, replacementType: NullValueOptions) { + MissValsDeleteClicked(event: Event, replacementType: NullValueOptions, index: number) { if (this.experiment != undefined) { let columnName = (event.currentTarget).value; let arrayElement = this.experiment.nullValuesReplacers.filter(x => x.column == columnName)[0]; @@ -174,12 +160,12 @@ export class ColumnTableComponent implements AfterViewInit { arrayElement.option = (replacementType == NullValueOptions.DeleteColumns) ? NullValueOptions.DeleteColumns : NullValueOptions.DeleteRows; arrayElement.value = ""; } - - (document.getElementById("main_" + columnName)).textContent = (replacementType == NullValueOptions.DeleteColumns) ? "Obriši kolonu" : "Obriši redove"; + + this.nullValOption[index] = (replacementType == NullValueOptions.DeleteColumns) ? "Obriši kolonu" : "Obriši redove"; } } - MissValsReplaceClicked(event: Event, columnName: string) { + MissValsReplaceClicked(event: Event, columnName: string, index: number) { if (this.experiment != undefined) { let fillValue = (event.currentTarget).value; let arrayElement = this.experiment.nullValuesReplacers.filter(x => x.column == columnName)[0]; @@ -196,7 +182,7 @@ export class ColumnTableComponent implements AfterViewInit { arrayElement.value = fillValue; } - (document.getElementById("main_" + columnName)).textContent = "Popuni sa: " + fillValue; + this.nullValOption[index] = "Popuni sa: " + fillValue; } } getValue(columnName: string): string { diff --git a/frontend/src/styles/helper.css b/frontend/src/styles/helper.css index fa362803..ef875069 100644 --- a/frontend/src/styles/helper.css +++ b/frontend/src/styles/helper.css @@ -122,4 +122,10 @@ .bg-blur { backdrop-filter: blur(2px); +} + +.chart-wrapper { + width: 150px; + height: 150px; + margin: auto; } \ No newline at end of file diff --git a/frontend/src/styles/theme.css b/frontend/src/styles/theme.css index f9ea219f..17a433c6 100644 --- a/frontend/src/styles/theme.css +++ b/frontend/src/styles/theme.css @@ -8,8 +8,7 @@ --ns-bg-dark-100: rgba(0, 65, 101, 1.0); --ns-bg-dark-50: rgba(0, 65, 101, 0.5); --offwhite: #dfd7d7; - --ns-warn:#f9b7b7; - + --ns-warn: #f9b7b7; } body { -- cgit v1.2.3 From d28576bff04b0f5ea9a58037ffee7c4157aa2c61 Mon Sep 17 00:00:00 2001 From: Ognjen Cirkovic Date: Wed, 27 Apr 2022 20:55:31 +0200 Subject: Datat checkbox za izbor nasumicnih podataka i podvrdi dugme. Promenjen dizajn. --- .../column-table/column-table.component.css | 25 ++++++-- .../column-table/column-table.component.html | 70 ++++++++++++++-------- .../column-table/column-table.component.ts | 8 ++- .../_pages/experiment/experiment.component.html | 2 +- 4 files changed, 74 insertions(+), 31 deletions(-) (limited to 'frontend/src/app/_elements/column-table/column-table.component.ts') diff --git a/frontend/src/app/_elements/column-table/column-table.component.css b/frontend/src/app/_elements/column-table/column-table.component.css index 0db50cdb..09aa2dff 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.css +++ b/frontend/src/app/_elements/column-table/column-table.component.css @@ -31,13 +31,30 @@ table.fixed th:first-child { } mat-slider { - width: 300px; + width: 150px; + } .belowColumn { - background-color: var(--ns-bg-dark-50); + background-color: transparent; } .slider { - background-color: var(--ns-bg-dark-100); -} \ No newline at end of file + background-color: var(--ns-bg-dark-50); +} + +.bottom-button { + font-size: large; + position: relative; + background-color: var(--ns-primary); + width: 10rem; + height: 2.3rem; + border-color: var(--ns-primary); + border-style: solid; + border-width: 0px 1px 1px 1px; +} +#footer { + display: flex; + flex-direction: row; + justify-content: center; +} diff --git a/frontend/src/app/_elements/column-table/column-table.component.html b/frontend/src/app/_elements/column-table/column-table.component.html index 55c07b87..67846116 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -111,34 +111,56 @@ -
+
-
-
{{testSetDistribution}}% : {{100-testSetDistribution}}%
-
Trening - Test
- +
+ +
{{testSetDistribution}}% : {{100-testSetDistribution}}%
+
Trening + + Test
+ +
+
+
+ Nasumicni redosled podataka +
-
- - Tip problema - - Regresioni - Binarni-Klasifikacioni - Multi-Klasifikacioni - - +
+ + + Tip problema + + Regresioni + Binarni-Klasifikacioni + Multi-Klasifikacioni + + + +
+
+ + + Izlazna kolona + + {{item.columnName}} + + +
-
- - Izlazna kolona - - {{item.columnName}} - - +
+
-
+
+ -
\ 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 9cb038bc..e938abe4 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,4 @@ -import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChildren } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChildren } 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'; @@ -20,7 +20,7 @@ export class ColumnTableComponent implements AfterViewInit { @Input() dataset?: Dataset; @Input() experiment?: Experiment; @ViewChildren("nullValMenu") nullValMenus!: ElementRef[]; - + @Output() okPressed: EventEmitter = new EventEmitter(); Object = Object; Encoding = Encoding; NullValueOptions = NullValueOptions; @@ -204,5 +204,9 @@ export class ColumnTableComponent implements AfterViewInit { return (document.getElementById(columnName)).value; return '0'; } + ok() { + this.okPressed.emit(); + } + } diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index 1606adf5..5206c5f2 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -28,7 +28,7 @@
- +
-- cgit v1.2.3 From ad3d99a96d240dbc6c3d3a725fb1ba177a4cb427 Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Wed, 27 Apr 2022 22:14:13 +0200 Subject: Dodao tabove za razlicite tabele u column-table komponenti. --- .../column-table/column-table.component.css | 87 +++++- .../column-table/column-table.component.html | 307 +++++++++++++-------- .../column-table/column-table.component.ts | 82 ++++-- .../_elements/form-model/form-model.component.html | 2 - 4 files changed, 337 insertions(+), 141 deletions(-) (limited to 'frontend/src/app/_elements/column-table/column-table.component.ts') 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 f40a3aff..4dfb32ee 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.css +++ b/frontend/src/app/_elements/column-table/column-table.component.css @@ -44,7 +44,6 @@ table.fixed th:first-child { mat-slider { width: 150px; - } .belowColumn { @@ -65,13 +64,13 @@ mat-slider { border-style: solid; border-width: 0px 1px 1px 1px; } + #footer { display: flex; flex-direction: row; justify-content: center; } - #missingValuesHeader { font-size: 12px; line-height: 110% !important; @@ -119,3 +118,87 @@ table ::ng-deep .mat-form-field-wrapper { .graphic-class { background-color: white !important; } + + +/* TABS STYLE */ + +#folder-table { + border: 1px solid var(--ns-primary); + border-radius: 4px; +} + +#tabs { + display: flex; + flex-direction: row; + align-items: flex-end; + height: 3.2rem; +} + +#tabs>.folder-tab:not(:first-child) { + margin-left: -5px; +} + +.folder-tab-end { + margin-left: auto; + color: var(--offwhite) !important; + overflow: hidden; +} + +.folder-tab, +.folder-tab-end { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + position: relative; + overflow-x: hidden; + height: 2.5rem; + background-color: var(--ns-bg-dark-100); + border-color: var(--ns-primary); + color: var(--ns-primary); + border-style: solid; + border-width: 1px 1px 0 1px; +} + +.folder-tab:not(:first-child) { + margin-block-start: auto; +} + +.folder-tab { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.selected-tab { + height: 3rem; + background-color: var(--ns-primary); + color: var(--offwhite); +} + +.hover-tab { + height: 3.2rem; +} + +.selected-tab, +.hover-tab { + width: fit-content !important; +} + +.tab-link { + color: var(--offwhite) !important; + text-decoration: none !important; + cursor: pointer; +} + +.tab-link:active { + text-decoration: underline !important; +} + +.selected-tab { + background-color: var(--ns-primary); +} + +.hidden { + display: none; +} \ 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 56b95c29..5f4412a1 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -1,38 +1,102 @@ - - - - - - - - - - - - - - - - - - - - - -
Naziv -
- #{{i + 1}}  {{colInfo.columnName}} - -
-
Tip - - - Kategorijski - Numerički - - -
Grafik - - -
Statistika - +
+
+ + {{tab.name}} + +
+ +
+
+ +
+ +
+ + + + + + + + + + + + + +
# + #{{i + 1}}  {{colInfo.columnName}} + +
#{{i}} +
+ {{col}} +
+
+
+ +
+ + + + + + + + + + + + + +
Naziv + #{{i + 1}}  {{colInfo.columnName}} +
#{{i + 1}}  {{colInfo.columnName}} +
+ 0.1 +
+
+
+ +
+ + + + + + + + + + + + + + + + + + + - - - - - - - - + + + + + + + + - - - + + + + +
Naziv +
+ #{{i + 1}}  {{colInfo.columnName}} + +
+
Tip + + + Kategorijski + Numerički + + +
Grafik + + +
Statistika + Mean: {{colInfo.mean}}
Median: {{colInfo.median}}
Min: {{colInfo.min}}
@@ -42,119 +106,122 @@ Q3: {{colInfo.q3}}
--> -
- +
+ {{uniqueValue}}
 -
-
- Enkodiranje  - settings - - - - - {{ optionName }} - - - -
-
Regulisanje
nedostajućih
vrednosti
- settings - 		- -
+ Enkodiranje  + settings + + + + + {{ optionName }} + + + +
+
Regulisanje
nedostajućih
vrednosti
+ settings + 		+ + - - - - - + + + + + - - - - - + + + + + - + - - + + - - - + + + - - - - + + + + -
Vrednosti
+
+
+
- -
{{testSetDistribution}}% : {{100-testSetDistribution}}%
-
Trening + +
{{testSetDistribution}}% : {{100-testSetDistribution}}%
+
Trening Test
- +
- Nasumicni redosled podataka + Nasumicni redosled podataka
- - - Tip problema - - Regresioni - Binarni-Klasifikacioni - Multi-Klasifikacioni - - - + + + Tip problema + + Regresioni + Binarni-Klasifikacioni + Multi-Klasifikacioni + + +
- - - Izlazna kolona - - {{item.columnName}} - - - + + + Izlazna kolona + + {{item.columnName}} + + +
-
- - +
\ 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 c48bf869..137c383c 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -26,8 +26,8 @@ export class ColumnTableComponent implements AfterViewInit { tableData?: any[][]; nullValOption: string[] = []; - testSetDistribution:number=70; - constructor(private datasetService: DatasetsService, public csvParseService: CsvParseService, public dialog: MatDialog) { + testSetDistribution: number = 70; + constructor(private datasetService: DatasetsService, public csvParseService: CsvParseService, public dialog: MatDialog) { //ovo mi nece trebati jer primam dataset iz druge komponente } @@ -92,13 +92,13 @@ export class ColumnTableComponent implements AfterViewInit { } } openEncodingDialog() { - const dialogRef = this.dialog.open(EncodingDialogComponent, { - width: '300px' - }); - dialogRef.afterClosed().subscribe(selectedEncoding => { - if (selectedEncoding != undefined) - this.resetColumnEncodings(selectedEncoding); - }); + const dialogRef = this.dialog.open(EncodingDialogComponent, { + width: '300px' + }); + dialogRef.afterClosed().subscribe(selectedEncoding => { + if (selectedEncoding != undefined) + this.resetColumnEncodings(selectedEncoding); + }); } resetMissingValuesTreatment(selectedMissingValuesOption: NullValueOptions) { @@ -115,7 +115,7 @@ export class ColumnTableComponent implements AfterViewInit { }); this.nullValOption[i] = "Obriši kolonu"; } - } + } else if (selectedMissingValuesOption == NullValueOptions.DeleteRows) { this.experiment.nullValues = NullValueOptions.DeleteRows; this.experiment.nullValuesReplacers = []; @@ -135,12 +135,12 @@ export class ColumnTableComponent implements AfterViewInit { width: '400px' }); dialogRef.afterClosed().subscribe(selectedMissingValuesOption => { - if (selectedMissingValuesOption != undefined) + if (selectedMissingValuesOption != undefined) this.resetMissingValuesTreatment(selectedMissingValuesOption); }); } - updateTestSet(event:MatSliderChange){ - this.testSetDistribution=event.value!; + updateTestSet(event: MatSliderChange) { + this.testSetDistribution = event.value!; } @@ -160,7 +160,7 @@ export class ColumnTableComponent implements AfterViewInit { arrayElement.option = (replacementType == NullValueOptions.DeleteColumns) ? NullValueOptions.DeleteColumns : NullValueOptions.DeleteRows; arrayElement.value = ""; } - + this.nullValOption[index] = (replacementType == NullValueOptions.DeleteColumns) ? "Obriši kolonu" : "Obriši redove"; } } @@ -169,7 +169,7 @@ export class ColumnTableComponent implements AfterViewInit { if (this.experiment != undefined) { let fillValue = (event.currentTarget).value; let arrayElement = this.experiment.nullValuesReplacers.filter(x => x.column == columnName)[0]; - + if (arrayElement == undefined) { this.experiment.nullValuesReplacers.push({ column: columnName, @@ -195,4 +195,54 @@ export class ColumnTableComponent implements AfterViewInit { } -} + tabs = [ + new Tab(0, 'Podešavanja kolona', Table.Columns), + new Tab(1, 'Podaci', Table.Data), + new Tab(2, 'Korelaciona matrica', Table.CorrelationMatrix) + ] + + selectedTab: Tab = this.tabs[0]; + hoveringOverTab: (Tab | null) = null; + + tabToDisplay: Table = Table.Columns; + + selectTab(index: number) { + this.selectedTab = this.tabs[index]; + this.tabToDisplay = this.tabs[index].value; + } + + hoverOverTab(index: number) { + if (index < 0) { + this.hoveringOverTab = null; + this.tabToDisplay = this.selectedTab.value; + } else { + this.hoveringOverTab = this.tabs[index]; + this.tabToDisplay = this.tabs[index].value; + } + } + + calcZIndex(i: number) { + let zIndex = (this.tabs.length - i - 1) + if (this.selectedTab.index == i) + zIndex = this.tabs.length + 1; + if (this.hoveringOverTab?.index == i) + zIndex = this.tabs.length + 2; + return zIndex; + } + + Table = Table; +} + +export enum Table { + Columns, + Data, + CorrelationMatrix +} + +export class Tab { + constructor( + public index: number, + public name: string, + public value: Table + ) { } +} diff --git a/frontend/src/app/_elements/form-model/form-model.component.html b/frontend/src/app/_elements/form-model/form-model.component.html index 396d40c6..4c5505f0 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -15,7 +15,6 @@ {{ optionName }} - @@ -104,7 +103,6 @@ -
-- cgit v1.2.3 From 1b9e3a2470d1123b362ad47725bd76b2eb7b39eb Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Thu, 28 Apr 2022 22:09:08 +0200 Subject: Dodatne stranice i komponente tako da su vise u skladu sa novom temom (navbar, home, archive). --- docs/logo/logo.png | Bin 13315 -> 11962 bytes .../column-table/column-table.component.ts | 2 +- .../src/app/_elements/folder/folder.component.css | 4 --- .../form-dataset/form-dataset.component.css | 34 ++++++++++--------- .../_elements/form-model/form-model.component.css | 18 +++++++---- .../_elements/form-model/form-model.component.html | 34 +++++++++---------- .../src/app/_elements/navbar/navbar.component.css | 8 +++++ .../src/app/_elements/navbar/navbar.component.html | 10 +++--- .../src/app/_elements/navbar/navbar.component.ts | 5 +-- .../app/_elements/playlist/playlist.component.ts | 2 +- .../src/app/_pages/archive/archive.component.html | 20 ++++++++---- frontend/src/app/_pages/home/home.component.css | 20 ++++++++++++ frontend/src/app/_pages/home/home.component.html | 36 ++++++++++++++------- frontend/src/assets/images/logo.png | Bin 13315 -> 11962 bytes frontend/src/styles/helper.css | 12 ++++++- frontend/src/styles/layout.css | 23 +++++++++++-- frontend/src/styles/theme.css | 4 +++ 17 files changed, 156 insertions(+), 76 deletions(-) (limited to 'frontend/src/app/_elements/column-table/column-table.component.ts') diff --git a/docs/logo/logo.png b/docs/logo/logo.png index 2e15550a..dc8830de 100644 Binary files a/docs/logo/logo.png and b/docs/logo/logo.png differ 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 137c383c..0745f73d 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -45,7 +45,7 @@ export class ColumnTableComponent implements AfterViewInit { this.datasetService.getDatasetFilePartial(this.dataset.fileId, 0, 10).subscribe((response: string | undefined) => { if (response && this.dataset != undefined) { - this.tableData = this.csvParseService.csvToArray(response, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter == "") ? "," : this.dataset.delimiter); + this.tableData = this.csvParseService.csvToArray(response, (this.dataset.delimiter == "razmak") ? " " : (this.dataset.delimiter.toString() == "") ? "," : this.dataset.delimiter); } }); }); diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css index 1ce4e6a3..458e6b4f 100644 --- a/frontend/src/app/_elements/folder/folder.component.css +++ b/frontend/src/app/_elements/folder/folder.component.css @@ -64,10 +64,6 @@ background-color: var(--ns-primary); } -#search ::ng-deep .mat-form-field-wrapper { - margin-top: -2.1rem; -} - #searchbar { height: 2.5rem; background-color: var(--ns-bg-dark-100); diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.css b/frontend/src/app/_elements/form-dataset/form-dataset.component.css index 56eb3cef..da31cfcb 100644 --- a/frontend/src/app/_elements/form-dataset/form-dataset.component.css +++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.css @@ -1,46 +1,48 @@ .folderBox { width: 100%; - height: 90%; + height: 100%; position: relative; } -.file-container{ +.file-container { border: 4px solid transparent; position: relative; margin-left: 3%; margin-top: 3rem; width: 94%; - min-height: 500px; + min-height: 300px; + height: 75%; } -.fileButton{ + +.fileButton { position: absolute; margin-top: -3rem; display: flex; flex-direction: row; align-items: center; } -.fileButton label{ + +.fileButton label { margin-left: 10px; } -.dottedClass -{ + +.dottedClass { border: 4px dotted white; border-radius: 25px; } -.hidden{ +.hidden { visibility: hidden; } .file { position: absolute; - width: 100%; - height: 100%; - opacity: 0; + width: 100%; + height: 100%; + opacity: 0; } -.file input{ - +.file input { border-radius: 4px; margin-top: -15px; width: 100%; @@ -55,9 +57,9 @@ } .bottomBar { - position: absolute; - bottom: -6%; - left: 5%; + width: 50%; + margin: 1rem; + align-items: flex-start; } #bottomButton { diff --git a/frontend/src/app/_elements/form-model/form-model.component.css b/frontend/src/app/_elements/form-model/form-model.component.css index 5776085f..8c279523 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.css +++ b/frontend/src/app/_elements/form-model/form-model.component.css @@ -21,7 +21,6 @@ mat-form-field { hr { color: var(--offwhite) !important; margin-bottom: 30px; - } .neuron { @@ -33,16 +32,14 @@ hr { background-color: var(--ns-bg-dark-100) !important; min-width: none; max-width: 12.5rem; - } - .row { margin: 0; padding: 0; } -::ng-deep .mat-form-field-wrapper { +.mat-fix ::ng-deep .mat-form-field-wrapper { margin-bottom: -1.85em; } @@ -70,12 +67,21 @@ hr { margin: 5px; padding: 0px; width: 12rem; - height: 13.5rem; + height: 11.1rem; +} + +.tm { + margin-left: 10px; +} + +.layer>* { + margin-top: 0; } .layer>mat-form-field { margin-left: 0; } -.m-2{ + +.m-2 { max-height: 20 rem; } \ No newline at end of file diff --git a/frontend/src/app/_elements/form-model/form-model.component.html b/frontend/src/app/_elements/form-model/form-model.component.html index 2139a1c0..f11b609d 100644 --- a/frontend/src/app/_elements/form-model/form-model.component.html +++ b/frontend/src/app/_elements/form-model/form-model.component.html @@ -2,13 +2,13 @@
- + Naziv
- + Tip problema @@ -21,7 +21,7 @@
- + Optimizacija @@ -32,21 +32,20 @@
- + Funkcija troška {{ optionName }} -
- + Funkcija aktivacije izlaznog sloja @@ -56,7 +55,7 @@
- + Stopa učenja @@ -69,13 +68,13 @@
- + Broj epoha
- + Broj uzoraka po iteraciji @@ -108,7 +107,7 @@
- + Aktivaciona funkcija svih slojeva @@ -120,14 +119,14 @@
- + Broj Neurona svih slojeva
- + Regularizacija svih slojeva @@ -138,7 +137,7 @@
- + Stopa regularizacije svih slojeva @@ -152,13 +151,12 @@
-
- + Aktivacija
- + Regularizacija @@ -192,7 +190,7 @@ - + Stopa regularizacije diff --git a/frontend/src/app/_elements/navbar/navbar.component.css b/frontend/src/app/_elements/navbar/navbar.component.css index e69de29b..fcfad876 100644 --- a/frontend/src/app/_elements/navbar/navbar.component.css +++ b/frontend/src/app/_elements/navbar/navbar.component.css @@ -0,0 +1,8 @@ +.dropdown-item:hover { + background-color: var(--ns-primary); +} + +h4 { + margin-top: 0.82rem; + margin-right: 10px; +} \ No newline at end of file diff --git a/frontend/src/app/_elements/navbar/navbar.component.html b/frontend/src/app/_elements/navbar/navbar.component.html index 9a54a9de..105151aa 100644 --- a/frontend/src/app/_elements/navbar/navbar.component.html +++ b/frontend/src/app/_elements/navbar/navbar.component.html @@ -2,11 +2,11 @@
- + +

Igrannonica
- -
diff --git a/frontend/src/app/_elements/navbar/navbar.component.ts b/frontend/src/app/_elements/navbar/navbar.component.ts index 368508ed..e2551f7a 100644 --- a/frontend/src/app/_elements/navbar/navbar.component.ts +++ b/frontend/src/app/_elements/navbar/navbar.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { Location } from '@angular/common'; import { AuthService } from '../../_services/auth.service'; import shared from 'src/app/Shared'; @@ -8,7 +8,8 @@ import { MatDialog } from '@angular/material/dialog'; @Component({ selector: 'app-navbar', templateUrl: './navbar.component.html', - styleUrls: ['./navbar.component.css'] + styleUrls: ['./navbar.component.css'], + encapsulation: ViewEncapsulation.Emulated }) export class NavbarComponent implements OnInit { diff --git a/frontend/src/app/_elements/playlist/playlist.component.ts b/frontend/src/app/_elements/playlist/playlist.component.ts index 74527b39..7529b36b 100644 --- a/frontend/src/app/_elements/playlist/playlist.component.ts +++ b/frontend/src/app/_elements/playlist/playlist.component.ts @@ -37,7 +37,7 @@ export class PlaylistComponent implements OnInit { tableData.loaded = true; tableData.numRows = dataset.rowCount; tableData.numCols = dataset.columnInfo.length; - tableData.data = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter); + tableData.data = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter.toString() == "") ? "," : dataset.delimiter); this.tableDatas!.push(tableData); } }); diff --git a/frontend/src/app/_pages/archive/archive.component.html b/frontend/src/app/_pages/archive/archive.component.html index 1d5d144f..8cc7f0fd 100644 --- a/frontend/src/app/_pages/archive/archive.component.html +++ b/frontend/src/app/_pages/archive/archive.component.html @@ -1,17 +1,23 @@
-
+
- -
- Pogledaj sve javne izvore podataka... -
+
+
+ model_training + +

Moji eksperimenti

+

+ Pregledajte vaše modele, menjajte ih, napravite nove modele, ili ih obrišite. +

+
+
storage -

Moji izvori podataka

+

Izvori podataka

Preuredite vaše izvore podataka, ili dodajte novi.

@@ -21,7 +27,7 @@
model_training -

Moji modeli

+

Modeli

Pregledajte vaše modele, menjajte ih, napravite nove modele, ili ih obrišite.

diff --git a/frontend/src/app/_pages/home/home.component.css b/frontend/src/app/_pages/home/home.component.css index e69de29b..22137c24 100644 --- a/frontend/src/app/_pages/home/home.component.css +++ b/frontend/src/app/_pages/home/home.component.css @@ -0,0 +1,20 @@ +.logo { + margin: 0 !important; +} + +#title { + color: var(--offwhite); +} + +h1 { + font-size: 64px !important; + font-weight: 900 !important; + margin-top: 1rem; + margin-bottom: 2.5rem; +} + +.card { + margin: 2.5rem !important; + padding: 3rem; + width: 26rem !important; +} \ No newline at end of file diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html index e682d8dd..508382da 100644 --- a/frontend/src/app/_pages/home/home.component.html +++ b/frontend/src/app/_pages/home/home.component.html @@ -1,20 +1,32 @@
-
Tip + Kategorijski @@ -120,11 +120,11 @@
+ Enkodiranje  settings + 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 0745f73d..9cabf190 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -35,6 +35,8 @@ export class ColumnTableComponent implements AfterViewInit { this.datasetService.getMyDatasets().subscribe((datasets) => { this.dataset = datasets[0]; this.experiment = new Experiment(); + + console.log(datasets); for (let i = 0; i < this.dataset?.columnInfo.length; i++) { this.experiment?.inputColumns.push(this.dataset.columnInfo[i].columnName); } diff --git a/frontend/src/app/_elements/folder/folder.component.css b/frontend/src/app/_elements/folder/folder.component.css index 458e6b4f..137a9643 100644 --- a/frontend/src/app/_elements/folder/folder.component.css +++ b/frontend/src/app/_elements/folder/folder.component.css @@ -21,7 +21,6 @@ justify-content: space-between; align-items: center; position: relative; - overflow-x: hidden; height: 2.5rem; background-color: var(--ns-bg-dark-100); border-color: var(--ns-primary); @@ -32,7 +31,6 @@ .folder-tab:not(:first-child) { margin-block-start: auto; - width: 4rem; } .selected-tab { @@ -54,6 +52,7 @@ color: var(--offwhite) !important; text-decoration: none !important; cursor: pointer; + padding: 0.5rem; } .tab-link:active { diff --git a/frontend/src/app/_elements/folder/folder.component.html b/frontend/src/app/_elements/folder/folder.component.html index 763a82a1..3497611e 100644 --- a/frontend/src/app/_elements/folder/folder.component.html +++ b/frontend/src/app/_elements/folder/folder.component.html @@ -1,21 +1,24 @@
-
+ -
+ +
+ {{tabTitles[tab]}}
-