feat: add data support for layer (#66)

vega · Oct 18, 2019 · b63e3ae · b63e3ae
1 parent 6d409a4
commit b63e3ae
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 6 deletions.
diff --git a/packages/react-vega-demo/stories/index.stories.js b/packages/react-vega-demo/stories/index.stories.js
@@ -6,5 +6,6 @@ import ReactVegaDemo from './ReactVegaDemo';
 import ReactVegaLiteDemo from './ReactVegaLiteDemo';
 import './style.css';
 
-storiesOf('react-vega', module).add('Vega', () => <ReactVegaDemo />);
-storiesOf('react-vega', module).add('VegaLite', () => <ReactVegaLiteDemo />);
+storiesOf('react-vega', module)
+  .add('Vega', () => <ReactVegaDemo />)
+  .add('VegaLite', () => <ReactVegaLiteDemo />);
diff --git a/packages/react-vega-demo/stories/style.css b/packages/react-vega-demo/stories/style.css
@@ -1,6 +1,5 @@
 body{
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  text-align: center;
 }
 
 h1, h2, h3{

diff --git a/packages/react-vega-demo/stories/vegaLiteWithLayers.stories.js b/packages/react-vega-demo/stories/vegaLiteWithLayers.stories.js
@@ -0,0 +1,36 @@
+/* eslint-disable react/jsx-filename-extension */
+import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { storiesOf } from '@storybook/react';
+import { VegaLite } from '../../react-vega/src';
+
+const DATA = {
+  myData: [
+    { 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 SPEC = {
+  description: "A simple bar chart with embedded data.",
+  layer: [
+    {
+      data: { name: "myData" },
+      encoding: {
+        x: { field: "a", type: "ordinal" },
+        y: { field: "b", type: "quantitative" }
+      },
+      mark: "bar"
+    }
+  ]
+};
+
+storiesOf('react-vega', module)
+  .add('VegaLite with layers', () => <><VegaLite spec={SPEC} data={DATA} /><div><pre>{JSON.stringify(SPEC, null, 2)}</pre></div></>);
diff --git a/packages/react-vega/src/Vega.tsx b/packages/react-vega/src/Vega.tsx
@@ -5,7 +5,6 @@ import isFunction from './utils/isFunction';
 import { PlainObject, View, ViewListener } from './types';
 import shallowEqual from './utils/shallowEqual';
 import { NOOP } from './constants';
-import getDatasetNamesFromSpec from './utils/getDatasetNamesFromSpec';
 
 export type VegaProps = VegaEmbedProps & {
   data?: PlainObject;
@@ -53,10 +52,10 @@ export default class Vega extends React.PureComponent<VegaProps> {
   };
 
   update() {
-    const { data, spec } = this.props;
+    const { data } = this.props;
 
     if (data) {
-      const datasetNames = getDatasetNamesFromSpec(spec).filter(name => data[name]);
+      const datasetNames = Object.keys(data);
 
       if (this.vegaEmbed.current && datasetNames.length > 0) {
         this.vegaEmbed.current.modifyView(view => {