Intergrating cal-heatmap with Angular2 +

Question

Am trying to integrate cal-heatmap to my Angular 9 project , the officiel doc for this JS library is on : cal-heatmap official

I made install via: npm i cal-heatmap , but there is no module to import in my project .

in my main component.html i insterted code like this : ( but i didn't get any calendar as a result )

can any one please help me intergrating initial calendar-heatmap for the project and thanks !

<div id="cal-heatmap">
<script type="text/javascript">
    let cal = new CalHeatMap();
    cal.init({
        data: "data/datas.json",
        domain: "day",                 
        subDomain: "hour",             
        range: 10,                     
        browsing: true,
        cellSize: 15
    });
</script>
</div>

and when i initialize in ngOnInit(){ .. } like :

ngOnInit() {
        let cal = new CalHeatMap();
        cal.init({
            itemSelector: "#calheatmap",
            domain: "month",
            subDomain: "day",
            cellSize: 20,
            subDomainTextFormat: "%d",
            range: 1,
            displayLegend: false
        });
    }

i got this error :

See this url, they addressed similar issue: https://github.com/wa0x6e/cal-heatmap/issues/207 — Nirmalya Roy, Feb 24 '21 at 17:21

score 1 · Answer 1 · answered Feb 24 '21 at 15:02

1

after installation of npm you need do below things:

import css cdn in index.html
import calheatmap like below at the top component.ts. And it will be like below.

import { Component, OnInit, VERSION } from "@angular/core";
import CalHeatMap from "cal-heatmap";
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "Angular " + VERSION.major;
  ngOnInit() {
    let cal = new CalHeatMap();
    cal.init({
      itemSelector: "#cal-heatmap",
      domain: "day",
      range: 1,
      displayLegend: false
    });
  }
}

html file will be like below

<div id="cal-heatmap"></div>

For more details please follow the link:

https://angular-ivy-tmknxh.stackblitz.io

answered Feb 24 '21 at 15:02

Nirmalya Roy

623
4
8

Thanks for replying , I made those changes , but i can't see the calendar appearing as before ! ( maybe this is related to importing css to index.html ( why index.html ) ) ie : when i inspect i can see the div added , but it still empty . @Nirmalya Roy – Coder Feb 24 '21 at 15:59
1

Index HTML CSS is for the css of cal heatmap.. as angular has only one HTML file. For you it's not loading may be because data.json file.. please add the data.json file in asset folder..and take it like.. './assets/data.json' or give me the data.json so that I can debug – Nirmalya Roy Feb 24 '21 at 16:24
Thanks for replying again ! , i used the code that you have used in your reply ( so there is no data.json ) I used : ngOnInit() { let cal = new CalHeatMap(); cal.init({ itemSelector: "#cal-heatmap", domain: "day", range: 1, displayLegend: false }); @Nirmalya – Coder Feb 24 '21 at 16:28
Did you added the -->
in component.html? Or that also you added in index.html.. div should be added in corresponding HTML file of the component – Nirmalya Roy Feb 24 '21 at 16:33
yes am sure about that but i have a console error : modules-datasets-datasets-module-ngfactory.js:52709 ERROR TypeError: cal_heatmap__WEBPACK_IMPORTED_MODULE_8__.CalHeatMap is not a constructor at MapviewComponent.ngOnInit (modules-datasets-datasets-module-ngfactory.js:59786) @Nirmal – Coder Feb 24 '21 at 16:35
Try to uninstall and install cal-heatmap again – Nirmalya Roy Feb 24 '21 at 16:36
Did you installed d3 js in ur project? If there is no other purpose of that d3 js .. uninstall it.. – Nirmalya Roy Feb 24 '21 at 16:40
Yes i have re-installed the cal-heatmap , and also installed the D3 js , ( i need the d3 library for other stuff , also d3 is prequerities of cal-heatmap ) . i got again the error : " ERROR TypeError: cal_heatmap__WEBPACK_IMPORTED_MODULE_8__.CalHeatMap is not a constructor " – Coder Feb 24 '21 at 16:59
Mostly d3js version is creating issue.. inside cal-heatmap already d3 js is getting installed.. in my stackblitz link I didn't install d3 still it worked as cal-heatmap have the d3 – Nirmalya Roy Feb 24 '21 at 17:13
can you please give me the link of stackblitz where i can see/modify code ? – Coder Feb 24 '21 at 17:18
unfortnutally , i installed version 3.5.17 of D3 but i still getting error that new CalHeatMap is not a constructor ! @Nirmalya – Coder Feb 25 '21 at 10:04

score 0 · Accepted Answer · answered Feb 25 '21 at 12:59

finaly i found the main issue was when importing CalHeatMap module ; ( thanks to @Nirmalya Roy guide )

for importing module it mus be like :

import CalHeatMap from 'cal-heatmap'

instead of import like :

import {CalHeatMap} from ‘cal-heatmap’

so the main issue were the curly braces ' { } ' ( they must be ommited )

other hint : for anyone using CalHeatmap v3.x.x the d3 library should have version 3.5.17

to be closed

score 0 · Answer 3 · edited Jun 27 '21 at 13:03

I spent more than half a day resolving this issue. Nothing worked. I closely followed https://stackblitz.com/edit/angular-ivy-tmknxh

At the end I managed to solve the issue with:

"cal-heatmap": "^3.6.2",
"d3": "5.16.0"

and

import * as CalHeatMap from 'cal-heatmap';

...

ngOnInit() {
    const cal = new CalHeatMap();
    cal.init({
        itemSelector: '#cal-heatmap',
        domain: 'day',
        range: 1,
        displayLegend: false,
    });
}

Intergrating cal-heatmap with Angular2 +

3 Answers3