Mixed chart.

9 files changed, 129 insertions, 1 deletions

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
--- /dev/null
+++ b/frontend/src/app/grafici/grafici.component.css
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
--- /dev/null
+++ b/frontend/src/app/mixed-chart/mixed-chart.component.css
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 }
+      }*/
+
+    });
+  }
+
+}