From 8e1c8a20a1c098188245552abb2629135c807558 Mon Sep 17 00:00:00 2001
From: Ognjen Cirkovic <ciraboxkg@gmail.com>
Date: Wed, 11 May 2022 22:36:22 +0200
Subject: Promenjen stil i dizajn. Dodat naziv u slucaju da je novi
 eksperiment.

---
 .../app/_pages/experiment/experiment.component.css | 10 ++++++++-
 .../_pages/experiment/experiment.component.html    | 26 ++++++++++++++--------
 2 files changed, 26 insertions(+), 10 deletions(-)

(limited to 'frontend/src/app/_pages/experiment')

diff --git a/frontend/src/app/_pages/experiment/experiment.component.css b/frontend/src/app/_pages/experiment/experiment.component.css
index a709c98e..4c063f87 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.css
+++ b/frontend/src/app/_pages/experiment/experiment.component.css
@@ -56,4 +56,12 @@ mat-stepper {
 .ekspName{
     font-weight: bold;
     font-size: large;
-}
\ No newline at end of file
+}
+
+
+.addedElement{
+    color:var(--ns-accent);
+}
+.text-overflow {
+    overflow-wrap: break-word;
+}
diff --git a/frontend/src/app/_pages/experiment/experiment.component.html b/frontend/src/app/_pages/experiment/experiment.component.html
index edae1fc2..a2ede838 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.html
+++ b/frontend/src/app/_pages/experiment/experiment.component.html
@@ -1,37 +1,45 @@
 <div class="container-fluid p-0 text-offwhite holder" style="height: calc(100vh - 64px); text-align: center;">
     <div class="d-flex flex-colum align-items-center sidenav">
         <div>
-        <div class="ekspName">Eskperiment:{{experiment.name}}</div>
+        <div class="ekspName " style="width: 250px;">
+            <div class="text-overflow" *ngIf="experiment.name=='exp1'" style="width: 250px;">
+                Novi Eksperiment
+            </div>
+            <div class="text-overflow" *ngIf="experiment.name!='exp1'" style="width: 250px;">
+                {{experiment.name}}
+            </div>
+
+        </div>
         <mat-stepper orientation="vertical" (selectionChange)="changePage($event)">
             <mat-step>
                 <!--editable="false"-->
                 <ng-template matStepLabel>
                     <span class="label" *ngIf="dataset==undefined">Izvor podataka</span>
-                    <span class="label" *ngIf="dataset!=undefined">Izvor podataka:{{dataset.name}}</span>
+                    <span class="label addedElement" *ngIf="dataset!=undefined">{{dataset.name}}</span>
                 </ng-template>
                 <ng-template matStepContent>
-                    <p>Izaberite vas izvor podataka</p>
+                    <p class="text-left">Izaberite vas izvor podataka</p>
                 </ng-template>
             </mat-step>
             <mat-step>
-                <ng-template matStepLabel> 
-                    <span class="label" *ngIf="experiment.name!='exp1'">Predvideti:{{experiment.outputColumn}}</span>
+                <ng-template matStepLabel>
+                    <span class="label addedElement" *ngIf="experiment.name!='exp1'">Predvideti:{{experiment.outputColumn}}</span>
                     <span class="label" *ngIf="experiment.name=='exp1'">Odabir kolona</span>
                 </ng-template>
                 <ng-template matStepContent>
-                    <p>Pripremite podatke i izaberite izlazne kolone</p>
+                    <p class="text-left">Pripremite podatke i izaberite izlazne kolone</p>
                 </ng-template>
             </mat-step>
             <mat-step>
                 <ng-template matStepLabel>
-                    <span class="label" *ngIf="modelToTrain!=undefined">Model:{{modelToTrain.name}}</span>
+                    <span class="label addedElement" *ngIf="modelToTrain!=undefined">{{modelToTrain.name}}</span>
                     <span class="label" *ngIf="modelToTrain==undefined">Treniranje</span>
                 </ng-template>
-                <p>Odaberite parametre i trenirajte model</p>
+                <p class="text-left">Odaberite parametre i trenirajte model</p>
             </mat-step>
             <mat-step>
                 <ng-template matStepLabel><span class="label">Pregled rezultata treniranja</span></ng-template>
-                <p>Pregledajte tok treniranja i grafički prikaz rezultata</p>
+                <p class="text-left">Pregledajte tok treniranja i grafički prikaz rezultata</p>
             </mat-step>
         </mat-stepper>
         </div>
-- 
cgit v1.2.3


From fc273e5c9b5b6c9b845b6dbac093873f56e17495 Mon Sep 17 00:00:00 2001
From: Nevena Bojovic <nenabojov@gmail.com>
Date: Wed, 11 May 2022 22:55:17 +0200
Subject: Pie Chart - korekcija.

---
 .../_charts/pie-chart/pie-chart.component.ts       | 39 ++++++++++++++--------
 .../column-table/column-table.component.ts         | 17 ++++++++--
 .../app/_pages/experiment/experiment.component.ts  |  1 +
 3 files changed, 40 insertions(+), 17 deletions(-)

(limited to 'frontend/src/app/_pages/experiment')

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 932ed963..c2bd3262 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
@@ -12,21 +12,34 @@ export class PieChartComponent implements AfterViewInit {
   @Input()height?: number;
   @Input()uniqueValues?: string[] = [];
   @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],
+      }]
+        
+    }
+  };
   
   @ViewChild('piechart') chartRef!: ElementRef;
   constructor() { }
 
+  pieChartData = {
+    datasets: [{
+      label: "Population (millions)",
+      backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
+      data: [2478,5267,734,784,433]
+    }]
+}
+
   ngAfterViewInit(): void {
   const myChart = new Chart(this.chartRef.nativeElement, {
     type: 'pie',
-    data: {
-      labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
-      datasets: [{
-        label: "Population (millions)",
-        backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
-        data: [2478,5267,734,784,433],
-      }]
-    },
+    data: this.pieChartData,
     options: {
       /*title: {
         display: true,
@@ -38,11 +51,9 @@ export class PieChartComponent implements AfterViewInit {
                 },
              },
              layout: {
-              padding: 15}
+              padding: 15
+            }
     }
-});
-
-  }
+  });}
 
-
-}
+}
\ No newline at end of file
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..4150a704 100644
--- a/frontend/src/app/_elements/column-table/column-table.component.ts
+++ b/frontend/src/app/_elements/column-table/column-table.component.ts
@@ -58,9 +58,22 @@ export class ColumnTableComponent implements AfterViewInit {
                                   });
   }
 
+  updatePieChart(){
+    //min: number, max: number, q1: number, q3: number, median: number
+    let i=0;
+    this.dataset?.columnInfo.forEach(colInfo =>
+                                  { if (this.experiment.columnTypes[i] == ColumnType.categorical)
+                                    {
+                                      this.piechartComp[i].updatePieChart(colInfo!.uniqueValues, colInfo.uniqueValuesPercent);
+                                      i++;
+                                    } 
+                                  });
+  }
+
   loadDataset(dataset: Dataset) {
     this.dataset = dataset;
     this.updateCharts();
+    this.updatePieChart();
     this.setColumnTypeInitial();
 
     this.dataset.columnInfo.forEach(column => {
@@ -384,7 +397,5 @@ export class Tab {
     public value: Table
   ) { }
 }
-function BoxplotComponent(BoxplotComponent: any) {
-  throw new Error('Function not implemented.');
-}
+
 
diff --git a/frontend/src/app/_pages/experiment/experiment.component.ts b/frontend/src/app/_pages/experiment/experiment.component.ts
index 97029565..abf4b697 100644
--- a/frontend/src/app/_pages/experiment/experiment.component.ts
+++ b/frontend/src/app/_pages/experiment/experiment.component.ts
@@ -157,6 +157,7 @@ export class ExperimentComponent implements AfterViewInit {
     this.dataset = d;
 
     this.columnTable.loadDataset(this.dataset);
+    
   }
 
   modelToTrain?: Model;
-- 
cgit v1.2.3