Pass container as element instead of id

[bartbutenaers]

@nswamy14,

Thanks for sharing this nice library!!

I would appreciate if you could review this pull request. The first input parameter can still be a string (i.e. a CSS selector):

let instance = Heatmap('#containerId', { ... });

But from now it can also be a html element:

let containerElement = document.querySelector('#containerId');
let instance = Heatmap(containerElement, { ... });

Background for my request

I would like to integrate your library into a VueJs application, but the problem is that I need to input a container id. As a result, when I have multiple heatmaps, they need unique container id's (to avoid conflicts):

<template>
    <div id="heatmap_container_unique_id"/>
</template>

However VueJs can work with scoped html, by using their ref attribute instead of the standard id attribute:

<template>
    <div ref="heatmap_container"/>
</template>

So no need to have unique id's this way, i.e. all heatmap container divs can have the same ref value "heatmap_container, which simplifies the code. Next I need to find the div element in the VueJs way, and pass it to your library:

let scopedHeatmapElement = this.$refs.heatmap_container;
let heatmapInstance = Heatmap(scopedHeatmapElement, {...});

Hopefully this is ok for you.

Thanks! Bart

[nswamy14]

Hi @bartbutenaers , Let me review this PR. Will let you know.

Thanks, NSwamy

[nswamy14]

Done. Thanks for the PR.

[nswamy14]

@bartbutenaers If interested, do check out my new framework - "PDF-Frame" for PDF/Canvas graphics. It provides component support for Vue and Nuxt frameworks.

Github link: PDF-Frame npm: pdf-frame-vue npm: pdf-frame-nuxt

[bartbutenaers]

@nswamy14, Thanks a lot for the fast response!!!

BTW Your pdf-frame looks also very nice. But first I am going to focus on your heatmap library ;-)

[nswamy14]

@bartbutenaers, I've merged the pull request, but I still need to build and release the new npm patch. I'll update you about it today.

[bartbutenaers]

@nswamy14, It might be that in the next week I will do a couple of other (small) pull requests, or feature requests. If you want you can publish it afterwards to npm, all at once. That would save you some time...

[nswamy14]

@bartbutenaers Sure.