I've been attempting to integrate the NPM plugin Simpleheat () into my Angular2 app, but unfortunately, the heatmap is not rendering even though everything appears to be set up correctly.
You can find the full repository with the issue here: https://github.com/b4rtt/nebula
heatmap.component.ts
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { simpleheat } from 'simpleheat';
@Component({
selector: 'app-heatmap',
templateUrl: './heatmap.component.html',
styleUrls: ['./heatmap.component.css']
})
export class HeatmapComponent implements OnInit {
@ViewChild("myCanvas") myCanvas: ElementRef;
context: CanvasRenderingContext2D;
constructor() {
}
ngOnInit() {
}
ngAfterViewInit() {
let canvas = this.myCanvas.nativeElement;
var data = [[38, 20, 1], [38, 690, 1], [48, 30, 1]];
this.context = canvas.getContext("2d");
var ctx = this.context;
//test draw
ctx.clearRect(0, 0, 400, 400);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 20, 20);
//doesn't work ?? Why?
var heat = simpleheat(ctx);
heat.data(data);
heat.draw(100);
}
}
heatmap.component.html
<canvas #myCanvas id="canvas" width="500" height="500"></canvas>
Can anyone provide me with guidance on what might be causing the issue here?
Thank you