diff --git a/packages/react-vega-demo/stories/index.stories.js b/packages/react-vega-demo/stories/index.stories.js index 300437a2..127e130c 100644 --- 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', () => ); -storiesOf('react-vega', module).add('VegaLite', () => ); +storiesOf('react-vega', module) + .add('Vega', () => ) + .add('VegaLite', () => ); diff --git a/packages/react-vega-demo/stories/style.css b/packages/react-vega-demo/stories/style.css index d6590515..2c281abf 100644 --- 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 new file mode 100644 index 00000000..9218dc2c --- /dev/null +++ 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', () => <>
{JSON.stringify(SPEC, null, 2)}
); diff --git a/packages/react-vega/src/Vega.tsx b/packages/react-vega/src/Vega.tsx index 21501e7c..18465689 100644 --- 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 { }; 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 => {