vega / react-vega-lite Goto Github PK

View Code? Open in Web Editor NEW

68.0 68.0 9.0 2.48 MB

react + vega-lite

Home Page: https://vega.github.io/react-vega-lite/

License: Other

JavaScript 100.00%

react-vega-lite's Introduction

Vega: A Visualization Grammar

Vega is a visualization grammar, a declarative format for creating, saving, and sharing interactive visualization designs. With Vega you can describe data visualizations in a JSON format, and generate interactive views using either HTML5 Canvas or SVG.

For documentation, tutorials, and examples, see the Vega website. For a description of changes between Vega 2 and later versions, please refer to the Vega Porting Guide.

Build Instructions

For a basic setup allowing you to build Vega and run examples:

Clone https://github.com/vega/vega.
Run yarn to install dependencies for all packages. If you don't have yarn installed, see https://yarnpkg.com/en/docs/install. We use Yarn workspaces to manage multiple packages within this monorepo.
Once installation is complete, run yarn test to run test cases, or run yarn build to build output files for all packages.
After running either yarn test or yarn build, run yarn serve to launch a local web server — your default browser will open and you can browse to the "test" folder to view test specifications.

This repository includes the Vega website and documentation in the docs folder. To launch the website locally, first run bundle install in the docs folder to install the necessary Jekyll libraries. Afterwards, use yarn docs to build the documentation and launch a local webserver. After launching, you can open http://127.0.0.1:4000/vega/ to see the website.

Internet Explorer Support

For backwards compatibility, Vega includes a babel-ified IE-compatible version of the code in the packages/vega/build-es5 directory. Older browser would also require several polyfill libraries:

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.4/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/runtime.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/fetch.umd.min.js"></script>

Contributions, Development, and Support

Interested in contributing to Vega? Please see our contribution and development guidelines, subject to our code of conduct.

Looking for support, or interested in sharing examples and tips? Post to the Vega discussion forum or join the Vega slack organization! We also have examples available as Observable notebooks.

If you're curious about system performance, see some in-browser benchmarks. Read about future plans in our roadmap.

react-vega-lite's People

Contributors

Stargazers

Watchers

Forkers

kaiyuzhao matt-d-rat trendingtechnology millette alukach rodrigoberlochi forkkit itscrazynewton richard-chris

react-vega-lite's Issues

Typescript loading

I have a node project using typescript and managed with yarn, and I would like to use react-vega-lite, but I can't get the example to work.

I installed the components using yarn add vega-lib vega-lite react-vega react-vega-lite. I then added the example code to my existing widget, but when I try to render it, I get runtime errors like this:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `ColumnSummaryTable`.

The code looks like:

import VegaLite from 'react-vega-lite';
...
public render()
{
const spec = {
  "description": "A simple bar chart with embedded data.",
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"}
  }
};

const data = {
  "values": [
    {"a": "A","b": 20}, {"a": "B","b": 34}, {"a": "C","b": 55},
    {"a": "D","b": 19}, {"a": "E","b": 40}, {"a": "F","b": 34},
    {"a": "G","b": 91}, {"a": "H","b": 78}, {"a": "I","b": 25}
  ]
};
return ( <VegaLite spec={ spec } data={ data } /> );
}

Stepping into React.createElement it appears that the result of the <VegaLite invocation is undefined.

This seems like a straightforward use case, but clearly something is not right. Can you tell me what is wrong?

Cannot find module: 'vega'. Make sure this package is installed.

I've been using react-vega-lite for a while. My package.json had:

    "react-vega-lite": "^2.0.2",
    "vega-lib": "^4.4.0",
    "vega-lite": "^3.0.0-rc12",
    "vega-tooltip": "^0.15.0"

I'm not sure what changed, but today I started getting Cannot find module: 'vega'. Make sure this package is installed.. I get this error with gcloud app deploy and not docker-compose up --build.

If I add vega to package.json, gcloud app deploy works.

Should vega be added to Install section?

gcloud app deploy logs:

~/data-explorer/ui (mc/card-header): gcloud app deploy --quiet
Services to deploy:

descriptor:      [/usr/local/google/home/melchang/data-explorer/ui/app.yaml]
source:          [/usr/local/google/home/melchang/data-explorer/ui]
target project:  [test-data-explorer]
target service:  [default]
target version:  [20190306t150752]
target url:      [https://test-data-explorer.appspot.com]


Beginning deployment of service [default]...
Building and pushing image for service [default]
Started cloud build [3a9d5989-69c6-471f-b1f4-f5489869e6d4].
To see logs in the Cloud Console: https://console.cloud.google.com/gcr/builds/3a9d5989-69c6-471f-b1f4-f5489869e6d4?project=317832653419
----------------------------- REMOTE BUILD OUTPUT ------------------------------
starting build "3a9d5989-69c6-471f-b1f4-f5489869e6d4"

FETCHSOURCE
Fetching storage object: gs://staging.test-data-explorer.appspot.com/us.gcr.io/test-data-explorer/appengine/default.20190306t150752:latest#1551913676024402
Copying gs://staging.test-data-explorer.appspot.com/us.gcr.io/test-data-explorer/appengine/default.20190306t150752:latest#1551913676024402...
/ [1 files][ 11.0 MiB/ 11.0 MiB]                                                
Operation completed over 1 objects/11.0 MiB.                                     
BUILD
Already have image (with digest): gcr.io/cloud-builders/docker
Sending build context to Docker daemon  17.94MB
Step 1/12 : FROM node:9.6.1 as builder
9.6.1: Pulling from library/node
4176fe04cefe: Pulling fs layer
851356ecf618: Pulling fs layer
6115379c7b49: Pulling fs layer
aaf7d781d601: Pulling fs layer
936f8420f2e4: Pulling fs layer
eab82fe5fcf4: Pulling fs layer
da559c7b52e5: Pulling fs layer
c61f5df9eaef: Pulling fs layer
aaf7d781d601: Waiting
936f8420f2e4: Waiting
eab82fe5fcf4: Waiting
da559c7b52e5: Waiting
c61f5df9eaef: Waiting
851356ecf618: Verifying Checksum
851356ecf618: Download complete
6115379c7b49: Verifying Checksum
6115379c7b49: Download complete
4176fe04cefe: Verifying Checksum
4176fe04cefe: Download complete
936f8420f2e4: Verifying Checksum
936f8420f2e4: Download complete
eab82fe5fcf4: Verifying Checksum
eab82fe5fcf4: Download complete
c61f5df9eaef: Verifying Checksum
c61f5df9eaef: Download complete
aaf7d781d601: Verifying Checksum
aaf7d781d601: Download complete
da559c7b52e5: Verifying Checksum
da559c7b52e5: Download complete
4176fe04cefe: Pull complete
851356ecf618: Pull complete
6115379c7b49: Pull complete
aaf7d781d601: Pull complete
936f8420f2e4: Pull complete
eab82fe5fcf4: Pull complete
da559c7b52e5: Pull complete
c61f5df9eaef: Pull complete
Digest: sha256:ca12dd0664cba60c0dee18fb0cfa73336285f0d0ac915d61cb1c8a04aa0f74e6
Status: Downloaded newer image for node:9.6.1
 ---> 29831ba76d93
Step 2/12 : WORKDIR /ui
 ---> Running in 19817a3012bc
Removing intermediate container 19817a3012bc
 ---> fdc83768e03d
Step 3/12 : ENV PATH /ui/node_modules/.bin:$PATH
 ---> Running in a8f94dd3ea82
Removing intermediate container a8f94dd3ea82
 ---> 126a22dc8db2
Step 4/12 : COPY package.json /ui/package.json
 ---> d934758d9a6d
Step 5/12 : COPY src/api /ui/src/api
 ---> 659049c56af6
Step 6/12 : RUN npm install
 ---> Running in 3354e43aa456
npm WARN deprecated [email protected]: Please upgrade to kleur@3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit <https://github.com/lukeed/kleur/releases/tag/v3.0.0\> for migration path(s).
npm WARN deprecated [email protected]: CircularJSON is in maintenance only, flatted is its successor.
npm WARN notice [SECURITY] superagent has the following vulnerability: 1 low. Go here for more details: https://nodesecurity.io/advisories?search=superagent&version=3.5.2 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
npm WARN deprecated [email protected]: In 6.x, the babel package has been deprecated in favor of babel-cli. Check https://opencollective.com/babel to support the Babel maintainers

> [email protected] install /ui/node_modules/husky
> node ./bin/install.js

husky
setting up Git hooks
can't find .git directory, skipping Git hooks installation

> [email protected] install /ui/node_modules/puppeteer
> node install.js

Chromium downloaded to /ui/node_modules/puppeteer/.local-chromium/linux-637110

> [email protected] postinstall /ui/node_modules/jss
> node -e "console.log('\u001b[35m\u001b[1mLove JSS? You can now support us on open collective:\u001b[22m\u001b[39m\n > \u001b[34mhttps://opencollective.com/jss/donate\u001b[0m')"

Love JSS? You can now support us on open collective:
 > https://opencollective.com/jss/donate
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN @material-ui/[email protected] requires a peer of @material-ui/core@^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of vega-lite@^2.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of typescript@* but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/react-scripts/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm added 2407 packages in 83.909s
WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
Removing intermediate container 3354e43aa456
 ---> 99b2d3c74858
Step 7/12 : RUN npm install [email protected] -g
 ---> Running in 32f1ad34b00f
npm WARN deprecated [email protected]: This release contains bugs. Please update to [email protected] instead.
npm WARN deprecated [email protected]: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated [email protected]: Please upgrade to kleur@3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit <https://github.com/lukeed/kleur/releases/tag/v3.0.0\> for migration path(s).
npm WARN notice [SECURITY] webpack-dev-server has the following vulnerability: 1 high. Go here for more details: https://nodesecurity.io/advisories?search=webpack-dev-server&version=3.1.9 - Run `npm i npm@latest -g` to upgrade your npm version, and then `npm audit` to get more info.
/usr/local/bin/react-scripts -> /usr/local/lib/node_modules/react-scripts/bin/react-scripts.js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/react-scripts/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/react-scripts/node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ [email protected]
added 1922 packages in 40.24s
Removing intermediate container 32f1ad34b00f
 ---> b5dacd5c2ec0
Step 8/12 : COPY . /ui
 ---> b8da3dd833cc
Step 9/12 : RUN npm run build
 ---> Running in 9590a6623a63

> [email protected] build /ui
> react-scripts build
Creating an optimized production build...
Failed to compile.

./node_modules/vega-lite/build/src/spec/base.js
Cannot find module: 'vega'. Make sure this package is installed.

You can install this package by running: npm install vega.


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2019-03-06T23_12_04_451Z-debug.log
The command '/bin/sh -c npm run build' returned a non-zero code: 1
ERROR
ERROR: build step 0 "gcr.io/cloud-builders/docker" failed: exit status 1

--------------------------------------------------------------------------------

ERROR: (gcloud.app.deploy) Cloud build failed. Check logs at https://console.cloud.google.com/gcr/builds/3a9d5989-69c6-471f-b1f4-f5489869e6d4?project=317832653419 Failure status: UNKNOWN: Error Response: [2] Build failed; check build logs for details

Dockerfile here.

Upgrade to Vega-Lite 2

Vega-Lite 2 is out now. It would be awesome if this component could be updated.

cant import createClassFromLiteSpec

example says to import like below:

import { createClassFromLiteSpec } from 'react-vega-lite';

However, I think it should be updated to import like below:

import createClassFromLiteSpec from 'react-vega-lite';

Also, I wasn't able to successfully implement the bar chart example using the first way. Maybe it's because of React 16 way of creating classes seems to be different? I was able to successfully implement the bar chart example using the second way from your example.

hi Krist 👋😄

Can't set width via props

The documentation states that width and height are props on VegaLite as well as components created via createClassFromLiteSpec, however width as a prop seems to have no effect; the only way to set width seems to be within the spec.

Need an appropriate loader

@kristw sorry about that. I checked my webpack config against the one here as well and made sure I had the 'transform-object-assign' plugin as well, but it's still not working (I never seriously thought that was the issue, but still good to check I guess).

I am getting a webpack error saying I need a loader - which do I need? Here's what I have now:

config.module = {
  loaders: [
    {
      loader:  'babel-loader',
      test:    /\.jsx?$/,
      exclude: /node_modules/,
      query: {
        presets: ["react", "es2015"],
        plugins: ['transform-object-assign']
      }
    },
    {
      loader: 'style-loader!css-loader',
      test:    /\.css$/
    }, {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=10000&mimetype=application/font-woff',
    }, {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=10000&mimetype=application/font-woff2',
    }, {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=10000&mimetype=application/octet-stream',
    }, {
        test: /\.otf(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=10000&mimetype=application/font-otf',
    }, {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'file',
    }, {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=10000&mimetype=image/svg+xml',
    }, {
        test: /\.png$/,
        loader: 'file?name=[name].[ext]',
    }, {
        test: /\.jpg$/,
        loader: 'file?name=[name].[ext]',
    }
  ],
  postLoaders: []
};

And these are my errors:

ERROR in ./~/vega-lite/package.json
Module parse failed: /Users/mhong/Projects/flask-jpos/node_modules/vega-lite/package.json Unexpected token (2:9)
You may need an appropriate loader to handle this file type.
...

ERROR in ./~/datalib/package.json
Module parse failed: /Users/mhong/Projects/flask-jpos/node_modules/datalib/package.json Unexpected token (2:9)
You may need an appropriate loader to handle this file type.

No callback from onSignalHover

onSignalHover does not appear to work for me. Do I need to need to define it in the spec?

Using:
[email protected]
[email protected]
[email protected]
[email protected]

datasets top level key

I'm trying to embed a VegaLite spec into a react project.

I don't need to dynamically change the data or visualization, as the spec is being generated by the backend (w/ altair). As a result, the data is embedded using the top level datasets key, and the other information is in a vconcat.

In this scenario, in which I don't need to pass data= to the VegaLite component, would the spec be rendered appropriately?

Get data out of brush selection

It seems like it should be possible using the onSignalXXX functionality to get brush selection data out of a vega viz, similar to the onSignalHover example over on the react-vega demo page. What signal name should I be using to hook into this? I've tried onSignalBrush and onSignalSelect to no avail.

However, as mentioned in #5, I've been unable to get even onSignalHover to work, so I'm wondering if there's maybe some breakage in a recent version of the vega/vega-lite lib(s)?

For some context, I'm trying to use this in a bioinformatics application for an explorer view which lets users select points in a scatterplot and have those selections filter/populate a table view (in React) with additional information.

Thanks for all your work!

Missing install instructions in readme (peer dependencies)

It might be nice to add the prerequisites to the installation instructions (peer dependencies and peer dependencies' peer dependencies).

After adding react-vega-lite to my project, I encountered an error, which lead me to check the peer dependencies of the project in the package.json and install them. Then I got another error, which lead me to checking the peer dependencies of react-vega to install vega.

I'm happy to do a PR if you agree. Thanks!

v3 does not work

See vega/react-vega#35