From 117f254c08a2361c9fe912463f806cb535f5f2e7 Mon Sep 17 00:00:00 2001 From: Ognjen Cirkovic Date: Wed, 18 May 2022 22:39:12 +0200 Subject: Popravljen izgled dugmeta na column-table komponenti. --- frontend/src/app/_elements/column-table/column-table.component.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'frontend/src/app/_elements/column-table') 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 0477b7be..f7f07e62 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.css +++ b/frontend/src/app/_elements/column-table/column-table.component.css @@ -198,7 +198,7 @@ table ::ng-deep .mat-form-field-wrapper { font-size: large; position: relative; background-color: var(--ns-primary); - width: 10rem; + width: 13rem; height: 2.3rem; border-color: var(--ns-primary); border-style: solid; -- cgit v1.2.3 From e719412e42581646a04cbd0ffa443be52d7740cf Mon Sep 17 00:00:00 2001 From: Nevena Bojovic Date: Wed, 18 May 2022 23:36:44 +0200 Subject: Grafici --- backend/api/api/appsettings.json | 8 ++-- .../_charts/pie-chart/pie-chart.component.ts | 43 +++++++++++++++------- .../column-table/column-table.component.ts | 11 ++++-- 3 files changed, 41 insertions(+), 21 deletions(-) (limited to 'frontend/src/app/_elements/column-table') diff --git a/backend/api/api/appsettings.json b/backend/api/api/appsettings.json index ec8f7dd8..44d63ac3 100644 --- a/backend/api/api/appsettings.json +++ b/backend/api/api/appsettings.json @@ -16,22 +16,22 @@ "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", + "ConnectionString": "mongodb+srv://si_user:si_user@sidatabase.twtfm.mongodb.net/myFirstDatabase?retryWrites=true&w=majority", "DatabaseName": "si_db", "CollectionName": "users", "DatasetCollectionName": "Dataset", "ModelCollectionName": "Model", "PredictorCollectionName": "Predictor", "FilesCollectionName": "Files", - "ExperimentCollectionName": "Experiment" */ + "ExperimentCollectionName": "Experiment" } } \ 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 c2bd3262..cba5252a 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 @@ -14,16 +14,16 @@ export class PieChartComponent implements AfterViewInit { @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], - }] - - } - }; + //console.log(this.uniqueValues, this.uniqueValuesPercent); + this.pieChartData.datasets = [{ + label: "%", + backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850", "#000000"], + data: uniqueValuesPercent, + }]; + this.pieChartData.labels = uniqueValues + console.log(this.uniqueValues, this.uniqueValuesPercent); + this.myChart?.update() + }; @ViewChild('piechart') chartRef!: ElementRef; constructor() { } @@ -33,13 +33,30 @@ export class PieChartComponent implements AfterViewInit { label: "Population (millions)", backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"], data: [2478,5267,734,784,433] - }] + }], labels : [""] } + myChart?: Chart; ngAfterViewInit(): void { - const myChart = new Chart(this.chartRef.nativeElement, { + let rem = 100; + const percents : number[] = [] + this.uniqueValuesPercent?.forEach(percent => { + rem-=percent*100; + percents.push(percent*100) + + }) + const data = { + datasets: [{ + label: "%", + backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850", "#000000"], + data: [...percents, rem] + }], labels : [...this.uniqueValues!,"Ostalo"] + } + + const myChart = new Chart(this.chartRef.nativeElement, { type: 'pie', - data: this.pieChartData, + data: data + , options: { /*title: { display: true, 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 9fdb6936..ad78feaf 100644 --- a/frontend/src/app/_elements/column-table/column-table.component.ts +++ b/frontend/src/app/_elements/column-table/column-table.component.ts @@ -83,8 +83,8 @@ export class ColumnTableComponent implements AfterViewInit { let i = 0; this.boxplotComp.changes.subscribe(() => { const bps = this.boxplotComp.toArray(); - this.dataset?.columnInfo.forEach(colInfo => { - if (this.experiment.columnTypes[i] == ColumnType.numerical) { + this.dataset?.columnInfo.forEach((colInfo, index) => { + if (this.experiment.columnTypes[index] == ColumnType.numerical) { bps[i].updateChart(colInfo!.min, colInfo.max, colInfo.q1, colInfo.q3, colInfo.median); i++; } @@ -96,8 +96,11 @@ export class ColumnTableComponent implements AfterViewInit { //min: number, max: number, q1: number, q3: number, median: number let i = 0; const pieChart = this.piechartComp.toArray(); - this.dataset?.columnInfo.forEach(colInfo => { - if (this.experiment.columnTypes[i] == ColumnType.categorical) { + console.log(pieChart) + this.dataset?.columnInfo.forEach((colInfo, index) => { + console.log(i) + if (this.experiment.columnTypes[index] == ColumnType.categorical) { + console.log("prosao IF") pieChart[i].updatePieChart(colInfo!.uniqueValues, colInfo.uniqueValuesPercent); i++; } -- cgit v1.2.3