1 files changed, 51 insertions, 90 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..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,34 +16,20 @@ 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]*/
-      ]}]
-    };
-    Object.assign(this.boxplotData, newBoxPlotData);
+  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();
+    }
   };
 
   @ViewChild('boxplot') chartRef!: ElementRef;
@@ -53,8 +39,8 @@ export class BoxPlotComponent implements AfterViewInit {
 
   boxplotData = {
     // define label tree
-    labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/],
-      datasets: [{
+    //labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/],
+    datasets: [{
       label: 'Dataset 1',
       backgroundColor: '#0063AB',
       borderColor: '#dfd7d7',
@@ -64,68 +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: {
-      /*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)"
-                  }
-              }
+    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;
 }