0

I am evaluating angular 2.0 beta (with typescript) and tried to include some libraries via the module system. But somehow this does not work for c3.js / nv.d3.js. Can anyone bump me into the right direction on how to c3.js / nv.d3.js to work?

  • tsconfig.json has "module": "system" (recommended by Angular 2.0)
  • tsconfig.json has "allowSyntheticDefaultImports": true (allows synthetic default import of d3.js)
  • import d3 from 'd3' works
  • import c3 from 'c3' does not work
  • import nv from 'nvd3' does not work
  • The c3.js site says import via AMD and require.js is possible.
  • The system.js site says it can import AMD modules as well

I am no JS pro, but there is no export statement in c3.js / nv.d3.js file, also there is no typescript definition in tsd. I'd create one and share it, but am not familiar enough with the concepts needed.

SnareChops
  • 13,175
  • 9
  • 69
  • 91
Rob
  • 664
  • 7
  • 16

4 Answers4

1

Seems I have to wait for the library developers to add a .d.ts declaration or add an export. Possible solutions for the meantime seem to be:

this: Load "Vanilla" Javascript Libraries into Node.js

or: just declare c3 / nv and assume it's there at runtime

  • add to index.html: <script src="libs/c3.js"></script>

  • and in typescript: declare var c3;

  • add to index.html: <script src="libs/nv.d3.js"></script>

  • and in typescript: declare var nv;
Community
  • 1
  • 1
Rob
  • 664
  • 7
  • 16
1

I'm using Angular2 2.0.0-beta.17 and in a similar situation, building a proof of concept app with graphs and charts.

First, I imported the libraries using npm.

Next, these libraries are untyped Javascript but we can do something about that. if you are using Typings (and I recommend it) you can add these definitions to your typings.json (mine are under ambient):

"d3": "github:DefinitelyTyped/DefinitelyTyped/d3/d3.d.ts",
"nvd3": "github:DefinitelyTyped/DefinitelyTyped/nvd3/nvd3.d.ts",
"c3": "github:DefinitelyTyped/DefinitelyTyped/c3/c3.d.ts

I also had trouble importing. So, as a workaround I declared them:

declare var d3, nv: any;

Also, have a look at Krispo's ng2-nvd3 project which supplies an nvd3 component for Angular2

This project only worked for after I made the declarations changes.

I hope this helps -- I'm learning Angular2 myself so if anyone has some best practices, please share. The "declare... any" workaround does not seem optimal.

Thanks, Cody

Cody Coggins
  • 21
  • 4
0

Assuming you are installing nvd3 as an npm package. In the file where you bootstrap your app module do :

import 'nvd3/build/nv.d3';

import {enableProdMode} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';

declare var process: any;
if (process.env.NODE_ENV === 'production') {
  enableProdMode();
} else {
}

platformBrowserDynamic().bootstrapModule(AppModule);

And in the component .ts file do :

declare var nv:any;
Rohit Rane
  • 2,790
  • 6
  • 25
  • 41
0

This is how I implemented c3 chart in Ionic 2 -- similar to what Rob mentioned earlier :

Include the following links to index.html

  <link rel="stylesheet" type="text/css" href="assets/js/c3.min.css">
  <script type="text/javascript" src="assets/js/d3.min.js"></script>
  <script type="text/javascript" src="assets/js/c3.min.js"></script>

Below is the implementation in the .ts file: 

import {Component} from '@angular/core';
declare var c3;
declare var d3;

@Component({
  templateUrl: 'graph.html'
})

export class GraphC3 {
  constructor() {

  }

ngOnInit() {
    let chartoutput = c3.generate({
        bindto: '#chart',
        data: {
        columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
        ]
        }
    });
}

}

In your graph.html file includes 

<div id="chart"></div>
Kongpop U-Yen
  • 41
  • 2