vega / react-vega Goto Github PK

View Code? Open in Web Editor NEW

371.0 371.0 66.0 17.69 MB

Convert Vega spec into React class conveniently

Home Page: http://vega.github.io/react-vega/

License: Other

JavaScript 16.70% CSS 0.87% TypeScript 81.60% Shell 0.84%

react-vega'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's People

Contributors

Stargazers

Watchers

react-vega's Issues

Write tests

Switch to Vega dev config.

See https://github.com/vega/vega-lite-dev-config/. The typescript setup isn't done yet, though.

isPaddingSame is not being executed in componentDidUpdate

At line https://github.com/kristw/react-vega/blob/master/src/Vega.jsx#L83, isPaddingSame isn't being executed.

Warnings from webpack compilation

I've installed react-vega-lite with:

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

However using it simply as:

import * as React from 'react';
import styled from 'styled-components';
import VegaLite from 'react-vega-lite';

interface ConfusionMatrixProps {};

const spec = {
  "description": "A simple bar chart with embedded data.",
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"}
  }
};

const barData = {
  "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}
  ]
};

const ConfusionMatrix = styled(
  ({className}) => {
    return (
      <VegaLite spec={spec} data={barData} className={className} />
    );
  }
)``;

export default ConfusionMatrix;

export {
  ConfusionMatrixProps
};

Results in these warnings:

WARNING in ./node_modules/vega-themes/build/index.js
Module Warning (from ./node_modules/source-map-loader/index.js):
(Emitted value instead of an instance of Error) Cannot find source file '../src/index.ts': Error: Can't resolve '../src/index.ts' in '/home/cmcdragonkai/Projects/inverter-analysis/node_modules/vega-themes/build'
 @ ./node_modules/vega-embed/build/src/embed.js 8:0-38 131:35-41
 @ ./node_modules/react-vega/esm/Vega.js
 @ ./node_modules/react-vega/esm/index.js
 @ ./node_modules/react-vega-lite/esm/VegaLite.js
 @ ./node_modules/react-vega-lite/esm/index.js
 @ ./src/components/ConfusionMatrix.tsx
 @ ./src/controllers/Confusion.tsx
 @ ./src/controllers/index.tsx
 @ ./src/index.tsx

WARNING in ./node_modules/vega-themes/build/theme-dark.js
Module Warning (from ./node_modules/source-map-loader/index.js):
(Emitted value instead of an instance of Error) Cannot find source file '../src/theme-dark.ts': Error: Can't resolve '../src/theme-dark.ts' in '/home/cmcdragonkai/Projects/inverter-analysis/node_modules/vega-themes/build'
 @ ./node_modules/vega-themes/build/index.js 5:0-47 5:0-47
 @ ./node_modules/vega-embed/build/src/embed.js
 @ ./node_modules/react-vega/esm/Vega.js
 @ ./node_modules/react-vega/esm/index.js
 @ ./node_modules/react-vega-lite/esm/VegaLite.js
 @ ./node_modules/react-vega-lite/esm/index.js
 @ ./src/components/ConfusionMatrix.tsx
 @ ./src/controllers/Confusion.tsx
 @ ./src/controllers/index.tsx
 @ ./src/index.tsx

WARNING in ./node_modules/vega-themes/build/theme-excel.js
Module Warning (from ./node_modules/source-map-loader/index.js):
(Emitted value instead of an instance of Error) Cannot find source file '../src/theme-excel.ts': Error: Can't resolve '../src/theme-excel.ts' in '/home/cmcdragonkai/Projects/inverter-analysis/node_modules/vega-themes/build'
 @ ./node_modules/vega-themes/build/index.js 1:0-49 1:0-49
 @ ./node_modules/vega-embed/build/src/embed.js
 @ ./node_modules/react-vega/esm/Vega.js
 @ ./node_modules/react-vega/esm/index.js
 @ ./node_modules/react-vega-lite/esm/VegaLite.js
 @ ./node_modules/react-vega-lite/esm/index.js
 @ ./src/components/ConfusionMatrix.tsx
 @ ./src/controllers/Confusion.tsx
 @ ./src/controllers/index.tsx
 @ ./src/index.tsx

WARNING in ./node_modules/vega-themes/build/theme-fivethirtyeight.js
Module Warning (from ./node_modules/source-map-loader/index.js):
(Emitted value instead of an instance of Error) Cannot find source file '../src/theme-fivethirtyeight.ts': Error: Can't resolve '../src/theme-fivethirtyeight.ts' in '/home/cmcdragonkai/Projects/inverter-analysis/node_modules/vega-themes/build'
 @ ./node_modules/vega-themes/build/index.js 6:0-69 6:0-69
 @ ./node_modules/vega-embed/build/src/embed.js
 @ ./node_modules/react-vega/esm/Vega.js
 @ ./node_modules/react-vega/esm/index.js
 @ ./node_modules/react-vega-lite/esm/VegaLite.js
 @ ./node_modules/react-vega-lite/esm/index.js
 @ ./src/components/ConfusionMatrix.tsx
 @ ./src/controllers/Confusion.tsx
 @ ./src/controllers/index.tsx
 @ ./src/index.tsx

WARNING in ./node_modules/vega-themes/build/theme-ggplot2.js
Module Warning (from ./node_modules/source-map-loader/index.js):
(Emitted value instead of an instance of Error) Cannot find source file '../src/theme-ggplot2.ts': Error: Can't resolve '../src/theme-ggplot2.ts' in '/home/cmcdragonkai/Projects/inverter-analysis/node_modules/vega-themes/build'
 @ ./node_modules/vega-themes/build/index.js 2:0-53 2:0-53
 @ ./node_modules/vega-embed/build/src/embed.js
 @ ./node_modules/react-vega/esm/Vega.js
 @ ./node_modules/react-vega/esm/index.js
 @ ./node_modules/react-vega-lite/esm/VegaLite.js
 @ ./node_modules/react-vega-lite/esm/index.js
 @ ./src/components/ConfusionMatrix.tsx
 @ ./src/controllers/Confusion.tsx
 @ ./src/controllers/index.tsx
 @ ./src/index.tsx

WARNING in ./node_modules/vega-themes/build/theme-latimes.js
Module Warning (from ./node_modules/source-map-loader/index.js):
(Emitted value instead of an instance of Error) Cannot find source file '../src/theme-latimes.ts': Error: Can't resolve '../src/theme-latimes.ts' in '/home/cmcdragonkai/Projects/inverter-analysis/node_modules/vega-themes/build'
 @ ./node_modules/vega-themes/build/index.js 7:0-53 7:0-53
 @ ./node_modules/vega-embed/build/src/embed.js
 @ ./node_modules/react-vega/esm/Vega.js
 @ ./node_modules/react-vega/esm/index.js
 @ ./node_modules/react-vega-lite/esm/VegaLite.js
 @ ./node_modules/react-vega-lite/esm/index.js
 @ ./src/components/ConfusionMatrix.tsx
 @ ./src/controllers/Confusion.tsx
 @ ./src/controllers/index.tsx
 @ ./src/index.tsx

WARNING in ./node_modules/vega-themes/build/theme-quartz.js
Module Warning (from ./node_modules/source-map-loader/index.js):
(Emitted value instead of an instance of Error) Cannot find source file '../src/theme-quartz.ts': Error: Can't resolve '../src/theme-quartz.ts' in '/home/cmcdragonkai/Projects/inverter-analysis/node_modules/vega-themes/build'
 @ ./node_modules/vega-themes/build/index.js 3:0-51 3:0-51
 @ ./node_modules/vega-embed/build/src/embed.js
 @ ./node_modules/react-vega/esm/Vega.js
 @ ./node_modules/react-vega/esm/index.js
 @ ./node_modules/react-vega-lite/esm/VegaLite.js
 @ ./node_modules/react-vega-lite/esm/index.js
 @ ./src/components/ConfusionMatrix.tsx
 @ ./src/controllers/Confusion.tsx
 @ ./src/controllers/index.tsx
 @ ./src/index.tsx

WARNING in ./node_modules/vega-themes/build/theme-vox.js
Module Warning (from ./node_modules/source-map-loader/index.js):
(Emitted value instead of an instance of Error) Cannot find source file '../src/theme-vox.ts': Error: Can't resolve '../src/theme-vox.ts' in '/home/cmcdragonkai/Projects/inverter-analysis/node_modules/vega-themes/build'
 @ ./node_modules/vega-themes/build/index.js 4:0-45 4:0-45
 @ ./node_modules/vega-embed/build/src/embed.js
 @ ./node_modules/react-vega/esm/Vega.js
 @ ./node_modules/react-vega/esm/index.js
 @ ./node_modules/react-vega-lite/esm/VegaLite.js
 @ ./node_modules/react-vega-lite/esm/index.js
 @ ./src/components/ConfusionMatrix.tsx
 @ ./src/controllers/Confusion.tsx
 @ ./src/controllers/index.tsx
 @ ./src/index.tsx

After compilation, if we attempt to use it I get an extra error:

Vega.js:1 Uncaught ReferenceError: regeneratorRuntime is not defined
    at Vega.js:1
    at Vega.js:1
    at Module../node_modules/react-vega/esm/Vega.js (Vega.js:2)
    at __webpack_require__ (bootstrap:19)
    at Module../node_modules/react-vega/esm/index.js (index.js:1)
    at __webpack_require__ (bootstrap:19)
    at Module../node_modules/react-vega-lite/esm/VegaLite.js (VegaLite.js:1)
    at __webpack_require__ (bootstrap:19)
    at Module../node_modules/react-vega-lite/esm/index.js (index.js:1)
    at __webpack_require__ (bootstrap:19)

So here is my webpack.config.js:

const process = require('process');
const path = require('path');
const webpack = require('webpack');
const { TsConfigPathsPlugin } = require('awesome-typescript-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.tsx',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devtool: 'source-map',
  devServer: {
    host: process.env.INVERTER_ANALYSIS_HOST,
    port: process.env.INVERTER_ANALYSIS_PORT,
    watchContentBase: true,
    historyApiFallback: true,
    contentBase: path.resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json'],
    plugins: [
      new TsConfigPathsPlugin()
    ]
  },
  module: {
    rules: [
      { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: '!!ejs-compiled-loader!src/index.ejs',
      inject: 'body',
      xhtml: true,
      filename: 'index.html',
      templateParameters: {
        title: 'Inverter Analysis'
      }
    })
  ]
};

Here's my tsconfig.json:

{
  "compilerOptions": {
    "outDir": "./dist",
    "sourceMap": true,
    "moduleResolution": "node",
    "noImplicitAny": false,
    "module": "ES6",
    "target": "ESNEXT",
    "jsx": "react",
    "baseUrl": "./src",
    "paths": {
      "@formbay/*": ["*"]
    }
  },
  "include": [
    "./src/**/*"
  ]
}

Need an appropriate loader

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"]
      }
    },
    {
      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.

Remove vega-lite stuff

The Vega-Lite react component is deprecated.

Remove https://github.com/vega/react-vega/tree/master/packages/react-vega-lite
deprecate the npm package with https://docs.npmjs.com/cli/deprecate
Update the storybook demo

Default onParseError should at least log to the console

Suggestion: in Vega.jsx, change this:

  onParseError() {},

to this:

  onParseError(ex) {
     console.log(ex)
  },

That would have saved me many hours of debugging. I didn't realize that this could be overridden when I implemented ReactVega.

Broken package: replace lazynerd-devtools

v5 does not work. The error is Uncaught ReferenceError: regeneratorRuntime is not defined.

vega-lite support

Would it be possible to add support for vega-lite.
It could be passed as an option to the props, for example
<Vega spec={spec} renderer="vega-lite" />

Can't get simple spec to work

I'm trying to render the follow spec:

<Vega
  spec={{
    "$schema": "https://vega.github.io/schema/vega-lite/v3.2.1.json",
    "config": {"mark": {"tooltip": null}, "view": {"height": 300, "width": 400}},
    "data": {
      "values": [
        {"x": "1", "y": "2", "z": "3"},
        {"x": "2", "y": "4", "z": "6"},
        {"x": "3", "y": "6", "z": "9"}
      ]
    },
    "encoding": {
      "x": {"field": "x", "type": "ordinal"},
      "y": {"field": "y", "type": "quantitative"}
    },
    "mark": "bar"
  }}
  onParseError={(...args) => {console.info(...args)}}
/>

which fails with:

TypeError: a.data.filter is not a function
    at b.createView (Vega.js:2)
    at b.componentDidMount (Vega.js:1)

Am I using this component wrong or is it limited in what use cases/specs it supports? The spec works fine when I try it at https://vega.github.io/editor/#/edited

Case sensitivity issues

On Windows, adding "react-vega": "^6.0.1", "vega": "^5.4.0" to the package.json file gives the following error when running storybook:

ERROR in ./node_modules/react-vega/esm/Vega.js
Module not found: Error: Cannot find file: 'vega.jsx' does not match the corresponding name on disk: '.\node_modules\react-vega\src\Vega.jsx'.
This works correctly with a create-create-app but not in storybook. My understanding is that case-sensitive-paths-webpack-plugin is in both react-scripts and storybook, so not sure that is the issue.

And suggestions on how to fix this?

System:

OS: [Windows10]
Browser: [chrome]
Framework: [react]
Version: latest
Additional context
BTW.. there are no problems running on Ubuntu... this seems to be just a Windows issue. Also, not sure this relevant, but we are using yarn 1.16.0

Remove unused static methods in Vega.jsx?

isSameSpec(a, b) isn't used (anymore), for example.

Hover handlers don't work in Vega-Lite

Support: typescript

./~/react-vega/dist/react-vega.min.js Module not found: Can't resolve 'vega'

Clean install, straight out of the example, does not seem to be resolved by removing and re-installing all of the plugins

Old `d3-format` dependency (missing support for ~)

Within the latest build (4.0.0), [email protected] is installed under d3-scale. This causes usage of a format like .1~% (using ~ which is new in 1.3) to fail when used for axis formatting (but I think works fine when applied to text marks).

Works fine with [email protected] directly. Also, because a dist file is generated for this react component, there's no workaround I can think of from my project using react-vega.

An example failing spec is:

{
  "$schema": "https://vega.github.io/schema/vega/v3.json",
  "data": [
    {
      "name": "data_0",
      "values": [ 1, 2, 3 ]
    }
  ],
  "width": 200,
  "height": 21,
  "axes": [
    {
      "format": ".1~%",
      "orient": "bottom",
      "scale": "x",
      "tickCount": {
        "signal": "ceil(width/40)"
      }
    }
  ],
  "marks": [
    {
      "encode": {
        "update": {
          "fill": {
            "value": "transparent"
          },
          "stroke": {
            "value": "#4c78a8"
          },
          "x": {
            "field": "data",
            "scale": "x"
          },
          "y": {
            "mult": 0.5,
            "signal": "height"
          }
        }
      },
      "from": {
        "data": "data_0"
      },
      "style": [
        "point"
      ],
      "type": "symbol"
    }
  ],
  "scales": [
    {
      "domain": {
        "data": "data_0",
        "field": "data"
      },
      "name": "x",
      "range": [
        0,
        {
          "signal": "width"
        }
      ],
      "type": "linear"
    }
  ]
}

Lighter dependencies

It would be great to reduce the dev-dependencies to only the essential so that we don't end up in a situation where some library is not supported anymore soon. Maybe once we switch to typescript (#25), we can use that instead of Babel.

Named Data Sources?

Do you have any plans to support named data sources in Vega (link)? For large layered charts it can be much more performant.

Issue with date values on x axis (only when pass dynamic)

I have simple line chart that's works fine when I hard-code values in specification but when I pass them dynamically It looks like they're all drawn in the beginning. <Vega spec={spec} width={width} height={height} data={{ table: sampleData}}/>.

  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 500,
  "height": 200,
  "padding": 5,
  "autosize": {
    "type": "fit",
    "contains": "padding",
    "resize": true,
  },
  "data": [
    {
      "name": "table",
      "values": [
        {
          "key_as_string": "2019-02-01 00:00:00",
          "doc_count": 679,
        },
        {
          "key_as_string": "2019-02-02 00:00:00",
          "doc_count": 832,
        },
        {
          "key_as_string": "2019-02-03 00:00:00",
          "doc_count": 433,
        },
        {
          "key_as_string": "2019-02-04 00:00:00",
          "doc_count": 264,
        },
      ],
      "format": {
        "type": "json",
        "parse": {
          "key_as_string": "date",
          "doc_count": "number",
        },
      },
    },
  ],
  "scales": [
    {
      "name": "x",
      "type": "time",
      "nice": true,
      "range": "width",
      "domain": {
        "data": "table",
        "field": "key_as_string",
      },
    },
    {
      "name": "y",
      "type": "linear",
      "range": "height",
      "nice": true,
      "zero": true,
      "domain": {
        "data": "table",
        "field": "doc_count",
      },
    },
  ],
  "axes": [
    {
      "orient": "bottom",
      "scale": "x",
      "labelAngle": 0,
      "format": "%Y-%m-%d",
      "encode": {
        "labels": {
          "update": {
            "angle": {
              "value": 90,
            },
            "align": {
              "value": "left",
            },
            "baseline": {
              "value": "middle",
            },
          },
        },
      },
    },
    {
      "orient": "left",
      "scale": "y",
    },
  ],
  "marks": [
    {
      "type": "line",
      "from": {
        "data": "table",
      },
      "encode": {
        "enter": {
          "x": {
            "scale": "x",
            "field": "key_as_string",
          },
          "y": {
            "scale": "y",
            "field": "doc_count",
          },
          "strokeWidth": {
            "value": 2,
          },
        },
      },
    },
  ],
}```

tickCount property doesn't work

I'm trying to get a react-vega visualization to work with the tickCount property. I pass in data from an API call (successfully) but the tickCount property doesnt render the amount of ticks that I specify on the xAxis (although it does on the Y). I have made sure that the xAxis values I pass are numbers (from 0 to n) and are formatted the same way as the Y axis numbers. This is very frustrating - can you give advice on how to fix?

"axes": [
  {"orient": "bottom", "scale": "x",
    "title": "Date",
    "labelPadding": 10,
    "tickCount": 50
  },
  {"orient": "left", "scale": "y",
    "labelPadding": 10,
    "tickCount": 5
  }
],

Support Vega 3.x

Vega is now at v3.0.0-beta.25. The Vega homepage & examples have been updated to use the v3 schemas.

See the porting guide for info on converting v2 schemas to v3.

Demo broken

Hi,

Looks like the demo linked from the README is broken:

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

react-vega-lite Example page is down

The example page (for ostensibly this page) https://vega.github.io/react-vega-lite/ is down. The page gives the following error

main.js:36 Uncaught ReferenceError: regeneratorRuntime is not defined
    at main.js:36
    at Object.<anonymous> (main.js:36)
    at e (main.js:36)
    at Object.<anonymous> (main.js:36)
    at e (main.js:36)
    at Object.<anonymous> (main.js:36)
    at e (main.js:36)
    at Object.<anonymous> (main.js:36)
    at e (main.js:36)
    at Object.<anonymous> (main.js:36)
``

Dynamically loading data does not seem to work

I am attempting to render a chart from data in a json file and the datapoints do not seem to render. Source code for a repro case is here. A screenshot of the output case is attached.

Any help would be greatly appreciated. Thanks.

Broken link to spec example in react-vega/packages/react-vega README

The provided spec example titled BarChart.js contains a link to the rest of the spec, as the file was truncated for the sake of brevity. This link, however, leads here - or (less?) more specifically, nowhere! I was also unable to locate the file manually, and the only file named spec1.js contains a spec for a table, and not for a BarChart.

Add loading indicator

While the view is loading, we should give the user some feedback.

Feature request: set signals from props

It would be useful to be able to set signal values from props, before the first draw.

Currently I'm doing this in onNewView, which isn't too efficient as I have to draw the vega plot twice.

'prop-types' warning in v2

It'd be great if this pretty common warning was addressed in v2:

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.

It's likely that the corresponding version of Vega will be around for some time before v3 becomes dominant. How feasible would it be to release [email protected] with the fix?

goldred color scheme does not work

Hello.

I'm using a createClassFromSpec function. I describe a color scale there

{ name: 'out-bar-color', domain: { data: 'outcoming', field: 'id' }, range: { scheme: 'reds' }, type: 'ordinal', },

It works. But if I use "goldred" color scheme instead of "reds" I will get an empty image instead of a plot. I can use this scheme in vega online editor though. Do I understand correctly that some color schemes are not supported? Could you specify which ones and are there any plans to fix it.

Thank you

add eslint and prettier

Possibly with https://github.com/vega/vega-lite-dev-config/.

className/style props

Hi @kristw, thanks for the wrapper! Vega is great by itself and is even better with React!

What do you think of adding className prop to <Vega />? This can be useful for positioning the vis without having to wrap it into an extra component. Maybe having an option to add style to the div that's being rendered can be useful to somebody.

The only complexity this will create will be in slightly changed conditions inside the lifecycle hooks (we may need to re-render because of a new className or style, but keep vega stuff as is).

Buggy render in pie chart

I'm running into a problem where the donut chart doesn't render at all when I hover off one of the arcs. When I do hover over a component, only that portion of the pie chart renders and the rest of the chart remains invisible.

I've attached a "hover" signal that I've bound to a react function via the signalListeners prop.
When I remove the "hover" signal, everything renders normally.

Spec.

{
            "width": 330,
            "height": 330,
            "autosize": "none",
      
            "signals": [
                {
                    "name": "hover",
                    "value": {},
                    "on": [
                        {"events": "arc:mouseover", "update": "datum"},
                        {"events": "arc:mouseout", "update": "{}"}
                    ]
                },
                { 
                    "name": "click",
                    "on": [
                        {"events": "arc:click", "update": "warn(datum)"}
                    ]
                }
            ],
        
            "data": [
                {
                    "name": "table",
                    "transform": [
                    {
                        "type": "aggregate",
                        "groupby": ["pipeline_status"]                    
                    },
                    {
                        "type": "pie",
                        "field": "count",
                        "sort": true
                    },
                    {
                        "type": "formula",
                        "expr": "datum.pipeline_status + ': ' + datum.count", "as": "tooltip"
                    }
                    ]
                },
            ],
            "scales": [
                {
                    "name": "color",
                    "type": "ordinal",
                    "domain": {"data": "table", "field": "pipeline_status"},
                    "range": {"scheme": "category20"}
                },
            ],
            "marks": [
                {
                    "type": "arc",
                    "from": {"data": "table"},
                    "encode": {
                        "enter": {
                            "fill": {"scale": "color", "field": "pipeline_status"},
                            "x": {"signal": "width / 2"},
                            "y": {"signal": "height / 2"},
                            "startAngle": {"field": "startAngle"},
                            "endAngle": {"field": "endAngle"},
                            "innerRadius": {"value": 90},
                            "outerRadius": {"signal": 150},
                            "tooltip": {"field": "tooltip"},
                        },
                        "update": {
                            "startAngle": {"field": "startAngle"},
                            "endAngle": {"field": "endAngle"},
                            "strokeWidth": {"value": 0},
                        },
                        "hover": {
                            "stroke": { "value" : "red"},
                            "strokeWidth": {"value" : 2}
                        }
                    }
                },
            ]}

I have no idea what's wrong and would appreciate some guidance. Thanks!

Visualization crashes on new data input

For my tree visualization project I have one data source.

Because I have a lot of nodes I would like to be able to filter them. When filtering a node from the original data, the visualization crashes.

I think it has something to do with the fact that Vega, adds properties to the original data source. When I console.log(treeOne) in the example beneath all objects have these properties: children, depth, id, parent, x, y, symbol(vega_id).

Underneath a small example in which the problem occurs.

/*
 *
 * App
 *
 */
import React, { Component } from 'react';
import Vega from 'react-vega';
import './App.css';

import _reject from 'lodash/reject';

import  { treeOne, treeTwo, treeSpec } from './Constants';

class App extends Component {
  constructor(props) {
      super(props);

      this.state = {
        treeData: {
          tree: treeOne
        }
      };

      this.setTreeOneFourNodes = this.setTreeOneFourNodes.bind(this);
      this.setTreeOneFiveNodes = this.setTreeOneFiveNodes.bind(this);
      this.setTreeTwo = this.setTreeTwo.bind(this);
  }

  setTreeOneFourNodes() {
    const treeOnefourNodes = _reject(treeOne, {'id': "4"});

    this.setState({
      treeData: {
        tree: treeOnefourNodes
      }
    });
  }

  setTreeOneFiveNodes() {
    this.setState({
        treeData: {
            tree: treeOne
        }
    });
  }

  setTreeTwo() {
    this.setState({
        treeData: {
          tree: treeTwo
        }
    });
  }

  render() {
    const { treeData } = this.state;

    return (
      <div className="App">
        <button type="button" onClick={this.setTreeOneFourNodes} >Tree one: filter node</button>
        <button type="button" onClick={this.setTreeOneFiveNodes} >Tree one complete</button>
        <button type="button" onClick={this.setTreeTwo} >Tree two</button>
        <Vega spec={treeSpec} data={treeData} />
      </div>
    );
  }
}

export default App;

/*
 *
 * Constants
 *
 */
export const treeSpec = {
    "width": 300,
    "height": 300,

    "data": [
        {
            "name": "tree",
            "transform": [
                {
                    "type": "stratify",
                    "key": "id",
                    "parentKey": "parent"
                },
                {
                    "type": "tree",
                    "method": "tidy",
                    "size": [{"signal": "height"}, {"signal": "width"}],
                    "as": ["y", "x", "depth", "children"]
                }
            ]
        },
        {
            "name": "links",
            "source": "tree",
            "transform": [
                {
                    "type": "treelinks",
                    "key": "id"
                },
                {
                    "type": "linkpath",
                    "orient": "horizontal",
                    "shape": "diagonal"
                }
            ]
        }
    ],

    "scales": [
        {
            "name": "color",
            "type": "ordinal",
            "range": {"scheme": "category20"}
        }
    ],

    "marks": [
        {
            "type": "path",
            "from": {"data": "links"},
            "encode": {
                "update": {
                    "path": {"field": "path"},
                    "stroke": {"value": "#ccc"}
                }
            }
        },
        {
            "type": "symbol",
            "from": {"data": "tree"},
            "key": "id",
            "interactive": true,
            "encode": {
                "enter": {
                    "size": {"value": 400},
                    "stroke": {"value": "black"}
                },
                "update": {
                    "x": {"field": "x"},
                    "y": {"field": "y"},
                    "fill": {"scale": "color", "field": "level"}
                }
            }
        }
    ]
};

export const treeOne = [
    {
        "id": "1"
    }, {
        "id": "2",
        "parent": "1"
    }, {
        "id": "3",
        "parent": "1"
    }, {
        "id": "4",
        "parent": "1"
    }, {
        "id": "5",
        "parent": "1"
    }
];


export const treeTwo = [
    {
        "id": "10"
    }, {
        "id": "11",
        "parent": "10"
    }, {
        "id": "3",
        "parent": "10"
    }
];

Tooltips specified in the spec do not work

I tried a few examples from https://vega.github.io/vega-tooltip/vega-examples.html
None of the specs resulted in visible tooltips.

Support for vega.update() options

Add options for the vega.update() function, such as ease, duration, etc. It could be passed as an option to the props, for example
<Vega spec={spec} options={{duration: 300}} />

Pass Vega-Lite directly to embed

Vega embed handles Vega-Lite differently and so we should pass Vega-Lite directly instead of compiling to Vega.

Tooltips do not work.

I run the example locally. The tooltip works. But When I set same react-vega options in my code, no tooltip show up. I tried to set vega-tooltip manually. No tooltip either. I am really confused. Is any one get similar problem? Thanks for any tip.

Support Vega v4

When is react-vega going to handle vega 4.x ?

Most of the example on the website are running with it such as
"$schema": "https://vega.github.io/schema/vega/v4.json"
"data: [ { "name": "table" }];

which makes react-vega hard to implement at first

Thanks

Memory leaks with continue updated input data

I found these is memory leaks problem with continue updated input data. The browser will crash after a while. Is it caused by react-vega, vega-embed or vega? Thanks.

BTW. The problem can be repeated by clicking the 'Update data' button in the example frequently.

Re-render registers additonal hover listeners

Using React + Redux, whenever i change something in my store in redux, and it renders the change (for example opening a drawer) , an additional event listener for both mouseover and mouseout seems to be added, slowing down the rendered graphs significantly with each change.

const WorldMap = ({data}) => {
    return {
        <Vega spec={spec} data={data}>
    }
}

const spec = {
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "width": "width.value",
  "height": 400,
  "autosize": "none",

  "encode": {
    "update": {
      "fill": {"signal": "background"}
    }
  },

  "signals": [
    {
      "name": "width",
      "value": 400,
      "update": "(containerSize()[0] || 400)",
      "on": [{
        "events": {"source": "window", "type": "resize"},
        "update": "containerSize()[0]"
      }]
    },
    {
      "name": "type",
      "value": "mercator"
    },
    {
      "name": "scale", "value": 300,
      "on": [{
        "events": {"type": "wheel", "consume": true},
        "update": "clamp(scale * pow(1.0005, -event.deltaY * pow(16, event.deltaMode)), 200, 1000)"
      }]
    },
    {
      "name": "cloned",
      "value": null,
      "on": [{
        "events": "mousedown",
        "update": "copy('projection')"
      }]
    },
    {
      "name": "start",
      "value": null,
      "on": [{
        "events": "mousedown",
        "update": "invert(cloned, xy())"
      }]
    },
    {
      "name": "angles",
      "value": [0, 0],
      "on": [{
        "events": "mousedown",
        "update": "[rotateX, centerY]"
      }]
    },
    {
      "name": "drag", "value": null,
      "on": [{
        "events": "[mousedown, window:mouseup] > window:mousemove",
        "update": "invert(cloned, xy())"
      }]
    },
    {
      "name": "delta", "value": null,
      "on": [{
        "events": {"signal": "drag"},
        "update": "[drag[0] - start[0], start[1] - drag[1]]"
      }]
    },
    {
      "name": "rotateX", "value": 0,
      "on": [{
        "events": {"signal": "delta"},
        "update": "angles[0] + delta[0]"
      }]
    },
    {
      "name": "centerY", "value": 50,
      "on": [{
        "events": {"signal": "delta"},
        "update": "clamp(angles[1] + delta[1], -60, 60)"
      }]
    },
    {"name": "tx", "update": "width / 2"},
    {"name": "ty", "update": "height / 2"},

    {"name": "graticuleDash", "value": 0},
    {"name": "borderWidth", "value": 1},
    {"name": "background", "value": "#ffffff"}
  ],

  "projections": [
    {
      "name": "projection",
      "type": {"signal": "type"},
      "scale": {"signal": "scale"},
      "rotate": [{"signal": "rotateX"}, 0, 0],
      "center": [0, {"signal": "centerY"}],
      "translate": [{"signal": "tx"}, {"signal": "ty"}]
    }
  ],

  "data": [{"name": "states"},
  {
    "name": "world",
    "url": "world-110m.json",
    "format": {
      "type": "topojson",
      "feature": "countries"
    },
    "transform": [
      {"type": "lookup", "from": "states", "key": "id", "fields": ["id"], "values": ["state"]}
    ]
  },
  {
    "name": "graticule",
    "transform": [
      {"type": "graticule"}
    ]
  }
  ],

  "marks": [
    {
      "type": "shape",
      "from": {"data": "world"},
      "encode": {
        "update": {
          "strokeWidth": {"signal": "+borderWidth"},
          "stroke": {"value": "#ffffff"},
          "fill": [
            {"test": "datum.state === null", "value": "#03ABE5"},
            {"test": "datum.state", "value": "#6CC74B"},
            {"test": "!datum.state", "value": "red"},
            {"value": "#03ABE5"}],
          "zindex": {"value": 0}
        },
        "hover": {
          "strokeWidth": {"value": "2"},
          "stroke": {"value": "black"},
          "zindex": {"value": 1}
        }
      },
      "transform": [
        {"type": "geoshape", "projection": "projection"}
      ]
    }
  ]
}

Cannot install dependency via yarn

There is some problem with node-sass and node-gyp, which I wonder if it is really needed for this project.

Perhaps remove the lazynerd-devtools bundle and just import projects that are really needed?

Do we need vega-tooltip to use Vega Tooltip?

As https://github.com/vega/react-vega/tree/master/packages/react-vega and https://www.npmjs.com/package/react-vega show that it needs vega-tooltip to display tooltip, but the demo does not use, while tooltip works fine. It is confusing. Do we need vega-tooltip to use Vega Tooltip?

Tooltip Handler Support Needed

The 3.x.x vega view API has a tooltip handler that would be nice to add to react-vega. I've created a PR with the work that I think is necessary for this support in #17. Let me know if there is anything that needs updating or was missed in the PR or if there is already support for it and I can update/close accordingly.

[2/4] Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version "~5.2".
error Found incompatible module

Seems like the issue is in these lines inside package.json:

"engines": {
    "node": "~5.2"
},

My node version is 6.6.0.

Given that there are no problems with react-vega in node 6, could you please make the engine restriction a bit less strict please? Hope it takes only one minute.