Merge branch 'redesign' into 'master'

merge

See merge request igrannonica/neuronstellar!29

4 files changed, 133 insertions, 0 deletions

diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.css
diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
new file mode 100644
index 00000000..7f18256a
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.html
@@ -0,0 +1,3 @@
+
+    <canvas  id="myChart" style="width: 100%; height: 530px;">   
+    </canvas>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/line-chart/line-chart.component.spec.ts b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.spec.ts
new file mode 100644
index 00000000..0c5e7ef5
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/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/_charts/line-chart/line-chart.component.ts b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
new file mode 100644
index 00000000..655db9ec
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts
@@ -0,0 +1,105 @@
+import { Component, AfterViewInit, ViewChild } 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 AfterViewInit {
+
+  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();
+  }
+
+  ngAfterViewInit(): 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: {
+            x: {
+              ticks: {
+                color: 'white'
+              },
+              grid: {
+                color: "rgba(0, 99, 171, 0.5)"
+              }
+            },
+            y: {
+              beginAtZero: true,
+              ticks: {
+                color: 'white'
+              },
+              grid: {
+                color: "rgba(0, 99, 171, 0.5)"
+              }
+            }
+
+          }
+
+
+        }
+      }
+    );
+  }
+}