Promenio boxplot i piechart ViewChildren na QueryList umesto niza.

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<BoxPlotComponent>;
+  @ViewChildren(PieChartComponent) piechartComp!: QueryList<PieChartComponent>;
   @Input() dataset?: Dataset;
   @Input() experiment!: Experiment;
   @Output() okPressed: EventEmitter<string> = 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();
   }