From c02a7f0793a7b290029ec81859cdea5724a3f7dc Mon Sep 17 00:00:00 2001 From: Nevena Bojovic Date: Tue, 10 May 2022 23:14:00 +0200 Subject: Korekcija 2. --- backend/api/api/appsettings.json | 8 +- frontend/package-lock.json | 166 ++++++---------- .../_charts/box-plot/box-plot.component.ts | 25 ++- .../column-table/column-table.component.ts | 17 +- .../dataset-load/dataset-load.component.ts | 100 ---------- .../_elements/model-load/model-load.component.html | 215 --------------------- .../_elements/model-load/model-load.component.ts | 114 ----------- 7 files changed, 103 insertions(+), 542 deletions(-) delete mode 100644 frontend/src/app/_elements/dataset-load/dataset-load.component.ts delete mode 100644 frontend/src/app/_elements/model-load/model-load.component.html delete mode 100644 frontend/src/app/_elements/model-load/model-load.component.ts diff --git a/backend/api/api/appsettings.json b/backend/api/api/appsettings.json index 2eaf3e8f..513a81e3 100644 --- a/backend/api/api/appsettings.json +++ b/backend/api/api/appsettings.json @@ -16,15 +16,15 @@ "UserStoreDatabaseSettings": { /* LocalHost*/ - "ConnectionString": "mongodb://127.0.0.1:27017/", + /* "ConnectionString": "mongodb://127.0.0.1:27017/", "DatabaseName": "si_project", "CollectionName": "users", "DatasetCollectionName": "Dataset", "ModelCollectionName": "Model", "PredictorCollectionName": "Predictor", "FilesCollectionName": "Files", - "ExperimentCollectionName": "Experiment" - /* + "ExperimentCollectionName": "Experiment"*/ + "ConnectionString": "mongodb+srv://si_user:si_user@sidatabase.twtfm.mongodb.net/myFirstDatabase?retryWrites=true&w=majority", "DatabaseName": "si_db", "CollectionName": "users", @@ -32,6 +32,6 @@ "ModelCollectionName": "Model", "PredictorCollectionName": "Predictor", "FilesCollectionName": "Files", - "ExperimentCollectionName": "Experiment" */ + "ExperimentCollectionName": "Experiment" } } \ No newline at end of file diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 9da54c53..ebe30390 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -435,7 +435,6 @@ }, "node_modules/@angular/compiler-cli": { "version": "13.2.5", - "dev": true, "license": "MIT", "dependencies": { "@babel/core": "^7.17.2", @@ -464,7 +463,6 @@ }, "node_modules/@angular/compiler-cli/node_modules/@ampproject/remapping": { "version": "2.1.2", - "dev": true, "license": "Apache-2.0", "dependencies": { "@jridgewell/trace-mapping": "^0.3.0" @@ -475,7 +473,6 @@ }, "node_modules/@angular/compiler-cli/node_modules/@babel/core": { "version": "7.17.5", - "dev": true, "license": "MIT", "dependencies": { "@ampproject/remapping": "^2.1.0", @@ -504,7 +501,6 @@ }, "node_modules/@angular/compiler-cli/node_modules/@babel/core/node_modules/semver": { "version": "6.3.0", - "dev": true, "license": "ISC", "bin": { "semver": "bin/semver.js" @@ -512,7 +508,6 @@ }, "node_modules/@angular/compiler-cli/node_modules/@babel/generator": { "version": "7.17.3", - "dev": true, "license": "MIT", "dependencies": { "@babel/types": "^7.17.0", @@ -525,7 +520,6 @@ }, "node_modules/@angular/compiler-cli/node_modules/source-map": { "version": "0.5.7", - "dev": true, "license": "BSD-3-Clause", "engines": { "node": ">=0.10.0" @@ -748,7 +742,6 @@ }, "node_modules/@babel/core": { "version": "7.16.12", - "dev": true, "license": "MIT", "dependencies": { "@babel/code-frame": "^7.16.7", @@ -777,7 +770,6 @@ }, "node_modules/@babel/core/node_modules/semver": { "version": "6.3.0", - "dev": true, "license": "ISC", "bin": { "semver": "bin/semver.js" @@ -785,7 +777,6 @@ }, "node_modules/@babel/core/node_modules/source-map": { "version": "0.5.7", - "dev": true, "license": "BSD-3-Clause", "engines": { "node": ">=0.10.0" @@ -793,7 +784,6 @@ }, "node_modules/@babel/generator": { "version": "7.16.8", - "dev": true, "license": "MIT", "dependencies": { "@babel/types": "^7.16.8", @@ -806,7 +796,6 @@ }, "node_modules/@babel/generator/node_modules/source-map": { "version": "0.5.7", - "dev": true, "license": "BSD-3-Clause", "engines": { "node": ">=0.10.0" @@ -3254,7 +3243,6 @@ }, "node_modules/anymatch": { "version": "3.1.2", - "dev": true, "license": "ISC", "dependencies": { "normalize-path": "^3.0.0", @@ -3505,7 +3493,6 @@ }, "node_modules/binary-extensions": { "version": "2.2.0", - "dev": true, "license": "MIT", "engines": { "node": ">=8" @@ -3593,7 +3580,6 @@ }, "node_modules/braces": { "version": "3.0.2", - "dev": true, "license": "MIT", "dependencies": { "fill-range": "^7.0.1" @@ -3771,7 +3757,6 @@ }, "node_modules/chokidar": { "version": "3.5.3", - "dev": true, "funding": [ { "type": "individual", @@ -4714,7 +4699,6 @@ }, "node_modules/dependency-graph": { "version": "0.11.0", - "dev": true, "license": "MIT", "engines": { "node": ">= 0.6.0" @@ -4861,7 +4845,6 @@ }, "node_modules/encoding": { "version": "0.1.13", - "dev": true, "license": "MIT", "optional": true, "dependencies": { @@ -4870,7 +4853,6 @@ }, "node_modules/encoding/node_modules/iconv-lite": { "version": "0.6.3", - "dev": true, "license": "MIT", "optional": true, "dependencies": { @@ -5346,7 +5328,6 @@ }, "node_modules/fill-range": { "version": "7.0.1", - "dev": true, "license": "MIT", "dependencies": { "to-regex-range": "^5.0.1" @@ -5595,7 +5576,6 @@ }, "node_modules/glob-parent": { "version": "5.1.2", - "dev": true, "license": "ISC", "dependencies": { "is-glob": "^4.0.1" @@ -6133,7 +6113,6 @@ }, "node_modules/is-binary-path": { "version": "2.1.0", - "dev": true, "license": "MIT", "dependencies": { "binary-extensions": "^2.0.0" @@ -6183,7 +6162,6 @@ }, "node_modules/is-extglob": { "version": "2.1.1", - "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -6198,7 +6176,6 @@ }, "node_modules/is-glob": { "version": "4.0.3", - "dev": true, "license": "MIT", "dependencies": { "is-extglob": "^2.1.1" @@ -6222,7 +6199,6 @@ }, "node_modules/is-number": { "version": "7.0.0", - "dev": true, "license": "MIT", "engines": { "node": ">=0.12.0" @@ -7011,7 +6987,6 @@ }, "node_modules/lru-cache": { "version": "6.0.0", - "dev": true, "license": "ISC", "dependencies": { "yallist": "^4.0.0" @@ -7022,7 +6997,6 @@ }, "node_modules/magic-string": { "version": "0.25.7", - "dev": true, "license": "MIT", "dependencies": { "sourcemap-codec": "^1.4.4" @@ -7565,7 +7539,6 @@ }, "node_modules/normalize-path": { "version": "3.0.0", - "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -8202,7 +8175,6 @@ }, "node_modules/picomatch": { "version": "2.3.1", - "dev": true, "license": "MIT", "engines": { "node": ">=8.6" @@ -8953,7 +8925,6 @@ }, "node_modules/readdirp": { "version": "3.6.0", - "dev": true, "license": "MIT", "dependencies": { "picomatch": "^2.2.1" @@ -9228,7 +9199,7 @@ }, "node_modules/safer-buffer": { "version": "2.1.2", - "dev": true, + "devOptional": true, "license": "MIT" }, "node_modules/sass": { @@ -9348,7 +9319,6 @@ }, "node_modules/semver": { "version": "7.3.5", - "dev": true, "license": "ISC", "dependencies": { "lru-cache": "^6.0.0" @@ -9698,7 +9668,6 @@ }, "node_modules/sourcemap-codec": { "version": "1.4.8", - "dev": true, "license": "MIT" }, "node_modules/spdy": { @@ -10077,7 +10046,6 @@ }, "node_modules/to-regex-range": { "version": "5.0.1", - "dev": true, "license": "MIT", "dependencies": { "is-number": "^7.0.0" @@ -10159,7 +10127,6 @@ }, "node_modules/typescript": { "version": "4.5.5", - "dev": true, "license": "Apache-2.0", "bin": { "tsc": "bin/tsc", @@ -10781,7 +10748,6 @@ }, "node_modules/yallist": { "version": "4.0.0", - "dev": true, "license": "ISC" }, "node_modules/yaml": { @@ -11067,7 +11033,6 @@ }, "@angular/compiler-cli": { "version": "13.2.5", - "dev": true, "requires": { "@babel/core": "^7.17.2", "chokidar": "^3.0.0", @@ -11083,14 +11048,12 @@ "dependencies": { "@ampproject/remapping": { "version": "2.1.2", - "dev": true, "requires": { "@jridgewell/trace-mapping": "^0.3.0" } }, "@babel/core": { "version": "7.17.5", - "dev": true, "requires": { "@ampproject/remapping": "^2.1.0", "@babel/code-frame": "^7.16.7", @@ -11110,14 +11073,12 @@ }, "dependencies": { "semver": { - "version": "6.3.0", - "dev": true + "version": "6.3.0" } } }, "@babel/generator": { "version": "7.17.3", - "dev": true, "requires": { "@babel/types": "^7.17.0", "jsesc": "^2.5.1", @@ -11125,8 +11086,7 @@ } }, "source-map": { - "version": "0.5.7", - "dev": true + "version": "0.5.7" } } }, @@ -11237,7 +11197,6 @@ }, "@babel/core": { "version": "7.16.12", - "dev": true, "requires": { "@babel/code-frame": "^7.16.7", "@babel/generator": "^7.16.8", @@ -11257,18 +11216,15 @@ }, "dependencies": { "semver": { - "version": "6.3.0", - "dev": true + "version": "6.3.0" }, "source-map": { - "version": "0.5.7", - "dev": true + "version": "0.5.7" } } }, "@babel/generator": { "version": "7.16.8", - "dev": true, "requires": { "@babel/types": "^7.16.8", "jsesc": "^2.5.1", @@ -11276,8 +11232,7 @@ }, "dependencies": { "source-map": { - "version": "0.5.7", - "dev": true + "version": "0.5.7" } } }, @@ -12210,7 +12165,8 @@ }, "dependencies": { "ws": { - "version": "7.5.7" + "version": "7.5.7", + "requires": {} } } }, @@ -12222,7 +12178,8 @@ }, "@ngtools/webpack": { "version": "13.2.5", - "dev": true + "dev": true, + "requires": {} }, "@nodelib/fs.scandir": { "version": "2.1.5", @@ -12774,7 +12731,8 @@ }, "acorn-import-assertions": { "version": "1.8.0", - "dev": true + "dev": true, + "requires": {} }, "adjust-sourcemap-loader": { "version": "4.0.0", @@ -12872,7 +12830,6 @@ }, "anymatch": { "version": "3.1.2", - "dev": true, "requires": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" @@ -13024,8 +12981,7 @@ "dev": true }, "binary-extensions": { - "version": "2.2.0", - "dev": true + "version": "2.2.0" }, "bl": { "version": "4.1.0", @@ -13082,7 +13038,8 @@ "dev": true }, "bootstrap": { - "version": "5.1.3" + "version": "5.1.3", + "requires": {} }, "brace-expansion": { "version": "1.1.11", @@ -13093,7 +13050,6 @@ }, "braces": { "version": "3.0.2", - "dev": true, "requires": { "fill-range": "^7.0.1" } @@ -13202,7 +13158,6 @@ }, "chokidar": { "version": "3.5.3", - "dev": true, "requires": { "anymatch": "~3.1.2", "braces": "~3.0.2", @@ -13224,7 +13179,8 @@ }, "circular-dependency-plugin": { "version": "5.2.2", - "dev": true + "dev": true, + "requires": {} }, "clean-stack": { "version": "2.2.0", @@ -13595,7 +13551,8 @@ }, "css-prefers-color-scheme": { "version": "6.0.3", - "dev": true + "dev": true, + "requires": {} }, "css-select": { "version": "4.2.1", @@ -13795,8 +13752,7 @@ "dev": true }, "dependency-graph": { - "version": "0.11.0", - "dev": true + "version": "0.11.0" }, "destroy": { "version": "1.0.4", @@ -13895,7 +13851,6 @@ }, "encoding": { "version": "0.1.13", - "dev": true, "optional": true, "requires": { "iconv-lite": "^0.6.2" @@ -13903,7 +13858,6 @@ "dependencies": { "iconv-lite": { "version": "0.6.3", - "dev": true, "optional": true, "requires": { "safer-buffer": ">= 2.1.2 < 3.0.0" @@ -14216,7 +14170,6 @@ }, "fill-range": { "version": "7.0.1", - "dev": true, "requires": { "to-regex-range": "^5.0.1" } @@ -14365,7 +14318,6 @@ }, "glob-parent": { "version": "5.1.2", - "dev": true, "requires": { "is-glob": "^4.0.1" } @@ -14562,7 +14514,8 @@ }, "icss-utils": { "version": "5.1.0", - "dev": true + "dev": true, + "requires": {} }, "ieee754": { "version": "1.2.1", @@ -14709,7 +14662,6 @@ }, "is-binary-path": { "version": "2.1.0", - "dev": true, "requires": { "binary-extensions": "^2.0.0" } @@ -14733,15 +14685,13 @@ "dev": true }, "is-extglob": { - "version": "2.1.1", - "dev": true + "version": "2.1.1" }, "is-fullwidth-code-point": { "version": "3.0.0" }, "is-glob": { "version": "4.0.3", - "dev": true, "requires": { "is-extglob": "^2.1.1" } @@ -14755,8 +14705,7 @@ "dev": true }, "is-number": { - "version": "7.0.0", - "dev": true + "version": "7.0.0" }, "is-path-cwd": { "version": "2.2.0", @@ -15080,7 +15029,8 @@ }, "karma-jasmine-html-reporter": { "version": "1.7.0", - "dev": true + "dev": true, + "requires": {} }, "karma-source-map-support": { "version": "1.4.0", @@ -15248,14 +15198,12 @@ }, "lru-cache": { "version": "6.0.0", - "dev": true, "requires": { "yallist": "^4.0.0" } }, "magic-string": { "version": "0.25.7", - "dev": true, "requires": { "sourcemap-codec": "^1.4.4" } @@ -15590,8 +15538,7 @@ } }, "normalize-path": { - "version": "3.0.0", - "dev": true + "version": "3.0.0" }, "normalize-range": { "version": "0.1.2", @@ -16006,8 +15953,7 @@ "version": "1.0.0" }, "picomatch": { - "version": "2.3.1", - "dev": true + "version": "2.3.1" }, "pify": { "version": "2.3.0", @@ -16097,7 +16043,8 @@ }, "postcss-custom-media": { "version": "8.0.0", - "dev": true + "dev": true, + "requires": {} }, "postcss-custom-properties": { "version": "12.1.4", @@ -16151,11 +16098,13 @@ }, "postcss-font-variant": { "version": "5.0.0", - "dev": true + "dev": true, + "requires": {} }, "postcss-gap-properties": { "version": "3.0.3", - "dev": true + "dev": true, + "requires": {} }, "postcss-image-set-function": { "version": "4.0.6", @@ -16175,7 +16124,8 @@ }, "postcss-initial": { "version": "4.0.1", - "dev": true + "dev": true, + "requires": {} }, "postcss-lab-function": { "version": "4.1.1", @@ -16196,15 +16146,18 @@ }, "postcss-logical": { "version": "5.0.4", - "dev": true + "dev": true, + "requires": {} }, "postcss-media-minmax": { "version": "5.0.0", - "dev": true + "dev": true, + "requires": {} }, "postcss-modules-extract-imports": { "version": "3.0.0", - "dev": true + "dev": true, + "requires": {} }, "postcss-modules-local-by-default": { "version": "4.0.0", @@ -16238,11 +16191,13 @@ }, "postcss-overflow-shorthand": { "version": "3.0.3", - "dev": true + "dev": true, + "requires": {} }, "postcss-page-break": { "version": "3.0.4", - "dev": true + "dev": true, + "requires": {} }, "postcss-place": { "version": "7.0.4", @@ -16299,7 +16254,8 @@ }, "postcss-replace-overflow-wrap": { "version": "4.0.0", - "dev": true + "dev": true, + "requires": {} }, "postcss-selector-not": { "version": "5.0.0", @@ -16427,7 +16383,6 @@ }, "readdirp": { "version": "3.6.0", - "dev": true, "requires": { "picomatch": "^2.2.1" } @@ -16599,7 +16554,7 @@ }, "safer-buffer": { "version": "2.1.2", - "dev": true + "devOptional": true }, "sass": { "version": "1.49.0", @@ -16643,7 +16598,8 @@ }, "ajv-keywords": { "version": "3.5.2", - "dev": true + "dev": true, + "requires": {} }, "json-schema-traverse": { "version": "0.4.1", @@ -16664,7 +16620,6 @@ }, "semver": { "version": "7.3.5", - "dev": true, "requires": { "lru-cache": "^6.0.0" } @@ -16910,8 +16865,7 @@ } }, "sourcemap-codec": { - "version": "1.4.8", - "dev": true + "version": "1.4.8" }, "spdy": { "version": "4.0.2", @@ -17081,7 +17035,8 @@ }, "ajv-keywords": { "version": "3.5.2", - "dev": true + "dev": true, + "requires": {} }, "json-schema-traverse": { "version": "0.4.1", @@ -17135,7 +17090,6 @@ }, "to-regex-range": { "version": "5.0.1", - "dev": true, "requires": { "is-number": "^7.0.0" } @@ -17184,8 +17138,7 @@ "dev": true }, "typescript": { - "version": "4.5.5", - "dev": true + "version": "4.5.5" }, "ua-parser-js": { "version": "0.7.31", @@ -17344,7 +17297,8 @@ }, "ajv-keywords": { "version": "3.5.2", - "dev": true + "dev": true, + "requires": {} }, "json-schema-traverse": { "version": "0.4.1", @@ -17538,7 +17492,8 @@ }, "ws": { "version": "8.2.3", - "dev": true + "dev": true, + "requires": {} }, "xlsx": { "version": "0.18.5", @@ -17556,8 +17511,7 @@ "version": "5.0.8" }, "yallist": { - "version": "4.0.0", - "dev": true + "version": "4.0.0" }, "yaml": { "version": "1.10.2", 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 9addd6bb..0b952392 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 @@ -25,8 +25,31 @@ export class BoxPlotComponent implements AfterViewInit { @Input()q1?: number; @Input()q3?: number; + updateChart(min: number, max: number, q1: number, q3: number, median: number){ + console.log(this.min, this.max); + const newBoxPlotData = { + labels: [""], + datasets: [{ + label: 'Dataset 1', + backgroundColor: '#0063AB', + borderColor: '#dfd7d7', + borderWidth: 1, + outlierColor: '#999999', + scaleFontColor: '#0063AB', + padding: 10, + itemRadius: 0, + data: [ + {min, q1, median, q3, max}/*, + [0, 25, 51, 75, 99]*/ + ]}] + }; + Object.assign(this.boxplotData, newBoxPlotData); + }; + @ViewChild('boxplot') chartRef!: ElementRef; - constructor() { } + constructor() { + //this.updateChart(); + } boxplotData = { // define label tree 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 44a15f22..b3fcf9a3 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -12,6 +12,8 @@ import { ExperimentsService } from 'src/app/_services/experiments.service'; import { SaveExperimentDialogComponent } from 'src/app/_modals/save-experiment-dialog/save-experiment-dialog.component'; import { AlertDialogComponent } from 'src/app/_modals/alert-dialog/alert-dialog.component'; import Shared from 'src/app/Shared'; +import { PieChartComponent } from '../_charts/pie-chart/pie-chart.component'; +import { BoxPlotComponent } from '../_charts/box-plot/box-plot.component'; @Component({ selector: 'app-column-table', @@ -20,6 +22,8 @@ import Shared from 'src/app/Shared'; }) export class ColumnTableComponent implements AfterViewInit { + @ViewChildren(BoxPlotComponent) boxplotComp!: BoxPlotComponent[]; + @ViewChildren(PieChartComponent) piechartComp!: PieChartComponent[]; @Input() dataset?: Dataset; @Input() experiment!: Experiment; @Output() okPressed: EventEmitter = new EventEmitter(); @@ -42,9 +46,13 @@ export class ColumnTableComponent implements AfterViewInit { //ovo mi nece trebati jer primam dataset iz druge komponente } + updateCharts(){ + //this.boxplotComp.forEach(bp => bp.updateChart()); + } + loadDataset(dataset: Dataset) { this.dataset = dataset; - + this.updateCharts(); this.setColumnTypeInitial(); this.dataset.columnInfo.forEach(column => { @@ -70,7 +78,8 @@ export class ColumnTableComponent implements AfterViewInit { } ngAfterViewInit(): void { - + console.log(this.dataset?.columnInfo); + } setColumnTypeInitial() { @@ -367,3 +376,7 @@ export class Tab { public value: Table ) { } } +function BoxplotComponent(BoxplotComponent: any) { + throw new Error('Function not implemented.'); +} + diff --git a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts b/frontend/src/app/_elements/dataset-load/dataset-load.component.ts deleted file mode 100644 index 73dbf2d2..00000000 --- a/frontend/src/app/_elements/dataset-load/dataset-load.component.ts +++ /dev/null @@ -1,100 +0,0 @@ -import { Component, OnInit, ViewChild, ViewChildren } from '@angular/core'; -import { AddNewDatasetComponent } from '../add-new-dataset/add-new-dataset.component'; -import { ModelsService } from 'src/app/_services/models.service'; -import shared from 'src/app/Shared'; -import Dataset from 'src/app/_data/Dataset'; -import { DatatableComponent, TableData } from 'src/app/_elements/datatable/datatable.component'; -import { DatasetsService } from 'src/app/_services/datasets.service'; -import { CsvParseService } from 'src/app/_services/csv-parse.service'; -import { Output, EventEmitter } from '@angular/core'; -import { SignalRService } from 'src/app/_services/signal-r.service'; - -@Component({ - selector: 'app-dataset-load', - templateUrl: './dataset-load.component.html', - styleUrls: ['./dataset-load.component.css'] -}) -export class DatasetLoadComponent implements OnInit { - - @Output() selectedDatasetChangeEvent = new EventEmitter(); - - @ViewChild(AddNewDatasetComponent) addNewDatasetComponent!: AddNewDatasetComponent; - @ViewChild(AddNewDatasetComponent) datatable!: DatatableComponent; - - datasetLoaded: boolean = false; - selectedDatasetLoaded: boolean = false; - - showMyDatasets: boolean = true; - myDatasets?: Dataset[]; - existingDatasetSelected: boolean = false; - selectedDataset?: Dataset; - - tableData: TableData = new TableData(); - - term: string = ""; - - constructor(private models: ModelsService, private datasets: DatasetsService, private csv: CsvParseService, private signalRService: SignalRService) { - this.datasets.getMyDatasets().subscribe((datasets) => { - this.myDatasets = datasets; - }); - } - - viewMyDatasetsForm() { - this.showMyDatasets = true; - if (this.selectedDataset != undefined) - this.resetSelectedDataset(); - //this.resetCbsAndRbs(); //TREBA DA SE DESI - } - viewNewDatasetForm() { - this.showMyDatasets = false; - if (this.selectedDataset != undefined) - this.resetSelectedDataset(); - //this.resetCbsAndRbs(); //TREBA DA SE DESI - } - - refreshMyDatasets() { - this.datasets.getMyDatasets().subscribe((datasets) => { - this.myDatasets = datasets; - this.showMyDatasets = true; - }); - } - - selectThisDataset(dataset: Dataset) { - this.selectedDataset = dataset; - this.selectedDatasetLoaded = false; - this.existingDatasetSelected = true; - this.tableData.hasHeader = this.selectedDataset.hasHeader; - - this.tableData.hasInput = true; - this.tableData.loaded = false; - - this.datasets.getDatasetFile(dataset.fileId).subscribe((file: string | undefined) => { - if (file) { - this.tableData.loaded = true; - this.tableData.numRows = this.selectedDataset!.rowCount; - this.tableData.numCols = this.selectedDataset!.columnInfo.length; - this.tableData.data = this.csv.csvToArray(file, (dataset.delimiter == "razmak") ? " " : (dataset.delimiter == "") ? "," : dataset.delimiter); - //this.resetCbsAndRbs(); //TREBA DA SE DESI - //this.refreshThreeNullValueRadioOptions(); //TREBA DA SE DESI - this.selectedDatasetLoaded = true; - - this.selectedDatasetChangeEvent.emit(this.selectedDataset); - } - }); - } - - resetSelectedDataset(): boolean { - this.selectedDatasetChangeEvent.emit(this.selectedDataset); - return true; - } - - ngOnInit(): void { - if (this.signalRService.hubConnection) { - this.signalRService.hubConnection.on("NotifyDataset", _ => { - this.refreshMyDatasets(); - }); - } else { - console.warn("Dataset-Load: No connection!"); - } - } -} diff --git a/frontend/src/app/_elements/model-load/model-load.component.html b/frontend/src/app/_elements/model-load/model-load.component.html deleted file mode 100644 index dcb35c21..00000000 --- a/frontend/src/app/_elements/model-load/model-load.component.html +++ /dev/null @@ -1,215 +0,0 @@ -
-
- -

ili

- -
- -
- -
-
-
-
    -
  • - - -
    • -
-
- -
-
-
- - -
-
- -
- - -
-
- -
- -
-
- -
-

Parametri treniranja modela:

-
- -
-
-
- -
-
- -
-
-
- -
-
- -
-
- -
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
- -
-
-
- -
-
- -
-
-
- -
-
- - - {{newModel.batchSize}} - -
- -
-
-
- -
-
- -
-
-
- -
- -
- -

Aktivacione funkcije:

- -
-
-
- -
-
-
-
-
- #{{i+1}} -
- -
-
-
-
-
- -
-
- -
-
-
-
-
- -
-

Izaberite metrike:

-
- -
- - - -
-
-
- -
-
- -
-
-
-
\ No newline at end of file diff --git a/frontend/src/app/_elements/model-load/model-load.component.ts b/frontend/src/app/_elements/model-load/model-load.component.ts deleted file mode 100644 index dbca3d17..00000000 --- a/frontend/src/app/_elements/model-load/model-load.component.ts +++ /dev/null @@ -1,114 +0,0 @@ -import { Component, OnInit, ViewChild, Output, EventEmitter, Input } from '@angular/core'; -import Shared from 'src/app/Shared'; -import Experiment from 'src/app/_data/Experiment'; -import Model, { ActivationFunction, LossFunction, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType } from 'src/app/_data/Model'; -import { ModelsService } from 'src/app/_services/models.service'; -import { GraphComponent } from '../graph/graph.component'; - - -@Component({ - selector: 'app-model-load', - templateUrl: './model-load.component.html', - styleUrls: ['./model-load.component.css'] -}) -export class ModelLoadComponent implements OnInit { - - @ViewChild(GraphComponent) graph!: GraphComponent; - @Input() forExperiment?:Experiment; - @Output() selectedModelChangeEvent = new EventEmitter(); - - newModel: Model = new Model(); - myModels?: Model[]; - selectedModel?: Model; - - ProblemType = ProblemType; - ActivationFunction = ActivationFunction; - metrics: any = Metrics; - LossFunction = LossFunction; - Optimizer = Optimizer; - Object = Object; - document = document; - shared = Shared; - - term: string = ""; - selectedProblemType: string = ''; - selectedMetrics = []; - lossFunction: any = LossFunction; - - showMyModels: boolean = true; - - constructor(private modelsService: ModelsService) { - this.modelsService.getMyModels().subscribe((models) => { - this.myModels = models; - }); - } - - ngOnInit(): void { - } - batchSizePower:number=1; - updateBatchSize() - { - this.newModel.batchSize=2**this.batchSizePower; - } - - updateGraph() { - this.graph.update(); - } - - getMetrics() { - this.newModel.metrics = []; - let cb = document.getElementsByName("cbmetrics"); - - for (let i = 0; i < cb.length; i++) { - let chb = cb[i]; - if (chb.checked == true) - this.newModel.metrics.push(chb.value); - } - } - - uploadModel() { - this.getMetrics(); - - this.newModel.uploaderId = Shared.userId; - - this.modelsService.addModel(this.newModel).subscribe((response) => { - Shared.openDialog('Model dodat', 'Model je uspešno dodat u bazu.'); - // treba da se selektuje nov model u listi modela - //this.selectedModel = - }, (error) => { - Shared.openDialog('Greška', 'Model sa unetim nazivom već postoji u Vašoj kolekciji. Promenite naziv modela i nastavite sa kreiranim datasetom.'); - }); - } - - filterOptions() { - switch (this.newModel.type) { - case 'regresioni': - this.lossFunction = LossFunctionRegression; - this.metrics = MetricsRegression; - break; - case 'binarni-klasifikacioni': - this.lossFunction = LossFunctionBinaryClassification; - this.metrics = MetricsBinaryClassification; - break; - case 'multi-klasifikacioni': - this.lossFunction = LossFunctionMultiClassification; - this.metrics = MetricsMultiClassification; - break; - default: - break; - } - } - - viewMyModelsForm() { - this.showMyModels = true; - } - viewNewModelForm() { - this.showMyModels = false; - } - - selectThisModel(model: Model) { - this.selectedModel = model; - this.selectedModelChangeEvent.emit(this.selectedModel); - } - -} -- cgit v1.2.3 From adba37d05dc76be7a2a807389b16a6ee2dfd3bac Mon Sep 17 00:00:00 2001 From: Ivan Ljubisavljevic Date: Tue, 10 May 2022 23:31:31 +0200 Subject: Sredjeno da se odabirom delimitera instant menja tabela u dataset formi --- frontend/src/app/_elements/form-dataset/form-dataset.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/app/_elements/form-dataset/form-dataset.component.html b/frontend/src/app/_elements/form-dataset/form-dataset.component.html index 055c3fd3..b96276bd 100644 --- a/frontend/src/app/_elements/form-dataset/form-dataset.component.html +++ b/frontend/src/app/_elements/form-dataset/form-dataset.component.html @@ -25,7 +25,7 @@
Delimiter - + {{ option }} -- cgit v1.2.3 From 1d79dffb6ab020f46e9626687a34ecec4acf6a9c Mon Sep 17 00:00:00 2001 From: Ognjen Cirkovic Date: Wed, 11 May 2022 18:24:16 +0200 Subject: Dodat mehanizam da obavestava korisnika o unetoj informaciji na navbaru. --- .../src/app/_pages/experiment/experiment.component.html | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index 28bacf1f..17881347 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -3,19 +3,28 @@ - Izvor podataka + + {{dataset.name}} + Izvor podataka +

Izaberite vas izvor podataka

 - Odabir kolona + + {{experiment.name}} + Odabir kolona +

Pripremite podatke i izaberite izlazne kolone

 - Treniranje + + {{modelToTrain.name}} + Treniranje +

Odaberite parametre i trenirajte model

 -- cgit v1.2.3 From 3669f032c1077480d33c55a1eadae5999ab8250f Mon Sep 17 00:00:00 2001 From: Ognjen Cirkovic Date: Wed, 11 May 2022 19:10:46 +0200 Subject: Dodato ime eksperimenta. --- frontend/src/app/_pages/experiment/experiment.component.css | 4 ++++ frontend/src/app/_pages/experiment/experiment.component.html | 5 ++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/_pages/experiment/experiment.component.css b/frontend/src/app/_pages/experiment/experiment.component.css index 36c35484..a709c98e 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.css +++ b/frontend/src/app/_pages/experiment/experiment.component.css @@ -52,4 +52,8 @@ mat-stepper { width: 98%; height: 98%; overflow-y: auto; +} +.ekspName{ + font-weight: bold; + font-size: large; } \ No newline at end of file diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index 17881347..08c6cd06 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -1,5 +1,7 @@
+
+
Eskperiment:{{experiment.name}}
@@ -32,6 +34,7 @@

Pregledajte tok treniranja i grafički prikaz rezultata

 +
@@ -55,4 +58,4 @@
-
\ No newline at end of file + -- cgit v1.2.3 From f0428d044ae81da1021caf4eab25ef7f460d8a81 Mon Sep 17 00:00:00 2001 From: Ognjen Cirkovic Date: Wed, 11 May 2022 19:18:59 +0200 Subject: Promenjene informacije koje se prikazuju. --- frontend/src/app/_pages/experiment/experiment.component.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index 08c6cd06..edae1fc2 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -6,8 +6,8 @@ - {{dataset.name}} Izvor podataka + Izvor podataka:{{dataset.name}}

Izaberite vas izvor podataka

@@ -15,7 +15,7 @@ - {{experiment.name}} + Predvideti:{{experiment.outputColumn}} Odabir kolona @@ -24,7 +24,7 @@ - {{modelToTrain.name}} + Model:{{modelToTrain.name}} Treniranje

Odaberite parametre i trenirajte model

-- cgit v1.2.3 From 650895a49c64b662979c16335f80c5f813be0f6b Mon Sep 17 00:00:00 2001 From: Nevena Bojovic Date: Wed, 11 May 2022 21:20:10 +0200 Subject: Korekcija... --- frontend/src/app/_data/Dataset.ts | 18 ++-- .../_charts/box-plot/box-plot.component.ts | 95 ++++++++++++++-------- .../column-table/column-table.component.ts | 10 ++- 3 files changed, 81 insertions(+), 42 deletions(-) diff --git a/frontend/src/app/_data/Dataset.ts b/frontend/src/app/_data/Dataset.ts index 4ff0a471..87b09c6f 100644 --- a/frontend/src/app/_data/Dataset.ts +++ b/frontend/src/app/_data/Dataset.ts @@ -29,15 +29,15 @@ export class ColumnInfo { public columnName: string = '', public isNumber: boolean = false, public numNulls: number = 0, - public uniqueValues?: string[], - public uniqueValuesCount?: number[], - public uniqueValuesPercent?: number[], - public median?: number, - public mean?: number, - public min?: number, - public max?: number, - public q1?: number, - public q3?: number, + public uniqueValues: string[]=[], + public uniqueValuesCount: number[]=[], + public uniqueValuesPercent: number[]=[], + public median: number=0, + public mean: number=0, + public min: number=0, + public max: number=0, + public q1: number=0, + public q3: number=0, ) { /*if (isNumber) this.columnType = ColumnType.numerical; 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 0b952392..1dd3354d 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 @@ -25,6 +25,7 @@ export class BoxPlotComponent implements AfterViewInit { @Input()q1?: number; @Input()q3?: number; + updateChart(min: number, max: number, q1: number, q3: number, median: number){ console.log(this.min, this.max); const newBoxPlotData = { @@ -41,11 +42,71 @@ export class BoxPlotComponent implements AfterViewInit { data: [ {min, q1, median, q3, max}/*, [0, 25, 51, 75, 99]*/ + ]}] }; + + const newOptionsTmp = { + + plugins:{ + legend: { + display: false + }, + }, + scales : { + x: { + ticks: { + color: '#dfd7d7' + }, + grid: { + color: "rgba(0, 99, 171, 0.5)" + } + }, + y : { + min: this.min, + max: this.max, + ticks: { + color: '#dfd7d7' + }, + grid: { + color: "rgba(0, 99, 171, 0.5)" + } + } + + } + }; Object.assign(this.boxplotData, newBoxPlotData); + Object.assign(this.options, newOptionsTmp); }; + options = { + plugins:{ + legend: { + display: false + }, + }, + scales : { + x: { + ticks: { + color: '#dfd7d7' + }, + grid: { + color: "rgba(0, 99, 171, 0.5)" + } + }, + y : { + min: this.min, + max: this.max, + ticks: { + color: '#dfd7d7' + }, + grid: { + color: "rgba(0, 99, 171, 0.5)" + } + } + } + } + @ViewChild('boxplot') chartRef!: ElementRef; constructor() { //this.updateChart(); @@ -53,7 +114,7 @@ export class BoxPlotComponent implements AfterViewInit { boxplotData = { // define label tree - labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/], + //labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/], datasets: [{ label: 'Dataset 1', backgroundColor: '#0063AB', @@ -94,37 +155,7 @@ export class BoxPlotComponent implements AfterViewInit { const myChart = new Chart(this.chartRef.nativeElement, { type: "boxplot", data: this.boxplotData, - options: { - /*title: { - display: true, - text: 'Predicted world population (millions) in 2050' - }*/ - plugins:{ - legend: { - display: false - }, - }, - scales : { - x: { - ticks: { - color: '#dfd7d7' - }, - grid: { - color: "rgba(0, 99, 171, 0.5)" - } - }, - y : { - min: -50, - max: 200, - ticks: { - color: '#dfd7d7' - }, - grid: { - color: "rgba(0, 99, 171, 0.5)" - } - } - } - } + options: this.options }); } 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 b3fcf9a3..8010c30f 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -47,7 +47,15 @@ export class ColumnTableComponent implements AfterViewInit { } updateCharts(){ - //this.boxplotComp.forEach(bp => bp.updateChart()); + //min: number, max: number, q1: number, q3: number, median: number + let i=0; + this.dataset?.columnInfo.forEach(colInfo => + { if (this.experiment.columnTypes[i] == ColumnType.numerical) + { + this.boxplotComp[i].updateChart(colInfo!.min, colInfo.max, colInfo.q1, colInfo.q3, colInfo.median); + i++; + } + }); } loadDataset(dataset: Dataset) { -- cgit v1.2.3 From 8e1c8a20a1c098188245552abb2629135c807558 Mon Sep 17 00:00:00 2001 From: Ognjen Cirkovic Date: Wed, 11 May 2022 22:36:22 +0200 Subject: Promenjen stil i dizajn. Dodat naziv u slucaju da je novi eksperiment. --- .../app/_pages/experiment/experiment.component.css | 10 ++++++++- .../_pages/experiment/experiment.component.html | 26 ++++++++++++++-------- 2 files changed, 26 insertions(+), 10 deletions(-) diff --git a/frontend/src/app/_pages/experiment/experiment.component.css b/frontend/src/app/_pages/experiment/experiment.component.css index a709c98e..4c063f87 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.css +++ b/frontend/src/app/_pages/experiment/experiment.component.css @@ -56,4 +56,12 @@ mat-stepper { .ekspName{ font-weight: bold; font-size: large; -} \ No newline at end of file +} + + +.addedElement{ + color:var(--ns-accent); +} +.text-overflow { + overflow-wrap: break-word; +} diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html index edae1fc2..a2ede838 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.html +++ b/frontend/src/app/_pages/experiment/experiment.component.html @@ -1,37 +1,45 @@
-
Eskperiment:{{experiment.name}}
+
+
+ Novi Eksperiment +
+
+ {{experiment.name}} +
+ +
Izvor podataka - Izvor podataka:{{dataset.name}} + {{dataset.name}} -

Izaberite vas izvor podataka

+

Izaberite vas izvor podataka

 - - Predvideti:{{experiment.outputColumn}} + + Predvideti:{{experiment.outputColumn}} Odabir kolona -

Pripremite podatke i izaberite izlazne kolone

+

Pripremite podatke i izaberite izlazne kolone

 - Model:{{modelToTrain.name}} + {{modelToTrain.name}} Treniranje -

Odaberite parametre i trenirajte model

+

Odaberite parametre i trenirajte model

 Pregled rezultata treniranja -

Pregledajte tok treniranja i grafički prikaz rezultata

+

Pregledajte tok treniranja i grafički prikaz rezultata
-- cgit v1.2.3 From 223f2e9215ae1d8b3d9345c7b911f20eb4245064 Mon Sep 17 00:00:00 2001 From: Danijel Anđelković Date: Wed, 11 May 2022 22:53:02 +0200 Subject: Promenio boxplot i piechart ViewChildren na QueryList umesto niza. --- .../_charts/box-plot/box-plot.component.ts | 172 ++++++--------------- .../column-table/column-table.component.ts | 42 ++--- 2 files changed, 74 insertions(+), 140 deletions(-) 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 1dd3354d..bf5e3fd6 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,97 +16,22 @@ Chart.register(BoxPlotController, BoxAndWiskers, LinearScale, CategoryScale); }) export class BoxPlotComponent implements AfterViewInit { - @Input()width?: number; - @Input()height?: number; - @Input()mean?: number; - @Input()median?: number; - @Input()min?: number; - @Input()max?: number; - @Input()q1?: number; - @Input()q3?: number; + @Input() width?: number; + @Input() height?: number; + @Input() mean?: number; + @Input() median?: number; + @Input() min?: number; + @Input() max?: number; + @Input() q1?: number; + @Input() q3?: number; - - updateChart(min: number, max: number, q1: number, q3: number, median: number){ - console.log(this.min, this.max); - const newBoxPlotData = { - labels: [""], - datasets: [{ - label: 'Dataset 1', - backgroundColor: '#0063AB', - borderColor: '#dfd7d7', - borderWidth: 1, - outlierColor: '#999999', - scaleFontColor: '#0063AB', - padding: 10, - itemRadius: 0, - data: [ - {min, q1, median, q3, max}/*, - [0, 25, 51, 75, 99]*/ - - ]}] - }; - - const newOptionsTmp = { - - plugins:{ - legend: { - display: false - }, - }, - scales : { - x: { - ticks: { - color: '#dfd7d7' - }, - grid: { - color: "rgba(0, 99, 171, 0.5)" - } - }, - y : { - min: this.min, - max: this.max, - ticks: { - color: '#dfd7d7' - }, - grid: { - color: "rgba(0, 99, 171, 0.5)" - } - } - - } - }; - Object.assign(this.boxplotData, newBoxPlotData); - Object.assign(this.options, newOptionsTmp); + updateChart(min: number, max: number, q1: number, q3: number, median: number) { + if (this.myChart) { + this.boxplotData.datasets[0].data = [[min, q1, median, q3, max]] + this.myChart.update(); + } }; - options = { - plugins:{ - legend: { - display: false - }, - }, - scales : { - x: { - ticks: { - color: '#dfd7d7' - }, - grid: { - color: "rgba(0, 99, 171, 0.5)" - } - }, - y : { - min: this.min, - max: this.max, - ticks: { - color: '#dfd7d7' - }, - grid: { - color: "rgba(0, 99, 171, 0.5)" - } - } - } - } - @ViewChild('boxplot') chartRef!: ElementRef; constructor() { //this.updateChart(); @@ -115,7 +40,7 @@ export class BoxPlotComponent implements AfterViewInit { boxplotData = { // define label tree //labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/], - datasets: [{ + datasets: [{ label: 'Dataset 1', backgroundColor: '#0063AB', borderColor: '#dfd7d7', @@ -125,38 +50,43 @@ export class BoxPlotComponent implements AfterViewInit { padding: 10, itemRadius: 0, data: [ - randomValues(100, 0, 100), - /*randomValues(100, 0, 20), - randomValues(100, 20, 70), - randomValues(100, 60, 100), - randomValues(40, 50, 100), - randomValues(100, 60, 120), - randomValues(100, 80, 100)*/ - ]}/*, { - label: 'Dataset 2', - backgroundColor: 'rgba(0,0,255,0.5)', - borderColor: 'blue', - borderWidth: 1, - outlierColor: '#999999', - padding: 10, - itemRadius: 0, - data: [ - randomValues(100, 60, 100), - randomValues(100, 0, 100), - randomValues(100, 0, 20), - randomValues(100, 20, 70), - randomValues(40, 60, 120), - randomValues(100, 20, 100), - randomValues(100, 80, 100) - ] - }*/] - }; + randomValues(100, 0, 100), + ] + }] + }; ngAfterViewInit(): void { - const myChart = new Chart(this.chartRef.nativeElement, { - type: "boxplot", - data: this.boxplotData, - options: this.options - }); -} + this.myChart = new Chart(this.chartRef.nativeElement, { + type: "boxplot", + data: this.boxplotData, + options: { + plugins: { + legend: { + display: false + }, + }, + scales: { + x: { + ticks: { + color: '#dfd7d7' + }, + grid: { + color: "rgba(0, 99, 171, 0.5)" + } + }, + y: { + min: this.min, + max: this.max, + ticks: { + color: '#dfd7d7' + }, + grid: { + color: "rgba(0, 99, 171, 0.5)" + } + } + } + } + }); + } + myChart?: Chart; } 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 8010c30f..95c0cb71 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, EventEmitter, Input, OnInit, Output, ViewChildren } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, EventEmitter, Input, OnInit, Output, QueryList, ViewChildren } from '@angular/core'; import Dataset from 'src/app/_data/Dataset'; import Experiment, { ColumnEncoding, Encoding, ColumnType, NullValueOptions } from 'src/app/_data/Experiment'; import { DatasetsService } from 'src/app/_services/datasets.service'; @@ -22,8 +22,8 @@ import { BoxPlotComponent } from '../_charts/box-plot/box-plot.component'; }) export class ColumnTableComponent implements AfterViewInit { - @ViewChildren(BoxPlotComponent) boxplotComp!: BoxPlotComponent[]; - @ViewChildren(PieChartComponent) piechartComp!: PieChartComponent[]; + @ViewChildren(BoxPlotComponent) boxplotComp!: QueryList; + @ViewChildren(PieChartComponent) piechartComp!: QueryList; @Input() dataset?: Dataset; @Input() experiment!: Experiment; @Output() okPressed: EventEmitter = new EventEmitter(); @@ -46,21 +46,23 @@ export class ColumnTableComponent implements AfterViewInit { //ovo mi nece trebati jer primam dataset iz druge komponente } - updateCharts(){ + updateCharts() { //min: number, max: number, q1: number, q3: number, median: number - let i=0; - this.dataset?.columnInfo.forEach(colInfo => - { if (this.experiment.columnTypes[i] == ColumnType.numerical) - { - this.boxplotComp[i].updateChart(colInfo!.min, colInfo.max, colInfo.q1, colInfo.q3, colInfo.median); - i++; - } - }); + let i = 0; + this.boxplotComp.changes.subscribe(() => { + const bps = this.boxplotComp.toArray(); + this.dataset?.columnInfo.forEach(colInfo => { + if (this.experiment.columnTypes[i] == ColumnType.numerical) { + bps[i].updateChart(colInfo!.min, colInfo.max, colInfo.q1, colInfo.q3, colInfo.median); + i++; + } + }); + }); } loadDataset(dataset: Dataset) { + console.log("LOADED DATASET"); this.dataset = dataset; - this.updateCharts(); this.setColumnTypeInitial(); this.dataset.columnInfo.forEach(column => { @@ -83,11 +85,13 @@ export class ColumnTableComponent implements AfterViewInit { } }); this.loaded = true; + + this.updateCharts(); } ngAfterViewInit(): void { console.log(this.dataset?.columnInfo); - + } setColumnTypeInitial() { @@ -109,7 +113,7 @@ export class ColumnTableComponent implements AfterViewInit { resetOutputColumn() { if (this.experiment.inputColumns.length > 0) this.experiment.outputColumn = this.experiment.inputColumns[0]; - else + else this.experiment.outputColumn = '-'; } @@ -157,7 +161,7 @@ export class ColumnTableComponent implements AfterViewInit { if (columnName == this.experiment.outputColumn) { if (this.experiment.inputColumns.length > 0) this.experiment.outputColumn = this.experiment.inputColumns[0]; - else + else this.experiment.outputColumn = '-'; } } @@ -245,7 +249,7 @@ export class ColumnTableComponent implements AfterViewInit { openSaveExperimentDialog() { const dialogRef = this.dialog.open(SaveExperimentDialogComponent, { width: '400px', - data: { experiment: this.experiment } + data: { experiment: this.experiment } }); dialogRef.afterClosed().subscribe(experiment => { if (experiment) { @@ -320,7 +324,7 @@ export class ColumnTableComponent implements AfterViewInit { Shared.openDialog("Upozorenje", "Kako bi eksperiment bio uspešno izveden, neophodno je da izaberete barem dve kolone koje ćete koristiti."); else if (this.experiment.inputColumns.length == 1) Shared.openDialog("Upozorenje", "Kako bi eksperiment bio uspešno izveden, neophodno je da izaberete barem dve kolone koje ćete koristiti (mora postojati bar jedna ulazna i jedna izlazna kolona)."); - else + else this.openSaveExperimentDialog(); } updateExperiment() { @@ -328,7 +332,7 @@ export class ColumnTableComponent implements AfterViewInit { Shared.openDialog("Upozorenje", "Kako bi eksperiment bio uspešno izveden, neophodno je da izaberete barem dve kolone koje ćete koristiti."); else if (this.experiment.inputColumns.length == 1) Shared.openDialog("Upozorenje", "Kako bi eksperiment bio uspešno izveden, neophodno je da izaberete barem dve kolone koje ćete koristiti (mora postojati bar jedna ulazna i jedna izlazna kolona)."); - else + else this.openUpdateExperimentDialog(); } -- cgit v1.2.3 From fc273e5c9b5b6c9b845b6dbac093873f56e17495 Mon Sep 17 00:00:00 2001 From: Nevena Bojovic Date: Wed, 11 May 2022 22:55:17 +0200 Subject: Pie Chart - korekcija. --- .../_charts/pie-chart/pie-chart.component.ts | 39 ++++++++++++++-------- .../column-table/column-table.component.ts | 17 ++++++++-- .../app/_pages/experiment/experiment.component.ts | 1 + 3 files changed, 40 insertions(+), 17 deletions(-) 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 932ed963..c2bd3262 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 @@ -12,21 +12,34 @@ export class PieChartComponent implements AfterViewInit { @Input()height?: number; @Input()uniqueValues?: string[] = []; @Input()uniqueValuesPercent?: number[] = []; + + updatePieChart(uniqueValues: string[], uniqueValuesPercent: number[]){ + console.log(this.uniqueValues, this.uniqueValuesPercent); + const newPieChartData = { + datasets: [{ + label: "Population (millions)", + backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"], + data: [2478,5267,734,784,433], + }] + + } + }; @ViewChild('piechart') chartRef!: ElementRef; constructor() { } + pieChartData = { + datasets: [{ + label: "Population (millions)", + backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"], + data: [2478,5267,734,784,433] + }] +} + ngAfterViewInit(): void { const myChart = new Chart(this.chartRef.nativeElement, { type: 'pie', - data: { - labels: ["Africa", "Asia", "Europe", "Latin America", "North America"], - datasets: [{ - label: "Population (millions)", - backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"], - data: [2478,5267,734,784,433], - }] - }, + data: this.pieChartData, options: { /*title: { display: true, @@ -38,11 +51,9 @@ export class PieChartComponent implements AfterViewInit { }, }, layout: { - padding: 15} + padding: 15 + } } -}); - - } + });} - -} +} \ 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 8010c30f..4150a704 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -58,9 +58,22 @@ export class ColumnTableComponent implements AfterViewInit { }); } + updatePieChart(){ + //min: number, max: number, q1: number, q3: number, median: number + let i=0; + this.dataset?.columnInfo.forEach(colInfo => + { if (this.experiment.columnTypes[i] == ColumnType.categorical) + { + this.piechartComp[i].updatePieChart(colInfo!.uniqueValues, colInfo.uniqueValuesPercent); + i++; + } + }); + } + loadDataset(dataset: Dataset) { this.dataset = dataset; this.updateCharts(); + this.updatePieChart(); this.setColumnTypeInitial(); this.dataset.columnInfo.forEach(column => { @@ -384,7 +397,5 @@ export class Tab { public value: Table ) { } } -function BoxplotComponent(BoxplotComponent: any) { - throw new Error('Function not implemented.'); -} + diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts index 97029565..abf4b697 100644 --- a/frontend/src/app/_pages/experiment/experiment.component.ts +++ b/frontend/src/app/_pages/experiment/experiment.component.ts @@ -157,6 +157,7 @@ export class ExperimentComponent implements AfterViewInit { this.dataset = d; this.columnTable.loadDataset(this.dataset); + } modelToTrain?: Model; -- cgit v1.2.3 From 3e1dd2a20b4cbb3fd18c097d287c175adfad2997 Mon Sep 17 00:00:00 2001 From: Sonja Galovic Date: Wed, 11 May 2022 23:36:05 +0200 Subject: Dodata opcija ,,Nema enkodiranja" kod numerickih kolona. Sredjeno globalno podesavanje enkodinga. --- backend/api/api/appsettings.json | 8 ++++---- .../_elements/column-table/column-table.component.html | 3 +++ .../app/_elements/column-table/column-table.component.ts | 16 +++++++++++++--- .../_modals/encoding-dialog/encoding-dialog.component.ts | 11 ++++++++--- 4 files changed, 28 insertions(+), 10 deletions(-) diff --git a/backend/api/api/appsettings.json b/backend/api/api/appsettings.json index 513a81e3..56d1861c 100644 --- a/backend/api/api/appsettings.json +++ b/backend/api/api/appsettings.json @@ -16,15 +16,15 @@ "UserStoreDatabaseSettings": { /* LocalHost*/ - /* "ConnectionString": "mongodb://127.0.0.1:27017/", + "ConnectionString": "mongodb://127.0.0.1:27017/", "DatabaseName": "si_project", "CollectionName": "users", "DatasetCollectionName": "Dataset", "ModelCollectionName": "Model", "PredictorCollectionName": "Predictor", "FilesCollectionName": "Files", - "ExperimentCollectionName": "Experiment"*/ - + "ExperimentCollectionName": "Experiment" + /* "ConnectionString": "mongodb+srv://si_user:si_user@sidatabase.twtfm.mongodb.net/myFirstDatabase?retryWrites=true&w=majority", "DatabaseName": "si_db", "CollectionName": "users", @@ -32,6 +32,6 @@ "ModelCollectionName": "Model", "PredictorCollectionName": "Predictor", "FilesCollectionName": "Files", - "ExperimentCollectionName": "Experiment" + "ExperimentCollectionName": "Experiment" */ } } \ 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 59c1899b..d07d50b2 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.html +++ b/frontend/src/app/_elements/column-table/column-table.component.html @@ -143,6 +143,9 @@ + + Nema enkodiranja + {{ optionName }} 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 b3fcf9a3..b9e39092 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -176,20 +176,30 @@ export class ColumnTableComponent implements AfterViewInit { resetColumnEncodings(encodingType: Encoding) { if (this.experiment != undefined && this.dataset != undefined) { this.experiment.encodings = []; - for (let i = 0; i < this.dataset?.columnInfo.length; i++) { + 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); } this.columnTableChangeDetected(); } } + resetColumnEncodingsGlobalSetting(encodingType: Encoding) { + if (this.experiment != undefined && this.dataset != undefined) { + for (let i = 0; i < this.dataset.columnInfo.length; i++) { + if (this.experiment.columnTypes[i] == ColumnType.categorical && this.dataset.columnInfo[i].columnName != this.experiment.outputColumn) //promeni + this.experiment.encodings[i].encoding = encodingType; + } + this.columnTableChangeDetected(); + } + } openEncodingDialog() { const dialogRef = this.dialog.open(EncodingDialogComponent, { - width: '400px' + width: '400px', + data: { experiment: this.experiment, dataset: this.dataset } }); dialogRef.afterClosed().subscribe(selectedEncoding => { if (selectedEncoding != undefined) - this.resetColumnEncodings(selectedEncoding); + this.resetColumnEncodingsGlobalSetting(selectedEncoding); }); } diff --git a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.ts b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.ts index 231d81a6..9c45d7b6 100644 --- a/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.ts +++ b/frontend/src/app/_modals/encoding-dialog/encoding-dialog.component.ts @@ -1,7 +1,10 @@ import { Component, OnInit } from '@angular/core'; -import { MatDialogRef } from '@angular/material/dialog'; -import { Encoding } from 'src/app/_data/Experiment'; - +import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { ColumnType, Encoding } from 'src/app/_data/Experiment'; +import Experiment from 'src/app/_data/Experiment'; +import { ExperimentsService } from 'src/app/_services/experiments.service'; +import { Inject} from '@angular/core'; +import Dataset from 'src/app/_data/Dataset'; @Component({ selector: 'app-encoding-dialog', @@ -13,6 +16,7 @@ export class EncodingDialogComponent implements OnInit { selectedEncodingType?: Encoding; Encoding = Encoding; Object = Object; + categoricalColumnExists: boolean = true; constructor(public dialogRef: MatDialogRef) { @@ -20,6 +24,7 @@ export class EncodingDialogComponent implements OnInit { } ngOnInit(): void { + } onNoClick() { -- cgit v1.2.3