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

lucify-negative-bar-chart-range-selector

v0.5.1

Published

A React component that shows a negative/positive bar chart in which you can select a range of bars

Downloads

19

Readme

A selectable positive-negative bar chart React component

A controlled bar chart React component that shows positive and negative bars and that allows users to select a range of bars. Built using React and D3.js.

Animated GIF of component

This is a pre-release of a package belonging to the Lucify platform. It has been published to satisfy dependencies of other packages. Any APIs may change without notice.

Installation

Add lucify-negative-bar-chart-range-selector along with its dependencies (React.js and D3.js) to your project's dependencies:

$ npm install react d3 lucify-negative-bar-chart-range-selector --save

Require it in your Javascript:

ES5

var LucifyBarChartRangeSelector = require('lucify-negative-bar-chart-range-selector').default;

ES6

import LucifyBarChartRangeSelector from 'lucify-negative-bar-chart-range-selector';

Now you can use it like any other React component.

Props

  • data (required): The array of data objects. Has the following format:

[ { pos: 4, neg: 30, }, { pos: 28, neg: 10, }, { pos: 2, neg: 11, }, { pos: 2, neg: 19, }, { pos: 5, neg: 14, }, { pos: 5, neg: 19, }, { pos: 8, neg: 30, }, { pos: 5, neg: 18, } ];


- `selectedRange`: An array of two integers that denote the indices of the
selected range.
- `height`: The height of the component in pixels. Default: `160`
- `width`: The width of the component in pixels. Default: `1000`
- `margin`: An object with `top`, `bottom`, `left` and `right` properties that
denote internal margins for the chart.
Default: `{ top: 5, right: 2, bottom: 20, left: 10 }`
bars. The first member of each array is a string of the `key` property of the
bar, and the second member of the array is a string of the fill color.
- `onChange`: The function that should be called when the selection range
changes. Is passed a two-member array that includes the extent of the
selection in based on the `key` value of the bar groups.
- `xTickFormat`: Function that formats x axis tick labels. Is passed the index and data item.
- `negativeColor`: Color for negative bars. Defaults to 'red'.
- `positiveColor`: Color for positive bars. Defaults to 'green'.
- `yTickFormat`: Function that formats y axis tick labels. 
- `xTickValues`: An array of the values that should be displayed on the x axis.
- `rangeFormat`: Function that formats the x axis labels when selecting a range.
Default: the identity function
- `onMouseOver`: Function to be called when the user hovers on a bar group. Is
passed an object parameter that contains the `index` (key value of the group)
and `value` (total value of the group) properties.
- `onMouseLeave`: Function to be called when the user no longer hovers on a bar
group.
- `incompleteDataIndices`: An array of the indices of the bar groups that should
be displayed with a thatched pattern. Useful for indicating if some data is
incomplete. Default: `[]`

## Development

Build the Javascript files into `lib/` with:

```shell
$ npm run build

Or build the development version and start watching for changes with:

$ npm run dev

To serve the example page on port 3000 and see changes live, start Gulp:

$ gulp

Then point your browser to http://localhost:3000/

Developing as part of a project

To develop this component in tandem with a parent project using npm link, first link this project to the parent project:

$ cd path_to_this_project
$ npm link
$ cd path_to_parent_project
$ npm link lucify-negative-bar-chart-range-selector

Then link the parent project's React folder to this project:

$ cd path_to_parent_project
$ cd node_modules/react
$ npm link
$ cd path_to_this_project
$ npm link react

This is needed in order to prevent React from being loaded twice.

Note that if you do not use Webpack to build your parent project, the development build will likely not work. You can build the production version while watching for changes by running node_modules/.bin/webpack -p --watch.