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.

---
 .../_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 ++-
 8 files changed, 98 insertions(+), 52 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')

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