Convert Vega spec into React class conveniently, inspired by this tutorial by @pbeshai
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
.
npm install react vega-lib react-vega --save
There are two approaches to use this libary.
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
});
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')
);
Provides a bit more flexibility, but at the cost of extra checks for spec changes.
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')
);
React class Vega
and any output class from createClassFromSpec
have these properties:
- 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: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
.
- onSignalXXX - 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}/>
- 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.
Any class created from createClassFromSpec
will have this method.
- Chart.getSpec() - return
spec
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} />
© 2016-2017 Krist Wongsuphasawat (@kristw) Apache-2.0 License