@netbek/react-vega v6.1.2

react-vega

Convert Vega spec into React class conveniently, inspired by this tutorial by @pbeshai

Versions

• react-vega@6.x.x is same with 5.x.x but output are in different directories and exported as both commonjs and es module.
• react-vega@5.x.x uses vega again.
• react-vega@4.x.x has same interface with 3.x.x except it uses the lightweight vega-lib instead of vega.
• react-vega@3.x.x was update with breaking changes to support vega@3.0.
• If you are looking to use react with vega@2.x, please use react-vega@2.3.1.

Examples

• http://vega.github.io/react-vega/

Install

npm install react vega react-vega --save

Example code

There are two approaches to use this library.

Approach#1 Create class from spec, then get a React class to use

BarChart.js

See the rest of the spec in spec1.js.

import React, { PropTypes } from 'react';
import {createClassFromSpec} from 'react-vega';

export default createClassFromSpec('BarChart', {
  "width": 400,
  "height": 200,
  "data": [{ "name": "table" }],
  "signals": [
    {
      "name": "tooltip",
      "value": {},
      "on": [
        {"events": "rect:mouseover", "update": "datum"},
        {"events": "rect:mouseout",  "update": "{}"}
      ]
    }
  ],
  ... // See the rest in demo/src/vega/spec1.js
});

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import BarChart from './BarChart.js';

const barData = {
  table: [...]
};

function handleHover(...args){
  console.log(args);
}

ReactDOM.render(
  <BarChart data={barData} onSignalHover={handleHover}/>,
  document.getElementById('bar-container')
);

Approach#2 Use <Vega> generic class and pass in spec for dynamic component.

Provides a bit more flexibility, but at the cost of extra checks for spec changes.

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import Vega from 'react-vega';

const spec = {
  "width": 400,
  "height": 200,
  "data": [{ "name": "table" }],
  "signals": [
    {
      "name": "tooltip",
      "value": {},
      "on": [
        {"events": "rect:mouseover", "update": "datum"},
        {"events": "rect:mouseout",  "update": "{}"}
      ]
    }
  ],
  ... // See the rest in demo/src/vega/spec1.js
}

const barData = {
  table: [...]
};

function handleHover(...args){
  console.log(args);
}

ReactDOM.render(
  <Vega spec={spec} data={barData} onSignalHover={handleHover}/>,
  document.getElementById('bar-container')
);

Props

React class Vega and any output class from createClassFromSpec have these properties:

Basic

• className:String
• style:Object

Props correspond to Vega's View Component API

• width:Number
• height:Number
• padding:Object
• renderer:String
• logLevel:Number
• background:String
• tooltip:Function
• enableHover:Boolean -- equivalent to calling view.hover()

Data

• data:Object

For data, this property takes an Object with keys being dataset names defined in the spec's data field, such as:

var barData = {
  table: [{"x": 1,  "y": 28}, {"x": 2,  "y": 55}, ...]
};

Each value can be an array or function(dataset){...}. If the value is a function, Vega's vis.data(dataName) will be passed as the argument dataset.

var barData = {
  table: function(dataset){...}
};

In the example above, vis.data('table') will be passed as dataset.

• onSignal*XXX* - Include all signals defined in the spec automatically.

All signals defined in the spec can be listened to via these properties. For example, to listen to signal hover, attach a listener to onSignal+capitalize('hover')

 <Vega spec={spec} data={barData} onSignalHover={handleHover}/>

Event handlers

• onNewView:Function Dispatched when new vega.View is constructed and pass the newly created view as argument.
• onParseError:Function Dispatched when vega cannot parse the spec.

Static function

Any class created from createClassFromSpec will have this method.

• Chart.getSpec() - return spec

Frequently Asked Questions

How to use Vega Tooltip?

You can pass the vega-tooltip handler instance to the tooltip property.

import { Handler } from 'vega-tooltip';

 <Vega spec={spec} data={barData} tooltip={new Handler().call} />