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') 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