Search code examples
javascriptangularcal-heatmap

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

Solution

  • 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