Last active
May 10, 2019 12:56
-
-
Save lucguillemot/d45805e52b22f2c7ca60bbacb358b2ea to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import * as React from "react"; | |
| import * as vega from "vega"; | |
| // Note the added prop "handleClick" | |
| export const Chart = ({ spec, handleClick }) => { | |
| const chartContainer = React.useRef(null); | |
| React.useEffect( | |
| () => { | |
| const createView = async () => { | |
| try { | |
| const view = new vega.View(vega.parse(spec), { | |
| logLevel: vega.Warn, | |
| renderer: "svg", | |
| container: chartContainer.current, | |
| hover: true | |
| }); | |
| // Wait for Vega's scenegraph to finish rendering | |
| const awaitedView = await view.runAsync(); | |
| // Attach the handler to the signal defined | |
| // in Vega's chart spec. | |
| awaitedView.addSignalListener("clickOnCategory", handleClick); | |
| } catch (error) { | |
| console.log(error); | |
| } | |
| }; | |
| createView(); | |
| }, | |
| // Notice the added dependency "handleClick" | |
| [spec, handleClick] | |
| ); | |
| return <div ref={chartContainer} />; | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment