CODEWITHSUNDEEP
javascriptangularcal-heatmap
Coder
Coder

Reputation: 85

Intergrating cal-heatmap with Angular2 +

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 :

enter image description here

Upvotes: 0

Views: 1094

Answers (3)

matox
matox

Reputation: 987

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,
    });
}

Upvotes: 0

Coder
Coder

Reputation: 85

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

Upvotes: 0

Nirmalya Roy
Nirmalya Roy

Reputation: 713

after installation of npm you need do below things:

  1. import css cdn in index.html
  2. 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
    });
  }
}
  1. html file will be like below
<div id="cal-heatmap"></div>

For more details please follow the link:

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

Upvotes: 1

Related Questions