From 0122486768e41e482871f5a720623ca005fa54d7 Mon Sep 17 00:00:00 2001
From: Nevena Bojovic <nenabojov@gmail.com>
Date: Mon, 18 Apr 2022 22:32:20 +0200
Subject: Line chart - nije konacno.

---
 frontend/src/app/app.module.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'frontend/src/app/app.module.ts')

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index c4f89ad8..948e9a2b 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -48,6 +48,7 @@ import { TrainingComponent } from './training/training.component';
 import { ItemExperimentComponent } from './_elements/item-experiment/item-experiment.component';
 import { YesNoDialogComponent } from './_modals/yes-no-dialog/yes-no-dialog.component';
 import { Configuration } from './configuration.service';
+import { PointLinechartComponent } from './point-linechart/point-linechart.component';
 
 export function initializeApp(appConfig: Configuration) {
   return () => appConfig.load();
@@ -87,7 +88,8 @@ export function initializeApp(appConfig: Configuration) {
     GraphComponent,
     TrainingComponent,
     ItemExperimentComponent,
-    YesNoDialogComponent
+    YesNoDialogComponent,
+    PointLinechartComponent
   ],
   imports: [
     BrowserModule,
-- 
cgit v1.2.3


From 9c0b48ed66e363928e8970f9b328c0bb3eee6c2d Mon Sep 17 00:00:00 2001
From: TAMARA JERINIC <tamara.jerinic@gmail.com>
Date: Tue, 19 Apr 2022 17:57:17 +0200
Subject: Dodate su komponente za grafik.

---
 backend/microservice/api/newmlservice.py           | 22 +++++++--
 frontend/package.json                              |  3 +-
 .../_elements/line-chart/line-chart.component.css  |  0
 .../_elements/line-chart/line-chart.component.html |  9 ++++
 .../line-chart/line-chart.component.spec.ts        | 25 ++++++++++
 .../_elements/line-chart/line-chart.component.ts   | 57 ++++++++++++++++++++++
 frontend/src/app/app.module.ts                     |  4 +-
 7 files changed, 114 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/app/_elements/line-chart/line-chart.component.css
 create mode 100644 frontend/src/app/_elements/line-chart/line-chart.component.html
 create mode 100644 frontend/src/app/_elements/line-chart/line-chart.component.spec.ts
 create mode 100644 frontend/src/app/_elements/line-chart/line-chart.component.ts

(limited to 'frontend/src/app/app.module.ts')

diff --git a/backend/microservice/api/newmlservice.py b/backend/microservice/api/newmlservice.py
index 604e4d3c..219f8a20 100644
--- a/backend/microservice/api/newmlservice.py
+++ b/backend/microservice/api/newmlservice.py
@@ -155,7 +155,19 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback):
             data.pop(col)
     #
     ### Enkodiranje
+<<<<<<< HEAD
     encodings=paramsExperiment["encodings"]
+=======
+
+    from sklearn.preprocessing import LabelEncoder
+    kategorijskekolone=data.select_dtypes(include=['object']).columns
+    encoder=LabelEncoder()
+    for kolona in data.columns:
+        if(kolona in kategorijskekolone):
+            data[kolona]=encoder.fit_transform(data[kolona])
+    '''
+    encoding=paramsExperiment["encoding"]
+>>>>>>> 7d57bb9 (Dodate su komponente za grafik.)
     datafront=dataset.copy()
     svekolone=datafront.columns
     kategorijskekolone=datafront.select_dtypes(include=['object']).columns
@@ -207,6 +219,8 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback):
                         category_columns.append(col)
                 encoder=ce.BaseNEncoder(cols=category_columns, return_df=True, base=5)
                 encoder.fit_transform(data)
+
+    '''
     #
     # Input - output
     #
@@ -301,7 +315,7 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback):
 
         
 
-        classifier.compile(loss =paramsModel["lossFunction"] , optimizer = paramsModel['optimizer'] , metrics =paramsModel['metrics'])
+        classifier.compile(loss =paramsModel["lossFunction"] , optimizer = paramsModel['optimizer'] , metrics =['accuracy','mae','mse'])
 
         history=classifier.fit(x_train, y_train, epochs = paramsModel['epochs'],batch_size=paramsModel['batchSize'],callbacks=callback(x_test, y_test,paramsModel['_id']))
      
@@ -333,7 +347,7 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback):
             classifier.add(tf.keras.layers.Dense(units=paramsModel['hiddenLayerNeurons'], activation=paramsModel['hiddenLayerActivationFunctions'][i+1]))#i-ti skriveni sloj
         classifier.add(tf.keras.layers.Dense(units=1, activation=paramsModel['outputLayerActivationFunction']))#izlazni sloj
 
-        classifier.compile(loss =paramsModel["lossFunction"] , optimizer = paramsModel['optimizer'] , metrics =paramsModel['metrics'])
+        classifier.compile(loss =paramsModel["lossFunction"] , optimizer = paramsModel['optimizer'] , metrics =['accuracy','mae','mse'])
 
         history=classifier.fit(x_train, y_train, epochs = paramsModel['epochs'],batch_size=paramsModel['batchSize'],callbacks=callback(x_test, y_test,paramsModel['_id']))
         hist=history.history
@@ -359,7 +373,7 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback):
             classifier.add(tf.keras.layers.Dense(units=paramsModel['hiddenLayerNeurons'], activation=paramsModel['hiddenLayerActivationFunctions'][i+1]))#i-ti skriveni sloj
         classifier.add(tf.keras.layers.Dense(units=1))
 
-        classifier.compile(loss =paramsModel["lossFunction"] , optimizer = paramsModel['optimizer'] , metrics =paramsModel['metrics'])
+        classifier.compile(loss =paramsModel["lossFunction"] , optimizer = paramsModel['optimizer'] , metrics =['accuracy','mae','mse'])
 
         history=classifier.fit(x_train, y_train, epochs = paramsModel['epochs'],batch_size=paramsModel['batchSize'],callbacks=callback(x_test, y_test,paramsModel['_id']))
         hist=history.history
@@ -529,7 +543,7 @@ def manageH5(dataset,params,h5model):
     h5model.summary()
     #ann_viz(h5model, title="My neural network")
 
-    h5model.compile(loss=params['lossFunction'], optimizer=params['optimizer'], metrics=params['metrics'])
+    h5model.compile(loss=params['lossFunction'], optimizer=params['optimizer'], metrics=params['accuracy',''])
 
     history=h5model.fit(x2, y2, epochs = params['epochs'],batch_size=params['batchSize'])
     
diff --git a/frontend/package.json b/frontend/package.json
index c02a1fb0..7df35a97 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -29,13 +29,14 @@
     "@popperjs/core": "^2.10.2",
     "bootstrap": "^5.1.3",
     "chart.js": "^3.7.1",
+    "chartjs-plugin-datalabels": "^0.7.0",
     "csv-parser": "^3.0.0",
     "d3-graphviz": "^2.6.1",
     "jquery": "^3.6.0",
     "mdb-angular-ui-kit": "^2.0.0",
     "ng-multiselect-dropdown": "^0.3.8",
     "ng-uikit-pro-standard": "^1.0.0",
-    "ng2-charts": "^3.0.8",
+    "ng2-charts": "^3.0.9",
     "ng2-search-filter": "^0.5.1",
     "ngx-cookie-service": "^13.1.2",
     "popper.js": "^1.16.1",
diff --git a/frontend/src/app/_elements/line-chart/line-chart.component.css b/frontend/src/app/_elements/line-chart/line-chart.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/app/_elements/line-chart/line-chart.component.html b/frontend/src/app/_elements/line-chart/line-chart.component.html
new file mode 100644
index 00000000..8607aac5
--- /dev/null
+++ b/frontend/src/app/_elements/line-chart/line-chart.component.html
@@ -0,0 +1,9 @@
+<div class="chart-wrapper">
+    <canvas baseChart 
+        [datasets]="lineChartData" 
+        [labels]="lineChartLabels" 
+        [options]="lineChartOptions"
+        [legend]="lineChartLegend"  
+        [plugins]="lineChartPlugins">
+    </canvas>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/line-chart/line-chart.component.spec.ts b/frontend/src/app/_elements/line-chart/line-chart.component.spec.ts
new file mode 100644
index 00000000..0c5e7ef5
--- /dev/null
+++ b/frontend/src/app/_elements/line-chart/line-chart.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LineChartComponent } from './line-chart.component';
+
+describe('LineChartComponent', () => {
+  let component: LineChartComponent;
+  let fixture: ComponentFixture<LineChartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ LineChartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LineChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/line-chart/line-chart.component.ts b/frontend/src/app/_elements/line-chart/line-chart.component.ts
new file mode 100644
index 00000000..7a06ecf5
--- /dev/null
+++ b/frontend/src/app/_elements/line-chart/line-chart.component.ts
@@ -0,0 +1,57 @@
+import { Component, OnInit } from '@angular/core';
+import { ChartOptions } from 'chart.js';
+import { BaseChartDirective } from 'ng2-charts';
+
+@Component({
+  selector: 'app-line-chart',
+  templateUrl: './line-chart.component.html',
+  styleUrls: ['./line-chart.component.css']
+})
+export class LineChartComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+  lineChartData:Array<any> = [
+    {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
+    {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
+    {data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'}
+  ];
+  lineChartLabels: BaseChartDirective["labels"] = ['January', 'February', 'March', 'April', 'May', 'June'];
+  lineChartOptions = {
+    responsive: true,
+  };
+  lineChartColors:Array<any> = [
+    { // grey
+      backgroundColor: 'rgba(148,159,177,0.2)',
+      borderColor: 'rgba(148,159,177,1)',
+      pointBackgroundColor: 'rgba(148,159,177,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
+    },
+    { // dark grey
+      backgroundColor: 'rgba(77,83,96,0.2)',
+      borderColor: 'rgba(77,83,96,1)',
+      pointBackgroundColor: 'rgba(77,83,96,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: 'rgba(77,83,96,1)'
+    },
+    { // grey
+      backgroundColor: 'rgba(148,159,177,0.2)',
+      borderColor: 'rgba(148,159,177,1)',
+      pointBackgroundColor: 'rgba(148,159,177,1)',
+      pointBorderColor: '#fff',
+      pointHoverBackgroundColor: '#fff',
+      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
+    }
+  ];
+  lineChartLegend = true;
+  lineChartPlugins = [];
+  lineChartType = 'line';
+  
+}
+
+
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 948e9a2b..6a95bfe6 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -50,6 +50,7 @@ import { YesNoDialogComponent } from './_modals/yes-no-dialog/yes-no-dialog.comp
 import { Configuration } from './configuration.service';
 import { PointLinechartComponent } from './point-linechart/point-linechart.component';
 
+import { LineChartComponent } from './_elements/line-chart/line-chart.component';
 export function initializeApp(appConfig: Configuration) {
   return () => appConfig.load();
 }
@@ -89,7 +90,8 @@ export function initializeApp(appConfig: Configuration) {
     TrainingComponent,
     ItemExperimentComponent,
     YesNoDialogComponent,
-    PointLinechartComponent
+    PointLinechartComponent,
+    LineChartComponent
   ],
   imports: [
     BrowserModule,
-- 
cgit v1.2.3


From 5d5aef8ad980934b98c48391bf53fb41e2481b5d Mon Sep 17 00:00:00 2001
From: Nevena Bojovic <nenabojov@gmail.com>
Date: Tue, 19 Apr 2022 20:42:14 +0200
Subject: Mixed chart.

---
 frontend/src/app/app.module.ts                     |  6 ++-
 frontend/src/app/grafici/grafici.component.css     |  0
 frontend/src/app/grafici/grafici.component.html    |  1 +
 frontend/src/app/grafici/grafici.component.spec.ts | 25 ++++++++++
 frontend/src/app/grafici/grafici.component.ts      | 15 ++++++
 .../src/app/mixed-chart/mixed-chart.component.css  |  0
 .../src/app/mixed-chart/mixed-chart.component.html |  2 +
 .../app/mixed-chart/mixed-chart.component.spec.ts  | 25 ++++++++++
 .../src/app/mixed-chart/mixed-chart.component.ts   | 56 ++++++++++++++++++++++
 9 files changed, 129 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/app/grafici/grafici.component.css
 create mode 100644 frontend/src/app/grafici/grafici.component.html
 create mode 100644 frontend/src/app/grafici/grafici.component.spec.ts
 create mode 100644 frontend/src/app/grafici/grafici.component.ts
 create mode 100644 frontend/src/app/mixed-chart/mixed-chart.component.css
 create mode 100644 frontend/src/app/mixed-chart/mixed-chart.component.html
 create mode 100644 frontend/src/app/mixed-chart/mixed-chart.component.spec.ts
 create mode 100644 frontend/src/app/mixed-chart/mixed-chart.component.ts

(limited to 'frontend/src/app/app.module.ts')

diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 948e9a2b..cd891801 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -49,6 +49,8 @@ import { ItemExperimentComponent } from './_elements/item-experiment/item-experi
 import { YesNoDialogComponent } from './_modals/yes-no-dialog/yes-no-dialog.component';
 import { Configuration } from './configuration.service';
 import { PointLinechartComponent } from './point-linechart/point-linechart.component';
+import { GraficiComponent } from './grafici/grafici.component';
+import { MixedChartComponent } from './mixed-chart/mixed-chart.component';
 
 export function initializeApp(appConfig: Configuration) {
   return () => appConfig.load();
@@ -89,7 +91,9 @@ export function initializeApp(appConfig: Configuration) {
     TrainingComponent,
     ItemExperimentComponent,
     YesNoDialogComponent,
-    PointLinechartComponent
+    PointLinechartComponent,
+    GraficiComponent,
+    MixedChartComponent
   ],
   imports: [
     BrowserModule,
diff --git a/frontend/src/app/grafici/grafici.component.css b/frontend/src/app/grafici/grafici.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/app/grafici/grafici.component.html b/frontend/src/app/grafici/grafici.component.html
new file mode 100644
index 00000000..5f987238
--- /dev/null
+++ b/frontend/src/app/grafici/grafici.component.html
@@ -0,0 +1 @@
+<p>grafici works!</p>
diff --git a/frontend/src/app/grafici/grafici.component.spec.ts b/frontend/src/app/grafici/grafici.component.spec.ts
new file mode 100644
index 00000000..9b5ba94d
--- /dev/null
+++ b/frontend/src/app/grafici/grafici.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GraficiComponent } from './grafici.component';
+
+describe('GraficiComponent', () => {
+  let component: GraficiComponent;
+  let fixture: ComponentFixture<GraficiComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GraficiComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GraficiComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/grafici/grafici.component.ts b/frontend/src/app/grafici/grafici.component.ts
new file mode 100644
index 00000000..749b35e2
--- /dev/null
+++ b/frontend/src/app/grafici/grafici.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-grafici',
+  templateUrl: './grafici.component.html',
+  styleUrls: ['./grafici.component.css']
+})
+export class GraficiComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/frontend/src/app/mixed-chart/mixed-chart.component.css b/frontend/src/app/mixed-chart/mixed-chart.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/app/mixed-chart/mixed-chart.component.html b/frontend/src/app/mixed-chart/mixed-chart.component.html
new file mode 100644
index 00000000..806ea9e8
--- /dev/null
+++ b/frontend/src/app/mixed-chart/mixed-chart.component.html
@@ -0,0 +1,2 @@
+<canvas #mixedchart width="800" height="450"></canvas>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
diff --git a/frontend/src/app/mixed-chart/mixed-chart.component.spec.ts b/frontend/src/app/mixed-chart/mixed-chart.component.spec.ts
new file mode 100644
index 00000000..361cd047
--- /dev/null
+++ b/frontend/src/app/mixed-chart/mixed-chart.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MixedChartComponent } from './mixed-chart.component';
+
+describe('MixedChartComponent', () => {
+  let component: MixedChartComponent;
+  let fixture: ComponentFixture<MixedChartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MixedChartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MixedChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/mixed-chart/mixed-chart.component.ts b/frontend/src/app/mixed-chart/mixed-chart.component.ts
new file mode 100644
index 00000000..2524ee36
--- /dev/null
+++ b/frontend/src/app/mixed-chart/mixed-chart.component.ts
@@ -0,0 +1,56 @@
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import {Chart} from 'node_modules/chart.js';
+
+@Component({
+  selector: 'app-mixed-chart',
+  templateUrl: './mixed-chart.component.html',
+  styleUrls: ['./mixed-chart.component.css']
+})
+export class MixedChartComponent implements AfterViewInit {
+
+  @ViewChild('mixedchart') chartRef!: ElementRef;
+  constructor() { }
+
+  ngAfterViewInit(): void {
+    const myChart = new Chart(this.chartRef.nativeElement, {
+      type: 'bar',
+      data: {
+        labels: ["1900", "1950", "1999", "2050"],
+        datasets: [{
+            label: "Europe",
+            type: "line",
+            borderColor: "#8e5ea2",
+            data: [408,547,675,734],
+            fill: false
+          }, {
+            label: "Africa",
+            type: "line",
+            borderColor: "#3e95cd",
+            data: [133,221,783,2478],
+            fill: false
+          }, {
+            label: "Europe",
+            type: "bar",
+            backgroundColor: "rgba(0,0,0,0.2)",
+            data: [408,547,675,734],
+          }, {
+            label: "Africa",
+            type: "bar",
+            backgroundColor: "rgba(0,0,0,0.2)",
+            //backgroundColorHover: "#3e95cd",
+            data: [133,221,783,2478]
+          }
+        ]
+      },
+      /*options: {
+        title: {
+          display: true,
+          text: 'Population growth (millions): Europe & Africa'
+        },
+        legend: { display: false }
+      }*/
+
+    });
+  }
+
+}
-- 
cgit v1.2.3


From 2c68a5c7926bfb62902ef9ad4b705d675c2293f7 Mon Sep 17 00:00:00 2001
From: TAMARA JERINIC <tamara.jerinic@gmail.com>
Date: Tue, 19 Apr 2022 21:27:47 +0200
Subject: Dodate ispravljena komponenta za kreiranje grafika i dodata
 komponenta za njegov prikaz.

---
 frontend/package-lock.json                         | 65 ++++++++++++++++----
 frontend/package.json                              |  2 +
 .../_elements/line-chart/line-chart.component.html |  8 +--
 .../_elements/line-chart/line-chart.component.ts   | 70 ++++++++--------------
 .../metric-view/metric-view.component.css          |  0
 .../metric-view/metric-view.component.html         |  5 ++
 .../metric-view/metric-view.component.spec.ts      | 25 ++++++++
 .../_elements/metric-view/metric-view.component.ts | 32 ++++++++++
 frontend/src/app/_pages/home/home.component.html   |  1 +
 frontend/src/app/app.module.ts                     |  9 ++-
 10 files changed, 152 insertions(+), 65 deletions(-)
 create mode 100644 frontend/src/app/_elements/metric-view/metric-view.component.css
 create mode 100644 frontend/src/app/_elements/metric-view/metric-view.component.html
 create mode 100644 frontend/src/app/_elements/metric-view/metric-view.component.spec.ts
 create mode 100644 frontend/src/app/_elements/metric-view/metric-view.component.ts

(limited to 'frontend/src/app/app.module.ts')

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 488653db..d44f86d1 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -25,14 +25,16 @@
         "@ng-bootstrap/ng-bootstrap": "^12.0.0",
         "@popperjs/core": "^2.10.2",
         "bootstrap": "^5.1.3",
+        "canvasjs": "^1.8.3",
         "chart.js": "^3.7.1",
+        "chartjs-plugin-datalabels": "^0.7.0",
         "csv-parser": "^3.0.0",
         "d3-graphviz": "^2.6.1",
         "jquery": "^3.6.0",
         "mdb-angular-ui-kit": "^2.0.0",
         "ng-multiselect-dropdown": "^0.3.8",
         "ng-uikit-pro-standard": "^1.0.0",
-        "ng2-charts": "^3.0.8",
+        "ng2-charts": "^3.0.9",
         "ng2-search-filter": "^0.5.1",
         "ngx-cookie-service": "^13.1.2",
         "popper.js": "^1.16.1",
@@ -45,6 +47,7 @@
         "@angular-devkit/build-angular": "~13.2.5",
         "@angular/cli": "~13.2.5",
         "@angular/compiler-cli": "~13.2.0",
+        "@types/canvasjs": "^1.9.7",
         "@types/crypto-js": "^4.1.1",
         "@types/d3-graphviz": "^2.6.7",
         "@types/jasmine": "~3.10.0",
@@ -2737,6 +2740,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/canvasjs": {
+      "version": "1.9.7",
+      "resolved": "https://registry.npmjs.org/@types/canvasjs/-/canvasjs-1.9.7.tgz",
+      "integrity": "sha512-/CfA3VtyTYVXDHvMy8F5hsvRUTiBX7TGe+nAHNONoJlNHbqakeIzxxt1MSNH619s8Oiu4CcFBMmJVg50El/0lw==",
+      "dev": true
+    },
     "node_modules/@types/component-emitter": {
       "version": "1.2.11",
       "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.11.tgz",
@@ -3420,9 +3429,9 @@
       }
     },
     "node_modules/async": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
-      "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+      "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
       "dev": true,
       "dependencies": {
         "lodash": "^4.17.14"
@@ -3883,6 +3892,11 @@
         "url": "https://opencollective.com/browserslist"
       }
     },
+    "node_modules/canvasjs": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/canvasjs/-/canvasjs-1.8.3.tgz",
+      "integrity": "sha512-60eUT0VjqRgYqdIQcOkXg0Zptfbl4HefA/O51YEf1m/P0uXvE3icI/1KPrXpY9aVxn8gG/BB8DzVoTGCcyBnYg=="
+    },
     "node_modules/chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -3907,6 +3921,14 @@
       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz",
       "integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA=="
     },
+    "node_modules/chartjs-plugin-datalabels": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-0.7.0.tgz",
+      "integrity": "sha512-PKVUX14nYhH0wcdCpgOoC39Gbzvn6cZ7O9n+bwc02yKD9FTnJ7/TSrBcfebmolFZp1Rcicr9xbT0a5HUbigS7g==",
+      "peerDependencies": {
+        "chart.js": ">= 2.7.0 < 3"
+      }
+    },
     "node_modules/chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -8213,9 +8235,9 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
     "node_modules/ng2-charts": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-3.0.8.tgz",
-      "integrity": "sha512-ELlpN0b/IJO4ka/P2sFBKeng3bV7XOQuh40f0J5hx9UveWPaSxOYQAOiGxV7BN2VSnKq6GRkjRvqTrcQPyJYww==",
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-3.0.9.tgz",
+      "integrity": "sha512-VKUd0lMhDb/IC4WGYH/CW29HlMibXGMK+Ik/T+M0uR98Ox+YEQUPsrqbroF/cWMxVf2XuTkFGaUn2fbqlDBSOQ==",
       "dependencies": {
         "lodash-es": "^4.17.15",
         "tslib": "^2.3.0"
@@ -13747,6 +13769,12 @@
         "@types/node": "*"
       }
     },
+    "@types/canvasjs": {
+      "version": "1.9.7",
+      "resolved": "https://registry.npmjs.org/@types/canvasjs/-/canvasjs-1.9.7.tgz",
+      "integrity": "sha512-/CfA3VtyTYVXDHvMy8F5hsvRUTiBX7TGe+nAHNONoJlNHbqakeIzxxt1MSNH619s8Oiu4CcFBMmJVg50El/0lw==",
+      "dev": true
+    },
     "@types/component-emitter": {
       "version": "1.2.11",
       "resolved": "https://registry.npmjs.org/@types/component-emitter/-/component-emitter-1.2.11.tgz",
@@ -14355,9 +14383,9 @@
       "dev": true
     },
     "async": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
-      "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+      "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
       "dev": true,
       "requires": {
         "lodash": "^4.17.14"
@@ -14699,6 +14727,11 @@
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001312.tgz",
       "integrity": "sha512-Wiz1Psk2MEK0pX3rUzWaunLTZzqS2JYZFzNKqAiJGiuxIjRPLgV6+VDPOg6lQOUxmDwhTlh198JsTTi8Hzw6aQ=="
     },
+    "canvasjs": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/canvasjs/-/canvasjs-1.8.3.tgz",
+      "integrity": "sha512-60eUT0VjqRgYqdIQcOkXg0Zptfbl4HefA/O51YEf1m/P0uXvE3icI/1KPrXpY9aVxn8gG/BB8DzVoTGCcyBnYg=="
+    },
     "chalk": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -14720,6 +14753,12 @@
       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz",
       "integrity": "sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA=="
     },
+    "chartjs-plugin-datalabels": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-0.7.0.tgz",
+      "integrity": "sha512-PKVUX14nYhH0wcdCpgOoC39Gbzvn6cZ7O9n+bwc02yKD9FTnJ7/TSrBcfebmolFZp1Rcicr9xbT0a5HUbigS7g==",
+      "requires": {}
+    },
     "chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -17885,9 +17924,9 @@
       }
     },
     "ng2-charts": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-3.0.8.tgz",
-      "integrity": "sha512-ELlpN0b/IJO4ka/P2sFBKeng3bV7XOQuh40f0J5hx9UveWPaSxOYQAOiGxV7BN2VSnKq6GRkjRvqTrcQPyJYww==",
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/ng2-charts/-/ng2-charts-3.0.9.tgz",
+      "integrity": "sha512-VKUd0lMhDb/IC4WGYH/CW29HlMibXGMK+Ik/T+M0uR98Ox+YEQUPsrqbroF/cWMxVf2XuTkFGaUn2fbqlDBSOQ==",
       "requires": {
         "lodash-es": "^4.17.15",
         "tslib": "^2.3.0"
diff --git a/frontend/package.json b/frontend/package.json
index 7df35a97..87b21e05 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -28,6 +28,7 @@
     "@ng-bootstrap/ng-bootstrap": "^12.0.0",
     "@popperjs/core": "^2.10.2",
     "bootstrap": "^5.1.3",
+    "canvasjs": "^1.8.3",
     "chart.js": "^3.7.1",
     "chartjs-plugin-datalabels": "^0.7.0",
     "csv-parser": "^3.0.0",
@@ -49,6 +50,7 @@
     "@angular-devkit/build-angular": "~13.2.5",
     "@angular/cli": "~13.2.5",
     "@angular/compiler-cli": "~13.2.0",
+    "@types/canvasjs": "^1.9.7",
     "@types/crypto-js": "^4.1.1",
     "@types/d3-graphviz": "^2.6.7",
     "@types/jasmine": "~3.10.0",
diff --git a/frontend/src/app/_elements/line-chart/line-chart.component.html b/frontend/src/app/_elements/line-chart/line-chart.component.html
index 8607aac5..c8f406f4 100644
--- a/frontend/src/app/_elements/line-chart/line-chart.component.html
+++ b/frontend/src/app/_elements/line-chart/line-chart.component.html
@@ -1,9 +1,5 @@
 <div class="chart-wrapper">
-    <canvas baseChart 
-        [datasets]="lineChartData" 
-        [labels]="lineChartLabels" 
-        [options]="lineChartOptions"
-        [legend]="lineChartLegend"  
-        [plugins]="lineChartPlugins">
+    <canvas  id="myChart">
+        
     </canvas>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/line-chart/line-chart.component.ts b/frontend/src/app/_elements/line-chart/line-chart.component.ts
index 7a06ecf5..68663861 100644
--- a/frontend/src/app/_elements/line-chart/line-chart.component.ts
+++ b/frontend/src/app/_elements/line-chart/line-chart.component.ts
@@ -1,57 +1,39 @@
-import { Component, OnInit } from '@angular/core';
-import { ChartOptions } from 'chart.js';
+import { Component, OnInit,Input } from '@angular/core';
 import { BaseChartDirective } from 'ng2-charts';
-
+import {Chart} from 'chart.js';
 @Component({
   selector: 'app-line-chart',
   templateUrl: './line-chart.component.html',
   styleUrls: ['./line-chart.component.css']
 })
-export class LineChartComponent implements OnInit {
 
+export class LineChartComponent implements OnInit {
+  @Input() dataAcc=[] ;
+  @Input() dataEpoch=[];
   constructor() { }
 
   ngOnInit(): void {
-  }
-  lineChartData:Array<any> = [
-    {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
-    {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
-    {data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'}
-  ];
-  lineChartLabels: BaseChartDirective["labels"] = ['January', 'February', 'March', 'April', 'May', 'June'];
-  lineChartOptions = {
-    responsive: true,
-  };
-  lineChartColors:Array<any> = [
-    { // grey
-      backgroundColor: 'rgba(148,159,177,0.2)',
-      borderColor: 'rgba(148,159,177,1)',
-      pointBackgroundColor: 'rgba(148,159,177,1)',
-      pointBorderColor: '#fff',
-      pointHoverBackgroundColor: '#fff',
-      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
+    var myChart=new Chart("myChart",
+      {
+        type: 'line',
+    data: {
+        labels:this.dataEpoch,
+        datasets: [{
+            label: 'Vrednost',
+            data: this.dataAcc,
+            borderWidth: 1
+        }]
     },
-    { // dark grey
-      backgroundColor: 'rgba(77,83,96,0.2)',
-      borderColor: 'rgba(77,83,96,1)',
-      pointBackgroundColor: 'rgba(77,83,96,1)',
-      pointBorderColor: '#fff',
-      pointHoverBackgroundColor: '#fff',
-      pointHoverBorderColor: 'rgba(77,83,96,1)'
-    },
-    { // grey
-      backgroundColor: 'rgba(148,159,177,0.2)',
-      borderColor: 'rgba(148,159,177,1)',
-      pointBackgroundColor: 'rgba(148,159,177,1)',
-      pointBorderColor: '#fff',
-      pointHoverBackgroundColor: '#fff',
-      pointHoverBorderColor: 'rgba(148,159,177,0.8)'
+    options: {
+        scales: {
+            y: {
+                beginAtZero: true
+            }
+        }
     }
-  ];
-  lineChartLegend = true;
-  lineChartPlugins = [];
-  lineChartType = 'line';
-  
+      }
+    );
+ 
+  }
 }
-
-
+ 
\ No newline at end of file
diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.css b/frontend/src/app/_elements/metric-view/metric-view.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.html b/frontend/src/app/_elements/metric-view/metric-view.component.html
new file mode 100644
index 00000000..7408547a
--- /dev/null
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.html
@@ -0,0 +1,5 @@
+<div>
+    <app-line-chart [data]="myAcc">
+        
+    </app-line-chart>
+</div>
diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.spec.ts b/frontend/src/app/_elements/metric-view/metric-view.component.spec.ts
new file mode 100644
index 00000000..c3ecc67f
--- /dev/null
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MetricViewComponent } from './metric-view.component';
+
+describe('MetricViewComponent', () => {
+  let component: MetricViewComponent;
+  let fixture: ComponentFixture<MetricViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MetricViewComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MetricViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.ts b/frontend/src/app/_elements/metric-view/metric-view.component.ts
new file mode 100644
index 00000000..76dd7d20
--- /dev/null
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.ts
@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import { SignalRService } from 'src/app/_services/signal-r.service';
+@Component({
+  selector: 'app-metric-view',
+  templateUrl: './metric-view.component.html',
+  styleUrls: ['./metric-view.component.css']
+})
+export class MetricViewComponent implements OnInit {
+  myAcc:[]=[];
+  myMae:[]=[];
+  myMse:[]=[];
+  myEpochs:[]=[];
+  constructor(private signalRService: SignalRService) { }
+
+  ngOnInit(): void {
+    if(this.signalRService.hubConnection)
+      {
+        this.signalRService.hubConnection.on("NotifyEpoch", (mName: string, mId: string, stat: string, totalEpochs: number, currentEpoch: number) => {
+        console.log(stat)
+        console.log(totalEpochs)
+        const data=JSON.parse(stat)
+        for (let key in data) 
+        {
+          let value = data[key];
+          console.log(value)
+        }
+      });
+      
+    }
+
+  }
+}
diff --git a/frontend/src/app/_pages/home/home.component.html b/frontend/src/app/_pages/home/home.component.html
index 08f95a69..f5e94d27 100644
--- a/frontend/src/app/_pages/home/home.component.html
+++ b/frontend/src/app/_pages/home/home.component.html
@@ -53,4 +53,5 @@
     <app-carousel [items]="publicPredictors" [type]="'Predictor'">
     </app-carousel>
     <h3><a routerLink="browse-predictors">Pogledaj sve javne trenirane modele...</a></h3>
+
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 22ad96da..41aec3b5 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -53,6 +53,7 @@ import { GraficiComponent } from './grafici/grafici.component';
 import { MixedChartComponent } from './mixed-chart/mixed-chart.component';
 
 import { LineChartComponent } from './_elements/line-chart/line-chart.component';
+import { MetricViewComponent } from './_elements/metric-view/metric-view.component';
 export function initializeApp(appConfig: Configuration) {
   return () => appConfig.load();
 }
@@ -91,11 +92,15 @@ export function initializeApp(appConfig: Configuration) {
     GraphComponent,
     TrainingComponent,
     ItemExperimentComponent,
-    YesNoDialogComponent,
+    YesNoDialogComponent, 
+    LineChartComponent,
     PointLinechartComponent,
     GraficiComponent,
     MixedChartComponent,
-    LineChartComponent
+    LineChartComponent,
+    MetricViewComponent,
+   
+    
   ],
   imports: [
     BrowserModule,
-- 
cgit v1.2.3


From b25af94d6df8854129e99f77638e4013a9c57086 Mon Sep 17 00:00:00 2001
From: Danijel Anđelković <adanijel99@gmail.com>
Date: Wed, 20 Apr 2022 00:04:19 +0200
Subject: Povezao metric view komponentu, chart, sa signalR tako da se
 iscrtavaju metrike modela kako se trenira. Ispravio neke bug-ove.

---
 backend/microservice/api/newmlservice.py           | 20 ++++-
 .../_elements/line-chart/line-chart.component.ts   | 87 +++++++++++++++++-----
 .../metric-view/metric-view.component.html         |  6 +-
 .../_elements/metric-view/metric-view.component.ts | 55 +++++++++-----
 .../_elements/model-load/model-load.component.html |  4 +-
 .../_elements/model-load/model-load.component.ts   | 15 +++-
 frontend/src/app/app.module.ts                     |  8 +-
 frontend/src/app/grafici/grafici.component.css     |  0
 frontend/src/app/grafici/grafici.component.html    |  1 -
 frontend/src/app/grafici/grafici.component.spec.ts | 25 -------
 frontend/src/app/grafici/grafici.component.ts      | 15 ----
 frontend/src/app/training/training.component.html  |  5 +-
 frontend/src/app/training/training.component.ts    | 35 ++++++---
 13 files changed, 165 insertions(+), 111 deletions(-)
 delete mode 100644 frontend/src/app/grafici/grafici.component.css
 delete mode 100644 frontend/src/app/grafici/grafici.component.html
 delete mode 100644 frontend/src/app/grafici/grafici.component.spec.ts
 delete mode 100644 frontend/src/app/grafici/grafici.component.ts

(limited to 'frontend/src/app/app.module.ts')

diff --git a/backend/microservice/api/newmlservice.py b/backend/microservice/api/newmlservice.py
index 9e09186f..6cbda69c 100644
--- a/backend/microservice/api/newmlservice.py
+++ b/backend/microservice/api/newmlservice.py
@@ -129,7 +129,7 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback):
     ###NULL
     null_value_options = paramsExperiment["nullValues"]
     null_values_replacers = paramsExperiment["nullValuesReplacers"]
-    
+
     if(null_value_options=='replace'):
         #print("replace null") #
         dict=null_values_replacers
@@ -138,8 +138,13 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback):
             col=replace['column']
             opt=replace['option']
             if(opt=='replace'):
-                replacevalue=replace['value']
-                data[col]=data[col].fillna(replacevalue)
+                val = replace['value']
+                if(data[col].dtype == 'int64'):
+                    val = np.int64(val)
+                elif(data[col].dtype == 'float64'):
+                    val = np.float64(val)
+                #elif(data[col].dtype == 'object'):
+                data[col]=data[col].fillna(val)
     elif(null_value_options=='delete_rows'):
         data=data.dropna()
     elif(null_value_options=='delete_columns'):
@@ -167,7 +172,7 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback):
     '''
     
     
-    encodings=paramsExperiment["encoding"]
+    encodings=paramsExperiment["encodings"]
     datafront=dataset.copy()
     svekolone=datafront.columns
     kategorijskekolone=datafront.select_dtypes(include=['object']).columns
@@ -232,6 +237,13 @@ def train(dataset, paramsModel,paramsExperiment,paramsDataset,callback):
     #print(x_columns)
     x = data[x_columns].values
     y = data[output_column].values
+    print('-----------------dfghfhgfhfg-------------------------------')
+    print(x)
+    print('-----------------dfghfhgfhfg-------------------------------')
+    print(y)
+    print('-----------------dfghfhgfhfg-------------------------------')
+    print(output_column)
+    print('-----------------dfghfhgfhfg-------------------------------')
 
     #
     # Podela na test i trening skupove
diff --git a/frontend/src/app/_elements/line-chart/line-chart.component.ts b/frontend/src/app/_elements/line-chart/line-chart.component.ts
index 68663861..1a8579a0 100644
--- a/frontend/src/app/_elements/line-chart/line-chart.component.ts
+++ b/frontend/src/app/_elements/line-chart/line-chart.component.ts
@@ -1,6 +1,6 @@
-import { Component, OnInit,Input } from '@angular/core';
-import { BaseChartDirective } from 'ng2-charts';
-import {Chart} from 'chart.js';
+import { Component, OnInit, Input } from '@angular/core';
+import { Chart } from 'chart.js';
+
 @Component({
   selector: 'app-line-chart',
   templateUrl: './line-chart.component.html',
@@ -8,32 +8,81 @@ import {Chart} from 'chart.js';
 })
 
 export class LineChartComponent implements OnInit {
-  @Input() dataAcc=[] ;
-  @Input() dataEpoch=[];
-  constructor() { }
+
+  dataAcc: number[] = [];
+  dataMAE: number[] = [];
+  dataMSE: number[] = [];
+  dataLOSS: number[] = [];
+
+  dataEpoch: number[] = [];
+
+  constructor() {
+    /*let i = 0;
+    setInterval(() => {
+      this.dataAcc.push(0.5);
+      this.dataEpoch.push(i);
+      i++;
+      this.update();
+    }, 200);*/
+  }
+
+  myChart!: Chart;
+
+  update(myEpochs: number[], myAcc: number[], myLoss: number[], myMae: number[], myMse: number[]) {
+    this.dataAcc.length = 0;
+    this.dataAcc.push(...myAcc);
+
+    this.dataEpoch.length = 0;
+    this.dataEpoch.push(...myEpochs);
+
+    this.dataMAE.length = 0;
+    this.dataMAE.push(...myMae);
+
+    this.dataLOSS.length = 0;
+    this.dataLOSS.push(...myLoss);
+
+    this.dataMSE.length = 0;
+    this.dataMSE.push(...myMse);
+
+    this.myChart.update();
+  }
 
   ngOnInit(): void {
-    var myChart=new Chart("myChart",
+    this.myChart = new Chart("myChart",
       {
         type: 'line',
-    data: {
-        labels:this.dataEpoch,
-        datasets: [{
-            label: 'Vrednost',
+        data: {
+          labels: this.dataEpoch,
+          datasets: [{
+            label: 'Accuracy',
             data: this.dataAcc,
             borderWidth: 1
-        }]
-    },
-    options: {
-        scales: {
+          },
+          {
+            label: 'Loss',
+            data: this.dataLOSS,
+            borderWidth: 1
+          },
+          {
+            label: 'MAE',
+            data: this.dataMAE,
+            borderWidth: 1
+          },
+          {
+            label: 'MSE',
+            data: this.dataMSE,
+            borderWidth: 1
+          }
+          ]
+        },
+        options: {
+          scales: {
             y: {
-                beginAtZero: true
+              beginAtZero: true
             }
+          }
         }
-    }
       }
     );
- 
   }
 }
- 
\ No newline at end of file
diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.html b/frontend/src/app/_elements/metric-view/metric-view.component.html
index 7408547a..e7a4c547 100644
--- a/frontend/src/app/_elements/metric-view/metric-view.component.html
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.html
@@ -1,5 +1,5 @@
 <div>
-    <app-line-chart [data]="myAcc">
-        
+    <app-line-chart>
+
     </app-line-chart>
-</div>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/metric-view/metric-view.component.ts b/frontend/src/app/_elements/metric-view/metric-view.component.ts
index 76dd7d20..9193a0e5 100644
--- a/frontend/src/app/_elements/metric-view/metric-view.component.ts
+++ b/frontend/src/app/_elements/metric-view/metric-view.component.ts
@@ -1,32 +1,49 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { SignalRService } from 'src/app/_services/signal-r.service';
+import { LineChartComponent } from '../line-chart/line-chart.component';
 @Component({
   selector: 'app-metric-view',
   templateUrl: './metric-view.component.html',
   styleUrls: ['./metric-view.component.css']
 })
 export class MetricViewComponent implements OnInit {
-  myAcc:[]=[];
-  myMae:[]=[];
-  myMse:[]=[];
-  myEpochs:[]=[];
+  @ViewChild(LineChartComponent) linechartComponent!: LineChartComponent;
+
+  @Input() history!: any[];
+
   constructor(private signalRService: SignalRService) { }
 
   ngOnInit(): void {
-    if(this.signalRService.hubConnection)
-      {
-        this.signalRService.hubConnection.on("NotifyEpoch", (mName: string, mId: string, stat: string, totalEpochs: number, currentEpoch: number) => {
-        console.log(stat)
-        console.log(totalEpochs)
-        const data=JSON.parse(stat)
-        for (let key in data) 
-        {
-          let value = data[key];
-          console.log(value)
+  }
+
+  update(history: any[]) {
+    const myAcc: number[] = [];
+    const myMae: number[] = [];
+    const myMse: number[] = [];
+    const myLoss: number[] = [];
+
+    const myEpochs: number[] = [];
+    this.history = history;
+    this.history.forEach((metrics, epoch) => {
+      myEpochs.push(epoch + 1);
+      for (let key in metrics) {
+        let value = metrics[key];
+        console.log(key, ':::', value, epoch);
+        if (key === 'accuracy') {
+          myAcc.push(parseFloat(value));
+        }
+        else if (key === 'loss') {
+          myLoss.push(parseFloat(value));
+        }
+        else if (key === 'mae') {
+          myMae.push(parseFloat(value));
+        }
+        else if (key === 'mse') {
+          myMse.push(parseFloat(value));
         }
-      });
-      
-    }
+      }
+    });
 
+    this.linechartComponent.update(myEpochs, myAcc, myLoss, myMae, myMse);
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/app/_elements/model-load/model-load.component.html b/frontend/src/app/_elements/model-load/model-load.component.html
index 1afb1ecb..1f9852d1 100644
--- a/frontend/src/app/_elements/model-load/model-load.component.html
+++ b/frontend/src/app/_elements/model-load/model-load.component.html
@@ -173,7 +173,7 @@
             </div>
         </div>
 
-        <div class="form-check form-check-inline overflow-auto m-4" style="width: max-content;">
+        <!--<div class="form-check form-check-inline overflow-auto m-4" style="width: max-content;">
             <h3>Izaberite metrike:</h3>
             <div id="divMetricsinput" class="mt-2 mx-5">
 
@@ -185,7 +185,7 @@
                     </label>
                 </div>
             </div>
-        </div>
+        </div>-->
 
         <div class="form-group row mt-3 mb-3">
             <div class="col"></div>
diff --git a/frontend/src/app/_elements/model-load/model-load.component.ts b/frontend/src/app/_elements/model-load/model-load.component.ts
index 8bf8fd93..0799b4d4 100644
--- a/frontend/src/app/_elements/model-load/model-load.component.ts
+++ b/frontend/src/app/_elements/model-load/model-load.component.ts
@@ -4,6 +4,7 @@ import Experiment from 'src/app/_data/Experiment';
 import Model, { ActivationFunction, LossFunction, LossFunctionBinaryClassification, LossFunctionMultiClassification, LossFunctionRegression, Metrics, MetricsBinaryClassification, MetricsMultiClassification, MetricsRegression, NullValueOptions, Optimizer, ProblemType } from 'src/app/_data/Model';
 import { AuthService } from 'src/app/_services/auth.service';
 import { ModelsService } from 'src/app/_services/models.service';
+import { SignalRService } from 'src/app/_services/signal-r.service';
 import { GraphComponent } from '../graph/graph.component';
 
 
@@ -48,10 +49,11 @@ export class ModelLoadComponent implements OnInit {
     })
   }
 
-  fetchModels() {
+  fetchModels(andSelectWithId: string | null = '') {
     //if (this.forExperiment == undefined) {
     this.modelsService.getMyModels().subscribe((models) => {
-      this.myModels = models;
+      this.myModels = models.reverse();
+      this.selectThisModel(this.myModels.filter(x => x._id == andSelectWithId)[0]);
     });
     /*}
     else {
@@ -90,7 +92,14 @@ export class ModelLoadComponent implements OnInit {
     this.newModel.uploaderId = Shared.userId;
 
     this.modelsService.addModel(this.newModel).subscribe((response) => {
-      Shared.openDialog('Model dodat', 'Model je uspešno dodat u bazu.');
+      console.log(this.newModel);
+      //Shared.openDialog('Model dodat', 'Model je uspešno dodat u bazu.');
+
+      Shared.openYesNoDialog("Model dodat", "Model je uspešno dodat u bazu. Da li želite da nastavite treniranje sa dodatim modelom?", () => {
+        this.fetchModels(response._id);
+        this.showMyModels = true;
+      });
+      this.fetchModels();
     }, (error) => {
       Shared.openDialog('Greška', 'Model sa unetim nazivom već postoji u Vašoj kolekciji. Promenite naziv modela i nastavite sa kreiranim datasetom.');
     });
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index 41aec3b5..51374bd4 100644
--- a/frontend/src/app/app.module.ts
+++ b/frontend/src/app/app.module.ts
@@ -49,7 +49,6 @@ import { ItemExperimentComponent } from './_elements/item-experiment/item-experi
 import { YesNoDialogComponent } from './_modals/yes-no-dialog/yes-no-dialog.component';
 import { Configuration } from './configuration.service';
 import { PointLinechartComponent } from './point-linechart/point-linechart.component';
-import { GraficiComponent } from './grafici/grafici.component';
 import { MixedChartComponent } from './mixed-chart/mixed-chart.component';
 
 import { LineChartComponent } from './_elements/line-chart/line-chart.component';
@@ -92,15 +91,14 @@ export function initializeApp(appConfig: Configuration) {
     GraphComponent,
     TrainingComponent,
     ItemExperimentComponent,
-    YesNoDialogComponent, 
+    YesNoDialogComponent,
     LineChartComponent,
     PointLinechartComponent,
-    GraficiComponent,
     MixedChartComponent,
     LineChartComponent,
     MetricViewComponent,
-   
-    
+
+
   ],
   imports: [
     BrowserModule,
diff --git a/frontend/src/app/grafici/grafici.component.css b/frontend/src/app/grafici/grafici.component.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/frontend/src/app/grafici/grafici.component.html b/frontend/src/app/grafici/grafici.component.html
deleted file mode 100644
index 5f987238..00000000
--- a/frontend/src/app/grafici/grafici.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>grafici works!</p>
diff --git a/frontend/src/app/grafici/grafici.component.spec.ts b/frontend/src/app/grafici/grafici.component.spec.ts
deleted file mode 100644
index 9b5ba94d..00000000
--- a/frontend/src/app/grafici/grafici.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { GraficiComponent } from './grafici.component';
-
-describe('GraficiComponent', () => {
-  let component: GraficiComponent;
-  let fixture: ComponentFixture<GraficiComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ GraficiComponent ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(GraficiComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/frontend/src/app/grafici/grafici.component.ts b/frontend/src/app/grafici/grafici.component.ts
deleted file mode 100644
index 749b35e2..00000000
--- a/frontend/src/app/grafici/grafici.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-grafici',
-  templateUrl: './grafici.component.html',
-  styleUrls: ['./grafici.component.css']
-})
-export class GraficiComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}
diff --git a/frontend/src/app/training/training.component.html b/frontend/src/app/training/training.component.html
index 2bee3b12..fa80089e 100644
--- a/frontend/src/app/training/training.component.html
+++ b/frontend/src/app/training/training.component.html
@@ -33,9 +33,8 @@
             <h2 class="mt-5">Rezultati treniranja</h2>
             <div class="m-3" *ngIf="trainingResult">
                 <h2 class="my-2">Rezultati treniranja:</h2>
-                <p>
-                    {{trainingResult}}
-                </p>
+                {{trainingResult}}
+                <app-metric-view *ngIf="trainingResult" [metrics]="trainingResult"></app-metric-view>
             </div>
         </div>
 
diff --git a/frontend/src/app/training/training.component.ts b/frontend/src/app/training/training.component.ts
index 4c38f166..6b5405cb 100644
--- a/frontend/src/app/training/training.component.ts
+++ b/frontend/src/app/training/training.component.ts
@@ -3,6 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 import Shared from '../Shared';
 import Experiment from '../_data/Experiment';
 import Model, { ProblemType } from '../_data/Model';
+import { MetricViewComponent } from '../_elements/metric-view/metric-view.component';
 import { ModelLoadComponent } from '../_elements/model-load/model-load.component';
 import { AuthService } from '../_services/auth.service';
 import { ExperimentsService } from '../_services/experiments.service';
@@ -17,6 +18,7 @@ import { SignalRService } from '../_services/signal-r.service';
 export class TrainingComponent implements OnInit {
 
   @ViewChild(ModelLoadComponent) modelLoadComponent?: ModelLoadComponent;
+  @ViewChild(MetricViewComponent) metricViewComponent!: MetricViewComponent;
 
   myExperiments?: Experiment[];
   selectedExperiment?: Experiment;
@@ -24,16 +26,11 @@ export class TrainingComponent implements OnInit {
 
   trainingResult: any;
 
+  history: any[] = [];
+
   term: string = "";
 
   constructor(private modelsService: ModelsService, private route: ActivatedRoute, private experimentsService: ExperimentsService, private authService: AuthService, private signalRService: SignalRService) {
-    if (this.signalRService.hubConnection) {
-      this.signalRService.hubConnection.on("NotifyEpoch", (mName: string, mId: string, stat: string, totalEpochs: number, currentEpoch: number) => {
-        if (this.selectedModel?._id == mId) {
-          this.trainingResult = stat;
-        }
-      });
-    }
   }
 
   ngOnInit(): void {
@@ -45,17 +42,32 @@ export class TrainingComponent implements OnInit {
       this.authService.loggedInEvent.subscribe(_ => {
         this.fetchExperiments(experimentId);
 
-        this.signalRService.startConnection()
+        this.signalRService.startConnection();
       });
+
+      console.log(this.signalRService.hubConnection);
+      if (this.signalRService.hubConnection) {
+        this.signalRService.hubConnection.on("NotifyEpoch", (mName: string, mId: string, stat: string, totalEpochs: number, currentEpoch: number) => {
+          console.log(this.selectedModel?._id, mId);
+          if (this.selectedModel?._id == mId) {
+            stat = stat.replace(/'/g, '"');
+            this.trainingResult = JSON.parse(stat);
+            //console.log('JSON', this.trainingResult);
+            this.history.push(this.trainingResult);
+            this.metricViewComponent.update(this.history);
+          }
+        });
+      }
     });
   }
 
   fetchExperiments(andSelectWithId: string | null = '') {
     this.experimentsService.getMyExperiments().subscribe((experiments) => {
-      this.myExperiments = experiments;
+      this.myExperiments = experiments.reverse();
 
       this.selectedExperiment = this.myExperiments.filter(x => x._id == andSelectWithId)[0];
-      console.log("selektovan exp u training comp: ", this.selectedExperiment);
+      if (this.modelLoadComponent)
+        this.modelLoadComponent.newModel.type = this.selectedExperiment.type;
     });
   }
 
@@ -82,8 +94,7 @@ export class TrainingComponent implements OnInit {
     }
     this.modelsService.trainModel(this.selectedModel._id, this.selectedExperiment._id).subscribe((response: any) => {
       //console.log('Train model complete!', response);
-      Shared.openDialog("Obaveštenje", "Treniranje modela je uspešno završeno!");
-      this.trainingResult = response;
+      Shared.openDialog("Obaveštenje", "Treniranje modela je počelo!");
     });
   }
 }
-- 
cgit v1.2.3