1.1.1 • Published 4 years ago

@finnssmith/histoslider v1.1.1

Weekly downloads
-
License
MIT
Repository
-
Last release
4 years ago

histoslider Circle CI

Greenkeeper badge

finnssmith Fork

A fork of https://github.com/samhogg/histoslider.

  • Updates the react-motion dependency to be compatible with React 16 and 17,
  • Fixes the Histoslider for touch screens, where it was previously completely broken,
  • Removes unused files, scripts, imports, and props.

Original README

A D3 based histogram slider component for React. Useful for exploring distributions of things within data visualisations.

Usage

histoslider has a few peer dependencies. Make sure these are installed before you go any further.

  • react
  • react-dom
  • d3-array
  • d3-format
  • d3-scale

Then, to install,

yarn add @finnssmith/histoslider

Yay, glad we got that out of the way.

Component API

  <Histoslider
    // An array of objects to create the histogram
    data={[
      {
        x0: 0,    // Start of the bucket
        x: 1,     // End of the bucket
        y: 100    // Value
      },
      {
        x0: 1,    // Start of the bucket
        x: 2,     // End of the bucket
        y: 120    // Value
      },
      ...
    ]}
    // How much to pad the slider and histogram by, defaults to 20
    padding={20}
    // The extent of the selection, this doesn't have to be sorted (and you shouldn't sort it to store it)
    selection={[number, number]}
    // A function to handle a change in the selection
    onChange={array => { console.log(array) }}
  />

Check PropTypes for more options.

1.1.1

4 years ago

1.1.0

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago