Grafici

2 files changed, 37 insertions, 17 deletions

diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
index c2bd3262..cba5252a 100644
--- a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
+++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
@@ -14,16 +14,16 @@ export class PieChartComponent implements AfterViewInit {
   @Input()uniqueValuesPercent?: number[] = [];
 
   updatePieChart(uniqueValues: string[], uniqueValuesPercent: number[]){
-    console.log(this.uniqueValues, this.uniqueValuesPercent);
-    const newPieChartData = {
-      datasets: [{
-        label: "Population (millions)",
-        backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
-        data: [2478,5267,734,784,433],
-      }]
-        
-    }
-  };
+    //console.log(this.uniqueValues, this.uniqueValuesPercent);
+    this.pieChartData.datasets =  [{
+        label: "%",
+        backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850", "#000000"],
+        data: uniqueValuesPercent,
+      }];
+      this.pieChartData.labels = uniqueValues
+      console.log(this.uniqueValues, this.uniqueValuesPercent);
+      this.myChart?.update() 
+    };
   
   @ViewChild('piechart') chartRef!: ElementRef;
   constructor() { }
@@ -33,13 +33,30 @@ export class PieChartComponent implements AfterViewInit {
       label: "Population (millions)",
       backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
       data: [2478,5267,734,784,433]
-    }]
+    }], labels : [""]
 }
 
+  myChart?: Chart;
   ngAfterViewInit(): void {
-  const myChart = new Chart(this.chartRef.nativeElement, {
+    let rem = 100;
+    const percents : number[] = []
+    this.uniqueValuesPercent?.forEach(percent => {
+      rem-=percent*100;
+      percents.push(percent*100)
+      
+    })
+    const data = {
+      datasets: [{
+        label: "%",
+        backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850", "#000000"],
+        data: [...percents, rem]
+      }], labels : [...this.uniqueValues!,"Ostalo"]
+    }
+    
+    const myChart = new Chart(this.chartRef.nativeElement, {
     type: 'pie',
-    data: this.pieChartData,
+    data: data     
+  ,
     options: {
       /*title: {
         display: true,
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 9fdb6936..ad78feaf 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.ts
+++ b/frontend/src/app/_elements/column-table/column-table.component.ts
@@ -83,8 +83,8 @@ export class ColumnTableComponent implements AfterViewInit {
     let i = 0;
     this.boxplotComp.changes.subscribe(() => {
       const bps = this.boxplotComp.toArray();
-      this.dataset?.columnInfo.forEach(colInfo => {
-        if (this.experiment.columnTypes[i] == ColumnType.numerical) {
+      this.dataset?.columnInfo.forEach((colInfo, index) => {
+        if (this.experiment.columnTypes[index] == ColumnType.numerical) {
           bps[i].updateChart(colInfo!.min, colInfo.max, colInfo.q1, colInfo.q3, colInfo.median);
           i++;
         }
@@ -96,8 +96,11 @@ export class ColumnTableComponent implements AfterViewInit {
     //min: number, max: number, q1: number, q3: number, median: number
     let i = 0;
     const pieChart = this.piechartComp.toArray();
-    this.dataset?.columnInfo.forEach(colInfo => {
-      if (this.experiment.columnTypes[i] == ColumnType.categorical) {
+    console.log(pieChart)
+    this.dataset?.columnInfo.forEach((colInfo, index) => {
+      console.log(i)
+      if (this.experiment.columnTypes[index] == ColumnType.categorical) {
+        console.log("prosao IF")
         pieChart[i].updatePieChart(colInfo!.uniqueValues, colInfo.uniqueValuesPercent);
         i++;
       }