This is a simple react component which renders a histogram as prepared by the graphistry server.
To see this run, type
npm install && npm run dev and it should open in your browser.
It takes four props:
binsis a normalized set of bins. See
example/app.jsto see how bins are set.
onSelectis fired every time the component's selection changes. The payload is an array of selected bins. Again, see
example/app.jsto see it work.
onZoomis fired every time the user uses the scrollwheel/two-finger-touch on the timebar. It actually gets the zoom event, and one outstanding unit of work is to wire up that event to our falcor server.
onHighlightis fired every time the user mouses over or out of a bar. It is called with the bin index to highlight.
Currently there's an issue with react versions when using this in viz-app.
To use in viz-app, make sure
vizapp/packages/viz-app/package.json has the correct version for
@graphistry/timebar. You'll find the timebar component wired up in
onHighlight functions are wired up.
The problem right now is that the selection area when you click+drag isn't mapping to actual position because the way that I'm getting bounds (in
src/index.js in this repo, tagged with a comment at the top) seems to be breaking in viz-app (I think due to version mismatch).