Merge branch 'redesign' into 'master'

merge

See merge request igrannonica/neuronstellar!29

36 files changed, 882 insertions, 0 deletions

diff --git a/frontend/src/app/_elements/_charts/barchart/barchart.component.css b/frontend/src/app/_elements/_charts/barchart/barchart.component.css
new file mode 100644
index 00000000..c3634c9f
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/barchart/barchart.component.css
@@ -0,0 +1,6 @@
+#divBarChart{
+    background-color: beige;
+    display: block;
+    width: 400px;
+    height: 200px;   
+}
diff --git a/frontend/src/app/_elements/_charts/barchart/barchart.component.html b/frontend/src/app/_elements/_charts/barchart/barchart.component.html
new file mode 100644
index 00000000..48b7bd3e
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/barchart/barchart.component.html
@@ -0,0 +1,4 @@
+<p>Bar chart:</p>
+<div id="divBarChart">
+    <canvas id="Barchart"> </canvas>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/barchart/barchart.component.spec.ts b/frontend/src/app/_elements/_charts/barchart/barchart.component.spec.ts
new file mode 100644
index 00000000..8b346d1c
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/barchart/barchart.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BarchartComponent } from './barchart.component';
+
+describe('BarchartComponent', () => {
+  let component: BarchartComponent;
+  let fixture: ComponentFixture<BarchartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BarchartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BarchartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/_charts/barchart/barchart.component.ts b/frontend/src/app/_elements/_charts/barchart/barchart.component.ts
new file mode 100644
index 00000000..904335d7
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/barchart/barchart.component.ts
@@ -0,0 +1,55 @@
+import { Component, OnInit } from '@angular/core';
+import {Chart} from 'node_modules/chart.js';
+
+@Component({
+  selector: 'app-barchart',
+  templateUrl: './barchart.component.html',
+  styleUrls: ['./barchart.component.css']
+})
+export class BarchartComponent implements OnInit {
+
+  
+  constructor() { }
+
+    ngOnInit(){
+      const myChart = new Chart("Barchart", {
+        type: 'bar',
+        data: {
+            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+            datasets: [{
+                label: 'Number of Votes',
+                data: [12, 19, 3, 5, 2, 3],
+                backgroundColor: [
+                    'rgba(255, 99, 132, 1)',
+                    'rgba(54, 162, 235, 1)',
+                    'rgba(255, 206, 86, 1)',
+                    'rgba(75, 192, 192, 1)',
+                    'rgba(153, 102, 255, 1)',
+                    'rgba(255, 159, 64, 1)'
+                ],
+                borderColor: [
+                    'rgba(255, 99, 132, 1)',
+                    'rgba(54, 162, 235, 1)',
+                    'rgba(255, 206, 86, 1)',
+                    'rgba(75, 192, 192, 1)',
+                    'rgba(153, 102, 255, 1)',
+                    'rgba(255, 159, 64, 1)'
+                ],
+                borderWidth: 1
+            }]
+        },
+        options: {
+            scales: {
+                y: {
+                    beginAtZero: true
+                }
+            }
+        }
+
+        
+    });
+
+    
+  }
+
+}
diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.css b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.css
diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html
new file mode 100644
index 00000000..688eafae
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html
@@ -0,0 +1,3 @@
+<div class="chart-wrapper">
+    <canvas #boxplot [width]="width" [height]="height"></canvas>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.spec.ts b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.spec.ts
new file mode 100644
index 00000000..759e7c5e
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BoxPlotComponent } from './box-plot.component';
+
+describe('BoxPlotComponent', () => {
+  let component: BoxPlotComponent;
+  let fixture: ComponentFixture<BoxPlotComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BoxPlotComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BoxPlotComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts
new file mode 100644
index 00000000..d6f4b6ec
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts
@@ -0,0 +1,102 @@
+import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import { Chart, LinearScale, CategoryScale } from 'chart.js';
+import { BoxPlotController, BoxAndWiskers } from '@sgratzl/chartjs-chart-boxplot';
+
+function randomValues(count: number, min: number, max: number) {
+  const delta = max - min;
+  return Array.from({ length: count }).map(() => Math.random() * delta + min);
+}
+
+Chart.register(BoxPlotController, BoxAndWiskers, LinearScale, CategoryScale);
+
+@Component({
+  selector: 'app-box-plot',
+  templateUrl: './box-plot.component.html',
+  styleUrls: ['./box-plot.component.css']
+})
+export class BoxPlotComponent implements AfterViewInit {
+
+  @Input()width?: number;
+  @Input()height?: number;
+  
+  @ViewChild('boxplot') chartRef!: ElementRef;
+  constructor() { }
+
+  boxplotData = {
+    // define label tree
+    labels: ['January'/*, 'February', 'March', 'April', 'May', 'June', 'July'*/],
+      datasets: [{
+      label: 'Dataset 1',
+      backgroundColor: '#0063AB',
+      borderColor: '#dfd7d7',
+      borderWidth: 1,
+      outlierColor: '#999999',
+      scaleFontColor: '#0063AB',
+      padding: 10,
+      itemRadius: 0,
+      data: [
+      randomValues(100, 0, 100),
+      /*randomValues(100, 0, 20),
+      randomValues(100, 20, 70),
+      randomValues(100, 60, 100),
+      randomValues(40, 50, 100),
+      randomValues(100, 60, 120),
+      randomValues(100, 80, 100)*/
+    ]}/*, {
+    label: 'Dataset 2',
+    backgroundColor: 'rgba(0,0,255,0.5)',
+    borderColor: 'blue',
+    borderWidth: 1,
+    outlierColor: '#999999',
+    padding: 10,
+    itemRadius: 0,
+    data: [
+    randomValues(100, 60, 100),
+    randomValues(100, 0, 100),
+    randomValues(100, 0, 20),
+    randomValues(100, 20, 70),
+    randomValues(40, 60, 120),
+    randomValues(100, 20, 100),
+    randomValues(100, 80, 100)
+    ]
+    }*/]
+    };
+  ngAfterViewInit(): void {
+  const myChart = new Chart(this.chartRef.nativeElement, {
+    type: "boxplot",
+    data: this.boxplotData,
+    options: {
+      /*title: {
+        display: true,
+        text: 'Predicted world population (millions) in 2050'
+      }*/
+      plugins:{   
+        legend: {
+          display: false
+                },
+             },
+             scales : {
+               x: {
+                ticks: {
+                  color: '#dfd7d7'
+                },
+                grid: {
+                  color: "rgba(0, 99, 171, 0.5)"
+                }
+               },
+              y : {
+                  min: -50,
+                  max: 200,
+                  ticks: {
+                    color: '#dfd7d7'
+                  },
+                  grid: {
+                    color: "rgba(0, 99, 171, 0.5)"
+                  }
+              }
+          }
+    }
+  });
+}
+
+}
diff --git a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.css b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.css
diff --git a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html
new file mode 100644
index 00000000..9c464534
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html
@@ -0,0 +1 @@
+<canvas #doughnut [width]="width" [height]="height"></canvas>
diff --git a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.spec.ts b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.spec.ts
new file mode 100644
index 00000000..67309670
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DoughnutChartComponent } from './doughnut-chart.component';
+
+describe('DoughnutChartComponent', () => {
+  let component: DoughnutChartComponent;
+  let fixture: ComponentFixture<DoughnutChartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ DoughnutChartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DoughnutChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts
new file mode 100644
index 00000000..fc13289c
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts
@@ -0,0 +1,37 @@
+import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import {Chart} from 'node_modules/chart.js';
+
+@Component({
+  selector: 'app-doughnut-chart',
+  templateUrl: './doughnut-chart.component.html',
+  styleUrls: ['./doughnut-chart.component.css']
+})
+export class DoughnutChartComponent implements AfterViewInit {
+
+  @Input()width: number = 800;
+  @Input()height: number = 450;
+  
+  @ViewChild('doughnut') chartRef!: ElementRef;
+  constructor() { }
+
+  ngAfterViewInit(): void {
+    const myChart = new Chart(this.chartRef.nativeElement, {
+      type: 'doughnut',
+      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]
+        }]
+      },
+      /*options: {
+        title: {
+          display: true,
+          text: 'Predicted world population (millions) in 2050'
+        }
+      }*/
+    });
+  }
+
+}
diff --git a/frontend/src/app/_elements/_charts/heatmap/heatmap.component.css b/frontend/src/app/_elements/_charts/heatmap/heatmap.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/heatmap/heatmap.component.css
diff --git a/frontend/src/app/_elements/_charts/heatmap/heatmap.component.html b/frontend/src/app/_elements/_charts/heatmap/heatmap.component.html
new file mode 100644
index 00000000..52d95516
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/heatmap/heatmap.component.html
@@ -0,0 +1,3 @@
+<div style="width:800px; height: 400px; background-color: red;">
+    <ejs-heatmap [dataSource]='dataSource' [xAxis]='xAxis' [yAxis]='yAxis'></ejs-heatmap>
+</div>
diff --git a/frontend/src/app/_elements/_charts/heatmap/heatmap.component.spec.ts b/frontend/src/app/_elements/_charts/heatmap/heatmap.component.spec.ts
new file mode 100644
index 00000000..fa0a90cc
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/heatmap/heatmap.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeatmapComponent } from './heatmap.component';
+
+describe('HeatmapComponent', () => {
+  let component: HeatmapComponent;
+  let fixture: ComponentFixture<HeatmapComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HeatmapComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeatmapComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/_charts/heatmap/heatmap.component.ts b/frontend/src/app/_elements/_charts/heatmap/heatmap.component.ts
new file mode 100644
index 00000000..f3d1af98
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/heatmap/heatmap.component.ts
@@ -0,0 +1,108 @@
+import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import {Chart} from 'chart.js';
+import { HeatMapAllModule } from '@syncfusion/ej2-angular-heatmap';
+import { BrowserModule } from '@angular/platform-browser'; 
+import { NgModule } from '@angular/core';
+
+
+
+@Component({
+  selector: 'app-heatmap',
+  templateUrl: './heatmap.component.html',
+  styleUrls: ['./heatmap.component.css']
+})
+export class HeatmapComponent implements OnInit {
+
+
+  @Input()width?: number;
+  @Input()height?: number;
+
+  dataSource = [
+ 
+    [73, 39, 26, 39, 94, 0],
+ 
+    [93, 58, 53, 38, 26, 68],
+ 
+    [99, 28, 22, 4, 66, 90],
+ 
+    [14, 26, 97, 69, 69, 3],
+ 
+    [7, 46, 47, 47, 88, 6],
+ 
+    [41, 55, 73, 23, 3, 79],
+ 
+    [56, 69, 21, 86, 3, 33],
+ 
+    [45, 7, 53, 81, 95, 79],
+ 
+    [60, 77, 74, 68, 88, 51],
+ 
+    [25, 25, 10, 12, 78, 14],
+ 
+    [25, 56, 55, 58, 12, 82],
+ 
+    [74, 33, 88, 23, 86, 59]
+ 
+  ];
+
+  xAxis = {
+
+    labels: ['Nancy', 'Andrew', 'Janet', 'Margaret', 'Steven', 'Michael', 'Robert',
+ 
+      'Laura', 'Anne', 'Paul', 'Karin', 'Mario'],
+ 
+  };
+ 
+  yAxis = {
+ 
+    labels: ['Mon', 'Tues', 'Wed', 'Thurs', 'Fri', 'Sat'],
+ 
+  }
+
+  //@ViewChild('heatmap') chartRef!: ElementRef;
+  constructor() { }
+
+  ngOnInit(): void {
+    
+    
+
+    /*
+    const myChart = new Chart(this.chartRef.nativeElement, {
+    type: 'pie',
+    data: {
+      datasets: [{
+        data: [
+ 
+      [73, 39, 26, 39, 94, 0],
+   
+      [93, 58, 53, 38, 26, 68],
+   
+      [99, 28, 22, 4, 66, 90],
+   
+      [14, 26, 97, 69, 69, 3],
+   
+      [7, 46, 47, 47, 88, 6],
+   
+      [41, 55, 73, 23, 3, 79],
+   
+      [56, 69, 21, 86, 3, 33],
+   
+      [45, 7, 53, 81, 95, 79],
+   
+      [60, 77, 74, 68, 88, 51],
+   
+      [25, 25, 10, 12, 78, 14],
+   
+      [25, 56, 55, 58, 12, 82],
+   
+      [74, 33, 88, 23, 86, 59]
+   
+    ],
+      }]
+    }
+});
+    */
+  
+  }
+
+}
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)"
+              }
+            }
+
+          }
+
+
+        }
+      }
+    );
+  }
+}
diff --git a/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.css b/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.css
diff --git a/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.html b/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.html
new file mode 100644
index 00000000..806ea9e8
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/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/_elements/_charts/mixed-chart/mixed-chart.component.spec.ts b/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.spec.ts
new file mode 100644
index 00000000..361cd047
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/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/_elements/_charts/mixed-chart/mixed-chart.component.ts b/frontend/src/app/_elements/_charts/mixed-chart/mixed-chart.component.ts
new file mode 100644
index 00000000..2524ee36
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/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 }
+      }*/
+
+    });
+  }
+
+}
diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.css b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.css
diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html
new file mode 100644
index 00000000..7faf3af0
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html
@@ -0,0 +1,3 @@
+<div class="chart-wrapper">
+    <canvas #piechart [width]="width" [height]="height"></canvas>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.spec.ts b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.spec.ts
new file mode 100644
index 00000000..64f36b7d
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PieChartComponent } from './pie-chart.component';
+
+describe('PieChartComponent', () => {
+  let component: PieChartComponent;
+  let fixture: ComponentFixture<PieChartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PieChartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PieChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
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
new file mode 100644
index 00000000..f141f522
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts
@@ -0,0 +1,46 @@
+import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
+import {Chart} from 'chart.js';
+
+@Component({
+  selector: 'app-pie-chart',
+  templateUrl: './pie-chart.component.html',
+  styleUrls: ['./pie-chart.component.css']
+})
+export class PieChartComponent implements AfterViewInit {
+
+  @Input()width?: number;
+  @Input()height?: number;
+  
+  @ViewChild('piechart') chartRef!: ElementRef;
+  constructor() { }
+
+  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],
+      }]
+    },
+    options: {
+      /*title: {
+        display: true,
+        text: 'Predicted world population (millions) in 2050'
+      }*/
+      plugins:{   
+        legend: {
+          display: false
+                },
+             },
+             layout: {
+              padding: 15}
+    }
+});
+
+  }
+
+
+}
diff --git a/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.css b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.css
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.css
diff --git a/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.html b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.html
new file mode 100644
index 00000000..f9f9a24a
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.html
@@ -0,0 +1,2 @@
+<canvas #linechart width="800" height="450">Point line chart:</canvas>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
diff --git a/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.spec.ts b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.spec.ts
new file mode 100644
index 00000000..fe08fe7c
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PointLinechartComponent } from './point-linechart.component';
+
+describe('PointLinechartComponent', () => {
+  let component: PointLinechartComponent;
+  let fixture: ComponentFixture<PointLinechartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ PointLinechartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PointLinechartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.ts b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.ts
new file mode 100644
index 00000000..3497a20c
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/point-linechart/point-linechart.component.ts
@@ -0,0 +1,57 @@
+import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import {Chart} from 'node_modules/chart.js';
+
+
+@Component({
+  selector: 'app-point-linechart',
+  templateUrl: './point-linechart.component.html',
+  styleUrls: ['./point-linechart.component.css']
+})
+export class PointLinechartComponent implements AfterViewInit {
+
+  @ViewChild('linechart') chartRef!: ElementRef;
+  constructor() { }
+  ngAfterViewInit(): void {
+    const myChart = new Chart(this.chartRef.nativeElement, {
+      type: 'line',
+      data: {
+        labels: [1500,1600,1700,1750,1800,1850,1900,1950,1999,2050],
+        datasets: [{ 
+            data: [86,114,106,106,107,111,133,221,783,2478],
+            label: "Africa",
+            borderColor: "#3e95cd",
+            fill: false
+          }, { 
+            data: [282,350,411,502,635,809,947,1402,3700,5267],
+            label: "Asia",
+            borderColor: "#8e5ea2",
+            fill: false
+          }, { 
+            data: [168,170,178,190,203,276,408,547,675,734],
+            label: "Europe",
+            borderColor: "#3cba9f",
+            fill: false
+          }, { 
+            data: [40,20,10,16,24,38,74,167,508,784],
+            label: "Latin America",
+            borderColor: "#e8c3b9",
+            fill: false
+          }, { 
+            data: [6,3,2,2,7,26,82,172,312,433],
+            label: "North America",
+            borderColor: "#c45850",
+            fill: false
+          }
+        ]
+      },
+      /*options: {
+        title: {
+          display: true,
+          text: 'World population per region (in millions)'
+        }
+      }*/
+      
+    });
+  
+  }
+}
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css
new file mode 100644
index 00000000..005cb692
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css
@@ -0,0 +1,4 @@
+#divScatterChart{
+
+    display: block;   
+}
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html
new file mode 100644
index 00000000..ef41775a
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html
@@ -0,0 +1,4 @@
+
+<div id="divScatterChart" style="width: 100%;height: 100%;">
+    <canvas id="ScatterCharts" style="width: 100%;height: 280px;"> </canvas>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.spec.ts b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.spec.ts
new file mode 100644
index 00000000..1db81051
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ScatterchartComponent } from './scatterchart.component';
+
+describe('ScatterchartComponent', () => {
+  let component: ScatterchartComponent;
+  let fixture: ComponentFixture<ScatterchartComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ScatterchartComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ScatterchartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts
new file mode 100644
index 00000000..12795c70
--- /dev/null
+++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts
@@ -0,0 +1,56 @@
+import { Component, OnInit } from '@angular/core';
+import {Chart} from 'node_modules/chart.js';
+
+@Component({
+  selector: 'app-scatterchart',
+  templateUrl: './scatterchart.component.html',
+  styleUrls: ['./scatterchart.component.css']
+})
+export class ScatterchartComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(){
+    const myChart = new Chart("ScatterCharts", {
+      type: 'scatter',
+      data: {
+          datasets: [{
+              label: 'Scatter Example:',
+              data: [{x: 1, y: 11}, {x:2, y:12}, {x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}, {x: 1, y: 3}, {x: 3, y: 4}, {x: 4, y: 6}, {x: 6, y: 9},
+                {x: 11, y: 9},
+                {x: 12, y: 8},
+                {x: 13, y: 6},
+                {x: 14, y: 0},
+                {x: 15, y: 5},
+                {x: 16, y: 3},
+                {x: 17, y: 2}],
+                borderColor: 'white',
+            }]
+      },
+      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)"
+                  }
+              }
+              
+          }
+          
+          
+      }
+  });
+  }
+}