Merge branch 'dev' into 'master'

Merge master

See merge request igrannonica/neuronstellar!27

4 files changed, 118 insertions, 0 deletions

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
--- /dev/null
+++ b/frontend/src/app/_elements/line-chart/line-chart.component.css
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..c8f406f4
--- /dev/null
+++ b/frontend/src/app/_elements/line-chart/line-chart.component.html
@@ -0,0 +1,5 @@
+<div class="chart-wrapper">
+    <canvas  id="myChart">
+        
+    </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..1a8579a0
--- /dev/null
+++ b/frontend/src/app/_elements/line-chart/line-chart.component.ts
@@ -0,0 +1,88 @@
+import { Component, OnInit, Input } from '@angular/core';
+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 {
+
+  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 {
+    this.myChart = new Chart("myChart",
+      {
+        type: 'line',
+        data: {
+          labels: this.dataEpoch,
+          datasets: [{
+            label: 'Accuracy',
+            data: this.dataAcc,
+            borderWidth: 1
+          },
+          {
+            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
+            }
+          }
+        }
+      }
+    );
+  }
+}