Package Exports
- react-vega
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-vega) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-vega 
Convert Vega spec into React class conveniently, inspired by this tutorial by @pbeshai
Install
# via npm
npm install react-vega --save
# or via bower
bower install react-vega --saveExample Usage
There are two approaches to use this libary.
Approach#1 Create class from spec, then get a React class to use
BarChart.js
See the rest of the spec in barChart.json.
import React, { PropTypes } from 'react';
import {createClassFromSpec} from 'react-vega';
export default createClassFromSpec('BarChart', {
"width": 400,
"height": 200,
"padding": {"top": 10, "left": 30, "bottom": 30, "right": 10},
"data": [{ "name": "table" }],
"signals": [
{
"name": "hover", "init": null,
"streams": [
{"type": "@bar:mouseover", "expr": "datum"},
{"type": "@bar:mouseout", "expr": "null"}
]
}
],
... // See the rest in barChart.json
});main.js
import React from 'react';
import ReactDOM from 'react-dom';
import BarChart from './BarChart.js';
const barData = {
table: [
{"x": 1, "y": 28}, {"x": 2, "y": 55},
{"x": 3, "y": 43}, {"x": 4, "y": 91},
{"x": 5, "y": 81}, {"x": 6, "y": 53},
...
]
};
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,
"padding": {"top": 10, "left": 30, "bottom": 30, "right": 10},
"data": [{ "name": "table" }],
"signals": [
{
"name": "hover", "init": null,
"streams": [
{"type": "@bar:mouseover", "expr": "datum"},
{"type": "@bar:mouseout", "expr": "null"}
]
}
],
... // See the rest in barChart.json
}
const barData = {
table: [
{"x": 1, "y": 28}, {"x": 2, "y": 55},
{"x": 3, "y": 43}, {"x": 4, "y": 91},
{"x": 5, "y": 81}, {"x": 6, "y": 53},
...
]
};
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 from createClassFromSpec have these properties
These properties corresponds to Vega's View Component API
- width
- height
- padding
- viewport
- renderer
However, for data. There is a slight different. As it takes an Object with keys being dataset names defined in the spec's data field.
- data
Any signal defined in the spec can be listened to via these listeners.
- onSignal[...] - Include all signals defined in the spec automatically.
For example, to listen to signal hover, add handler for onSignal+capitalize(hover)
<Vega spec={spec} data={barData} onSignalHover={handleHover}/>License
© 2016 Krist Wongsuphasawat (@kristw) Apache-2.0 License