Promenio boxplot i piechart ViewChildren na QueryList umesto niza.

1 files changed, 51 insertions, 121 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;
 }