diff options
Diffstat (limited to 'frontend/src/app')
6 files changed, 142 insertions, 1 deletions
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/_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 @@ <app-pie-chart></app-pie-chart> <app-doughnut-chart></app-doughnut-chart> <app-barchart></app-barchart> -<app-box-plot></app-box-plot>
\ No newline at end of file +<app-box-plot></app-box-plot> +<app-heatmap></app-heatmap>
\ 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, |