4 files changed, 136 insertions, 0 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]
+   
+    ],
+      }]
+    }
+});
+    */
+  
+  }
+
+}