Merge branch 'redesign' of http://gitlab.pmf.kg.ac.rs/igrannonica/neuronstellar into Redesign

2 files changed, 72 insertions, 33 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 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) {