7.6.0 • Published 3 years ago

react-vega v7.6.0

Weekly downloads
15,094
License
Apache-2.0
Repository
github
Last release
3 years ago

react-vega NPM version

Use vega or vega-lite in react application smoothly!

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

Install

npm install react vega vega-lite react-vega --save

Versions

  • react-vega@7.x.x is rewritten in typescript with several API changes and now support both vega and vega-lite. If you are upgrading from react-vega or react-vega-lite version 6.x.x to 7.x.x, read this migration guide.
  • 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.

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.ts.

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 packages/react-vega-demo/stories/vega/spec1.ts
});

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);
}

const signalListeners = { hover: handleHover };

ReactDOM.render(
  <BarChart data={barData} signalListeners={signalListeners} />,
  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 packages/react-vega-demo/stories/vega/spec1.ts
}

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

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

const signalListeners = { hover: handleHover };

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

Approach#3 Use <VegaLite> generic class and pass in spec for dynamic component.

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

Also see packages/react-vega-demo/stories/ReactVegaLiteDemo.jsx for details

main.js

import React from 'react'
import ReactDOM from 'react-dom'
import { VegaLite } from 'react-vega'

const spec = {
  width: 400,
  height: 200,
  mark: 'bar',
  encoding: {
    x: { field: 'a', type: 'ordinal' },
    y: { field: 'b', type: 'quantitative' },
  },
  data: { name: 'table' }, // note: vega-lite data attribute is a plain object instead of an array
}

const barData = {
  table: [
    { a: 'A', b: 28 },
    { a: 'B', b: 55 },
    { a: 'C', b: 43 },
    { a: 'D', b: 91 },
    { a: 'E', b: 81 },
    { a: 'F', b: 53 },
    { a: 'G', b: 19 },
    { a: 'H', b: 87 },
    { a: 'I', b: 52 },
  ],
}

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

API

Props

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

Props from vega-embed's API

mode, theme, defaultStyle, renderer, logLovel, tooltip, loader, patch, width, height, padding, actions, scaleFactor, config, editorUrl, sourceHeader, sourceFooter, hover, i18n, downloadFileName

CSS

class and style of the container <div> element

  • className:String
  • style:Object

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. If you are using <VegaLite> make sure to enable your tooltip in the the spec, as described here.

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

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

  • signalListeners:Object

All signals defined in the spec can be listened to via signalListeners. For example, to listen to signal hover, attach a listener like this

// better declare outside of render function
const signalListeners = { hover: handleHover };

<Vega spec={spec} data={barData} signalListeners={signalListeners} />

Event listeners

  • 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} />
7.6.0

3 years ago

7.5.1

3 years ago

7.5.0

4 years ago

7.4.4

4 years ago

7.4.3

4 years ago

7.4.2

5 years ago

7.4.1

5 years ago

7.4.0

5 years ago

7.3.0

6 years ago

7.2.1

6 years ago

7.2.0

6 years ago

7.1.2

6 years ago

7.1.1

6 years ago

7.1.0

6 years ago

7.0.1

6 years ago

7.0.0

6 years ago

7.0.0-alpha.0

6 years ago

6.1.0

6 years ago

6.0.1

7 years ago

6.0.0

7 years ago

5.0.0

7 years ago

4.0.2

7 years ago

4.0.1

7 years ago

4.0.0

7 years ago

3.1.2

8 years ago

3.1.1

8 years ago

3.1.0

8 years ago

2.3.2

8 years ago

3.0.1

8 years ago

3.0.0

8 years ago

2.3.1

9 years ago

2.3.0

9 years ago

2.2.0

9 years ago

2.1.2

9 years ago

2.1.1

9 years ago

2.1.0

9 years ago

2.0.0

9 years ago

1.1.1

9 years ago

1.1.0

10 years ago

1.0.1

10 years ago

1.0.0

10 years ago

0.1.2

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago

0.0.2

10 years ago

0.0.1

10 years ago