npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@graphistry/timebar

v3.3.5

Published

A timebar component for the graphistry experience

Downloads

64

Readme

Graphistry Timebar

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:

  1. bins is a normalized set of bins. See example/app.js to see how bins are set.
  2. onSelect is fired every time the component's selection changes. The payload is an array of selected bins. Again, see example/app.js to see it work.
  3. onZoom is 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.
  4. onHighlight is 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 /viz-app/packages/viz-app/src/containers/timebar/components/timebar.js. The onZoom, onSelect and 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).