diff options
Diffstat (limited to 'frontend/src/app/_elements/_charts')
36 files changed, 852 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..3faa4794 --- /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: 'rgba(0, 65, 101, 1.0)', + borderColor: '#0063AB', + 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: 'rgba(0, 65, 101, 1.0)' + }, + grid: { + color: "rgba(0, 99, 171, 0.5)" + } + }, + y : { + min: -50, + max: 200, + ticks: { + color: 'rgba(0, 65, 101, 1.0)' + }, + 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..c8f406f4 --- /dev/null +++ b/frontend/src/app/_elements/_charts/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/_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..49558025 --- /dev/null +++ b/frontend/src/app/_elements/_charts/line-chart/line-chart.component.ts @@ -0,0 +1,88 @@ +import { Component, AfterViewInit } 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: { + y: { + beginAtZero: true + } + } + } + } + ); + } +} 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..5735217e --- /dev/null +++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.css @@ -0,0 +1,6 @@ +#divScatterChart{ + background-color: beige; + display: block; + width: 400px; + height: 200px; +}
\ 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..2b30fe1f --- /dev/null +++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.html @@ -0,0 +1,4 @@ +<p>Scatter chart:</p> +<div id="divScatterChart"> + <canvas id="ScatterCharts"> </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..9dfef4c3 --- /dev/null +++ b/frontend/src/app/_elements/_charts/scatterchart/scatterchart.component.ts @@ -0,0 +1,39 @@ +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}], + backgroundColor: 'rgb(255, 99, 132)' + }] + }, + options: { + scales: { + y: { + beginAtZero: true + } + } + } + }); + } +} |