react component using vega

Question

I'm trying to use vega from a react component but without luck (might be installation problem).

I wrote a component with the following structure:

import vega from 'vega';

class Chart extends React.PureComponent {
...
  componentDidMount() {
    vega.parse(...)
  }
}

But I get a TypeError: Cannot read property 'parse' of undefined

This leads me to conclude that the installation did not go as expected.

During installation, I do have problems since vega uses node-gyp and I'm on a windows environment (and also behind a proxy)

When installing node-gyp I got some problems with node-canvas (although according to the documents, vega should work without it)

Most of the documents disregard the installation of vega.

Has anyone tried installing it and using it with import - does it work?

Answer 1

For anyone interested in this topic, it seems that the documentation is insufficient but here is how I got it to work:

For installation, npm install vega might be enough for you if you're not on windows or under a proxy.

If you do have problems, these steps helped me:

1. install the windows-build-tools ( npm --add-python-to-path='true' install --global --production windows-build-tools )
2. npm install node-gyp
3. install GTK2 (see https://github.com/Automattic/node-canvas/wiki/Installation---Windows#install-manually )
4. npm install vega

As for usage, make sure that you get an example for the version of vega you intend to use (eg an example for vega 2 won't work on vega 3)

Answer 2

Alternative Approach:

So I am adding Vega charts to a react app and was having some problems getting vega charts to work "out of the box" even following this article . I then discovered react-vega and it works great.

Steps to get it to work:

• npm install react vega-lib react-vega --save

• create new react class :

  import {createClassFromSpec} from 'react-vega'; export default createClassFromSpec('MyChart', { ...VEGA SPEC OBJ...});

• use <MyChart data={mydata}> as a standard react component.