current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 0 down vote favorite
1

I don't manage to use cal-heatmap in my Angular2 project written in TypeScript. Any help on how to get this going would be appreciated.

I am using webpack (webpack.config.js) to bundle the application. Here is the ts.config. I installed cal-heatmap with npm and type definitions with tsd. In my application's TypeScript code I would do like:

import * as calheatmap from 'cal-heatmap';

However, when I open the application in a browser calheatmap remains undefined and nothing is imported. The library is based on d3 and d3 itself works. Using the same package installation procedure the following just works inside my application:

    import * as d3 from 'd3';

I suspect cal-heatmap does not work because its JS code (from NPM) or the ts.d are not compatible but I don't know how to remedy this.

Any hints would are appreciated, thanks!

share|improve this question
    
try this: /// <reference path="./pathToYourLIbTypings/cal-heatmap.d.ts" /> – Langley Jan 12 at 14:32
    
Hi, thanks for your reply. This doesn't fix it and IIRC the reference notation is not required for recent versions of Typescript anymore. – OG Dude Jan 12 at 14:39
1  
typescriptlang.org/Handbook compare the "Ambient Internal Modules" with "Ambient External Modules" – Langley Jan 12 at 14:59
    
I'll check that link, thanks. Hopefully this part of the documentation is still up to date. – OG Dude Jan 12 at 15:29
up vote 1 down vote

I ran into something similar.
https://github.com/wa0x6e/cal-heatmap/issues/192

I was using systemjs though. Funny thing is the CalHeatMap object loaded perfectly in the browser, but didn't loaded in the component.


I imported d3js and c3js like that and they loaded perfectly. One thing I noticed is that, the other libraries keep the functionalities inside an object(i.e d3 in d3js); whereas in cal-heatmap they're returning a function(CalHeatMap is actually a function if you look inside the source-code).

share|improve this answer
up vote 0 down vote

Ok, so I got this to work. Never mind the typings for the cal-heatmap module. They don't export anything so there are not useful in this case. No need to install.

You can then do:

import * as CalHeatMap from 'cal-heatmap';
...
new CalHeatMap().init({});

Before, I was trying to call init directly on CalHeatMap without instantiating, kind of n00b.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.