react-vega

react-vega copied to clipboard

Hello. I came across this library last week and it looked like a great way of porting charts created with Altair to a React app but getting started was a challenge.

tl;dr

• Add a complete example in the README
• Use tooltip instead of hover as hover doesn't seem to work. Possibly related issue.

My experience trying to use react-vega

1. Try to follow approach 1
2. Create BarChart.js, copy and paste the example.
3. Notice ... // See the rest in packages/react-vega demo/stories/vega/spec1.js. Go there.
4. Why does it have a $schema property? Do I need to add that to the example I copy/pasted? It also has data, should I copy that as well? I guess I'll just try to copy everything that was missing.
5. Now I see main.js. Oh const barData, I guess I don't need the data from spec1.js after all? But why table: [...]? Maybe I need to include elements in this array? But what kind of elements? Scrolls down the page. Oh approach 3 has an example I can copy, nice.

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 },
  ],
};

6. Now I just need to copy over the rest of main.js and add <BarChart data={barData} signalListeners={signalListeners} />.
7. Tries to run.

index.js:27 TypeError: Cannot read property 'usermeta' of undefined
    at eval (vega-embed.js:4040)
    at Generator.next (<anonymous>)
    at eval (vega-embed.js:168)
    at new Promise (<anonymous>)
    at __awaiter (vega-embed.js:164)
    at embed (vega-embed.js:4036)
    at wrapper (vega-embed.js:4274)
    at VegaEmbed.createView (VegaEmbed.js:176)
    at VegaEmbed.componentDidMount (VegaEmbed.js:94)
    at commitLifeCycles (react-dom.development.js:22101)
    at commitLayoutEffects (react-dom.development.js:25344)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at commitRootImpl (react-dom.development.js:25082)
    at unstable_runWithPriority (scheduler.development.js:697)
    at runWithPriority$2 (react-dom.development.js:12149)
    at commitRoot (react-dom.development.js:24922)
    at finishSyncRender (react-dom.development.js:24329)
    at performSyncWorkOnRoot (react-dom.development.js:24307)
    at scheduleUpdateOnFiber (react-dom.development.js:23698)
    at updateContainer (react-dom.development.js:27103)
    at eval (react-dom.development.js:27528)
    at unbatchedUpdates (react-dom.development.js:24433)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:27527)
    at Object.render (react-dom.development.js:27608)
    at evaluate (index.js? [sm]:7)
    at ro (eval.ts:63)
    at e.value (transpiled-module.ts:1024)
    at e.value (manager.ts:373)
    at e.value (manager.ts:349)
    at compile.ts:621
    at l (runtime.js:45)
    at Generator._invoke (runtime.js:274)
    at Generator.forEach.e.<computed> [as next] (runtime.js:97)
    at r (asyncToGenerator.js:3)
    at i (asyncToGenerator.js:25)

8. What does that mean? Searches Google for answers, finds nothing.
9. Ok, maybe my project is screwed up. I'll try again in a codesandbox containing the bar chart example and nothing else.

index.js:27 TypeError: Cannot read property 'usermeta' of undefined
    at eval (vega-embed.js:4040)
    at Generator.next (<anonymous>)
    at eval (vega-embed.js:168)
    at new Promise (<anonymous>)
    at __awaiter (vega-embed.js:164)
    at embed (vega-embed.js:4036)
    at wrapper (vega-embed.js:4274)
    at VegaEmbed.createView (VegaEmbed.js:176)
    at VegaEmbed.componentDidMount (VegaEmbed.js:94)
    at commitLifeCycles (react-dom.development.js:22101)
    at commitLayoutEffects (react-dom.development.js:25344)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
    at invokeGuardedCallback (react-dom.development.js:440)
    at commitRootImpl (react-dom.development.js:25082)
    at unstable_runWithPriority (scheduler.development.js:697)
    at runWithPriority$2 (react-dom.development.js:12149)
    at commitRoot (react-dom.development.js:24922)
    at finishSyncRender (react-dom.development.js:24329)
    at performSyncWorkOnRoot (react-dom.development.js:24307)
    at scheduleUpdateOnFiber (react-dom.development.js:23698)
    at updateContainer (react-dom.development.js:27103)
    at eval (react-dom.development.js:27528)
    at unbatchedUpdates (react-dom.development.js:24433)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:27527)
    at Object.render (react-dom.development.js:27608)
    at evaluate (index.js? [sm]:7)
    at ro (eval.ts:63)
    at e.value (transpiled-module.ts:1024)
    at e.value (manager.ts:373)
    at e.value (manager.ts:349)
    at compile.ts:621
    at l (runtime.js:45)
    at Generator._invoke (runtime.js:274)
    at Generator.forEach.e.<computed> [as next] (runtime.js:97)
    at r (asyncToGenerator.js:3)
    at i (asyncToGenerator.js:25)

10. Ok, well at least my project isn't screwed up. Maybe I can find some clues in the issue tracker? Fix example bugs + typing wonkiness? This looks promising. Sounds like a different issue, but hey, aaron-fuleki included a code sandbox link! And it works!

11. Why does his sandbox work while mine doesn't? His spec is defined as a variable instead of being passed directly into createClassFromSpec(). I don't see why that would make any difference, but worth a shot...and the usermeta error is gone! Also some axes appeared:

Progress!

What else is different? The data.

const data = {
  table: [
    { category: "A", amount: 28 },
    { category: "B", amount: 55 },
    { category: "C", amount: 43 },
    { category: "D", amount: 91 },
    { category: "E", amount: 81 },
    { category: "F", amount: 53 },
    { category: "G", amount: 19 },
    { category: "H", amount: 89 },
  ],
};

I'll copy that over to my sandbox. Now a chart appeared!

No idea what those errors are but something is rendering, so I'll take this as a win. The final ~~(working)~~ sandbox. Edit: CodeSandbox react-vega examples appear to be broken (see comments below).

Deploy preview for react-vega ready!

Built with commit 2299fea3288072e6056007d32f3346789fc9b271

https://deploy-preview-201--react-vega.netlify.app

I was messing around with react-vega on CodeSandbox early today and at some point it broke.

Weirdly, the sandbox worked fine when I exported it as a zip and ran it locally. Not sure how Code Sandbox could suddenly stop working with react-vega...adding Code Sandboxes to the README may not be a good suggestion afterall.

Thank you for your work. I am quite behind on a few tasks so will try to visit this when I can.

I recreated the CodeSandbox example in a repo and deployed it to GH Pages. The CodeSandbox is broken, but the same code runs fine on GH Pages 🤷

aaron-fuleki's sandbox is also broken with the same error. It definitely worked at one point...I guess CodeSandbox changed to somehow become incompatible with react-vega.

TODO:

• [ ] swap out CodeSandbox example