@aicccia/react-histogram-slider

React Histogram Slider that supports negative and positive numbers.

Usage no npm install needed!

<script type="module">
  import aiccciaReactHistogramSlider from 'https://cdn.skypack.dev/@aicccia/react-histogram-slider';
</script>

README

Demo

Github

Features

  • Supports negative and positive, or only negative or only positive values
  • Supports tooltips
  • Responsive, fills its container
  • Subscribe to filtered data by passing a function to the getBoundries prop
  • Pass in button/filter presets by passing an object to the buttonPresets prop
  • Slider and input elements can be hidden

Interface/Props

  1. Data Prop(array):
    • to enable tooltips, include an array of strings in each object named 'tooltip'. Each string will be a different line in the tooltop. CSS customization for each line coming later.
  data = [
     {
       value: 23,
       tooltip: ["Line 1", "Line 2"]
     },
     {
       value: 10,
       tooltip: ["Line 1", "Line 2"]
     },
     {
       value: -50,
       tooltip: ["Line 1", "Line 2"]
     }
  ]
  1. barMargin Prop(number):

    • percentage of max available space available to bar. 100% means each bar will touch its neighbor. Default is 0.7;
  2. getBoundries(function):

    • subscription function returning the min and max of the selected range
  3. buttonPresets(object):

    • prop object for passing in preset positions for the buttons with keys of "selectionMin" and "selectionMax".

      preSets = {
        selectionMin : 0.1,
        selectionMax : 2
      }
      
  1. showSlider(boolean)
    • set to false to hide the slider. Default is true.
  1. showInputs(boolean)

    • set to false to hide the inputs. Default is true.
  2. scaleIncrements(number)

    • controls how many numbers appear on the scale. Default is 5.

Example

<Histogram data={data}
           barMargin={0.8}
           getBoundries={this.getBoundries}
           buttonPresets={{ "selectionMin" : 0.3, "selectionMax: 2}}
           showSlider={false}
           showInputs={false}
           scaleIncrements={3}
/>

Changelog

0.2.1

  • mobile improvements
  • improved readme

0.2.0

  • improved tooltips.
  • greatly improved performance
  • added animation to bars
  • added ability to pass in presets via the buttonPresets prop
  • made slider and inputs optional
  • made number of number on scale customizable
  • added proptypes

0.1.0

  • fixed many bugs
  • added tooltips
  • improved responsiveness

0.0.9

  • updated readme

0.0.8

  • lots of bug fixes

0.0.7

  • bug fix so component will update when new props are passed to it

0.0.6

  • bars now take up entire vertical space of histogram

0.0.3

  • bug fix

0.0.2

  • added default proptypes

0.0.1

  • initial publish