From 0b38d83378e3ea03893eb60729e8bebbf9942949 Mon Sep 17 00:00:00 2001 From: Nevena Bojovic Date: Sun, 24 Apr 2022 18:17:18 +0200 Subject: Pie Chart dodat (Test Page). --- frontend/src/app/_pages/test/test.component.css | 0 frontend/src/app/_pages/test/test.component.html | 1 + .../src/app/_pages/test/test.component.spec.ts | 25 ++++++++++++++++++++++ frontend/src/app/_pages/test/test.component.ts | 15 +++++++++++++ 4 files changed, 41 insertions(+) create mode 100644 frontend/src/app/_pages/test/test.component.css create mode 100644 frontend/src/app/_pages/test/test.component.html create mode 100644 frontend/src/app/_pages/test/test.component.spec.ts create mode 100644 frontend/src/app/_pages/test/test.component.ts (limited to 'frontend/src/app/_pages/test') diff --git a/frontend/src/app/_pages/test/test.component.css b/frontend/src/app/_pages/test/test.component.css new file mode 100644 index 00000000..e69de29b diff --git a/frontend/src/app/_pages/test/test.component.html b/frontend/src/app/_pages/test/test.component.html new file mode 100644 index 00000000..8085f77f --- /dev/null +++ b/frontend/src/app/_pages/test/test.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/app/_pages/test/test.component.spec.ts b/frontend/src/app/_pages/test/test.component.spec.ts new file mode 100644 index 00000000..e0f9bcc9 --- /dev/null +++ b/frontend/src/app/_pages/test/test.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TestComponent } from './test.component'; + +describe('TestComponent', () => { + let component: TestComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ TestComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(TestComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/_pages/test/test.component.ts b/frontend/src/app/_pages/test/test.component.ts new file mode 100644 index 00000000..b3c0d8cf --- /dev/null +++ b/frontend/src/app/_pages/test/test.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-test', + templateUrl: './test.component.html', + styleUrls: ['./test.component.css'] +}) +export class TestComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} -- cgit v1.2.3 From dbc6d56f495b2238ed1e8b6bc036b23a6067b051 Mon Sep 17 00:00:00 2001 From: Nevena Bojovic Date: Sun, 24 Apr 2022 18:43:14 +0200 Subject: Doughnut Chart (Varijanta Pie Chart). --- .../_charts/box-plot/box-plot.component.html | 2 +- .../_charts/box-plot/box-plot.component.ts | 3 +- .../doughnut-chart/doughnut-chart.component.css | 0 .../doughnut-chart/doughnut-chart.component.html | 1 + .../doughnut-chart.component.spec.ts | 25 ++++++++++++++++ .../doughnut-chart/doughnut-chart.component.ts | 34 ++++++++++++++++++++++ frontend/src/app/_pages/test/test.component.html | 4 ++- frontend/src/app/app.module.ts | 4 ++- 8 files changed, 68 insertions(+), 5 deletions(-) create mode 100644 frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.css create mode 100644 frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html create mode 100644 frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.spec.ts create mode 100644 frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts (limited to 'frontend/src/app/_pages/test') 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 index 20cf6487..2006eada 100644 --- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html +++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html @@ -1 +1 @@ -

box-plot works!

+

Box-plot

\ No newline at end of file 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 index 56f87057..0cef8f90 100644 --- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts +++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts @@ -1,5 +1,4 @@ -import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core'; -import {Chart} from 'node_modules/chart.js'; +import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-box-plot', 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 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..4befc7dc --- /dev/null +++ b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html @@ -0,0 +1 @@ + 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; + + 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..4c7508fe --- /dev/null +++ b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts @@ -0,0 +1,34 @@ +import { AfterViewInit, Component, ElementRef, 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 { + + @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/_pages/test/test.component.html b/frontend/src/app/_pages/test/test.component.html index 8085f77f..625739f8 100644 --- a/frontend/src/app/_pages/test/test.component.html +++ b/frontend/src/app/_pages/test/test.component.html @@ -1 +1,3 @@ - \ No newline at end of file + + + \ No newline at end of file diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 0271d64d..5502df26 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -44,6 +44,7 @@ import { FormModelComponent } from './_elements/form-model/form-model.component' import { ColumnTableComponent } from './_elements/column-table/column-table.component'; import { FolderComponent } from './_elements/folder/folder.component'; import { TestComponent } from './_pages/test/test.component'; +import { DoughnutChartComponent } from './_elements/_charts/doughnut-chart/doughnut-chart.component'; export function initializeApp(appConfig: Configuration) { return () => appConfig.load(); @@ -76,7 +77,8 @@ export function initializeApp(appConfig: Configuration) { PieChartComponent, BoxPlotComponent, FolderComponent, - TestComponent + TestComponent, + DoughnutChartComponent ], imports: [ BrowserModule, -- cgit v1.2.3 From 5857e1c71eda1ee6455d55ef9f8d1c10f75a8457 Mon Sep 17 00:00:00 2001 From: Nevena Bojovic Date: Tue, 26 Apr 2022 21:05:08 +0200 Subject: Box plot-sredjeno. --- frontend/package-lock.json | 30 ++++++++++ frontend/package.json | 1 + .../_charts/barchart/barchart.component.ts | 1 + .../_charts/box-plot/box-plot.component.html | 2 +- .../_charts/box-plot/box-plot.component.ts | 64 ++++++++++++++++++++-- .../doughnut-chart/doughnut-chart.component.html | 2 +- .../doughnut-chart/doughnut-chart.component.ts | 5 +- .../_charts/pie-chart/pie-chart.component.html | 2 +- .../_charts/pie-chart/pie-chart.component.ts | 7 ++- frontend/src/app/_pages/test/test.component.html | 3 +- 10 files changed, 106 insertions(+), 11 deletions(-) (limited to 'frontend/src/app/_pages/test') diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 9c3256b2..710e9710 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -24,6 +24,7 @@ "@microsoft/signalr": "^6.0.4", "@ng-bootstrap/ng-bootstrap": "^12.0.0", "@popperjs/core": "^2.10.2", + "@sgratzl/chartjs-chart-boxplot": "^3.7.1", "bootstrap": "^5.1.3", "chart.js": "^3.7.1", "csv-parser": "^3.0.0", @@ -2701,6 +2702,22 @@ "yarn": ">= 1.13.0" } }, + "node_modules/@sgratzl/boxplots": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@sgratzl/boxplots/-/boxplots-1.3.0.tgz", + "integrity": "sha512-2BRWv+WOH58pwzSgP50buoXgxQic+4auz3BF0wiIUXS8D3QGkdBNgsNdQO1754Tm/0uEwly0R3WaCiGnoYWcmA==" + }, + "node_modules/@sgratzl/chartjs-chart-boxplot": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@sgratzl/chartjs-chart-boxplot/-/chartjs-chart-boxplot-3.7.1.tgz", + "integrity": "sha512-DYyOedq9CVFcDQZbRekyZAu/Bg0SUgaa19hsl4ikU85Di2DPdaiC/tFIkwHS6YB4L1GMWNvY+TDUODMYRFjhxA==", + "dependencies": { + "@sgratzl/boxplots": "^1.3.0" + }, + "peerDependencies": { + "chart.js": "^3.7.0" + } + }, "node_modules/@socket.io/base64-arraybuffer": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@socket.io/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz", @@ -13722,6 +13739,19 @@ "jsonc-parser": "3.0.0" } }, + "@sgratzl/boxplots": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@sgratzl/boxplots/-/boxplots-1.3.0.tgz", + "integrity": "sha512-2BRWv+WOH58pwzSgP50buoXgxQic+4auz3BF0wiIUXS8D3QGkdBNgsNdQO1754Tm/0uEwly0R3WaCiGnoYWcmA==" + }, + "@sgratzl/chartjs-chart-boxplot": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/@sgratzl/chartjs-chart-boxplot/-/chartjs-chart-boxplot-3.7.1.tgz", + "integrity": "sha512-DYyOedq9CVFcDQZbRekyZAu/Bg0SUgaa19hsl4ikU85Di2DPdaiC/tFIkwHS6YB4L1GMWNvY+TDUODMYRFjhxA==", + "requires": { + "@sgratzl/boxplots": "^1.3.0" + } + }, "@socket.io/base64-arraybuffer": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@socket.io/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz", diff --git a/frontend/package.json b/frontend/package.json index f2d1e991..369ac5c9 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -27,6 +27,7 @@ "@microsoft/signalr": "^6.0.4", "@ng-bootstrap/ng-bootstrap": "^12.0.0", "@popperjs/core": "^2.10.2", + "@sgratzl/chartjs-chart-boxplot": "^3.7.1", "bootstrap": "^5.1.3", "chart.js": "^3.7.1", "csv-parser": "^3.0.0", diff --git a/frontend/src/app/_elements/_charts/barchart/barchart.component.ts b/frontend/src/app/_elements/_charts/barchart/barchart.component.ts index def64b7d..904335d7 100644 --- a/frontend/src/app/_elements/_charts/barchart/barchart.component.ts +++ b/frontend/src/app/_elements/_charts/barchart/barchart.component.ts @@ -8,6 +8,7 @@ import {Chart} from 'node_modules/chart.js'; }) export class BarchartComponent implements OnInit { + constructor() { } ngOnInit(){ 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 index 2006eada..34c283c7 100644 --- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html +++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.html @@ -1 +1 @@ -

Box-plot

\ No newline at end of file + \ No newline at end of file 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 index 0cef8f90..078e7176 100644 --- a/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts +++ b/frontend/src/app/_elements/_charts/box-plot/box-plot.component.ts @@ -1,15 +1,71 @@ -import { Component, OnInit } from '@angular/core'; +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 OnInit { +export class BoxPlotComponent implements AfterViewInit { + @Input()width: number = 800; + @Input()height: number = 450; + + @ViewChild('boxplot') chartRef!: ElementRef; constructor() { } - ngOnInit(): void { - } + boxplotData = { + // define label tree + labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], + datasets: [{ + label: 'Dataset 1', + backgroundColor: 'rgba(255,0,0,0.5)', + borderColor: 'red', + borderWidth: 1, + outlierColor: '#999999', + 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 + }); +} } 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 index 4befc7dc..9c464534 100644 --- a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html +++ b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.html @@ -1 +1 @@ - + 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 index 4c7508fe..fc13289c 100644 --- a/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts +++ b/frontend/src/app/_elements/_charts/doughnut-chart/doughnut-chart.component.ts @@ -1,4 +1,4 @@ -import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; import {Chart} from 'node_modules/chart.js'; @Component({ @@ -8,6 +8,9 @@ import {Chart} from 'node_modules/chart.js'; }) export class DoughnutChartComponent implements AfterViewInit { + @Input()width: number = 800; + @Input()height: number = 450; + @ViewChild('doughnut') chartRef!: ElementRef; constructor() { } 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 index 413aa6f3..aa3f26ab 100644 --- a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html +++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.html @@ -1 +1 @@ - + 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 index e7d79615..3f2dbfaf 100644 --- a/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts +++ b/frontend/src/app/_elements/_charts/pie-chart/pie-chart.component.ts @@ -1,5 +1,5 @@ -import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core'; -import {Chart} from 'node_modules/chart.js'; +import { AfterViewInit, Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; +import {Chart} from 'chart.js'; @Component({ selector: 'app-pie-chart', @@ -8,6 +8,9 @@ import {Chart} from 'node_modules/chart.js'; }) export class PieChartComponent implements AfterViewInit { + @Input()width: number = 800; + @Input()height: number = 450; + @ViewChild('piechart') chartRef!: ElementRef; constructor() { } diff --git a/frontend/src/app/_pages/test/test.component.html b/frontend/src/app/_pages/test/test.component.html index 625739f8..ec6ef0d6 100644 --- a/frontend/src/app/_pages/test/test.component.html +++ b/frontend/src/app/_pages/test/test.component.html @@ -1,3 +1,4 @@ - \ No newline at end of file + + \ No newline at end of file -- cgit v1.2.3 From 8646b0f5fff359b55070362bf734af20c923a369 Mon Sep 17 00:00:00 2001 From: Nevena Bojovic Date: Thu, 28 Apr 2022 17:07:28 +0200 Subject: Heat Map... --- frontend/package-lock.json | 242 ++++++++++++++++++++- frontend/package.json | 2 + .../_charts/heatmap/heatmap.component.css | 0 .../_charts/heatmap/heatmap.component.html | 3 + .../_charts/heatmap/heatmap.component.spec.ts | 25 +++ .../_elements/_charts/heatmap/heatmap.component.ts | 108 +++++++++ frontend/src/app/_pages/test/test.component.html | 3 +- frontend/src/app/app.module.ts | 4 + 8 files changed, 383 insertions(+), 4 deletions(-) create mode 100644 frontend/src/app/_elements/_charts/heatmap/heatmap.component.css create mode 100644 frontend/src/app/_elements/_charts/heatmap/heatmap.component.html create mode 100644 frontend/src/app/_elements/_charts/heatmap/heatmap.component.spec.ts create mode 100644 frontend/src/app/_elements/_charts/heatmap/heatmap.component.ts (limited to 'frontend/src/app/_pages/test') diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 710e9710..7f6dbdde 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -25,7 +25,9 @@ "@ng-bootstrap/ng-bootstrap": "^12.0.0", "@popperjs/core": "^2.10.2", "@sgratzl/chartjs-chart-boxplot": "^3.7.1", + "@syncfusion/ej2-angular-heatmap": "^20.1.47", "bootstrap": "^5.1.3", + "chart.heatmap.js": "^0.0.1-alpha", "chart.js": "^3.7.1", "csv-parser": "^3.0.0", "d3-graphviz": "^2.6.1", @@ -2727,6 +2729,115 @@ "node": ">= 0.6.0" } }, + "node_modules/@syncfusion/ej2-angular-base": { + "version": "20.1.48", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-angular-base/-/ej2-angular-base-20.1.48.tgz", + "integrity": "sha512-MVnQl2TuqD0pKvXJRWekHO8vtsdC89OzETUVRnYllnLqnGdNDzOFxi1Gmm+ON3HpVjcfzNSbUoFFQcJwUF+WGQ==", + "hasInstallScript": true, + "dependencies": { + "@syncfusion/ej2-base": "~20.1.48", + "@syncfusion/ej2-icons": "~20.1.47", + "core-js": "^3.4.8", + "reflect-metadata": "^0.1.9", + "rxjs": "^6.5.4", + "rxjs-compat": "^6.5.4", + "zone.js": "^0.10.2" + } + }, + "node_modules/@syncfusion/ej2-angular-base/node_modules/rxjs": { + "version": "6.6.7", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz", + "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==", + "dependencies": { + "tslib": "^1.9.0" + }, + "engines": { + "npm": ">=2.0.0" + } + }, + "node_modules/@syncfusion/ej2-angular-base/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + }, + "node_modules/@syncfusion/ej2-angular-base/node_modules/zone.js": { + "version": "0.10.3", + "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.10.3.tgz", + "integrity": "sha512-LXVLVEq0NNOqK/fLJo3d0kfzd4sxwn2/h67/02pjCjfKDxgx1i9QqpvtHD8CrBnSSwMw5+dy11O7FRX5mkO7Cg==" + }, + "node_modules/@syncfusion/ej2-angular-heatmap": { + "version": "20.1.47", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-angular-heatmap/-/ej2-angular-heatmap-20.1.47.tgz", + "integrity": "sha512-mx9Z5/zNmNcjogVfS7DKNbg7zW2FXZ78O0BYPA4CqdwDLZdA30xx25JGwM7fZ6iTDs8kpEyWAAEMt+zJPyRKFw==", + "dependencies": { + "@syncfusion/ej2-angular-base": "~20.1.47", + "@syncfusion/ej2-base": "~20.1.47", + "@syncfusion/ej2-heatmap": "20.1.47" + } + }, + "node_modules/@syncfusion/ej2-base": { + "version": "20.1.50", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-base/-/ej2-base-20.1.50.tgz", + "integrity": "sha512-RdBCPjvD/ArwArVoYjTXB7jQ7zAdgT8MxoKY4aSwY9wrNIUxNS4HhO8slY2ergjZHDP3eDnLn/UiCg5qaBtFJQ==", + "dependencies": { + "@syncfusion/ej2-icons": "~20.1.47" + } + }, + "node_modules/@syncfusion/ej2-compression": { + "version": "20.1.47", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-compression/-/ej2-compression-20.1.47.tgz", + "integrity": "sha512-4+74eOf6+vxg1mobYEf5qCvTbo6DjjSZv1O2zfWUc0tgVV0A9AspXIcoeeivemTKnRDj0fm3E7Tv15h1qodpUQ==", + "dependencies": { + "@syncfusion/ej2-file-utils": "~20.1.47" + } + }, + "node_modules/@syncfusion/ej2-data": { + "version": "20.1.47", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-data/-/ej2-data-20.1.47.tgz", + "integrity": "sha512-AAq95oux06/Dtoo9Az1MlN0r1xbV8BF6vIbCbpiIK016jp2V38X0x2AhvHFV/yM+winrT1d2nxUhcGcnabPveQ==", + "dependencies": { + "@syncfusion/ej2-base": "~20.1.47" + } + }, + "node_modules/@syncfusion/ej2-file-utils": { + "version": "20.1.47", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-file-utils/-/ej2-file-utils-20.1.47.tgz", + "integrity": "sha512-69c/1BBbQpJ/XkdOrtGijxRIDvz05+mO4PB6VANo+FwNdhGFt4MvWmYjCDwwCE2GmqiukKvxXaLRCOjFVFRmig==" + }, + "node_modules/@syncfusion/ej2-heatmap": { + "version": "20.1.47", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-heatmap/-/ej2-heatmap-20.1.47.tgz", + "integrity": "sha512-hOCGlHNQaFyojR84jCCQ+ssDOtWpzy0nvC3/1xNhC2VbDPvxo/zNqiNJuW+ELTlViv+2UcPMKnCLL9rgv7jakg==", + "dependencies": { + "@syncfusion/ej2-base": "~20.1.47", + "@syncfusion/ej2-compression": "~20.1.47", + "@syncfusion/ej2-data": "~20.1.47", + "@syncfusion/ej2-file-utils": "~20.1.47", + "@syncfusion/ej2-pdf-export": "~20.1.47", + "@syncfusion/ej2-svg-base": "~20.1.47" + } + }, + "node_modules/@syncfusion/ej2-icons": { + "version": "20.1.47", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-icons/-/ej2-icons-20.1.47.tgz", + "integrity": "sha512-0P5enxVZSl+AISIlRvQV/d/k0EgP8RDN/gBmb2AQuldMoz+Nx64G7zLEXd1l9Ib2j5Si9JgXF37aYhwc2brdNw==" + }, + "node_modules/@syncfusion/ej2-pdf-export": { + "version": "20.1.47", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-pdf-export/-/ej2-pdf-export-20.1.47.tgz", + "integrity": "sha512-ww5BtrCrn4RTOcfYnqTF9elizfLLLTZhDgsHJ09hPMhFDzazfuO79D1zfER4b2JiJYffcBiY6Xsp56qCB/ccpw==", + "dependencies": { + "@syncfusion/ej2-compression": "~20.1.47" + } + }, + "node_modules/@syncfusion/ej2-svg-base": { + "version": "20.1.48", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-svg-base/-/ej2-svg-base-20.1.48.tgz", + "integrity": "sha512-uiGEd5Gws9NYa+lqkR2L8Z1MYeIV5QRAt9sT21KghEpoh2lS1nuzou/4vKMyQPJGayzqRCEW5BBIGkrSbgVXGg==", + "dependencies": { + "@syncfusion/ej2-base": "~20.1.48" + } + }, "node_modules/@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -3920,6 +4031,11 @@ "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==", "dev": true }, + "node_modules/chart.heatmap.js": { + "version": "0.0.1-alpha", + "resolved": "https://registry.npmjs.org/chart.heatmap.js/-/chart.heatmap.js-0.0.1-alpha.tgz", + "integrity": "sha1-wqcltMGZMMhu6oiyRorPWFOzpSY=" + }, "node_modules/chart.js": { "version": "3.7.1", "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz", @@ -4341,7 +4457,6 @@ "version": "3.20.3", "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.20.3.tgz", "integrity": "sha512-vVl8j8ph6tRS3B8qir40H7yw7voy17xL0piAjlbBUsH7WIfzoedL/ZOr1OV9FyZQLWXsayOJyV4tnRyXR85/ag==", - "dev": true, "hasInstallScript": true, "funding": { "type": "opencollective", @@ -10192,6 +10307,11 @@ "tslib": "^2.1.0" } }, + "node_modules/rxjs-compat": { + "version": "6.6.7", + "resolved": "https://registry.npmjs.org/rxjs-compat/-/rxjs-compat-6.6.7.tgz", + "integrity": "sha512-szN4fK+TqBPOFBcBcsR0g2cmTTUF/vaFEOZNuSdfU8/pGFnNmmn2u8SystYXG1QMrjOPBc6XTKHMVfENDf6hHw==" + }, "node_modules/safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", @@ -13758,6 +13878,113 @@ "integrity": "sha512-dOlCBKnDw4iShaIsH/bxujKTM18+2TOAsYz+KSc11Am38H4q5Xw8Bbz97ZYdrVNM+um3p7w86Bvvmcn9q+5+eQ==", "dev": true }, + "@syncfusion/ej2-angular-base": { + "version": "20.1.48", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-angular-base/-/ej2-angular-base-20.1.48.tgz", + "integrity": "sha512-MVnQl2TuqD0pKvXJRWekHO8vtsdC89OzETUVRnYllnLqnGdNDzOFxi1Gmm+ON3HpVjcfzNSbUoFFQcJwUF+WGQ==", + "requires": { + "@syncfusion/ej2-base": "~20.1.48", + "@syncfusion/ej2-icons": "~20.1.47", + "core-js": "^3.4.8", + "reflect-metadata": "^0.1.9", + "rxjs": "^6.5.4", + "rxjs-compat": "^6.5.4", + "zone.js": "^0.10.2" + }, + "dependencies": { + "rxjs": { + "version": "6.6.7", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz", + "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==", + "requires": { + "tslib": "^1.9.0" + } + }, + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + }, + "zone.js": { + "version": "0.10.3", + "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.10.3.tgz", + "integrity": "sha512-LXVLVEq0NNOqK/fLJo3d0kfzd4sxwn2/h67/02pjCjfKDxgx1i9QqpvtHD8CrBnSSwMw5+dy11O7FRX5mkO7Cg==" + } + } + }, + "@syncfusion/ej2-angular-heatmap": { + "version": "20.1.47", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-angular-heatmap/-/ej2-angular-heatmap-20.1.47.tgz", + "integrity": "sha512-mx9Z5/zNmNcjogVfS7DKNbg7zW2FXZ78O0BYPA4CqdwDLZdA30xx25JGwM7fZ6iTDs8kpEyWAAEMt+zJPyRKFw==", + "requires": { + "@syncfusion/ej2-angular-base": "~20.1.47", + "@syncfusion/ej2-base": "~20.1.47", + "@syncfusion/ej2-heatmap": "20.1.47" + } + }, + "@syncfusion/ej2-base": { + "version": "20.1.50", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-base/-/ej2-base-20.1.50.tgz", + "integrity": "sha512-RdBCPjvD/ArwArVoYjTXB7jQ7zAdgT8MxoKY4aSwY9wrNIUxNS4HhO8slY2ergjZHDP3eDnLn/UiCg5qaBtFJQ==", + "requires": { + "@syncfusion/ej2-icons": "~20.1.47" + } + }, + "@syncfusion/ej2-compression": { + "version": "20.1.47", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-compression/-/ej2-compression-20.1.47.tgz", + "integrity": "sha512-4+74eOf6+vxg1mobYEf5qCvTbo6DjjSZv1O2zfWUc0tgVV0A9AspXIcoeeivemTKnRDj0fm3E7Tv15h1qodpUQ==", + "requires": { + "@syncfusion/ej2-file-utils": "~20.1.47" + } + }, + "@syncfusion/ej2-data": { + "version": "20.1.47", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-data/-/ej2-data-20.1.47.tgz", + "integrity": "sha512-AAq95oux06/Dtoo9Az1MlN0r1xbV8BF6vIbCbpiIK016jp2V38X0x2AhvHFV/yM+winrT1d2nxUhcGcnabPveQ==", + "requires": { + "@syncfusion/ej2-base": "~20.1.47" + } + }, + "@syncfusion/ej2-file-utils": { + "version": "20.1.47", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-file-utils/-/ej2-file-utils-20.1.47.tgz", + "integrity": "sha512-69c/1BBbQpJ/XkdOrtGijxRIDvz05+mO4PB6VANo+FwNdhGFt4MvWmYjCDwwCE2GmqiukKvxXaLRCOjFVFRmig==" + }, + "@syncfusion/ej2-heatmap": { + "version": "20.1.47", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-heatmap/-/ej2-heatmap-20.1.47.tgz", + "integrity": "sha512-hOCGlHNQaFyojR84jCCQ+ssDOtWpzy0nvC3/1xNhC2VbDPvxo/zNqiNJuW+ELTlViv+2UcPMKnCLL9rgv7jakg==", + "requires": { + "@syncfusion/ej2-base": "~20.1.47", + "@syncfusion/ej2-compression": "~20.1.47", + "@syncfusion/ej2-data": "~20.1.47", + "@syncfusion/ej2-file-utils": "~20.1.47", + "@syncfusion/ej2-pdf-export": "~20.1.47", + "@syncfusion/ej2-svg-base": "~20.1.47" + } + }, + "@syncfusion/ej2-icons": { + "version": "20.1.47", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-icons/-/ej2-icons-20.1.47.tgz", + "integrity": "sha512-0P5enxVZSl+AISIlRvQV/d/k0EgP8RDN/gBmb2AQuldMoz+Nx64G7zLEXd1l9Ib2j5Si9JgXF37aYhwc2brdNw==" + }, + "@syncfusion/ej2-pdf-export": { + "version": "20.1.47", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-pdf-export/-/ej2-pdf-export-20.1.47.tgz", + "integrity": "sha512-ww5BtrCrn4RTOcfYnqTF9elizfLLLTZhDgsHJ09hPMhFDzazfuO79D1zfER4b2JiJYffcBiY6Xsp56qCB/ccpw==", + "requires": { + "@syncfusion/ej2-compression": "~20.1.47" + } + }, + "@syncfusion/ej2-svg-base": { + "version": "20.1.48", + "resolved": "https://registry.npmjs.org/@syncfusion/ej2-svg-base/-/ej2-svg-base-20.1.48.tgz", + "integrity": "sha512-uiGEd5Gws9NYa+lqkR2L8Z1MYeIV5QRAt9sT21KghEpoh2lS1nuzou/4vKMyQPJGayzqRCEW5BBIGkrSbgVXGg==", + "requires": { + "@syncfusion/ej2-base": "~20.1.48" + } + }, "@tootallnate/once": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz", @@ -14751,6 +14978,11 @@ "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==", "dev": true }, + "chart.heatmap.js": { + "version": "0.0.1-alpha", + "resolved": "https://registry.npmjs.org/chart.heatmap.js/-/chart.heatmap.js-0.0.1-alpha.tgz", + "integrity": "sha1-wqcltMGZMMhu6oiyRorPWFOzpSY=" + }, "chart.js": { "version": "3.7.1", "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.7.1.tgz", @@ -15072,8 +15304,7 @@ "core-js": { "version": "3.20.3", "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.20.3.tgz", - "integrity": "sha512-vVl8j8ph6tRS3B8qir40H7yw7voy17xL0piAjlbBUsH7WIfzoedL/ZOr1OV9FyZQLWXsayOJyV4tnRyXR85/ag==", - "dev": true + "integrity": "sha512-vVl8j8ph6tRS3B8qir40H7yw7voy17xL0piAjlbBUsH7WIfzoedL/ZOr1OV9FyZQLWXsayOJyV4tnRyXR85/ag==" }, "core-js-compat": { "version": "3.21.1", @@ -19338,6 +19569,11 @@ "tslib": "^2.1.0" } }, + "rxjs-compat": { + "version": "6.6.7", + "resolved": "https://registry.npmjs.org/rxjs-compat/-/rxjs-compat-6.6.7.tgz", + "integrity": "sha512-szN4fK+TqBPOFBcBcsR0g2cmTTUF/vaFEOZNuSdfU8/pGFnNmmn2u8SystYXG1QMrjOPBc6XTKHMVfENDf6hHw==" + }, "safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", diff --git a/frontend/package.json b/frontend/package.json index 369ac5c9..89381956 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -28,7 +28,9 @@ "@ng-bootstrap/ng-bootstrap": "^12.0.0", "@popperjs/core": "^2.10.2", "@sgratzl/chartjs-chart-boxplot": "^3.7.1", + "@syncfusion/ej2-angular-heatmap": "^20.1.47", "bootstrap": "^5.1.3", + "chart.heatmap.js": "^0.0.1-alpha", "chart.js": "^3.7.1", "csv-parser": "^3.0.0", "d3-graphviz": "^2.6.1", 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 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 @@ +
+ +
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; + + 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/_pages/test/test.component.html b/frontend/src/app/_pages/test/test.component.html index ec6ef0d6..94679055 100644 --- a/frontend/src/app/_pages/test/test.component.html +++ b/frontend/src/app/_pages/test/test.component.html @@ -1,4 +1,5 @@ - \ No newline at end of file + + \ No newline at end of file diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index c46381d5..fc6d3c6b 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -47,6 +47,8 @@ import { ColumnTableComponent } from './_elements/column-table/column-table.comp import { FolderComponent } from './_elements/folder/folder.component'; import { TestComponent } from './_pages/test/test.component'; import { DoughnutChartComponent } from './_elements/_charts/doughnut-chart/doughnut-chart.component'; +import { HeatmapComponent } from './_elements/_charts/heatmap/heatmap.component'; +import { HeatMapAllModule } from '@syncfusion/ej2-angular-heatmap'; export function initializeApp(appConfig: Configuration) { return () => appConfig.load(); @@ -83,6 +85,7 @@ export function initializeApp(appConfig: Configuration) { MissingvaluesDialogComponent, TestComponent, DoughnutChartComponent, + HeatmapComponent ], imports: [ BrowserModule, @@ -97,6 +100,7 @@ export function initializeApp(appConfig: Configuration) { MatIconModule, NgChartsModule, Ng2SearchPipeModule, + HeatMapAllModule ], providers: [ Configuration, -- cgit v1.2.3