From c02a7f0793a7b290029ec81859cdea5724a3f7dc Mon Sep 17 00:00:00 2001 From: Nevena Bojovic Date: Tue, 10 May 2022 23:14:00 +0200 Subject: Korekcija 2. --- .../_charts/box-plot/box-plot.component.ts | 25 +++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) (limited to 'frontend/src/app/_elements/_charts/box-plot') 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 -- 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(-) (limited to 'frontend/src/app/_elements/_charts/box-plot') 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 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(-) (limited to 'frontend/src/app/_elements/_charts/box-plot') 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